fix: validation for header

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 ? (
-              <HeaderLink href={topLink.href}>
+            {topLink.link ? (
+              <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([
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
+  // preloaded
+  const languages = await getLanguageSwitcher()
+  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([
-    getIntl(),
-    serverClient().contentstack.languageSwitcher.get(),
-    serverClient().contentstack.base.header(),
-  ])
+  // cached
+  const intl = await getIntl()
+  // both preloaded
+  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 ? (
-          <HeaderLink className={styles.topLink} href={headerData.topLink.href}>
+        {header.data.topLink.link ? (
+          <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">