Merged in fix/BOOK-323-enter-details-scroll-error (pull request #2986)

Fix/BOOK-323 enter details scroll error

* fix(BOOK-323): scroll to invalid element on submit on enter details

* fix(BOOK-323): update error message design

* fix(BOOK-323): clean up

* fix(BOOK-323): scroll to fields in room in right order

* fix(BOOK-323): add id to translations

* fix(BOOK-323): remove undefined

* fix(BOOK-323): fix submitting state

* fix(BOOK-323): use ref in multiroom for scrolling to right element, add membershipNo

* fix(BOOK-323): fix invalid border country

* fix(BOOK-323): use error message component

* fix(BOOK-323): fix invalid focused styling on mobile

* fix(BOOK-323): remove redundant dependency in callback


Approved-by: Erik Tiekstra

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

@@ -23,10 +23,12 @@ export default function Signup({
   errors,
   name,
   registerOptions,
+  refs,
 }: {
   errors: FieldErrors
   name: string
   registerOptions?: RegisterOptions
+  refs: React.RefObject<Record<string, HTMLElement | null>>
 }) {
   const intl = useIntl()
   const lang = useLang()
@@ -45,15 +47,26 @@ export default function Signup({
   if (isJoinChecked)
     return (
       <div className={styles.additionalFormData}>
-        <BookingFlowInput
-          name="zipCode"
-          label={intl.formatMessage({
-            id: "common.zipCode",
-            defaultMessage: "Zip code",
-          })}
-          registerOptions={{ required: true, ...registerOptions }}
-        />
-        <div className={styles.dateField}>
+        <div
+          ref={(el) => {
+            refs.current.zipCode = el
+          }}
+        >
+          <BookingFlowInput
+            name="zipCode"
+            label={intl.formatMessage({
+              id: "common.zipCode",
+              defaultMessage: "Zip code",
+            })}
+            registerOptions={{ required: true, ...registerOptions }}
+          />
+        </div>
+        <div
+          className={styles.dateField}
+          ref={(el) => {
+            refs.current.dateOfBirth = el
+          }}
+        >
           <header>
             <Caption type="bold">
               <span className={styles.required}>
@@ -94,5 +107,13 @@ export default function Signup({
 
   if (config.enterDetailsMembershipIdInputLocation === "join-card") return null
 
-  return <MembershipNumberInput registerOptions={registerOptions} />
+  return (
+    <div
+      ref={(el) => {
+        refs.current.membershipNo = el
+      }}
+    >
+      <MembershipNumberInput registerOptions={registerOptions} />
+    </div>
+  )
 }