"use client" import React from "react" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { Typography } from "@scandic-hotels/design-system/Typography" import { dt } from "@/lib/dt" import { useBookingConfirmationStore } from "@/stores/booking-confirmation" import Modal from "@/components/Modal" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import useLang from "@/hooks/useLang" import { formatPrice } from "@/utils/numberFormatting" import styles from "./priceDetailsModal.module.css" function Row({ label, value, bold, }: { label: string value: string bold?: boolean }) { return ( {label} {value} ) } function TableSection({ children }: React.PropsWithChildren) { return {children} } function TableSectionHeader({ title, subtitle, }: { title: string subtitle?: string }) { return ( {title} {subtitle ? {subtitle} : null} ) } export default function PriceDetailsModal() { const intl = useIntl() const lang = useLang() const { rooms, currencyCode, vat, fromDate, toDate, bookingCode, isVatCurrency, formattedTotalCost, } = useBookingConfirmationStore((state) => ({ rooms: state.rooms, currencyCode: state.currencyCode, vat: state.vat, fromDate: state.fromDate, toDate: state.toDate, bookingCode: state.bookingCode, isVatCurrency: state.isVatCurrency, formattedTotalCost: state.formattedTotalCost, })) if (!rooms[0]) { return null } const checkInDate = dt(fromDate).format("YYYY-MM-DD") const checkOutDate = dt(toDate).format("YYYY-MM-DD") const bookingTotal = rooms.reduce( (acc, room) => { if (room) { return { price: acc.price + room.totalPrice, priceExVat: acc.priceExVat + room.totalPriceExVat, vatAmount: acc.vatAmount + room.vatAmount, } } return acc }, { price: 0, priceExVat: 0, vatAmount: 0 } ) const diff = dt(checkOutDate).diff(checkInDate, "days") const nights = intl.formatMessage( { id: "{totalNights, plural, one {# night} other {# nights}}" }, { totalNights: diff } ) const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")} - ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})` return ( {intl.formatMessage({ id: "Price details" })} } > {rooms.map((room, idx) => { return room ? ( {rooms.length > 1 && ( {intl.formatMessage( { id: "Room {roomIndex}" }, { roomIndex: idx + 1 } )} )} {room.roomFeatures ? room.roomFeatures.map((feature) => ( )) : null} {room.bedDescription ? ( ) : null} {room.breakfast ? ( {room.children ? ( ) : null} ) : null} ) : null })} {isVatCurrency ? ( <> ) : null} {bookingCode && ( )}
{intl.formatMessage({ id: "Price including VAT" })} {formattedTotalCost}
{bookingCode}
) }