144 lines
4.1 KiB
TypeScript
144 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import { privacyPolicy } from "@/constants/currentWebHrefs"
|
|
|
|
import LoginButton from "@/components/LoginButton"
|
|
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import { useRoomContext } from "@/contexts/Details/Room"
|
|
import useLang from "@/hooks/useLang"
|
|
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 lang = useLang()
|
|
const intl = useIntl()
|
|
const { room } = useRoomContext()
|
|
|
|
if (!("member" in room.roomRate) || !room.roomRate.member) {
|
|
return null
|
|
}
|
|
|
|
const list = [
|
|
{
|
|
title: intl.formatMessage({
|
|
defaultMessage: "Friendly room rates",
|
|
}),
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
defaultMessage: "Earn & spend points",
|
|
}),
|
|
},
|
|
{
|
|
title: intl.formatMessage({
|
|
defaultMessage: "Join for free",
|
|
}),
|
|
},
|
|
]
|
|
|
|
const saveOnJoiningLabel = intl.formatMessage(
|
|
{
|
|
defaultMessage: "Get the member price: {amount}",
|
|
},
|
|
{
|
|
amount: formatPrice(
|
|
intl,
|
|
room.roomRate.member.localPrice.pricePerStay ?? 0,
|
|
room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
|
|
),
|
|
}
|
|
)
|
|
|
|
return (
|
|
<div className={styles.cardContainer}>
|
|
<Checkbox name={name} className={styles.checkBox}>
|
|
<div>
|
|
<Caption type="label" textTransform="uppercase" color="red">
|
|
{saveOnJoiningLabel}
|
|
</Caption>
|
|
<Caption
|
|
type="label"
|
|
textTransform="uppercase"
|
|
color="uiTextHighContrast"
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Join Scandic Friends",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
</Checkbox>
|
|
|
|
<Footnote color="uiTextHighContrast" className={styles.login}>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{`${intl.formatMessage({
|
|
defaultMessage: "Already a friend?",
|
|
})} `}
|
|
<LoginButton
|
|
color="burgundy"
|
|
position="enter details"
|
|
trackingId="join-scandic-friends-enter-details"
|
|
variant="breadcrumb"
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Log in",
|
|
})}
|
|
</LoginButton>
|
|
</Footnote>
|
|
|
|
<div className={styles.list}>
|
|
{list.map((item) => (
|
|
<Caption
|
|
key={item.title}
|
|
color="uiTextPlaceholder"
|
|
className={styles.listItem}
|
|
>
|
|
<MaterialIcon
|
|
icon="check"
|
|
color="Icon/Interactive/Placeholder"
|
|
size={20}
|
|
/>
|
|
{item.title}
|
|
</Caption>
|
|
))}
|
|
</div>
|
|
<div className={styles.terms}>
|
|
<Footnote color="uiTextPlaceholder">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"By signing up you accept the Scandic Friends <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. Your membership is valid until further notice, and you can terminate your membership at any time by sending an email to Scandic's customer service",
|
|
},
|
|
{
|
|
termsAndConditionsLink: (str) => (
|
|
<Link
|
|
variant="default"
|
|
textDecoration="underline"
|
|
size="tiny"
|
|
target="_blank"
|
|
color="uiTextPlaceholder"
|
|
href={privacyPolicy[lang]}
|
|
>
|
|
{str}
|
|
</Link>
|
|
),
|
|
}
|
|
)}
|
|
</Footnote>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|