Merged in fix/sw-2501-remove-continue-button-light (pull request #1892)

fix(sw-2501): remove the continue buttons on enter details

This removes the continue buttons on the enter details page.

This is only that, not the refactoring of the whole enter details page with changing to one form etc. Since I just didn’t complete that refactor today I decided to do this light variant for now.

A quick explanation is that the continue buttons are removed and instead the form is submitted (meaning saving the form data to the store) on blur on the input elements IF the form is valid. If it’s invalid we change the isComplete flag in the store to false. This will hopefully also fix a bug where you were able to submit old data if the new data is invalid.

When clicking the submit button and a room is incomplete/invalid the browser scrolls to the first invalid room.

Approved-by: Erik Tiekstra

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

@@ -33,6 +33,7 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import useLang from "@/hooks/useLang"
+import useStickyPosition from "@/hooks/useStickyPosition"
 import { trackPaymentEvent } from "@/utils/tracking"
 import { trackEvent } from "@/utils/tracking/base"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
@@ -71,6 +72,7 @@ export default function PaymentClient({
   const lang = useLang()
   const intl = useIntl()
   const searchParams = useSearchParams()
+  const { getTopOffset } = useStickyPosition({})
 
   const [showPaymentAlert, setShowPaymentAlert] = useState(false)
 
@@ -80,8 +82,6 @@ export default function PaymentClient({
     totalPrice: state.totalPrice,
   }))
 
-  const allRoomsComplete = rooms.every((r) => r.isComplete)
-
   const bookingMustBeGuaranteed = rooms.some(({ room }, idx) => {
     if (idx === 0 && isUserLoggedIn && room.memberMustBeGuaranteed) {
       return true
@@ -279,6 +279,30 @@ export default function PaymentClient({
 
   const handleSubmit = useCallback(
     (data: PaymentFormData) => {
+      const firstIncompleteRoomIndex = rooms.findIndex(
+        (room) => !room.isComplete
+      )
+
+      // If any room is not complete/valid, scroll to it
+      if (firstIncompleteRoomIndex !== -1) {
+        const roomElement = document.getElementById(
+          `room-${firstIncompleteRoomIndex + 1}`
+        )
+
+        if (!roomElement) {
+          return
+        }
+        const roomElementTop =
+          roomElement.getBoundingClientRect().top + window.scrollY
+
+        window.scrollTo({
+          top: roomElementTop - getTopOffset() - 20,
+          behavior: "smooth",
+        })
+
+        return
+      }
+
       const paymentMethod = getPaymentMethod(data.paymentMethod)
 
       const savedCreditCard = savedCreditCards?.find(
@@ -423,6 +447,7 @@ export default function PaymentClient({
       hasOnlyFlexRates,
       bookingMustBeGuaranteed,
       isUserLoggedIn,
+      getTopOffset,
     ]
   )
 
@@ -446,9 +471,7 @@ export default function PaymentClient({
   })
 
   return (
-    <section
-      className={`${styles.paymentSection} ${allRoomsComplete ? "" : styles.disabled}`}
-    >
+    <section className={styles.paymentSection}>
       <header>
         <Title level="h2" as="h4">
           {hasOnlyFlexRates && bookingMustBeGuaranteed
@@ -573,9 +596,7 @@ export default function PaymentClient({
               theme="base"
               size="small"
               type="submit"
-              disabled={
-                !methods.formState.isValid || methods.formState.isSubmitting
-              }
+              disabled={methods.formState.isSubmitting}
             >
               {intl.formatMessage({
                 defaultMessage: "Complete booking",