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

components/HotelReservation/SelectRate/RoomList/index.tsx

@@ -20,7 +20,7 @@ export default function RoomList({
   return (
     <div className={styles.wrapper}>
       <ul className={styles.roomList}>
-        {roomConfigurations.map((roomConfiguration, index) => (
+        {roomConfigurations.map((roomConfiguration) => (
           <RoomCard
             hotelId={roomsAvailability.hotelId.toString()}
             hotelType={hotelType}

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;
+}

components/HotelReservation/SelectRate/SelectedRoomPanel/index.tsx

@@ -0,0 +1,78 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Image from "@/components/Image"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./selectedRoomPanel.module.css"
+
+import type { RoomParam } from "@/types/components/hotelReservation/selectRate/section"
+import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { RoomData } from "@/types/hotel"
+
+export default function SelectedRoomPanel({
+  roomIndex,
+  room,
+  selectedRate,
+  roomCategories,
+}: {
+  roomIndex: number
+  room: RoomParam
+  selectedRate: Rate | null
+  roomCategories: RoomData[]
+}) {
+  const intl = useIntl()
+  const images = roomCategories.find((roomCategory) =>
+    roomCategory.roomTypes.some(
+      (roomType) => roomType.code === selectedRate?.roomTypeCode
+    )
+  )?.images
+
+  return (
+    <div className={styles.selectedRoomPanel}>
+      <div>
+        <Caption type="bold">
+          {intl.formatMessage(
+            {
+              id: "Room {roomIndex}",
+            },
+            {
+              roomIndex: roomIndex + 1,
+            }
+          )}
+        </Caption>
+        <Subtitle>
+          {selectedRate?.roomType},{" "}
+          {intl.formatMessage(
+            {
+              id: room.children?.length
+                ? "{adults} adults, {children} children"
+                : "{adults} adults",
+            },
+            {
+              adults: room.adults,
+              children: room.children?.length,
+            }
+          )}
+        </Subtitle>
+        <Caption>
+          {selectedRate?.priceName}, {selectedRate?.priceTerm}
+        </Caption>
+        <Caption>
+          {selectedRate?.public.localPrice.pricePerNight}{" "}
+          {selectedRate?.public.localPrice.currency}/
+          {intl.formatMessage({
+            id: "night",
+          })}
+        </Caption>
+      </div>
+      <Image
+        src={images?.[0]?.imageSizes?.tiny ?? ""}
+        alt={selectedRate?.roomType ?? images?.[0]?.metaData?.altText ?? ""}
+        width={240}
+        height={160}
+      />
+    </div>
+  )
+}

components/HotelReservation/SelectRate/SelectedRoomPanel/selectedRoomPanel.module.css

@@ -0,0 +1,5 @@
+.selectedRoomPanel {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}