feat(SW-718) Refactor select rate to support multiroom

components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx

@@ -1,4 +1,4 @@
-import { RoomCardSkeleton } from "../RoomSelection/RoomCard/RoomCardSkeleton"
+import { RoomCardSkeleton } from "../RoomList/RoomCard/RoomCardSkeleton"
 
 import styles from "./RoomsContainerSkeleton.module.css"
 

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -1,14 +1,15 @@
 "use client"
 
-import { useSearchParams } from "next/navigation"
+import { usePathname, useRouter, 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 { convertObjToSearchParams } from "@/utils/url"
 
-import RoomFilter from "../RoomFilter"
-import RoomSelection from "../RoomSelection"
+import RateSummary from "../RateSummary"
+import { RoomSelectionPanel } from "../RoomSelectionPanel"
 import { filterDuplicateRoomTypesByLowestPrice, parseRoomParams } from "./utils"
 
 import styles from "./rooms.module.css"
@@ -32,6 +33,8 @@ export default function Rooms({
   hotelType,
   isUserLoggedIn,
 }: SelectRateProps) {
+  const router = useRouter()
+  const pathname = usePathname()
   const searchParams = useSearchParams()
 
   const hotelId = searchParams.get("hotel")
@@ -43,6 +46,8 @@ export default function Rooms({
     [searchParams]
   )
 
+  const isMultipleRooms = searchedRoomsAndGuests.length > 1
+
   const intl = useIntl()
 
   const visibleRooms: RoomConfiguration[] = useMemo(() => {
@@ -218,33 +223,94 @@ export default function Rooms({
     })
   }, [arrivalDate, departureDate, hotelId, rooms.roomConfigurations])
 
+  const queryParams = useMemo(() => {
+    // TODO: handle multiple rooms
+    const newSearchParams = convertObjToSearchParams(
+      {
+        rooms: [
+          {
+            roomTypeCode: rateSummary?.roomTypeCode,
+            rateCode: rateSummary?.public.rateCode,
+            counterRateCode: rateSummary?.member?.rateCode,
+            packages: selectedPackages,
+          },
+        ],
+      },
+      searchParams
+    )
+
+    return newSearchParams
+  }, [searchParams, rateSummary, selectedPackages])
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+
+    window.history.replaceState(
+      null,
+      "",
+      `${pathname}?${queryParams.toString()}`
+    )
+    router.push(`select-bed?${queryParams}`)
+  }
+
   return (
-    <>
-      {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}
+    <div className={styles.content}>
+      {isMultipleRooms ? (
+        searchedRoomsAndGuests.map((room, index) => (
+          <div key={index}>
+            <Subtitle>
+              {intl.formatMessage(
+                {
+                  id: room.children?.length
+                    ? "Room {roomIndex}, {adults} adults, {children} children"
+                    : "Room {roomIndex}, {adults} adults",
+                },
+                {
+                  roomIndex: index + 1,
+                  adults: room.adults,
+                  children: room.children?.length,
+                }
+              )}
+            </Subtitle>
+            <RoomSelectionPanel
+              rooms={rooms}
+              roomCategories={roomCategories}
+              availablePackages={availablePackages}
+              selectedPackages={selectedPackages}
+              setSelectedRate={setSelectedRate}
+              hotelType={hotelType}
+              handleFilter={handleFilter}
+              defaultPackages={defaultPackages}
+            />
+          </div>
+        ))
+      ) : (
+        <RoomSelectionPanel
+          rooms={rooms}
+          roomCategories={roomCategories}
+          availablePackages={availablePackages}
+          selectedPackages={selectedPackages}
+          setSelectedRate={setSelectedRate}
+          hotelType={hotelType}
+          handleFilter={handleFilter}
+          defaultPackages={defaultPackages}
+        />
+      )}
+
+      {rateSummary && (
+        <form
+          method="GET"
+          action={`select-bed?${searchParams}`}
+          onSubmit={handleSubmit}
+        >
+          <RateSummary
             rateSummary={rateSummary}
-            hotelType={hotelType}
             isUserLoggedIn={isUserLoggedIn}
+            packages={availablePackages}
+            roomsAvailability={roomsAvailability}
           />
-        </div>
-      ))}
-    </>
+        </form>
+      )}
+    </div>
   )
 }