feat(SW-66, SW-348): search functionality and ui

app/[lang]/(live)/(protected)/layout.tsx

@@ -2,7 +2,7 @@ import { headers } from "next/headers"
 import { redirect } from "next/navigation"
 
 import { overview } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import { auth } from "@/auth"
 import { getLang } from "@/i18n/serverContext"
@@ -27,7 +27,7 @@ export default async function ProtectedLayout({
     redirect(redirectURL)
   }
 
-  const user = await serverClient().user.get()
+  const user = await getProfile()
 
   if (user && "error" in user) {
     // redirect(redirectURL)

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -1,4 +1,4 @@
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import Breadcrumbs from "@/components/Breadcrumbs"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,6 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import Content from "@/components/MyPages/AccountPage/Content"
+import Blocks from "@/components/Blocks"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
@@ -10,7 +10,7 @@ import styles from "./page.module.css"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export { generateMetadata } from "@/utils/generateMetadata"
+export { generateMetadataAccountPage as generateMetadata } from "@/utils/generateMetadata"
 
 export default async function MyPages({
   params,
@@ -30,8 +30,8 @@ export default async function MyPages({
     <>
       <main className={styles.blocks}>
         <Title>{accountPage.heading}</Title>
-        {accountPage.content.length ? (
-          <Content content={accountPage.content} />
+        {accountPage.content?.length ? (
+          <Blocks blocks={accountPage.content} />
         ) : (
           <p>{formatMessage({ id: "No content published" })}</p>
         )}

app/[lang]/(live)/(protected)/my-pages/profile/@profile/edit/page.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import Form from "@/components/Forms/Edit/Profile"
 import { setLang } from "@/i18n/serverContext"
@@ -10,7 +10,7 @@ export default async function EditProfileSlot({
 }: PageArgs<LangParams>) {
   setLang(params.lang)
 
-  const user = await serverClient().user.get()
+  const user = await getProfile()
   if (!user || "error" in user) {
     return null
   }

app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx

@@ -1,6 +1,6 @@
 import { languages, languageSelect } from "@/constants/languages"
 import { profileEdit } from "@/constants/routes/myPages"
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import {
   CalendarIcon,
@@ -16,7 +16,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
@@ -25,7 +25,7 @@ import { LangParams, PageArgs } from "@/types/params"
 export default async function Profile({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
   const { formatMessage } = await getIntl()
-  const user = await serverClient().user.get()
+  const user = await getProfile()
   if (!user || "error" in user) {
     return null
   }
@@ -44,7 +44,7 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
           </Title>
         </hgroup>
         <Button asChild intent="primary" size="small" theme="base">
-          <Link prefetch={false} color="none" href={profileEdit[getLang()]}>
+          <Link prefetch={false} color="none" href={profileEdit[params.lang]}>
             {formatMessage({ id: "Edit profile" })}
           </Link>
         </Button>

app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx

@@ -1,5 +1,5 @@
 import ProfilePage from "../page"
 
-export { generateMetadata } from "@/utils/generateMetadata"
+export { generateMetadataAccountPage as generateMetadata } from "@/utils/generateMetadata"
 
 export default ProfilePage

app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -7,7 +7,7 @@ import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
 
-export { generateMetadata } from "@/utils/generateMetadata"
+export { generateMetadataAccountPage as generateMetadata } from "@/utils/generateMetadata"
 
 export default async function ProfilePage({ params }: PageArgs<LangParams>) {
   setLang(params.lang)

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -1,4 +1,4 @@
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+import Breadcrumbs from "@/components/Breadcrumbs"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"

app/[lang]/(live)/(public)/hotelreservation/page.tsx

@@ -1,9 +1,8 @@
 import { setLang } from "@/i18n/serverContext"
 
-import { LangParams, PageArgs } from "@/types/params"
+import type { LangParams, PageArgs } from "@/types/params"
 
 export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
   setLang(params.lang)
-
   return null
 }

app/[lang]/(live)/@bookingwidget/page.tsx

@@ -1,17 +1,17 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import BookingWidget from "@/components/BookingWidget"
+import BookingWidget, { preload } from "@/components/BookingWidget"
 
 export default async function BookingWidgetPage() {
+  preload()
+
   // Get the booking widget show/hide status based on page specific settings
   const bookingWidgetToggle =
-    await serverClient().contentstack.bookingwidget.getToggle()
+    await serverClient().contentstack.bookingwidget.toggle.get()
 
-  return (
-    <>
-      {bookingWidgetToggle && bookingWidgetToggle.hideBookingWidget ? null : (
-        <BookingWidget />
-      )}
-    </>
-  )
+  if (bookingWidgetToggle.hideBookingWidget) {
+    return null
+  }
+
+  return <BookingWidget />
 }

app/[lang]/(live)/layout.tsx

@@ -17,7 +17,7 @@ import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import { preloadUserTracking } from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import type { LangParams, LayoutArgs } from "@/types/params"
 
@@ -37,7 +37,7 @@ export default async function RootLayout({
   const { defaultLocale, locale, messages } = await getIntl()
 
   return (
-    <html lang={getLang()}>
+    <html lang={params.lang}>
       <head>
         <AdobeSDKScript />
         <Script data-cookieconsent="ignore" src="/_static/js/cookie-bot.js" />

app/[lang]/(live)/middleware-error/[status]/page.tsx

@@ -1,4 +1,4 @@
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
@@ -11,7 +11,7 @@ export default function MiddlewareError({
 
   return (
     <div className={styles.layout}>
-      Middleware Error {getLang()}: {params.status}
+      Middleware Error {params.lang}: {params.status}
     </div>
   )
 }

app/[lang]/(live-current)/current-content-page/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation"
 
-import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
-import { GetCurrentBlockPageTrackingData } from "@/lib/graphql/Query/CurrentBlockPageTrackingData.graphql"
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/Current/CurrentBlockPage.graphql"
+import { GetCurrentBlockPageTrackingData } from "@/lib/graphql/Query/Current/CurrentBlockPageTrackingData.graphql"
 import { request } from "@/lib/graphql/request"
 
 import ContentPage from "@/components/Current/ContentPage"

app/[lang]/(live-current)/layout.tsx

@@ -11,7 +11,7 @@ import LangPopup from "@/components/Current/LangPopup"
 import SkipToMainContent from "@/components/SkipToMainContent"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -34,7 +34,7 @@ export default async function RootLayout({
   const { defaultLocale, locale, messages } = await getIntl()
 
   return (
-    <html lang={getLang()}>
+    <html lang={params.lang}>
       <head>
         {/* eslint-disable-next-line @next/next/no-css-tags */}
         <link rel="stylesheet" href="/_static/css/core.css" />
@@ -45,7 +45,7 @@ export default async function RootLayout({
           strategy="beforeInteractive"
           data-blockingmode="auto"
           data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
-          data-culture={getLang()}
+          data-culture={params.lang}
           id="Cookiebot"
           src="https://consent.cookiebot.com/uc.js"
         />

app/[lang]/(preview)/layout.tsx

@@ -1,5 +1,5 @@
 import InitLivePreview from "@/components/Current/LivePreview"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -17,7 +17,7 @@ export default function RootLayout({
   setLang(params.lang)
 
   return (
-    <html lang={getLang()}>
+    <html lang={params.lang}>
       <body>
         <InitLivePreview />
         {children}

app/[lang]/(preview)/preview/[contentType]/[uid]/page.tsx

@@ -1,4 +1,4 @@
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import {
   ContentTypeParams,
@@ -16,8 +16,8 @@ export default async function PreviewPage({
   return (
     <div>
       <p>
-        Preview for {params.contentType}:{params.uid} in {getLang()} with params{" "}
-        <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
+        Preview for {params.contentType}:{params.uid} in {params.lang} with
+        params <pre>{JSON.stringify(searchParams, null, 2)}</pre> goes here
       </p>
     </div>
   )

app/[lang]/(preview-current)/layout.tsx

@@ -1,10 +1,8 @@
-import Script from "next/script"
-
 import Footer from "@/components/Current/Footer"
 import LangPopup from "@/components/Current/LangPopup"
 import InitLivePreview from "@/components/Current/LivePreview"
 import SkipToMainContent from "@/components/SkipToMainContent"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import type { Metadata } from "next"
 
@@ -24,7 +22,7 @@ export default function RootLayout({
   setLang(params.lang)
 
   return (
-    <html lang={getLang()}>
+    <html lang={params.lang}>
       <head>
         {/* eslint-disable-next-line @next/next/no-css-tags */}
         <link rel="stylesheet" href="/_static/css/core.css" />

app/[lang]/(preview-current)/preview-current/page.tsx

@@ -1,11 +1,11 @@
 import ContentstackLivePreview from "@contentstack/live-preview-utils"
 
 import { previewRequest } from "@/lib/graphql/previewRequest"
-import { GetCurrentBlockPage } from "@/lib/graphql/Query/CurrentBlockPage.graphql"
+import { GetCurrentBlockPage } from "@/lib/graphql/Query/Current/CurrentBlockPage.graphql"
 
 import ContentPage from "@/components/Current/ContentPage"
 import LoadingSpinner from "@/components/Current/LoadingSpinner"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import type { PageArgs, PreviewParams } from "@/types/params"
 import { LangParams } from "@/types/params"
@@ -26,7 +26,7 @@ export default async function CurrentPreviewPage({
 
     const response = await previewRequest<GetCurrentBlockPageData>(
       GetCurrentBlockPage,
-      { locale: getLang(), url: searchParams.uri }
+      { locale: params.lang, url: searchParams.uri }
     )
 
     if (!response.data?.all_current_blocks_page?.total) {

app/[lang]/webview/[contentType]/[uid]/page.tsx

@@ -1,11 +1,11 @@
 import { headers } from "next/headers"
 import { notFound, redirect } from "next/navigation"
 
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
-import AccountPage from "@/components/ContentType/Webviews/AccountPage"
-import LoyaltyPage from "@/components/ContentType/Webviews/LoyaltyPage"
-import { getLang, setLang } from "@/i18n/serverContext"
+import AccountPage from "@/components/Webviews/AccountPage"
+import LoyaltyPage from "@/components/Webviews/LoyaltyPage"
+import { setLang } from "@/i18n/serverContext"
 
 import {
   ContentTypeWebviewParams,
@@ -18,7 +18,7 @@ export default async function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeWebviewParams & UIDParams, {}>) {
   setLang(params.lang)
-  const user = await serverClient().user.get()
+  const user = await getProfile()
 
   if (!user) {
     console.log(`[webview:page] unable to load user`)
@@ -31,8 +31,8 @@ export default async function ContentTypePage({
       case "forbidden": // fall through
       case "token_expired":
         const h = headers()
-        const returnURL = `/${getLang()}/webview${h.get("x-pathname")!}`
-        const redirectURL = `/${getLang()}/webview/refresh?returnUrl=${encodeURIComponent(returnURL)}`
+        const returnURL = `/${params.lang}/webview${h.get("x-pathname")!}`
+        const redirectURL = `/${params.lang}/webview/refresh?returnUrl=${encodeURIComponent(returnURL)}`
         console.log(`[webview:page] user error, redirecting to: ${redirectURL}`)
         redirect(redirectURL)
       case "notfound":

app/[lang]/webview/layout.tsx

@@ -8,7 +8,7 @@ import TrpcProvider from "@/lib/trpc/Provider"
 import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
 import { getIntl } from "@/i18n"
 import ServerIntlProvider from "@/i18n/Provider"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { setLang } from "@/i18n/serverContext"
 
 import styles from "./layout.module.css"
 
@@ -28,7 +28,7 @@ export default async function RootLayout({
   const { defaultLocale, locale, messages } = await getIntl()
 
   return (
-    <html lang={getLang()}>
+    <html lang={params.lang}>
       <head>
         <AdobeSDKScript />
         <Script id="ensure-adobeDataLayer">{`

app/api/web/revalidate/manually/route.ts

@@ -0,0 +1,60 @@
+import { revalidateTag } from "next/cache"
+import { headers } from "next/headers"
+
+import { Lang } from "@/constants/languages"
+import { env } from "@/env/server"
+import { badRequest, internalServerError } from "@/server/errors/next"
+
+import { generateTag } from "@/utils/generateTag"
+
+// This file is primarily to be used locally to test
+// purging your cache for new (and old) requests
+export async function POST() {
+  try {
+    const headersList = headers()
+    const secret = headersList.get("x-revalidate-secret")
+
+    if (secret !== env.REVALIDATE_SECRET) {
+      console.error(`Invalid Secret`)
+      console.error({ secret })
+      return badRequest({
+        now: Date.now(),
+        revalidated: false,
+      })
+    }
+
+    const affix = headersList.get("x-affix")
+    const identifier = headersList.get("x-identifier")
+    const lang = headersList.get("x-lang")
+    if (lang && identifier) {
+      if (affix) {
+        const tag = generateTag(lang as Lang, identifier, affix)
+        console.info(
+          `Revalidated tag for [lang: ${lang}, identifier: ${identifier}, affix: ${affix}]`
+        )
+        console.info(`Tag: ${tag}`)
+        revalidateTag(tag)
+      } else {
+        const tag = generateTag(lang as Lang, identifier)
+        console.info(
+          `Revalidated tag for [lang: ${lang}, identifier: ${identifier}]`
+        )
+        console.info(`Tag: ${tag}`)
+        revalidateTag(tag)
+      }
+    } else {
+      console.info(`Missing lang and/or identifier`)
+      console.info(`lang: ${lang}, identifier: ${identifier}`)
+      return badRequest({
+        now: Date.now(),
+        revalidated: false,
+      })
+    }
+
+    return Response.json({ revalidated: true, now: Date.now() })
+  } catch (error) {
+    console.error("Failed to revalidate tag(s)")
+    console.error(error)
+    return internalServerError({ revalidated: false, now: Date.now() })
+  }
+}

app/api/web/revalidate/route.ts

@@ -5,7 +5,7 @@ import { z } from "zod"
 
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
-import { internalServerError } from "@/server/errors/next"
+import { badRequest, internalServerError } from "@/server/errors/next"
 import { affix as bookingwidgetAffix } from "@/server/routers/contentstack/bookingwidget/utils"
 import { affix as breadcrumbsAffix } from "@/server/routers/contentstack/breadcrumbs/utils"
 import { languageSwitcherAffix } from "@/server/routers/contentstack/languageSwitcher/utils"
@@ -48,15 +48,10 @@ export async function POST(request: NextRequest) {
     if (secret !== env.REVALIDATE_SECRET) {
       console.error(`Invalid Secret`)
       console.error({ secret })
-      return Response.json(
-        {
-          now: Date.now(),
-          revalidated: false,
-        },
-        {
-          status: 400,
-        }
-      )
+      return badRequest({
+        now: Date.now(),
+        revalidated: false,
+      })
     }
 
     const data = await request.json()

components/Blocks/CardsGrid.tsx

@@ -5,8 +5,8 @@ import ContentCard from "@/components/TempDesignSystem/ContentCard"
 import Grids from "@/components/TempDesignSystem/Grids"
 import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 
-import type { CardsGridProps } from "@/types/components/content/blocks"
-import { CardsGridEnum } from "@/types/components/content/enums"
+import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
+import { CardsGridEnum } from "@/types/enums/cardsGrid"
 
 export default function CardsGrid({
   cards_grid,
@@ -22,36 +22,37 @@ export default function CardsGrid({
       <Grids.Stackable>
         {cards_grid.cards.map((card) => {
           switch (card.__typename) {
-            case CardsGridEnum.Card:
+            case CardsGridEnum.cards.Card: {
               return card.isContentCard ? (
                 <ContentCard
                   key={card.system.uid}
-                  title={card.heading || ""}
-                  description={card.body_text || ""}
+                  description={card.body_text}
+                  backgroundImage={card.backgroundImage}
                   primaryButton={card.primaryButton}
                   secondaryButton={card.secondaryButton}
                   sidePeekButton={card.sidePeekButton}
-                  backgroundImage={card.background_image}
                   style="default"
+                  title={card.heading}
                 />
               ) : (
                 <Card
-                  theme={cards_grid.theme || "one"}
                   key={card.system.uid}
-                  scriptedTopTitle={card.scripted_top_title}
-                  heading={card.heading}
                   bodyText={card.body_text}
-                  secondaryButton={card.secondaryButton}
+                  heading={card.heading}
                   primaryButton={card.primaryButton}
+                  secondaryButton={card.secondaryButton}
+                  scriptedTopTitle={card.scripted_top_title}
+                  theme={cards_grid.theme || "one"}
                 />
               )
-            case CardsGridEnum.LoyaltyCard:
+            }
+            case CardsGridEnum.cards.LoyaltyCard:
               return (
                 <LoyaltyCard
                   key={card.system.uid}
-                  image={card.image}
-                  heading={card.heading}
                   bodyText={card.body_text}
+                  heading={card.heading}
+                  image={card.image}
                   link={card.link}
                 />
               )

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

@@ -1,5 +1,5 @@
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
@@ -8,7 +8,6 @@ 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"
 
@@ -19,21 +18,16 @@ export default async function CurrentBenefitsBlock({
   subtitle,
   link,
 }: AccountPageComponentProps) {
-  const user = await serverClient().user.get()
+  const user = await getProfile()
   // 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
-  if (!user || "error" in user) {
-    return null
-  }
-  const membership = getMembership(user.memberships)
-  if (!membership) {
-    //  TODO: handle this case?
+  if (!user || "error" in user || !user.membership) {
     return null
   }
 
   const currentLevel = getMembershipLevelObject(
-    user.memberships[0].membershipLevel as MembershipLevelEnum,
+    user.membership.membershipLevel as MembershipLevelEnum,
     getLang()
   )
   if (!currentLevel) {

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

@@ -1,7 +1,7 @@
 import { Lock } from "react-feather"
 
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
@@ -24,12 +24,12 @@ export default async function NextLevelBenefitsBlock({
   link,
 }: AccountPageComponentProps) {
   const intl = await getIntl()
-  const user = await serverClient().user.get()
-  if (!user || "error" in user) {
+  const user = await getProfile()
+  if (!user || "error" in user || !user.membership) {
     return null
   }
   const nextLevel = getMembershipLevelObject(
-    user.memberships[0].nextLevel as MembershipLevelEnum,
+    user.membership.nextLevel as MembershipLevelEnum,
     getLang()
   )
   if (!nextLevel) {

components/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -0,0 +1,27 @@
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import SectionWrapper from "../SectionWrapper"
+
+import styles from "./howItWorks.module.css"
+
+import type { HowItWorksProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function HowItWorks({
+  dynamic_content,
+  firstItem,
+}: HowItWorksProps) {
+  const intl = await getIntl()
+  const displayHeader = !!(
+    dynamic_content.link ||
+    dynamic_content.subtitle ||
+    dynamic_content.title
+  )
+  return (
+    <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
+      <section className={styles.container}>
+        <Title level="h3">{intl.formatMessage({ id: "How it works" })}</Title>
+      </section>
+    </SectionWrapper>
+  )
+}

components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -20,27 +20,35 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import levelsData from "@/data/loyaltyLevels"
 
+import SectionWrapper from "../SectionWrapper"
+
 import styles from "./loyaltyLevels.module.css"
 
-import type { Level, LevelCardProps } from "@/types/components/content/blocks"
+import type { LoyaltyLevelsProps } from "@/types/components/blocks/dynamicContent"
+import type { Level, LevelCardProps } from "@/types/components/overviewTable"
 
-export default function LoyaltyLevels() {
+export default function LoyaltyLevels({
+  dynamic_content,
+  firstItem,
+}: LoyaltyLevelsProps) {
   const params = useParams()
   const lang = params.lang as Lang
   const { formatMessage } = useIntl()
 
   const { levels } = levelsData[lang]
   return (
-    <section className={styles.cardContainer}>
-      {levels.map((level: Level) => (
-        <LevelCard
-          key={level.level}
-          formatMessage={formatMessage}
-          lang={lang}
-          level={level}
-        />
-      ))}
-    </section>
+    <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
+      <section className={styles.cardContainer}>
+        {levels.map((level: Level) => (
+          <LevelCard
+            key={level.level}
+            formatMessage={formatMessage}
+            lang={lang}
+            level={level}
+          />
+        ))}
+      </section>
+    </SectionWrapper>
   )
 }
 

components/Blocks/DynamicContent/Overview/Friend/MembershipNumber/index.tsx

@@ -2,11 +2,12 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 
 import CopyButton from "../../Buttons/CopyButton"
-import { MembershipNumberProps } from "./membershipNumber"
 import { membershipNumberVariants } from "./membershipNumberVariants"
 
 import styles from "./membershipNumber.module.css"
 
+import type { MembershipNumberProps } from "@/types/components/myPages/membershipNumber"
+
 export default async function MembershipNumber({
   className,
   color,
@@ -23,7 +24,7 @@ export default async function MembershipNumber({
       </Caption>
       <span className={styles.icon}>
         <Caption className={styles.icon} color="pale" asChild>
-          <code>{membership.membershipNumber ?? "N/A"}</code>
+          <code>{membership?.membershipNumber ?? "N/A"}</code>
         </Caption>
         {membership && (
           <CopyButton membershipNumber={membership.membershipNumber} />

components/Blocks/DynamicContent/Overview/Friend/index.tsx

@@ -3,22 +3,20 @@ import { membershipLevels } from "@/constants/membershipLevels"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
-import { getMembership, isHighestMembership } from "@/utils/user"
+import { isHighestMembership } from "@/utils/user"
 
-import { MembershipNumberProps } from "./MemershipNumber/membershipNumber"
 import MembershipLevel from "./MembershipLevel"
-import MembershipNumber from "./MemershipNumber"
 
 import styles from "./friend.module.css"
 
-import type { UserProps } from "@/types/components/myPages/user"
+import type { FriendProps } from "@/types/components/myPages/friend"
 
 export default async function Friend({
-  user,
-  color,
-}: UserProps & Pick<MembershipNumberProps, "color">) {
+  children,
+  membership,
+  name,
+}: FriendProps) {
   const { formatMessage } = await getIntl()
-  const membership = getMembership(user.memberships)
   if (!membership?.membershipLevel) {
     return null
   }
@@ -45,9 +43,9 @@ export default async function Friend({
       </header>
       <div className={styles.membership}>
         <Title className={styles.name} color="pale" level="h3">
-          {user.name}
+          {name}
         </Title>
-        <MembershipNumber membership={membership} color={color} />
+        {children}
       </div>
     </section>
   )

components/Blocks/DynamicContent/Overview/index.tsx

@@ -1,12 +1,12 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 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 MembershipNumber from "./Friend/MembershipNumber"
 import Friend from "./Friend"
 import Stats from "./Stats"
 
@@ -19,7 +19,7 @@ export default async function Overview({
   subtitle,
   title,
 }: AccountPageComponentProps) {
-  const user = await serverClient().user.get()
+  const user = await getProfile()
   if (!user || "error" in user) {
     return null
   }
@@ -28,7 +28,9 @@ export default async function Overview({
     <SectionContainer>
       <SectionHeader link={link} preamble={subtitle} title={title} topTitle />
       <Hero color="red">
-        <Friend user={user} color="burgundy" />
+        <Friend membership={user.membership} name={user.name}>
+          <MembershipNumber color="burgundy" membership={user.membership} />
+        </Friend>
         <Divider className={styles.divider} color="peach" />
         <Stats user={user} />
       </Hero>

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

@@ -6,7 +6,7 @@ import BenefitValue from "../BenefitValue"
 
 import styles from "./benefitCard.module.css"
 
-import type { BenefitCardProps } from "@/types/components/loyalty/blocks"
+import type { BenefitCardProps } from "@/types/components/overviewTable"
 
 export default function BenefitCard({
   comparedValues,

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

@@ -4,7 +4,7 @@ import BenefitCard from "../BenefitCard"
 
 import styles from "./benefitList.module.css"
 
-import type { BenefitListProps } from "@/types/components/content/blocks"
+import type { BenefitListProps } from "@/types/components/overviewTable"
 
 export default function BenefitList({ levels }: BenefitListProps) {
   return getUnlockedBenefits(levels).map((benefit) => {

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

@@ -4,7 +4,7 @@ import CheckCircle from "@/components/Icons/CheckCircle"
 
 import styles from "./benefitValue.module.css"
 
-import type { BenefitValueProps } from "@/types/components/loyalty/blocks"
+import type { BenefitValueProps } from "@/types/components/overviewTable"
 
 export default function BenefitValue({ benefit }: BenefitValueProps) {
   if (!benefit.unlocked) {

components/Blocks/DynamicContent/OverviewTable/Client.tsx

@@ -31,9 +31,9 @@ import {
   DesktopSelectColumns,
   type MobileColumnHeaderProps,
   overviewTableActionsEnum,
-  type OverviewTableProps,
+  type OverviewTableClientProps,
   OverviewTableReducerAction,
-} from "@/types/components/loyalty/blocks"
+} from "@/types/components/overviewTable"
 import type { User } from "@/types/user"
 
 const levelsTranslations = {
@@ -126,9 +126,9 @@ function reducer(state: any, action: OverviewTableReducerAction) {
   }
 }
 
-export default function OverviewTable({
+export default function OverviewTableClient({
   activeMembership,
-}: OverviewTableProps) {
+}: OverviewTableClientProps) {
   const intl = useIntl()
   const lang = useLang()
   const levelsData = levelsTranslations[lang]
@@ -241,6 +241,7 @@ export default function OverviewTable({
       />
     )
   }
+
   return (
     <div>
       <div className={styles.mobileColumns}>

components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx

@@ -8,7 +8,7 @@ import styles from "./desktopHeader.module.css"
 import type {
   DesktopSelectColumns,
   LargeTableProps,
-} from "@/types/components/loyalty/blocks"
+} from "@/types/components/overviewTable"
 
 export default function DesktopHeader({
   levels,

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

@@ -11,7 +11,7 @@ import styles from "./largeTable.module.css"
 import type {
   BenefitTableHeaderProps,
   LargeTableProps,
-} from "@/types/components/content/blocks"
+} from "@/types/components/overviewTable"
 
 export default function LargeTable({
   levels,

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

@@ -1,6 +1,6 @@
 import styles from "./levelSummary.module.css"
 
-import type { LevelSummaryProps } from "@/types/components/content/blocks"
+import type { LevelSummaryProps } from "@/types/components/overviewTable"
 
 export default function LevelSummary({
   level,

components/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -0,0 +1,18 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import SectionWrapper from "../SectionWrapper"
+import OverviewTableClient from "./Client"
+
+import type { OverviewTableProps } from "@/types/components/blocks/dynamicContent"
+
+export default async function OverviewTable({
+  dynamic_content,
+  firstItem,
+}: OverviewTableProps) {
+  const membershipLevel = await serverClient().user.safeMembershipLevel()
+  return (
+    <SectionWrapper dynamic_content={dynamic_content} firstItem={firstItem}>
+      <OverviewTableClient activeMembership={membershipLevel} />
+    </SectionWrapper>
+  )
+}

components/Blocks/DynamicContent/Points/EarnAndBurn/JourneyTable/ClientTable/Row/index.tsx

@@ -6,14 +6,15 @@ import { useIntl } from "react-intl"
 import { webviews } from "@/constants/routes/webviews"
 import { dt } from "@/lib/dt"
 
-import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints"
 import Link from "@/components/TempDesignSystem/Link"
 import Table from "@/components/TempDesignSystem/Table"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useLang from "@/hooks/useLang"
 
+import AwardPoints from "../../../AwardPoints"
+
 import type { RowProps } from "@/types/components/myPages/myPage/earnAndBurn"
-import { RewardTransactionTypes } from "@/types/components/myPages/myPage/enums"
+import { Transactions } from "@/types/enums/transactions"
 
 export default function Row({ transaction }: RowProps) {
   const intl = useIntl()
@@ -29,8 +30,8 @@ export default function Row({ transaction }: RowProps) {
       : `${nightString}`
 
   switch (transaction.type) {
-    case RewardTransactionTypes.stay:
-    case RewardTransactionTypes.stayAdj:
+    case Transactions.rewardType.stay:
+    case Transactions.rewardType.stayAdj:
       if (transaction.hotelId === "ORS") {
         description = intl.formatMessage({ id: "Former Scandic Hotel" })
       }
@@ -40,19 +41,19 @@ export default function Row({ transaction }: RowProps) {
         })
       }
       break
-    case RewardTransactionTypes.ancillary:
+    case Transactions.rewardType.ancillary:
       description = intl.formatMessage({ id: "Extras to your booking" })
       break
-    case RewardTransactionTypes.enrollment:
+    case Transactions.rewardType.enrollment:
       description = intl.formatMessage({ id: "Sign up bonus" })
       break
-    case RewardTransactionTypes.mastercard_points:
+    case Transactions.rewardType.mastercard_points:
       description = intl.formatMessage({ id: "Scandic Friends Mastercard" })
       break
-    case RewardTransactionTypes.tui_points:
+    case Transactions.rewardType.tui_points:
       description = intl.formatMessage({ id: "TUI Points" })
 
-    case RewardTransactionTypes.pointShop:
+    case Transactions.rewardType.pointShop:
       description = intl.formatMessage({ id: "Scandic Friends Point Shop" })
       break
   }
@@ -65,8 +66,8 @@ export default function Row({ transaction }: RowProps) {
     if (
       !isWebview &&
       transaction.bookingUrl &&
-      (transaction.type === RewardTransactionTypes.stay ||
-        transaction.type === RewardTransactionTypes.rewardNight)
+      (transaction.type === Transactions.rewardType.stay ||
+        transaction.type === Transactions.rewardType.rewardNight)
     ) {
       return (
         <Link variant="underscored" href={transaction.bookingUrl}>

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

@@ -6,7 +6,7 @@ import JourneyTable from "./JourneyTable"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
-export default async function EarnAndBurn({
+export default function EarnAndBurn({
   link,
   subtitle,
   title,

components/Blocks/DynamicContent/Points/ExpiringPoints/ExpiringPointsTable/index.tsx

@@ -4,11 +4,12 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
 
-import AwardPoints from "@/components/MyPages/Blocks/Points/EarnAndBurn/AwardPoints"
 import Table from "@/components/TempDesignSystem/Table"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useLang from "@/hooks/useLang"
 
+import AwardPoints from "../../EarnAndBurn/AwardPoints"
+
 const tableHeadings = ["Points", "Expiration Date"]
 
 export default function ExpiringPointsTable({

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

@@ -1,18 +1,16 @@
-import {
-  MembershipLevelEnum,
-  membershipLevels,
-} from "@/constants/membershipLevels"
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
 
-import PointsContainer from "@/components/MyPages/Blocks/Overview/Stats/Points/Container"
+import { getIntl } from "@/i18n"
+import { getMembershipLevelObject } from "@/utils/membershipLevel"
+import { getMembership } from "@/utils/user"
+
+import PointsContainer from "../../../Overview/Stats/Points/Container"
 import {
   NextLevelNightsColumn,
   NextLevelPointsColumn,
   StayOnLevelColumn,
   YourPointsColumn,
-} from "@/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn"
-import { getIntl } from "@/i18n"
-import { getMembershipLevelObject } from "@/utils/membershipLevel"
-import { getMembership } from "@/utils/user"
+} from "../../../Overview/Stats/Points/PointsColumn"
 
 import { UserProps } from "@/types/components/myPages/user"
 import { LangParams } from "@/types/params"

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

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
@@ -7,6 +7,7 @@ import Divider from "@/components/TempDesignSystem/Divider"
 
 import Friend from "../../Overview/Friend"
 import Hero from "../../Overview/Friend/Hero"
+import MembershipNumber from "../../Overview/Friend/MembershipNumber"
 import Stats from "../../Overview/Stats"
 
 import styles from "./overview.module.css"
@@ -18,7 +19,7 @@ export default async function PointsOverview({
   subtitle,
   title,
 }: AccountPageComponentProps) {
-  const user = await serverClient().user.get()
+  const user = await getProfile()
   if (!user || "error" in user) {
     return null
   }
@@ -27,7 +28,9 @@ export default async function PointsOverview({
     <SectionContainer>
       <SectionHeader link={link} preamble={subtitle} title={title} topTitle />
       <Hero color="burgundy">
-        <Friend user={user} color="red" />
+        <Friend membership={user.membership} name={user.name}>
+          <MembershipNumber color="red" membership={user.membership} />
+        </Friend>
         <Divider className={styles.divider} color="peach" />
         <Stats user={user} />
       </Hero>

components/Blocks/DynamicContent/SectionWrapper/index.tsx

@@ -0,0 +1,46 @@
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./sectionWrapper.module.css"
+
+import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
+import { DynamicContentEnum } from "@/types/enums/dynamicContent"
+
+export default function SectionWrapper({
+  children,
+  dynamic_content,
+  firstItem,
+}: React.PropsWithChildren<DynamicContentProps>) {
+  const displayHeader = !!(
+    dynamic_content.link ||
+    dynamic_content.subtitle ||
+    dynamic_content.title
+  )
+  const isOverviewTable =
+    dynamic_content.component ===
+    DynamicContentEnum.Blocks.components.overview_table
+  return (
+    <SectionContainer className={styles.container}>
+      {isOverviewTable ? (
+        <div className={styles.header}>
+          <Title className={styles.tableTitle}> {dynamic_content.title}</Title>
+          <Subtitle>{dynamic_content.subtitle}</Subtitle>
+        </div>
+      ) : displayHeader ? (
+        <SectionHeader
+          link={dynamic_content.link}
+          preamble={dynamic_content.subtitle}
+          title={dynamic_content.title}
+          topTitle={firstItem}
+        />
+      ) : null}
+      {children}
+      {displayHeader ? (
+        <SectionLink link={dynamic_content.link} variant="mobile" />
+      ) : null}
+    </SectionContainer>
+  )
+}

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

@@ -42,7 +42,7 @@ export default function ClientPreviousStays({
   // TS having a hard time with the filtered type.
   // This is only temporary as we will not return null
   // later on when we handle errors appropriately.
-  const filteredStays = (data?.pages.filter((page) => page && page.data) ??
+  const filteredStays = (data?.pages.filter((page) => page?.data) ??
     []) as unknown as PreviousStaysNonNullResponseObject[]
   const stays = filteredStays.flatMap((page) => page.data)