From b7782b61a77f4a1d96cb14967a51b2fce29cca4a Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Thu, 18 Apr 2024 15:44:53 +0200
Subject: [PATCH] fix: add rendering logic for optional link and preamble

---
 components/MyPages/AccountPage/Content.tsx    | 15 +++++++-
 .../MyPages/Blocks/UpcomingStays/index.tsx    | 36 +++++++++++++++++++
 .../AccountPageContentDynamicContent.graphql  |  1 +
 types/components/myPages/myPage/stays.ts      | 13 +++++++
 types/requests/myPages/accountpage.ts         |  1 +
 5 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 components/MyPages/Blocks/UpcomingStays/index.tsx
 create mode 100644 types/components/myPages/myPage/stays.ts

diff --git a/components/MyPages/AccountPage/Content.tsx b/components/MyPages/AccountPage/Content.tsx
index fa9141d5a..e295f449c 100644
--- a/components/MyPages/AccountPage/Content.tsx
+++ b/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
   }
diff --git a/components/MyPages/Blocks/UpcomingStays/index.tsx b/components/MyPages/Blocks/UpcomingStays/index.tsx
new file mode 100644
index 000000000..2201ab191
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/lib/graphql/Fragments/MyPages/AccountPageContentDynamicContent.graphql b/lib/graphql/Fragments/MyPages/AccountPageContentDynamicContent.graphql
index d108b6e19..2f73f0e6c 100644
--- a/lib/graphql/Fragments/MyPages/AccountPageContentDynamicContent.graphql
+++ b/lib/graphql/Fragments/MyPages/AccountPageContentDynamicContent.graphql
@@ -5,6 +5,7 @@ fragment AccountPageContentDynamicContent on AccountPageContentDynamicContent {
   dynamic_content {
     component
     title
+    preamble
     link {
       link_text
       linkConnection {
diff --git a/types/components/myPages/myPage/stays.ts b/types/components/myPages/myPage/stays.ts
new file mode 100644
index 000000000..7f3ccf278
--- /dev/null
+++ b/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
diff --git a/types/requests/myPages/accountpage.ts b/types/requests/myPages/accountpage.ts
index 8836a2180..6aef3f38b 100644
--- a/types/requests/myPages/accountpage.ts
+++ b/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 }
 }