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
case DynamicContentComponents.benefits:
+ return null
case DynamicContentComponents.previous_stays:
return null
case DynamicContentComponents.upcoming_stays:
- return
+ return (
+
+ )
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 (
+
+
+
+ {title}
+
+ {link && (
+
+ {link.text}
+
+ )}
+
+
+ {stays.map((stay) => (
+
+ ))}
+
+
+ )
+}
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; link_text: string }
}