fix: handle submit from summary bottom sheet

components/HotelReservation/EnterDetails/Payment/index.tsx

@@ -45,6 +45,8 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 const maxRetries = 40
 const retryInterval = 2000
 
+export const formId = "submit-booking"
+
 function isPaymentMethodEnum(value: string): value is PaymentMethodEnum {
   return Object.values(PaymentMethodEnum).includes(value as PaymentMethodEnum)
 }
@@ -59,10 +61,13 @@ export default function Payment({
   const lang = useLang()
   const intl = useIntl()
   const queryParams = useSearchParams()
-  const { userData, roomData } = useEnterDetailsStore((state) => ({
-    userData: state.userData,
-    roomData: state.roomData,
-  }))
+  const { userData, roomData, setIsSubmittingDisabled } = useEnterDetailsStore(
+    (state) => ({
+      userData: state.userData,
+      roomData: state.roomData,
+      setIsSubmittingDisabled: state.setIsSubmittingDisabled,
+    })
+  )
 
   const {
     firstName,
@@ -119,6 +124,16 @@ export default function Payment({
     }
   }, [bookingStatus, router])
 
+  useEffect(() => {
+    setIsSubmittingDisabled(
+      !methods.formState.isValid || methods.formState.isSubmitting
+    )
+  }, [
+    methods.formState.isValid,
+    methods.formState.isSubmitting,
+    setIsSubmittingDisabled,
+  ])
+
   function handleSubmit(data: PaymentFormData) {
     const allQueryParams =
       queryParams.size > 0 ? `?${queryParams.toString()}` : ""
@@ -209,6 +224,7 @@ export default function Payment({
       <form
         className={styles.paymentContainer}
         onSubmit={methods.handleSubmit(handleSubmit)}
+        id={formId}
       >
         {mustBeGuaranteed ? (
           <section className={styles.section}>
@@ -309,15 +325,16 @@ export default function Payment({
             </Caption>
           </AriaLabel>
         </section>
-        <Button
-          type="submit"
-          className={styles.submitButton}
-          disabled={
-            !methods.formState.isValid || methods.formState.isSubmitting
-          }
-        >
-          {intl.formatMessage({ id: "Complete booking & go to payment" })}
-        </Button>
+        <div className={styles.submitButton}>
+          <Button
+            type="submit"
+            disabled={
+              !methods.formState.isValid || methods.formState.isSubmitting
+            }
+          >
+            {intl.formatMessage({ id: "Complete booking" })}
+          </Button>
+        </div>
       </form>
     </FormProvider>
   )

components/HotelReservation/EnterDetails/Payment/payment.module.css

@@ -18,7 +18,7 @@
 }
 
 .submitButton {
-  align-self: flex-start;
+  display: none;
 }
 
 .paymentContainer .link {
@@ -31,3 +31,10 @@
   flex-direction: row;
   gap: var(--Spacing-x-one-and-half);
 }
+
+@media screen and (min-width: 1367px) {
+  .submitButton {
+    display: flex;
+    align-self: flex-start;
+  }
+}