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
--- a/components/Icons/ArrowRight.tsx
+++ b/components/Icons/ArrowRight.tsx
@@ -5,6 +5,8 @@ import type { IconProps } from "@/types/components/icon"
 export default function ArrowRightIcon({
  className,
  color,
+  height = "25",
+  width = "24",
  ...props
 }: IconProps) {
  const classNames = iconVariants({ className, color })
@@ -12,9 +14,9 @@ export default function ArrowRightIcon({
    <svg
      className={classNames}
      fill="none"
-      height="25"
+      height={height}
      viewBox="0 0 24 25"
-      width="24"
+      width={width}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
--- a/components/Icons/Email.tsx
+++ b/components/Icons/Email.tsx
@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"

 import type { IconProps } from "@/types/components/icon"

-export default function EmailIcon({ className, color, ...props }: IconProps) {
+export default function EmailIcon({
+  className,
+  color,
+  width = "20",
+  height = "20",
+  ...props
+}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
-      height="20"
+      height={height}
      viewBox="0 0 20 20"
-      width="20"
+      width={width}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
--- a/components/Icons/Phone.tsx
+++ b/components/Icons/Phone.tsx
@@ -2,15 +2,21 @@ import { iconVariants } from "./variants"

 import type { IconProps } from "@/types/components/icon"

-export default function PhoneIcon({ className, color, ...props }: IconProps) {
+export default function PhoneIcon({
+  className,
+  color,
+  height = "24",
+  width = "24",
+  ...props
+}: IconProps) {
  const classNames = iconVariants({ className, color })
  return (
    <svg
      className={classNames}
      fill="none"
-      height="24"
+      height={height}
      viewBox="0 0 24 24"
-      width="24"
+      width={width}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -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>
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
@@ -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);
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
@@ -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);
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -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>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -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 {
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -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) {
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -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>
--- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -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;
+}
--- a/components/Section/Header/index.tsx
+++ b/components/Section/Header/index.tsx
@@ -16,7 +16,7 @@ export default function SectionHeader({
  return (
    <header className={styles.header}>
      <Title
-        as={topTitle ? "h2" : "h3"}
+        as={topTitle ? "h3" : "h4"}
        className={styles.title}
        level={topTitle ? "h1" : "h2"}
      >
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/components/TempDesignSystem/Card/index.tsx
@@ -1,5 +1,4 @@
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -47,7 +46,6 @@ export default function Card({
          <BiroScript className={styles.scriptedTitle} type="two">
            {scriptedTopTitle}
          </BiroScript>
-          <Divider />
        </section>
      ) : null}
      <Title as="h5" className={styles.heading} level="h3">
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -102,6 +102,10 @@
  color: var(--Scandic-Peach-80);
 }

+.white {
+  color: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
 .regular {
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Body-Regular-fontSize);
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -13,6 +13,7 @@ export const linkVariants = cva(styles.link, {
      none: "",
      pale: styles.pale,
      peach80: styles.peach80,
+      white: styles.white,
    },
    size: {
      small: styles.small,
--- a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
+++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
@@ -26,6 +26,14 @@
  line-height: var(--typography-Script-2-lineHeight);
 }

+.tiltedSmall {
+  transform: rotate(-2deg);
+}
+
+.tiltedLarge {
+  transform: rotate(-13deg) translate(0px, -15px);
+}
+
 .center {
  text-align: center;
 }
--- a/components/TempDesignSystem/Text/BiroScript/index.tsx
+++ b/components/TempDesignSystem/Text/BiroScript/index.tsx
@@ -10,6 +10,7 @@ export default function BiroScript({
  color,
  textAlign,
  type,
+  tilted,
  ...props
 }: BiroScriptProps) {
  const Comp = asChild ? Slot : "span"
@@ -18,6 +19,7 @@ export default function BiroScript({
    color,
    textAlign,
    type,
+    tilted,
  })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/BiroScript/variants.ts
+++ b/components/TempDesignSystem/Text/BiroScript/variants.ts
@@ -19,6 +19,10 @@ const config = {
      one: styles.one,
      two: styles.two,
    },
+    tilted: {
+      small: styles.tiltedSmall,
+      large: styles.tiltedLarge,
+    },
  },
  defaultVariants: {
    type: "one",
--- a/components/TempDesignSystem/Text/Footnote/footnote.module.css
+++ b/components/TempDesignSystem/Text/Footnote/footnote.module.css
@@ -43,4 +43,8 @@

 .pale {
  color: var(--Scandic-Brand-Pale-Peach);
-}
+}
+
+.textMediumContrast {
+  color: var(--Base-Text-UI-Medium-contrast);
+}
--- a/components/TempDesignSystem/Text/Footnote/variants.ts
+++ b/components/TempDesignSystem/Text/Footnote/variants.ts
@@ -8,6 +8,7 @@ const config = {
      black: styles.black,
      burgundy: styles.burgundy,
      pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
    },
    textAlign: {
      center: styles.center,