feat: add mobile summary

components/HotelReservation/EnterDetails/Summary/BottomSheet/index.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { PropsWithChildren, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { formatNumber } from "@/utils/format"
+
+import styles from "./bottomSheet.module.css"
+
+export function SummaryBottomSheet({ children }: PropsWithChildren) {
+  const intl = useIntl()
+
+  const { isSummaryOpen, toggleSummaryOpen, totalPrice } = useEnterDetailsStore(
+    (state) => ({
+      isSummaryOpen: state.isSummaryOpen,
+      toggleSummaryOpen: state.toggleSummaryOpen,
+      totalPrice: state.totalPrice,
+    })
+  )
+
+  return (
+    <div className={styles.wrapper} data-open={isSummaryOpen}>
+      <div className={styles.content}>{children}</div>
+      <div className={styles.bottomSheet}>
+        <button
+          data-open={isSummaryOpen}
+          onClick={toggleSummaryOpen}
+          className={styles.priceDetails}
+        >
+          <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
+          <Subtitle>
+            {intl.formatMessage(
+              { id: "{amount} {currency}" },
+              {
+                amount: formatNumber(totalPrice.local.price),
+                currency: totalPrice.local.currency,
+              }
+            )}
+          </Subtitle>
+          <Caption color="baseTextHighContrast" type="underline">
+            {intl.formatMessage({ id: "See details" })}
+          </Caption>
+        </button>
+        <Button intent="primary" size="large" type="submit">
+          {intl.formatMessage({ id: "Complete booking" })}
+        </Button>
+      </div>
+    </div>
+  )
+}