diff --git a/app/[lang]/(live)/(public)/loyalty-page/page.tsx b/app/[lang]/(live)/(public)/loyalty-page/page.tsx index 7abe910d3..88fab0647 100644 --- a/app/[lang]/(live)/(public)/loyalty-page/page.tsx +++ b/app/[lang]/(live)/(public)/loyalty-page/page.tsx @@ -1,12 +1,13 @@ -import Title from "@/components/Title" -import MaxWidth from "@/components/MaxWidth" - -import { serverClient } from "@/lib/trpc/server" -import { LangParams, PageArgs, UriParams } from "@/types/params" import { notFound } from "next/navigation" +import { serverClient } from "@/lib/trpc/server" + +import MaxWidth from "@/components/MaxWidth" +import Sidebar from "@/components/Loyalty/Sidebar" +import { Blocks } from "@/components/Loyalty/Blocks" + +import type { LangParams, PageArgs, UriParams } from "@/types/params" import styles from "./page.module.css" -import Sidebar from "@/components/Loyalty/Sidebar" export default async function LoyaltyPage({ params, @@ -32,8 +33,7 @@ export default async function LoyaltyPage({ : null}
- {loyaltyPage.title} - +
) @@ -41,7 +41,3 @@ export default async function LoyaltyPage({ return notFound() } } - -function Content(content: any) { - return <> -} diff --git a/components/Loyalty/Blocks/index.tsx b/components/Loyalty/Blocks/index.tsx new file mode 100644 index 000000000..659a5e22d --- /dev/null +++ b/components/Loyalty/Blocks/index.tsx @@ -0,0 +1,26 @@ +import JsonToHtml from "@/components/JsonToHtml" + +import { + Blocks as BlocksType, + LoyaltyBlocksTypenameEnum, +} from "@/types/requests/loyaltyPage" + +export function Blocks({ blocks }: { blocks: BlocksType[] }) { + return blocks.map((block) => { + switch (block.__typename) { + case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid: + return

Cards

+ case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent: + return ( + + ) + case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent: + return

Dynamic

+ default: + return null + } + }) +} diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx index 25ef804e2..ec44c4df9 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx +++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx @@ -1,12 +1,13 @@ import Title from "@/components/Title" -import JsonToHtml from "@/components/JsonToHtml" +import Contact from "./Contact" import Button from "@/components/TempDesignSystem/Button" import Link from "@/components/TempDesignSystem/Link" - -import styles from "./joinLoyalty.module.css" +import Image from "@/components/Image" import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage" +import styles from "./joinLoyalty.module.css" + export default function JoinLoyaltyContact({ block, }: { @@ -15,10 +16,15 @@ export default function JoinLoyaltyContact({ return (
- {block.title}} + Scandic Friends + {block.preamble &&

{block.preamble}

} @@ -29,9 +35,11 @@ export default function JoinLoyaltyContact({
-
- Contact -
+ {block.contact + ? block.contact.map((contact, i) => ( + + )) + : null} ) } diff --git a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css index cd22348e6..8c3b0ac84 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css +++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css @@ -13,6 +13,15 @@ padding: 4rem 2rem; } +.preamble { + font-family: var(--fira-sans); + font-size: 1.6rem; + font-weight: 400; + line-height: 2.4rem; + text-align: center; + margin: 0; +} + .logoutLink { text-decoration: none; color: var(--some-black-color, #2e2e2e); diff --git a/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx b/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx index 592276300..98786b46e 100644 --- a/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx +++ b/components/MyPages/Blocks/Overview/UpcomingStays/index.tsx @@ -3,8 +3,8 @@ import { serverClient } from "@/lib/trpc/server" import StayCard from "@/components/MyPages/Blocks/Stays/StayCard" import EmptyUpcomingStaysBlock from "@/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays" -import Title from "@/components/MyPages/Title" import Link from "@/components/TempDesignSystem/Link" +import Title from "@/components/Title" import styles from "./upcoming.module.css" diff --git a/components/MyPages/Blocks/Stays/Header/index.tsx b/components/MyPages/Blocks/Stays/Header/index.tsx index d4fbeee68..683817b20 100644 --- a/components/MyPages/Blocks/Stays/Header/index.tsx +++ b/components/MyPages/Blocks/Stays/Header/index.tsx @@ -1,4 +1,4 @@ -import Title from "@/components/MyPages/Title" +import Title from "@/components/Title" import styles from "./header.module.css" diff --git a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx index 1d7675412..0c390e390 100644 --- a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx @@ -1,6 +1,6 @@ import { _ } from "@/lib/translation" -import Title from "@/components/MyPages/Title" +import Title from "@/components/Title" import styles from "./emptyPreviousStays.module.css" diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx index ec6fe206d..08ce36f32 100644 --- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx +++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx @@ -2,8 +2,8 @@ import Link from "next/link" import { _ } from "@/lib/translation" -import Title from "@/components/MyPages/Title" import Button from "@/components/TempDesignSystem/Button" +import Title from "@/components/Title" import styles from "./emptyUpcomingStays.module.css" diff --git a/lib/graphql/Fragments/PageLink/AccountPageLink.graphql b/lib/graphql/Fragments/PageLink/AccountPageLink.graphql new file mode 100644 index 000000000..dc5ed6667 --- /dev/null +++ b/lib/graphql/Fragments/PageLink/AccountPageLink.graphql @@ -0,0 +1,8 @@ +fragment AccountPageLink on AccountPage { + system { + locale + uid + } + title + url +} diff --git a/lib/graphql/Fragments/PageLink/ContentPageLink.graphql b/lib/graphql/Fragments/PageLink/ContentPageLink.graphql new file mode 100644 index 000000000..f6eb6474b --- /dev/null +++ b/lib/graphql/Fragments/PageLink/ContentPageLink.graphql @@ -0,0 +1,8 @@ +fragment ContentPageLink on ContentPage { + system { + locale + uid + } + url + title +} diff --git a/lib/graphql/Fragments/PageLink/CurrentContentPageLink.graphql b/lib/graphql/Fragments/PageLink/CurrentContentPageLink.graphql new file mode 100644 index 000000000..1b82b2a59 --- /dev/null +++ b/lib/graphql/Fragments/PageLink/CurrentContentPageLink.graphql @@ -0,0 +1,8 @@ +fragment CurrentBlocksPageLink on CurrentBlocksPage { + system { + locale + uid + } + title + url +} diff --git a/lib/graphql/Fragments/PageLink/LoyaltyPageLink.graphql b/lib/graphql/Fragments/PageLink/LoyaltyPageLink.graphql new file mode 100644 index 000000000..d0c6ac0a9 --- /dev/null +++ b/lib/graphql/Fragments/PageLink/LoyaltyPageLink.graphql @@ -0,0 +1,8 @@ +fragment LoyaltyPageLink on LoyaltyPage { + system { + locale + uid + } + title + url +} diff --git a/lib/graphql/Fragments/PageLinks.graphql b/lib/graphql/Fragments/PageLinks.graphql deleted file mode 100644 index 61f380efa..000000000 --- a/lib/graphql/Fragments/PageLinks.graphql +++ /dev/null @@ -1,35 +0,0 @@ -fragment CurrentBlocksPageLink on CurrentBlocksPage { - system { - locale - uid - } - title - url -} - -fragment AccountPageLink on AccountPage { - system { - locale - uid - } - title - url -} - -fragment LoyaltyPageLink on LoyaltyPage { - system { - locale - uid - } - title - url -} - -fragment ContentPageLink on ContentPage { - system { - locale - uid - } - url - title -} diff --git a/lib/graphql/Query/LoyaltyPage.graphql b/lib/graphql/Query/LoyaltyPage.graphql index 07eebacb6..c8c50b246 100644 --- a/lib/graphql/Query/LoyaltyPage.graphql +++ b/lib/graphql/Query/LoyaltyPage.graphql @@ -1,57 +1,71 @@ #import "../Fragments/Image.graphql" +#import "../Fragments/PageLink/AccountPageLink.graphql" +#import "../Fragments/PageLink/ContentPageLink.graphql" +#import "../Fragments/PageLink/LoyaltyPageLink.graphql" query GetLoyaltyPage($locale: String!, $url: String!) { all_loyalty_page(where: { url: $url, locale: $locale }) { items { - content { - ... on LoyaltyPageContentLoyaltyLevels { + blocks { + ... on LoyaltyPageBlocksDynamicContent { __typename - loyalty_levels { - heading - sub_heading - level_card { - loyalty_level + dynamic_content { + title + preamble + component + link { + text + pageConnection { + edges { + node { + ...ContentPageLink + ...LoyaltyPageLink + } + } + } } } } - ... on LoyaltyPageContentCardGrid { + ... on LoyaltyPageBlocksCardGrid { __typename card_grid { heading - subheading + preamble cards { referenceConnection { edges { node { - ... on LoyaltyPage { - system { - locale - uid - } - url - title - } - ... on ContentPage { - system { - locale - uid - } - url - title - } - ... on AccountPage { - system { - locale - uid - } - url - title - } + __typename + ...LoyaltyPageLink + ...ContentPageLink + ...AccountPageLink } } } heading - subheading + preamble + } + } + } + ... on LoyaltyPageBlocksContent { + __typename + content { + content { + json + embedded_itemsConnection { + edges { + node { + ... on SysAsset { + title + url + dimension { + width + height + } + } + } + } + } } } } @@ -62,6 +76,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) { __typename join_loyalty_contact { title + preamble contact { ... on LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact { __typename @@ -71,17 +86,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) { } } login_button_text - body { - json - embedded_itemsConnection(limit: 30) { - edges { - node { - __typename - ...Image - } - } - } - } } } ... on LoyaltyPageSidebarContent { @@ -92,6 +96,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) { embedded_itemsConnection { edges { node { + __typename ...Image } } @@ -108,24 +113,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) { title } } - seo_metadata { - description - title - imageConnection { - edges { - node { - file_size - filename - dimension { - height - width - } - url - title - } - } - } - } } system { uid diff --git a/lib/graphql/Query/NavigationMyPages.graphql b/lib/graphql/Query/NavigationMyPages.graphql index 8968c61f4..a4663d6dd 100644 --- a/lib/graphql/Query/NavigationMyPages.graphql +++ b/lib/graphql/Query/NavigationMyPages.graphql @@ -1,4 +1,6 @@ -#import "../Fragments/PageLinks.graphql" +#import "../Fragments/PageLink/AccountPageLink.graphql" +#import "../Fragments/PageLink/ContentPageLink.graphql" +#import "../Fragments/PageLink/LoyaltyPageLink.graphql" query GetNavigationMyPages($locale: String!) { all_navigation_my_pages(locale: $locale) { diff --git a/public/_static/icons/scandic-friends.png b/public/_static/icons/scandic-friends.png new file mode 100644 index 000000000..322340409 Binary files /dev/null and b/public/_static/icons/scandic-friends.png differ diff --git a/types/requests/loyaltyPage.ts b/types/requests/loyaltyPage.ts index 598a1f724..2318ffdd2 100644 --- a/types/requests/loyaltyPage.ts +++ b/types/requests/loyaltyPage.ts @@ -26,18 +26,21 @@ type Contact = { } } +enum JoinLoyaltyContactTypenameEnum { + LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact = "LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact", +} + +type JoinLoyaltyContactEnum = Typename< + Contact, + JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact +> + export type JoinLoyaltyContact = { join_loyalty_contact: { - title: string - contact: Typename< - Contact, - "LoyaltyPageSidebarLoyaltyJoinContactBlockContactContact" - > + title?: string + preamble?: string + contact: JoinLoyaltyContactEnum[] login_button_text: string - body: { - embedded_itemsConnection: Edges - json: RTEDocument - } } } @@ -48,36 +51,52 @@ export type Sidebar = SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact > -enum ContentBlocks { - LoyaltyPageContentLoyaltyLevels = "LoyaltyPageContentLoyaltyLevels", - LoyaltyPageContentCardGrid = "LoyaltyPageContentCardGrid", +export enum LoyaltyBlocksTypenameEnum { + LoyaltyPageBlocksDynamicContent = "LoyaltyPageBlocksDynamicContent", + LoyaltyPageBlocksCardGrid = "LoyaltyPageBlocksCardGrid", + LoyaltyPageBlocksContent = "LoyaltyPageBlocksContent", } type CardGrid = { card_grid: { heading: string - subheading: string + preamble: string cards: { referenceConnection: Edges heading: string - subheading: string + preamble: string } } } -type LoyaltyLevels = { - loyalty_levels: { - heading: string - sub_heading?: string - level_card: { - loyalty_level: number - }[] +type Content = { + content: { + embedded_itemsConnection: Edges + json: RTEDocument } } -export type Content = - | Typename - | Typename +type LoyaltyComponent = "loyalty_levels" | "how_it_works" | "overview_table" + +type DynamicContent = { + dynamic_content: { + title: string + preamble?: string + component: LoyaltyComponent + link: { + text?: string + page: Edges + } + } +} + +export type Blocks = + | Typename + | Typename< + DynamicContent, + LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent + > + | Typename export type Breadcrumb = { href: string @@ -91,7 +110,7 @@ export type Breadcrumbs = { export type LoyaltyPage = { sidebar: Sidebar[] - content: Content[] + blocks: Blocks[] web: { breadcrumbs: Breadcrumbs }