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,8 +76,14 @@ export default function PaymentClient({
 
   const [showBookingAlert, setShowBookingAlert] = useState(false)
 
-  const { booking, rooms, totalPrice, isSubmitting, preSubmitCallbacks, setIsSubmitting } =
+  const {
-    useEnterDetailsStore((state) => ({
+    booking,
+    rooms,
+    totalPrice,
+    isSubmitting,
+    preSubmitCallbacks,
+    setIsSubmitting,
+  } = useEnterDetailsStore((state) => ({
     booking: state.booking,
     rooms: state.rooms,
     totalPrice: state.totalPrice,
@@ -86,8 +92,6 @@ export default function PaymentClient({
     setIsSubmitting: state.actions.setIsSubmitting,
   }))
 
-  const allRoomsComplete = rooms.every((r) => r.isComplete)
-
   const bookingMustBeGuaranteed = rooms.some(({ room }, idx) => {
     if (idx === 0 && isUserLoggedIn && room.memberMustBeGuaranteed) {
       return true
@@ -482,7 +486,7 @@ export default function PaymentClient({
   return (
     <section
       className={cx(styles.paymentSection, {
-        [styles.disabled]: !allRoomsComplete || isSubmitting,
+        [styles.disabled]: isSubmitting,
       })}
     >
       <header>
@@ -606,9 +610,7 @@ export default function PaymentClient({
           <div className={styles.submitButton}>
             <Button
               type="submit"
-              isDisabled={
+              isDisabled={methods.formState.isSubmitting}
-                !methods.formState.isValid || methods.formState.isSubmitting
-              }
               isPending={isSubmitting}
               typography="Body/Supporting text (caption)/smBold"
             >