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/Details/Multiroom/index.tsx

@@ -1,11 +1,9 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect, useMemo } from "react"
+import { useCallback, useEffect, useMemo } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { Button } from "@scandic-hotels/design-system/Button"
-
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
@@ -26,16 +24,12 @@ const formID = "enter-details"
 export default function Details() {
   const intl = useIntl()
 
-  const { canProceedToPayment, lastRoom, rooms } = useEnterDetailsStore(
-    (state) => ({
-      canProceedToPayment: state.canProceedToPayment,
-      lastRoom: state.lastRoom,
-      rooms: state.rooms,
-    })
-  )
+  const { rooms } = useEnterDetailsStore((state) => ({
+    rooms: state.rooms,
+  }))
 
   const {
-    actions: { updateDetails },
+    actions: { updateDetails, setIncomplete },
     idx,
     room,
     roomNr,
@@ -58,7 +52,6 @@ export default function Details() {
     [idx, rooms]
   )
 
-  const isPaymentNext = idx === lastRoom
   const methods = useForm<MultiroomDetailsSchema>({
     criteriaMode: "all",
     mode: "all",
@@ -78,6 +71,16 @@ export default function Details() {
     },
   })
 
+  const updateDetailsStore = useCallback(() => {
+    if (methods.formState.isValid) {
+      methods.handleSubmit(updateDetails)()
+    } else {
+      setIncomplete()
+    }
+  }, [methods, setIncomplete, updateDetails])
+
+  useEffect(updateDetailsStore, [methods.formState.isValid, updateDetailsStore])
+
   // Trigger validation of the room manually when another room changes its data.
   // Only do it if the field has a value, to avoid error states before the user
   // has filled anything in.
@@ -125,6 +128,7 @@ export default function Details() {
             registerOptions={{
               required: true,
               deps: "lastName",
+              onBlur: updateDetailsStore,
             }}
           />
           <Input
@@ -136,6 +140,7 @@ export default function Details() {
             registerOptions={{
               required: true,
               deps: "firstName",
+              onBlur: updateDetailsStore,
             }}
           />
           <CountrySelect
@@ -144,7 +149,7 @@ export default function Details() {
               defaultMessage: "Country",
             })}
             name="countryCode"
-            registerOptions={{ required: true }}
+            registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
           <Input
             className={styles.fullWidth}
@@ -152,7 +157,7 @@ export default function Details() {
               defaultMessage: "Email address",
             })}
             name="email"
-            registerOptions={{ required: true }}
+            registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
           <Phone
             className={styles.fullWidth}
@@ -160,7 +165,7 @@ export default function Details() {
               defaultMessage: "Phone number",
             })}
             name="phoneNumber"
-            registerOptions={{ required: true }}
+            registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
           {guestIsGoingToJoin ? null : (
             <Input
@@ -170,35 +175,11 @@ export default function Details() {
               })}
               name="membershipNo"
               type="tel"
+              registerOptions={{ onBlur: updateDetailsStore }}
             />
           )}
-          <SpecialRequests />
+          <SpecialRequests registerOptions={{ onBlur: updateDetailsStore }} />
         </div>
-        <footer className={styles.footer}>
-          <Button
-            isDisabled={
-              !(
-                methods.formState.isValid ||
-                (isPaymentNext && canProceedToPayment)
-              )
-            }
-            variant="Tertiary"
-            typography="Body/Paragraph/mdBold"
-            size="Medium"
-            type="submit"
-          >
-            {isPaymentNext
-              ? intl.formatMessage({
-                  defaultMessage: "Continue",
-                })
-              : intl.formatMessage(
-                  {
-                    defaultMessage: "Continue to room {nextRoomNumber}",
-                  },
-                  { nextRoomNumber: roomNr + 1 }
-                )}
-          </Button>
-        </footer>
       </form>
     </FormProvider>
   )