refactor: url management in hotel reservation flow

components/BookingWidget/Client.tsx

@@ -14,7 +14,7 @@ import { CloseLargeIcon } from "@/components/Icons"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
 import isValidJson from "@/utils/isValidJson"
-import { getFormattedUrlQueryParams } from "@/utils/url"
+import { convertSearchParamsToObj } from "@/utils/url"
 
 import MobileToggleButton, {
   MobileToggleButtonSkeleton,
@@ -25,14 +25,14 @@ import styles from "./bookingWidget.module.css"
 import type {
   BookingWidgetClientProps,
   BookingWidgetSchema,
-  BookingWidgetSearchParams,
+  BookingWidgetSearchData,
 } from "@/types/components/bookingWidget"
 import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export default function BookingWidgetClient({
   locations,
   type,
-  searchParams,
+  bookingWidgetSearchParams,
 }: BookingWidgetClientProps) {
   const [isOpen, setIsOpen] = useState(false)
   const bookingWidgetRef = useRef(null)
@@ -41,14 +41,11 @@ export default function BookingWidgetClient({
     name: StickyElementNameEnum.BOOKING_WIDGET,
   })
 
-  const bookingWidgetSearchData: BookingWidgetSearchParams | undefined =
-    searchParams
-      ? getFormattedUrlQueryParams(new URLSearchParams(searchParams), {
-          adults: "number",
-          age: "number",
-          bed: "number",
-        })
-      : undefined
+  const bookingWidgetSearchData = bookingWidgetSearchParams
+    ? convertSearchParamsToObj<BookingWidgetSearchData>(
+        bookingWidgetSearchParams
+      )
+    : undefined
 
   const getLocationObj = (destination: string): Location | undefined => {
     if (destination) {
@@ -85,13 +82,13 @@ export default function BookingWidgetClient({
       )
     : undefined
 
-  const defaultRoomsData = bookingWidgetSearchData?.room?.map((room) => ({
+  const defaultRoomsData = bookingWidgetSearchData?.rooms?.map((room) => ({
     adults: room.adults,
-    child: room.child ?? [],
+    children: room.children ?? [],
   })) ?? [
     {
       adults: 1,
-      child: [],
+      children: [],
     },
   ]
 

components/BookingWidget/MobileToggleButton/index.tsx

@@ -49,8 +49,8 @@ export default function MobileToggleButton({
     return acc
   }, 0)
   const totalChildren = rooms.reduce((acc, room) => {
-    if (room.child) {
-      acc = acc + room.child.length
+    if (room.children) {
+      acc = acc + room.children.length
     }
     return acc
   }, 0)

components/BookingWidget/index.tsx

@@ -10,7 +10,7 @@ export function preload() {
 
 export default async function BookingWidget({
   type,
-  searchParams,
+  bookingWidgetSearchParams,
 }: BookingWidgetProps) {
   const locations = await getLocations()
   const siteConfig = await getSiteConfig()
@@ -23,7 +23,7 @@ export default async function BookingWidget({
     <BookingWidgetClient
       locations={locations.data}
       type={type}
-      searchParams={searchParams}
+      bookingWidgetSearchParams={bookingWidgetSearchParams}
     />
   )
 }