import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" 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 "./rateSummary.module.css" import type { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary" import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" export default function RateSummary({ rateSummary, isUserLoggedIn, packages, roomsAvailability, }: RateSummaryProps) { const intl = useIntl() const [isVisible, setIsVisible] = useState(false) useEffect(() => { const timer = setTimeout(() => setIsVisible(true), 0) return () => clearTimeout(timer) }, []) const { member, public: publicRate, features, roomType, priceName, priceTerm, } = rateSummary const priceToShow = isUserLoggedIn && member ? member : publicRate const isPetRoomSelected = features.some( (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM ) const petRoomPackage = packages?.find( (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM ) const petRoomPrice = petRoomPackage?.localPrice.totalPrice ?? null const petRoomCurrency = petRoomPackage?.localPrice.currency ?? null const checkInDate = new Date(roomsAvailability.checkInDate) const checkOutDate = new Date(roomsAvailability.checkOutDate) const nights = dt(checkOutDate).diff(dt(checkInDate), "days") const showMemberDiscountBanner = member && !isUserLoggedIn const summaryPriceTex = `${intl.formatMessage( { id: "booking.nights" }, { totalNights: nights } )}, ${intl.formatMessage( { id: "booking.adults" }, { totalAdults: roomsAvailability.occupancy?.adults } )}${ roomsAvailability.occupancy?.children?.length ? `, ${intl.formatMessage( { id: "booking.children" }, { totalChildren: roomsAvailability.occupancy.children.length } )}` : "" }` return (
{showMemberDiscountBanner && (
{intl.formatMessage({ id: "Join or log in while booking for member pricing.", })}
)}
{roomType} {`${priceName}, ${priceTerm}`}
{showMemberDiscountBanner && (
{intl.formatMessage( { id: "To get the member price {amount} {currency}, log in or join when completing the booking.", }, { span: (str) => ( {str} ), amount: member.localPrice.pricePerStay, currency: member.localPrice.currency, } )}
)}
{intl.formatMessage( { id: "Total price (incl VAT)" }, { b: (str) => {str} } )} {summaryPriceTex}
{priceToShow?.localPrice.pricePerStay}{" "} {priceToShow?.localPrice.currency} {intl.formatMessage({ id: "Approx." })}{" "} {priceToShow?.requestedPrice?.pricePerStay}{" "} {priceToShow?.requestedPrice?.currency}
{intl.formatMessage({ id: "Total price" })} {priceToShow?.localPrice.pricePerStay}{" "} {priceToShow?.localPrice.currency} {summaryPriceTex}
{isPetRoomSelected && (
+ {petRoomPrice} {petRoomCurrency} {intl.formatMessage({ id: "Pet charge" })}
)}
) }