feat(SW-718): parse room from searchParams

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -4,11 +4,12 @@ import { useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useIntl } from "react-intl"
 
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { trackLowestRoomPrice } from "@/utils/tracking"
 
 import RoomFilter from "../RoomFilter"
 import RoomSelection from "../RoomSelection"
-import { filterDuplicateRoomTypesByLowestPrice } from "./utils"
+import { filterDuplicateRoomTypesByLowestPrice, parseRoomParams } from "./utils"
 
 import styles from "./rooms.module.css"
 
@@ -37,6 +38,11 @@ export default function Rooms({
   const arrivalDate = searchParams.get("fromDate")
   const departureDate = searchParams.get("toDate")
 
+  const searchedRoomsAndGuests = useMemo(
+    () => parseRoomParams(searchParams),
+    [searchParams]
+  )
+
   const intl = useIntl()
 
   const visibleRooms: RoomConfiguration[] = useMemo(() => {
@@ -213,22 +219,32 @@ export default function Rooms({
   }, [arrivalDate, departureDate, hotelId, rooms.roomConfigurations])
 
   return (
-    <div className={styles.content}>
+    <>
-      <RoomFilter
+      {searchedRoomsAndGuests.map((room, index) => (
-        numberOfRooms={rooms.roomConfigurations.length}
+        <div key={index} className={styles.content}>
-        onFilter={handleFilter}
+          <Subtitle>
-        filterOptions={defaultPackages}
+            {`Room ${index + 1}, ${room.adults} adults`}
-      />
+            {room.children &&
-      <RoomSelection
+              room.children.length > 0 &&
-        roomsAvailability={rooms}
+              `, ${room.children.length} children`}
-        roomCategories={roomCategories}
+          </Subtitle>
-        availablePackages={availablePackages}
+          <RoomFilter
-        selectedPackages={selectedPackages}
+            numberOfRooms={rooms.roomConfigurations.length}
-        setRateCode={setSelectedRate}
+            onFilter={handleFilter}
-        rateSummary={rateSummary}
+            filterOptions={defaultPackages}
-        hotelType={hotelType}
+          />
-        isUserLoggedIn={isUserLoggedIn}
+          <RoomSelection
-      />
+            roomsAvailability={rooms}
-    </div>
+            roomCategories={roomCategories}
+            availablePackages={availablePackages}
+            selectedPackages={selectedPackages}
+            setRateCode={setSelectedRate}
+            rateSummary={rateSummary}
+            hotelType={hotelType}
+            isUserLoggedIn={isUserLoggedIn}
+          />
+        </div>
+      ))}
+    </>
   )
 }

components/HotelReservation/SelectRate/Rooms/utils.ts

@@ -1,3 +1,4 @@
+import type { RoomParam } from "@/types/components/hotelReservation/selectRate/section"
 import type { RoomConfiguration } from "@/server/routers/hotels/output"
 
 /**
@@ -103,3 +104,54 @@ export function filterDuplicateRoomTypesByLowestPrice(
 
   return Array.from(roomMap.values())
 }
+
+/**
+ * Parse the room params from the search params.
+ */
+
+export function parseRoomParams(searchParams: URLSearchParams): RoomParam[] {
+  const rooms: RoomParam[] = []
+
+  // Collect all param keys and sort them to ensure correct order
+  const paramKeys = Array.from(searchParams.keys()).sort()
+
+  for (const key of paramKeys) {
+    const roomRegex = /^room\[(\d+)\]\.(.+)/
+    const roomMatch = roomRegex.exec(key)
+    if (!roomMatch) continue
+
+    const [, roomIndex, param] = roomMatch
+    const value = searchParams.get(key)
+    if (!value) continue
+
+    // Initialize room if it doesn't exist
+    if (!rooms[Number(roomIndex)]) rooms[Number(roomIndex)] = { adults: 1 }
+
+    // Handle adults
+    if (param === "adults") {
+      rooms[Number(roomIndex)].adults = Number(value)
+      continue
+    }
+
+    // Handle children
+    const childRegex = /child\[(\d+)\]\.(.+)/
+    const childMatch = childRegex.exec(param)
+
+    if (childMatch) {
+      const [, childIndex, childParam] = childMatch
+      const room = rooms[Number(roomIndex)]
+      if (!room.children) room.children = []
+
+      // Set child properties
+      if (childParam === "age" && room.children) {
+        room.children[Number(childIndex)] = {
+          age: Number(value),
+          bed: Number(value),
+        }
+      } else if (childParam === "bed" && room.children?.[Number(childIndex)])
+        room.children[Number(childIndex)].bed = Number(value)
+    }
+  }
+
+  return rooms
+}

types/components/hotelReservation/selectRate/section.ts

@@ -41,10 +41,15 @@ export interface PaymentClientProps
   savedCreditCards: CreditCard[] | null
 }
 
+export interface RoomParam {
+  adults: number
+  children?: { age: number; bed: number }[]
+}
+
 export interface SectionPageProps {
   breakfast?: string
   bed?: string
   fromDate: string
   toDate: string
-  room: { adults: number; child: { age: number; bed: number }[] }[]
+  room: RoomParam[]
 }