refactor: url management in hotel reservation flow

components/Forms/BookingWidget/form.module.css

@@ -10,6 +10,10 @@
 }
 
 @media screen and (max-width: 767px) {
+  .section {
+    max-width: var(--max-width-page);
+  }
+
   .form {
     align-self: flex-start;
   }

components/Forms/BookingWidget/index.tsx

@@ -6,6 +6,7 @@ import { useFormContext } from "react-hook-form"
 import { selectHotel, selectRate } from "@/constants/routes/hotelReservation"
 
 import useLang from "@/hooks/useLang"
+import { convertObjToSearchParams } from "@/utils/url"
 
 import FormContent, { BookingWidgetFormContentSkeleton } from "./FormContent"
 import { bookingWidgetVariants } from "./variants"
@@ -37,26 +38,14 @@ export default function Form({
 
     const bookingFlowPage =
       locationData.type == "cities" ? selectHotel(lang) : selectRate(lang)
-    const bookingWidgetParams = new URLSearchParams(data.date)
-
-    if (locationData.type == "cities")
-      bookingWidgetParams.set("city", locationData.name)
-    else bookingWidgetParams.set("hotel", locationData.operaId || "")
-
-    data.rooms.forEach((room, index) => {
-      bookingWidgetParams.set(`room[${index}].adults`, room.adults.toString())
-
-      room.child.forEach((child, childIndex) => {
-        bookingWidgetParams.set(
-          `room[${index}].child[${childIndex}].age`,
-          child.age.toString()
-        )
-        bookingWidgetParams.set(
-          `room[${index}].child[${childIndex}].bed`,
-          child.bed.toString()
-        )
-      })
+    const bookingWidgetParams = convertObjToSearchParams({
+      rooms: data.rooms,
+      ...data.date,
+      ...(locationData.type == "cities"
+        ? { city: locationData.name }
+        : { hotel: locationData.operaId || "" }),
     })
+
     onClose()
     router.push(`${bookingFlowPage}?${bookingWidgetParams.toString()}`)
   }

components/Forms/BookingWidget/schema.ts

@@ -6,7 +6,7 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 export const guestRoomSchema = z
   .object({
     adults: z.number().default(1),
-    child: z
+    children: z
       .array(
         z.object({
           age: z.number().min(0, "Age is required"),
@@ -16,11 +16,11 @@ export const guestRoomSchema = z
       .default([]),
   })
   .superRefine((value, ctx) => {
-    const childrenInAdultsBed = value.child.filter(
+    const childrenInAdultsBed = value.children.filter(
       (c) => c.bed === ChildBedMapEnum.IN_ADULTS_BED
     )
     if (value.adults < childrenInAdultsBed.length) {
-      const lastAdultBedIndex = value.child
+      const lastAdultBedIndex = value.children
         .map((c) => c.bed)
         .lastIndexOf(ChildBedMapEnum.IN_ADULTS_BED)