feat: use hardcodded benefits data

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/data/index.ts

@@ -0,0 +1,19 @@
+import { Lang } from "@/constants/languages"
+
+import DA from "./DA.json"
+import DE from "./DE.json"
+import EN from "./EN.json"
+import FI from "./FI.json"
+import NO from "./NO.json"
+import SV from "./SV.json"
+
+const levelsData = {
+  [Lang.en]: EN,
+  [Lang.sv]: SV,
+  [Lang.no]: NO,
+  [Lang.fi]: FI,
+  [Lang.da]: DA,
+  [Lang.de]: DE,
+}
+
+export default levelsData

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,24 +1,30 @@
+"use client"
+
+import { useParams } from "next/navigation"
 import { Check } from "react-feather"
 
+import { Lang } from "@/constants/languages"
 import { _ } from "@/lib/translation"
-import { serverClient } from "@/lib/trpc/server"
 
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/Title"
 
+import levelsData from "./data"
+
 import styles from "./loyaltyLevels.module.css"
 
-import { LevelCardProps } from "@/types/components/loyalty/blocks"
+import { Level, LevelCardProps } from "@/types/components/loyalty/blocks"
 
-export default async function LoyaltyLevels() {
-  const data = await serverClient().loyalty.levels.all()
+export default function LoyaltyLevels() {
+  const { lang } = useParams()
 
+  const { levels } = levelsData[lang as Lang]
   return (
     <section className={styles.container}>
       <div className={styles.cardContainer}>
-        {data.map((level) => (
+        {levels.map((level: Level) => (
           <LevelCard key={level.tier} level={level} />
         ))}
       </div>
@@ -32,17 +38,23 @@ export default async function LoyaltyLevels() {
 }
 
 function LevelCard({ level }: LevelCardProps) {
+  const { lang } = useParams()
+
+  const pointsString = `${level.requiredPoints.toLocaleString(lang)}p`
+  const qualifications = level.requiredNights
+    ? `${pointsString} ${_("or")} ${level.requiredNights} ${_("nights")}`
+    : pointsString
   return (
     <article className={styles.card}>
-      <Title level="h4">{level.tier}</Title>
+      <Title className={styles.tierHeading} level="h4">
+        {level.tier}
+      </Title>
       <Image src={level.logo} alt={level.name} width={140} height={54} />
-      <p className={styles.qualifications}>
-        {level.requiredPoints} {_("or")} {level.requiredNights} {_("nights")}
-      </p>
+      <p className={styles.qualifications}>{qualifications}</p>
       {level.topBenefits.map((benefit) => (
-        <p key={benefit} className={styles.benefits}>
+        <p key={benefit.title} className={styles.benefits}>
           <Check className={styles.icon} />
-          {benefit}
+          {benefit.title}
         </p>
       ))}
     </article>

components/MyPages/Blocks/Benefits/CurrentLevel/index.tsx

@@ -1,9 +1,12 @@
 import Link from "next/link"
 
+import { Lang } from "@/constants/languages"
 import { serverClient } from "@/lib/trpc/server"
 
 import Title from "@/components/Title"
 
+import levelsData from "../data"
+
 import styles from "./current.module.css"
 
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
@@ -13,7 +16,20 @@ export default async function CurrentBenefitsBlock({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const benefits = await serverClient().user.benefits.current()
+  const user = await serverClient().user.get()
+  // TODO: level should be fetched from the `user` object once available
+  // TAKE NOTE: we need clarification on how benefits stack from different levels
+  // in order to determine if a benefit is specific to a level or if it is a cumulative benefit
+  // we might have to add a new boolean property "exclusive" or similar
+  const userLevel = 1
+
+  const currentLevel = levelsData[Lang.en].levels.find(
+    (level) => level.tier === userLevel
+  )
+  if (!currentLevel) {
+    //  TODO: handle this case?
+    return null
+  }
 
   return (
     <section className={styles.container}>
@@ -38,13 +54,17 @@ export default async function CurrentBenefitsBlock({
       {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
 
       <div className={styles.cardContainer}>
-        {benefits.map((benefit) => (
-          <Link href={benefit.href} key={benefit.id} className={styles.card}>
+        {currentLevel.topBenefits.map((benefit, idx) => (
+          <Link
+            href={benefit.href}
+            key={`${currentLevel}-${idx}`}
+            className={styles.card}
+          >
             <Title as="h5" level="h3" className={styles.title}>
-              <span className={styles.value}>{benefit.value}</span>{" "}
-              {benefit.explanation}
+              <span className={styles.value}>{benefit.value}</span>
+              {benefit.explaination ? ` ${benefit.explaination}` : ""}
             </Title>
-            <p className={styles.cardSubtitle}>{benefit.subtitle}</p>
+            <p className={styles.cardSubtitle}>{benefit.description}</p>
           </Link>
         ))}
       </div>

components/MyPages/Blocks/Benefits/data/index.ts

@@ -0,0 +1,19 @@
+import { Lang } from "@/constants/languages"
+
+import DA from "./DA.json"
+import DE from "./DE.json"
+import EN from "./EN.json"
+import FI from "./FI.json"
+import NO from "./NO.json"
+import SV from "./SV.json"
+
+const levelsData = {
+  [Lang.en]: EN,
+  [Lang.sv]: SV,
+  [Lang.no]: NO,
+  [Lang.fi]: FI,
+  [Lang.da]: DA,
+  [Lang.de]: DE,
+}
+
+export default levelsData

types/components/loyalty/blocks.ts

@@ -21,13 +21,24 @@ export type CardGridProps = Pick<CardGrid, "card_grid">
 
 export type Content = { content: RteBlockContent["content"]["content"] }
 
+type Benefit = { title: string; description: string }
+
+export type Level = {
+  tier: number
+  name: string
+  requiredPoints: number
+  requiredNights?: number
+  logo: string
+  topBenefits: Benefit[]
+}
+
 export type LevelCardProps = {
   level: {
     tier: number
     name: string
     requiredPoints: number
-    requiredNights: string
-    topBenefits: string[]
+    requiredNights?: number
+    topBenefits: Benefit[]
     logo: string
   }
 }