From aea963740b7be8dd65b23d1c75f790a7240ef2e2 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 17 Oct 2024 13:47:37 +0200
Subject: [PATCH] feat(sw-453): Added selected types count

---
 .../(standard)/select-rate/page.tsx           | 10 ++++--
 .../SelectRate/RoomFilter/index.tsx           | 34 +++++++++++++++++++
 .../RoomFilter/roomFilter.module.css          |  5 +++
 .../SelectRate/RoomSelection/index.tsx        |  6 ++--
 i18n/dictionaries/da.json                     |  2 +-
 i18n/dictionaries/de.json                     |  1 +
 i18n/dictionaries/en.json                     |  6 ++--
 i18n/dictionaries/fi.json                     |  4 ++-
 i18n/dictionaries/no.json                     |  4 ++-
 i18n/dictionaries/sv.json                     |  4 ++-
 .../hotelReservation/selectRate/roomFilter.ts |  3 ++
 .../selectRate/roomSelection.ts               |  2 +-
 12 files changed, 67 insertions(+), 14 deletions(-)
 create mode 100644 components/HotelReservation/SelectRate/RoomFilter/index.tsx
 create mode 100644 components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
 create mode 100644 types/components/hotelReservation/selectRate/roomFilter.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
index 2d80356ac..8ef2b4cd4 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -2,6 +2,7 @@ import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
+import RoomFilter from "@/components/HotelReservation/SelectRate/RoomFilter"
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
@@ -23,7 +24,7 @@ export default async function SelectRatePage({
   const adults = selectRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
   const children = selectRoomParamsObject.room[0].child?.length // TODO: Handle multiple rooms
 
-  const [hotelData, roomConfigurations, user] = await Promise.all([
+  const [hotelData, roomsAvailability, user] = await Promise.all([
     serverClient().hotel.hotelData.get({
       hotelId: searchParams.hotel,
       language: params.lang,
@@ -39,7 +40,7 @@ export default async function SelectRatePage({
     getProfileSafely(),
   ])
 
-  if (!roomConfigurations) {
+  if (!roomsAvailability) {
     return "No rooms found" // TODO: Add a proper error message
   }
 
@@ -54,8 +55,11 @@ export default async function SelectRatePage({
       <HotelInfoCard hotelData={hotelData} />
       <div className={styles.content}>
         <div className={styles.main}>
+          <RoomFilter
+            numberOfRooms={roomsAvailability.roomConfigurations.length}
+          />
           <RoomSelection
-            roomConfigurations={roomConfigurations}
+            roomsAvailability={roomsAvailability}
             roomCategories={roomCategories ?? []}
             user={user}
           />
diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
new file mode 100644
index 000000000..ff3edc852
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Checkbox from "@/components/TempDesignSystem/Checkbox"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import styles from "./roomFilter.module.css"
+
+import { RoomFilterProps } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+function RoomFilter({ numberOfRooms }: RoomFilterProps) {
+  const intl = useIntl()
+  return (
+    <div className={styles.container}>
+      <Body color="uiTextHighContrast">
+        {numberOfRooms}{" "}
+        {intl.formatMessage(
+          { id: "Room types available" },
+          { numberOfRooms: numberOfRooms }
+        )}
+      </Body>
+      <div className={styles.roomsFilter}>
+        <div>
+          <Checkbox name="accessibilty" />
+          <Caption color="uiTextHighContrast">Accessibility room</Caption>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RoomFilter
diff --git a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
new file mode 100644
index 000000000..06caf5149
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index c4c5e2e87..8592e64ea 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -12,7 +12,7 @@ import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRa
 import { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 export default function RoomSelection({
-  roomConfigurations,
+  roomsAvailability,
   roomCategories,
   user,
 }: RoomSelectionProps) {
@@ -54,10 +54,10 @@ export default function RoomSelection({
         onSubmit={handleSubmit}
       >
         <ul className={styles.roomList}>
-          {roomConfigurations.roomConfigurations.map((roomConfiguration) => (
+          {roomsAvailability.roomConfigurations.map((roomConfiguration) => (
             <li key={roomConfiguration.roomType}>
               <RoomCard
-                rateDefinitions={roomConfigurations.rateDefinitions}
+                rateDefinitions={roomsAvailability.rateDefinitions}
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
                 handleSelectRate={setRateSummary}
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 889555466..b9c1622c4 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -241,9 +241,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Gentag den nye adgangskode",
-  "Room": "Værelse",
   "Room & Terms": "Værelse & Vilkår",
   "Room facilities": "Værelsesfaciliteter",
+  "Room types available": "værelse {numberOfRooms, plural, one {# type} other {# types}} tilgængelig",
   "Rooms": "Værelser",
   "Rooms & Guests": "Værelser & gæster",
   "Sauna and gym": "Sauna and gym",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index e092862df..a4df8d378 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -244,6 +244,7 @@
   "Room": "Zimmer",
   "Room & Terms": "Zimmer & Bedingungen",
   "Room facilities": "Zimmerausstattung",
+  "Room types available": "zimmer {numberOfRooms, plural, one {# type} other {# types}} verfügbar",
   "Rooms": "Räume",
   "Rooms & Guests": "Zimmer & Gäste",
   "Sauna and gym": "Sauna and gym",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index f52e13d8e..cf5551d18 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -52,8 +52,6 @@
   "Check in": "Check in",
   "Check out": "Check out",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
-  "Check-in": "Check-in",
-  "Check-out": "Check-out",
   "Child age is required": "Child age is required",
   "Children": "Children",
   "Choose room": "Choose room",
@@ -256,9 +254,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Retype new password",
-  "Room": "Room",
   "Room & Terms": "Room & Terms",
   "Room facilities": "Room facilities",
+  "Room types available": "room {numberOfRooms, plural, one {# type} other {# types}} available",
   "Rooms": "Rooms",
   "Rooms & Guests": "Rooms & Guests",
   "Sauna and gym": "Sauna and gym",
@@ -396,6 +394,8 @@
   "special character": "special character",
   "spendable points expiring by": "{points} spendable points expiring by {date}",
   "to": "to",
+  "type": "type",
+  "types": "types",
   "uppercase letter": "uppercase letter",
   "{amount} out of {total}": "{amount} out of {total}",
   "{amount} {currency}": "{amount} {currency}",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index afe70ea1b..e8f430f16 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -241,9 +241,9 @@
   "Restaurant & Bar": "Ravintola & Baari",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Kirjoita uusi salasana uudelleen",
-  "Room": "Huone",
   "Room & Terms": "Huone & Ehdot",
   "Room facilities": "Huoneen varustelu",
+  "Room types available": "huoneen {numberOfRooms, plural, one {# type} other {# types}} saatavilla",
   "Rooms": "Huoneet",
   "Rooms & Guests": "Huoneet & Vieraat",
   "Rooms & Guestss": "Huoneet & Vieraat",
@@ -377,6 +377,8 @@
   "to": "to",
   "uppercase letter": "iso kirjain",
   "{amount} out of {total}": "{amount}/{total}",
+  "type": "tyyppi",
+  "types": "tyypit",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index fab5ce670..0cdbf99e9 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -239,9 +239,9 @@
   "Restaurant & Bar": "Restaurant & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Skriv inn nytt passord på nytt",
-  "Room": "Rom",
   "Room & Terms": "Rom & Vilkår",
   "Room facilities": "Romfasiliteter",
+  "Room types available": "romtyper {numberOfRooms, plural, one {# type} other {# types}} tilgjengelig",
   "Rooms": "Rom",
   "Rooms & Guests": "Rom og gjester",
   "Sauna and gym": "Sauna and gym",
@@ -373,6 +373,8 @@
   "to": "til",
   "uppercase letter": "stor bokstav",
   "{amount} out of {total}": "{amount} av {total}",
+  "type": "type",
+  "types": "typer",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index be22979a5..c88675fe9 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -239,9 +239,9 @@
   "Restaurant & Bar": "Restaurang & Bar",
   "Restaurants & Bars": "Restaurants & Bars",
   "Retype new password": "Upprepa nytt lösenord",
-  "Room": "Rum",
   "Room & Terms": "Rum & Villkor",
   "Room facilities": "Rumfaciliteter",
+  "Room types available": "rumstyper {numberOfRooms, plural, one {# type} other {# types}} tillgängliga",
   "Rooms": "Rum",
   "Rooms & Guests": "Rum och gäster",
   "Sauna and gym": "Sauna and gym",
@@ -374,6 +374,8 @@
   "to": "till",
   "uppercase letter": "stor bokstav",
   "{amount} out of {total}": "{amount} av {total}",
+  "type": "typ",
+  "types": "typer",
   "{amount} {currency}": "{amount} {currency}",
   "{difference}{amount} {currency}": "{difference}{amount} {currency}",
   "{width} cm × {length} cm": "{width} cm × {length} cm"
diff --git a/types/components/hotelReservation/selectRate/roomFilter.ts b/types/components/hotelReservation/selectRate/roomFilter.ts
new file mode 100644
index 000000000..3ac0c6be5
--- /dev/null
+++ b/types/components/hotelReservation/selectRate/roomFilter.ts
@@ -0,0 +1,3 @@
+export interface RoomFilterProps {
+  numberOfRooms: number
+}
diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts
index 9e944f5d8..fd633fa50 100644
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/types/components/hotelReservation/selectRate/roomSelection.ts
@@ -4,7 +4,7 @@ import { RoomData } from "@/types/hotel"
 import { SafeUser } from "@/types/user"
 
 export interface RoomSelectionProps {
-  roomConfigurations: RoomsAvailability
+  roomsAvailability: RoomsAvailability
   roomCategories: RoomData[]
   user: SafeUser
 }