105 lines
2.6 KiB
TypeScript
105 lines
2.6 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { useRoomContext } from "@/contexts/Details/Room"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./joinScandicFriendsCard.module.css"
|
|
|
|
import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
|
|
import { CurrencyEnum } from "@/types/enums/currency"
|
|
|
|
export default function JoinScandicFriendsCard({
|
|
name = "join",
|
|
}: JoinScandicFriendsCardProps) {
|
|
const intl = useIntl()
|
|
const {
|
|
room,
|
|
roomNr,
|
|
actions: { updateJoin },
|
|
} = useRoomContext()
|
|
|
|
function onChange(event: { target: { value: boolean } }) {
|
|
updateJoin(event.target.value)
|
|
}
|
|
|
|
if (!("member" in room.roomRate) || !room.roomRate.member) {
|
|
return null
|
|
}
|
|
|
|
const list = [
|
|
{
|
|
title: intl.formatMessage({
|
|
defaultMessage: "Earn bonus nights & points",
|
|
}),
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
defaultMessage: "Get member benefits & offers",
|
|
}),
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
defaultMessage: "Join at no cost",
|
|
}),
|
|
},
|
|
]
|
|
|
|
const saveOnJoiningLabel = intl.formatMessage(
|
|
{
|
|
defaultMessage: "Pay the member price of {amount} for Room {roomNr}",
|
|
},
|
|
{
|
|
amount: formatPrice(
|
|
intl,
|
|
room.roomRate.member.localPrice.pricePerStay ?? 0,
|
|
room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
|
|
),
|
|
roomNr,
|
|
}
|
|
)
|
|
|
|
return (
|
|
<div className={styles.cardContainer}>
|
|
<Checkbox
|
|
name={name}
|
|
className={styles.checkBox}
|
|
registerOptions={{ onChange, value: room.guest.join }}
|
|
>
|
|
<div>
|
|
<Caption type="label" textTransform="uppercase" color="red">
|
|
{saveOnJoiningLabel}
|
|
</Caption>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Join Scandic Friends",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
</Checkbox>
|
|
|
|
<div className={styles.list}>
|
|
{list.map((item) => (
|
|
<Caption
|
|
key={item.title}
|
|
className={styles.listItem}
|
|
color="uiTextPlaceholder"
|
|
>
|
|
<MaterialIcon
|
|
icon="check"
|
|
size={20}
|
|
color="Icon/Interactive/Placeholder"
|
|
/>
|
|
{item.title}
|
|
</Caption>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|