diff --git a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css b/components/HotelReservation/HotelCard/HotelPriceCard/hotelPriceCard.module.css
similarity index 69%
rename from components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
rename to components/HotelReservation/HotelCard/HotelPriceCard/hotelPriceCard.module.css
index 23d935c27..bbcfbc83c 100644
--- a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css
+++ b/components/HotelReservation/HotelCard/HotelPriceCard/hotelPriceCard.module.css
@@ -5,18 +5,6 @@
margin: 0;
width: 100%;
}
-
-.noRooms {
- display: flex;
- gap: var(--Spacing-x1);
-}
-
-.prices {
- display: flex;
- flex-direction: column;
- gap: var(--Spacing-x-one-and-half);
-}
-
.divider {
margin: var(--Spacing-x-half) 0;
}
@@ -37,9 +25,3 @@
font-weight: 400;
font-size: var(--typography-Caption-Regular-fontSize);
}
-
-@media screen and (min-width: 1367px) {
- .prices {
- width: 260px;
- }
-}
diff --git a/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx b/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
similarity index 98%
rename from components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx
rename to components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
index 3a5613ade..07138c2dd 100644
--- a/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx
+++ b/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
@@ -5,7 +5,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import styles from "../hotelPriceList.module.css"
+import styles from "./hotelPriceCard.module.css"
import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"
diff --git a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx
deleted file mode 100644
index c868afa5d..000000000
--- a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { useParams } from "next/dist/client/components/navigation"
-import { useIntl } from "react-intl"
-
-import { Lang } from "@/constants/languages"
-import { selectRate } from "@/constants/routes/hotelReservation"
-
-import { ErrorCircleIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-
-import HotelPriceCard from "./HotelPriceCard"
-import NoPriceAvailableCard from "./NoPriceAvailableCard"
-
-import styles from "./hotelPriceList.module.css"
-
-import { HotelPriceListProps } from "@/types/components/hotelReservation/selectHotel/hotePriceListProps"
-
-export default function HotelPriceList({
- price,
- hotelId,
-}: HotelPriceListProps) {
- const intl = useIntl()
- const params = useParams()
- const lang = params.lang as Lang
-
- return (
-
- {price ? (
- <>
- {price.public && }
- {price.member && (
-
- )}
-
- >
- ) : (
-
- )}
-
- )
-}
diff --git a/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx b/components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx
similarity index 91%
rename from components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx
rename to components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx
index 38a0e50b3..884b0ec12 100644
--- a/components/HotelReservation/HotelCard/HotelPriceList/NoPriceAvailableCard/index.tsx
+++ b/components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx
@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
import { ErrorCircleIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
-import styles from "../hotelPriceList.module.css"
+import styles from "./noPriceAvailable.module.css"
export default function NoPriceAvailableCard() {
const intl = useIntl()
diff --git a/components/HotelReservation/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css b/components/HotelReservation/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
new file mode 100644
index 000000000..6f3124b12
--- /dev/null
+++ b/components/HotelReservation/HotelCard/NoPriceAvailableCard/noPriceAvailable.module.css
@@ -0,0 +1,12 @@
+.priceCard {
+ padding: var(--Spacing-x-one-and-half);
+ background-color: var(--Base-Surface-Secondary-light-Normal);
+ border-radius: var(--Corner-radius-Medium);
+ margin: 0;
+ width: 100%;
+}
+
+.noRooms {
+ display: flex;
+ gap: var(--Spacing-x1);
+}
diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index 089f88800..1d5c651cc 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -70,10 +70,6 @@
gap: var(--Spacing-x-half);
}
-.detailsButton {
- border-bottom: none;
-}
-
.button {
min-width: 160px;
}
@@ -84,6 +80,12 @@
gap: var(--Spacing-x1);
}
+.prices {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x-one-and-half);
+}
+
@media screen and (min-width: 1367px) {
.card.pageListing {
flex-direction: row;
@@ -133,4 +135,8 @@
.pageListing .address {
display: inline;
}
+
+ .pageListing .prices {
+ width: 260px;
+ }
}
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 1362b3ad6..f6fbbcf12 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -4,10 +4,11 @@ import { memo, useCallback } from "react"
import { useIntl } from "react-intl"
import { Lang } from "@/constants/languages"
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
+import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -18,7 +19,8 @@ import getSingleDecimal from "@/utils/numberFormatting"
import ReadMore from "../ReadMore"
import TripAdvisorChip from "../TripAdvisorChip"
import HotelLogo from "./HotelLogo"
-import HotelPriceList from "./HotelPriceList"
+import HotelPriceCard from "./HotelPriceCard"
+import NoPriceAvailableCard from "./NoPriceAvailableCard"
import { hotelCardVariants } from "./variants"
import styles from "./hotelCard.module.css"
@@ -139,7 +141,38 @@ function HotelCard({
showCTA={true}
/>
-
+
+ {!price ? (
+
+ ) : (
+ <>
+ {price.public && (
+
+ )}
+ {price.member && (
+
+ )}
+
+ >
+ )}
+
)
diff --git a/components/HotelReservation/HotelCardDialog/index.tsx b/components/HotelReservation/HotelCardDialog/index.tsx
index 3fdcd6344..e6a5e2f02 100644
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -17,7 +17,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import NoPriceAvailableCard from "../HotelCard/HotelPriceList/NoPriceAvailableCard"
+import NoPriceAvailableCard from "../HotelCard/NoPriceAvailableCard"
import styles from "./hotelCardDialog.module.css"
diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
index 48c73cac2..f2ae9d57f 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -6,7 +6,6 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { z } from "zod"
-import { InfoCircleIcon } from "@/components/Icons"
import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -78,10 +77,14 @@ export default function RoomFilter({
-
+
{intl.formatMessage({ id: "Filter" })}
-
+
{Object.entries(selectedFilters)
.filter(([_, value]) => value)
.map(([key]) => intl.formatMessage({ id: key }))
diff --git a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
index 4af90296c..f94858248 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
+++ b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
@@ -16,7 +16,8 @@
display: flex;
flex-direction: row;
gap: var(--Spacing-x-half);
- align-items: flex-end;
+ flex-wrap: wrap;
+ margin-right: var(--Spacing-x1);
}
.infoDesktop {
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
index 80da80184..a38298d27 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
@@ -46,6 +46,13 @@ input[type="radio"]:checked + .card .checkIcon {
.header {
display: flex;
gap: var(--Spacing-x-half);
+ align-items: flex-start;
+}
+
+.priceType {
+ display: flex;
+ gap: var(--Spacing-x-half);
+ flex-wrap: wrap;
}
.button {
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index a79481dcf..e44c3312e 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -89,8 +89,10 @@ export default function FlexibilityOption({
))}
- {name}
- ({paymentTerm})
+
+
{name}
+ ({paymentTerm})
+
pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
undefined
- const selectedRoom = roomCategories.find(
- (room) => room.name === roomConfiguration.roomType
+ const selectedRoom = roomCategories.find((roomCategory) =>
+ roomCategory.roomTypes.some(
+ (roomType) => roomType.code === roomConfiguration.roomTypeCode
+ )
)
- const { roomSize, occupancy, images } = selectedRoom || {}
+ const { name, roomSize, occupancy, images } = selectedRoom || {}
const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
@@ -174,7 +176,7 @@ export default function RoomCard({
- {roomConfiguration.roomType}
+ {name}
{/* Out of scope for now
{descriptions?.short}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
index b05bbdb8b..9847ba98b 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -20,9 +20,9 @@
display: flex;
flex-direction: row;
align-items: center;
+ justify-content: space-between;
gap: var(--Spacing-x1);
padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
- height: 40px;
}
.specification .guests {
@@ -34,6 +34,10 @@
margin-left: auto;
}
+.toggleSidePeek button {
+ text-align: start;
+}
+
.container {
padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
display: flex;
diff --git a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
index 2e1fb5e6f..6fc7a47f7 100644
--- a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
+++ b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css
@@ -50,6 +50,10 @@
margin-bottom: var(--Spacing-x-half);
}
+.facilityList li svg {
+ flex-shrink: 0;
+}
+
.noIcon {
margin-left: var(--Spacing-x4);
}