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
-        numberOfRooms={rooms.roomConfigurations.length}
-        onFilter={handleFilter}
-        filterOptions={defaultPackages}
-      />
-      <RoomSelection
-        roomsAvailability={rooms}
-        roomCategories={roomCategories}
-        availablePackages={availablePackages}
-        selectedPackages={selectedPackages}
-        setRateCode={setSelectedRate}
-        rateSummary={rateSummary}
-        hotelType={hotelType}
-        isUserLoggedIn={isUserLoggedIn}
-      />
-    </div>
+    <>
+      {searchedRoomsAndGuests.map((room, index) => (
+        <div key={index} className={styles.content}>
+          <Subtitle>
+            {`Room ${index + 1}, ${room.adults} adults`}
+            {room.children &&
+              room.children.length > 0 &&
+              `, ${room.children.length} children`}
+          </Subtitle>
+          <RoomFilter
+            numberOfRooms={rooms.roomConfigurations.length}
+            onFilter={handleFilter}
+            filterOptions={defaultPackages}
+          />
+          <RoomSelection
+            roomsAvailability={rooms}
+            roomCategories={roomCategories}
+            availablePackages={availablePackages}
+            selectedPackages={selectedPackages}
+            setRateCode={setSelectedRate}
+            rateSummary={rateSummary}
+            hotelType={hotelType}
+            isUserLoggedIn={isUserLoggedIn}
+          />
+        </div>
+      ))}
+    </>
   )
 }