fix: validation for header

server/routers/contentstack/base/output.ts

@@ -1,10 +1,17 @@
-import { z } from "zod"
+import { z, ZodError, ZodIssueCode } from "zod"
 
 import { Lang } from "@/constants/languages"
+import { discriminatedUnion } from "@/lib/discriminatedUnion"
+import {
+  cardBlockRefsSchema,
+  cardBlockSchema,
+  transformCardBlock,
+  transformCardBlockRefs,
+} from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
+import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
 
 import { removeMultipleSlashes } from "@/utils/url"
 
-import { imageVaultAssetTransformedSchema } from "../schemas/imageVault"
 import { systemSchema } from "../schemas/system"
 
 import { Image } from "@/types/image"
@@ -430,228 +437,219 @@ export const validateFooterRefConfigSchema = z.object({
   }),
 })
 
-const linkConnectionNodeSchema = z
+/**
+ * New Header Validation
+ */
+
+const linkRefsUnionSchema = z.discriminatedUnion("__typename", [
+  pageLinks.contentPageRefSchema,
+  pageLinks.hotelPageRefSchema,
+  pageLinks.loyaltyPageRefSchema,
+])
+
+const linkRefsSchema = z
   .object({
-    edges: z
-      .array(
+    linkConnection: z.object({
+      edges: z.array(
         z.object({
-          node: z.object({
-            system: systemSchema,
-            url: z.string(),
-            title: z.string(),
-            web: z.object({
-              original_url: z.string(),
-            }),
-          }),
+          node: linkRefsUnionSchema,
         })
-      )
-      .max(1),
-  })
-  .transform((data) => {
-    const node = data.edges[0]?.node
-    if (!node) {
-      return null
-    }
-    const url = node.url
-    const originalUrl = node.web?.original_url
-    const lang = node.system.locale
-
-    return {
-      href: originalUrl || removeMultipleSlashes(`/${lang}/${url}`),
-      isExternal: !!originalUrl,
-    }
-  })
-
-const linkWithTitleSchema = z
-  .object({
-    title: z.string(),
-    linkConnection: linkConnectionNodeSchema,
-  })
-  .transform((rawData) => {
-    return rawData.linkConnection && rawData.title
-      ? {
-          ...rawData.linkConnection,
-          title: rawData.title,
-        }
-      : null
-  })
-
-const cardButtonSchema = z
-  .object({
-    cta_text: z.string(),
-    external_link: z.object({
-      href: z.string(),
-      title: z.string(),
+      ),
     }),
-    is_contentstack_link: z.boolean(),
-    linkConnection: linkConnectionNodeSchema,
-    open_in_new_tab: z.boolean(),
   })
   .transform((data) => {
-    const linkConnectionData = data.linkConnection
-    const isContentstackLink = data.is_contentstack_link
-    const externalLink = data.external_link
-    const href =
-      isContentstackLink && externalLink.href
-        ? externalLink.href
-        : linkConnectionData?.href ?? ""
-
-    return {
-      openInNewTab: data.open_in_new_tab,
-      title: data.cta_text,
-      href,
-      isExternal: !isContentstackLink || linkConnectionData?.isExternal,
+    if (data.linkConnection.edges.length) {
+      const link = pageLinks.transformRef(data.linkConnection.edges[0].node)
+      if (link) {
+        return {
+          link,
+        }
+      }
     }
+    return { link: null }
   })
 
-const cardConnectionSchema = z
-  .object({
-    edges: z
-      .array(
+const menuItemsRefsSchema = z.intersection(
+  linkRefsSchema,
+  z
+    .object({
+      cardConnection: z.object({
+        edges: z.array(
+          z.object({
+            node: cardBlockRefsSchema,
+          })
+        ),
+      }),
+      see_all_link: linkRefsSchema,
+      submenu: z.array(
         z.object({
-          node: z.object({
-            heading: z.string(),
-            body_text: z.string(),
-            background_image: imageVaultAssetTransformedSchema,
-            has_primary_button: z.boolean(),
-            has_secondary_button: z.boolean(),
-            scripted_top_title: z.string(),
-            primary_button: cardButtonSchema.nullable(),
-            secondary_button: cardButtonSchema.nullable(),
-          }),
+          links: z.array(linkRefsSchema),
         })
-      )
-      .max(1),
-  })
-  .transform((data) => {
-    const node = data.edges[0]?.node
-    if (!node) {
-      return null
-    }
+      ),
+    })
+    .transform((data) => {
+      let card = null
+      if (data.cardConnection.edges.length) {
+        card = transformCardBlockRefs(data.cardConnection.edges[0].node)
+      }
 
-    return {
-      scriptedTopTitle: node.scripted_top_title,
-      heading: node.heading,
-      bodyText: node.body_text,
-      backgroundImage: node.background_image,
-      primaryButton: node.has_primary_button ? node.primary_button : null,
-      secondaryButton: node.has_secondary_button ? node.secondary_button : null,
-    }
-  })
+      return {
+        card,
+        see_all_link: data.see_all_link,
+        submenu: data.submenu,
+      }
+    })
+)
 
-export const menuItemSchema = z
-  .object({
-    title: z.string(),
-    linkConnection: linkConnectionNodeSchema,
-    submenu: z.array(
-      z.object({
-        title: z.string(),
-        links: z.array(linkWithTitleSchema),
-      })
-    ),
-    see_all_link: linkWithTitleSchema,
-    cardConnection: cardConnectionSchema,
-  })
-  .transform((data) => {
-    const { submenu, linkConnection, cardConnection, see_all_link, title } =
-      data
-    return {
-      title,
-      link: submenu.length ? null : linkConnection,
-      seeAllLink: submenu.length ? see_all_link : null,
-      submenu,
-      card: cardConnection,
-    }
-  })
-
-export const getHeaderSchema = z
+export const headerRefsSchema = z
   .object({
     all_header: z.object({
       items: z
         .array(
           z.object({
-            top_link: linkWithTitleSchema,
-            menu_items: z.array(menuItemSchema),
+            menu_items: z.array(menuItemsRefsSchema),
+            system: systemSchema,
+            top_link: linkRefsSchema,
           })
         )
-        .length(1),
+        .max(1),
     }),
   })
   .transform((data) => {
-    const { top_link, menu_items } = data.all_header.items[0]
+    if (!data.all_header.items.length) {
+      console.info(`Zod Error - No header returned in refs request`)
+      throw new ZodError([
+        {
+          code: ZodIssueCode.custom,
+          fatal: true,
+          message: "No header returned (Refs)",
+          path: ["all_header.items"],
+        },
+      ])
+    }
 
     return {
-      topLink: top_link,
-      menuItems: menu_items,
+      header: data.all_header.items[0],
     }
   })
 
-const linkConnectionRefs = z.object({
-  edges: z
-    .array(
-      z.object({
-        node: z.object({
-          system: systemSchema,
-        }),
-      })
-    )
-    .max(1),
-})
+const linkUnionSchema = z.discriminatedUnion("__typename", [
+  pageLinks.contentPageSchema,
+  pageLinks.hotelPageSchema,
+  pageLinks.loyaltyPageSchema,
+])
 
-const cardConnectionRefs = z.object({
-  primary_button: z
-    .object({
-      linkConnection: linkConnectionRefs,
-    })
-    .nullable(),
-  secondary_button: z
-    .object({
-      linkConnection: linkConnectionRefs,
-    })
-    .nullable(),
-  system: z.object({
-    content_type_uid: z.string(),
-    uid: z.string(),
-  }),
-})
-
-export const getHeaderRefSchema = z.object({
-  all_header: z.object({
-    items: z
-      .array(
+const linkSchema = z
+  .object({
+    linkConnection: z.object({
+      edges: z.array(
         z.object({
-          top_link: z
-            .object({
-              linkConnection: linkConnectionRefs,
-            })
-            .nullable(),
-          menu_items: z.array(
+          node: discriminatedUnion(linkUnionSchema.options),
+        })
+      ),
+    }),
+  })
+  .transform((data) => {
+    if (data.linkConnection.edges.length) {
+      const link = pageLinks.transform(data.linkConnection.edges[0].node)
+      if (link) {
+        return {
+          link,
+        }
+      }
+    }
+
+    return {
+      link: null,
+    }
+  })
+
+const titleSchema = z.object({
+  title: z.string().optional().default(""),
+})
+
+/**
+ * Intersection has to be used since you are not
+ * allowed to merge two schemas where one uses
+ * transform
+ */
+const linkAndTitleSchema = z.intersection(linkSchema, titleSchema)
+
+/**
+ * Same as above 👆
+ */
+export const menuItemSchema = z
+  .intersection(
+    linkAndTitleSchema,
+    z
+      .object({
+        cardConnection: z.object({
+          edges: z.array(
             z.object({
-              linkConnection: linkConnectionRefs,
-              see_all_link: z.object({
-                linkConnection: linkConnectionRefs,
-              }),
-              cardConnection: z.object({
-                edges: z
-                  .array(
-                    z.object({
-                      node: cardConnectionRefs,
-                    })
-                  )
-                  .max(1),
-              }),
-              submenu: z.array(
-                z.object({
-                  links: z.array(
-                    z.object({ linkConnection: linkConnectionRefs })
-                  ),
-                })
-              ),
+              node: cardBlockSchema,
             })
           ),
-          system: systemSchema,
-        })
-      )
-      .length(1),
-  }),
-})
+        }),
+        see_all_link: linkAndTitleSchema,
+        submenu: z.array(
+          z.object({
+            links: z.array(linkAndTitleSchema),
+            title: z.string().optional().default(""),
+          })
+        ),
+      })
+      .transform((data) => {
+        let card = null
+        if (data.cardConnection.edges.length) {
+          card = transformCardBlock(data.cardConnection.edges[0].node)
+        }
+
+        return {
+          card,
+          seeAllLink: data.see_all_link,
+          submenu: data.submenu,
+        }
+      })
+  )
+  .transform((data) => {
+    return {
+      ...data,
+      link: data.submenu.length ? null : data.link,
+      seeAllLink: data.submenu.length ? data.seeAllLink : null,
+    }
+  })
+
+export const headerSchema = z
+  .object({
+    all_header: z.object({
+      items: z
+        .array(
+          z.object({
+            menu_items: z.array(menuItemSchema),
+            top_link: linkAndTitleSchema,
+          })
+        )
+        .max(1),
+    }),
+  })
+  .transform((data) => {
+    if (!data.all_header.items.length) {
+      console.info(`Zod Error - No header returned in request`)
+      throw new ZodError([
+        {
+          code: ZodIssueCode.custom,
+          fatal: true,
+          message: "No header returned",
+          path: ["all_header.items"],
+        },
+      ])
+    }
+
+    const header = data.all_header.items[0]
+    return {
+      header: {
+        menuItems: header.menu_items,
+        topLink: header.top_link,
+      },
+    }
+  })

server/routers/contentstack/base/query.ts

@@ -9,14 +9,8 @@ import {
   GetCurrentHeader,
   GetCurrentHeaderRef,
 } from "@/lib/graphql/Query/Current/Header.graphql"
-import {
-  GetFooter,
-  GetFooterRef,
-} from "@/lib/graphql/Query/Footer.graphql"
-import {
-  GetHeader,
-  GetHeaderRef,
-} from "@/lib/graphql/Query/Header.graphql"
+import { GetFooter, GetFooterRef } from "@/lib/graphql/Query/Footer.graphql"
+import { GetHeader, GetHeaderRef } from "@/lib/graphql/Query/Header.graphql"
 import { request } from "@/lib/graphql/request"
 import { notFound } from "@/server/errors/trpc"
 import { contentstackBaseProcedure, router } from "@/server/trpc"
@@ -25,22 +19,23 @@ import {
   generateRefsResponseTag,
   generateTag,
   generateTags,
+  generateTagsFromSystem,
 } from "@/utils/generateTag"
 
 import { langInput } from "./input"
 import {
-  type GetCurrentHeaderData,
   type ContactConfigData,
   CurrentFooterDataRaw,
   CurrentFooterRefDataRaw,
   CurrentHeaderRefDataRaw,
-  getHeaderRefSchema,
-  getHeaderSchema,
+  type GetCurrentHeaderData,
+  headerRefsSchema,
+  headerSchema,
   validateContactConfigSchema,
   validateCurrentFooterConfigSchema,
+  validateCurrentHeaderConfigSchema,
   validateFooterConfigSchema,
   validateFooterRefConfigSchema,
-  validateCurrentHeaderConfigSchema,
 } from "./output"
 import { getConnections, getFooterConnections } from "./utils"
 
@@ -48,7 +43,10 @@ import type {
   FooterDataRaw,
   FooterRefDataRaw,
 } from "@/types/components/footer/footer"
-import type { HeaderRefResponse, HeaderResponse } from "@/types/header"
+import type {
+  GetHeader as GetHeaderData,
+  GetHeaderRefs,
+} from "@/types/trpc/routers/contentstack/header"
 
 const meter = metrics.getMeter("trpc.contentstack.base")
 // OpenTelemetry metrics: ContactConfig
@@ -209,7 +207,7 @@ export const baseQueryRouter = router({
       JSON.stringify({ query: { lang } })
     )
 
-    const responseRef = await request<HeaderRefResponse>(
+    const responseRef = await request<GetHeaderRefs>(
       GetHeaderRef,
       {
         locale: lang,
@@ -241,7 +239,7 @@ export const baseQueryRouter = router({
       throw notFoundError
     }
 
-    const validatedHeaderRefs = getHeaderRefSchema.safeParse(responseRef.data)
+    const validatedHeaderRefs = headerRefsSchema.safeParse(responseRef.data)
 
     if (!validatedHeaderRefs.success) {
       getHeaderRefsFailCounter.add(1, {
@@ -276,14 +274,11 @@ export const baseQueryRouter = router({
     )
 
     const tags = [
-      generateTags(lang, connections),
-      generateTag(
-        lang,
-        validatedHeaderRefs.data.all_header.items[0].system.uid
-      ),
+      generateTagsFromSystem(lang, connections),
+      generateTag(lang, validatedHeaderRefs.data.header.system.uid),
     ].flat()
 
-    const response = await request<HeaderResponse>(
+    const response = await request<GetHeaderData>(
       GetHeader,
       { locale: lang },
       { cache: "force-cache", next: { tags } }
@@ -306,7 +301,7 @@ export const baseQueryRouter = router({
       throw notFoundError
     }
 
-    const validatedHeaderConfig = getHeaderSchema.safeParse(response.data)
+    const validatedHeaderConfig = headerSchema.safeParse(response.data)
 
     if (!validatedHeaderConfig.success) {
       getHeaderFailCounter.add(1, {
@@ -329,7 +324,9 @@ export const baseQueryRouter = router({
       JSON.stringify({ query: { lang } })
     )
 
-    return validatedHeaderConfig.data
+    return {
+      data: validatedHeaderConfig.data.header,
+    }
   }),
   currentHeader: contentstackBaseProcedure
     .input(langInput)

server/routers/contentstack/base/utils.ts

@@ -2,43 +2,42 @@ import type {
   FooterLinkItem,
   FooterRefDataRaw,
 } from "@/types/components/footer/footer"
-import type { HeaderRefResponse } from "@/types/header"
+import { System } from "@/types/requests/system"
 import { Edges } from "@/types/requests/utils/edges"
 import { NodeRefs } from "@/types/requests/utils/refs"
+import type { HeaderRefs } from "@/types/trpc/routers/contentstack/header"
 
-export function getConnections(refs: HeaderRefResponse) {
-  const connections: Edges<NodeRefs>[] = []
-  const headerData = refs.all_header.items[0]
-  const topLink = headerData.top_link
-  if (topLink) {
-    connections.push(topLink.linkConnection)
+export function getConnections({ header }: HeaderRefs) {
+  const connections: System["system"][] = [header.system]
+
+  if (header.top_link?.link) {
+    connections.push(header.top_link.link)
   }
 
-  headerData.menu_items.forEach(
-    ({ linkConnection, see_all_link, cardConnection, submenu }) => {
-      const card = cardConnection.edges[0]?.node
-      connections.push(linkConnection)
-
-      if (see_all_link) {
-        connections.push(see_all_link.linkConnection)
+  if (header.menu_items.length) {
+    header.menu_items.forEach((menuItem) => {
+      if (menuItem.card) {
+        connections.push(...menuItem.card)
       }
-
-      if (card) {
-        if (card.primary_button) {
-          connections.push(card.primary_button.linkConnection)
-        }
-        if (card.secondary_button) {
-          connections.push(card.secondary_button.linkConnection)
-        }
+      if (menuItem.link) {
+        connections.push(menuItem.link)
       }
-
-      submenu.forEach(({ links }) => {
-        links.forEach(({ linkConnection }) => {
-          connections.push(linkConnection)
+      if (menuItem.see_all_link?.link) {
+        connections.push(menuItem.see_all_link.link)
+      }
+      if (menuItem.submenu.length) {
+        menuItem.submenu.forEach((subMenuItem) => {
+          if (subMenuItem.links.length) {
+            subMenuItem.links.forEach((link) => {
+              if (link?.link) {
+                connections.push(link.link)
+              }
+            })
+          }
         })
-      })
-    }
-  )
+      }
+    })
+  }
 
   return connections
 }

server/routers/contentstack/schemas/blocks/cardsGrid.ts

@@ -8,7 +8,7 @@ import { linkConnectionRefsSchema } from "./utils/linkConnection"
 import { BlocksEnums } from "@/types/enums/blocks"
 import { CardsGridEnum } from "@/types/enums/cardsGrid"
 
-const cardBlockSchema = z.object({
+export const cardBlockSchema = z.object({
   __typename: z.literal(CardsGridEnum.cards.Card),
   // JSON - ImageVault Image
   background_image: tempImageVaultAssetSchema,
@@ -30,6 +30,29 @@ const cardBlockSchema = z.object({
   title: z.string().optional(),
 })
 
+export function transformCardBlock(card: typeof cardBlockSchema._type) {
+  return {
+    __typename: card.__typename,
+    backgroundImage: card.background_image,
+    body_text: card.body_text,
+    heading: card.heading,
+    isContentCard: card.is_content_card,
+    primaryButton: card.has_primary_button ? card.primary_button : undefined,
+    scripted_top_title: card.scripted_top_title,
+    secondaryButton: card.has_secondary_button
+      ? card.secondary_button
+      : undefined,
+    sidePeekButton:
+      card.has_sidepeek_button && card.sidepeek_button?.call_to_action_text
+        ? {
+            title: card.sidepeek_button.call_to_action_text,
+          }
+        : undefined,
+    system: card.system,
+    title: card.title,
+  }
+}
+
 const loyaltyCardBlockSchema = z.object({
   __typename: z.literal(CardsGridEnum.cards.LoyaltyCard),
   body_text: z.string().optional(),
@@ -71,29 +94,7 @@ export const cardsGridSchema = z.object({
         title: data.title,
         cards: data.cardConnection.edges.map((card) => {
           if (card.node.__typename === CardsGridEnum.cards.Card) {
-            return {
-              __typename: card.node.__typename,
-              backgroundImage: card.node.background_image,
-              body_text: card.node.body_text,
-              heading: card.node.heading,
-              isContentCard: card.node.is_content_card,
-              primaryButton: card.node.has_primary_button
-                ? card.node.primary_button
-                : undefined,
-              scripted_top_title: card.node.scripted_top_title,
-              secondaryButton: card.node.has_secondary_button
-                ? card.node.secondary_button
-                : undefined,
-              sidePeekButton:
-                card.node.has_sidepeek_button &&
-                card.node.sidepeek_button?.call_to_action_text
-                  ? {
-                      title: card.node.sidepeek_button.call_to_action_text,
-                    }
-                  : undefined,
-              system: card.node.system,
-              title: card.node.title,
-            }
+            return transformCardBlock(card.node)
           } else {
             return {
               __typename: card.node.__typename,
@@ -110,13 +111,24 @@ export const cardsGridSchema = z.object({
     }),
 })
 
-const cardBlockRefsSchema = z.object({
+export const cardBlockRefsSchema = z.object({
   __typename: z.literal(CardsGridEnum.cards.Card),
   primary_button: linkConnectionRefsSchema,
   secondary_button: linkConnectionRefsSchema,
   system: systemSchema,
 })
 
+export function transformCardBlockRefs(card: typeof cardBlockRefsSchema._type) {
+  const cards = [card.system]
+  if (card.primary_button) {
+    cards.push(card.primary_button)
+  }
+  if (card.secondary_button) {
+    cards.push(card.secondary_button)
+  }
+  return cards
+}
+
 const loyaltyCardBlockRefsSchema = z.object({
   __typename: z.literal(CardsGridEnum.cards.LoyaltyCard),
   link: linkConnectionRefsSchema,
@@ -141,14 +153,7 @@ export const cardGridRefsSchema = z.object({
       return data.cardConnection.edges
         .map(({ node }) => {
           if (node.__typename === CardsGridEnum.cards.Card) {
-            const cards = [node.system]
-            if (node.primary_button) {
-              cards.push(node.primary_button)
-            }
-            if (node.secondary_button) {
-              cards.push(node.secondary_button)
-            }
-            return cards
+            return transformCardBlockRefs(node)
           } else {
             const loyaltyCards = [node.system]
             if (node.link) {

server/routers/contentstack/schemas/pageLinks.ts

@@ -46,7 +46,7 @@ export const hotelPageSchema = z
   .object({
     __typename: z.literal(ContentEnum.blocks.HotelPage),
   })
-  .merge(extendedPageLinkSchema)
+  .merge(pageLinkSchema)
 
 export const hotelPageRefSchema = z.object({
   __typename: z.literal(ContentEnum.blocks.HotelPage),