From ed2cc59a87d43219f6f85e824f96587b99a9350e Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Thu, 18 Apr 2024 12:48:57 +0200 Subject: [PATCH] feat: add initial rendering of Account page data --- .../my-pages/benefits/_constants.ts | 6 +- .../(protected)/my-pages/overview/page.tsx | 79 ++++++++++++++++--- components/MyPages/Blocks/Shortcuts/index.tsx | 2 +- .../AccountPageContentShortcuts.graphql | 15 ++++ lib/graphql/Query/AccountPage.graphql | 1 + types/components/myPages/myPage/shortcuts.ts | 5 +- types/requests/myPages/accountpage.ts | 42 +++++++--- 7 files changed, 121 insertions(+), 29 deletions(-) diff --git a/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts b/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts index 6e60a74aa..a096641c0 100644 --- a/app/[lang]/(live)/(protected)/my-pages/benefits/_constants.ts +++ b/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" }, ] diff --git a/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx b/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx index d467e7be7..db29261ed 100644 --- a/app/[lang]/(live)/(protected)/my-pages/overview/page.tsx +++ b/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) { const user = await serverClient().user.get() -<<<<<<< HEAD -======= const response = await request( GetAccountPage, { @@ -35,17 +44,65 @@ export default async function MyPageOverview({ params }: PageArgs) { } 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 + case DynamicContentComponents.benefits: + case DynamicContentComponents.previous_stays: + return null + case DynamicContentComponents.upcoming_stays: + return + default: + return null + } + } + + function Content({ content }: { content: AccountPageContentItem[] }) { + return ( + <> + {content.map((item) => { + switch (item.__typename) { + case ContentEntries.AccountPageContentDynamicContent: + return ( + + ) + case ContentEntries.AccountPageContentShortcuts: + const shortcuts = item.shortcuts.shortcuts.map( + (shortcut) => shortcut.linkConnection.edges[0].node + ) + return ( + + ) + default: + return null + } + })} + + ) + } return ( - - - + ) } diff --git a/components/MyPages/Blocks/Shortcuts/index.tsx b/components/MyPages/Blocks/Shortcuts/index.tsx index cb80b61c0..fbb408397 100644 --- a/components/MyPages/Blocks/Shortcuts/index.tsx +++ b/components/MyPages/Blocks/Shortcuts/index.tsx @@ -24,7 +24,7 @@ export default function Shortcuts({ {shortcuts.map((shortcut) => ( {shortcut.title} diff --git a/lib/graphql/Fragments/MyPages/AccountPageContentShortcuts.graphql b/lib/graphql/Fragments/MyPages/AccountPageContentShortcuts.graphql index 4e0cf2f48..9ef2bb6cd 100644 --- a/lib/graphql/Fragments/MyPages/AccountPageContentShortcuts.graphql +++ b/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 + } + } + } + } } } diff --git a/lib/graphql/Query/AccountPage.graphql b/lib/graphql/Query/AccountPage.graphql index 5b18fbfa0..59f97214a 100644 --- a/lib/graphql/Query/AccountPage.graphql +++ b/lib/graphql/Query/AccountPage.graphql @@ -12,5 +12,6 @@ query GetAccountPage($locale: String!, $url: String!) { ...AccountPageContentShortcuts } } + total } } diff --git a/types/components/myPages/myPage/shortcuts.ts b/types/components/myPages/myPage/shortcuts.ts index d601550cd..1813af12d 100644 --- a/types/components/myPages/myPage/shortcuts.ts +++ b/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 } diff --git a/types/requests/myPages/accountpage.ts b/types/requests/myPages/accountpage.ts index abfcca28b..8836a2180 100644 --- a/types/requests/myPages/accountpage.ts +++ b/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 } -export type Shortcuts = { - title: string - preamble: string - shortcuts: Shortcut[] -} - export type DynamicContent = { - component: string + component: DynamicContentComponents title: string link: { linkConnection: Edges; 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