feat(SW-186): implemented queries and typings for menu inside header query

components/Current/Header/index.tsx

@@ -20,7 +20,9 @@ export default async function Header({
   const data = await serverClient().contentstack.base.currentHeader({
     lang: getLang(),
   })
+  const newHeaderData = await serverClient().contentstack.base.header()
 
+  console.log({ newHeaderData })
   const user = await serverClient().user.name()
 
   if (!data) {

lib/graphql/Fragments/Header/InternalOrExternalLink.graphql

@@ -0,0 +1,22 @@
+#import "../PageLink/ContentPageLink.graphql"
+#import "../PageLink/LoyaltyPageLink.graphql"
+
+fragment InternalOrExternalLink on InternalOrExternalLink {
+  is_external_link
+  open_in_new_tab
+  external_link {
+    href
+    title
+  }
+  page_link {
+    linkConnection {
+      edges {
+        node {
+          ...ContentPageLink
+          ...LoyaltyPageLink
+        }
+      }
+    }
+    link_title
+  }
+}

lib/graphql/Query/Header.graphql

@@ -1,53 +1,25 @@
 #import "../Fragments/Refs/System.graphql"
 
-#import "../Fragments/PageLink/ContentPageLink.graphql"
-#import "../Fragments/PageLink/LoyaltyPageLink.graphql"
+#import "../Fragments/Header/InternalOrExternalLink.graphql"
 
 query GetHeader($locale: String!) {
   all_header(limit: 1, locale: $locale) {
     items {
       top_link {
-        is_external_link
-        open_in_new_tab
-        page_link {
-          link_title
-          linkConnection {
-            edges {
-              node {
-                ...LoyaltyPageLink
-                ...ContentPageLink
-              }
-            }
-          }
-        }
-        external_link {
-          href
-          title
-        }
+        ...InternalOrExternalLink
       }
-    }
-  }
-}
-
-query GetHeader2($locale: String!) {
-  all_header(limit: 1, locale: $locale) {
-    items {
-      top_link {
-        external_link {
-          href
-          title
+      menu_items {
+        title
+        link {
+          ...InternalOrExternalLink
         }
-        is_external_link
-        open_in_new_tab
-        page_link {
-          link_title
-          linkConnection {
-            edges {
-              node {
-                ...LoyaltyPageLink
-                ...ContentPageLink
-              }
-            }
+        see_all_link {
+          ...InternalOrExternalLink
+        }
+        submenu {
+          title
+          links {
+            ...InternalOrExternalLink
           }
         }
       }

server/routers/contentstack/base/output.ts

@@ -297,11 +297,50 @@ export type InternalExternalLinkData = z.infer<
   typeof internalExternalLinkSchema
 >
 
+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(),
+})
+
+const menuItemSchema = z.object({
+  title: z.string(),
+  link: internalExternalLinkSchema,
+  submenu: z.array(
+    z.object({
+      title: z.string(),
+      links: z.array(internalExternalLinkSchema),
+    })
+  ),
+  see_all_link: internalExternalLinkSchema,
+  // cardConnection: z.array(
+  //   z.object({
+  //     node: z.object({
+  //       title: z.string(),
+  //       heading: z.string(),
+  //       body_text: z.string(),
+  //       background_image: z.any(), // TODO: Any for now, should be Image
+  //       has_primary_button: z.boolean(),
+  //       has_secondary_button: z.boolean(),
+  //       scripted_top_title: z.string(),
+  //       primary_button: cardButtonSchema,
+  //       secondary_button: cardButtonSchema,
+  //     }),
+  //   })
+  // ),
+})
+
 export const validateHeaderSchema = z.object({
   all_header: z.object({
     items: z.array(
       z.object({
         top_link: internalExternalLinkSchema.optional(),
+        menu_items: z.array(menuItemSchema),
       })
     ),
   }),
@@ -316,11 +355,24 @@ export type InternalExternalLink = {
   openInNewTab: boolean
 }
 
+export type SubmenuItem = {
+  title: string
+  links: InternalExternalLink[]
+}
+
+export type MenuItem = {
+  title: string
+  link: InternalExternalLink | null
+  seeAllLink: InternalExternalLink | null
+  submenu: SubmenuItem[]
+}
+
 export type HeaderData = Omit<
   HeaderDataRaw["all_header"]["items"][0],
-  "top_link"
+  "top_link" | "menu_items"
 > & {
   topLink: InternalExternalLink | null
+  menuItems: MenuItem[]
 }
 
 const validateHeaderRefSchema = z.object({

server/routers/contentstack/base/query.ts

@@ -27,6 +27,9 @@ import {
   HeaderData,
   HeaderDataRaw,
   HeaderRefDataRaw,
+  InternalExternalLink,
+  MenuItem,
+  SubmenuItem,
   validateContactConfigSchema,
   validateCurrentHeaderConfigSchema,
   validateFooterConfigSchema,
@@ -235,10 +238,38 @@ export const baseQueryRouter = router({
 
     const data = validatedHeaderConfig.data.all_header.items[0]
     const topLink = makeLinkObjectFromInternalExternalLink(data.top_link)
+    const menuItems: MenuItem[] = data.menu_items.map((menuItem) => {
+      let link = null
+      let seeAllLink = null
+      let submenu: SubmenuItem[] = []
 
-    const headerData: HeaderData = { topLink }
+      if (!menuItem.submenu.length) {
+        link = !menuItem.submenu.length
+          ? makeLinkObjectFromInternalExternalLink(menuItem.link)
+          : null
+        seeAllLink = makeLinkObjectFromInternalExternalLink(
+          menuItem.see_all_link
+        )
+      } else {
+        submenu = menuItem.submenu.map(({ title, links }) => ({
+          title: title,
+          links: links.map(
+            (link) =>
+              makeLinkObjectFromInternalExternalLink(
+                link
+              ) as InternalExternalLink
+          ),
+        }))
+      }
+      return {
+        title: menuItem.title,
+        link,
+        seeAllLink,
+        submenu,
+      }
+    })
 
-    console.log({ headerData })
+    const headerData: HeaderData = { topLink, menuItems }
 
     return headerData
   }),

server/routers/contentstack/base/utils.ts

@@ -14,12 +14,13 @@ export function makeLinkObjectFromInternalExternalLink(
   const isExternalLink = data.is_external_link && data.external_link.href
   const isOriginalLink = linkConnectionNode?.web?.original_url
   const externalLink = data.external_link
-  const href = isExternalLink
-    ? externalLink.href
-    : linkConnectionNode?.web?.original_url ||
-      removeMultipleSlashes(
-        `/${linkConnectionNode.system.locale}/${linkConnectionNode.url}`
-      )
+  const href =
+    isExternalLink || !linkConnectionNode
+      ? externalLink.href
+      : linkConnectionNode.web?.original_url ||
+        removeMultipleSlashes(
+          `/${linkConnectionNode.system.locale}/${linkConnectionNode.url}`
+        )
   const title = isExternalLink ? externalLink.title : data.page_link.link_title
 
   return {