72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./flexibilityOption.module.css"
|
|
|
|
import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
|
|
|
|
export default function FlexibilityOption({
|
|
product,
|
|
name,
|
|
paymentTerm,
|
|
}: FlexibilityOptionProps) {
|
|
const intl = useIntl()
|
|
|
|
if (!product) {
|
|
// TODO: Implement empty state when this rate can't be booked
|
|
return <div>TBI: Rate not available</div>
|
|
}
|
|
|
|
const { productType } = product
|
|
const { public: publicPrice, member: memberPrice } = productType
|
|
const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
|
|
publicPrice
|
|
const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
|
|
memberPrice
|
|
|
|
return (
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
name="rateCode"
|
|
value={product.productType.public.rateCode}
|
|
/>
|
|
<div className={styles.card}>
|
|
<div className={styles.header}>
|
|
<Body>{name}</Body>
|
|
<Caption>{paymentTerm}</Caption>
|
|
</div>
|
|
<dl>
|
|
<div>
|
|
<dt>{intl.formatMessage({ id: "Standard price" })}</dt>
|
|
<dd>
|
|
{publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
|
|
{intl.formatMessage({ id: "night" })}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{intl.formatMessage({ id: "Member price" })}</dt>
|
|
<dd>
|
|
{memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
|
|
{intl.formatMessage({ id: "night" })}
|
|
</dd>
|
|
</div>
|
|
{publicRequestedPrice && memberRequestedPrice && (
|
|
<div>
|
|
<dt>{intl.formatMessage({ id: "Approx." })}</dt>
|
|
<dd>
|
|
{publicRequestedPrice.pricePerNight}/
|
|
{memberRequestedPrice.pricePerNight}{" "}
|
|
{publicRequestedPrice.currency}
|
|
</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|