fix: add temp translation handling for overview table

components/Loyalty/Blocks/DynamicContent/OverviewTable/data/SV.json

@@ -4,7 +4,7 @@
       "tier": 1,
       "name": "New Friend",
       "requirement": "0p or 0 nights",
-      "description": "This is the start of something beautiful: as a New Friend, get ready for a journey of delightful Scandic discoveries",
+      "description": "Detta är början på något speciellt, vi kan känna det. Som New Friend bjuder dina vistelser på nya upptäckter.",
       "icon": "/_static/icons/loyaltylevels/new-friend.svg",
       "benefits": [
         {

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { useParams } from "next/navigation"
 import { useReducer } from "react"
 import { type Key } from "react-aria-components"
 import { useIntl } from "react-intl"
@@ -11,7 +12,12 @@ import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Select"
 import { getMembership } from "@/utils/user"
 
-import levelsData from "./data/EN.json"
+import DA from "./data/DA.json"
+import DE from "./data/DE.json"
+import EN from "./data/EN.json"
+import FI from "./data/FI.json"
+import NO from "./data/NO.json"
+import SV from "./data/SV.json"
 import BenefitList from "./BenefitList"
 import LargeTable from "./LargeTable"
 import LevelSummary from "./LevelSummary"
@@ -25,8 +31,18 @@ import {
   OverviewTableProps,
   OverviewTableReducerAction,
 } from "@/types/components/loyalty/blocks"
+import { LangParams } from "@/types/params"
 import { User } from "@/types/user"
 
+const levelsTranslations = {
+  [Lang.en]: EN,
+  [Lang.sv]: SV,
+  [Lang.no]: NO,
+  [Lang.da]: DA,
+  [Lang.fi]: FI,
+  [Lang.de]: DE,
+}
+
 // These should ultimately be fetched from Contentstack
 const titleTranslations = {
   [Lang.en]: [
@@ -56,21 +72,21 @@ const titleTranslations = {
   ],
 }
 
-function getLevelByTier(tier: membershipLevels) {
-  return levelsData.levels.find(
+function getTranslatedLevelByTier(tier: membershipLevels, lang: Lang) {
+  return levelsTranslations[lang].levels.find(
     (level) => level.tier === tier
   ) as ComparisonLevel
 }
 
-function getInitialState(user?: User) {
+function getInitialState({ user, lang }: { user?: User; lang: Lang }) {
   const membership = user?.memberships ? getMembership(user.memberships) : null
   if (!membership?.membershipLevel) {
     return {
-      selectedLevelAMobile: getLevelByTier(1),
-      selectedLevelBMobile: getLevelByTier(2),
-      selectedLevelADesktop: getLevelByTier(1),
-      selectedLevelBDesktop: getLevelByTier(2),
-      selectedLevelCDesktop: getLevelByTier(3),
+      selectedLevelAMobile: getTranslatedLevelByTier(1, lang),
+      selectedLevelBMobile: getTranslatedLevelByTier(2, lang),
+      selectedLevelADesktop: getTranslatedLevelByTier(1, lang),
+      selectedLevelBDesktop: getTranslatedLevelByTier(2, lang),
+      selectedLevelCDesktop: getTranslatedLevelByTier(3, lang),
     }
   }
   if (!membership.membershipLevel) return null
@@ -79,27 +95,27 @@ function getInitialState(user?: User) {
   switch (tier) {
     case 6:
       return {
-        selectedLevelAMobile: getLevelByTier(6),
-        selectedLevelBMobile: getLevelByTier(7),
-        selectedLevelADesktop: getLevelByTier(5),
-        selectedLevelBDesktop: getLevelByTier(6),
-        selectedLevelCDesktop: getLevelByTier(7),
+        selectedLevelAMobile: getTranslatedLevelByTier(6, lang),
+        selectedLevelBMobile: getTranslatedLevelByTier(7, lang),
+        selectedLevelADesktop: getTranslatedLevelByTier(5, lang),
+        selectedLevelBDesktop: getTranslatedLevelByTier(6, lang),
+        selectedLevelCDesktop: getTranslatedLevelByTier(7, lang),
       }
     case 7:
       return {
-        selectedLevelAMobile: getLevelByTier(6),
-        selectedLevelBMobile: getLevelByTier(7),
-        selectedLevelADesktop: getLevelByTier(6),
-        selectedLevelBDesktop: getLevelByTier(7),
-        selectedLevelCDesktop: getLevelByTier(1),
+        selectedLevelAMobile: getTranslatedLevelByTier(6, lang),
+        selectedLevelBMobile: getTranslatedLevelByTier(7, lang),
+        selectedLevelADesktop: getTranslatedLevelByTier(6, lang),
+        selectedLevelBDesktop: getTranslatedLevelByTier(7, lang),
+        selectedLevelCDesktop: getTranslatedLevelByTier(1, lang),
       }
     default:
       return {
-        selectedLevelAMobile: getLevelByTier(tier),
-        selectedLevelBMobile: getLevelByTier(tier + 1),
-        selectedLevelADesktop: getLevelByTier(tier),
-        selectedLevelBDesktop: getLevelByTier(tier + 1),
-        selectedLevelCDesktop: getLevelByTier(tier + 2),
+        selectedLevelAMobile: getTranslatedLevelByTier(tier, lang),
+        selectedLevelBMobile: getTranslatedLevelByTier(tier + 1, lang),
+        selectedLevelADesktop: getTranslatedLevelByTier(tier, lang),
+        selectedLevelBDesktop: getTranslatedLevelByTier(tier + 1, lang),
+        selectedLevelCDesktop: getTranslatedLevelByTier(tier + 2, lang),
       }
   }
 }
@@ -138,14 +154,19 @@ function reducer(state: any, action: OverviewTableReducerAction) {
 
 export default function OverviewTable({ user }: OverviewTableProps) {
   const intl = useIntl()
-
-  const [selectionState, dispatch] = useReducer(reducer, user, getInitialState)
+  const params = useParams<LangParams>()
+  const levelsData = levelsTranslations[params.lang]
+  const [selectionState, dispatch] = useReducer(
+    reducer,
+    { user, lang: params.lang },
+    getInitialState
+  )
 
   function handleSelectChange(actionType: overviewTableActionsEnum) {
     return (key: Key) => {
       if (typeof key === "number") {
         dispatch({
-          payload: getLevelByTier(key),
+          payload: getTranslatedLevelByTier(key, params.lang),
           type: actionType,
         })
       }