"use client" import { cx } from "class-variance-authority" import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" import PriceDetailsModal from "@scandic-hotels/booking-flow/components/PriceDetailsModal" import { isBookingCodeRate } from "@scandic-hotels/booking-flow/components/SelectRate/RoomsContainer/RateSummary/utils" import SignupPromoDesktop from "@scandic-hotels/booking-flow/components/SignupPromoDesktop" 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 { mapToPrice } from "./mapToPrice" import Room from "./Room" import { getMemberPrice } from "./utils" import styles from "./ui.module.css" import type { EnterDetailsSummaryProps } from "@/types/components/hotelReservation/summary" export default function SummaryUI({ booking, rooms, totalPrice, isMember, vat, toggleSummaryOpen, defaultCurrency, }: EnterDetailsSummaryProps) { const intl = useIntl() const lang = useLang() const isDesktop = useMediaQuery("(min-width: 1367px)") const nights = dt(booking.toDate).diff(booking.fromDate, "days") const nightsMsg = intl.formatMessage( { 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 && !isMember && !roomOneGuest.membershipNo && !roomOneGuest.join const roomOneMemberPrice = getMemberPrice(rooms[0].room.roomRate) const roomOneRoomRate = rooms[0].room.roomRate const isVoucherRate = "voucher" in roomOneRoomRate // In case of Redemption, voucher and Corporate cheque do not show approx price const isSpecialRate = "corporateCheque" in roomOneRoomRate || "redemption" in roomOneRoomRate || isVoucherRate const priceDetailsRooms = mapToPrice(rooms, isMember) const isAllCampaignRate = rooms.every( (room) => room.room.roomRate.rateDefinition.isCampaignRate ) const isAllBreakfastIncluded = rooms.every( (room) => room.room.roomRate.rateDefinition.breakfastIncluded ) const containsBookingCodeRate = rooms.find( (r) => r && isBookingCodeRate(r.room.roomRate) ) const showDiscounted = containsBookingCodeRate || isMember const totalCurrency = isVoucherRate ? CurrencyEnum.Voucher : totalPrice.local.currency return (
{intl.formatMessage({ defaultMessage: "Booking summary", })} {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])} {/* eslint-disable formatjs/no-literal-string-in-jsx */} {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} ( {nightsMsg}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
{rooms.map(({ room }, idx) => ( ))}

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

{totalPrice.requested ? (

{intl.formatMessage( { 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}
{showSignupPromo && roomOneMemberPrice && !isMember ? ( ) : null}
) }