feat(SW-718) updates after PR comments

components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx

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

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -4,7 +4,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useMemo } from "react"
 import { useIntl } from "react-intl"
 
-import { useRateSelectionStore } from "@/stores/rate-selection"
+import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
 
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
@@ -15,6 +15,7 @@ import RateSummary from "../RateSummary"
 import { RoomSelectionPanel } from "../RoomSelectionPanel"
 import SelectedRoomPanel from "../SelectedRoomPanel"
 import { filterDuplicateRoomTypesByLowestPrice } from "./utils"
+import { roomSelectionPanelVariants } from "./variants"
 
 import styles from "./rooms.module.css"
 
@@ -41,13 +42,8 @@ export default function Rooms({
   const arrivalDate = searchParams.get("fromDate")
   const departureDate = searchParams.get("toDate")
 
-  const {
-    modifyRate,
-    selectedRates,
-    rateSummary,
-    calculateRateSummary,
-    initializeRates,
-  } = useRateSelectionStore()
+  const { selectedRates, rateSummary, calculateRateSummary, initializeRates } =
+    useRateSelectionStore()
 
   const bookingWidgetSearchData = useMemo(
     () =>
@@ -117,13 +113,19 @@ export default function Rooms({
     useRoomFiltering({ roomsAvailability })
 
   useEffect(() => {
-    calculateRateSummary({
-      getFilteredRooms,
-      availablePackages,
-      roomCategories,
-      selectedPackagesByRoom,
-    })
+    if (
+      selectedRates.length > 0 &&
+      selectedRates.some((rate) => rate !== undefined)
+    ) {
+      calculateRateSummary({
+        getFilteredRooms,
+        availablePackages,
+        roomCategories,
+        selectedPackagesByRoom,
+      })
+    }
   }, [
+    selectedRates,
     getFilteredRooms,
     availablePackages,
     roomCategories,
@@ -177,11 +179,7 @@ export default function Rooms({
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
 
-    window.history.replaceState(
-      null,
-      "",
-      `${pathname}?${queryParams.toString()}`
-    )
+    window.history.pushState(null, "", `${pathname}?${queryParams.toString()}`)
     router.push(`select-bed?${queryParams}`)
   }
 
@@ -215,58 +213,66 @@ export default function Rooms({
   return (
     <div className={styles.content}>
       {isMultipleRooms ? (
-        bookingWidgetSearchData.rooms.map((room, index) => (
-          <div key={index} className={styles.roomContainer}>
-            {selectedRates[index] === undefined && (
-              <Subtitle>
-                {intl.formatMessage(
-                  { id: "Room {roomIndex}" },
-                  { roomIndex: index + 1 }
-                )}
-                ,{" "}
-                {intl.formatMessage(
-                  {
-                    id: room.childrenInRoom?.length
-                      ? "{adults} adults, {children} children"
-                      : "{adults} adults",
-                  },
-                  {
-                    adults: room.adults,
-                    children: room.childrenInRoom?.length,
-                  }
-                )}
-              </Subtitle>
-            )}
-            <div
-              className={styles.roomSelectionPanelContainer}
-              data-selected={selectedRates[index] !== undefined}
-              data-active-panel={
-                (index === 0 || selectedRates[index - 1] !== undefined) &&
-                selectedRates[index] === undefined
-              }
-            >
-              <div className={styles.selectedRoomPanel}>
-                <SelectedRoomPanel
-                  roomIndex={index}
-                  room={room}
-                  roomCategories={roomCategories}
-                />
-              </div>
-              <div className={styles.roomSelectionPanel}>
-                <RoomSelectionPanel
-                  rooms={getRooms(index)}
-                  roomCategories={roomCategories}
-                  availablePackages={availablePackages}
-                  selectedPackages={selectedPackagesByRoom[index]}
-                  hotelType={hotelType}
-                  handleFilter={handleFilterForRoom(index)}
-                  defaultPackages={defaultPackages}
-                  roomListIndex={index}
-                />
+        bookingWidgetSearchData.rooms.map((room, index) => {
+          const classNames = roomSelectionPanelVariants({
+            active:
+              (index === 0 || selectedRates[index - 1] !== undefined) &&
+              selectedRates[index] === undefined,
+            selected: selectedRates[index] !== undefined,
+          })
+          return (
+            <div key={index} className={styles.roomContainer}>
+              {selectedRates[index] === undefined && (
+                <Subtitle>
+                  {intl.formatMessage(
+                    { id: "Room {roomIndex}" },
+                    { roomIndex: index + 1 }
+                  )}
+                  ,{" "}
+                  {intl.formatMessage(
+                    {
+                      id: room.childrenInRoom?.length
+                        ? "{adults} adults, {children} children"
+                        : "{adults} adults",
+                    },
+                    {
+                      adults: room.adults,
+                      children: room.childrenInRoom?.length,
+                    }
+                  )}
+                </Subtitle>
+              )}
+              <div
+                className={classNames}
+                data-selected={selectedRates[index] !== undefined}
+                data-active-panel={
+                  (index === 0 || selectedRates[index - 1] !== undefined) &&
+                  selectedRates[index] === undefined
+                }
+              >
+                <div className={styles.selectedRoomPanel}>
+                  <SelectedRoomPanel
+                    roomIndex={index}
+                    room={room}
+                    roomCategories={roomCategories}
+                  />
+                </div>
+                <div className={styles.roomSelectionPanel}>
+                  <RoomSelectionPanel
+                    rooms={getRooms(index)}
+                    roomCategories={roomCategories}
+                    availablePackages={availablePackages}
+                    selectedPackages={selectedPackagesByRoom[index]}
+                    hotelType={hotelType}
+                    handleFilter={handleFilterForRoom(index)}
+                    defaultPackages={defaultPackages}
+                    roomListIndex={index}
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        ))
+          )
+        })
       ) : (
         <RoomSelectionPanel
           rooms={getRooms(0)}

components/HotelReservation/SelectRate/Rooms/rooms.module.css

@@ -15,45 +15,39 @@
   padding: var(--Spacing-x2);
 }
 
-.roomSelectionPanel {
+._basePanel {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
-  transition:
-    opacity 0.3s ease,
-    grid-template-rows 0.5s ease;
   height: 0;
-  gap: var(--Spacing-x2);
-}
-
-.roomSelectionPanel > * {
-  overflow: hidden;
-}
-
-.selectedRoomPanel {
-  display: grid;
-  grid-template-rows: 0fr;
-  opacity: 0;
   transition:
     opacity 0.3s ease,
     grid-template-rows 0.3s ease;
-  height: 0;
 }
 
-.selectedRoomPanel > * {
+._basePanel > * {
   overflow: hidden;
 }
 
-.roomSelectionPanelContainer[data-selected="true"] .selectedRoomPanel {
+.roomSelectionPanel {
+  composes: _basePanel;
+  gap: var(--Spacing-x2);
+}
+
+.selectedRoomPanel {
+  composes: _basePanel;
+}
+
+.roomSelectionPanelContainer.selected .selectedRoomPanel {
   grid-template-rows: 1fr;
   opacity: 1;
   height: auto;
 }
 
-.roomSelectionPanelContainer[data-selected="true"] .roomSelectionPanel {
+.roomSelectionPanelContainer.selected .roomSelectionPanel {
   display: none;
 }
-.roomSelectionPanelContainer[data-active-panel="true"] .roomSelectionPanel {
+.roomSelectionPanelContainer.active .roomSelectionPanel {
   grid-template-rows: 1fr;
   opacity: 1;
   height: auto;

components/HotelReservation/SelectRate/Rooms/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./rooms.module.css"
+
+export const roomSelectionPanelVariants = cva(
+  styles.roomSelectionPanelContainer,
+  {
+    variants: {
+      active: {
+        true: styles.active,
+      },
+      selected: {
+        true: styles.selected,
+      },
+    },
+    defaultVariants: {
+      active: false,
+      selected: false,
+    },
+  }
+)