fix: validation for header

app/[lang]/(live)/@footer/[...paths]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../page"

app/[lang]/(live)/@footer/[contentType]/[uid]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../page"

app/[lang]/(live)/@footer/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page"

app/[lang]/(live)/@footer/loading.tsx

@@ -0,0 +1,11 @@
+import { env } from "@/env/server"
+
+import CurrentLoadingSpinner from "@/components/Current/LoadingSpinner"
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+export default function LoadingFooter() {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return <CurrentLoadingSpinner />
+  }
+  return <LoadingSpinner />
+}

app/[lang]/(live)/@footer/my-pages/[...path]/page.tsx

@@ -0,0 +1 @@
+export { default } from "../../page"

app/[lang]/(live)/@footer/page.tsx

@@ -0,0 +1,19 @@
+import { env } from "@/env/server"
+
+import CurrentFooter from "@/components/Current/Footer"
+import Footer, { preload } from "@/components/Footer"
+import { setLang } from "@/i18n/serverContext"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default function FooterSlot({ params }: PageArgs<LangParams>) {
+  setLang(params.lang)
+
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return <CurrentFooter />
+  }
+
+  preload()
+
+  return <Footer />
+}

app/[lang]/(live)/layout.tsx

@@ -2,17 +2,13 @@ import "@/app/globals.css"
 import "@scandic-hotels/design-system/style.css"
 
 import Script from "next/script"
-import { Suspense } from "react"
 
 import { env } from "@/env/server"
 import TrpcProvider from "@/lib/trpc/Provider"
 
 import TokenRefresher from "@/components/Auth/TokenRefresher"
 import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
-import CurrentFooter from "@/components/Current/Footer"
 import VwoScript from "@/components/Current/VwoScript"
-import Footer from "@/components/Footer"
-import LoadingSpinner from "@/components/LoadingSpinner"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import { preloadUserTracking } from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
@@ -22,14 +18,16 @@ import { setLang } from "@/i18n/serverContext"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function RootLayout({
-  children,
-  params,
-  header,
   bookingwidget,
+  children,
+  footer,
+  header,
+  params,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams> & {
-    header: React.ReactNode
     bookingwidget: React.ReactNode
+    footer: React.ReactNode
+    header: React.ReactNode
   }
 >) {
   setLang(params.lang)
@@ -60,10 +58,8 @@ export default async function RootLayout({
             {header}
             {!env.HIDE_FOR_NEXT_RELEASE && <>{bookingwidget}</>}
             {children}
+            {footer}
             <ToastHandler />
-            <Suspense fallback={<LoadingSpinner />}>
-              {env.HIDE_FOR_NEXT_RELEASE ? <CurrentFooter /> : <Footer />}
-            </Suspense>
             <TokenRefresher />
           </TrpcProvider>
         </ServerIntlProvider>

components/Current/Header/index.tsx

@@ -1,5 +1,6 @@
 import { homeHrefs } from "@/constants/homeHrefs"
 import { env } from "@/env/server"
+import { getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
@@ -18,7 +19,7 @@ export default async function Header() {
       lang: getLang(),
     }),
     serverClient().user.name(),
-    serverClient().contentstack.languageSwitcher.get(),
+    getLanguageSwitcher(),
     serverClient().contentstack.myPages.navigation.get(),
   ])
 

components/Footer/Details/index.tsx

@@ -1,3 +1,5 @@
+import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
+
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
@@ -8,7 +10,6 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./details.module.css"
 
-import type { FooterDetailsProps } from "@/types/components/footer/navigation"
 import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
 import { IconName } from "@/types/components/icon"
 
@@ -17,13 +18,12 @@ function SocialIcon({ iconName }: SocialIconsProps) {
   return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
 }
 
-export default async function FooterDetails({
+export default async function FooterDetails() {
-  socialMedia,
-  tertiaryLinks,
-  languageUrls,
-}: FooterDetailsProps) {
   const lang = getLang()
   const { formatMessage } = await getIntl()
+  // preloaded
+  const footer = await getFooter()
+  const languages = await getLanguageSwitcher()
   const currentYear = new Date().getFullYear()
 
   return (
@@ -42,7 +42,7 @@ export default async function FooterDetails({
           />
         </Link>
         <nav className={styles.socialNav}>
-          {socialMedia?.links.map(
+          {footer?.socialMedia.links.map(
             (link) =>
               link.href && (
                 <a
@@ -68,7 +68,7 @@ export default async function FooterDetails({
         </div>
         <div className={styles.navigationContainer}>
           <nav className={styles.navigation}>
-            {tertiaryLinks?.map(
+            {footer?.tertiaryLinks.map(
               (link) =>
                 link.url && (
                   <Footnote asChild textTransform="uppercase" key={link.title}>
@@ -84,9 +84,9 @@ export default async function FooterDetails({
                 )
             )}
           </nav>
-          {languageUrls && (
+          {languages?.urls ? (
-            <LanguageSwitcher type="footer" urls={languageUrls} />
+            <LanguageSwitcher type="footer" urls={languages.urls} />
-          )}
+          ) : null}
         </div>
       </div>
     </section>

components/Footer/Navigation/index.tsx

@@ -1,22 +1,22 @@
+import { getFooter } from "@/lib/trpc/memoizedRequests"
+
 import FooterMainNav from "./MainNav"
 import FooterSecondaryNav from "./SecondaryNav"
 
 import styles from "./navigation.module.css"
 
-import type { FooterNavigationProps } from "@/types/components/footer/navigation"
+export default async function FooterNavigation() {
-
+  const footer = await getFooter()
-export default function FooterNavigation({
+  if (!footer) {
-  mainLinks,
+    return null
-  secondaryLinks,
+  }
-  appDownloads,
-}: FooterNavigationProps) {
   return (
     <section className={styles.section}>
       <div className={styles.maxWidth}>
-        <FooterMainNav mainLinks={mainLinks} />
+        <FooterMainNav mainLinks={footer.mainLinks} />
         <FooterSecondaryNav
-          secondaryLinks={secondaryLinks}
+          secondaryLinks={footer.secondaryLinks}
-          appDownloads={appDownloads}
+          appDownloads={footer.appDownloads}
         />
       </div>
     </section>

components/Footer/index.tsx

@@ -1,27 +1,18 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import FooterDetails from "./Details"
 import FooterNavigation from "./Navigation"
 
-export default async function Footer() {
+export function preload() {
-  const footerData = await serverClient().contentstack.base.footer()
+  void getFooter()
-  const languages = await serverClient().contentstack.languageSwitcher.get()
+  void getLanguageSwitcher()
+}
 
-  if (!footerData || !languages) {
+export default function Footer() {
-    return <FooterDetails />
-  }
   return (
     <footer>
-      <FooterNavigation
+      <FooterNavigation />
-        mainLinks={footerData.mainLinks}
+      <FooterDetails />
-        secondaryLinks={footerData.secondaryLinks}
-        appDownloads={footerData.appDownloads}
-      />
-      <FooterDetails
-        socialMedia={footerData.socialMedia}
-        tertiaryLinks={footerData.tertiaryLinks}
-        languageUrls={languages.urls}
-      />
     </footer>
   )
 }

components/Header/MainMenu/MobileMenu/index.tsx

@@ -71,8 +71,8 @@ export default function MobileMenu({
               <SearchIcon width={20} height={20} color="burgundy" />
               {intl.formatMessage({ id: "Find booking" })}
             </HeaderLink>
-            {topLink ? (
+            {topLink.link ? (
-              <HeaderLink href={topLink.href}>
+              <HeaderLink href={topLink.link.url}>
                 <GiftIcon width={20} height={20} color="burgundy" />
                 {topLink.title}
               </HeaderLink>

components/Header/MainMenu/MobileMenuWrapper/index.tsx

@@ -1,21 +1,20 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import MobileMenu from "../MobileMenu"
 
 export default async function MobileMenuWrapper({
   children,
 }: React.PropsWithChildren) {
-  const [languages, headerData] = await Promise.all([
+  // preloaded
-    serverClient().contentstack.languageSwitcher.get(),
+  const languages = await getLanguageSwitcher()
-    serverClient().contentstack.base.header(),
+  const header = await getHeader()
-  ])
 
-  if (!languages || !headerData) {
+  if (!languages || !header) {
     return null
   }
 
   return (
-    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink}>
+    <MobileMenu languageUrls={languages.urls} topLink={header.data.topLink}>
       {children}
     </MobileMenu>
   )

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -12,7 +12,7 @@ import styles from "./navigationMenuItem.module.css"
 import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
 export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
-  const { submenu, title, link, seeAllLink, card } = item
+  const { submenu, title, link } = item
   const [isExpanded, setIsExpanded] = useState(false) // TODO: Use store to manage this state when adding the menu itself.
 
   function handleButtonClick() {
@@ -36,9 +36,9 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     </MainMenuButton>
   ) : (
     <Link
-      href={link!.href}
-      color="burgundy"
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
+      color="burgundy"
+      href={link!.url}
     >
       {title}
     </Link>

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getHeader } from "@/lib/trpc/memoizedRequests"
 
 import NavigationMenuList from "./NavigationMenuList"
 
@@ -7,9 +7,13 @@ import type { NavigationMenuProps } from "@/types/components/header/navigationMe
 export default async function NavigationMenu({
   isMobile,
 }: NavigationMenuProps) {
-  const headerData = await serverClient().contentstack.base.header()
+  const header = await getHeader()
 
-  const filteredItems = headerData?.menuItems.filter(
+  if (!header) {
+    return null
+  }
+
+  const filteredItems = header.data.menuItems.filter(
     ({ link, submenu }) => submenu.length || link
   )
 

components/Header/TopMenu/index.tsx

@@ -1,4 +1,4 @@
-import { serverClient } from "@/lib/trpc/server"
+import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
@@ -9,23 +9,26 @@ import HeaderLink from "../HeaderLink"
 import styles from "./topMenu.module.css"
 
 export default async function TopMenu() {
-  const [intl, languages, headerData] = await Promise.all([
+  // cached
-    getIntl(),
+  const intl = await getIntl()
-    serverClient().contentstack.languageSwitcher.get(),
+  // both preloaded
-    serverClient().contentstack.base.header(),
+  const languages = await getLanguageSwitcher()
-  ])
+  const header = await getHeader()
 
-  if (!languages || !headerData) {
+  if (!languages || !header) {
     return null
   }
 
   return (
     <div className={styles.topMenu}>
       <div className={styles.content}>
-        {headerData.topLink ? (
+        {header.data.topLink.link ? (
-          <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
+          <HeaderLink
+            className={styles.topLink}
+            href={header.data.topLink.link.url}
+          >
             <GiftIcon width={20} height={20} color="burgundy" />
-            {headerData.topLink.title}
+            {header.data.topLink.title}
           </HeaderLink>
         ) : null}
         <div className={styles.options}>

components/Header/index.tsx

@@ -1,11 +1,15 @@
 import { Suspense } from "react"
 
+import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
+
 import MainMenu from "./MainMenu"
 import TopMenu from "./TopMenu"
 
 import styles from "./header.module.css"
 
 export default function Header() {
+  void getHeader()
+  void getLanguageSwitcher()
   return (
     <header className={styles.header}>
       <Suspense fallback="Loading top menu">

lib/graphql/Fragments/Blocks/Refs/Card.graphql

@@ -1,12 +1,16 @@
+#import "../../AccountPage/Ref.graphql"
+#import "../../ContentPage/Ref.graphql"
+#import "../../LoyaltyPage/Ref.graphql"
+
 fragment CardBlockRef on Card {
   secondary_button {
     linkConnection {
       edges {
         node {
           __typename
-          ...LoyaltyPageRef
-          ...ContentPageRef
           ...AccountPageRef
+          ...ContentPageRef
+          ...LoyaltyPageRef
         }
       }
     }
@@ -16,9 +20,9 @@ fragment CardBlockRef on Card {
       edges {
         node {
           __typename
-          ...LoyaltyPageRef
-          ...ContentPageRef
           ...AccountPageRef
+          ...ContentPageRef
+          ...LoyaltyPageRef
         }
       }
     }

lib/graphql/Query/Header.graphql

@@ -1,13 +1,11 @@
 #import "../Fragments/System.graphql"
 
-#import "../Fragments/PageLink/AccountPageLink.graphql"
 #import "../Fragments/PageLink/ContentPageLink.graphql"
 #import "../Fragments/PageLink/HotelPageLink.graphql"
 #import "../Fragments/PageLink/LoyaltyPageLink.graphql"
 #import "../Fragments/Blocks/Card.graphql"
 
 #import "../Fragments/Blocks/Refs/Card.graphql"
-#import "../Fragments/AccountPage/Ref.graphql"
 #import "../Fragments/ContentPage/Ref.graphql"
 #import "../Fragments/HotelPage/Ref.graphql"
 #import "../Fragments/LoyaltyPage/Ref.graphql"
@@ -20,6 +18,7 @@ query GetHeader($locale: String!) {
         linkConnection {
           edges {
             node {
+              __typename
               ...ContentPageLink
               ...HotelPageLink
               ...LoyaltyPageLink
@@ -32,6 +31,7 @@ query GetHeader($locale: String!) {
         linkConnection {
           edges {
             node {
+              __typename
               ...ContentPageLink
               ...HotelPageLink
               ...LoyaltyPageLink
@@ -43,6 +43,7 @@ query GetHeader($locale: String!) {
           linkConnection {
             edges {
               node {
+                __typename
                 ...ContentPageLink
                 ...HotelPageLink
                 ...LoyaltyPageLink
@@ -57,6 +58,7 @@ query GetHeader($locale: String!) {
             linkConnection {
               edges {
                 node {
+                  __typename
                   ...ContentPageLink
                   ...HotelPageLink
                   ...LoyaltyPageLink
@@ -68,6 +70,7 @@ query GetHeader($locale: String!) {
         cardConnection {
           edges {
             node {
+              __typename
               ...CardBlock
             }
           }
@@ -84,6 +87,7 @@ query GetHeaderRef($locale: String!) {
         linkConnection {
           edges {
             node {
+              __typename
               ...ContentPageRef
               ...HotelPageRef
               ...LoyaltyPageRef
@@ -95,6 +99,7 @@ query GetHeaderRef($locale: String!) {
         linkConnection {
           edges {
             node {
+              __typename
               ...ContentPageRef
               ...HotelPageRef
               ...LoyaltyPageRef
@@ -105,6 +110,7 @@ query GetHeaderRef($locale: String!) {
           linkConnection {
             edges {
               node {
+                __typename
                 ...ContentPageRef
                 ...HotelPageRef
                 ...LoyaltyPageRef
@@ -117,6 +123,7 @@ query GetHeaderRef($locale: String!) {
             linkConnection {
               edges {
                 node {
+                  __typename
                   ...ContentPageRef
                   ...HotelPageRef
                   ...LoyaltyPageRef
@@ -128,6 +135,7 @@ query GetHeaderRef($locale: String!) {
         cardConnection {
           edges {
             node {
+              __typename
               ...CardBlockRef
             }
           }

lib/trpc/memoizedRequests/index.ts

@@ -9,3 +9,17 @@ export const getLocations = cache(async function getMemoizedLocations() {
 export const getProfile = cache(async function getMemoizedProfile() {
   return serverClient().user.get()
 })
+
+export const getFooter = cache(async function getMemoizedFooter() {
+  return serverClient().contentstack.base.footer()
+})
+
+export const getHeader = cache(async function getMemoizedHeader() {
+  return serverClient().contentstack.base.header()
+})
+
+export const getLanguageSwitcher = cache(
+  async function getMemoizedLanguageSwitcher() {
+    return serverClient().contentstack.languageSwitcher.get()
+  }
+)

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
+    linkConnection: z.object({
-      .array(
+      edges: z.array(
         z.object({
-          node: z.object({
+          node: linkRefsUnionSchema,
-            system: systemSchema,
-            url: z.string(),
-            title: z.string(),
-            web: z.object({
-              original_url: z.string(),
-            }),
-          }),
-        })
-      )
-      .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,
-    }
-  })
-
-const cardConnectionSchema = z
-  .object({
-    edges: 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(),
-          }),
-        })
-      )
-      .max(1),
-  })
-  .transform((data) => {
-    const node = data.edges[0]?.node
-    if (!node) {
-      return null
-    }
-
-    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,
-    }
-  })
-
-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
-  .object({
-    all_header: z.object({
-      items: z
-        .array(
-          z.object({
-            top_link: linkWithTitleSchema,
-            menu_items: z.array(menuItemSchema),
-          })
-        )
-        .length(1),
     }),
   })
   .transform((data) => {
-    const { top_link, menu_items } = data.all_header.items[0]
+    if (data.linkConnection.edges.length) {
-
+      const link = pageLinks.transformRef(data.linkConnection.edges[0].node)
+      if (link) {
         return {
-      topLink: top_link,
+          link,
-      menuItems: menu_items,
         }
+      }
+    }
+    return { link: null }
   })
 
-const linkConnectionRefs = z.object({
+const menuItemsRefsSchema = z.intersection(
-  edges: z
+  linkRefsSchema,
-    .array(
+  z
-      z.object({
-        node: z.object({
-          system: systemSchema,
-        }),
-      })
-    )
-    .max(1),
-})
-
-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(
-        z.object({
-          top_link: z
-            .object({
-              linkConnection: linkConnectionRefs,
-            })
-            .nullable(),
-          menu_items: z.array(
-            z.object({
-              linkConnection: linkConnectionRefs,
-              see_all_link: z.object({
-                linkConnection: linkConnectionRefs,
-              }),
       cardConnection: z.object({
-                edges: z
+        edges: z.array(
+          z.object({
+            node: cardBlockRefsSchema,
+          })
+        ),
+      }),
+      see_all_link: linkRefsSchema,
+      submenu: z.array(
+        z.object({
+          links: z.array(linkRefsSchema),
+        })
+      ),
+    })
+    .transform((data) => {
+      let card = null
+      if (data.cardConnection.edges.length) {
+        card = transformCardBlockRefs(data.cardConnection.edges[0].node)
+      }
+
+      return {
+        card,
+        see_all_link: data.see_all_link,
+        submenu: data.submenu,
+      }
+    })
+)
+
+export const headerRefsSchema = z
+  .object({
+    all_header: z.object({
+      items: z
         .array(
           z.object({
-                      node: cardConnectionRefs,
+            menu_items: z.array(menuItemsRefsSchema),
+            system: systemSchema,
+            top_link: linkRefsSchema,
           })
         )
         .max(1),
     }),
+  })
+  .transform((data) => {
+    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 {
+      header: data.all_header.items[0],
+    }
+  })
+
+const linkUnionSchema = z.discriminatedUnion("__typename", [
+  pageLinks.contentPageSchema,
+  pageLinks.hotelPageSchema,
+  pageLinks.loyaltyPageSchema,
+])
+
+const linkSchema = z
+  .object({
+    linkConnection: z.object({
+      edges: z.array(
+        z.object({
+          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({
+              node: cardBlockSchema,
+            })
+          ),
+        }),
+        see_all_link: linkAndTitleSchema,
         submenu: z.array(
           z.object({
-                  links: z.array(
+            links: z.array(linkAndTitleSchema),
-                    z.object({ linkConnection: linkConnectionRefs })
+            title: z.string().optional().default(""),
-                  ),
           })
         ),
       })
-          ),
+      .transform((data) => {
-          system: systemSchema,
+        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,
+        }
       })
   )
-      .length(1),
+  .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 {
+import { GetFooter, GetFooterRef } from "@/lib/graphql/Query/Footer.graphql"
-  GetFooter,
+import { GetHeader, GetHeaderRef } from "@/lib/graphql/Query/Header.graphql"
-  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,
+  type GetCurrentHeaderData,
-  getHeaderSchema,
+  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),
+      generateTagsFromSystem(lang, connections),
-      generateTag(
+      generateTag(lang, validatedHeaderRefs.data.header.system.uid),
-        lang,
-        validatedHeaderRefs.data.all_header.items[0].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) {
+export function getConnections({ header }: HeaderRefs) {
-  const connections: Edges<NodeRefs>[] = []
+  const connections: System["system"][] = [header.system]
-  const headerData = refs.all_header.items[0]
+
-  const topLink = headerData.top_link
+  if (header.top_link?.link) {
-  if (topLink) {
+    connections.push(header.top_link.link)
-    connections.push(topLink.linkConnection)
   }
 
-  headerData.menu_items.forEach(
+  if (header.menu_items.length) {
-    ({ linkConnection, see_all_link, cardConnection, submenu }) => {
+    header.menu_items.forEach((menuItem) => {
-      const card = cardConnection.edges[0]?.node
+      if (menuItem.card) {
-      connections.push(linkConnection)
+        connections.push(...menuItem.card)
-
-      if (see_all_link) {
-        connections.push(see_all_link.linkConnection)
       }
-
+      if (menuItem.link) {
-      if (card) {
+        connections.push(menuItem.link)
-        if (card.primary_button) {
-          connections.push(card.primary_button.linkConnection)
       }
-        if (card.secondary_button) {
+      if (menuItem.see_all_link?.link) {
-          connections.push(card.secondary_button.linkConnection)
+        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)
+              }
+            })
+          }
+        })
       }
-
-      submenu.forEach(({ links }) => {
-        links.forEach(({ linkConnection }) => {
-          connections.push(linkConnection)
-        })
     })
   }
-  )
 
   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 {
+            return transformCardBlock(card.node)
-              __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,
-            }
           } 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]
+            return transformCardBlockRefs(node)
-            if (node.primary_button) {
-              cards.push(node.primary_button)
-            }
-            if (node.secondary_button) {
-              cards.push(node.secondary_button)
-            }
-            return cards
           } 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),

types/components/footer/navigation.ts

@@ -1,41 +1,19 @@
-import { z } from "zod"
+import type {
-
+  FooterLink,
-import {
+  FooterLinkWithType,
-  validateLinkItem,
+  FooterSecondaryNavGroup,
-  validateLinksWithType,
+} from "@/types/trpc/routers/contentstack/footer"
-  validateSecondaryLinks,
-} from "@/server/routers/contentstack/base/output"
-
-import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
-
-export type FooterLink = z.output<typeof validateLinkItem>
 
 export type FooterMainNavProps = {
   mainLinks: FooterLink[]
 }
 
-type FooterSecondaryNavGroup = z.output<typeof validateSecondaryLinks>
-
-type FooterLinkWithType = z.output<typeof validateLinksWithType>
-
 type FooterAppDownloads = {
   title: string
   links: FooterLinkWithType
 }
 
-type FooterSocialMedia = {
-  links: FooterLinkWithType
-}
-
 export type FooterSecondaryNavProps = {
   secondaryLinks: FooterSecondaryNavGroup
   appDownloads: FooterAppDownloads
 }
-
-export type FooterDetailsProps = {
-  socialMedia?: FooterSocialMedia
-  tertiaryLinks?: FooterLink[]
-  languageUrls?: LanguageSwitcherData
-}
-
-export type FooterNavigationProps = FooterMainNavProps & FooterSecondaryNavProps

types/components/header/mobileMenu.ts

@@ -1,7 +1,7 @@
-import type { Header, MenuItem } from "@/types/header"
 import type { LanguageSwitcherData } from "@/types/requests/languageSwitcher"
+import type { Header } from "@/types/trpc/routers/contentstack/header"
 
 export interface MobileMenuProps {
   languageUrls: LanguageSwitcherData
-  topLink: Header["topLink"]
+  topLink: Header["header"]["topLink"]
 }

types/components/header/navigationMenuItem.ts

@@ -1,4 +1,4 @@
-import type { MenuItem } from "@/types/header"
+import type { MenuItem } from "@/types/trpc/routers/contentstack/header"
 
 export interface NavigationMenuItemProps {
   item: MenuItem

types/components/header/navigationMenuList.ts

@@ -1,4 +1,4 @@
-import type { MenuItem } from "@/types/header"
+import type { MenuItem } from "@/types/trpc/routers/contentstack/header"
 
 export interface NavigationMenuListProps {
   isMobile: boolean

types/header.ts

@@ -1,12 +0,0 @@
-import { z } from "zod"
-
-import {
-  getHeaderRefSchema,
-  getHeaderSchema,
-  menuItemSchema,
-} from "@/server/routers/contentstack/base/output"
-
-export type HeaderRefResponse = z.input<typeof getHeaderRefSchema>
-export type HeaderResponse = z.input<typeof getHeaderSchema>
-export type Header = z.output<typeof getHeaderSchema>
-export type MenuItem = z.output<typeof menuItemSchema>

types/trpc/routers/contentstack/footer.ts

@@ -0,0 +1,11 @@
+import { z } from "zod"
+
+import {
+  validateLinkItem,
+  validateLinksWithType,
+  validateSecondaryLinks,
+} from "@/server/routers/contentstack/base/output"
+
+export type FooterLink = z.output<typeof validateLinkItem>
+export type FooterSecondaryNavGroup = z.output<typeof validateSecondaryLinks>
+export type FooterLinkWithType = z.output<typeof validateLinksWithType>

types/trpc/routers/contentstack/header.ts

@@ -0,0 +1,15 @@
+import { z } from "zod"
+
+import {
+  headerRefsSchema,
+  headerSchema,
+  menuItemSchema,
+} from "@/server/routers/contentstack/base/output"
+
+export type GetHeaderRefs = z.input<typeof headerRefsSchema>
+export type HeaderRefs = NonNullable<z.output<typeof headerRefsSchema>>
+
+export type GetHeader = z.input<typeof headerSchema>
+export type Header = z.output<typeof headerSchema>
+
+export type MenuItem = z.output<typeof menuItemSchema>