119 lines
4.0 KiB
TypeScript
119 lines
4.0 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./roomCard.module.css"
|
|
|
|
import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
|
|
|
|
export default function RoomCard({
|
|
rateDefinitions,
|
|
roomConfiguration,
|
|
}: RoomCardProps) {
|
|
const intl = useIntl()
|
|
|
|
const saveRate = rateDefinitions.find(
|
|
// TODO: Update string when API has decided
|
|
(rate) => rate.cancellationRule === "NonCancellable"
|
|
)
|
|
const changeRate = rateDefinitions.find(
|
|
// TODO: Update string when API has decided
|
|
(rate) => rate.cancellationRule === "Modifiable"
|
|
)
|
|
const flexRate = rateDefinitions.find(
|
|
// TODO: Update string when API has decided
|
|
(rate) => rate.cancellationRule === "CancellableBefore6PM"
|
|
)
|
|
|
|
const saveProduct = saveRate
|
|
? roomConfiguration.products.find(
|
|
(product) =>
|
|
product.productType.public.rateCode === saveRate.rateCode ||
|
|
product.productType.member.rateCode === saveRate.rateCode
|
|
)
|
|
: undefined
|
|
const changeProduct = changeRate
|
|
? roomConfiguration.products.find(
|
|
(product) =>
|
|
product.productType.public.rateCode === changeRate.rateCode ||
|
|
product.productType.member.rateCode === changeRate.rateCode
|
|
)
|
|
: undefined
|
|
const flexProduct = flexRate
|
|
? roomConfiguration.products.find(
|
|
(product) =>
|
|
product.productType.public.rateCode === flexRate.rateCode ||
|
|
product.productType.member.rateCode === flexRate.rateCode
|
|
)
|
|
: undefined
|
|
|
|
return (
|
|
<div className={styles.card}>
|
|
<div className={styles.cardBody}>
|
|
<div className={styles.specification}>
|
|
<Subtitle className={styles.name} type="two">
|
|
{roomConfiguration.roomType}
|
|
</Subtitle>
|
|
<Caption>Room size TBI</Caption>
|
|
<Button intent="text" type="button" size="small" theme="base">
|
|
{intl.formatMessage({ id: "See room details" })}
|
|
</Button>
|
|
<Caption>
|
|
{/*TODO: Handle pluralisation*/}
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Max {nrOfGuests} guests",
|
|
defaultMessage: "Max {nrOfGuests} guests",
|
|
},
|
|
// TODO: Correct number
|
|
{ nrOfGuests: 2 }
|
|
)}
|
|
{intl.formatMessage({
|
|
id: "Breakfast included",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
|
|
<FlexibilityOption
|
|
name={intl.formatMessage({ id: "Non-refundable" })}
|
|
value="non-refundable"
|
|
paymentTerm={intl.formatMessage({ id: "Pay now" })}
|
|
product={saveProduct}
|
|
/>
|
|
<FlexibilityOption
|
|
name={intl.formatMessage({ id: "Free rebooking" })}
|
|
value="free-rebooking"
|
|
paymentTerm={intl.formatMessage({ id: "Pay now" })}
|
|
product={changeProduct}
|
|
/>
|
|
<FlexibilityOption
|
|
name={intl.formatMessage({ id: "Free cancellation" })}
|
|
value="free-cancellation"
|
|
paymentTerm={intl.formatMessage({ id: "Pay later" })}
|
|
product={flexProduct}
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
size="small"
|
|
theme="primaryDark"
|
|
className={styles.button}
|
|
>
|
|
{intl.formatMessage({ id: "Choose room" })}
|
|
</Button>
|
|
</div>
|
|
{/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
alt={intl.formatMessage({ id: "A photo of the room" })}
|
|
// TODO: Correct image URL
|
|
src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|