diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx index c9a5e2143..70f1c5aa6 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx @@ -1,6 +1,6 @@ "use client" -import { createElement } from "react" +import { createElement, useCallback } from "react" import { useIntl } from "react-intl" import { RateDefinition } from "@/server/routers/hotels/output" @@ -69,9 +69,61 @@ export default function RoomCard({ const { roomSize, occupancy, descriptions, images } = selectedRoom || {} const mainImage = images?.[0] + const freeCancelation = intl.formatMessage({ id: "Free cancellation" }) + const nonRefundable = intl.formatMessage({ id: "Non-refundable" }) + const freeBooking = intl.formatMessage({ id: "Free rebooking" }) + const payLater = intl.formatMessage({ id: "Pay later" }) + const payNow = intl.formatMessage({ id: "Pay now" }) + + const rateKey = useCallback( + (key: string) => { + switch (key) { + case "flexRate": + return freeCancelation + case "saveRate": + return nonRefundable + default: + return freeBooking + } + }, + [freeCancelation, freeBooking, nonRefundable] + ) + return (
-
+
+ {mainImage && ( +
+
+ {roomConfiguration.roomsLeft < 5 && ( + + {`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`} + + )} + {roomConfiguration.features + .filter((feature) => selectedPackages.includes(feature.code)) + .map((feature) => ( + + {createElement(getIconForFeatureCode(feature.code), { + width: 16, + height: 16, + color: "burgundy", + })} + + ))} +
+ {/*NOTE: images from the test API are hosted on test3.scandichotels.com, + which can't be accessed unless on Scandic's Wifi or using Citrix. */} + +
+ )}
{intl.formatMessage( @@ -96,81 +148,39 @@ export default function RoomCard({ )}
-
-
- - {roomConfiguration.roomType} - - {/* Out of scope for now +
+ + {roomConfiguration.roomType} + + {/* Out of scope for now {descriptions?.short} */} - - {intl.formatMessage({ - id: "Breakfast selection in next step.", - })} - -
- -
- {Object.entries(rates).map(([key, rate]) => ( - - ))} -
- {mainImage && ( -
-
- {roomConfiguration.roomsLeft < 5 && ( - - {`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`} - - )} - {roomConfiguration.features - .filter((feature) => selectedPackages.includes(feature.code)) - .map((feature) => ( - - {createElement(getIconForFeatureCode(feature.code), { - width: 16, - height: 16, - color: "burgundy", - })} - - ))} -
- {/*NOTE: images from the test API are hosted on test3.scandichotels.com, - which can't be accessed unless on Scandic's Wifi or using Citrix. */} - +
+ + {intl.formatMessage({ + id: "Breakfast selection in next step.", + })} + +
+ {Object.entries(rates).map(([key, rate]) => ( + + ))}
- )} +
) } diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css index 799726d1b..1d7ac0a0e 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css @@ -1,16 +1,13 @@ .card { font-size: 14px; display: flex; - flex-direction: column-reverse; + flex-direction: column; background-color: #fff; border-radius: var(--Corner-radius-Large); border: 1px solid var(--Base-Border-Subtle); position: relative; -} - -.cardBody { - display: flex; - flex-direction: column; + height: 100%; + justify-content: space-between; } .specification { @@ -41,7 +38,8 @@ .roomDetails { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Spacing-x1); + padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2); } .name { diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css index 1dab63afb..3da3c9fb2 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css @@ -19,14 +19,6 @@ width: 0; } -@media (min-width: 767px) { - .roomList { - grid-template-columns: repeat(3, minmax(240px, 1fr)); - } -} - -@media (min-width: 1367px) { - .roomList { - grid-template-columns: repeat(4, 1fr); - } +.roomList { + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }