Merged in fix(BOOK-659)-multiroom-name-check (pull request #3385)

fix(BOOK-659): use unique ids for multiroom booking input fields

* fix(BOOK-659): use unique ids for multiroom booking input fields


Approved-by: Bianca Widstam
Approved-by: Linus Flood

packages/booking-flow/lib/components/BookingFlowInput/index.tsx

@@ -14,6 +14,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   helpText?: string
   label: string
   name: string
+  id?: string
   registerOptions?: RegisterOptions
   hideError?: boolean
 }
@@ -28,6 +29,7 @@ const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
       label,
       maxLength,
       name,
+      id,
       placeholder,
       readOnly = false,
       registerOptions = {},
@@ -61,6 +63,7 @@ const BookingFlowInput = forwardRef<HTMLInputElement, InputProps>(
         inputMode={inputMode}
         label={label}
         maxLength={maxLength}
+        id={id}
         name={name}
         placeholder={placeholder}
         readOnly={readOnly}

packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/index.tsx

@@ -217,6 +217,7 @@ export default function Details() {
                 defaultMessage: "First name",
               })}
               maxLength={30}
+              id={`firstName-room-${roomNr}`}
               name="firstName"
               registerOptions={{
                 required: true,
@@ -236,6 +237,7 @@ export default function Details() {
                 defaultMessage: "Last name",
               })}
               maxLength={30}
+              id={`lastName-room-${roomNr}`}
               name="lastName"
               registerOptions={{
                 required: true,
@@ -277,6 +279,7 @@ export default function Details() {
                 id: "common.emailAddress",
                 defaultMessage: "Email address",
               })}
+              id={`email-room-${roomNr}`}
               name="email"
               registerOptions={{ required: true, onBlur: updateDetailsStore }}
             />
@@ -319,6 +322,7 @@ export default function Details() {
                   id: "common.membershipId",
                   defaultMessage: "Membership ID",
                 })}
+                id={`membershipNo-room-${roomNr}`}
                 name="membershipNo"
                 type="tel"
                 registerOptions={{ onBlur: updateDetailsStore }}

packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx

@@ -36,6 +36,7 @@ import useLang from "../../../hooks/useLang"
 import { useEnterDetailsStore } from "../../../stores/enter-details"
 import ConfirmBooking from "../Confirm"
 import PriceChangeDialog from "../PriceChangeDialog"
+import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
 import BookingAlert from "./BookingAlert"
 import { GuaranteeInfo } from "./GuaranteeInfo"
 import {
@@ -46,7 +47,6 @@ import {
   mustGuaranteeBooking,
   writePaymentInfoToSessionStorage,
 } from "./helpers"
-import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
 import { type PaymentFormData, paymentSchema } from "./schema"
 import { getPaymentHeadingConfig } from "./utils"
 

packages/design-system/lib/components/Form/FormInput/index.tsx

@@ -35,6 +35,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       labelPosition = 'floating',
       maxLength,
       name,
+      id,
       placeholder,
       readOnly = false,
       registerOptions = {},
@@ -88,7 +89,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
                 onChange={field.onChange}
                 value={field.value ?? ''}
                 autoComplete={autoComplete}
-                id={field.name}
+                id={id ?? field.name}
                 label={label}
                 labelPosition={labelPosition}
                 maxLength={maxLength}

packages/design-system/lib/components/Form/FormInput/input.ts

@@ -9,6 +9,8 @@ export interface FormInputProps extends InputProps {
   description?: string
   /** Icon to display with the description text. Defaults to 'info' */
   descriptionIcon?: MaterialIconProps['icon']
+  /** Field id for react-hook-form registration */
+  id?: string
   /** Field name for react-hook-form registration */
   name: string
   /** react-hook-form validation rules */