"use client" import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { useEnterDetailsStore } from "@/stores/enter-details" import { ArrowRightIcon } from "@/components/Icons" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" 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 { formatNumber } from "@/utils/format" import styles from "./summary.module.css" import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData" import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast" import { BreakfastPackageEnum } from "@/types/enums/breakfast" export default function Summary({ isMember, room, }: { isMember: boolean room: RoomsData }) { const [chosenBed, setChosenBed] = useState() const [chosenBreakfast, setChosenBreakfast] = useState< BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST >() const intl = useIntl() const lang = useLang() const { fromDate, toDate, bedType, breakfast } = useEnterDetailsStore( (state) => ({ fromDate: state.roomData.fromDate, toDate: state.roomData.toDate, bedType: state.userData.bedType, breakfast: state.userData.breakfast, }) ) const diff = dt(toDate).diff(fromDate, "days") const nights = intl.formatMessage( { id: "booking.nights" }, { totalNights: diff } ) let color: "uiTextHighContrast" | "red" = "uiTextHighContrast" if (isMember) { color = "red" } useEffect(() => { setChosenBed(bedType) if (breakfast) { setChosenBreakfast(breakfast) } }, [bedType, breakfast]) return (
{intl.formatMessage({ id: "Summary" })} {dt(fromDate).locale(lang).format("ddd, D MMM")} {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
{room.roomType} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: formatNumber(parseInt(room.localPrice.price ?? "0")), currency: room.localPrice.currency, } )}
{intl.formatMessage( { id: "booking.adults" }, { totalAdults: room.adults } )} {room.children?.length ? ( {intl.formatMessage( { id: "booking.children" }, { totalChildren: room.children.length } )} ) : null} {room.cancellationText} {intl.formatMessage({ id: "Rate details" })}
{chosenBed ? (
{chosenBed} {intl.formatMessage({ id: "Based on availability" })}
{intl.formatMessage( { id: "{amount} {currency}" }, { amount: "0", currency: room.localPrice.currency } )}
) : null} {chosenBreakfast ? ( chosenBreakfast === BreakfastPackageEnum.NO_BREAKFAST ? (
{intl.formatMessage({ id: "No breakfast" })} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: "0", currency: room.localPrice.currency } )}
) : (
{intl.formatMessage({ id: "Breakfast buffet" })} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: chosenBreakfast.localPrice.price, currency: chosenBreakfast.localPrice.currency, } )}
) ) : null}
{intl.formatMessage( { id: "Total price (incl VAT)" }, { b: (str) => {str} } )} {intl.formatMessage({ id: "Price details" })}
{intl.formatMessage( { id: "{amount} {currency}" }, { amount: formatNumber(parseInt(room.localPrice.price ?? "0")), currency: room.localPrice.currency, } )} {intl.formatMessage({ id: "Approx." })}{" "} {intl.formatMessage( { id: "{amount} {currency}" }, { amount: formatNumber(parseInt(room.euroPrice.price ?? "0")), currency: room.euroPrice.currency, } )}
) }