fix: trpc endpoint for footer data

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

@@ -53,7 +53,7 @@ export default async function RootLayout({
         <TrpcProvider lang={params.lang}>
           <Header lang={params.lang} languageSwitcher={languageSwitcher} />
           {children}
-          <Footer lang={params.lang} />
+          <Footer />
         </TrpcProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();

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

@@ -81,7 +81,7 @@ export default function RootLayout({
         <SkipToMainContent lang={params.lang} />
         <Header lang={params.lang} languageSwitcher={languageSwitcher} />
         {children}
-        <Footer lang={params.lang} />
+        <Footer />
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();
         `}</Script>

app/[lang]/(preview-current)/layout.tsx

@@ -53,7 +53,7 @@ export default function RootLayout({
         <LangPopup lang={params.lang} />
         <SkipToMainContent lang={params.lang} />
         {children}
-        <Footer lang={params.lang} />
+        <Footer />
       </body>
     </html>
   )

components/Current/Footer/footer.module.css

@@ -34,19 +34,19 @@
   text-align: center;
   color: #fff;
   font-family: BrandonText-Bold, Arial, Helvetica, sans-serif;
-  font-size: 1.375rem;
+  font-size: 22px;
-  line-height: 1.1em;
+  line-height: 17.6px;
   text-transform: uppercase;
   font-weight: 400;
   color: #483729;
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
   margin-top: 0;
 }
 
 .hiddenAccessible {
   display: block;
   position: absolute;
-  left: -100000em;
+  left: -100000px;
   top: auto;
   width: 1px;
   height: 1px;
@@ -81,7 +81,7 @@
 }
 
 .contentBottomTitle {
-  margin-bottom: 16px;
+  margin: 16px 0;
   font-weight: 700;
   font-size: 16px;
   line-height: 22.4px;
@@ -109,6 +109,7 @@
 .tableData {
   width: 50px;
   height: 62px;
+  padding: 1px;
 }
 
 .sectionContainer {
@@ -124,7 +125,8 @@
   line-height: normal;
   font-size: 16px;
   font-weight: 700;
-  margin-bottom: 16px;
+  margin: 16px 0;
+  color: #fff;
 }
 
 .socialMediaIconsContainer {

components/Current/Footer/index.tsx

@@ -1,7 +1,4 @@
-import Script from "next/script"
+import { serverClient } from "@/lib/trpc/server"
-
-import { GetFooter } from "@/lib/graphql/Query/Footer.graphql"
-import { request } from "@/lib/graphql/request"
 
 import Image from "@/components/Image"
 
@@ -10,24 +7,9 @@ import Navigation from "./Navigation"
 import styles from "./footer.module.css"
 
 import type { LangParams } from "@/types/params"
-import type { GetFooterData } from "@/types/requests/footer"
 
-export default async function Footer({ lang }: LangParams) {
+export default async function Footer() {
-  const { data } = await request<GetFooterData>(
+  const footerData = await serverClient().contentstack.config.footer()
-    GetFooter,
-    {
-      locale: lang,
-    },
-    {
-      next: { tags: [`footer-${lang}`] },
-    }
-  )
-
-  if (!data.all_footer.items.length) {
-    return null
-  }
-
-  const footerData = data.all_footer.items[0]
   return (
     <footer className={styles.container}>
       <div className={styles.content}>

components/Current/Footer/navigation.module.css

@@ -19,6 +19,7 @@
 }
 
 .linkListTitle {
+  color: #fff;
   font-family:
     Helvetica Neue,
     Roboto,

lib/graphql/Fragments/Footer/AppDownloads.graphql

@@ -1,6 +1,6 @@
 #import "../Image.graphql"
 
-fragment AppDownloads on Footer {
+fragment AppDownloads on CurrentFooter {
   app_downloads {
     title
     app_store {

lib/graphql/Fragments/Footer/Logo.graphql

@@ -1,6 +1,6 @@
 #import "../Image.graphql"
 
-fragment Logo on Footer {
+fragment Logo on CurrentFooter {
   logoConnection {
     edges {
       node {

lib/graphql/Fragments/Footer/Navigation.graphql

@@ -1,4 +1,4 @@
-fragment Navigation on Footer {
+fragment Navigation on CurrentFooter {
   navigation {
     links {
       href

lib/graphql/Fragments/Footer/SocialMedia.graphql

@@ -1,4 +1,4 @@
-fragment SocialMedia on Footer {
+fragment SocialMedia on CurrentFooter {
   social_media {
     title
     facebook {

lib/graphql/Fragments/Footer/TripAdvisor.graphql

@@ -1,6 +1,6 @@
 #import "../Image.graphql"
 
-fragment TripAdvisor on Footer {
+fragment TripAdvisor on CurrentFooter {
   trip_advisor {
     logoConnection {
       edges {

lib/graphql/Query/CurrentFooter.graphql

@@ -4,8 +4,8 @@
 #import "../Fragments/Footer/SocialMedia.graphql"
 #import "../Fragments/Footer/TripAdvisor.graphql"
 
-query GetFooter($locale: String!) {
+query GetCurrentFooter($locale: String!) {
-  all_footer(limit: 1, locale: $locale) {
+  all_current_footer(limit: 1, locale: $locale) {
     items {
       title
       system {

server/routers/contentstack/config/output.ts

@@ -132,4 +132,111 @@ const validateHeaderRefConfigSchema = z.object({
   }),
 })
 
+const validateAppDownload = z.object({
+  href: z.string(),
+  imageConnection: z.object({
+    edges: z.array(
+      z.object({
+        node: z.object({
+          description: z.string().optional().nullable(),
+          dimension: z.object({
+            height: z.number(),
+            width: z.number(),
+          }),
+          metadata: z.any().nullable(),
+          system: z.object({
+            uid: z.string(),
+          }),
+          title: z.string(),
+          url: z.string(),
+        }),
+      })
+    ),
+  }),
+})
+
 export type HeaderRefDataRaw = z.infer<typeof validateHeaderRefConfigSchema>
+
+
+const validateNavigationItem = z.object({
+  links: z.array(z.object({ href: z.string(), title: z.string() })),
+  title: z.string(),
+})
+
+export type NavigationItem = z.infer<typeof validateNavigationItem>
+
+export const validateFooterConfigSchema = z.object({
+  all_current_footer: z.object({
+    items: z.array(
+      z.object({
+        title: z.string(),
+        about: z.object({
+          title: z.string(),
+          text: z.string(),
+        }),
+        app_downloads: z.object({
+          title: z.string(),
+          app_store: validateAppDownload,
+          google_play: validateAppDownload,
+        }),
+        logoConnection: z.object({
+          edges: z.array(
+            z.object({
+              node: z.object({
+                description: z.string().optional().nullable(),
+                dimension: z.object({
+                  height: z.number(),
+                  width: z.number(),
+                }),
+                metadata: z.any().nullable(),
+                system: z.object({
+                  uid: z.string(),
+                }),
+                title: z.string(),
+                url: z.string(),
+              }),
+            })
+          ),
+        }),
+        navigation: z.array(validateNavigationItem),
+        social_media: z.object({
+          title: z.string(),
+          facebook: z.object({ href: z.string(), title: z.string() }),
+          instagram: z.object({ href: z.string(), title: z.string() }),
+          twitter: z.object({ href: z.string(), title: z.string() }),
+        }),
+        trip_advisor: z.object({
+          title: z.string(),
+          logoConnection: z.object({
+            edges: z.array(
+              z.object({
+                node: z.object({
+                  description: z.string().optional().nullable(),
+                  dimension: z.object({
+                    height: z.number(),
+                    width: z.number(),
+                  }),
+                  metadata: z.any().nullable(),
+                  system: z.object({
+                    uid: z.string(),
+                  }),
+                  title: z.string(),
+                  url: z.string(),
+                }),
+              })
+            ),
+          }),
+        }),
+      })
+    ),
+  }),
+})
+
+export type FooterDataRaw = z.infer<typeof validateFooterConfigSchema>
+
+export type FooterData = Omit<
+  FooterDataRaw["all_current_footer"]["items"][0],
+  "logoConnection"
+> & {
+  logo: Image
+}

server/routers/contentstack/config/query.ts

@@ -1,4 +1,5 @@
 import { GetContactConfig } from "@/lib/graphql/Query/ContactConfig.graphql"
+import { GetCurrentFooter } from "@/lib/graphql/Query/CurrentFooter.graphql"
 import {
   GetCurrentHeader,
   GetCurrentHeaderRef,
@@ -11,10 +12,12 @@ import { generateTag } from "@/utils/generateTag"
 
 import {
   type ContactConfigData,
+  FooterDataRaw,
   HeaderData,
   HeaderDataRaw,
   HeaderRefDataRaw,
   validateContactConfigSchema,
+  validateFooterConfigSchema,
   validateHeaderConfigSchema,
 } from "./output"
 
@@ -81,4 +84,25 @@ export const configQueryRouter = router({
       logo,
     } as HeaderData
   }),
+  footer: contentstackProcedure.query(async ({ ctx }) => {
+    const response = await request<FooterDataRaw>(
+      GetCurrentFooter,
+      {
+        locale: ctx.lang,
+      },
+      {
+        next: { tags: [`footer-${ctx.lang}`] },
+      }
+    )
+
+    const validatedFooterConfig = validateFooterConfigSchema.safeParse(
+      response.data
+    )
+
+    if (!validatedFooterConfig.success) {
+      throw internalServerError(validatedFooterConfig.error)
+    }
+
+    return validatedFooterConfig.data.all_current_footer.items[0]
+  }),
 })

types/components/current/footer.ts

@@ -1,4 +1,4 @@
-import type { NavigationItem } from "@/types/requests/footer"
+import { NavigationItem } from "@/server/routers/contentstack/config/output"
 
 export type FooterNavigationProps = {
   linkGroups: NavigationItem[]

types/requests/footer.ts

@@ -1,52 +0,0 @@
-import type { Image } from "../image"
-import type { AllRequestResponse } from "./utils/all"
-import type { EdgesWithTotalCount } from "./utils/edges"
-
-type AppDownload = {
-  href: string
-  imageConnection: EdgesWithTotalCount<Image>
-}
-
-export type Link = {
-  href: string
-  title: string
-}
-
-export type NavigationItem = {
-  links: Link[]
-  title: string
-}
-
-type SocialMedium = {
-  href: string
-  title: string
-}
-
-export type Footer = {
-  title: string
-  about: {
-    title: string
-    text: string
-  }
-  app_downloads: {
-    title: string
-    app_store: AppDownload
-    google_play: AppDownload
-  }
-  logoConnection: EdgesWithTotalCount<Image>
-  navigation: NavigationItem[]
-  social_media: {
-    title: string
-    facebook: SocialMedium
-    instagram: SocialMedium
-    twitter: SocialMedium
-  }
-  trip_advisor: {
-    title: string
-    logoConnection: EdgesWithTotalCount<Image>
-  }
-}
-
-export type GetFooterData = {
-  all_footer: AllRequestResponse<Footer>
-}