sub-task/ SW-695 Prefill Guests data in booking widget

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -21,7 +21,7 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
   const intl = useIntl()
   const adultsLabel = intl.formatMessage({ id: "Adults" })
   const { setValue } = useFormContext()
-  const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
+  const { adults, child, childrenInAdultsBed } = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex]
   )
   const increaseAdults = useGuestsRoomsStore((state) => state.increaseAdults)
@@ -39,13 +39,13 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
       decreaseAdults(roomIndex)
       setValue(`rooms.${roomIndex}.adults`, adults - 1)
       if (childrenInAdultsBed > adults) {
-        const toUpdateIndex = children.findIndex(
+        const toUpdateIndex = child.findIndex(
           (child: Child) => child.bed == BedTypeEnum.IN_ADULTS_BED
         )
         if (toUpdateIndex != -1) {
           setValue(
             `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
-            children[toUpdateIndex].age < 3
+            child[toUpdateIndex].age < 3
               ? BedTypeEnum.IN_CRIB
               : BedTypeEnum.IN_EXTRA_BED
           )

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -26,7 +26,7 @@ export default function ChildInfoSelector({
   const ageLabel = intl.formatMessage({ id: "Age" })
   const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
-  const { setValue, trigger } = useFormContext()
+  const { setValue } = useFormContext()
   const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex]
   )
@@ -51,10 +51,11 @@ export default function ChildInfoSelector({
 
   function updateSelectedAge(age: number) {
     updateChildAge(age, roomIndex, index)
-    setValue(`rooms.${roomIndex}.children.${index}.age`, age)
+    setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
+      shouldValidate: true,
+    })
     const availableBedTypes = getAvailableBeds(age)
     updateSelectedBed(availableBedTypes[0].value)
-    trigger("rooms")
   }
 
   function updateSelectedBed(bed: number) {
@@ -64,7 +65,7 @@ export default function ChildInfoSelector({
       decreaseChildInAdultsBed(roomIndex)
     }
     updateChildBed(bed, roomIndex, index)
-    setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
+    setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
   }
 
   const allBedTypes: ChildBed[] = [
@@ -109,8 +110,9 @@ export default function ChildInfoSelector({
             onSelect={(key) => {
               updateSelectedAge(key as number)
             }}
-            name={`rooms.${roomIndex}.children.${index}.age`}
+            name={`rooms.${roomIndex}.child.${index}.age`}
             placeholder={ageLabel}
+            maxHeight={150}
           />
         </div>
         <div>
@@ -123,7 +125,7 @@ export default function ChildInfoSelector({
               onSelect={(key) => {
                 updateSelectedBed(key as number)
               }}
-              name={`rooms.${roomIndex}.children.${index}.age`}
+              name={`rooms.${roomIndex}.child.${index}.age`}
               placeholder={bedLabel}
             />
           ) : null}

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -19,9 +19,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
   const { setValue, trigger } = useFormContext<BookingWidgetSchema>()
-  const children = useGuestsRoomsStore(
-    (state) => state.rooms[roomIndex].children
-  )
+  const children = useGuestsRoomsStore((state) => state.rooms[roomIndex].child)
   const increaseChildren = useGuestsRoomsStore(
     (state) => state.increaseChildren
   )
@@ -32,18 +30,22 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   function increaseChildrenCount(roomIndex: number) {
     if (children.length < 5) {
       increaseChildren(roomIndex)
-      setValue(`rooms.${roomIndex}.children.${children.length}`, {
-        age: -1,
-        bed: -1,
-      })
-      trigger("rooms")
+      setValue(
+        `rooms.${roomIndex}.child.${children.length}`,
+        {
+          age: -1,
+          bed: -1,
+        },
+        { shouldValidate: true }
+      )
     }
   }
   function decreaseChildrenCount(roomIndex: number) {
     if (children.length > 0) {
       const newChildrenList = decreaseChildren(roomIndex)
-      setValue(`rooms.${roomIndex}.children`, newChildrenList)
-      trigger("rooms")
+      setValue(`rooms.${roomIndex}.child`, newChildrenList, {
+        shouldValidate: true,
+      })
     }
   }
 

components/GuestsRoomsPicker/Provider/GuestsRoomsProvider.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { PropsWithChildren, useRef } from "react"
+
+import {
+  GuestsRoomsContext,
+  type GuestsRoomsStore,
+  initGuestsRoomsState,
+} from "@/stores/guests-rooms"
+
+import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function GuestsRoomsProvider({
+  selectedGuests,
+  children,
+}: PropsWithChildren<{ selectedGuests?: GuestsRoom[] }>) {
+  const initialStore = useRef<GuestsRoomsStore>()
+  if (!initialStore.current) {
+    initialStore.current = initGuestsRoomsState(selectedGuests)
+  }
+
+  return (
+    <GuestsRoomsContext.Provider value={initialStore.current}>
+      {children}
+    </GuestsRoomsContext.Provider>
+  )
+}

components/GuestsRoomsPicker/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useCallback, useEffect, useRef, useState } from "react"
+import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
@@ -12,9 +13,14 @@ import GuestsRoomsPicker from "./GuestsRoomsPicker"
 
 import styles from "./guests-rooms-picker.module.css"
 
-export default function GuestsRoomsPickerForm() {
+export default function GuestsRoomsPickerForm({
+  name = "rooms",
+}: {
+  name: string
+}) {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
+  const { setValue } = useFormContext()
   const { rooms, adultCount, childCount, setIsValidated } = useGuestsRoomsStore(
     (state) => ({
       rooms: state.rooms,
@@ -32,10 +38,11 @@ export default function GuestsRoomsPickerForm() {
     if (guestRoomsValidData.success) {
       setIsOpen(false)
       setIsValidated(false)
+      setValue(name, guestRoomsValidData.data, { shouldValidate: true })
     } else {
       setIsValidated(true)
     }
-  }, [rooms, setIsValidated, setIsOpen])
+  }, [rooms, name, setValue, setIsValidated, setIsOpen])
 
   useEffect(() => {
     function handleClickOutside(evt: Event) {