diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
index e4ec6b7d0..4f0217c14 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
@@ -1,6 +1,6 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
-import { RoomCardSkeleton } from "../../SelectRate/RoomSelection/RoomCard/RoomCardSkeleton"
+import { RoomCardSkeleton } from "../../SelectRate/RoomList/RoomCard/RoomCardSkeleton"
import styles from "./SelectHotelMapContainerSkeleton.module.css"
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
index 5f20dd5e4..97a3d5319 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
@@ -8,7 +8,7 @@ import { selectHotel } from "@/constants/routes/hotelReservation"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import { useHotelsMapStore } from "@/stores/hotels-map"
-import { RoomCardSkeleton } from "@/components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton"
+import { RoomCardSkeleton } from "@/components/HotelReservation/SelectRate/RoomList/RoomCard/RoomCardSkeleton"
import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RateSummary/index.tsx
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
rename to components/HotelReservation/SelectRate/RateSummary/index.tsx
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css b/components/HotelReservation/SelectRate/RateSummary/rateSummary.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
rename to components/HotelReservation/SelectRate/RateSummary/rateSummary.module.css
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx b/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/index.tsx
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
rename to components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/index.tsx
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css b/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/priceList.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
rename to components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/priceList.module.css
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/utils.ts b/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/utils.ts
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/utils.ts
rename to components/HotelReservation/SelectRate/RoomList/FlexibilityOption/PriceList/utils.ts
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css b/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/flexibilityOption.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
rename to components/HotelReservation/SelectRate/RoomList/FlexibilityOption/flexibilityOption.module.css
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomList/FlexibilityOption/index.tsx
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
rename to components/HotelReservation/SelectRate/RoomList/FlexibilityOption/index.tsx
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton.module.css b/components/HotelReservation/SelectRate/RoomList/RoomCard/RoomCardSkeleton.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton.module.css
rename to components/HotelReservation/SelectRate/RoomList/RoomCard/RoomCardSkeleton.module.css
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton.tsx b/components/HotelReservation/SelectRate/RoomList/RoomCard/RoomCardSkeleton.tsx
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/RoomCard/RoomCardSkeleton.tsx
rename to components/HotelReservation/SelectRate/RoomList/RoomCard/RoomCardSkeleton.tsx
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/cardVariants.ts b/components/HotelReservation/SelectRate/RoomList/RoomCard/cardVariants.ts
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/RoomCard/cardVariants.ts
rename to components/HotelReservation/SelectRate/RoomList/RoomCard/cardVariants.ts
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomList/RoomCard/index.tsx
similarity index 98%
rename from components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
rename to components/HotelReservation/SelectRate/RoomList/RoomCard/index.tsx
index c455dd090..f4e4d451a 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomList/RoomCard/index.tsx
@@ -4,7 +4,6 @@ import { createElement, useCallback } from "react"
import { useIntl } from "react-intl"
import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
-import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
import { ErrorCircleIcon } from "@/components/Icons"
import ImageGallery from "@/components/ImageGallery"
@@ -12,6 +11,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import FlexibilityOption from "../FlexibilityOption"
import { cardVariants } from "./cardVariants"
import styles from "./roomCard.module.css"
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomList/RoomCard/roomCard.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
rename to components/HotelReservation/SelectRate/RoomList/RoomCard/roomCard.module.css
diff --git a/components/HotelReservation/SelectRate/RoomList/index.tsx b/components/HotelReservation/SelectRate/RoomList/index.tsx
new file mode 100644
index 000000000..67d6eb6eb
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomList/index.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import RoomCard from "./RoomCard"
+
+import styles from "./roomSelection.module.css"
+
+import type { RoomListProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+
+export default function RoomList({
+ roomsAvailability,
+ roomCategories,
+ availablePackages,
+ selectedPackages,
+ setRateCode,
+ hotelType,
+}: RoomListProps) {
+ const { roomConfigurations, rateDefinitions } = roomsAvailability
+
+ return (
+
+
+ {roomConfigurations.map((roomConfiguration, index) => (
+
+ ))}
+
+
+ )
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomList/roomSelection.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
rename to components/HotelReservation/SelectRate/RoomList/roomSelection.module.css
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
deleted file mode 100644
index c797db19e..000000000
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-"use client"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { useMemo } from "react"
-
-import { convertObjToSearchParams } from "@/utils/url"
-
-import RateSummary from "./RateSummary"
-import RoomCard from "./RoomCard"
-
-import styles from "./roomSelection.module.css"
-
-import type { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
-
-export default function RoomSelection({
- roomsAvailability,
- roomCategories,
- availablePackages,
- selectedPackages,
- isUserLoggedIn,
- setRateCode,
- rateSummary,
- hotelType,
-}: RoomSelectionProps) {
- const router = useRouter()
- const pathname = usePathname()
- const searchParams = useSearchParams()
- const { roomConfigurations, rateDefinitions } = roomsAvailability
-
- const queryParams = useMemo(() => {
- // TODO: handle multiple rooms
- const newSearchParams = convertObjToSearchParams(
- {
- rooms: [
- {
- roomTypeCode: rateSummary?.roomTypeCode,
- rateCode: rateSummary?.public.rateCode,
- counterRateCode: rateSummary?.member?.rateCode,
- packages: selectedPackages,
- },
- ],
- },
- searchParams
- )
-
- return newSearchParams
- }, [searchParams, rateSummary, selectedPackages])
-
- function handleSubmit(e: React.FormEvent) {
- e.preventDefault()
-
- window.history.replaceState(
- null,
- "",
- `${pathname}?${queryParams.toString()}`
- )
- router.push(`select-bed?${queryParams}`)
- }
-
- return (
-
- )
-}
diff --git a/components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx b/components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx
new file mode 100644
index 000000000..133776d8f
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx
@@ -0,0 +1,33 @@
+import RoomFilter from "../RoomFilter"
+import RoomList from "../RoomList"
+
+import type { RoomSelectionPanelProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+
+export function RoomSelectionPanel({
+ rooms,
+ roomCategories,
+ availablePackages,
+ selectedPackages,
+ setSelectedRate,
+ hotelType,
+ handleFilter,
+ defaultPackages,
+}: RoomSelectionPanelProps) {
+ return (
+ <>
+
+
+ >
+ )
+}
diff --git a/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx b/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx
index 3d79b2579..847ea03ac 100644
--- a/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton.tsx
@@ -1,4 +1,4 @@
-import { RoomCardSkeleton } from "../RoomSelection/RoomCard/RoomCardSkeleton"
+import { RoomCardSkeleton } from "../RoomList/RoomCard/RoomCardSkeleton"
import styles from "./RoomsContainerSkeleton.module.css"
diff --git a/components/HotelReservation/SelectRate/Rooms/index.tsx b/components/HotelReservation/SelectRate/Rooms/index.tsx
index 25a94bf74..9e77daaae 100644
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/index.tsx
@@ -1,14 +1,15 @@
"use client"
-import { useSearchParams } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useMemo, useState } from "react"
import { useIntl } from "react-intl"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { trackLowestRoomPrice } from "@/utils/tracking"
+import { convertObjToSearchParams } from "@/utils/url"
-import RoomFilter from "../RoomFilter"
-import RoomSelection from "../RoomSelection"
+import RateSummary from "../RateSummary"
+import { RoomSelectionPanel } from "../RoomSelectionPanel"
import { filterDuplicateRoomTypesByLowestPrice, parseRoomParams } from "./utils"
import styles from "./rooms.module.css"
@@ -32,6 +33,8 @@ export default function Rooms({
hotelType,
isUserLoggedIn,
}: SelectRateProps) {
+ const router = useRouter()
+ const pathname = usePathname()
const searchParams = useSearchParams()
const hotelId = searchParams.get("hotel")
@@ -43,6 +46,8 @@ export default function Rooms({
[searchParams]
)
+ const isMultipleRooms = searchedRoomsAndGuests.length > 1
+
const intl = useIntl()
const visibleRooms: RoomConfiguration[] = useMemo(() => {
@@ -218,33 +223,94 @@ export default function Rooms({
})
}, [arrivalDate, departureDate, hotelId, rooms.roomConfigurations])
+ const queryParams = useMemo(() => {
+ // TODO: handle multiple rooms
+ const newSearchParams = convertObjToSearchParams(
+ {
+ rooms: [
+ {
+ roomTypeCode: rateSummary?.roomTypeCode,
+ rateCode: rateSummary?.public.rateCode,
+ counterRateCode: rateSummary?.member?.rateCode,
+ packages: selectedPackages,
+ },
+ ],
+ },
+ searchParams
+ )
+
+ return newSearchParams
+ }, [searchParams, rateSummary, selectedPackages])
+
+ function handleSubmit(e: React.FormEvent) {
+ e.preventDefault()
+
+ window.history.replaceState(
+ null,
+ "",
+ `${pathname}?${queryParams.toString()}`
+ )
+ router.push(`select-bed?${queryParams}`)
+ }
+
return (
- <>
- {searchedRoomsAndGuests.map((room, index) => (
-
-
- {`Room ${index + 1}, ${room.adults} adults`}
- {room.children &&
- room.children.length > 0 &&
- `, ${room.children.length} children`}
-
-
-
+ {isMultipleRooms ? (
+ searchedRoomsAndGuests.map((room, index) => (
+
+
+ {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,
+ }
+ )}
+
+
+
+ ))
+ ) : (
+
+ )}
+
+ {rateSummary && (
+
- ))}
- >
+
+ )}
+
)
}
diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json
index 6d143354e..f2e219e5f 100644
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -381,6 +381,8 @@
"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}}",
"Rooms": "Værelser",
"Rooms & Guests": "Værelser & gæster",
"Sat-Sun Always open": "Lør-Søn Altid åben",
diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json
index 10c728a62..99f904f0f 100644
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -376,10 +376,11 @@
"Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Neues Passwort erneut eingeben",
- "Room": "Zimmer",
"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}}",
"Rooms": "Räume",
"Rooms & Guests": "Zimmer & Gäste",
"Sat-Sun Always open": "Sa-So Immer geöffnet",
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index f13904225..a0464e0ad 100644
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -417,10 +417,11 @@
"Restaurant & Bar": "Restaurant & Bar",
"Restaurants & Bars": "Restaurants & Bars",
"Retype new password": "Retype new password",
- "Room": "Room",
"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}}",
"Rooms": "Rooms",
"Rooms & Guests": "Rooms & Guests",
"Sat-Sun Always open": "Sat-Sun Always open",
diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json
index bde600842..bfd7bc85a 100644
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -381,6 +381,8 @@
"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}}",
"Rooms": "Huoneet",
"Rooms & Guests": "Huoneet & Vieraat",
"Rooms & Guestss": "Huoneet & Vieraat",
diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json
index 886b1192f..b1a912aca 100644
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -380,6 +380,8 @@
"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}}",
"Rooms": "Rom",
"Rooms & Guests": "Rom og gjester",
"Sat-Sun Always open": "Lør-Søn Alltid åpen",
diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json
index 6e3eaabe0..00bbe7c2b 100644
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -380,6 +380,8 @@
"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}}",
"Rooms": "Rum",
"Rooms & Guests": "Rum och gäster",
"Sat-Sun Always open": "Lör-Sön Alltid öppet",
diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts
index 7a0faf0af..048db8cc7 100644
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/types/components/hotelReservation/selectRate/roomSelection.ts
@@ -1,18 +1,21 @@
import type { RoomData } from "@/types/hotel"
-import type { SafeUser } from "@/types/user"
import type { RoomsAvailability } from "@/server/routers/hotels/output"
-import type { RoomPackageCodes, RoomPackageData } from "./roomFilter"
-import type { Rate, RateCode } from "./selectRate"
+import type {
+ DefaultFilterOptions,
+ RoomPackage,
+ RoomPackageCodeEnum,
+ RoomPackageCodes,
+ RoomPackageData,
+} from "./roomFilter"
+import type { RateCode } from "./selectRate"
-export interface RoomSelectionProps {
+export interface RoomListProps {
roomsAvailability: RoomsAvailability
roomCategories: RoomData[]
availablePackages: RoomPackageData | undefined
selectedPackages: RoomPackageCodes[]
setRateCode: React.Dispatch>
- rateSummary: Rate | null
hotelType: string | undefined
- isUserLoggedIn: boolean
}
export interface SelectRateProps {
@@ -22,3 +25,16 @@ export interface SelectRateProps {
hotelType: string | undefined
isUserLoggedIn: boolean
}
+
+export interface RoomSelectionPanelProps {
+ rooms: RoomsAvailability
+ roomCategories: RoomData[]
+ availablePackages: RoomPackage[]
+ selectedPackages: RoomPackageCodes[]
+ setSelectedRate: React.Dispatch>
+ hotelType: string | undefined
+ handleFilter: (
+ filter: Record
+ ) => void
+ defaultPackages: DefaultFilterOptions[]
+}