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>
   )
 }

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -24,7 +24,7 @@ export default function Shortcuts({
         {shortcuts.map((shortcut) => (
           <Link
             className={styles.link}
-            href={shortcut.href}
+            href={shortcut.url}
             key={shortcut.title}
           >
             <span>{shortcut.title}</span>

lib/graphql/Fragments/MyPages/AccountPageContentShortcuts.graphql

@@ -1,5 +1,20 @@
+#import "../PageLinks.graphql"
+
 fragment AccountPageContentShortcuts on AccountPageContentShortcuts {
   shortcuts {
     title
+    preamble
+    shortcuts {
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...LoyaltyPageLink
+            ...ContentPageLink
+          }
+        }
+      }
+    }
   }
 }

lib/graphql/Query/AccountPage.graphql

@@ -12,5 +12,6 @@ query GetAccountPage($locale: String!, $url: String!) {
         ...AccountPageContentShortcuts
       }
     }
+    total
   }
 }

types/components/myPages/myPage/shortcuts.ts

@@ -1,8 +1,9 @@
-import type { User } from "@/types/user"
+import { Shortcut } from "@/types/requests/myPages/accountpage"
+import { PageLink } from "@/types/requests/utils/pageLink"
 import { ReactNode } from "react"
 
 export type ShortcutsProps = {
-  shortcuts: User["shortcuts"]
+  shortcuts: { url: string; title: string }[]
   title: string | ReactNode
   subtitle?: string
 }

types/requests/myPages/accountpage.ts

@@ -1,10 +1,18 @@
 import { AllRequestResponse } from "../utils/all"
-import type { TypenameInterface } from "../utils/typename"
+import type { Typename } from "../utils/typename"
 import type { Edges } from "../utils/edges"
+import { PageLink } from "../utils/pageLink"
 
-export type PageLink = {
-  url: string
-  title: string
+export enum DynamicContentComponents {
+  membership_overview = "membership_overview",
+  benefits = "benefits",
+  previous_stays = "previous_stays",
+  upcoming_stays = "upcoming_stays",
+}
+
+export enum ContentEntries {
+  AccountPageContentDynamicContent = "AccountPageContentDynamicContent",
+  AccountPageContentShortcuts = "AccountPageContentShortcuts",
 }
 
 export type Shortcut = {
@@ -12,19 +20,29 @@ export type Shortcut = {
   linkConnection: Edges<PageLink>
 }
 
-export type Shortcuts = {
-  title: string
-  preamble: string
-  shortcuts: Shortcut[]
-}
-
 export type DynamicContent = {
-  component: string
+  component: DynamicContentComponents
   title: string
   link: { linkConnection: Edges<PageLink>; link_text: string }
 }
 
-export type AccountPageContentItem = {}
+export type AccountPageDynamicContent = Typename<
+  { dynamic_content: DynamicContent },
+  ContentEntries.AccountPageContentDynamicContent
+>
+
+export type AccountPageContentShortcuts = Typename<
+  {
+    title: string
+    preamble: string
+    shortcuts: { shortcuts: Shortcut[] }
+  },
+  ContentEntries.AccountPageContentShortcuts
+>
+
+export type AccountPageContentItem =
+  | AccountPageDynamicContent
+  | AccountPageContentShortcuts
 
 export type AccountPage = {
   url: string