Merged in fix/submit-booking-disabled (pull request #1936)

Don't disable payment based on room forms

* Don't disable payment based on room forms


Approved-by: Arvid Norlin
Approved-by: Tobias Johansson

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -1,15 +1,15 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { cx } from "class-variance-authority"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useState } from "react"
 import { Label } from "react-aria-components"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
 import { Button } from "@scandic-hotels/design-system/Button"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
   BOOKING_CONFIRMATION_NUMBER,
@@ -76,17 +76,21 @@ export default function PaymentClient({
 
   const [showBookingAlert, setShowBookingAlert] = useState(false)
 
-  const { booking, rooms, totalPrice, isSubmitting, preSubmitCallbacks, setIsSubmitting } =
-    useEnterDetailsStore((state) => ({
-      booking: state.booking,
-      rooms: state.rooms,
-      totalPrice: state.totalPrice,
-      preSubmitCallbacks: state.preSubmitCallbacks,
-      isSubmitting: state.isSubmitting,
-      setIsSubmitting: state.actions.setIsSubmitting,
-    }))
-
-  const allRoomsComplete = rooms.every((r) => r.isComplete)
+  const {
+    booking,
+    rooms,
+    totalPrice,
+    isSubmitting,
+    preSubmitCallbacks,
+    setIsSubmitting,
+  } = useEnterDetailsStore((state) => ({
+    booking: state.booking,
+    rooms: state.rooms,
+    totalPrice: state.totalPrice,
+    preSubmitCallbacks: state.preSubmitCallbacks,
+    isSubmitting: state.isSubmitting,
+    setIsSubmitting: state.actions.setIsSubmitting,
+  }))
 
   const bookingMustBeGuaranteed = rooms.some(({ room }, idx) => {
     if (idx === 0 && isUserLoggedIn && room.memberMustBeGuaranteed) {
@@ -329,24 +333,24 @@ export default function PaymentClient({
       const guarantee = data.guarantee
       const useSavedCard = savedCreditCard
         ? {
-          card: {
-            alias: savedCreditCard.alias,
-            expiryDate: savedCreditCard.expirationDate,
-            cardType: savedCreditCard.cardType,
-          },
-        }
+            card: {
+              alias: savedCreditCard.alias,
+              expiryDate: savedCreditCard.expirationDate,
+              cardType: savedCreditCard.cardType,
+            },
+          }
         : {}
 
       const shouldUsePayment =
         guarantee || bookingMustBeGuaranteed || !hasOnlyFlexRates
       const payment = shouldUsePayment
         ? {
-          paymentMethod: paymentMethod,
-          ...useSavedCard,
-          success: `${paymentRedirectUrl}/success`,
-          error: `${paymentRedirectUrl}/error`,
-          cancel: `${paymentRedirectUrl}/cancel`,
-        }
+            paymentMethod: paymentMethod,
+            ...useSavedCard,
+            success: `${paymentRedirectUrl}/success`,
+            error: `${paymentRedirectUrl}/error`,
+            cancel: `${paymentRedirectUrl}/cancel`,
+          }
         : undefined
 
       if (guarantee || (bookingMustBeGuaranteed && hasOnlyFlexRates)) {
@@ -482,7 +486,7 @@ export default function PaymentClient({
   return (
     <section
       className={cx(styles.paymentSection, {
-        [styles.disabled]: !allRoomsComplete || isSubmitting,
+        [styles.disabled]: isSubmitting,
       })}
     >
       <header>
@@ -555,7 +559,7 @@ export default function PaymentClient({
                           value={savedCreditCard.id}
                           label={
                             PAYMENT_METHOD_TITLES[
-                            savedCreditCard.cardType as PaymentMethodEnum
+                              savedCreditCard.cardType as PaymentMethodEnum
                             ]
                           }
                           cardNumber={savedCreditCard.truncatedNumber}
@@ -584,7 +588,7 @@ export default function PaymentClient({
                         value={paymentMethod}
                         label={
                           PAYMENT_METHOD_TITLES[
-                          paymentMethod as PaymentMethodEnum
+                            paymentMethod as PaymentMethodEnum
                           ]
                         }
                       />
@@ -606,9 +610,7 @@ export default function PaymentClient({
           <div className={styles.submitButton}>
             <Button
               type="submit"
-              isDisabled={
-                !methods.formState.isValid || methods.formState.isSubmitting
-              }
+              isDisabled={methods.formState.isSubmitting}
               isPending={isSubmitting}
               typography="Body/Supporting text (caption)/smBold"
             >