feat(SW-718): Animation on selection of multiple room

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useIntl } from "react-intl"
 
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRateSummary } from "@/hooks/selectRate/useRateSummary"
 import { useRoomFiltering } from "@/hooks/selectRate/useRoomFiltering"
@@ -12,6 +13,7 @@ import { convertObjToSearchParams } from "@/utils/url"
 
 import RateSummary from "../RateSummary"
 import { RoomSelectionPanel } from "../RoomSelectionPanel"
+import SelectedRoomPanel from "../SelectedRoomPanel"
 import { filterDuplicateRoomTypesByLowestPrice, parseRoomParams } from "./utils"
 
 import styles from "./rooms.module.css"
@@ -196,31 +198,56 @@ export default function Rooms({
       {isMultipleRooms ? (
         searchedRoomsAndGuests.map((room, index) => (
           <div key={index} className={styles.roomContainer}>
-            <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={getRooms(index)}
-              roomCategories={roomCategories}
-              availablePackages={availablePackages}
-              selectedPackages={selectedPackagesByRoom[index]}
-              setSelectedRate={setSelectedRateForRoom(index)}
-              hotelType={hotelType}
-              handleFilter={handleFilterForRoom(index)}
-              defaultPackages={defaultPackages}
-              roomListIndex={index}
-            />
+            {selectedRates[index] === undefined && (
+              <Subtitle>
+                {intl.formatMessage(
+                  { id: "Room {roomIndex}" },
+                  { roomIndex: index + 1 }
+                )}
+                ,{" "}
+                {intl.formatMessage(
+                  {
+                    id: room.children?.length
+                      ? "{adults} adults, {children} children"
+                      : "{adults} adults",
+                  },
+                  {
+                    adults: room.adults,
+                    children: room.children?.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}
+                  selectedRate={rateSummary[index]}
+                  roomCategories={roomCategories}
+                />
+              </div>
+              <div className={styles.roomSelectionPanel}>
+                <RoomSelectionPanel
+                  rooms={getRooms(index)}
+                  roomCategories={roomCategories}
+                  availablePackages={availablePackages}
+                  selectedPackages={selectedPackagesByRoom[index]}
+                  setSelectedRate={setSelectedRateForRoom(index)}
+                  hotelType={hotelType}
+                  handleFilter={handleFilterForRoom(index)}
+                  defaultPackages={defaultPackages}
+                  roomListIndex={index}
+                />
+              </div>
+            </div>
           </div>
         ))
       ) : (

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

@@ -15,3 +15,44 @@
   border-radius: var(--Corner-radius-Large);
   padding: var(--Spacing-x2) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
+
+.roomSelectionPanel {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    opacity 0.3s ease,
+    grid-template-rows 0.5s ease;
+  height: 0;
+}
+
+.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 > * {
+  overflow: hidden;
+}
+
+.roomSelectionPanelContainer[data-selected="true"] .selectedRoomPanel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  height: auto;
+  padding-bottom: var(--Spacing-x2);
+}
+
+.roomSelectionPanelContainer[data-active-panel="true"] .roomSelectionPanel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  height: auto;
+}