"use client" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking" import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import Modal from "@/components/Modal" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import { formatPrice } from "@/utils/numberFormatting" import RoomSkeletonLoader from "./RoomSkeletonLoader" import styles from "./room.module.css" import type { BookingConfirmationReceiptRoomProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt" export default function ReceiptRoom({ roomIndex, }: BookingConfirmationReceiptRoomProps) { const intl = useIntl() const { room, currencyCode } = useBookingConfirmationStore((state) => ({ room: state.rooms[roomIndex], currencyCode: state.currencyCode, })) if (!room) { return } const childBedCrib = room.childBedPreferences.find( (c) => c.bedType === ChildBedTypeEnum.Crib ) const childBedExtraBed = room.childBedPreferences.find( (c) => c.bedType === ChildBedTypeEnum.ExtraBed ) return (
{room.name} {room.rateDefinition.isMemberRate ? (
{formatPrice(intl, room.roomPrice, currencyCode)}
) : ( {formatPrice(intl, room.roomPrice, currencyCode)} )} {intl.formatMessage( { id: "{totalAdults, plural, one {# adult} other {# adults}}" }, { totalAdults: room.adults, } )} {room.rateDefinition.cancellationText} {intl.formatMessage({ id: "Reservation policy" })} } title={room.rateDefinition.cancellationText || ""} subtitle={ room.rateDefinition.cancellationRule === CancellationRuleEnum.CancellableBefore6PM ? intl.formatMessage({ id: "Pay later" }) : intl.formatMessage({ id: "Pay now" }) } >
{room.rateDefinition.generalTerms?.map((info) => ( {info} ))}
{room.roomFeatures ? room.roomFeatures.map((feature) => (
{feature.description}
{formatPrice(intl, feature.totalPrice, feature.currency)}
)) : null}
{room.bedDescription} {formatPrice(intl, 0, currencyCode)}
{childBedCrib ? (
{intl.formatMessage( { id: "Crib (child) × {count}" }, { count: childBedCrib.quantity } )} {intl.formatMessage({ id: "Based on availability" })}
{formatPrice(intl, 0, currencyCode)}
) : null} {childBedExtraBed ? (
{intl.formatMessage( { id: "Extra bed (child) × {count}" }, { count: childBedExtraBed.quantity, } )}
{formatPrice(intl, 0, currencyCode)}
) : null} {room.breakfast || room.breakfastIncluded ? (
{intl.formatMessage({ id: "Breakfast buffet" })} {(room.rateDefinition.breakfastIncluded ?? room.breakfastIncluded) ? ( {intl.formatMessage({ id: "Included" })} ) : null} {room.breakfast ? ( {formatPrice( intl, room.breakfast.totalPrice, room.breakfast.currency )} ) : null}
) : null}
) }