fix: handle submit from summary bottom sheet

components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css

@@ -13,8 +13,6 @@
   grid-template-columns: 1fr auto;
   padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5)
     var(--Spacing-x3);
-  justify-content: space-between;
-  width: auto;
   align-items: flex-start;
   transition: 0.5s ease-in-out;
 }
@@ -24,11 +22,9 @@
   border: none;
   background: none;
   text-align: start;
-  opacity: 1;
-  transition:
-    opacity 0.5s ease-in-out,
-    padding 0.5s ease-in-out;
+  transition: padding 0.5s ease-in-out;
   cursor: pointer;
+  white-space: nowrap;
 }
 
 .wrapper[data-open="true"] {
@@ -36,15 +32,39 @@
 }
 
 .wrapper[data-open="true"] .bottomSheet {
-  grid-template-columns: 0fr 1fr;
+  grid-template-columns: 0fr auto;
 }
 
 .wrapper[data-open="true"] .priceDetailsButton {
+  animation: fadeOut 0.3s ease-out;
   opacity: 0;
   padding: 0;
 }
 
+.wrapper[data-open="false"] .priceDetailsButton {
+  animation: fadeIn 0.8s ease-in;
+  opacity: 1;
+}
+
 .content,
 .priceDetailsButton {
   overflow: hidden;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { PropsWithChildren, useState } from "react"
+import { PropsWithChildren } from "react"
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
@@ -9,18 +9,20 @@ import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import { formId } from "../../Payment"
+
 import styles from "./bottomSheet.module.css"
 
 export function SummaryBottomSheet({ children }: PropsWithChildren) {
   const intl = useIntl()
 
-  const { isSummaryOpen, toggleSummaryOpen, totalPrice } = useEnterDetailsStore(
-    (state) => ({
+  const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
+    useEnterDetailsStore((state) => ({
       isSummaryOpen: state.isSummaryOpen,
       toggleSummaryOpen: state.toggleSummaryOpen,
       totalPrice: state.totalPrice,
-    })
-  )
+      isSubmittingDisabled: state.isSubmittingDisabled,
+    }))
 
   return (
     <div className={styles.wrapper} data-open={isSummaryOpen}>
@@ -45,7 +47,13 @@ export function SummaryBottomSheet({ children }: PropsWithChildren) {
             {intl.formatMessage({ id: "See details" })}
           </Caption>
         </button>
-        <Button intent="primary" size="large" type="submit">
+        <Button
+          intent="primary"
+          size="large"
+          type="submit"
+          disabled={isSubmittingDisabled}
+          form={formId}
+        >
           {intl.formatMessage({ id: "Complete booking" })}
         </Button>
       </div>