"use client" import { Fragment, useState } from "react" import { Dialog, DialogTrigger, Modal, ModalOverlay, } from "react-aria-components" import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" 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 styles from "./priceChangeSummary.module.css" import type { RoomState } from "@/types/stores/enter-details" interface PriceChangeSummaryProps { rooms: RoomState[] roomPrices: { prevPrice: number; newPrice?: number }[] newTotalPrice: { price: number; currency: string } onAccept: () => void onCancel: () => void } export default function PriceChangeSummary({ rooms, roomPrices, newTotalPrice, onAccept, onCancel, }: PriceChangeSummaryProps) { const intl = useIntl() const [isOpen, toggleOpen] = useState(false) return ( {({ close }) => (
{intl.formatMessage({ id: "Price details" })}
{rooms.map(({ room }, idx) => { const roomNumber = idx + 1 const newPrice = roomPrices[idx].newPrice return (
{rooms.length > 1 ? intl.formatMessage( { id: "Room {roomIndex}" }, { roomIndex: roomNumber } ) : intl.formatMessage({ id: "Room" })} {room.roomType}
{intl.formatMessage({ id: "Room charge" })} {newPrice ? (
{formatPrice( intl, room.roomPrice.perStay.local.price, room.roomPrice.perStay.local.currency )} {formatPrice( intl, newPrice, room.roomPrice.perStay.local.currency )}
) : ( {formatPrice( intl, room.roomPrice.perStay.local.price, room.roomPrice.perStay.local.currency )} )}
{room.breakfast && (
{intl.formatMessage({ id: "Breakfast charge", })} {formatPrice( intl, Number( room.breakfast.localPrice.totalPrice ), room.breakfast.localPrice.currency )}
)} {room.roomFeatures?.map((feature) => (
{feature.description} {formatPrice( intl, Number(feature.localPrice.totalPrice), feature.localPrice.currency )}
))}
) })}
{intl.formatMessage({ id: "Total" })}
{intl.formatMessage({ id: "Price including VAT" })} {formatPrice( intl, newTotalPrice.price, newTotalPrice.currency )}
)} ) }