feat: add initial rendering of Account page data

app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts

@@ -1,5 +1,5 @@
 export const shortcuts = [
-  { href: "#", title: "Member prices on hotel nights" },
-  { href: "#", title: "Great deals from our partners" },
-  { href: "#", title: "A special gift on your birthday" },
+  { url: "#", title: "Member prices on hotel nights" },
+  { url: "#", title: "Great deals from our partners" },
+  { url: "#", title: "A special gift on your birthday" },
 ]

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

@@ -3,6 +3,8 @@ import { serverClient } from "@/lib/trpc/server"
 import { request } from "@/lib/graphql/request"
 import { GetAccountPage } from "@/lib/graphql/Query/AccountPage.graphql"
 
+import { Lang } from "@/constants/languages"
+
 import MaxWidth from "@/components/MaxWidth"
 import Overview from "@/components/MyPages/Blocks/Overview"
 import UpcomingStays from "@/components/MyPages/Blocks/Overview/UpcomingStays"
@@ -10,13 +12,20 @@ import Shortcuts from "@/components/MyPages/Blocks/Shortcuts"
 
 import styles from "./page.module.css"
 
-import { GetAccountPageData } from "@/types/requests/myPages/accountpage"
+import {
+  ContentEntries,
+  DynamicContentComponents,
+  DynamicContent,
+} from "@/types/requests/myPages/accountpage"
+import {
+  AccountPageContentItem,
+  GetAccountPageData,
+} from "@/types/requests/myPages/accountpage"
 import type { LangParams, PageArgs } from "@/types/params"
+import { User } from "@/types/user"
 
 export default async function MyPageOverview({ params }: PageArgs<LangParams>) {
   const user = await serverClient().user.get()
-<<<<<<< HEAD
-=======
   const response = await request<GetAccountPageData>(
     GetAccountPage,
     {
@@ -35,17 +44,65 @@ export default async function MyPageOverview({ params }: PageArgs<LangParams>) {
   }
 
   const pageData = response.data.all_account_page.items[0]
->>>>>>> 13b5550 (feat: add Account Page query)
+
+  function DynamicComponent({
+    user,
+    lang,
+    content,
+  }: {
+    content: DynamicContent
+    lang: Lang
+    user: User
+  }) {
+    console.log({ content })
+    switch (content.component) {
+      case DynamicContentComponents.membership_overview:
+        return <Overview user={user} />
+      case DynamicContentComponents.benefits:
+      case DynamicContentComponents.previous_stays:
+        return null
+      case DynamicContentComponents.upcoming_stays:
+        return <UpcomingStays lang={lang} stays={user.stays} />
+      default:
+        return null
+    }
+  }
+
+  function Content({ content }: { content: AccountPageContentItem[] }) {
+    return (
+      <>
+        {content.map((item) => {
+          switch (item.__typename) {
+            case ContentEntries.AccountPageContentDynamicContent:
+              return (
+                <DynamicComponent
+                  user={user}
+                  lang={params.lang}
+                  content={item.dynamic_content}
+                />
+              )
+            case ContentEntries.AccountPageContentShortcuts:
+              const shortcuts = item.shortcuts.shortcuts.map(
+                (shortcut) => shortcut.linkConnection.edges[0].node
+              )
+              return (
+                <Shortcuts
+                  shortcuts={shortcuts}
+                  subtitle={item.preamble}
+                  title={item.title}
+                />
+              )
+            default:
+              return null
+          }
+        })}
+      </>
+    )
+  }
 
   return (
     <MaxWidth className={styles.blocks} tag="main">
-      <Overview user={user} />
-      <UpcomingStays lang={params.lang} />
-      <Shortcuts
-        shortcuts={user.shortcuts}
-        subtitle={_("The community at your fingertips")}
-        title={_("Handy Shortcuts")}
-      />
+      <Content content={pageData.content} />
     </MaxWidth>
   )
 }