refactor: url management in hotel reservation flow

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -29,8 +29,8 @@ export default function ChildInfoSelector({
   index = 0,
   roomIndex = 0,
 }: ChildInfoSelectorProps) {
-  const ageFieldName = `rooms.${roomIndex}.child.${index}.age`
-  const bedFieldName = `rooms.${roomIndex}.child.${index}.bed`
+  const ageFieldName = `rooms.${roomIndex}.children.${index}.age`
+  const bedFieldName = `rooms.${roomIndex}.children.${index}.bed`
   const intl = useIntl()
   const ageLabel = intl.formatMessage({ id: "Age" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
@@ -38,11 +38,11 @@ export default function ChildInfoSelector({
   const { setValue, formState } = useFormContext()
 
   function updateSelectedBed(bed: number) {
-    setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
+    setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
   }
 
   function updateSelectedAge(age: number) {
-    setValue(`rooms.${roomIndex}.child.${index}.age`, age)
+    setValue(`rooms.${roomIndex}.children.${index}.age`, age)
     const availableBedTypes = getAvailableBeds(age)
     updateSelectedBed(availableBedTypes[0].value)
   }
@@ -77,7 +77,7 @@ export default function ChildInfoSelector({
   }
 
   //@ts-expect-error: formState is typed with FormValues
-  const roomErrors = formState.errors.rooms?.[roomIndex]?.child?.[index]
+  const roomErrors = formState.errors.rooms?.[roomIndex]?.children?.[index]
 
   const ageError = roomErrors?.age
   const bedError = roomErrors?.bed

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -24,7 +24,7 @@ export default function ChildSelector({
 
   function increaseChildrenCount(roomIndex: number) {
     if (currentChildren.length < 5) {
-      setValue(`rooms.${roomIndex}.child.${currentChildren.length}`, {
+      setValue(`rooms.${roomIndex}.children.${currentChildren.length}`, {
         age: undefined,
         bed: undefined,
       })
@@ -33,7 +33,7 @@ export default function ChildSelector({
   function decreaseChildrenCount(roomIndex: number) {
     if (currentChildren.length > 0) {
       currentChildren.pop()
-      setValue(`rooms.${roomIndex}.child`, currentChildren)
+      setValue(`rooms.${roomIndex}.children`, currentChildren)
     }
   }
 

components/GuestsRoomsPicker/Form.tsx

@@ -48,7 +48,7 @@ export default function GuestsRoomsPickerDialog({
   }, [trigger, onClose])
 
   const handleAddRoom = useCallback(() => {
-    setValue("rooms", [...roomsValue, { adults: 1, child: [] }], {
+    setValue("rooms", [...roomsValue, { adults: 1, children: [] }], {
       shouldValidate: true,
     })
   }, [roomsValue, setValue])

components/GuestsRoomsPicker/GuestsRoom/index.tsx

@@ -25,7 +25,7 @@ export function GuestsRoom({
   const intl = useIntl()
   const roomLabel = intl.formatMessage({ id: "Room" })
 
-  const childrenInAdultsBed = room.child.filter(
+  const childrenInAdultsBed = room.children.filter(
     (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
   ).length
 
@@ -38,13 +38,13 @@ export function GuestsRoom({
         <AdultSelector
           roomIndex={index}
           currentAdults={room.adults}
-          currentChildren={room.child}
+          currentChildren={room.children}
           childrenInAdultsBed={childrenInAdultsBed}
         />
         <ChildSelector
           roomIndex={index}
           currentAdults={room.adults}
-          currentChildren={room.child}
+          currentChildren={room.children}
           childrenInAdultsBed={childrenInAdultsBed}
         />
         {index !== 0 && (

components/GuestsRoomsPicker/index.tsx

@@ -28,7 +28,8 @@ export default function GuestsRoomsPickerForm() {
   const [isDesktop, setIsDesktop] = useState(true)
   const [isOpen, setIsOpen] = useState(false)
   const [containerHeight, setContainerHeight] = useState(0)
-  const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later
+  const childCount =
+    rooms[0] && rooms[0].children ? rooms[0].children.length : 0 // ToDo Update for multiroom later
 
   const htmlElement =
     typeof window !== "undefined" ? document.querySelector("body") : null
@@ -153,7 +154,7 @@ function Trigger({
     )
   )
 
-  if (rooms.some((room) => room.child.length > 0)) {
+  if (rooms.some((room) => room.children.length > 0)) {
     parts.push(
       intl.formatMessage(
         {
@@ -161,7 +162,7 @@ function Trigger({
         },
         {
           totalChildren: rooms.reduce(
-            (acc, room) => acc + room.child.length,
+            (acc, room) => acc + room.children.length,
             0
           ),
         }