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

feat: SW-238 Avoid prop drilling of lang

Approved-by: Michael Zetterberg

components/ContentType/HotelPage/HotelPage.tsx

@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import { getLang } from "@/i18n/serverContext"
+
 import AmenitiesList from "./AmenitiesList"
 import IntroSection from "./IntroSection"
 import { Rooms } from "./Rooms"
@@ -7,9 +9,7 @@ import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
 
-import type { LangParams } from "@/types/params"
-
-export default async function HotelPage({ lang }: LangParams) {
+export default async function HotelPage() {
   const hotelPageIdentifierData =
     await serverClient().contentstack.hotelPage.get()
 
@@ -19,7 +19,7 @@ export default async function HotelPage({ lang }: LangParams) {
 
   const { attributes, roomCategories } = await serverClient().hotel.getHotel({
     hotelId: hotelPageIdentifierData.hotel_page_id,
-    language: lang,
+    language: getLang(),
     include: ["RoomCategories"],
   })
 

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -8,9 +8,7 @@ import TrackingSDK from "@/components/TrackingSDK"
 
 import styles from "./loyaltyPage.module.css"
 
-import type { LangParams } from "@/types/params"
-
-export default async function LoyaltyPage({ lang }: LangParams) {
+export default async function LoyaltyPage() {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -23,14 +21,12 @@ export default async function LoyaltyPage({ lang }: LangParams) {
     <>
       <section className={styles.content}>
         {loyaltyPage.sidebar.length ? (
-          <Sidebar blocks={loyaltyPage.sidebar} lang={lang} />
+          <Sidebar blocks={loyaltyPage.sidebar} />
         ) : null}
 
         <MaxWidth className={styles.blocks} tag="main">
           <Title>{loyaltyPage.heading}</Title>
-          {loyaltyPage.blocks ? (
-            <Blocks blocks={loyaltyPage.blocks} lang={lang} />
-          ) : null}
+          {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
         </MaxWidth>
       </section>
 

components/ContentType/Webviews/AccountPage.tsx

@@ -8,12 +8,11 @@ import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Webview/Content"
 import TrackingSDK from "@/components/TrackingSDK"
 import LinkToOverview from "@/components/Webviews/LinkToOverview"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./accountPage.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function MyPages({ lang }: LangParams) {
+export default async function MyPages() {
   const accountPageRes = await serverClient().contentstack.accountPage.get()
 
   if (!accountPageRes) {
@@ -22,13 +21,14 @@ export default async function MyPages({ lang }: LangParams) {
 
   const { tracking, accountPage } = accountPageRes
 
-  const linkToOverview = `/${lang}/webview${accountPage.url}` !== overview[lang]
+  const linkToOverview =
+    `/${getLang()}/webview${accountPage.url}` !== overview[getLang()]
 
   return (
     <>
       <MaxWidth className={styles.blocks} tag="main">
-        {linkToOverview ? <LinkToOverview lang={lang} /> : null}
-        <Content lang={lang} content={accountPage.content} />
+        {linkToOverview ? <LinkToOverview /> : null}
+        <Content content={accountPage.content} />
       </MaxWidth>
 
       <TrackingSDK pageData={tracking} />

components/ContentType/Webviews/LoyaltyPage.tsx

@@ -8,9 +8,7 @@ import LinkToOverview from "@/components/Webviews/LinkToOverview"
 
 import styles from "./loyaltyPage.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function AboutScandicFriends({ lang }: LangParams) {
+export default async function AboutScandicFriends() {
   const loyaltyPageRes = await serverClient().contentstack.loyaltyPage.get()
 
   if (!loyaltyPageRes) {
@@ -21,10 +19,10 @@ export default async function AboutScandicFriends({ lang }: LangParams) {
   return (
     <>
       <section className={styles.content}>
-        <LinkToOverview lang={lang} />
+        <LinkToOverview />
         <MaxWidth tag="main" className={styles.blocks}>
           <Title>{loyaltyPage.heading}</Title>
-          <Blocks blocks={loyaltyPage.blocks} lang={lang} />
+          <Blocks blocks={loyaltyPage.blocks} />
         </MaxWidth>
       </section>
 

components/Current/Footer/index.tsx

@@ -1,15 +1,16 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import Image from "@/components/Image"
+import { getLang } from "@/i18n/serverContext"
 
 import Navigation from "./Navigation"
 
 import styles from "./footer.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function Footer({ lang }: LangParams) {
-  const footerData = await serverClient().contentstack.base.footer({ lang })
+export default async function Footer() {
+  const footerData = await serverClient().contentstack.base.footer({
+    lang: getLang(),
+  })
   if (!footerData) {
     return null
   }

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -4,15 +4,14 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { Lang, languages } from "@/constants/languages"
 
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 
 import styles from "./desktop.module.css"
 
 import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function Desktop({
-  currentLanguage,
-  urls,
-}: LanguageSwitcherProps) {
+export default function Desktop({ urls }: LanguageSwitcherProps) {
+  const currentLanguage = useLang()
   const [isOpen, setIsOpen] = useState(false)
   const divRef = useRef<HTMLDivElement>(null)
 

components/Current/Header/LanguageSwitcher/Mobile/index.tsx

@@ -3,14 +3,14 @@ import { useState } from "react"
 
 import { Lang, languages } from "@/constants/languages"
 
+import useLang from "@/hooks/useLang"
+
 import styles from "./mobile.module.css"
 
 import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function Mobile({
-  currentLanguage,
-  urls,
-}: LanguageSwitcherProps) {
+export default function Mobile({ urls }: LanguageSwitcherProps) {
+  const currentLanguage = useLang()
   const [isOpen, setIsOpen] = useState(false)
 
   function toggleOpen() {

components/Current/Header/LanguageSwitcher/index.tsx

@@ -1,19 +1,15 @@
 import Desktop from "./Desktop"
 import Mobile from "./Mobile"
 
-import { LangParams } from "@/types/params"
 import { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
 
-type LanguageSwitcherProps = LangParams & { urls: LanguageSwitcherData }
+type LanguageSwitcherProps = { urls: LanguageSwitcherData }
 
-export default function LanguageSwitcher({
-  urls,
-  lang,
-}: LanguageSwitcherProps) {
+export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
   return (
     <>
-      <Desktop currentLanguage={lang} urls={urls} />
-      <Mobile currentLanguage={lang} urls={urls} />
+      <Desktop urls={urls} />
+      <Mobile urls={urls} />
     </>
   )
 }

components/Current/Header/LoginButton.tsx

@@ -7,26 +7,24 @@ import { login } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+import useLang from "@/hooks/useLang"
 import { trackLoginClick } from "@/utils/tracking"
 
 import { TrackingPosition } from "@/types/components/tracking"
-import { LangParams } from "@/types/params"
 
 export default function LoginButton({
   className,
   position,
   trackingId,
-  lang,
   children,
   color = "black",
-}: PropsWithChildren<
-  LangParams & {
-    className: string
-    trackingId: string
-    position: TrackingPosition
-    color?: LinkProps["color"]
-  }
->) {
+}: PropsWithChildren<{
+  className: string
+  trackingId: string
+  position: TrackingPosition
+  color?: LinkProps["color"]
+}>) {
+  const lang = useLang()
   const pathName = usePathname()
 
   useEffect(() => {

components/Current/Header/MainMenu/index.tsx

@@ -8,6 +8,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import Avatar from "@/components/MyPages/Avatar"
 import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
 import { trackClick } from "@/utils/tracking"
 
 import BookingButton from "../BookingButton"
@@ -27,9 +28,9 @@ export function MainMenu({
   myPagesMobileDropdown,
   bookingHref,
   user,
-  lang,
 }: MainMenuProps) {
   const intl = useIntl()
+  const lang = useLang()
 
   const {
     isHamburgerMenuOpen,
@@ -111,7 +112,6 @@ export function MainMenu({
                       position="hamburger menu"
                       trackingId="loginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
-                      lang={lang}
                     >
                       {intl.formatMessage({ id: "Log in" })}
                     </LoginButton>

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -2,7 +2,6 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
-import { Lang } from "@/constants/languages"
 import { logout } from "@/constants/routes/handleAuth"
 import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
 import useDropdownStore from "@/stores/main-menu"
@@ -10,6 +9,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import styles from "./my-pages-mobile-dropdown.module.css"
 
@@ -17,12 +17,11 @@ type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
 
 export default function MyPagesMobileDropdown({
   navigation,
-  lang,
 }: {
   navigation: Navigation
-  lang: Lang | null
 }) {
   const { formatMessage } = useIntl()
+  const lang = useLang()
   const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
     useDropdownStore()
 

components/Current/Header/TopMenu/index.tsx

@@ -3,6 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import LoginButton from "../LoginButton"
 
@@ -19,7 +20,6 @@ export default async function TopMenu({
   homeHref,
   links,
   languageSwitcher,
-  lang,
 }: TopMenuProps) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.name()
@@ -47,7 +47,7 @@ export default async function TopMenu({
               <>
                 {user ? (
                   <Link
-                    href={logout[lang]}
+                    href={logout[getLang()]}
                     className={styles.sessionLink}
                     prefetch={false}
                   >
@@ -56,7 +56,7 @@ export default async function TopMenu({
                 ) : null}
                 <div className={styles.loginSeparator} />
                 <Link
-                  href={logout[lang]}
+                  href={logout[getLang()]}
                   className={styles.sessionLink}
                   prefetch={false}
                 >
@@ -68,7 +68,6 @@ export default async function TopMenu({
                 position="hamburger menu"
                 trackingId="loginStartTopMeny"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
-                lang={lang}
               >
                 {formatMessage({ id: "Log in" })}
               </LoginButton>

components/Current/Header/index.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
 import { BookingWidget } from "@/components/BookingWidget"
+import { getLang } from "@/i18n/serverContext"
 
 import { MainMenu } from "./MainMenu"
 import OfflineBanner from "./OfflineBanner"
@@ -11,17 +12,15 @@ import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
-import { LangParams } from "@/types/params"
-
 export default async function Header({
-  lang,
   languageSwitcher,
   myPagesMobileDropdown,
-}: LangParams & { languageSwitcher: React.ReactNode } & {
+}: {
+  languageSwitcher: React.ReactNode
   myPagesMobileDropdown: React.ReactNode
 }) {
   const data = await serverClient().contentstack.base.header({
-    lang,
+    lang: getLang(),
   })
 
   const user = await serverClient().user.name()
@@ -35,7 +34,7 @@ export default async function Header({
     return null
   }
 
-  const homeHref = homeHrefs[env.NODE_ENV][lang]
+  const homeHref = homeHrefs[env.NODE_ENV][getLang()]
   const { frontpage_link_text, logo, menu, top_menu } = data
 
   const topMenuMobileLinks = top_menu.links
@@ -50,7 +49,6 @@ export default async function Header({
         homeHref={homeHref}
         links={top_menu.links}
         languageSwitcher={languageSwitcher}
-        lang={lang}
       />
       <MainMenu
         frontpageLinkText={frontpage_link_text}
@@ -62,7 +60,6 @@ export default async function Header({
         myPagesMobileDropdown={myPagesMobileDropdown}
         bookingHref={homeHref}
         user={user}
-        lang={lang}
       />
       {hideBookingWidget ? null : <BookingWidget />}
     </header>

components/Current/LangPopup/index.tsx

@@ -2,7 +2,9 @@ import { headers } from "next/headers"
 
 import { Lang, localeToLang } from "@/constants/languages"
 
-export default function LangPopup({ lang }: { lang: Lang }) {
+import { getLang } from "@/i18n/serverContext"
+
+export default function LangPopup() {
   const headersList = headers()
   const preferedLang = headersList.get("Accept-Language") ?? ""
 
@@ -14,7 +16,7 @@ export default function LangPopup({ lang }: { lang: Lang }) {
 
   const langOfChoice: Lang = localeToLang[preferedLang as Lang]
 
-  if (langOfChoice === lang) {
+  if (langOfChoice === getLang()) {
     return null
   }
 

components/Current/NotFound/index.tsx

@@ -1,11 +1,11 @@
+import { getLang } from "@/i18n/serverContext"
+
 import { texts } from "./Texts"
 
 import styles from "./notFound.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default function NotFound({ lang }: LangParams) {
-  const infoTexts = texts[lang]
+export default function NotFound() {
+  const infoTexts = texts[getLang()]
   return (
     <div className={styles.container}>
       <div className={styles.content}>

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:

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -14,12 +14,10 @@ import Contact from "./Contact"
 import styles from "./joinLoyalty.module.css"
 
 import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"
-import { LangParams } from "@/types/params"
 
 export default async function JoinLoyaltyContact({
   block,
-  lang,
-}: JoinLoyaltyContactProps & LangParams) {
+}: JoinLoyaltyContactProps) {
   const { formatMessage } = await getIntl()
   const user = await serverClient().user.name()
 
@@ -55,7 +53,6 @@ export default async function JoinLoyaltyContact({
           <Body>{formatMessage({ id: "Already a friend?" })}</Body>
           <LoginButton
             className={styles.link}
-            lang={lang}
             trackingId="loginJoinLoyalty"
             position="join scandic friends sidebar"
             color="burgundy"

components/Loyalty/Sidebar/index.tsx

@@ -10,12 +10,8 @@ import {
   SidebarTypenameEnum,
 } from "@/types/components/loyalty/enums"
 import { SidebarProps } from "@/types/components/loyalty/sidebar"
-import { LangParams } from "@/types/params"
 
-export default function SidebarLoyalty({
-  blocks,
-  lang,
-}: SidebarProps & LangParams) {
+export default function SidebarLoyalty({ blocks }: SidebarProps) {
   return (
     <aside className={styles.aside}>
       {blocks.map((block, idx) => {
@@ -37,18 +33,12 @@ export default function SidebarLoyalty({
               <JoinLoyaltyContact
                 block={block.join_loyalty_contact}
                 key={`${block.__typename}-${idx}`}
-                lang={lang}
               />
             )
           case SidebarTypenameEnum.LoyaltyPageSidebarDynamicContent:
             switch (block.dynamic_content.component) {
               case LoyaltySidebarDynamicComponentEnum.my_pages_navigation:
-                return (
-                  <SidebarMyPages
-                    key={`${block.__typename}-${idx}`}
-                    lang={lang}
-                  />
-                )
+                return <SidebarMyPages key={`${block.__typename}-${idx}`} />
               default:
                 return null
             }

components/MyPages/AccountPage/Content.tsx

@@ -7,6 +7,7 @@ import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 import PreviousStays from "@/components/MyPages/Blocks/Stays/Previous"
 import SoonestStays from "@/components/MyPages/Blocks/Stays/Soonest"
 import UpcomingStays from "@/components/MyPages/Blocks/Stays/Upcoming"
+import { getLang } from "@/i18n/serverContext"
 import { removeMultipleSlashes } from "@/utils/url"
 
 import PointsOverview from "../Blocks/Points/Overview"
@@ -47,7 +48,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
   }
 }
 
-export default function Content({ lang, content }: ContentProps) {
+export default function Content({ content }: ContentProps) {
   return content.map((item, idx) => {
     switch (item.__typename) {
       case ContentEntries.AccountPageContentDynamicContent:
@@ -57,14 +58,13 @@ export default function Content({ lang, content }: ContentProps) {
                 item.dynamic_content.link.linkConnection.edges[0].node
                   .original_url ||
                 removeMultipleSlashes(
-                  `/${lang}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
+                  `/${getLang()}/${item.dynamic_content.link.linkConnection.edges[0].node.url}`
                 ),
               text: item.dynamic_content.link.link_text,
             }
           : null
 
         const componentProps = {
-          lang,
           title: item.dynamic_content.title,
           // TODO: rename preamble to subtitle in Contentstack?
           subtitle: item.dynamic_content.preamble,

components/MyPages/AccountPage/Webview/Content.tsx

@@ -1,6 +1,7 @@
 import JsonToHtml from "@/components/JsonToHtml"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
+import { getLang } from "@/i18n/serverContext"
 import { removeMultipleSlashes } from "@/utils/url"
 import { modWebviewLink } from "@/utils/webviews"
 
@@ -39,7 +40,7 @@ function DynamicComponent({ component, props }: AccountPageContentProps) {
   }
 }
 
-export default function Content({ lang, content }: ContentProps) {
+export default function Content({ content }: ContentProps) {
   return (
     <>
       {content.map((item, idx) => {
@@ -62,7 +63,6 @@ export default function Content({ lang, content }: ContentProps) {
               : null
 
             const componentProps = {
-              lang,
               title: item.dynamic_content.title,
               // TODO: rename preamble to subtitle in Contentstack?
               subtitle: item.dynamic_content.preamble,
@@ -79,7 +79,7 @@ export default function Content({ lang, content }: ContentProps) {
             const shortcuts = item.shortcuts.shortcuts.map((shortcut) => {
               return {
                 ...shortcut,
-                url: modWebviewLink(shortcut.url, lang),
+                url: modWebviewLink(shortcut.url, getLang()),
               }
             })
             return (

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

@@ -6,20 +6,19 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"
 
 import styles from "./current.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"
 
 export default async function CurrentBenefitsBlock({
   title,
   subtitle,
   link,
-  lang,
-}: AccountPageComponentProps & LangParams) {
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   // 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
@@ -35,7 +34,7 @@ export default async function CurrentBenefitsBlock({
 
   const currentLevel = getMembershipLevelObject(
     user.memberships[0].membershipLevel as MembershipLevelEnum,
-    lang
+    getLang()
   )
   if (!currentLevel) {
     //  TODO: handle this case?

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

@@ -11,6 +11,7 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 
 import styles from "./next.module.css"
@@ -20,7 +21,6 @@ import { AccountPageComponentProps } from "@/types/components/myPages/myPage/acc
 export default async function NextLevelBenefitsBlock({
   title,
   subtitle,
-  lang,
   link,
 }: AccountPageComponentProps) {
   const { formatMessage } = await getIntl()
@@ -30,7 +30,7 @@ export default async function NextLevelBenefitsBlock({
   }
   const nextLevel = getMembershipLevelObject(
     user.memberships[0].nextLevel as MembershipLevelEnum,
-    lang
+    getLang()
   )
   if (!nextLevel) {
     //  TODO: handle this case, when missing or when user is top level?

components/MyPages/Blocks/Overview/Stats/Points/index.tsx

@@ -1,5 +1,6 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
 
+import { getLang } from "@/i18n/serverContext"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 import { getMembership } from "@/utils/user"
 
@@ -7,13 +8,12 @@ import PointsContainer from "./Container"
 import { NextLevelPointsColumn, YourPointsColumn } from "./PointsColumn"
 
 import { UserProps } from "@/types/components/myPages/user"
-import { LangParams } from "@/types/params"
 
-export default async function Points({ user, lang }: UserProps & LangParams) {
+export default async function Points({ user }: UserProps) {
   const membership = getMembership(user.memberships)
   const nextLevel = getMembershipLevelObject(
     membership?.nextLevel as MembershipLevelEnum,
-    lang
+    getLang()
   )
 
   return (

components/MyPages/Blocks/Overview/Stats/index.tsx

@@ -6,12 +6,11 @@ import Points from "./Points"
 import styles from "./stats.module.css"
 
 import type { UserProps } from "@/types/components/myPages/user"
-import type { LangParams } from "@/types/params"
 
-export default function Stats({ user, lang }: UserProps & LangParams) {
+export default function Stats({ user }: UserProps) {
   return (
     <section className={styles.stats}>
-      <Points user={user} lang={lang} />
+      <Points user={user} />
       <Divider variant="default" color="pale" />
       <ExpiringPoints user={user} />
     </section>

components/MyPages/Blocks/Overview/index.tsx

@@ -4,6 +4,7 @@ import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Divider from "@/components/TempDesignSystem/Divider"
+import { getLang } from "@/i18n/serverContext"
 
 import Hero from "./Friend/Hero"
 import Friend from "./Friend"
@@ -12,14 +13,12 @@ import Stats from "./Stats"
 import styles from "./overview.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"
 
 export default async function Overview({
   link,
   subtitle,
   title,
-  lang,
-}: AccountPageComponentProps & LangParams) {
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
     return null
@@ -31,7 +30,7 @@ export default async function Overview({
       <Hero color="red">
         <Friend user={user} color="burgundy" />
         <Divider className={styles.divider} color="peach" />
-        <Stats user={user} lang={lang} />
+        <Stats user={user} />
       </Hero>
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/index.tsx

@@ -1,6 +1,7 @@
 import { dt } from "@/lib/dt"
 
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import AwardPoints from "./AwardPoints"
 
@@ -8,15 +9,17 @@ import styles from "./row.module.css"
 
 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
-export default async function Row({ transaction, lang }: RowProps) {
+export default async function Row({ transaction }: RowProps) {
   const { formatMessage } = await getIntl()
   const description =
     transaction.hotelName && transaction.city
       ? `${transaction.hotelName}, ${transaction.city} ${transaction.nights} ${formatMessage({ id: "nights" })}`
       : `${transaction.nights} ${formatMessage({ id: "nights" })}`
-  const arrival = dt(transaction.checkinDate).locale(lang).format("DD MMM YYYY")
+  const arrival = dt(transaction.checkinDate)
+    .locale(getLang())
+    .format("DD MMM YYYY")
   const departure = dt(transaction.checkoutDate)
-    .locale(lang)
+    .locale(getLang())
     .format("DD MMM YYYY")
   return (
     <tr className={styles.tr}>

components/MyPages/Blocks/Points/EarnAndBurn/Desktop/index.tsx

@@ -15,7 +15,7 @@ const tableHeadings = [
   "Points",
 ]
 
-export default async function DesktopTable({ lang, transactions }: TableProps) {
+export default async function DesktopTable({ transactions }: TableProps) {
   const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
@@ -35,7 +35,6 @@ export default async function DesktopTable({ lang, transactions }: TableProps) {
           <tbody>
             {transactions.map((transaction) => (
               <Row
-                lang={lang}
                 key={transaction.confirmationNumber}
                 transaction={transaction}
               />

components/MyPages/Blocks/Points/EarnAndBurn/Mobile/index.tsx

@@ -3,12 +3,13 @@ import { dt } from "@/lib/dt"
 import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/Desktop/Row/AwardPoints"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./mobile.module.css"
 
 import type { TableProps } from "@/types/components/myPages/myPage/earnAndBurn"
 
-export default async function MobileTable({ lang, transactions }: TableProps) {
+export default async function MobileTable({ transactions }: TableProps) {
   const { formatMessage } = await getIntl()
   return (
     <div className={styles.container}>
@@ -32,7 +33,7 @@ export default async function MobileTable({ lang, transactions }: TableProps) {
                 <td className={`${styles.td} ${styles.transactionDetails}`}>
                   <span className={styles.transactionDate}>
                     {dt(transaction.checkinDate)
-                      .locale(lang)
+                      .locale(getLang())
                       .format("DD MMM YYYY")}
                   </span>
                   {transaction.hotelName && transaction.city ? (

components/MyPages/Blocks/Points/EarnAndBurn/index.tsx

@@ -10,7 +10,6 @@ import MobileTable from "./Mobile"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function EarnAndBurn({
-  lang,
   link,
   subtitle,
   title,
@@ -23,8 +22,8 @@ export default async function EarnAndBurn({
   return (
     <SectionContainer>
       <SectionHeader title={title} link={link} subtitle={subtitle} />
-      <MobileTable lang={lang} transactions={transactions.data} />
-      <DesktopTable lang={lang} transactions={transactions.data} />
+      <MobileTable transactions={transactions.data} />
+      <DesktopTable transactions={transactions.data} />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )

components/MyPages/Blocks/Points/Overview/index.tsx

@@ -12,14 +12,12 @@ import Stats from "../../Overview/Stats"
 import styles from "./overview.module.css"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-import type { LangParams } from "@/types/params"
 
 export default async function PointsOverview({
   link,
   subtitle,
   title,
-  lang,
-}: AccountPageComponentProps & LangParams) {
+}: AccountPageComponentProps) {
   const user = await serverClient().user.get()
   if (!user || "error" in user) {
     return null
@@ -31,7 +29,7 @@ export default async function PointsOverview({
       <Hero color="burgundy">
         <Friend user={user} color="red" />
         <Divider className={styles.divider} color="peach" />
-        <Stats user={user} lang={lang} />
+        <Stats user={user} />
       </Hero>
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Stays/Previous/Client.tsx

@@ -16,7 +16,6 @@ import type {
 
 export default function ClientPreviousStays({
   initialPreviousStays,
-  lang,
 }: PreviousStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientPreviousStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard
-            key={stay.attributes.confirmationNumber}
-            lang={lang}
-            stay={stay}
-          />
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

components/MyPages/Blocks/Stays/Previous/index.tsx

@@ -10,7 +10,6 @@ import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function PreviousStays({
-  lang,
   title,
   subtitle,
   link,
@@ -23,10 +22,7 @@ export default async function PreviousStays({
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       {initialPreviousStays.data.length ? (
-        <ClientPreviousStays
-          initialPreviousStays={initialPreviousStays}
-          lang={lang}
-        />
+        <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
       ) : (
         <EmptyPreviousStaysBlock />
       )}

components/MyPages/Blocks/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
+export default async function EmptyUpcomingStaysBlock() {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         </Title>
       </div>
       <Link
-        href={homeHrefs[env.NODE_ENV][lang]}
+        href={homeHrefs[env.NODE_ENV][getLang()]}
         className={styles.link}
         color="peach80"
       >

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -11,7 +11,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function SoonestStays({
-  lang,
   title,
   subtitle,
   link,
@@ -27,15 +26,11 @@ export default async function SoonestStays({
       {response.data.length ? (
         <Grids.Stackable>
           {response.data.map((stay) => (
-            <StayCard
-              key={stay.attributes.confirmationNumber}
-              lang={lang}
-              stay={stay}
-            />
+            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
           ))}
         </Grids.Stackable>
       ) : (
-        <EmptyUpcomingStaysBlock lang={lang} />
+        <EmptyUpcomingStaysBlock />
       )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -5,12 +5,14 @@ import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
 
 import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-export default function StayCard({ stay, lang }: StayCardProps) {
+export default function StayCard({ stay }: StayCardProps) {
+  const lang = useLang()
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 

components/MyPages/Blocks/Stays/Upcoming/Client.tsx

@@ -16,7 +16,6 @@ import type {
 
 export default function ClientUpcomingStays({
   initialUpcomingStays,
-  lang,
 }: UpcomingStaysClientProps) {
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.upcoming.useInfiniteQuery(
@@ -49,11 +48,7 @@ export default function ClientUpcomingStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard
-            key={stay.attributes.confirmationNumber}
-            lang={lang}
-            stay={stay}
-          />
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -5,12 +5,11 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-import { LangParams } from "@/types/params"
-
-export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
+export default async function EmptyUpcomingStaysBlock() {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
@@ -23,7 +22,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         </Title>
       </div>
       <Link
-        href={homeHrefs[env.NODE_ENV][lang]}
+        href={homeHrefs[env.NODE_ENV][getLang()]}
         className={styles.link}
         color="peach80"
       >

components/MyPages/Blocks/Stays/Upcoming/index.tsx

@@ -10,7 +10,6 @@ import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
 export default async function UpcomingStays({
-  lang,
   title,
   subtitle,
   link,
@@ -23,12 +22,9 @@ export default async function UpcomingStays({
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
       {initialUpcomingStays.data.length ? (
-        <ClientUpcomingStays
-          initialUpcomingStays={initialUpcomingStays}
-          lang={lang}
-        />
+        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
-        <EmptyUpcomingStaysBlock lang={lang} />
+        <EmptyUpcomingStaysBlock />
       )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>

components/MyPages/Sidebar/index.tsx

@@ -7,12 +7,11 @@ import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./sidebar.module.css"
 
-import type { LangParams } from "@/types/params"
-
-export default async function SidebarMyPages({ lang }: LangParams) {
+export default async function SidebarMyPages() {
   const navigation = await serverClient().contentstack.myPages.navigation.get()
   const { formatMessage } = await getIntl()
   if (!navigation) {
@@ -43,7 +42,7 @@ export default async function SidebarMyPages({ lang }: LangParams) {
                 <li>
                   <Link
                     color="burgundy"
-                    href={logout[lang]}
+                    href={logout[getLang()]}
                     prefetch={false}
                     size="small"
                     variant="sidebar"

components/Webviews/LinkToOverview/index.tsx

@@ -4,15 +4,14 @@ import { overview } from "@/constants/routes/webviews"
 
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import styles from "./linkToOverview.module.css"
 
-import type { LangParams } from "@/types/params"
-
-export default async function LinkToOverview({ lang }: LangParams) {
+export default async function LinkToOverview() {
   const { formatMessage } = await getIntl()
   return (
-    <Link className={styles.overviewLink} href={overview[lang]}>
+    <Link className={styles.overviewLink} href={overview[getLang()]}>
       <ArrowLeft height={20} width={20} />{" "}
       {formatMessage({ id: "Go back to overview" })}
     </Link>