"use client" import { createElement } from "react" import { useIntl } from "react-intl" import { RateDefinition } from "@/server/routers/hotels/output" import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import ImageGallery from "../../ImageGallery" import { getIconForFeatureCode } from "../../utils" import RoomSidePeek from "../RoomSidePeek" import styles from "./roomCard.module.css" import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard" export default function RoomCard({ rateDefinitions, roomConfiguration, roomCategories, handleSelectRate, }: RoomCardProps) { const intl = useIntl() const rates = { saveRate: rateDefinitions.find( (rate) => rate.cancellationRule === "NonCancellable" ), changeRate: rateDefinitions.find( (rate) => rate.cancellationRule === "Modifiable" ), flexRate: rateDefinitions.find( (rate) => rate.cancellationRule === "CancellableBefore6PM" ), } function findProductForRate(rate: RateDefinition | undefined) { return rate ? roomConfiguration.products.find( (product) => product.productType.public?.rateCode === rate.rateCode || product.productType.member?.rateCode === rate.rateCode ) : undefined } function getPriceInformationForRate(rate: RateDefinition | undefined) { return rateDefinitions.find((def) => def.rateCode === rate?.rateCode) ?.generalTerms } const selectedRoom = roomCategories.find( (room) => room.name === roomConfiguration.roomType ) const { roomSize, occupancy, descriptions, images } = selectedRoom || {} const mainImage = images?.[0] return (

{intl.formatMessage( { id: "booking.guests", }, { nrOfGuests: occupancy?.total } )} {roomSize?.min === roomSize?.max ? roomSize?.min : `${roomSize?.min}-${roomSize?.max}`} m²

{roomConfiguration.roomType} {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.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. */} {images && ( )}

)}

) }