"use client" import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" import { useRateSelectionStore } from "@/stores/select-rate/rate-selection" 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 Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { formatPrice } from "@/utils/numberFormatting" import MobileSummary from "./MobileSummary" import { calculateTotalPrice } from "./utils" 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({ isUserLoggedIn, packages, roomsAvailability, booking, vat, }: RateSummaryProps) { const intl = useIntl() const [isVisible, setIsVisible] = useState(false) const { getSelectedRateSummary } = useRateSelectionStore() const { rooms } = booking useEffect(() => { const timer = setTimeout(() => setIsVisible(true), 0) return () => clearTimeout(timer) }, []) const selectedRateSummary = getSelectedRateSummary() const totalRoomsRequired = rooms?.length || 1 if (selectedRateSummary.length === 0) return null const petRoomPackage = packages?.find( (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM ) const totalPriceToShow = calculateTotalPrice( selectedRateSummary, isUserLoggedIn, petRoomPackage ) const isAllRoomsSelected = selectedRateSummary.length === totalRoomsRequired const checkInDate = new Date(roomsAvailability.checkInDate) const checkOutDate = new Date(roomsAvailability.checkOutDate) const nights = dt(checkOutDate).diff(dt(checkInDate), "days") const hasMemberRates = selectedRateSummary.some((room) => room.member) const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn const summaryPriceText = `${intl.formatMessage( { id: "{totalNights, plural, one {# night} other {# nights}}" }, { totalNights: nights } )}, ${intl.formatMessage( { id: "{totalAdults, plural, one {# adult} other {# adults}}" }, { totalAdults: rooms.reduce((acc, room) => acc + room.adults, 0) } )}${ rooms.some((room) => room.childrenInRoom?.length) ? `, ${intl.formatMessage( { id: "{totalChildren, plural, one {# child} other {# children}}" }, { totalChildren: rooms.reduce( (acc, room) => acc + (room.childrenInRoom?.length ?? 0), 0 ), } )}` : "" }, ${intl.formatMessage( { id: "{totalRooms, plural, one {# room} other {# rooms}}" }, { totalRooms: rooms.length, } )}` return (

{selectedRateSummary.map((room, index) => (

{intl.formatMessage( { id: "Room {roomIndex}" }, { roomIndex: index + 1 } )} {room.roomType} {`${room.priceName}, ${room.priceTerm}`}

))} {/* Render unselected rooms */} {Array.from({ length: totalRoomsRequired - selectedRateSummary.length, }).map((_, index) => (

{intl.formatMessage( { id: "Room {roomIndex}" }, { roomIndex: selectedRateSummary.length + index + 1 } )} {intl.formatMessage({ id: "Select room" })}

))}

{showMemberDiscountBanner && (

{ const memberPrice = room.member?.localPrice.pricePerStay ?? 0 const isPetRoom = room.features.some( (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM ) const petRoomPrice = isPetRoom && petRoomPackage ? Number(petRoomPackage.localPrice.totalPrice || 0) : 0 return total + memberPrice + petRoomPrice }, 0), currency: selectedRateSummary[0].member?.localPrice.currency ?? selectedRateSummary[0].public.localPrice.currency, }} />

)}

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

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

{showMemberDiscountBanner ? : null}

) }