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>
+            {selectedRates[index] === undefined && (
-              {intl.formatMessage(
+              <Subtitle>
-                {
+                {intl.formatMessage(
-                  id: room.children?.length
+                  { id: "Room {roomIndex}" },
-                    ? "Room {roomIndex}, {adults} adults, {children} children"
+                  { roomIndex: index + 1 }
-                    : "Room {roomIndex}, {adults} adults",
+                )}
-                },
+                ,{" "}
-                {
+                {intl.formatMessage(
-                  roomIndex: index + 1,
+                  {
-                  adults: room.adults,
+                    id: room.children?.length
-                  children: room.children?.length,
+                      ? "{adults} adults, {children} children"
-                }
+                      : "{adults} adults",
-              )}
+                  },
-            </Subtitle>
+                  {
-            <RoomSelectionPanel
+                    adults: room.adults,
-              rooms={getRooms(index)}
+                    children: room.children?.length,
-              roomCategories={roomCategories}
+                  }
-              availablePackages={availablePackages}
+                )}
-              selectedPackages={selectedPackagesByRoom[index]}
+              </Subtitle>
-              setSelectedRate={setSelectedRateForRoom(index)}
+            )}
-              hotelType={hotelType}
+            <div
-              handleFilter={handleFilterForRoom(index)}
+              className={styles.roomSelectionPanelContainer}
-              defaultPackages={defaultPackages}
+              data-selected={selectedRates[index] !== undefined}
-              roomListIndex={index}
+              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;
+}

i18n/dictionaries/da.json

@@ -381,8 +381,7 @@
   "Room & Terms": "Værelse & Vilkår",
   "Room charge": "Værelsesafgift",
   "Room facilities": "Værelsesfaciliteter",
-  "Room {roomIndex}, {adults} adults": "Værelse {roomIndex}, {adults, plural, one {# voksen} other {# voksne}}",
+  "Room {roomIndex}": "Værelse {roomIndex}",
-  "Room {roomIndex}, {adults} adults, {children} children": "Værelse {roomIndex}, {adults, plural, one {# voksen} other {# voksne}}, {children, plural, one {# barn} other {# børn}}",
   "Rooms": "Værelser",
   "Rooms & Guests": "Værelser & gæster",
   "Sat-Sun Always open": "Lør-Søn Altid åben",
@@ -548,6 +547,8 @@
   "tuesday": "tirsdag",
   "wednesday": "onsdag",
   "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center": "{address}, {city} ∙ {distanceToCityCenterInKm} km til byens centrum",
+  "{adults} adults": "{adults, plural, one {# voksen} other {# voksne}}",
+  "{adults} adults, {children} children": "{adults, plural, one {# voksen} other {# voksne}}, {children, plural, one {# barn} other {# børn}}",
   "{amount, number} left": "{amount, number} tilbage",
   "{amount, plural, one {# hotel} other {# hotels}}": "{amount, plural, one {# hotel} other {# hotels}}",
   "{amount, plural, one {Gift} other {Gifts}} added to your benefits": "{amount, plural, one {Gave} other {Gaver}} tilføjet til dine fordele",

i18n/dictionaries/de.json

@@ -379,8 +379,7 @@
   "Room & Terms": "Zimmer & Bedingungen",
   "Room charge": "Zimmerpreis",
   "Room facilities": "Zimmerausstattung",
-  "Room {roomIndex}, {adults} adults": "Zimmer {roomIndex}, {adults, plural, one {# Erwachsene} other {# Erwachsene}}",
+  "Room {roomIndex}": "Zimmer {roomIndex}",
-  "Room {roomIndex}, {adults} adults, {children} children": "Zimmer {roomIndex}, {adults, plural, one {# Erwachsene} other {# Erwachsene}}, {children, plural, one {# Kind} other {# Kinder}}",
   "Rooms": "Räume",
   "Rooms & Guests": "Zimmer & Gäste",
   "Sat-Sun Always open": "Sa-So Immer geöffnet",
@@ -545,6 +544,8 @@
   "tuesday": "dienstag",
   "wednesday": "mittwoch",
   "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center": "{address}, {city} ∙ {distanceToCityCenterInKm} km bis zum Stadtzentrum",
+  "{adults} adults": "{adults, plural, one {# Erwachsene} other {# Erwachsene}}",
+  "{adults} adults, {children} children": "{adults, plural, one {# Erwachsene} other {# Erwachsene}}, {children, plural, one {# Kind} other {# Kinder}}",
   "{amount, number} left": "{amount, number} übrig",
   "{amount, plural, one {# hotel} other {# hotels}}": "{amount, plural, one {# hotel} other {# hotels}}",
   "{amount, plural, one {Gift} other {Gifts}} added to your benefits": "{amount, plural, one {Geschenk zu Ihren Vorteilen hinzugefügt} other {Geschenke, die zu Ihren Vorteilen hinzugefügt werden}}",

i18n/dictionaries/en.json

@@ -420,8 +420,7 @@
   "Room & Terms": "Room & Terms",
   "Room charge": "Room charge",
   "Room facilities": "Room facilities",
-  "Room {roomIndex}, {adults} adults": "Room {roomIndex}, {adults, plural, one {# adult} other {# adults}}",
+  "Room {roomIndex}": "Room {roomIndex}",
-  "Room {roomIndex}, {adults} adults, {children} children": "Room {roomIndex}, {adults, plural, one {# adult} other {# adults}}, {children, plural, one {# child} other {# children}}",
   "Rooms": "Rooms",
   "Rooms & Guests": "Rooms & Guests",
   "Sat-Sun Always open": "Sat-Sun Always open",
@@ -593,6 +592,8 @@
   "tuesday": "tuesday",
   "wednesday": "wednesday",
   "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center": "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center",
+  "{adults} adults": "{adults, plural, one {# adult} other {# adults}}",
+  "{adults} adults, {children} children": "{adults, plural, one {# adult} other {# adults}}, {children, plural, one {# child} other {# children}}",
   "{amount, number} left": "{amount, number} left",
   "{amount, plural, one {# hotel} other {# hotels}}": "{amount, plural, one {# hotel} other {# hotels}}",
   "{amount, plural, one {Gift} other {Gifts}} added to your benefits": "{amount, plural, one {Gift} other {Gifts}} added to your benefits",

i18n/dictionaries/fi.json

@@ -381,8 +381,7 @@
   "Room & Terms": "Huone & Ehdot",
   "Room charge": "Huonemaksu",
   "Room facilities": "Huoneen varustelu",
-  "Room {roomIndex}, {adults} adults": "Huone {roomIndex}, {adults, plural, one {# vieras} other {# vieraita}}",
+  "Room {roomIndex}": "Huone {roomIndex}",
-  "Room {roomIndex}, {adults} adults, {children} children": "Huone {roomIndex}, {adults, plural, one {# vieras} other {# vieraita}}, {children, plural, one {# lapsi} other {# lapsia}}",
   "Rooms": "Huoneet",
   "Rooms & Guests": "Huoneet & Vieraat",
   "Rooms & Guestss": "Huoneet & Vieraat",
@@ -545,6 +544,8 @@
   "tuesday": "tiistai",
   "wednesday": "keskiviikko",
   "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center": "{address}, {city} ∙ {distanceToCityCenterInKm} km keskustaan",
+  "{adults} adults": "{adults, plural, one {# vieras} other {# vieraita}}",
+  "{adults} adults, {children} children": "{adults, plural, one {# vieras} other {# vieraita}}, {children, plural, one {# lapsi} other {# lapsia}}",
   "{amount, number} left": "{amount, number} jäljellä",
   "{amount, plural, one {# hotel} other {# hotels}}": "{amount, plural, one {# hotel} other {# hotels}}",
   "{amount, plural, one {Gift} other {Gifts}} added to your benefits": "{amount, plural, one {Lahja} other {Lahjat}} lisätty etuusi",

i18n/dictionaries/no.json

@@ -380,8 +380,7 @@
   "Room & Terms": "Rom & Vilkår",
   "Room charge": "Pris for rom",
   "Room facilities": "Romfasiliteter",
-  "Room {roomIndex}, {adults} adults": "Rom {roomIndex}, {adults, plural, one {# voksen} other {# voksne}}",
+  "Room {roomIndex}": "Rom {roomIndex}",
-  "Room {roomIndex}, {adults} adults, {children} children": "Rom {roomIndex}, {adults, plural, one {# voksen} other {# voksne}}, {children, plural, one {# barn} other {# børn}}",
   "Rooms": "Rom",
   "Rooms & Guests": "Rom og gjester",
   "Sat-Sun Always open": "Lør-Søn Alltid åpen",
@@ -546,6 +545,8 @@
   "tuesday": "tirsdag",
   "wednesday": "onsdag",
   "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center": "{address}, {city} ∙ {distanceToCityCenterInKm} km til sentrum",
+  "{adults} adults": "{adults, plural, one {# voksen} other {# voksne}}",
+  "{adults} adults, {children} children": "{adults, plural, one {# voksen} other {# voksne}}, {children, plural, one {# barn} other {# børn}}",
   "{amount, number} left": "{amount, number} igjen",
   "{amount, plural, one {# hotel} other {# hotels}}": "{amount, plural, one {# hotel} other {# hotels}}",
   "{amount, plural, one {Gift} other {Gifts}} added to your benefits": "{amount, plural, one {Gave} other {Gaver}} lagt til fordelene dine",

i18n/dictionaries/sv.json

@@ -380,8 +380,7 @@
   "Room & Terms": "Rum & Villkor",
   "Room charge": "Rumspris",
   "Room facilities": "Rumfaciliteter",
-  "Room {roomIndex}, {adults} adults": "Rum {roomIndex}, {adults, plural, one {# vuxen} other {# vuxna}}",
+  "Room {roomIndex}": "Rum {roomIndex}",
-  "Room {roomIndex}, {adults} adults, {children} children": "Rum {roomIndex}, {adults, plural, one {# vuxen} other {# vuxna}}, {children, plural, one {# barn} other {# barn}}",
   "Rooms": "Rum",
   "Rooms & Guests": "Rum och gäster",
   "Sat-Sun Always open": "Lör-Sön Alltid öppet",
@@ -548,6 +547,8 @@
   "types": "typer",
   "wednesday": "onsdag",
   "{address}, {city} ∙ {distanceToCityCenterInKm} km to city center": "{address}, {city} ∙ {distanceToCityCenterInKm} km till stadens centrum",
+  "{adults} adults": "{adults, plural, one {# vuxen} other {# vuxna}}",
+  "{adults} adults, {children} children": "{adults, plural, one {# vuxen} other {# vuxna}}, {children, plural, one {# barn} other {# barn}}",
   "{amount, number} left": "{amount, number} kvar",
   "{amount, plural, one {# hotel} other {# hotels}}": "{amount, plural, one {# hotel} other {# hotels}}",
   "{amount, plural, one {Gift} other {Gifts}} added to your benefits": "{amount, plural, one {Gåva} other {Gåvor}} läggs till dina förmåner",