Merged in fix/sw-1867-multiroom-guests (pull request #1822)

fix(sw-1867): Don't allow same name or membno between rooms

* fix(sw-1867): Don't allow same name or membno between rooms

We don't want to allow two different rooms to have the same firstname
and lastname combination or the same membership number.

* Fine tune validation triggers

* Add comments explaining manual validation triggering

* Change to react-hook-form built-in deps instead


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useEffect, useMemo } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -17,7 +18,7 @@ import { trackPaymentSectionOpen } from "@/utils/tracking/booking"
 
 import { hasPrepaidRate } from "../../Payment/helpers"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
-import { multiroomDetailsSchema } from "./schema"
+import { getMultiroomDetailsSchema } from "./schema"
 
 import styles from "./details.module.css"
 
@@ -43,11 +44,27 @@ export default function Details() {
   } = useRoomContext()
   const initialData = room.guest
 
+  /**
+   * The data that each room needs from each other to do validations
+   * across the rooms
+   */
+  const crossValidationData = useMemo(
+    () =>
+      rooms
+        .filter((_, i) => i !== idx)
+        .map((room) => ({
+          firstName: room.room.guest.firstName,
+          lastName: room.room.guest.lastName,
+          membershipNo: room.room.guest.membershipNo,
+        })),
+    [idx, rooms]
+  )
+
   const isPaymentNext = idx === lastRoom
   const methods = useForm<MultiroomDetailsSchema>({
     criteriaMode: "all",
     mode: "all",
-    resolver: zodResolver(multiroomDetailsSchema),
+    resolver: zodResolver(getMultiroomDetailsSchema(crossValidationData)),
     reValidateMode: "onChange",
     values: {
       countryCode: initialData.countryCode,
@@ -63,6 +80,22 @@ export default function Details() {
     },
   })
 
+  // 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.
+  useEffect(() => {
+    const { firstName, lastName, membershipNo } = methods.getValues()
+    if (firstName) {
+      methods.trigger("firstName")
+    }
+    if (lastName) {
+      methods.trigger("lastName")
+    }
+    if (membershipNo) {
+      methods.trigger("membershipNo")
+    }
+  }, [crossValidationData, methods])
+
   const guestIsGoingToJoin = methods.watch("join")
   const guestIsMember = methods.watch("membershipNo")
 
@@ -93,7 +126,10 @@ export default function Details() {
             })}
             maxLength={30}
             name="firstName"
-            registerOptions={{ required: true }}
+            registerOptions={{
+              required: true,
+              deps: "lastName",
+            }}
           />
           <Input
             label={intl.formatMessage({
@@ -101,7 +137,10 @@ export default function Details() {
             })}
             maxLength={30}
             name="lastName"
-            registerOptions={{ required: true }}
+            registerOptions={{
+              required: true,
+              deps: "firstName",
+            }}
           />
           <CountrySelect
             className={styles.fullWidth}