From 2c102c62e0c7f8ed92ead77dfd0105751f55718b Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 30 May 2024 14:25:11 +0200
Subject: [PATCH] fix: trpc endpoint for footer data

---
 app/[lang]/(live)/layout.tsx                  |   2 +-
 app/[lang]/(live-current)/layout.tsx          |   2 +-
 app/[lang]/(preview-current)/layout.tsx       |   2 +-
 components/Current/Footer/footer.module.css   |  14 ++-
 components/Current/Footer/index.tsx           |  24 +---
 .../Current/Footer/navigation.module.css      |   1 +
 .../Fragments/Footer/AppDownloads.graphql     |   2 +-
 lib/graphql/Fragments/Footer/Logo.graphql     |   2 +-
 .../Fragments/Footer/Navigation.graphql       |   2 +-
 .../Fragments/Footer/SocialMedia.graphql      |   2 +-
 .../Fragments/Footer/TripAdvisor.graphql      |   2 +-
 .../{Footer.graphql => CurrentFooter.graphql} |   4 +-
 server/routers/contentstack/config/output.ts  | 107 ++++++++++++++++++
 server/routers/contentstack/config/query.ts   |  24 ++++
 types/components/current/footer.ts            |   2 +-
 types/requests/footer.ts                      |  52 ---------
 16 files changed, 154 insertions(+), 90 deletions(-)
 rename lib/graphql/Query/{Footer.graphql => CurrentFooter.graphql} (83%)
 delete mode 100644 types/requests/footer.ts

diff --git a/app/[lang]/(live)/layout.tsx b/app/[lang]/(live)/layout.tsx
index e9628b37a..54e0d41e8 100644
--- a/app/[lang]/(live)/layout.tsx
+++ b/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();
diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx
index f8efd6d25..c2aaacf45 100644
--- a/app/[lang]/(live-current)/layout.tsx
+++ b/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>
diff --git a/app/[lang]/(preview-current)/layout.tsx b/app/[lang]/(preview-current)/layout.tsx
index 4f7f803d0..586e99d17 100644
--- a/app/[lang]/(preview-current)/layout.tsx
+++ b/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>
   )
diff --git a/components/Current/Footer/footer.module.css b/components/Current/Footer/footer.module.css
index b3cd27a27..818b4e94f 100644
--- a/components/Current/Footer/footer.module.css
+++ b/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;
-  line-height: 1.1em;
+  font-size: 22px;
+  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 {
diff --git a/components/Current/Footer/index.tsx b/components/Current/Footer/index.tsx
index 2a73c8493..b70081dcc 100644
--- a/components/Current/Footer/index.tsx
+++ b/components/Current/Footer/index.tsx
@@ -1,7 +1,4 @@
-import Script from "next/script"
-
-import { GetFooter } from "@/lib/graphql/Query/Footer.graphql"
-import { request } from "@/lib/graphql/request"
+import { serverClient } from "@/lib/trpc/server"
 
 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) {
-  const { data } = await request<GetFooterData>(
-    GetFooter,
-    {
-      locale: lang,
-    },
-    {
-      next: { tags: [`footer-${lang}`] },
-    }
-  )
-
-  if (!data.all_footer.items.length) {
-    return null
-  }
-
-  const footerData = data.all_footer.items[0]
+export default async function Footer() {
+  const footerData = await serverClient().contentstack.config.footer()
   return (
     <footer className={styles.container}>
       <div className={styles.content}>
diff --git a/components/Current/Footer/navigation.module.css b/components/Current/Footer/navigation.module.css
index 70cb5dc9c..fddb690e9 100644
--- a/components/Current/Footer/navigation.module.css
+++ b/components/Current/Footer/navigation.module.css
@@ -19,6 +19,7 @@
 }
 
 .linkListTitle {
+  color: #fff;
   font-family:
     Helvetica Neue,
     Roboto,
diff --git a/lib/graphql/Fragments/Footer/AppDownloads.graphql b/lib/graphql/Fragments/Footer/AppDownloads.graphql
index 7846bc905..20b7d112f 100644
--- a/lib/graphql/Fragments/Footer/AppDownloads.graphql
+++ b/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 {
diff --git a/lib/graphql/Fragments/Footer/Logo.graphql b/lib/graphql/Fragments/Footer/Logo.graphql
index d2ce3cbe6..cf18b5923 100644
--- a/lib/graphql/Fragments/Footer/Logo.graphql
+++ b/lib/graphql/Fragments/Footer/Logo.graphql
@@ -1,6 +1,6 @@
 #import "../Image.graphql"
 
-fragment Logo on Footer {
+fragment Logo on CurrentFooter {
   logoConnection {
     edges {
       node {
diff --git a/lib/graphql/Fragments/Footer/Navigation.graphql b/lib/graphql/Fragments/Footer/Navigation.graphql
index 10a425980..1439cf885 100644
--- a/lib/graphql/Fragments/Footer/Navigation.graphql
+++ b/lib/graphql/Fragments/Footer/Navigation.graphql
@@ -1,4 +1,4 @@
-fragment Navigation on Footer {
+fragment Navigation on CurrentFooter {
   navigation {
     links {
       href
diff --git a/lib/graphql/Fragments/Footer/SocialMedia.graphql b/lib/graphql/Fragments/Footer/SocialMedia.graphql
index 0639c613d..55cf49515 100644
--- a/lib/graphql/Fragments/Footer/SocialMedia.graphql
+++ b/lib/graphql/Fragments/Footer/SocialMedia.graphql
@@ -1,4 +1,4 @@
-fragment SocialMedia on Footer {
+fragment SocialMedia on CurrentFooter {
   social_media {
     title
     facebook {
diff --git a/lib/graphql/Fragments/Footer/TripAdvisor.graphql b/lib/graphql/Fragments/Footer/TripAdvisor.graphql
index 62ece39a1..05818e1bd 100644
--- a/lib/graphql/Fragments/Footer/TripAdvisor.graphql
+++ b/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 {
diff --git a/lib/graphql/Query/Footer.graphql b/lib/graphql/Query/CurrentFooter.graphql
similarity index 83%
rename from lib/graphql/Query/Footer.graphql
rename to lib/graphql/Query/CurrentFooter.graphql
index 45b0fa15a..31530b3f4 100644
--- a/lib/graphql/Query/Footer.graphql
+++ b/lib/graphql/Query/CurrentFooter.graphql
@@ -4,8 +4,8 @@
 #import "../Fragments/Footer/SocialMedia.graphql"
 #import "../Fragments/Footer/TripAdvisor.graphql"
 
-query GetFooter($locale: String!) {
-  all_footer(limit: 1, locale: $locale) {
+query GetCurrentFooter($locale: String!) {
+  all_current_footer(limit: 1, locale: $locale) {
     items {
       title
       system {
diff --git a/server/routers/contentstack/config/output.ts b/server/routers/contentstack/config/output.ts
index 08e2c04fb..d15e736e1 100644
--- a/server/routers/contentstack/config/output.ts
+++ b/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
+}
diff --git a/server/routers/contentstack/config/query.ts b/server/routers/contentstack/config/query.ts
index 00a87f019..5ce1c67d9 100644
--- a/server/routers/contentstack/config/query.ts
+++ b/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]
+  }),
 })
diff --git a/types/components/current/footer.ts b/types/components/current/footer.ts
index 1e2e687ad..4758ddfc6 100644
--- a/types/components/current/footer.ts
+++ b/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[]
diff --git a/types/requests/footer.ts b/types/requests/footer.ts
deleted file mode 100644
index e1ee6cf71..000000000
--- a/types/requests/footer.ts
+++ /dev/null
@@ -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>
-}