feat: merge stores, fix auto navigation, split summary

2024-11-12 15:30:59 +01:00
parent a69d14ff61
commit ccb15593ea
82 changed files with 2149 additions and 1842 deletions
--- a/components/HotelReservation/Summary/BottomSheet/index.tsx
+++ b/components/HotelReservation/Summary/BottomSheet/index.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { PropsWithChildren } from "react"
+import { useIntl } from "react-intl"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import { formId } from "@/components/HotelReservation/EnterDetails/Payment"
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./bottomSheet.module.css"
+
+export function SummaryBottomSheet({ children }: PropsWithChildren) {
+  const intl = useIntl()
+
+  const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
+    useEnterDetailsStore((state) => ({
+      isSummaryOpen: state.isSummaryOpen,
+      toggleSummaryOpen: state.actions.toggleSummaryOpen,
+      totalPrice: state.totalPrice,
+      isSubmittingDisabled: state.isSubmittingDisabled,
+    }))
+
+  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.priceDetailsButton}
+        >
+          <Caption>{intl.formatMessage({ id: "Total price" })}:</Caption>
+          <Subtitle>
+            {intl.formatMessage(
+              { id: "{amount} {currency}" },
+              {
+                amount: intl.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"
+          disabled={isSubmittingDisabled}
+          form={formId}
+        >
+          {intl.formatMessage({ id: "Complete booking" })}
+        </Button>
+      </div>
+    </div>
+  )
+}