"use client" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { useEnterDetailsStore } from "@/stores/enter-details" import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop" import { ArrowRightIcon, ChevronDownSmallIcon, ChevronRightSmallIcon, } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" 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 Modal from "../../Modal" import styles from "./ui.module.css" import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums" import type { SummaryProps } from "@/types/components/hotelReservation/summary" 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, togglePriceDetailsModalOpen: state.actions.togglePriceDetailsModalOpen, 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, togglePriceDetailsModalOpen, totalPrice, } = useEnterDetailsStore(storeSelector) const adults = booking.rooms[0].adults const children = booking.rooms[0].children const childrenBeds = children?.reduce( (acc, value) => { const bedType = Number(value.bed) if (bedType === ChildBedMapEnum.IN_ADULTS_BED) { return acc } const count = acc.get(bedType) ?? 0 acc.set(bedType, count + 1) return acc }, new Map([ [ChildBedMapEnum.IN_CRIB, 0], [ChildBedMapEnum.IN_EXTRA_BED, 0], ]) ) const childBedCrib = childrenBeds?.get(ChildBedMapEnum.IN_CRIB) const childBedExtraBed = childrenBeds?.get(ChildBedMapEnum.IN_EXTRA_BED) const memberPrice = roomRate.memberRate ? { currency: roomRate.memberRate.localPrice.currency, amount: roomRate.memberRate.localPrice.pricePerStay, } : null const showMemberPrice = !!(isMember || join || membershipNo) && memberPrice const diff = dt(booking.toDate).diff(booking.fromDate, "days") const nights = intl.formatMessage( { id: "booking.nights" }, { totalNights: diff } ) function handleToggleSummary() { if (toggleSummaryOpen) { toggleSummaryOpen() } } function handleTogglePriceDetailsModal() { if (togglePriceDetailsModalOpen) { togglePriceDetailsModalOpen() } } 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.formatNumber(roomPrice.local.price, { currency: roomPrice.local.currency, style: "currency", })}
{`${intl.formatMessage( { id: "booking.adults" }, { totalAdults: adults } )}${ children?.length ? `, ${intl.formatMessage( { id: "booking.children" }, { totalChildren: children.length } )}` : "" }`} {cancellationText} {intl.formatMessage({ id: "Rate details" })} } >
{packages ? packages.map((roomPackage) => (
{roomPackage.description}
{intl.formatNumber(parseInt(roomPackage.localPrice.price), { currency: roomPackage.localPrice.currency, style: "currency", })}
)) : null} {bedType ? (
{bedType.description} {intl.formatNumber(0, { currency: roomPrice.local.currency, style: "currency", })}
) : null} {childBedCrib ? (
{`${intl.formatMessage({ id: "Crib (child)" })} × ${childBedCrib}`} {intl.formatMessage({ id: "Based on availability" })}
{intl.formatNumber(0, { currency: roomPrice.local.currency, style: "currency", })}
) : null} {childBedExtraBed ? (
{`${intl.formatMessage({ id: "Extra bed (child)" })} × ${childBedExtraBed}`}
{intl.formatNumber(0, { currency: roomPrice.local.currency, style: "currency", })}
) : null} {breakfast === false ? (
{intl.formatMessage({ id: "No breakfast" })} {intl.formatNumber(0, { currency: roomPrice.local.currency, style: "currency", })}
) : null} {breakfast ? (
{intl.formatMessage({ id: "Breakfast buffet" })}
{intl.formatMessage( { id: "booking.adults" }, { totalAdults: adults } )} {intl.formatNumber(parseInt(breakfast.localPrice.totalPrice), { currency: breakfast.localPrice.currency, style: "currency", })}
{children?.length ? (
{intl.formatMessage( { id: "booking.children" }, { totalChildren: children.length } )} {intl.formatNumber(0, { currency: breakfast.localPrice.currency, style: "currency", })}
) : null}
) : null}
{intl.formatMessage( { id: "Total price (incl VAT)" }, { b: (str) => {str} } )} {intl.formatMessage({ id: "Price details" })} } >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu risus quis varius quam quisque id diam vel. Rhoncus urna neque viverra justo. Mattis aliquam faucibus purus in massa. Id cursus metus aliquam eleifend mi in nulla posuere.
{intl.formatNumber(totalPrice.local.price, { currency: totalPrice.local.currency, style: "currency", })} {totalPrice.requested && ( {intl.formatMessage({ id: "Approx." })}{" "} {intl.formatNumber(totalPrice.requested.price, { currency: totalPrice.requested.currency, style: "currency", })} )}
{!showMemberPrice && memberPrice ? ( ) : null}
) }