feat: add new design for join scandic friends checkbox

components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx

@@ -0,0 +1,108 @@
+"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 (
+    <label 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>
+        <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>
+    </label>
+  )
+}