feat(SW-285): ship support for dynamic content

2024-09-02 20:01:48 +02:00
parent e88e4d92bf
commit 1c2a34591b
35 changed files with 5125 additions and 0 deletions
--- a/components/Content/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Content/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { notFound, useParams } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import { Lang } from "@/constants/languages"
+
+import { CheckIcon } from "@/components/Icons"
+import {
+  BestFriend,
+  CloseFriend,
+  DearFriend,
+  GoodFriend,
+  LoyalFriend,
+  NewFriend,
+  TrueFriend,
+} from "@/components/Levels"
+import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import levelsData from "./data"
+
+import styles from "./loyaltyLevels.module.css"
+
+import type { Level, LevelCardProps } from "@/types/components/content/blocks"
+
+export default function LoyaltyLevels() {
+  const params = useParams()
+  const lang = params.lang as Lang
+  const { formatMessage } = useIntl()
+
+  const { levels } = levelsData[lang]
+  return (
+    <section className={styles.cardContainer}>
+      {levels.map((level: Level) => (
+        <LevelCard
+          key={level.level}
+          formatMessage={formatMessage}
+          lang={lang}
+          level={level}
+        />
+      ))}
+    </section>
+  )
+}
+
+function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
+  let Level = null
+  switch (level.level) {
+    case 1:
+      Level = NewFriend
+      break
+    case 2:
+      Level = GoodFriend
+      break
+    case 3:
+      Level = CloseFriend
+      break
+    case 4:
+      Level = DearFriend
+      break
+    case 5:
+      Level = LoyalFriend
+      break
+    case 6:
+      Level = TrueFriend
+      break
+    case 7:
+      Level = BestFriend
+      break
+    default: {
+      const loyaltyLevel = level.level as never
+      console.error(`Unsupported loyalty level given: ${loyaltyLevel}`)
+      notFound()
+    }
+  }
+  const pointsString = `${level.requiredPoints.toLocaleString(lang)} ${formatMessage({ id: "points" })} `
+
+  return (
+    <article className={styles.card}>
+      <header>
+        <BiroScript
+          type="two"
+          color="primaryLightOnSurfaceAccent"
+          tilted="large"
+        >
+          {formatMessage({ id: "Level" })} {level.level}
+        </BiroScript>
+        <Level color="red" />
+      </header>
+      <Title textAlign="center" level="h5">
+        {pointsString}
+        {level.requiredNights ? (
+          <span className={styles.redText}>
+            {formatMessage({ id: "or" })} {level.requiredNights}{" "}
+            {formatMessage({ id: "nights" })}
+          </span>
+        ) : null}
+      </Title>
+      <div className={styles.textContainer}>
+        {level.benefits.map((benefit) => (
+          <Caption
+            className={styles.levelText}
+            key={benefit.title}
+            textAlign="center"
+            color="textMediumContrast"
+          >
+            <CheckIcon
+              className={styles.checkIcon}
+              color="primaryLightOnSurfaceAccent"
+            />
+            {benefit.title}
+          </Caption>
+        ))}
+      </div>
+    </article>
+  )
+}