"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 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" import type { RoomState } from "../../../../stores/enter-details/types" import type { Price } from "../../../../types/price" import type { DetailsBooking } from "../../../../utils/url" type EnterDetailsSummaryProps = { booking: DetailsBooking isUserLoggedIn: boolean totalPrice: Price vat: number rooms: RoomState[] toggleSummaryOpen: () => void defaultCurrency: CurrencyEnum } export default function SummaryUI({ booking, rooms, totalPrice, isUserLoggedIn, 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( { 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 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}
{showSignupPromo && roomOneMemberPrice && !isUserLoggedIn ? ( ) : null}
) }