800dc5c3c1
feat(SW-3225): Move ParkingInformation to design-system * Inline ParkingInformation types to remove trpc dependency * Move ParkingInformation to design-system * Move numberFormatting to common package * Add deps to external * Fix imports and i18n script * Add common as dependency * Merge branch 'master' into feat/sw-3225-move-parking-information-to-booking-flow Approved-by: Linus Flood
166 lines
4.9 KiB
TypeScript
166 lines
4.9 KiB
TypeScript
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
|
import Body from "@scandic-hotels/design-system/Body"
|
|
import Caption from "@scandic-hotels/design-system/Caption"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
|
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
|
import Title from "@scandic-hotels/design-system/Title"
|
|
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
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<PriceDetailsState>(
|
|
(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 (
|
|
<ModalOverlay
|
|
className={styles.overlay}
|
|
isOpen={isOpen}
|
|
isKeyboardDismissDisabled
|
|
>
|
|
<Modal className={styles.modal}>
|
|
<Dialog aria-label={title} className={styles.dialog}>
|
|
<header className={styles.header}>
|
|
<div className={styles.titleContainer}>
|
|
<MaterialIcon
|
|
icon="info"
|
|
size={48}
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
<Title
|
|
level="h1"
|
|
as="h3"
|
|
textAlign="center"
|
|
textTransform="uppercase"
|
|
>
|
|
{title}
|
|
</Title>
|
|
</div>
|
|
<Body textAlign="center">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
|
|
},
|
|
{
|
|
roomSelection: roomSelectionMsg,
|
|
newRoomSelection: newRoomSelectionMsg,
|
|
linebreak: <br />,
|
|
}
|
|
)}
|
|
</Body>
|
|
<div>
|
|
<Subtitle textAlign="center" color="burgundy">
|
|
{intl.formatMessage({
|
|
defaultMessage: "New total",
|
|
})}
|
|
</Subtitle>
|
|
<div className={styles.prices}>
|
|
<Caption striked>
|
|
{formatPrice(intl, prevTotalPrice, currency)}
|
|
</Caption>
|
|
<Body textAlign="center" textTransform="bold">
|
|
{formatPrice(intl, newTotalPrice, currency)}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
<PriceChangeSummary
|
|
rooms={rooms}
|
|
roomPrices={roomPrices}
|
|
newTotalPrice={{ price: newTotalPrice, currency }}
|
|
onAccept={onAccept}
|
|
onCancel={onCancel}
|
|
/>
|
|
</header>
|
|
<footer className={styles.footer}>
|
|
<Button intent="secondary" onClick={onCancel}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Back to select room",
|
|
})}
|
|
</Button>
|
|
<Button onClick={onAccept}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Continue with new price",
|
|
})}
|
|
</Button>
|
|
</footer>
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
)
|
|
}
|