feat: add blocks for loyalty page

app/[lang]/(live)/(public)/loyalty-page/page.module.css

@@ -15,8 +15,8 @@
 
 @media screen and (min-width: 950px) {
   .content {
-    gap: 10rem;
+    gap: 2.7rem;
-    grid-template-columns: 25rem 1fr;
+    grid-template-columns: 30rem 1fr;
     padding-bottom: 17.5rem;
     padding-left: 2.4rem;
     padding-right: 2.4rem;

components/Loyalty/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -0,0 +1,3 @@
+export default function HowItWorks() {
+  return <div></div>
+}

components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -0,0 +1,26 @@
+import { serverClient } from "@/lib/trpc/server"
+
+export default async function LoyaltyLevels() {
+  const data = await serverClient().loyalty.levels.all()
+
+  return (
+    <div>
+      {data.map((level) => (
+        <LevelCard key={level.tier} level={level} />
+      ))}
+    </div>
+  )
+}
+
+type LevelCardProps = {
+  level: {
+    tier: number
+    name: string
+    requiredPoints: number
+    requiredNights: string
+    topBenefits: string[]
+  }
+}
+function LevelCard({ level }: LevelCardProps) {
+  return <div></div>
+}

components/Loyalty/Blocks/DynamicContent/OverviewTable/index.tsx

@@ -0,0 +1,3 @@
+export default function OverviewTable() {
+  return <div></div>
+}

components/Loyalty/Blocks/DynamicContent/index.tsx

@@ -0,0 +1,34 @@
+import Title from "@/components/Title"
+import {
+  DynamicContentProps,
+  LoyaltyComponent,
+  LoyaltyComponentEnum,
+} from "@/types/components/loyalty/blocks"
+
+function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
+  switch (component) {
+    case LoyaltyComponentEnum.how_it_works:
+      return <p>How it works</p>
+    case LoyaltyComponentEnum.loyalty_levels:
+      return <p>loyalty_levels</p>
+    case LoyaltyComponentEnum.overview_table:
+      return <p>overview_table</p>
+    default:
+      return null
+  }
+}
+
+export default function DynamicContent({
+  dynamicContent,
+}: DynamicContentProps) {
+  return (
+    <section>
+      <header>
+        <Title level="h3">{dynamicContent.title}</Title>
+        {dynamicContent.preamble ? <p>{dynamicContent.preamble}</p> : null}
+        {dynamicContent.link ? <></> : null}
+      </header>
+      <DynamicComponentBlock component={dynamicContent.component} />
+    </section>
+  )
+}

components/Loyalty/Blocks/index.tsx

@@ -1,4 +1,5 @@
 import JsonToHtml from "@/components/JsonToHtml"
+import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"
 
 import {
   Blocks as BlocksType,
@@ -18,7 +19,7 @@ export function Blocks({ blocks }: { blocks: BlocksType[] }) {
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
-        return <p>Dynamic</p>
+        return <DynamicContentBlock dynamicContent={block.dynamic_content} />
       default:
         return null
     }

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css

@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  text-align: center;
+  gap: 0.4rem;
+  padding: 1rem;
+}
+
+.title {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 700;
+
+  margin: 0;
+}
+
+.value {
+  font-family: var(--fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  margin: 0;
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx

@@ -0,0 +1,25 @@
+import { serverClient } from "@/lib/trpc/server"
+import { getValueFromContactConfig } from "@/utils/contactConfig"
+
+import styles from "./contactRow.module.css"
+
+import { Lang } from "@/constants/languages"
+import type { ContactFields } from "@/types/requests/contactConfig"
+
+export default async function ContactRow({
+  contact,
+}: {
+  contact: ContactFields
+}) {
+  const data = await serverClient().contentstack.contactConfig.get({
+    lang: Lang.en,
+  })
+
+  const val = getValueFromContactConfig(contact.contact_field, data)
+  return (
+    <div className={styles.container}>
+      <h4 className={styles.title}>{contact.display_text}</h4>
+      <p className={styles.value}>{val}</p>
+    </div>
+  )
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css

@@ -0,0 +1,16 @@
+.contactContainer {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .contactContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-top: 0.5px solid var(--Base-Border-Disabled);
+    padding: 3.4rem;
+    text-align: center;
+    gap: 6.2rem;
+  }
+}

components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx

@@ -1,8 +1,25 @@
-import { Lang } from "@/constants/languages"
+import Title from "@/components/Title"
-import { serverClient } from "@/lib/trpc/server"
+import ContactRow from "./ContactRow"
 
-export default function Contact({ lang }: { lang: Lang }) {
+import styles from "./contact.module.css"
-  const data = serverClient().contentstack.contactConfig.get({ lang })
 
-  return <div></div>
+import { JoinLoyaltyContactTypenameEnum } from "@/types/requests/loyaltyPage"
+import type { ContactProps } from "@/types/components/loyalty/sidebar"
+
+export default async function Contact({ contactBlock }: ContactProps) {
+  return (
+    <div className={styles.contactContainer}>
+      <Title level="h5">Contact us</Title>
+      <section>
+        {contactBlock.map(({ contact, __typename }) => {
+          switch (__typename) {
+            case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
+              return <ContactRow contact={contact} />
+            default:
+              return null
+          }
+        })}
+      </section>
+    </div>
+  )
 }

components/Loyalty/Sidebar/JoinLoyalty/index.tsx

@@ -4,10 +4,10 @@ import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Image from "@/components/Image"
 
-import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
-
 import styles from "./joinLoyalty.module.css"
 
+import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
+
 export default function JoinLoyaltyContact({
   block,
 }: {
@@ -35,11 +35,7 @@ export default function JoinLoyaltyContact({
           </Link>
         </div>
       </div>
-      {block.contact
+      {block.contact && <Contact contactBlock={block.contact} />}
-        ? block.contact.map((contact, i) => (
-            <Contact key={i} contactFields={contact.contact.contact_fields} />
-          ))
-        : null}
     </div>
   )
 }

lib/graphql/Query/LoyaltyPage.graphql

@@ -81,7 +81,8 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
               ... on LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact {
                 __typename
                 contact {
-                  contact_fields
+                  display_text
+                  contact_field
                 }
               }
             }

server/index.ts

@@ -3,10 +3,12 @@ import { router } from "./trpc"
 /** Routers */
 import { contentstackRouter } from "./routers/contentstack"
 import { userRouter } from "./routers/user"
+import { loyaltyRouter } from "./routers/loyalty"
 
 export const appRouter = router({
   contentstack: contentstackRouter,
   user: userRouter,
+  loyalty: loyaltyRouter,
 })
 
 export type AppRouter = typeof appRouter

server/routers/loyalty/index.ts

@@ -0,0 +1,5 @@
+import { mergeRouters } from "@/server/trpc"
+
+import { lotaltyQueryRouter } from "./query"
+
+export const loyaltyRouter = mergeRouters(lotaltyQueryRouter)

server/routers/loyalty/query.ts

@@ -0,0 +1,27 @@
+import { allLevels } from "./temp"
+import { protectedProcedure, publicProcedure, router } from "@/server/trpc"
+
+function fakingRequest<T>(payload: T): Promise<T> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(payload)
+    }, 1500)
+  })
+}
+
+export const lotaltyQueryRouter = router({
+  levels: router({
+    all: publicProcedure.query(async function ({ ctx }) {
+      // TODO: Make request to get user data from Scandic API
+      return await fakingRequest<typeof allLevels>(allLevels)
+    }),
+    current: protectedProcedure.query(async function (opts) {
+      // TODO: Make request to get user data from Scandic API
+      return await fakingRequest<(typeof allLevels)[number]>(allLevels[1])
+    }),
+    next: protectedProcedure.query(async function (opts) {
+      // TODO: Make request to get user data from Scandic API
+      return await fakingRequest<(typeof allLevels)[number]>(allLevels[2])
+    }),
+  }),
+})

server/routers/loyalty/temp.ts

@@ -0,0 +1,68 @@
+export const allLevels = [
+  {
+    tier: 1,
+    name: "New Friend",
+    requiredPoints: 50000,
+    requiredNights: "X",
+    topBenefits: [
+      "15% on food on weekends",
+      "Always best price",
+      "Book reward nights with points",
+    ],
+  },
+  {
+    tier: 2,
+    name: "New Friend",
+    requiredPoints: 50000,
+    requiredNights: "X",
+    topBenefits: [
+      "15% on food on weekends",
+      "Always best price",
+      "Book reward nights with points",
+    ],
+  },
+  {
+    tier: 3,
+    name: "New Friend",
+    requiredPoints: 50000,
+    requiredNights: "X",
+    topBenefits: [
+      "15% on food on weekends",
+      "Always best price",
+      "Book reward nights with points",
+    ],
+  },
+  {
+    tier: 4,
+    name: "New Friend",
+    requiredPoints: 50000,
+    requiredNights: "X",
+    topBenefits: [
+      "15% on food on weekends",
+      "Always best price",
+      "Book reward nights with points",
+    ],
+  },
+  {
+    tier: 5,
+    name: "New Friend",
+    requiredPoints: 50000,
+    requiredNights: "X",
+    topBenefits: [
+      "15% on food on weekends",
+      "Always best price",
+      "Book reward nights with points",
+    ],
+  },
+  {
+    tier: 6,
+    name: "New Friend",
+    requiredPoints: 50000,
+    requiredNights: "X",
+    topBenefits: [
+      "15% on food on weekends",
+      "Always best price",
+      "Book reward nights with points",
+    ],
+  },
+]

types/components/loyalty/blocks.ts

@@ -0,0 +1,47 @@
+import { Embeds } from "@/types/requests/embeds"
+import { PageLink } from "@/types/requests/myPages/navigation"
+import { Edges } from "@/types/requests/utils/edges"
+import { RTEDocument } from "@/types/rte/node"
+
+export enum LoyaltyComponentEnum {
+  loyalty_levels = "loyalty_levels",
+  how_it_works = "how_it_works",
+  overview_table = "overview_table",
+}
+
+export type LoyaltyComponent = keyof typeof LoyaltyComponentEnum
+
+export type DynamicContentBlock = {
+  dynamic_content: {
+    title: string
+    preamble?: string
+    component: LoyaltyComponent
+    link: {
+      text?: string
+      page: Edges<PageLink>
+    }
+  }
+}
+
+export type DynamicContentProps = {
+  dynamicContent: DynamicContentBlock["dynamic_content"]
+}
+
+export type CardGrid = {
+  card_grid: {
+    heading: string
+    preamble: string
+    cards: {
+      referenceConnection: Edges<PageLink>
+      heading: string
+      preamble: string
+    }
+  }
+}
+
+export type Content = {
+  content: {
+    embedded_itemsConnection: Edges<Embeds>
+    json: RTEDocument
+  }
+}

types/components/loyalty/sidebar.ts

@@ -0,0 +1,20 @@
+import { ContactFields } from "@/types/requests/contactConfig"
+import { Embeds } from "@/types/requests/embeds"
+import { JoinLoyaltyContactEnum } from "@/types/requests/loyaltyPage"
+import { Edges } from "@/types/requests/utils/edges"
+import { RTEDocument } from "@/types/rte/node"
+
+export type SidebarContent = {
+  content: {
+    embedded_itemsConnection: Edges<Embeds>
+    json: RTEDocument
+  }
+}
+
+export type Contact = {
+  contact: ContactFields
+}
+
+export type ContactProps = {
+  contactBlock: JoinLoyaltyContactEnum[]
+}

types/requests/contactConfig.ts

@@ -1,48 +1,73 @@
 import { AllRequestResponse } from "./utils/all"
 
 export type ContactConfig = {
-  items: [
-    {
   email: {
-        name: string
+    name?: string
-        address: string
+    address?: string
   }
   email_loyalty: {
-        name: string
+    name?: string
-        address: string
+    address?: string
   }
   mailing_address: {
-        zip: string
+    zip?: string
-        street: string
+    street?: string
-        name: string
+    name?: string
-        city: string
+    city?: string
-        country: string
+    country?: string
   }
   phone: {
-        number: string
+    number?: string
-        naem: string
+    name?: string
   }
   phone_loyalty: {
-        number: string
+    number?: string
-        name: string
+    name?: string
   }
   visiting_address: {
-        zip: string
+    zip?: string
-        country: string
+    country?: string
-        city: string
+    city?: string
-        street: string
+    street?: string
   }
-    },
-  ]
 }
-type FlattenKeys<T> = T extends object
-  ? {
-      [K in keyof T]-?: `${K & string}.${FlattenKeys<T[K]>}`
-    }[keyof T]
-  : ""
 
-export type ContactField = FlattenKeys<ContactConfig["items"][0]>
+export enum ContactFieldGroupsEnum {
+  email = "email",
+  email_loyalty = "email_loyalty",
+  mailing_address = "mailing_address",
+  phone = "phone",
+  phone_loyalty = "phone_loyalty",
+  visiting_address = "visiting_address",
+}
+
+export type ContactFieldGroups = keyof typeof ContactFieldGroupsEnum
 
 export type GetContactConfigData = {
   all_contact_config: AllRequestResponse<ContactConfig>
 }
+
+// Utility types that extract the possible strings of ContactConfigField,
+// Which is all the dot notated values of ContactConfig (for example: 'email.name')
+type PathsToStringProps<T> = T extends string
+  ? []
+  : {
+      [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>]
+    }[Extract<keyof T, string>]
+
+type Join<T extends string[], D extends string> = T extends []
+  ? never
+  : T extends [infer F]
+    ? F
+    : T extends [infer F, ...infer R]
+      ? F extends string
+        ? `${F}${D}${Join<Extract<R, string[]>, D>}`
+        : never
+      : string
+
+type ContactConfigField = Join<PathsToStringProps<ContactConfig>, ".">
+
+export type ContactFields = {
+  display_text?: string
+  contact_field: ContactConfigField
+}

types/requests/loyaltyPage.ts

@@ -1,10 +1,11 @@
-import { PageLink } from "./myPages/navigation"
-import { Edges } from "./utils/edges"
 import type { AllRequestResponse } from "./utils/all"
 import type { Typename } from "./utils/typename"
-import type { RTEDocument } from "../rte/node"
+import { Contact, SidebarContent } from "../components/loyalty/sidebar"
-import type { Embeds } from "./embeds"
+import {
-import type { ContactField } from "./contactConfig"
+  CardGrid,
+  Content,
+  DynamicContentBlock,
+} from "../components/loyalty/blocks"
 
 export enum SidebarTypenameEnum {
   LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact",
@@ -13,24 +14,11 @@ export enum SidebarTypenameEnum {
 
 export type SidebarTypename = keyof typeof SidebarTypenameEnum
 
-type SidebarContent = {
+export enum JoinLoyaltyContactTypenameEnum {
-  content: {
-    embedded_itemsConnection: Edges<Embeds>
-    json: RTEDocument
-  }
-}
-
-type Contact = {
-  contact: {
-    contact_fields: ContactField[]
-  }
-}
-
-enum JoinLoyaltyContactTypenameEnum {
   LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact = "LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact",
 }
 
-type JoinLoyaltyContactEnum = Typename<
+export type JoinLoyaltyContactEnum = Typename<
   Contact,
   JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact
 >
@@ -57,43 +45,10 @@ export enum LoyaltyBlocksTypenameEnum {
   LoyaltyPageBlocksContent = "LoyaltyPageBlocksContent",
 }
 
-type CardGrid = {
-  card_grid: {
-    heading: string
-    preamble: string
-    cards: {
-      referenceConnection: Edges<PageLink>
-      heading: string
-      preamble: string
-    }
-  }
-}
-
-type Content = {
-  content: {
-    embedded_itemsConnection: Edges<Embeds>
-    json: RTEDocument
-  }
-}
-
-type LoyaltyComponent = "loyalty_levels" | "how_it_works" | "overview_table"
-
-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,
+      DynamicContentBlock,
       LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent
     >
   | Typename<Content, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent>

utils/contactConfig.ts

@@ -0,0 +1,17 @@
+import {
+  ContactConfig,
+  ContactFieldGroups,
+} from "@/types/requests/contactConfig"
+
+export function getValueFromContactConfig(
+  keyStrings: string,
+  data: ContactConfig
+): string | undefined {
+  const [groupName, key] = keyStrings.split(".") as [
+    ContactFieldGroups,
+    keyof ContactConfig[ContactFieldGroups],
+  ]
+  const fieldGroup = data[groupName]
+
+  return fieldGroup[key]
+}