111 lines
3.0 KiB
TypeScript
111 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { privacyPolicy } from "@/constants/currentWebHrefs"
|
|
|
|
import { CheckIcon } from "@/components/Icons"
|
|
import LoginButton from "@/components/LoginButton"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import Link from "../../Link"
|
|
import Caption from "../../Text/Caption"
|
|
import Footnote from "../../Text/Footnote"
|
|
import Checkbox from "../Checkbox"
|
|
|
|
import styles from "./joinScandicFriendsCard.module.css"
|
|
|
|
type JoinScandicFriendsCardProps = {
|
|
name: string
|
|
difference: { price: number; currency: string }
|
|
}
|
|
|
|
export default function JoinScandicFriendsCard({
|
|
name,
|
|
difference,
|
|
}: JoinScandicFriendsCardProps) {
|
|
const lang = useLang()
|
|
const intl = useIntl()
|
|
|
|
const list = [
|
|
{ title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
|
|
{ title: intl.formatMessage({ id: "Get member benefits & offers" }) },
|
|
{ title: intl.formatMessage({ id: "Join at no cost" }) },
|
|
]
|
|
|
|
return (
|
|
<div className={styles.cardContainer}>
|
|
<header className={styles.header}>
|
|
<Checkbox name={name} className={styles.checkBox}>
|
|
<div>
|
|
<Caption type="label" textTransform="uppercase" color="red">
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Only pay {amount} {currency}",
|
|
},
|
|
{
|
|
amount: intl.formatNumber(difference.price),
|
|
currency: difference.currency,
|
|
}
|
|
)}
|
|
</Caption>
|
|
<Caption
|
|
type="label"
|
|
textTransform="uppercase"
|
|
color="uiTextHighContrast"
|
|
>
|
|
{intl.formatMessage({ id: "Join Scandic Friends" })}
|
|
</Caption>
|
|
</div>
|
|
</Checkbox>
|
|
|
|
<Footnote color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "Already a friend?" })}{" "}
|
|
<LoginButton
|
|
color="burgundy"
|
|
position="enter details"
|
|
trackingId="join-scandic-friends-enter-details"
|
|
variant="breadcrumb"
|
|
target="_blank"
|
|
>
|
|
{intl.formatMessage({ id: "Log in" })}
|
|
</LoginButton>
|
|
</Footnote>
|
|
</header>
|
|
|
|
<div className={styles.list}>
|
|
{list.map((item) => (
|
|
<Caption
|
|
key={item.title}
|
|
color="uiTextPlaceholder"
|
|
className={styles.listItem}
|
|
>
|
|
<CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
|
|
</Caption>
|
|
))}
|
|
</div>
|
|
<Footnote color="uiTextPlaceholder">
|
|
{intl.formatMessage<React.ReactNode>(
|
|
{
|
|
id: "signup.terms",
|
|
},
|
|
{
|
|
termsLink: (str) => (
|
|
<Link
|
|
variant="default"
|
|
textDecoration="underline"
|
|
size="tiny"
|
|
target="_blank"
|
|
color="uiTextPlaceholder"
|
|
href={privacyPolicy[lang]}
|
|
>
|
|
{str}
|
|
</Link>
|
|
),
|
|
}
|
|
)}
|
|
</Footnote>
|
|
</div>
|
|
)
|
|
}
|