refactor: infer types from zod validation

2024-04-29 09:53:54 +02:00
parent 00f30811cf
commit 49b7aa89f8
18 changed files with 418 additions and 217 deletions
--- a/components/Loyalty/Blocks/CardGrid/index.tsx
+++ b/components/Loyalty/Blocks/CardGrid/index.tsx
@@ -35,16 +35,9 @@ export default function CardGrid({ card_grid }: CardGridProps) {
 }

 function CardWrapper({ card }: CardProps) {
-  const link = card.referenceConnection.edges.length
-    ? {
-        href: card.referenceConnection.edges[0].node.url,
-        title: _("Read more"),
-      }
-    : undefined
-
  return (
    <div className={styles.cardWrapper}>
-      <Card subtitle={card.subtitle} title={card.title} link={link} />
+      <Card subtitle={card.subtitle} title={card.title} link={card.link} />
    </div>
  )
 }
--- a/components/Loyalty/Blocks/DynamicContent/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/index.tsx
@@ -7,13 +7,13 @@ import OverviewTable from "./OverviewTable"

 import styles from "./dynamicContent.module.css"

-import { DynamicContentProps } from "@/types/components/loyalty/blocks"
-import {
-  LoyaltyComponent,
-  LoyaltyComponentEnum,
-} from "@/types/requests/loyaltyPage"
+import type {
+  DynamicComponentProps,
+  DynamicContentProps,
+} from "@/types/components/loyalty/blocks"
+import { LoyaltyComponentEnum } from "@/types/requests/loyaltyPage"

-function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
+function DynamicComponentBlock({ component }: DynamicComponentProps) {
  switch (component) {
    case LoyaltyComponentEnum.how_it_works:
      return <HowItWorks />
@@ -30,9 +30,6 @@ function DynamicComponentBlock({ component }: { component: LoyaltyComponent }) {
 export default function DynamicContent({
  dynamicContent,
 }: DynamicContentProps) {
-  const link = dynamicContent.link.pageConnection.edges.length
-    ? dynamicContent.link.pageConnection.edges[0].node.url
-    : null
  return (
    <section className={styles.container}>
      <header>
@@ -48,11 +45,11 @@ export default function DynamicContent({
              {dynamicContent.title}
            </Title>
          )}
-          {link && (
-            <Link className={styles.link} href={link}>
+          {dynamicContent.link ? (
+            <Link className={styles.link} href={dynamicContent.link.href}>
              {dynamicContent.link.text}
            </Link>
-          )}
+          ) : null}
        </div>
        {dynamicContent.subtitle && (
          <Title
--- a/components/Loyalty/Blocks/index.tsx
+++ b/components/Loyalty/Blocks/index.tsx
@@ -3,12 +3,10 @@ import DynamicContentBlock from "@/components/Loyalty/Blocks/DynamicContent"

 import CardGrid from "./CardGrid"

-import {
-  Blocks as BlocksType,
-  LoyaltyBlocksTypenameEnum,
-} from "@/types/requests/loyaltyPage"
+import type { BlocksProps } from "@/types/components/loyalty/blocks"
+import { LoyaltyBlocksTypenameEnum } from "@/types/requests/loyaltyPage"

-export function Blocks({ blocks }: { blocks: BlocksType[] }) {
+export function Blocks({ blocks }: BlocksProps) {
  return blocks.map((block) => {
    switch (block.__typename) {
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
@@ -16,8 +14,8 @@ export function Blocks({ blocks }: { blocks: BlocksType[] }) {
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
        return (
          <JsonToHtml
-            nodes={block.content.json.children}
-            embeds={block.content.embedded_itemsConnection.edges}
+            nodes={block.content.content.json.children}
+            embeds={block.content.content.embedded_itemsConnection.edges}
          />
        )
      case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -1,9 +1,10 @@
+import { Lang } from "@/constants/languages"
 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({
@@ -16,6 +17,11 @@ export default async function ContactRow({
  })

  const val = getValueFromContactConfig(contact.contact_field, data)
+
+  if (!val) {
+    return null
+  }
+
  return (
    <div className={styles.container}>
      <h4 className={styles.title}>{contact.display_text}</h4>
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -1,20 +1,28 @@
+import { _ } from "@/lib/translation"
+
 import Title from "@/components/Title"
+
 import ContactRow from "./ContactRow"

 import styles from "./contact.module.css"

-import { JoinLoyaltyContactTypenameEnum } from "@/types/requests/loyaltyPage"
 import type { ContactProps } from "@/types/components/loyalty/sidebar"
+import { JoinLoyaltyContactTypenameEnum } from "@/types/requests/loyaltyPage"

 export default async function Contact({ contactBlock }: ContactProps) {
  return (
    <div className={styles.contactContainer}>
-      <Title level="h5">Contact us</Title>
+      <Title level="h5">{_("Contact us")}</Title>
      <section>
-        {contactBlock.map(({ contact, __typename }) => {
+        {contactBlock.map(({ contact, __typename }, i) => {
          switch (__typename) {
            case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
-              return <ContactRow contact={contact} />
+              return (
+                <ContactRow
+                  key={`${contact.display_text}-i`}
+                  contact={contact}
+                />
+              )
            default:
              return null
          }
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -9,13 +9,9 @@ import Contact from "./Contact"

 import styles from "./joinLoyalty.module.css"

-import type { JoinLoyaltyContact } from "@/types/requests/loyaltyPage"
+import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar"

-export default function JoinLoyaltyContact({
-  block,
-}: {
-  block: JoinLoyaltyContact["join_loyalty_contact"]
-}) {
+export default function JoinLoyaltyContact({ block }: JoinLoyaltyContactProps) {
  return (
    <div className={styles.container}>
      <div className={styles.wrapper}>
--- a/components/Loyalty/Sidebar/index.tsx
+++ b/components/Loyalty/Sidebar/index.tsx
@@ -2,15 +2,16 @@ import JsonToHtml from "@/components/JsonToHtml"

 import JoinLoyaltyContact from "./JoinLoyalty"

-import { Sidebar, SidebarTypenameEnum } from "@/types/requests/loyaltyPage"
+import { SidebarProps } from "@/types/components/loyalty/sidebar"
+import { SidebarTypenameEnum } from "@/types/requests/loyaltyPage"

-export default function SidebarLoyalty({ block }: { block: Sidebar }) {
+export default function SidebarLoyalty({ block }: SidebarProps) {
  switch (block.__typename) {
    case SidebarTypenameEnum.LoyaltyPageSidebarContent:
      return (
        <JsonToHtml
-          embeds={block.content.embedded_itemsConnection.edges}
-          nodes={block.content.json.children}
+          embeds={block.content.content.embedded_itemsConnection.edges}
+          nodes={block.content.content.json.children}
        />
      )
    case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
--- a/lib/graphql/Query/LoyaltyPage.graphql
+++ b/lib/graphql/Query/LoyaltyPage.graphql
@@ -22,6 +22,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
                    ...LoyaltyPageLink
                  }
                }
+                totalCount
              }
            }
          }
@@ -41,9 +42,11 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
                    ...AccountPageLink
                  }
                }
+                totalCount
              }
              title
              subtitle
+              open_in_new_tab
            }
          }
        }
@@ -55,16 +58,11 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
              embedded_itemsConnection {
                edges {
                  node {
-                    ... on SysAsset {
-                      title
-                      url
-                      dimension {
-                        width
-                        height
-                      }
-                    }
+                    __typename
+                    ...Image
                  }
                }
+                totalCount
              }
            }
          }
@@ -86,7 +84,6 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
                }
              }
            }
-            login_button_text
          }
        }
        ... on LoyaltyPageSidebarContent {
@@ -101,6 +98,7 @@ query GetLoyaltyPage($locale: String!, $url: String!) {
                    ...Image
                  }
                }
+                totalCount
              }
            }
          }
--- a/server/routers/contentstack/loyaltyPage/output.ts
+++ b/server/routers/contentstack/loyaltyPage/output.ts
@@ -0,0 +1,208 @@
+import { z } from "zod"
+
+import { Embeds } from "@/types/requests/embeds"
+import {
+  JoinLoyaltyContactTypenameEnum,
+  LoyaltyBlocksTypenameEnum,
+  LoyaltyComponentEnum,
+  SidebarTypenameEnum,
+} from "@/types/requests/loyaltyPage"
+import { Edges } from "@/types/requests/utils/edges"
+import { RTEDocument } from "@/types/rte/node"
+
+const loyaltyPageBlockCardGrid = z.object({
+  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid),
+  card_grid: z.object({
+    title: z.string().optional(),
+    subtitle: z.string().optional(),
+    cards: z.array(
+      z.object({
+        title: z.string().optional(),
+        subtitle: z.string().optional(),
+        referenceConnection: z.object({
+          edges: z.array(
+            z.object({
+              node: z.object({
+                system: z.object({
+                  uid: z.string(),
+                }),
+                url: z.string(),
+                title: z.string(),
+                __typename: z.string(),
+              }),
+            })
+          ),
+          totalCount: z.number(),
+        }),
+        open_in_new_tab: z.boolean(),
+      })
+    ),
+  }),
+})
+const loyaltyPageDynamicContent = z.object({
+  __typename: z.literal(
+    LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent
+  ),
+  dynamic_content: z.object({
+    title: z.string().optional(),
+    subtitle: z.string().optional(),
+    component: z.nativeEnum(LoyaltyComponentEnum),
+    link: z.object({
+      text: z.string().optional(),
+      pageConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: z.object({
+              system: z.object({
+                uid: z.string(),
+              }),
+              url: z.string(),
+              title: z.string(),
+            }),
+          })
+        ),
+        totalCount: z.number(),
+      }),
+    }),
+  }),
+})
+
+const loyaltyPageBlockTextContent = z.object({
+  __typename: z.literal(LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent),
+  content: z.object({
+    content: z.object({
+      embedded_itemsConnection: z.object({
+        edges: z.array(z.any()),
+        totalCount: z.number(),
+      }),
+      json: z.any(),
+    }),
+  }),
+})
+
+const loyaltyPageBlockItem = z.discriminatedUnion("__typename", [
+  loyaltyPageBlockCardGrid,
+  loyaltyPageDynamicContent,
+  loyaltyPageBlockTextContent,
+])
+
+const loyaltyPageSidebarTextContent = z.object({
+  __typename: z.literal(SidebarTypenameEnum.LoyaltyPageSidebarContent),
+  content: z.object({
+    content: z.object({
+      embedded_itemsConnection: z.object({
+        edges: z.array(z.any()),
+        totalCount: z.number(),
+      }),
+      json: z.any(),
+    }),
+  }),
+})
+
+const loyaltyPageJoinLoyaltyContact = z.object({
+  __typename: z.literal(
+    SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact
+  ),
+  join_loyalty_contact: z.object({
+    title: z.string().optional(),
+    preamble: z.string().optional(),
+    contact: z.array(
+      z.object({
+        __typename: z.literal(
+          JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact
+        ),
+        contact: z.object({
+          display_text: z.string().optional(),
+
+          contact_field: z.string(),
+        }),
+      })
+    ),
+  }),
+})
+
+const loyaltyPageSidebarItem = z.discriminatedUnion("__typename", [
+  loyaltyPageSidebarTextContent,
+  loyaltyPageJoinLoyaltyContact,
+])
+
+export const validateLoyaltyPageSchema = z.object({
+  all_loyalty_page: z.object({
+    items: z.array(
+      z.object({
+        title: z.string(),
+        blocks: z.array(loyaltyPageBlockItem),
+        sidebar: z.array(loyaltyPageSidebarItem),
+      })
+    ),
+  }),
+})
+
+// Block types
+type CardGridRaw = z.infer<typeof loyaltyPageBlockCardGrid>
+
+export type CardGridCard = Omit<
+  CardGridRaw["card_grid"]["cards"][number],
+  "referenceConnection"
+> & {
+  link:
+    | {
+        href: string
+        title: string
+      }
+    | undefined
+}
+
+export type CardGrid = Omit<CardGridRaw, "card_grid"> & {
+  card_grid: Omit<CardGridRaw["card_grid"], "cards"> & {
+    cards: CardGridCard[]
+  }
+}
+
+type DynamicContentRaw = z.infer<typeof loyaltyPageDynamicContent>
+
+export type DynamicContent = Omit<DynamicContentRaw, "dynamic_content"> & {
+  dynamic_content: Omit<DynamicContentRaw["dynamic_content"], "link"> & {
+    link:
+      | {
+          href: string
+          title: string
+          text?: string
+        }
+      | undefined
+  }
+}
+type BlockContentRaw = z.infer<typeof loyaltyPageBlockTextContent>
+
+export interface RteBlockContent extends BlockContentRaw {
+  content: {
+    content: {
+      json: RTEDocument
+      embedded_itemsConnection: Edges<Embeds>
+    }
+  }
+}
+export type Block = CardGrid | RteBlockContent | DynamicContent
+
+// Sidebar block types
+type SidebarContentRaw = z.infer<typeof loyaltyPageSidebarTextContent>
+
+export type RteSidebarContent = Omit<SidebarContentRaw, "content"> & {
+  content: {
+    content: {
+      json: RTEDocument
+      embedded_itemsConnection: Edges<Embeds>
+    }
+  }
+}
+export type JoinLoyaltyContact = z.infer<typeof loyaltyPageJoinLoyaltyContact>
+export type Sidebar = JoinLoyaltyContact | RteSidebarContent
+
+type LoyaltyPageDataRaw = z.infer<typeof validateLoyaltyPageSchema>
+
+type LoyaltyPageRaw = LoyaltyPageDataRaw["all_loyalty_page"]["items"][0]
+
+export type LoyaltyPage = Omit<LoyaltyPageRaw, "blocks" | "sidebar"> & {
+  blocks: Block[]
+  sidebar: Sidebar[]
+}
--- a/server/routers/contentstack/loyaltyPage/query.ts
+++ b/server/routers/contentstack/loyaltyPage/query.ts
@@ -1,33 +1,132 @@
-import { z } from "zod"
-
+import GetLoyaltyPage from "@/lib/graphql/Query/LoyaltyPage.graphql"
+import { request } from "@/lib/graphql/request"
 import { badRequestError } from "@/server/errors/trpc"
 import { publicProcedure, router } from "@/server/trpc"
-import { request } from "@/lib/graphql/request"
-import { Lang } from "@/constants/languages"

-import GetLoyaltyPage from "@/lib/graphql/Query/LoyaltyPage.graphql"
+import { getLoyaltyPageInput } from "./input"
+import { type LoyaltyPage, validateLoyaltyPageSchema } from "./output"

-import type { GetLoyaltyPageData } from "@/types/requests/loyaltyPage"
+import { Embeds } from "@/types/requests/embeds"
+import {
+  LoyaltyBlocksTypenameEnum,
+  SidebarTypenameEnum,
+} from "@/types/requests/loyaltyPage"
+import { Edges } from "@/types/requests/utils/edges"
+import { RTEDocument } from "@/types/rte/node"

 export const loyaltyPageQueryRouter = router({
-  get: publicProcedure
-    .input(z.object({ uri: z.string(), lang: z.nativeEnum(Lang) }))
-    .query(async ({ input }) => {
-      const loyaltyPage = await request<GetLoyaltyPageData>(
-        GetLoyaltyPage,
-        {
-          locale: input.lang,
-          url: input.uri,
-        },
-        {
-          tags: [`${input.uri}-${input.lang}`],
-        }
-      )
+  get: publicProcedure.input(getLoyaltyPageInput).query(async ({ input }) => {
+    try {
+      const loyaltyPageRes = await request<LoyaltyPage>(GetLoyaltyPage, {
+        locale: input.locale,
+        url: input.href,
+      })

-      if (loyaltyPage.data && loyaltyPage.data.all_loyalty_page.items.length) {
-        return loyaltyPage.data.all_loyalty_page.items[0]
+      if (!loyaltyPageRes.data) {
+        throw badRequestError()
      }

+      const validatedLoyaltyPage = validateLoyaltyPageSchema.safeParse(
+        loyaltyPageRes.data
+      )
+
+      if (!validatedLoyaltyPage.success) {
+        throw badRequestError()
+      }
+
+      const sidebar =
+        validatedLoyaltyPage.data.all_loyalty_page.items[0].sidebar.map(
+          (block) => {
+            if (
+              block.__typename == SidebarTypenameEnum.LoyaltyPageSidebarContent
+            ) {
+              return {
+                ...block,
+                content: {
+                  content: {
+                    json: block.content.content.json as RTEDocument,
+                    embedded_itemsConnection: block.content.content
+                      .embedded_itemsConnection as Edges<Embeds>,
+                  },
+                },
+              }
+            } else {
+              return block
+            }
+          }
+        )
+
+      const blocks =
+        validatedLoyaltyPage.data.all_loyalty_page.items[0].blocks.map(
+          (block) => {
+            switch (block.__typename) {
+              case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid:
+                return {
+                  ...block,
+                  card_grid: {
+                    ...block.card_grid,
+                    cards: block.card_grid.cards.map((card) => {
+                      return {
+                        ...card,
+                        link:
+                          card.referenceConnection.totalCount > 0
+                            ? {
+                                href: card.referenceConnection.edges[0].node
+                                  .url,
+                                title:
+                                  card.referenceConnection.edges[0].node.title,
+                              }
+                            : undefined,
+                      }
+                    }),
+                  },
+                }
+              case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent:
+                return {
+                  ...block,
+                  dynamic_content: {
+                    ...block.dynamic_content,
+                    link:
+                      block.dynamic_content.link.pageConnection.totalCount > 0
+                        ? {
+                            text: block.dynamic_content.link.text,
+                            href: block.dynamic_content.link.pageConnection
+                              .edges[0].node.url,
+                            title:
+                              block.dynamic_content.link.pageConnection.edges[0]
+                                .node.title,
+                          }
+                        : undefined,
+                  },
+                }
+              case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
+                return {
+                  ...block,
+                  content: {
+                    content: {
+                      json: block.content.content.json as RTEDocument,
+                      embedded_itemsConnection: block.content.content
+                        .embedded_itemsConnection as Edges<Embeds>,
+                    },
+                  },
+                }
+              default:
+                return block
+            }
+          }
+        )
+
+      const loyaltyPage = {
+        ...validatedLoyaltyPage.data.all_loyalty_page.items[0],
+        blocks,
+        sidebar,
+      } as LoyaltyPage
+
+      return loyaltyPage
+    } catch (error) {
+      console.info(`Get Loyalty Page Error`)
+      console.error(error)
      throw badRequestError()
-    }),
+    }
+  }),
 })
--- a/types/components/jsontohtml.ts
+++ b/types/components/jsontohtml.ts
@@ -1,8 +1,7 @@
-import type { RTENode } from "../rte/node"
-
-import type { Node } from "@/types/requests/utils/edges"
-import type { RenderOptions } from "../rte/option"
 import type { Embeds } from "@/types/requests/embeds"
+import type { Node } from "@/types/requests/utils/edges"
+import type { RTENode } from "../rte/node"
+import type { RenderOptions } from "../rte/option"

 export type JsonToHtmlProps = {
  embeds: Node<Embeds>[]
--- a/types/components/loyalty/blocks.ts
+++ b/types/components/loyalty/blocks.ts
@@ -1,38 +1,28 @@
-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"
+import {
+  Block,
+  CardGrid,
+  CardGridCard,
+  DynamicContent,
+  RteBlockContent,
+} from "@/server/routers/contentstack/loyaltyPage/output"
+
+export type BlocksProps = {
+  blocks: Block[]
+}

 export type DynamicContentProps = {
-  dynamicContent: DynamicContentBlock["dynamic_content"]
+  dynamicContent: DynamicContent["dynamic_content"]
 }

-type Card = {
-  referenceConnection: Edges<PageLink>
-  title?: string
-  subtitle?: string
-  open_in_new_tab: boolean
+export type DynamicComponentProps = {
+  component: DynamicContent["dynamic_content"]["component"]
 }

-export type CardProps = { card: Card }
+export type CardProps = { card: CardGridCard }

-export type CardGrid = {
-  card_grid: {
-    title?: string
-    subtitle?: string
-    cards: Card[]
-  }
-}
+export type CardGridProps = Pick<CardGrid, "card_grid">

-export type CardGridProps = CardGrid
-
-export type Content = {
-  content: {
-    embedded_itemsConnection: Edges<Embeds>
-    json: RTEDocument
-  }
-}
+export type Content = { content: RteBlockContent["content"]["content"] }

 export type LevelCardProps = {
  level: {
--- a/types/components/loyalty/sidebar.ts
+++ b/types/components/loyalty/sidebar.ts
@@ -1,20 +1,16 @@
-import { ContactFields } from "@/types/requests/contactConfig"
-import { Embeds } from "@/types/requests/embeds"
-import { JoinLoyaltyContactContact } from "@/types/requests/loyaltyPage"
-import { Edges } from "@/types/requests/utils/edges"
-import { RTEDocument } from "@/types/rte/node"
+import {
+  JoinLoyaltyContact,
+  Sidebar,
+} from "@/server/routers/contentstack/loyaltyPage/output"

-export type SidebarContent = {
-  content: {
-    embedded_itemsConnection: Edges<Embeds>
-    json: RTEDocument
-  }
+export type SidebarProps = {
+  block: Sidebar
 }

-export type Contact = {
-  contact: ContactFields
+export type JoinLoyaltyContactProps = {
+  block: JoinLoyaltyContact["join_loyalty_contact"]
 }

 export type ContactProps = {
-  contactBlock: JoinLoyaltyContactContact[]
+  contactBlock: JoinLoyaltyContact["join_loyalty_contact"]["contact"]
 }
--- a/types/image.ts
+++ b/types/image.ts
@@ -4,7 +4,7 @@ export type Image = {
    height: number
    width: number
  }
-  metadata: JSON
+  metadata: JSON | null
  system: {
    uid: string
  }
--- a/types/requests/contactConfig.ts
+++ b/types/requests/contactConfig.ts
@@ -47,28 +47,7 @@ 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')
-// From: https://stackoverflow.com/questions/47057649/typescript-string-dot-notation-of-nested-object#47058976
-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
-
-export type ContactConfigField = Join<PathsToStringProps<ContactConfig>, ".">
-
 export type ContactFields = {
  display_text?: string
-  contact_field: ContactConfigField
+  contact_field: string
 }
--- a/types/requests/loyaltyPage.ts
+++ b/types/requests/loyaltyPage.ts
@@ -1,9 +1,4 @@
-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 { JoinLoyaltyContact } from "@/server/routers/contentstack/loyaltyPage/output"
 import type { Typename } from "./utils/typename"

 export enum JoinLoyaltyContactTypenameEnum {
@@ -11,18 +6,10 @@ export enum JoinLoyaltyContactTypenameEnum {
 }

 export type JoinLoyaltyContactContact = Typename<
-  Contact,
+  JoinLoyaltyContact["join_loyalty_contact"],
  JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact
 >

-export type JoinLoyaltyContact = {
-  join_loyalty_contact: {
-    title?: string
-    preamble?: string
-    contact: JoinLoyaltyContactContact[]
-  }
-}
-
 export enum SidebarTypenameEnum {
  LoyaltyPageSidebarJoinLoyaltyContact = "LoyaltyPageSidebarJoinLoyaltyContact",
  LoyaltyPageSidebarContent = "LoyaltyPageSidebarContent",
@@ -30,13 +17,6 @@ export enum SidebarTypenameEnum {

 export type SidebarTypename = keyof typeof SidebarTypenameEnum

-export type Sidebar =
-  | Typename<SidebarContent, SidebarTypenameEnum.LoyaltyPageSidebarContent>
-  | Typename<
-      JoinLoyaltyContact,
-      SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact
-    >
-
 export enum LoyaltyComponentEnum {
  loyalty_levels = "loyalty_levels",
  how_it_works = "how_it_works",
@@ -45,57 +25,8 @@ export enum LoyaltyComponentEnum {

 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",
  LoyaltyPageBlocksContent = "LoyaltyPageBlocksContent",
 }
-
-export type Blocks =
-  | Typename<CardGrid, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardGrid>
-  | Typename<
-      DynamicContentBlock,
-      LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksDynamicContent
-    >
-  | Typename<Content, LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent>
-
-export type Breadcrumb = {
-  href: string
-  title: string
-}
-
-export type Breadcrumbs = {
-  parents: Breadcrumb[]
-  title: string
-}
-
-export type LoyaltyPage = {
-  sidebar: Sidebar[]
-  blocks: Blocks[]
-  web: {
-    breadcrumbs: Breadcrumbs
-  }
-  system: {
-    created_at: string
-    uid: string
-    updated_at: string
-  }
-  title: string
-  url: string
-}
-
-export type GetLoyaltyPageData = {
-  all_loyalty_page: AllRequestResponse<LoyaltyPage>
-}
--- a/types/rte/node.ts
+++ b/types/rte/node.ts
@@ -1,11 +1,12 @@
 import { RTETypeEnum } from "./enums"
+
+import type { EmbedByUid } from "../components/jsontohtml"
 import type {
  Attributes,
  RTEAnchorAttrs,
  RTEAssetAttrs,
  RTELinkAttrs,
 } from "./attrs"
-import type { EmbedByUid } from "../components/jsontohtml"
 import type { RenderOptions } from "./option"

 export interface RTEDefaultNode {
--- a/utils/contactConfig.ts
+++ b/utils/contactConfig.ts
@@ -1,18 +1,19 @@
 import {
  ContactConfig,
-  ContactConfigField,
  ContactFieldGroups,
 } from "@/types/requests/contactConfig"

 export function getValueFromContactConfig(
-  keyStrings: ContactConfigField,
+  keyString: string,
  data: ContactConfig
 ): string | undefined {
-  const [groupName, key] = keyStrings.split(".") as [
+  const [groupName, key] = keyString.split(".") as [
    ContactFieldGroups,
    keyof ContactConfig[ContactFieldGroups],
  ]
-  const fieldGroup = data[groupName]
+  if (data[groupName]) {
+    const fieldGroup = data[groupName]

-  return fieldGroup[key]
+    return fieldGroup[key]
+  }
 }