feat: create blocks component for loyalty

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}
         </aside>
         <section className={styles.blocks}>
-          <Title as="h3">{loyaltyPage.title}</Title>
+          <Blocks blocks={loyaltyPage.blocks} />
-          <Content content={loyaltyPage.content} />
         </section>
       </MaxWidth>
     )
@@ -41,7 +41,3 @@ export default async function LoyaltyPage({
     return notFound()
   }
 }
-
-function Content(content: any) {
-  return <></>
-}

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 <p>Cards</p>
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
+        return (
+          <JsonToHtml
+            nodes={block.content.json.children}
+            embeds={block.content.embedded_itemsConnection.edges}
+          />
+        )
+      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
+        return <p>Dynamic</p>
+      default:
+        return null
+    }
+  })
+}

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 Image from "@/components/Image"
-import styles from "./joinLoyalty.module.css"
 
 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 (
     <div className={styles.container}>
       <div className={styles.wrapper}>
-        <JsonToHtml
+        {block.title && <Title level="h3">{block.title}</Title>}
-          embeds={block.body.embedded_itemsConnection.edges}
+        <Image
-          nodes={block.body.json.children}
+          alt="Scandic Friends"
+          className={styles.image}
+          height={65}
+          src="/_static/icons/scandic-friends.png"
+          width={203}
         />
+        {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
         <Button intent="primary">
           <span>{block.login_button_text}</span>
         </Button>
@@ -29,9 +35,11 @@ export default function JoinLoyaltyContact({
           </Link>
         </div>
       </div>
-      <section className={styles.contactContainer}>
+      {block.contact
-        <Title level="h5">Contact</Title>
+        ? block.contact.map((contact, i) => (
-      </section>
+            <Contact key={i} contactFields={contact.contact.contact_fields} />
+          ))
+        : null}
     </div>
   )
 }

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);

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"
 

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"
 

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"
 

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"
 

lib/graphql/Fragments/PageLink/AccountPageLink.graphql

@@ -0,0 +1,8 @@
+fragment AccountPageLink on AccountPage {
+  system {
+    locale
+    uid
+  }
+  title
+  url
+}

lib/graphql/Fragments/PageLink/ContentPageLink.graphql

@@ -0,0 +1,8 @@
+fragment ContentPageLink on ContentPage {
+  system {
+    locale
+    uid
+  }
+  url
+  title
+}

lib/graphql/Fragments/PageLink/CurrentContentPageLink.graphql

@@ -0,0 +1,8 @@
+fragment CurrentBlocksPageLink on CurrentBlocksPage {
+  system {
+    locale
+    uid
+  }
+  title
+  url
+}

lib/graphql/Fragments/PageLink/LoyaltyPageLink.graphql

@@ -0,0 +1,8 @@
+fragment LoyaltyPageLink on LoyaltyPage {
+  system {
+    locale
+    uid
+  }
+  title
+  url
+}

lib/graphql/Fragments/PageLinks.graphql

@@ -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
-}

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 {
+      blocks {
-        ... on LoyaltyPageContentLoyaltyLevels {
+        ... on LoyaltyPageBlocksDynamicContent {
           __typename
-          loyalty_levels {
+          dynamic_content {
-            heading
+            title
-            sub_heading
+            preamble
-            level_card {
+            component
-              loyalty_level
+            link {
+              text
+              pageConnection {
+                edges {
+                  node {
+                    ...ContentPageLink
+                    ...LoyaltyPageLink
                   }
                 }
               }
-        ... on LoyaltyPageContentCardGrid {
+            }
+          }
+        }
+        ... on LoyaltyPageBlocksCardGrid {
           __typename
           card_grid {
             heading
-            subheading
+            preamble
             cards {
               referenceConnection {
                 edges {
                   node {
-                    ... on LoyaltyPage {
+                    __typename
-                      system {
+                    ...LoyaltyPageLink
-                        locale
+                    ...ContentPageLink
-                        uid
+                    ...AccountPageLink
-                      }
-                      url
-                      title
-                    }
-                    ... on ContentPage {
-                      system {
-                        locale
-                        uid
-                      }
-                      url
-                      title
-                    }
-                    ... on AccountPage {
-                      system {
-                        locale
-                        uid
-                      }
-                      url
-                      title
-                    }
                   }
                 }
               }
               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

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) {

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
+    title?: string
-    contact: Typename<
+    preamble?: string
-      Contact,
+    contact: JoinLoyaltyContactEnum[]
-      "LoyaltyPageSidebarLoyaltyJoinContactBlockContactContact"
-    >
     login_button_text: string
-    body: {
-      embedded_itemsConnection: Edges<Embeds>
-      json: RTEDocument
-    }
   }
 }
 
@@ -48,36 +51,52 @@ export type Sidebar =
       SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact
     >
 
-enum ContentBlocks {
+export enum LoyaltyBlocksTypenameEnum {
-  LoyaltyPageContentLoyaltyLevels = "LoyaltyPageContentLoyaltyLevels",
+  LoyaltyPageBlocksDynamicContent = "LoyaltyPageBlocksDynamicContent",
-  LoyaltyPageContentCardGrid = "LoyaltyPageContentCardGrid",
+  LoyaltyPageBlocksCardGrid = "LoyaltyPageBlocksCardGrid",
+  LoyaltyPageBlocksContent = "LoyaltyPageBlocksContent",
 }
 
 type CardGrid = {
   card_grid: {
     heading: string
-    subheading: string
+    preamble: string
     cards: {
       referenceConnection: Edges<PageLink>
       heading: string
-      subheading: string
+      preamble: string
     }
   }
 }
 
-type LoyaltyLevels = {
+type Content = {
-  loyalty_levels: {
+  content: {
-    heading: string
+    embedded_itemsConnection: Edges<Embeds>
-    sub_heading?: string
+    json: RTEDocument
-    level_card: {
-      loyalty_level: number
-    }[]
   }
 }
 
-export type Content =
+type LoyaltyComponent = "loyalty_levels" | "how_it_works" | "overview_table"
-  | Typename<CardGrid, ContentBlocks.LoyaltyPageContentCardGrid>
+
-  | Typename<LoyaltyLevels, ContentBlocks.LoyaltyPageContentLoyaltyLevels>
+type DynamicContent = {
+  dynamic_content: {
+    title: string
+    preamble?: string
+    component: LoyaltyComponent
+    link: {
+      text?: string
+      page: Edges<PageLink>
+    }
+  }
+}
+
+export type Blocks =
+  | Typename<CardGrid, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid>
+  | Typename<
+      DynamicContent,
+      LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent
+    >
+  | Typename<Content, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent>
 
 export type Breadcrumb = {
   href: string
@@ -91,7 +110,7 @@ export type Breadcrumbs = {
 
 export type LoyaltyPage = {
   sidebar: Sidebar[]
-  content: Content[]
+  blocks: Blocks[]
   web: {
     breadcrumbs: Breadcrumbs
   }