"use client" import { useIntl } from "react-intl" import { RateDefinition } from "@/server/routers/hotels/output" import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption" import { ChevronRightSmallIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" 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 styles from "./roomCard.module.css" import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard" export default function RoomCard({ rateDefinitions, roomConfiguration, roomCategories, }: RoomCardProps) { const intl = useIntl() const saveRate = rateDefinitions.find( // TODO: Update string when API has decided (rate) => rate.cancellationRule === "NonCancellable" ) const changeRate = rateDefinitions.find( // TODO: Update string when API has decided (rate) => rate.cancellationRule === "Modifiable" ) const flexRate = rateDefinitions.find( // TODO: Update string when API has decided (rate) => rate.cancellationRule === "CancellableBefore6PM" ) const findProductForRate = (rate: RateDefinition | undefined) => { return rate ? roomConfiguration.products.find( (product) => product.productType.public?.rateCode === rate.rateCode || product.productType.member?.rateCode === rate.rateCode ) : undefined } const getPriceForRate = ( rate: typeof saveRate | typeof changeRate | typeof flexRate ) => { return rateDefinitions.find((def) => def.rateCode === rate?.rateCode) ?.generalTerms } const roomSize = roomCategories.find( (category) => category.attributes.name === roomConfiguration.roomType )?.attributes.roomSize const occupancy = roomCategories.find( (category) => category.attributes.name === roomConfiguration.roomType )?.attributes.occupancy.total const roomDescription = roomCategories.find( (room) => room.attributes.name === roomConfiguration.roomType )?.attributes.content.texts.descriptions.short return (

{/*TODO: Handle pluralisation*/} {intl.formatMessage( { id: "booking.guests", }, { nrOfGuests: occupancy } )} {roomSize?.min}-{roomSize?.max} m²

{roomConfiguration.roomType} {roomDescription}

{intl.formatMessage({ id: "Breakfast selection in next step.", })}

{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`} {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */} {/* eslint-disable-next-line @next/next/no-img-element */}

) }