fix: update loyalty cards and join loyalty sidebar design

2024-06-27 16:44:40 +02:00
parent 33771a0608
commit 5be118d9e5
20 changed files with 166 additions and 81 deletions
@@ -1,6 +1,6 @@
 "use client"

-import { useParams } from "next/navigation"
+import { notFound, useParams } from "next/navigation"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"
@@ -15,7 +15,8 @@ import {
  NewFriend,
  TrueFriend,
 } from "@/components/Levels"
-import Body from "@/components/TempDesignSystem/Text/Body"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import levelsData from "./data"
@@ -45,7 +46,7 @@ export default function LoyaltyLevels() {
 }

 function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
-  const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
+  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "Points" })} `
  const qualifications = level.requiredNights
    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
    : pointsString
@@ -73,20 +74,40 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
    case 7:
      Level = BestFriend
      break
+    default: {
+      const loyaltyLevel = level.level as never
+      console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
+      notFound()
+    }
  }
  return (
    <article className={styles.card}>
-      <Title className={styles.levelHeading} level="h4">
-        {level.level}
+      <section>
+        <BiroScript
+          type="two"
+          color="primaryLightOnSurfaceAccent"
+          tilted="large"
+        >
+          {formatMessage({ id: "Level" })} {level.level}
+        </BiroScript>
+        <Level color="red" />
+      </section>
+      <Title textAlign="center" level="h5">
+        {qualifications}
      </Title>
-      {Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
      <div className={styles.textContainer}>
-        <Body textTransform="bold">{qualifications}</Body>
        {level.benefits.map((benefit) => (
-          <Body key={benefit.title} textAlign="center">
-            <CheckIcon className={styles.checkIcon} />
+          <Footnote
+            key={benefit.title}
+            textAlign="center"
+            color="textMediumContrast"
+          >
+            <CheckIcon
+              className={styles.checkIcon}
+              color="primaryLightOnSurfaceAccent"
+            />
            {benefit.title}
-          </Body>
+          </Footnote>
        ))}
      </div>
    </article>
@@ -1,8 +1,3 @@
-.container {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
 .cardContainer {
  display: grid;
  gap: var(--Spacing-x2);
@@ -20,37 +15,30 @@
 }

 .card {
-  align-content: flex-start;
-  background-color: var(--UI-Grey-10);
+  background-color: var(--Scandic-Brand-Pale-Peach);
  border-radius: var(--Corner-radius-xLarge);
  display: grid;
  gap: var(--Spacing-x2);
+  min-height: 280px;
  justify-content: center;
  justify-items: center;
  padding: var(--Spacing-x5) var(--Spacing-x1);
 }

-.levelHeading {
-  color: var(--Scandic-Peach-70);
-}
-
 .textContainer {
-  align-content: flex-start;
-  display: grid;
+  align-content: flex-end;
+  display: flex;
  gap: var(--Spacing-x-one-and-half);
+  width: 100%;
+  flex-wrap: wrap;
  justify-content: center;
-  justify-items: center;
 }

 .checkIcon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
 }

@media screen and (min-width: 1367px) {
-  .container {
-    gap: var(--Spacing-x4);
-  }
-
  .cardContainer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
@@ -1,5 +1,5 @@
-.icon,
-.icon * {
-  fill: var(--Scandic-Brand-Burgundy);
-  margin-bottom: var(--Spacing-x-half);
+.link {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
 }
@@ -1,7 +1,9 @@
 import { serverClient } from "@/lib/trpc/server"

 import { EmailIcon, PhoneIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getValueFromContactConfig } from "@/utils/contactConfig"

 import styles from "./contactRow.module.css"
@@ -27,15 +29,29 @@ export default async function ContactRow({ contact }: ContactRowProps) {
    Icon = PhoneIcon
  }

+  let openableLink = val
+  if (contact.contact_field.includes("email")) {
+    openableLink = `mailto:${val}`
+  } else if (contact.contact_field.includes("phone")) {
+    openableLink = `tel:${val}`
+  }
+
  return (
    <div>
-      {Icon ? <Icon className={styles.icon} /> : null}
-      <Body color="burgundy" textAlign="center" textTransform="bold">
+      <Body color="burgundy" textTransform="bold">
        {contact.display_text}
      </Body>
-      <Body color="burgundy" textAlign="center">
+      <Link
+        className={styles.link}
+        href={openableLink}
+        variant="myPage"
+        color="burgundy"
+        size="small"
+      >
+        {Icon ? <Icon width="20" height="20" color="burgundy" /> : null}
        {val}
-      </Body>
+      </Link>
+      <Footnote color="burgundy">{contact.footnote}</Footnote>
    </div>
  )
 }
@@ -4,14 +4,12 @@

@media screen and (min-width: 1367px) {
  .contactContainer {
-    align-items: center;
    border-top: 1px solid var(--UI-Grey-30);
    display: flex;
    flex-direction: column;
-    gap: var(--Spacing-x5);
+    gap: var(--Spacing-x2);
    justify-content: center;
-    padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
-    text-align: center;
+    padding-top: var(--Spacing-x2);
  }

  .contact {
@@ -12,9 +12,7 @@ export default async function Contact({ contactBlock }: ContactProps) {
  const { formatMessage } = await getIntl()
  return (
    <article className={styles.contactContainer}>
-      <Subtitle textAlign="center">
-        {formatMessage({ id: "Contact us" })}
-      </Subtitle>
+      <Subtitle>{formatMessage({ id: "Contact us" })}</Subtitle>
      <section className={styles.contact}>
        {contactBlock.map(({ contact, __typename }, i) => {
          switch (__typename) {
@@ -1,10 +1,10 @@
 import { login } from "@/constants/routes/handleAuth"

+import ArrowRight from "@/components/Icons/ArrowRight"
 import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"

@@ -21,28 +21,38 @@ export default async function JoinLoyaltyContact({
 }: JoinLoyaltyContactProps & LangParams) {
  const { formatMessage } = await getIntl()
  return (
-    <section className={styles.container}>
+    <section>
      <article className={styles.wrapper}>
        <Title as="h4" level="h3">
          {block.title}
        </Title>
-        <ScandicFriends color="primaryLightOnSurfaceAccent" />
-        {block.preamble ? (
-          <Body textAlign="center">{block.preamble}</Body>
-        ) : null}
-        <Button asChild intent="primary">
-          <Body asChild fontOnly textAlign="center" textTransform="bold">
-            <Link href={login[lang]}>
-              {formatMessage({ id: "Join Scandic Friends" })}
-            </Link>
-          </Body>
-        </Button>
-        <Footnote asChild fontOnly textAlign="center" textTransform="bold">
-          <Link color="burgundy" href={`/${lang}/login`}>
-            {formatMessage({ id: "Already a friend?" })} <br />
-            {formatMessage({ id: "Click here to log in" })}
+        <ScandicFriends color="red" />
+        {block.preamble ? <Body>{block.preamble}</Body> : null}
+        <Button asChild intent="primary" theme="base" className={styles.button}>
+          <Link href={login[lang]} color="white">
+            {formatMessage({ id: "Join Scandic Friends" })}
          </Link>
-        </Footnote>
+        </Button>
+        <section className={styles.loginContainer}>
+          <Body>{formatMessage({ id: "Already a friend?" })}</Body>
+          <span className={styles.linkWrapper}>
+            <ArrowRight
+              color="burgundy"
+              className={styles.icon}
+              height="20"
+              width="20"
+            />
+            <Link
+              className={styles.link}
+              color="burgundy"
+              href={`/${lang}/login`}
+              variant="icon"
+              size="small"
+            >
+              {formatMessage({ id: "Log in here" })}
+            </Link>
+          </span>
+        </section>
      </article>
      {block.contact ? <Contact contactBlock={block.contact} /> : null}
    </section>
@@ -1,12 +1,30 @@
-.container {
-  background-color: var(--Main-Grey-White);
+.wrapper {
  display: grid;
+  gap: var(--Spacing-x3);
+  padding-bottom: var(--Spacing-x5);
+  padding-top: var(--Spacing-x4);
 }

-.wrapper {
+.loginContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.button {
+  width: fit-content;
+}
+
+.linkWrapper {
  display: flex;
  align-items: center;
-  flex-direction: column;
-  gap: var(--Spacing-x5);
-  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
-}
+  gap: var(--Spacing-x-half);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  align-self: center;
+}