"use client" import { cx } from "class-variance-authority" import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" import { CurrencyEnum } from "@scandic-hotels/common/constants/currency" import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats" import { dt } from "@scandic-hotels/common/dt" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import Body from "@scandic-hotels/design-system/Body" import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Subtitle from "@scandic-hotels/design-system/Subtitle" import { Typography } from "@scandic-hotels/design-system/Typography" import useLang from "../../../../hooks/useLang" import { useEnterDetailsStore } from "../../../../stores/enter-details" import PriceDetailsModal from "../../../PriceDetailsModal" import { isBookingCodeRate } from "../../../SelectRate/RoomsContainer/RateSummary/utils" import SignupPromoDesktop from "../../../SignupPromo/Desktop" import { mapToPrice } from "./mapToPrice" import Room from "./Room" import { getMemberPrice } from "./utils" import styles from "./ui.module.css" export default function SummaryUI({ isUserLoggedIn, }: { isUserLoggedIn: boolean }) { const intl = useIntl() const lang = useLang() const isDesktop = useMediaQuery("(min-width: 1367px)") const { booking, defaultCurrency, hotelOffersBreakfast, rooms, totalPrice, vat, toggleSummaryOpen, } = useEnterDetailsStore((state) => ({ booking: state.booking, defaultCurrency: state.defaultCurrency, hotelOffersBreakfast: state.hotelOffersBreakfast, rooms: state.rooms, totalPrice: state.totalPrice, vat: state.vat, toggleSummaryOpen: state.actions.toggleSummaryOpen, })) const nights = dt(booking.toDate).diff(booking.fromDate, "days") const nightsMsg = intl.formatMessage( { id: "booking.numberOfNights", defaultMessage: "{totalNights, plural, one {# night} other {# nights}}", }, { totalNights: nights } ) function handleToggleSummary() { if (toggleSummaryOpen) { toggleSummaryOpen() } } const roomOneGuest = rooms[0].room.guest const showSignupPromo = rooms.length === 1 && !isUserLoggedIn && !roomOneGuest.membershipNo && !roomOneGuest.join const roomOneMemberPrice = getMemberPrice(rooms[0].room.roomRate) const roomOneRoomRate = rooms[0].room.roomRate const isVoucherRate = "voucher" in roomOneRoomRate const priceDetailsRooms = mapToPrice(rooms, isUserLoggedIn) const isAllCampaignRate = rooms.every( (room) => room.room.roomRate.rateDefinition.isCampaignRate ) const containsBookingCodeRate = rooms.find( (r) => r && isBookingCodeRate(r.room.roomRate) ) const containsCampaignRate = rooms.find( (r) => r && r.room.roomRate.rateDefinition.isCampaignRate ) const showDiscounted = containsBookingCodeRate || isUserLoggedIn const totalCurrency = isVoucherRate ? CurrencyEnum.Voucher : totalPrice.local.currency return (
{intl.formatMessage({ id: "booking.bookingSummary", defaultMessage: "Booking summary", })} {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])} {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} ( {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} {nightsMsg})
{rooms.map(({ room }, idx) => ( ))}

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

{totalPrice.requested ? (

{intl.formatMessage( { id: "booking.approxValue", defaultMessage: "Approx. {value}", }, { value: formatPrice( intl, totalPrice.requested.price, totalPrice.requested.currency, totalPrice.requested.additionalPrice, totalPrice.requested.additionalPriceCurrency ), } )}

) : null}
{formatPrice( intl, totalPrice.local.price, totalCurrency, totalPrice.local.additionalPrice, totalPrice.local.additionalPriceCurrency )} {showDiscounted && totalPrice.local.regularPrice ? (

{formatPrice( intl, totalPrice.local.regularPrice, totalPrice.local.currency )}

) : null}
{rooms.length === 1 && (isAllCampaignRate || booking.bookingCode) && ( )} {showSignupPromo && roomOneMemberPrice && !isUserLoggedIn ? ( ) : null}
) }