67 lines
2.1 KiB
TypeScript
67 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>
|
|
}
|
|
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>
|
|
{product.productType.public.localPrice.pricePerNight}{" "}
|
|
{product.productType.public.localPrice.currency}/
|
|
{intl.formatMessage({ id: "night" })}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{intl.formatMessage({ id: "Member price" })}</dt>
|
|
<dd>
|
|
{product.productType.member.localPrice.pricePerNight}{" "}
|
|
{product.productType.member.localPrice.currency}/
|
|
{intl.formatMessage({ id: "night" })}
|
|
</dd>
|
|
</div>
|
|
{product.productType.public.requestedPrice &&
|
|
product.productType.member.requestedPrice && (
|
|
<div>
|
|
<dt>{intl.formatMessage({ id: "Approx." })}</dt>
|
|
<dd>
|
|
{product.productType.public.requestedPrice.pricePerNight}/
|
|
{product.productType.member.requestedPrice.pricePerNight}{" "}
|
|
{product.productType.public.requestedPrice.currency}
|
|
</dd>
|
|
</div>
|
|
)}
|
|
</dl>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|