75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { InfoCircleIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./priceChangeDialog.module.css"
|
|
|
|
import type { PriceChangeDialogProps } from "@/types/components/hotelReservation/enterDetails/priceChangeDialog"
|
|
|
|
export default function PriceChangeDialog({
|
|
isOpen,
|
|
oldPrice,
|
|
newPrice,
|
|
currency,
|
|
onCancel,
|
|
onAccept,
|
|
}: PriceChangeDialogProps) {
|
|
const intl = useIntl()
|
|
const title = intl.formatMessage({ id: "The price has increased" })
|
|
|
|
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}>
|
|
<InfoCircleIcon height={48} width={48} color="burgundy" />
|
|
<Title
|
|
level="h1"
|
|
as="h3"
|
|
textAlign="center"
|
|
textTransform="regular"
|
|
>
|
|
{title}
|
|
</Title>
|
|
</div>
|
|
<Body textAlign="center">
|
|
{intl.formatMessage({
|
|
id: "The price has increased since you selected your room.",
|
|
})}
|
|
<br />
|
|
{intl.formatMessage({
|
|
id: "You can still book the room but you need to confirm that you accept the new price",
|
|
})}
|
|
<br />
|
|
<span className={styles.oldPrice}>
|
|
{formatPrice(intl, oldPrice, currency)}
|
|
</span>
|
|
<strong className={styles.newPrice}>
|
|
{formatPrice(intl, newPrice, currency)}
|
|
</strong>
|
|
</Body>
|
|
</header>
|
|
<footer className={styles.footer}>
|
|
<Button intent="secondary" onClick={onCancel}>
|
|
{intl.formatMessage({ id: "Cancel" })}
|
|
</Button>
|
|
<Button onClick={onAccept}>
|
|
{intl.formatMessage({ id: "Accept new price" })}
|
|
</Button>
|
|
</footer>
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
)
|
|
}
|