Merged in feature/refactor-lang (pull request #387)

feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg

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

@@ -8,6 +8,7 @@ import { membershipLevels } from "@/constants/membershipLevels"
 
 import Image from "@/components/Image"
 import Select from "@/components/TempDesignSystem/Select"
+import useLang from "@/hooks/useLang"
 import { getMembership } from "@/utils/user"
 
 import DA from "./data/DA.json"
@@ -33,7 +34,6 @@ import {
   OverviewTableProps,
   OverviewTableReducerAction,
 } from "@/types/components/loyalty/blocks"
-import { LangParams } from "@/types/params"
 import type { User } from "@/types/user"
 
 const levelsTranslations = {
@@ -127,9 +127,9 @@ function reducer(state: any, action: OverviewTableReducerAction) {
 
 export default function OverviewTable({
   activeMembership,
-  lang,
-}: OverviewTableProps & LangParams) {
+}: OverviewTableProps) {
   const intl = useIntl()
+  const lang = useLang()
   const levelsData = levelsTranslations[lang]
   const [selectionState, dispatch] = useReducer(
     reducer,

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -17,12 +17,8 @@ import type {
   DynamicContentProps,
 } from "@/types/components/loyalty/blocks"
 import { LoyaltyComponentEnum } from "@/types/components/loyalty/enums"
-import { LangParams } from "@/types/params"
 
-async function DynamicComponentBlock({
-  component,
-  lang,
-}: DynamicComponentProps & LangParams) {
+async function DynamicComponentBlock({ component }: DynamicComponentProps) {
   const membershipLevel = await serverClient().user.membershipLevel()
   switch (component) {
     case LoyaltyComponentEnum.how_it_works:
@@ -30,7 +26,7 @@ async function DynamicComponentBlock({
     case LoyaltyComponentEnum.loyalty_levels:
       return <LoyaltyLevels />
     case LoyaltyComponentEnum.overview_table:
-      return <OverviewTable activeMembership={membershipLevel} lang={lang} />
+      return <OverviewTable activeMembership={membershipLevel} />
     default:
       return null
   }
@@ -39,8 +35,7 @@ async function DynamicComponentBlock({
 export default function DynamicContent({
   dynamicContent,
   firstItem,
-  lang,
-}: DynamicContentProps & LangParams) {
+}: DynamicContentProps) {
   const displayHeader = !!(
     dynamicContent.link ||
     dynamicContent.subtitle ||
@@ -63,7 +58,7 @@ export default function DynamicContent({
           topTitle={firstItem}
         />
       ) : null}
-      <DynamicComponentBlock component={dynamicContent.component} lang={lang} />
+      <DynamicComponentBlock component={dynamicContent.component} />
       {displayHeader && (
         <SectionLink link={dynamicContent.link} variant="mobile" />
       )}

components/Loyalty/Blocks/WebView/index.tsx

@@ -1,15 +1,15 @@
 import JsonToHtml from "@/components/JsonToHtml"
 import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
+import { getLang } from "@/i18n/serverContext"
 import { modWebviewLink } from "@/utils/webviews"
 
 import CardsGrid from "../CardsGrid"
 
 import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
-import { LangParams } from "@/types/params"
 
-export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
+export function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block, idx) => {
     const firstItem = idx === 0
     switch (block.__typename) {
@@ -35,7 +35,10 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
           link: block.dynamic_content.link
             ? {
                 ...block.dynamic_content.link,
-                href: modWebviewLink(block.dynamic_content.link.href, lang),
+                href: modWebviewLink(
+                  block.dynamic_content.link.href,
+                  getLang()
+                ),
               }
             : undefined,
         }
@@ -45,13 +48,12 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
             dynamicContent={dynamicContent}
             firstItem={firstItem}
             key={`${block.dynamic_content.title}-${idx}`}
-            lang={lang}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
         const shortcuts = block.shortcuts.shortcuts.map((shortcut) => ({
           ...shortcut,
-          url: modWebviewLink(shortcut.url, lang),
+          url: modWebviewLink(shortcut.url, getLang()),
         }))
         return (
           <Shortcuts

components/Loyalty/Blocks/index.tsx

@@ -6,9 +6,8 @@ import CardsGrid from "./CardsGrid"
 
 import type { BlocksProps } from "@/types/components/loyalty/blocks"
 import { LoyaltyBlocksTypenameEnum } from "@/types/components/loyalty/enums"
-import { LangParams } from "@/types/params"
 
-export function Blocks({ blocks, lang }: BlocksProps & LangParams) {
+export function Blocks({ blocks }: BlocksProps) {
   return blocks.map((block, idx) => {
     const firstItem = idx === 0
     switch (block.__typename) {
@@ -27,7 +26,6 @@ export function Blocks({ blocks, lang }: BlocksProps & LangParams) {
             dynamicContent={block.dynamic_content}
             firstItem={firstItem}
             key={`${block.dynamic_content.title}-${idx}`}
-            lang={lang}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts: