import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop" import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile" 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 { formatPrice } from "@/utils/numberFormatting" 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 isPetRoomSelected = features.some( (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM ) const petRoomPackage = packages?.find( (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM ) const petRoomLocalPrice = isPetRoomSelected && petRoomPackage?.localPrice.totalPrice ? Number(petRoomPackage?.localPrice.totalPrice) : 0 const petRoomRequestedPrice = isPetRoomSelected && petRoomPackage?.requestedPrice.totalPrice ? Number(petRoomPackage?.requestedPrice.totalPrice) : 0 const priceToShow = isUserLoggedIn && member ? member : publicRate const totalPriceToShow = { localPrice: { currency: priceToShow.localPrice.currency, price: priceToShow.localPrice.pricePerStay + petRoomLocalPrice, }, requestedPrice: !priceToShow.requestedPrice ? undefined : { currency: priceToShow.requestedPrice.currency, price: priceToShow.requestedPrice.pricePerStay + petRoomRequestedPrice, }, } 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 summaryPriceText = `${intl.formatMessage( { id: "{totalNights, plural, one {# night} other {# nights}}" }, { totalNights: nights } )}, ${intl.formatMessage( { id: "{totalAdults, plural, one {# adult} other {# adults}}" }, { totalAdults: roomsAvailability.occupancy?.adults } )}${ roomsAvailability.occupancy?.children?.length ? `, ${intl.formatMessage( { id: "{totalChildren, plural, one {# child} other {# children}}" }, { totalChildren: roomsAvailability.occupancy.children.length } )}` : "" }` return (

{showMemberDiscountBanner && }

{roomType} {`${priceName}, ${priceTerm}`}

{showMemberDiscountBanner && (

)}

{intl.formatMessage( { id: "Total price (incl VAT)" }, { b: (str) => {str} } )} {summaryPriceText}

{formatPrice( intl, totalPriceToShow.localPrice.price, totalPriceToShow.localPrice.currency )} {totalPriceToShow?.requestedPrice ? ( {intl.formatMessage( { id: "Approx. {value}" }, { value: formatPrice( intl, totalPriceToShow.requestedPrice.price, totalPriceToShow.requestedPrice.currency ), } )} ) : null}

{intl.formatMessage({ id: "Total price" })} {formatPrice( intl, totalPriceToShow.localPrice.price, totalPriceToShow.localPrice.currency )} {summaryPriceText}

) }