feat(SW-353): dynamic rewards

components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,88 +1,43 @@
-"use client"
-
-import { notFound, useParams } from "next/navigation"
-import { useIntl } from "react-intl"
-
-import { Lang } from "@/constants/languages"
+import { serverClient } from "@/lib/trpc/server"
 
 import { CheckIcon } from "@/components/Icons"
-import {
-  BestFriend,
-  CloseFriend,
-  DearFriend,
-  GoodFriend,
-  LoyalFriend,
-  NewFriend,
-  TrueFriend,
-} from "@/components/Levels"
+import MembershipLevelIcon from "@/components/Levels/Icon"
 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/loyaltyLevels"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import SectionWrapper from "../SectionWrapper"
 
 import styles from "./loyaltyLevels.module.css"
 
-import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
-import type { Level, LevelCardProps } from "@/types/components/overviewTable"
+import { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
+import type { LevelCardProps } from "@/types/components/overviewTable"
 
-export default function LoyaltyLevels({
+export default async function LoyaltyLevels({
   dynamic_content,
   firstItem,
 }: LoyaltyLevelsProps) {
-  const params = useParams()
-  const lang = params.lang as Lang
-  const { formatMessage } = useIntl()
+  const uniqueLevels = await serverClient().contentstack.rewards.all({
+    unique: true,
+  })
 
-  const { levels } = levelsData[lang]
   return (
     <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
       <section className={styles.cardContainer}>
-        {levels.map((level: Level) => (
-          <LevelCard
-            key={level.level}
-            formatMessage={formatMessage}
-            lang={lang}
-            level={level}
-          />
+        {uniqueLevels.map((level) => (
+          <LevelCard key={level.level_id} level={level} />
         ))}
       </section>
     </SectionWrapper>
   )
 }
 
-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" })} `
+async function LevelCard({ level }: LevelCardProps) {
+  const lang = getLang()
+  const intl = await getIntl()
+  const pointsString = `${level.required_points.toLocaleString(lang)} ${intl.formatMessage({ id: "points" })} `
 
   return (
     <article className={styles.card}>
@@ -92,24 +47,24 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
           color="primaryLightOnSurfaceAccent"
           tilted="large"
         >
-          {formatMessage({ id: "Level" })} {level.level}
+          {intl.formatMessage({ id: "Level" })} {level.user_facing_tag}
         </BiroScript>
-        <Level color="red" />
+        <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
       <Title textAlign="center" level="h5">
         {pointsString}
-        {level.requiredNights ? (
+        {level.required_nights ? (
           <span className={styles.redText}>
-            {formatMessage({ id: "or" })} {level.requiredNights}{" "}
-            {formatMessage({ id: "nights" })}
+            {intl.formatMessage({ id: "or" })} {level.required_nights}{" "}
+            {intl.formatMessage({ id: "nights" })}
           </span>
         ) : null}
       </Title>
       <div className={styles.textContainer}>
-        {level.benefits.map((benefit) => (
+        {level.rewards.map((reward) => (
           <Caption
             className={styles.levelText}
-            key={benefit.title}
+            key={reward.reward_id}
             textAlign="center"
             color="textMediumContrast"
           >
@@ -117,7 +72,7 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
               className={styles.checkIcon}
               color="primaryLightOnSurfaceAccent"
             />
-            {benefit.title}
+            {reward.label}
           </Caption>
         ))}
       </div>