feat: add card grid component

types/components/loyalty/blocks.ts

@@ -1,47 +1,46 @@
 import { Embeds } from "@/types/requests/embeds"
+import { DynamicContentBlock } from "@/types/requests/loyaltyPage"
 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"]
 }
 
+type Card = {
+  referenceConnection: Edges<PageLink>
+  title?: string
+  subtitle?: string
+  open_in_new_tab: boolean
+}
+
+export type CardProps = { card: Card }
+
 export type CardGrid = {
   card_grid: {
-    heading: string
-    preamble: string
-    cards: {
-      referenceConnection: Edges<PageLink>
-      heading: string
-      preamble: string
-    }
+    title?: string
+    subtitle?: string
+    cards: Card[]
   }
 }
 
+export type CardGridProps = CardGrid
+
 export type Content = {
   content: {
     embedded_itemsConnection: Edges<Embeds>
     json: RTEDocument
   }
 }
+
+export type LevelCardProps = {
+  level: {
+    tier: number
+    name: string
+    requiredPoints: number
+    requiredNights: string
+    topBenefits: string[]
+    logo: string
+  }
+}

types/components/loyalty/sidebar.ts

@@ -1,6 +1,6 @@
 import { ContactFields } from "@/types/requests/contactConfig"
 import { Embeds } from "@/types/requests/embeds"
-import { JoinLoyaltyContactEnum } from "@/types/requests/loyaltyPage"
+import { JoinLoyaltyContactContact } from "@/types/requests/loyaltyPage"
 import { Edges } from "@/types/requests/utils/edges"
 import { RTEDocument } from "@/types/rte/node"
 
@@ -16,5 +16,5 @@ export type Contact = {
 }
 
 export type ContactProps = {
-  contactBlock: JoinLoyaltyContactEnum[]
+  contactBlock: JoinLoyaltyContactContact[]
 }

types/requests/contactConfig.ts

@@ -49,6 +49,7 @@ export type GetContactConfigData = {
 
 // Utility types that extract the possible strings of ContactConfigField,
 // Which is all the dot notated values of ContactConfig (for example: 'email.name')
+// From: https://stackoverflow.com/questions/47057649/typescript-string-dot-notation-of-nested-object#47058976
 type PathsToStringProps<T> = T extends string
   ? []
   : {
@@ -65,7 +66,7 @@ type Join<T extends string[], D extends string> = T extends []
         : never
       : string
 
-type ContactConfigField = Join<PathsToStringProps<ContactConfig>, ".">
+export type ContactConfigField = Join<PathsToStringProps<ContactConfig>, ".">
 
 export type ContactFields = {
   display_text?: string

types/requests/loyaltyPage.ts

@@ -1,24 +1,16 @@
+import { CardGrid, Content } from "../components/loyalty/blocks"
+import { Contact, SidebarContent } from "../components/loyalty/sidebar"
+import { PageLink } from "./myPages/navigation"
+import { Edges } from "./utils/edges"
+
 import type { AllRequestResponse } from "./utils/all"
 import type { Typename } from "./utils/typename"
-import { Contact, SidebarContent } from "../components/loyalty/sidebar"
-import {
-  CardGrid,
-  Content,
-  DynamicContentBlock,
-} from "../components/loyalty/blocks"
-
-export enum SidebarTypenameEnum {
-  LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact",
-  LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent",
-}
-
-export type SidebarTypename = keyof typeof SidebarTypenameEnum
 
 export enum JoinLoyaltyContactTypenameEnum {
   LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact = "LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact",
 }
 
-export type JoinLoyaltyContactEnum = Typename<
+export type JoinLoyaltyContactContact = Typename<
   Contact,
   JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact
 >
@@ -27,11 +19,17 @@ export type JoinLoyaltyContact = {
   join_loyalty_contact: {
     title?: string
     preamble?: string
-    contact: JoinLoyaltyContactEnum[]
-    login_button_text: string
+    contact: JoinLoyaltyContactContact[]
   }
 }
 
+export enum SidebarTypenameEnum {
+  LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact",
+  LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent",
+}
+
+export type SidebarTypename = keyof typeof SidebarTypenameEnum
+
 export type Sidebar =
   | Typename<SidebarContent, SidebarTypenameEnum.LoyaltyPageSidebarContent>
   | Typename<
@@ -39,6 +37,26 @@ export type Sidebar =
       SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact
     >
 
+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
+    subtitle?: string
+    component: LoyaltyComponent
+    link: {
+      text?: string
+      pageConnection: Edges<PageLink>
+    }
+  }
+}
+
 export enum LoyaltyBlocksTypenameEnum {
   LoyaltyPageBlocksDynamicContent = "LoyaltyPageBlocksDynamicContent",
   LoyaltyPageBlocksCardGrid = "LoyaltyPageBlocksCardGrid",

types/requests/utils/asset.ts

@@ -1,5 +1,5 @@
-import type { EmbedEnum } from "./embeds"
 import type { Image } from "@/types/image"
+import type { EmbedEnum } from "./embeds"
 import type { Typename } from "./typename"
 
 export type SysAsset = Typename<Image, EmbedEnum.SysAsset>