{title}

import { Dialog, Modal, ModalOverlay } from "react-aria-components" import { useIntl } from "react-intl" import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { useEnterDetailsStore } from "@/stores/enter-details" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Title from "@/components/TempDesignSystem/Text/Title" import { formatPrice } from "@/utils/numberFormatting" import { calculateTotalRoomPrice } from "../Payment/helpers" import PriceChangeSummary from "./PriceChangeSummary" import styles from "./priceChangeDialog.module.css" import type { PriceChangeData } from "@/types/components/hotelReservation/enterDetails/payment" type PriceDetailsState = { newTotalPrice: number roomPrices: { prevPrice: number; newPrice?: number }[] } type PriceChangeDialogProps = { isOpen: boolean priceChangeData: PriceChangeData prevTotalPrice: number currency: string onCancel: () => void onAccept: () => void } export default function PriceChangeDialog({ isOpen, priceChangeData, prevTotalPrice, currency, onCancel, onAccept, }: PriceChangeDialogProps) { const intl = useIntl() const title = intl.formatMessage({ defaultMessage: "Price change", }) const rooms = useEnterDetailsStore((state) => state.rooms) const { newTotalPrice, roomPrices } = rooms.reduce( (acc, room, idx) => { const roomPrice = room.room.roomPrice.perStay.local.price const priceChange = priceChangeData[idx] const { totalPrice } = calculateTotalRoomPrice( room, priceChange?.roomPrice ) acc.newTotalPrice += totalPrice acc.roomPrices.push({ prevPrice: roomPrice, newPrice: priceChange?.roomPrice, }) return acc }, { newTotalPrice: 0, roomPrices: [] } ) const roomSelectionMsg = intl.formatMessage( { defaultMessage: "{totalRooms, plural, one {room} other {rooms}}", }, { totalRooms: rooms.length, } ) const newRoomSelectionMsg = intl.formatMessage( { defaultMessage: "{totalRooms, plural, one {a new room} other {new rooms}}", }, { totalRooms: rooms.length, } ) return ( ) }