fix: add rendering logic for optional link and preamble

components/MyPages/AccountPage/Content.tsx

@@ -19,14 +19,27 @@ function DynamicComponent({
   lang: Lang
   user: User
 }) {
+  const componentProps = {
+    title: content.title,
+    preamble: content.preamble,
+    link: content.link.linkConnection.edges.length
+      ? {
+          href: content.link.linkConnection.edges[0].node.url,
+          text: content.link.link_text,
+        }
+      : null,
+  }
   switch (content.component) {
     case DynamicContentComponents.membership_overview:
       return <Overview user={user} />
     case DynamicContentComponents.benefits:
+      return null
     case DynamicContentComponents.previous_stays:
       return null
     case DynamicContentComponents.upcoming_stays:
-      return <UpcomingStays lang={lang} stays={user.stays} />
+      return (
+        <UpcomingStays lang={lang} stays={user.stays} {...componentProps} />
+      )
     default:
       return null
   }

components/MyPages/Blocks/UpcomingStays/index.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link"
+import Stay from "./Stay"
+import Title from "@/components/MyPages/Title"
+
+import styles from "./upcoming.module.css"
+
+import type { LangParams } from "@/types/params"
+import type { StaysProps } from "@/types/components/myPages/myPage/stays"
+
+export default function UpcomingStays({
+  lang,
+  stays,
+  title,
+  preamble,
+  link,
+}: StaysProps & LangParams) {
+  return (
+    <section className={styles.container}>
+      <header className={styles.header}>
+        <Title level="h2" as="h4" uppercase>
+          {title}
+        </Title>
+        {link && (
+          <Link className={styles.link} href={link.href}>
+            {link.text}
+          </Link>
+        )}
+      </header>
+      <section className={styles.stays}>
+        {stays.map((stay) => (
+          <Stay key={stay.hotel} {...stay} lang={lang} />
+        ))}
+      </section>
+    </section>
+  )
+}

lib/graphql/Fragments/MyPages/AccountPageContentDynamicContent.graphql

@@ -5,6 +5,7 @@ fragment AccountPageContentDynamicContent on AccountPageContentDynamicContent {
   dynamic_content {
     component
     title
+    preamble
     link {
       link_text
       linkConnection {

types/components/myPages/myPage/stays.ts

@@ -0,0 +1,13 @@
+import type { Stay, User } from "@/types/user"
+
+export type StaysProps = {
+  title: string
+  preamble: string
+  link: {
+    href: string
+    text: string
+  } | null
+  stays: User["stays"]
+}
+
+export type StayProps = Stay

types/requests/myPages/accountpage.ts

@@ -23,6 +23,7 @@ export type Shortcut = {
 export type DynamicContent = {
   component: DynamicContentComponents
   title: string
+  preamble: string
   link: { linkConnection: Edges<PageLink>; link_text: string }
 }