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/stores/enter-details/index.ts

@@ -99,7 +99,7 @@ export function createDetailsStore(
     return total
   }, {})
 
-  return create<DetailsState>()((set) => ({
+  return create<DetailsState>()((set, get) => ({
     availableBeds,
     booking: initialState.booking,
     roomCategories: initialState.roomCategories,
@@ -404,6 +404,47 @@ export function createDetailsStore(
           })
         )
       },
+
+      async runPreSubmitCallbacks(): Promise<HTMLElement | undefined> {
+        const callbacks = get().preSubmitCallbacks
+        const stepOrder = ["bedType", "breakfast", "details"]
+
+        const sortedKeys = Object.keys(callbacks).sort((a, b) => {
+          const [aIdx, aStep] = a.split("-")
+          const [bIdx, bStep] = b.split("-")
+          if (aIdx !== bIdx) return Number(aIdx) - Number(bIdx)
+          return stepOrder.indexOf(aStep) - stepOrder.indexOf(bStep)
+        })
+
+        const roomsMap = new Map<string, string[]>()
+        for (const key of sortedKeys) {
+          const [roomIdx] = key.split("-")
+          if (!roomsMap.has(roomIdx)) {
+            roomsMap.set(roomIdx, [])
+          }
+          roomsMap.get(roomIdx)?.push(key)
+        }
+
+        let firstInvalidElement: HTMLElement | undefined = undefined
+
+        for (const roomIdx of Array.from(roomsMap.keys()).sort(
+          (a, b) => Number(a) - Number(b)
+        )) {
+          const roomKeys = roomsMap.get(roomIdx)!
+          const invalidElementsInRoom: HTMLElement[] = []
+
+          for (const key of roomKeys) {
+            const el = await callbacks[key]()
+            if (el) invalidElementsInRoom.push(el)
+          }
+
+          if (!firstInvalidElement && invalidElementsInRoom.length > 0) {
+            firstInvalidElement = invalidElementsInRoom.at(0)
+          }
+        }
+
+        return firstInvalidElement
+      },
     },
   }))
 }

packages/booking-flow/lib/stores/enter-details/types.ts

@@ -96,7 +96,11 @@ export interface DetailsState {
     setIsSubmitting: (isSubmitting: boolean) => void
     toggleSummaryOpen: () => void
     updateSeachParamString: (searchParamString: string) => void
-    addPreSubmitCallback: (name: string, callback: () => void) => void
+    addPreSubmitCallback: (
+      name: string,
+      callback: () => Promise<HTMLElement | undefined>
+    ) => void
+    runPreSubmitCallbacks: () => Promise<HTMLElement | undefined>
   }
   availableBeds: Record<string, number>
   booking: DetailsBooking
@@ -112,7 +116,7 @@ export interface DetailsState {
   hotelName: string
   roomCategories: RoomCategories
   defaultCurrency: CurrencyEnum
-  preSubmitCallbacks: Record<string, () => void>
+  preSubmitCallbacks: Record<string, () => Promise<HTMLElement | undefined>>
 }
 
 export type PersistedState = {