refactor: url management in hotel reservation flow

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -5,13 +5,13 @@ import { useIntl } from "react-intl"
 
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
+import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
 import { ErrorCircleIcon } from "@/components/Icons"
 import ImageGallery from "@/components/ImageGallery"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import { getIconForFeatureCode } from "../../utils"
 import { cardVariants } from "./cardVariants"
 
 import styles from "./roomCard.module.css"

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -2,9 +2,10 @@
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useMemo } from "react"
 
+import { convertObjToSearchParams } from "@/utils/url"
+
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
-import { getHotelReservationQueryParams } from "./utils"
 
 import styles from "./roomSelection.module.css"
 
@@ -26,28 +27,22 @@ export default function RoomSelection({
   const { roomConfigurations, rateDefinitions } = roomsAvailability
 
   const queryParams = useMemo(() => {
-    const params = new URLSearchParams(searchParams)
-    const searchParamsObject = getHotelReservationQueryParams(searchParams)
+    // TODO: handle multiple rooms
+    const newSearchParams = convertObjToSearchParams(
+      {
+        rooms: [
+          {
+            roomTypeCode: rateSummary?.roomTypeCode,
+            rateCode: rateSummary?.public.rateCode,
+            counterRateCode: rateSummary?.member?.rateCode,
+            packages: selectedPackages,
+          },
+        ],
+      },
+      searchParams
+    )
 
-    searchParamsObject.room.forEach((item, index) => {
-      if (rateSummary?.roomTypeCode) {
-        params.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
-      }
-      if (rateSummary?.public?.rateCode) {
-        params.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
-      }
-      if (rateSummary?.member?.rateCode) {
-        params.set(
-          `room[${index}].counterratecode`,
-          rateSummary.member.rateCode
-        )
-      }
-      selectedPackages.length > 0
-        ? params.set(`room[${index}].packages`, selectedPackages.join(","))
-        : params.delete(`room[${index}].packages`)
-    })
-
-    return params
+    return newSearchParams
   }, [searchParams, rateSummary, selectedPackages])
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {

components/HotelReservation/SelectRate/RoomSelection/utils.ts

@@ -1,113 +0,0 @@
-import { ChildBedTypeEnum } from "@/constants/booking"
-
-import { getFormattedUrlQueryParams } from "@/utils/url"
-
-import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
-import type { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData"
-import type { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import type {
-  Child,
-  SelectRateSearchParams,
-} from "@/types/components/hotelReservation/selectRate/selectRate"
-
-export function getHotelReservationQueryParams(searchParams: URLSearchParams) {
-  return getFormattedUrlQueryParams(searchParams, {
-    adults: "number",
-    age: "number",
-    bed: ChildBedMapEnum,
-  }) as SelectRateSearchParams
-}
-
-export const bedTypeMap: Record<number, ChildBedTypeEnum> = {
-  [ChildBedMapEnum.IN_ADULTS_BED]: ChildBedTypeEnum.ParentsBed,
-  [ChildBedMapEnum.IN_CRIB]: ChildBedTypeEnum.Crib,
-  [ChildBedMapEnum.IN_EXTRA_BED]: ChildBedTypeEnum.ExtraBed,
-  [ChildBedMapEnum.UNKNOWN]: ChildBedTypeEnum.Unknown,
-}
-
-export const invertedBedTypeMap: Record<ChildBedTypeEnum, string> = {
-  [ChildBedTypeEnum.ParentsBed]: ChildBedMapEnum[ChildBedMapEnum.IN_ADULTS_BED],
-  [ChildBedTypeEnum.Crib]: ChildBedMapEnum[ChildBedMapEnum.IN_CRIB],
-  [ChildBedTypeEnum.ExtraBed]: ChildBedMapEnum[ChildBedMapEnum.IN_EXTRA_BED],
-  [ChildBedTypeEnum.Unknown]: ChildBedMapEnum[ChildBedMapEnum.UNKNOWN],
-}
-
-export function generateChildrenString(children: Child[]): string {
-  return `[${children
-    .map((child) => {
-      const age = child.age
-      const bedType = bedTypeMap[parseInt(child.bed.toString())]
-      return `${age}:${bedType}`
-    })
-    .join(",")}]`
-}
-
-export function getQueryParamsForEnterDetails(
-  searchParams: URLSearchParams
-): BookingData {
-  const selectRoomParamsObject = getHotelReservationQueryParams(searchParams)
-
-  const { room } = selectRoomParamsObject
-  return {
-    fromDate: selectRoomParamsObject.fromDate,
-    toDate: selectRoomParamsObject.toDate,
-    hotel: selectRoomParamsObject.hotel,
-    rooms: room?.map((room) => ({
-      adults: room.adults, // TODO: Handle multiple rooms
-      children: room.child, // TODO: Handle multiple rooms and children
-      roomTypeCode: room.roomtype,
-      rateCode: room.ratecode,
-      packages: room.packages?.split(",") as RoomPackageCodeEnum[],
-      counterRateCode: room.counterratecode,
-    })),
-  }
-}
-
-export function createQueryParamsForEnterDetails(
-  bookingData: BookingData,
-  intitalSearchParams: URLSearchParams
-) {
-  const { hotel, fromDate, toDate, rooms } = bookingData
-
-  const bookingSearchParams = new URLSearchParams({ hotel, fromDate, toDate })
-  const searchParams = new URLSearchParams([
-    ...intitalSearchParams,
-    ...bookingSearchParams,
-  ])
-
-  searchParams.set(`hotel`, hotel)
-
-  rooms.forEach((item, index) => {
-    if (item?.adults) {
-      searchParams.set(`room[${index}].adults`, item.adults.toString())
-    }
-    if (item?.children) {
-      item.children.forEach((child, childIndex) => {
-        searchParams.set(
-          `room[${index}].child[${childIndex}].age`,
-          child.age.toString()
-        )
-        searchParams.set(
-          `room[${index}].child[${childIndex}].bed`,
-          child.bed.toString()
-        )
-      })
-    }
-    if (item?.roomTypeCode) {
-      searchParams.set(`room[${index}].roomtype`, item.roomTypeCode)
-    }
-    if (item?.rateCode) {
-      searchParams.set(`room[${index}].ratecode`, item.rateCode)
-    }
-
-    if (item?.counterRateCode) {
-      searchParams.set(`room[${index}].counterratecode`, item.counterRateCode)
-    }
-
-    if (item.packages && item.packages.length > 0) {
-      searchParams.set(`room[${index}].packages`, item.packages.join(","))
-    }
-  })
-
-  return searchParams
-}