133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
"use client"
|
|
import { useSession } from "next-auth/react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
|
|
import Modal from "@/components/Modal"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Label from "@/components/TempDesignSystem/Form/Label"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { useRoomContext } from "@/contexts/Room"
|
|
import { isValidClientSession } from "@/utils/clientSession"
|
|
|
|
import PriceTable from "./PriceList"
|
|
|
|
import styles from "./flexibilityOption.module.css"
|
|
|
|
import type { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
|
|
|
|
export default function FlexibilityOption({
|
|
features,
|
|
isSelected,
|
|
paymentTerm,
|
|
priceInformation,
|
|
petRoomPackage,
|
|
product,
|
|
roomType,
|
|
roomTypeCode,
|
|
title,
|
|
}: FlexibilityOptionProps) {
|
|
const intl = useIntl()
|
|
const { data: session } = useSession()
|
|
const isUserLoggedIn = isValidClientSession(session)
|
|
const {
|
|
actions: { selectRate },
|
|
isMainRoom,
|
|
} = useRoomContext()
|
|
|
|
function handleSelect() {
|
|
if (product) {
|
|
selectRate({
|
|
features,
|
|
product,
|
|
roomType,
|
|
roomTypeCode,
|
|
})
|
|
}
|
|
}
|
|
|
|
if (!product) {
|
|
return (
|
|
<div className={styles.noPricesCard}>
|
|
<div className={styles.header}>
|
|
<InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
|
|
<div className={styles.priceType}>
|
|
<Caption>{title}</Caption>
|
|
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
|
|
</div>
|
|
</div>
|
|
<Label size="regular" className={styles.noPricesLabel}>
|
|
<Caption color="uiTextHighContrast" type="bold">
|
|
{intl.formatMessage({ id: "No prices available" })}
|
|
</Caption>
|
|
</Label>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const { public: publicPrice, member: memberPrice } = product.productType
|
|
const rate =
|
|
isUserLoggedIn && isMainRoom && memberPrice ? memberPrice : publicPrice
|
|
|
|
return (
|
|
<label>
|
|
<input
|
|
checked={isSelected}
|
|
name={`rateCode-${rate.rateCode}`}
|
|
onChange={handleSelect}
|
|
type="radio"
|
|
value={rate.rateCode}
|
|
/>
|
|
<div className={styles.card}>
|
|
<div className={styles.header}>
|
|
<Modal
|
|
trigger={
|
|
<Button intent="text">
|
|
<InfoCircleIcon
|
|
width={16}
|
|
height={16}
|
|
color="uiTextMediumContrast"
|
|
/>
|
|
</Button>
|
|
}
|
|
title={title}
|
|
subtitle={paymentTerm}
|
|
>
|
|
<div className={styles.terms}>
|
|
{priceInformation?.map((info) => (
|
|
<Body
|
|
key={info}
|
|
color="uiTextHighContrast"
|
|
className={styles.termsText}
|
|
>
|
|
<CheckIcon
|
|
color="uiSemanticSuccess"
|
|
width={20}
|
|
height={20}
|
|
className={styles.termsIcon}
|
|
></CheckIcon>
|
|
{info}
|
|
</Body>
|
|
))}
|
|
</div>
|
|
</Modal>
|
|
<div className={styles.priceType}>
|
|
<Caption color="uiTextHighContrast">{title}</Caption>
|
|
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
|
|
</div>
|
|
</div>
|
|
<PriceTable
|
|
memberPrice={memberPrice}
|
|
petRoomPackage={petRoomPackage}
|
|
publicPrice={publicPrice}
|
|
/>
|
|
|
|
<div className={styles.checkIcon}>
|
|
<CheckIcon color="white" height="16" width="16" />
|
|
</div>
|
|
</div>
|
|
</label>
|
|
)
|
|
}
|