"use client" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { useEnterDetailsStore } from "@/stores/enter-details" import { ArrowRightIcon, ChevronDownSmallIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" import Popover from "@/components/TempDesignSystem/Popover" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import useLang from "@/hooks/useLang" import styles from "./ui.module.css" import type { SummaryProps } from "@/types/components/hotelReservation/summary" import { CurrencyEnum } from "@/types/enums/currency" import type { DetailsState } from "@/types/stores/enter-details" export function storeSelector(state: DetailsState) { return { bedType: state.bedType, booking: state.booking, breakfast: state.breakfast, join: state.guest.join, membershipNo: state.guest.membershipNo, packages: state.packages, roomRate: state.roomRate, roomPrice: state.roomPrice, toggleSummaryOpen: state.actions.toggleSummaryOpen, totalPrice: state.totalPrice, } } export default function SummaryUI({ cancellationText, isMember, rateDetails, roomType, }: SummaryProps) { const intl = useIntl() const lang = useLang() const { bedType, booking, breakfast, join, membershipNo, packages, roomPrice, roomRate, toggleSummaryOpen, totalPrice, } = useEnterDetailsStore(storeSelector) const adults = booking.rooms[0].adults const children = booking.rooms[0].children const showMemberPrice = !!( (isMember || join || membershipNo) && roomRate.memberRate ) const diff = dt(booking.toDate).diff(booking.fromDate, "days") const nights = intl.formatMessage( { id: "booking.nights" }, { totalNights: diff } ) function handleToggleSummary() { if (toggleSummaryOpen) { toggleSummaryOpen() } } return (
{intl.formatMessage({ id: "Summary" })} {dt(booking.fromDate).locale(lang).format("ddd, D MMM")} {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
{roomType} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: intl.formatNumber(roomPrice.local.price), currency: roomPrice.local.currency, } )}
{intl.formatMessage( { id: "booking.adults" }, { totalAdults: adults } )} {children?.length ? ( {intl.formatMessage( { id: "booking.children" }, { totalChildren: children.length } )} ) : null} {cancellationText} {intl.formatMessage({ id: "Rate details" })} } >
{packages ? packages.map((roomPackage) => (
{roomPackage.description}
{intl.formatMessage( { id: "{amount} {currency}" }, { amount: roomPackage.localPrice.price, currency: roomPackage.localPrice.currency, } )}
)) : null} {bedType ? (
{bedType.description} {intl.formatMessage({ id: "Based on availability" })}
{intl.formatMessage( { id: "{amount} {currency}" }, { amount: "0", currency: roomPrice.local.currency } )}
) : null} {breakfast === false ? (
{intl.formatMessage({ id: "No breakfast" })} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: "0", currency: roomPrice.local.currency } )}
) : null} {breakfast ? (
{intl.formatMessage({ id: "Breakfast buffet" })} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: breakfast.localPrice.totalPrice, currency: breakfast.localPrice.currency, } )}
) : null}
{intl.formatMessage( { id: "Total price (incl VAT)" }, { b: (str) => {str} } )} {intl.formatMessage({ id: "Price details" })}
{intl.formatMessage( { id: "{amount} {currency}" }, { amount: intl.formatNumber(totalPrice.local.price, { currency: totalPrice.local.currency, style: "currency", }), currency: totalPrice.local.currency, } )} {totalPrice.euro && ( {intl.formatMessage({ id: "Approx." })}{" "} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: intl.formatNumber(totalPrice.euro.price, { currency: CurrencyEnum.EUR, style: "currency", }), currency: totalPrice.euro.currency, } )} )}
) }