feat(SW-187): Added tertiary links data

components/Footer/Details/index.tsx

@@ -21,11 +21,12 @@ function SocialIcon({ iconName }: SocialIconsProps) {
 
 export default async function FooterDetails({
   socialMedia,
+  tertiaryLinks,
 }: FooterDetailsProps) {
   const lang = getLang()
   const { formatMessage } = await getIntl()
   const currentYear = new Date().getFullYear()
-  const { tertiaryLinks, languageSwitcher } = footer
+  const { languageSwitcher } = footer
   return (
     <section className={styles.details}>
       <div className={styles.topContainer}>
@@ -68,18 +69,21 @@ export default async function FooterDetails({
         </div>
         <div className={styles.navigationContainer}>
           <nav className={styles.navigation}>
-            {tertiaryLinks.map((link) => (
+            {tertiaryLinks?.map(
-              <Footnote asChild textTransform="uppercase" key={link.id}>
+              (link) =>
-                <Link
+                link.url && (
-                  className={styles.link}
+                  <Footnote asChild textTransform="uppercase" key={link.title}>
-                  color="peach50"
+                    <Link
-                  href={link.href}
+                      className={styles.link}
-                  target="_blank"
+                      color="peach50"
-                >
+                      href={link.url}
-                  {link.title}
+                      target="_blank"
-                </Link>
+                    >
-              </Footnote>
+                      {link.title}
-            ))}
+                    </Link>
+                  </Footnote>
+                )
+            )}
           </nav>
           <LanguageSwitcher type="desktopFooter" urls={languageSwitcher.urls} />
         </div>

components/Footer/index.tsx

@@ -19,7 +19,10 @@ export default async function Footer() {
         secondaryLinks={footerData.secondaryLinks}
         appDownloads={footerData.appDownloads}
       />
-      <FooterDetails socialMedia={footerData.socialMedia} />
+      <FooterDetails
+        socialMedia={footerData.socialMedia}
+        tertiaryLinks={footerData.tertiaryLinks}
+      />
     </footer>
   )
 }

lib/graphql/Fragments/Footer/Refs/TertiaryLinks.graphql

@@ -0,0 +1,22 @@
+#import "../../Refs/LoyaltyPage/LoyaltyPage.graphql"
+#import "../../Refs/MyPages/AccountPage.graphql"
+#import "../../Refs/ContentPage/ContentPage.graphql"
+
+fragment TertiaryLinksRef on Footer {
+  __typename
+  tertiary_links {
+    pageConnection {
+      edges {
+        node {
+          __typename
+          ...LoyaltyPageRef
+          ...ContentPageRef
+          ...AccountPageRef
+        }
+      }
+    }
+  }
+  system {
+    ...System
+  }
+}

lib/graphql/Fragments/Footer/TertiaryLinks.graphql

@@ -0,0 +1,28 @@
+fragment TertiaryLinks on Footer {
+  tertiary_links {
+    open_in_new_tab
+    link {
+      href
+      title
+    }
+    pageConnection {
+      edges {
+        node {
+          __typename
+          ... on AccountPage {
+            title
+            url
+          }
+          ... on LoyaltyPage {
+            title
+            url
+          }
+          ... on ContentPage {
+            title
+            url
+          }
+        }
+      }
+    }
+  }
+}

lib/graphql/Query/Footer.graphql

@@ -2,8 +2,10 @@
 #import "../Fragments/Footer/MainLinks.graphql"
 #import "../Fragments/Footer/SecondaryLinks.graphql"
 #import "../Fragments/Footer/SocialMedia.graphql"
+#import "../Fragments/Footer/TertiaryLinks.graphql"
 #import "../Fragments/Footer/Refs/MainLinks.graphql"
 #import "../Fragments/Footer/Refs/SecondaryLinks.graphql"
+#import "../Fragments/Footer/Refs/TertiaryLinks.graphql"
 #import "../Fragments/Refs/System.graphql"
 
 query GetFooter($locale: String!) {
@@ -13,6 +15,7 @@ query GetFooter($locale: String!) {
       ...SecondaryLinks
       ...AppDownloads
       ...SocialMedia
+      ...TertiaryLinks
     }
   }
 }
@@ -22,6 +25,7 @@ query GetFooterRef($locale: String!) {
     items {
       ...MainLinksRef
       ...SecondaryLinksRef
+      ...TertiaryLinksRef
       system {
         ...System
       }

server/routers/contentstack/base/output.ts

@@ -327,6 +327,7 @@ export const validateFooterConfigSchema = z.object({
             })
           ),
         }),
+        tertiary_links: z.array(validateLinkItem),
       })
     ),
   }),
@@ -367,6 +368,11 @@ const validateFooterRefConfigSchema = z.object({
             ),
           })
         ),
+        tertiary_links: z.array(
+          z.object({
+            pageConnection: pageConnectionRefs,
+          })
+        ),
         system: z.object({
           content_type_uid: z.string(),
           uid: z.string(),

server/routers/contentstack/base/query.ts

@@ -510,7 +510,7 @@ export const baseQueryRouter = router({
           },
         }
       )
-      console.log("responseRef", responseRef)
+
       // There's currently no error handling/validation for the responseRef, should it be added?
       getFooterCounter.add(1, { lang: input.lang })
       console.info(
@@ -590,9 +590,10 @@ export const baseQueryRouter = router({
         })
       )
 
-      console.log(
+      console.log("secondaryLinks", JSON.stringify(secondaryLinks))
-        "secondaryLinks data",
+
-        JSON.stringify(secondaryLinks, null, 4)
+      const tertiaryLinks = transformPageConnectionLinks(
+        validatedFooterData.tertiary_links
       )
 
       return {
@@ -600,6 +601,7 @@ export const baseQueryRouter = router({
         appDownloads: validatedFooterData.app_downloads,
         secondaryLinks: secondaryLinks,
         socialMedia: validatedFooterData.social_media,
+        tertiaryLinks: tertiaryLinks,
       }
     }),
 })

server/routers/contentstack/base/utils.ts

@@ -41,7 +41,6 @@ export function getConnections(refs: HeaderRefResponse) {
 }
 
 export function transformPageConnectionLinks(links: FooterLinkItem[]) {
-  console.log("linksdata", links[0].pageConnection?.edges)
   if (!links) return []
   return links.flatMap((link) => {
     if (link.pageConnection?.edges.length) {

types/components/footer/navigation.ts

@@ -14,9 +14,13 @@ export type FooterSecondaryNav = {
   title: string
   url: string
 }
+export type FooterMainNavProps = {
+  mainLinks: FooterLink[]
+}
+
 type FooterSecondaryNavGroup = {
   title: string
-  links: FooterSecondaryNav[]
+  links: FooterLink[]
 }
 type FooterLinkWithType = {
   href?:
@@ -44,6 +48,7 @@ export type FooterSecondaryNavProps = {
 
 export type FooterDetailsProps = {
   socialMedia?: FooterSocialMedia
+  tertiaryLinks?: FooterLink[]
 }
 
 export type FooterNavigationProps = FooterMainNavProps & FooterSecondaryNavProps