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

2025-01-21 15:59:16 +01:00
parent 328cbbe0e1
commit 98793c58e3
11 changed files with 195 additions and 38 deletions
--- a/components/HotelReservation/SelectRate/RoomList/index.tsx
+++ b/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}
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/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>
        ))
      ) : (
--- a/components/HotelReservation/SelectRate/Rooms/rooms.module.css
+++ b/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;
+}
--- a/components/HotelReservation/SelectRate/SelectedRoomPanel/index.tsx
+++ b/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>
+  )
+}
--- a/components/HotelReservation/SelectRate/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/components/HotelReservation/SelectRate/SelectedRoomPanel/selectedRoomPanel.module.css
@@ -0,0 +1,5 @@
+.selectedRoomPanel {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
--- a/i18n/dictionaries/da.json
+++ b/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}, {adults} adults, {children} children": "Værelse {roomIndex}, {adults, plural, one {# voksen} other {# voksne}}, {children, plural, one {# barn} other {# børn}}",
+  "Room {roomIndex}": "Værelse {roomIndex}",
  "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",
--- a/i18n/dictionaries/de.json
+++ b/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}, {adults} adults, {children} children": "Zimmer {roomIndex}, {adults, plural, one {# Erwachsene} other {# Erwachsene}}, {children, plural, one {# Kind} other {# Kinder}}",
+  "Room {roomIndex}": "Zimmer {roomIndex}",
  "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}}",
--- a/i18n/dictionaries/en.json
+++ b/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}, {adults} adults, {children} children": "Room {roomIndex}, {adults, plural, one {# adult} other {# adults}}, {children, plural, one {# child} other {# children}}",
+  "Room {roomIndex}": "Room {roomIndex}",
  "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",
--- a/i18n/dictionaries/fi.json
+++ b/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}, {adults} adults, {children} children": "Huone {roomIndex}, {adults, plural, one {# vieras} other {# vieraita}}, {children, plural, one {# lapsi} other {# lapsia}}",
+  "Room {roomIndex}": "Huone {roomIndex}",
  "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",
--- a/i18n/dictionaries/no.json
+++ b/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}, {adults} adults, {children} children": "Rom {roomIndex}, {adults, plural, one {# voksen} other {# voksne}}, {children, plural, one {# barn} other {# børn}}",
+  "Room {roomIndex}": "Rom {roomIndex}",
  "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",
--- a/i18n/dictionaries/sv.json
+++ b/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}, {adults} adults, {children} children": "Rum {roomIndex}, {adults, plural, one {# vuxen} other {# vuxna}}, {children, plural, one {# barn} other {# barn}}",
+  "Room {roomIndex}": "Rum {roomIndex}",
  "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",