103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./priceTable.module.css"
|
|
|
|
import { PriceTableProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
|
|
|
|
export default function PriceTable({
|
|
publicPrice,
|
|
memberPrice,
|
|
}: PriceTableProps) {
|
|
const intl = useIntl()
|
|
|
|
const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
|
|
publicPrice || {}
|
|
const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
|
|
memberPrice || {}
|
|
|
|
const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
|
|
|
|
return (
|
|
<dl className={styles.priceTable}>
|
|
<div className={styles.priceRow}>
|
|
<dt>
|
|
<Caption
|
|
textTransform="bold"
|
|
color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
|
|
>
|
|
{intl.formatMessage({ id: "Standard price" })}
|
|
</Caption>
|
|
</dt>
|
|
<dd>
|
|
{publicLocalPrice ? (
|
|
<div className={styles.price}>
|
|
<Subtitle type="two" color="uiTextHighContrast">
|
|
{publicLocalPrice.pricePerNight}
|
|
</Subtitle>
|
|
<Body color="uiTextHighContrast" textTransform="bold">
|
|
{publicLocalPrice.currency}
|
|
</Body>
|
|
</div>
|
|
) : (
|
|
<Subtitle type="two" color="disabled">
|
|
{intl.formatMessage({ id: "n/a" })}
|
|
</Subtitle>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
|
|
<div className={styles.priceRow}>
|
|
<dt>
|
|
<Caption
|
|
textTransform="bold"
|
|
color={memberLocalPrice ? "red" : "disabled"}
|
|
>
|
|
{intl.formatMessage({ id: "Member price" })}
|
|
</Caption>
|
|
</dt>
|
|
<dd>
|
|
{memberLocalPrice ? (
|
|
<div className={styles.price}>
|
|
<Subtitle type="two" color="red">
|
|
{memberLocalPrice.pricePerNight}
|
|
</Subtitle>
|
|
<Body color="red" textTransform="bold">
|
|
{memberLocalPrice.currency}
|
|
</Body>
|
|
</div>
|
|
) : (
|
|
<Body textTransform="bold" color="disabled">
|
|
- {intl.formatMessage({ id: "Currency Code" })}
|
|
</Body>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
|
|
<div className={styles.priceRow}>
|
|
<dt>
|
|
<Caption
|
|
color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
|
|
>
|
|
{intl.formatMessage({ id: "Approx." })}
|
|
</Caption>
|
|
</dt>
|
|
<dd>
|
|
{showRequestedPrice ? (
|
|
<Caption color="uiTextMediumContrast">
|
|
{publicRequestedPrice.pricePerNight}/
|
|
{memberRequestedPrice.pricePerNight}{" "}
|
|
{publicRequestedPrice.currency}
|
|
</Caption>
|
|
) : (
|
|
<Caption color="disabled">- / - EUR</Caption>
|
|
)}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
)
|
|
}
|