f178f7fde0
This updates the select room page according to the new UX. It has different sections on the same page, but with specific URLs per section. Since neither UX, UI nor API is completely done both design and data structures are a bit temporary. Approved-by: Simon.Emanuelsson
46 lines
1.1 KiB
TypeScript
46 lines
1.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({
|
|
currency,
|
|
standardPrice,
|
|
memberPrice,
|
|
name,
|
|
value,
|
|
paymentTerm,
|
|
}: FlexibilityOptionProps) {
|
|
const intl = useIntl()
|
|
return (
|
|
<label>
|
|
<input type="radio" name="flexibility" value={value} />
|
|
<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>
|
|
{standardPrice} {currency}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt>{intl.formatMessage({ id: "Member price" })}</dt>
|
|
<dd>
|
|
{memberPrice} {currency}
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|