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