From aebb223542ad94ec4957c9b1f99778f2592b4800 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Thu, 20 Jun 2024 15:26:55 +0200 Subject: [PATCH] fix: add temp translation handling for overview table --- .../DynamicContent/OverviewTable/data/SV.json | 2 +- .../DynamicContent/OverviewTable/index.tsx | 75 ++++++++++++------- 2 files changed, 49 insertions(+), 28 deletions(-) diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/SV.json b/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/SV.json index 6117816c5..dabd0d43f 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/data/SV.json +++ b/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": [ { diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx b/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx index 7a8dc9df9..2b03633ff 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx +++ b/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() + 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, }) }