"use client" import { useIntl } from "react-intl" import { RateDefinition } from "@/server/routers/hotels/output" import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption" import { ChevronRightSmallIcon, GalleryIcon } from "@/components/Icons" import Image from "@/components/Image" import Lightbox from "@/components/Lightbox" 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, handleSelectRate, }: 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" ) 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 getPriceForRate( rate: typeof saveRate | typeof changeRate | typeof flexRate ) { return rateDefinitions.find((def) => def.rateCode === rate?.rateCode) ?.generalTerms } const selectedRoom = roomCategories.find( (room) => room.name === roomConfiguration.roomType ) const roomSize = selectedRoom?.roomSize const occupancy = selectedRoom?.occupancy.total const roomDescription = selectedRoom?.descriptions.short const images = selectedRoom?.images const mainImage = images?.[0] return (
{/*TODO: Handle pluralisation*/} {intl.formatMessage( { id: "booking.guests", }, { nrOfGuests: occupancy } )} {roomSize?.min === roomSize?.max ? roomSize?.min : `${roomSize?.min}-${roomSize?.max}`} m²
{roomConfiguration.roomType} {roomDescription}
{intl.formatMessage({ id: "Breakfast selection in next step.", })}
{mainImage && (
{roomConfiguration.roomsLeft < 5 && ( {`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`} )} {/*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. */} {mainImage.metaData.altText} {images && ( ({ url: image.imageSizes.small, alt: image.metaData.altText, title: image.metaData.title, }))} dialogTitle={roomConfiguration.roomType} >
{images.length}
)}
)}
) }