feat(SW-187): Added social media data and copyright label

components/Footer/Details/index.tsx

@@ -3,12 +3,14 @@ import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
 import { footer } from "../mockedData"
 
 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,16 +19,13 @@ function SocialIcon({ iconName }: SocialIconsProps) {
   return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
 }
 
-export default function FooterDetails() {
+export default async function FooterDetails({
+  socialMedia,
+}: FooterDetailsProps) {
   const lang = getLang()
+  const { formatMessage } = await getIntl()
   const currentYear = new Date().getFullYear()
-  const {
-    socialMedia,
-    copyrightCompany,
-    copyrightInfo,
-    tertiaryLinks,
-    languageSwitcher,
-  } = footer
+  const { tertiaryLinks, languageSwitcher } = footer
   return (
     <section className={styles.details}>
       <div className={styles.topContainer}>
@@ -43,27 +42,28 @@ export default function FooterDetails() {
           />
         </Link>
         <nav className={styles.socialNav}>
-          {socialMedia.links.map((link) => (
-            <a
-              className={styles.socialLink}
-              color="white"
-              href={link.href}
-              key={link.id}
-              target="_blank"
-              aria-label={link.title}
-            >
-              <SocialIcon iconName={link.title} />
-            </a>
-          ))}
+          {socialMedia?.links.map(
+            (link) =>
+              link.href && (
+                <a
+                  className={styles.socialLink}
+                  color="white"
+                  href={link.href.href}
+                  key={link.href.title}
+                  target="_blank"
+                  aria-label={link.href.title}
+                >
+                  <SocialIcon iconName={link.href.title} />
+                </a>
+              )
+          )}
         </nav>
       </div>
       <div className={styles.bottomContainer}>
         <div className={styles.copyrightContainer}>
           <Footnote textTransform="uppercase">
-            © {currentYear} {copyrightCompany}
-          </Footnote>
-          <Footnote textTransform="uppercase" color="peach50">
-            {copyrightInfo}
+            © {currentYear}{" "}
+            {formatMessage({ id: "Copyright all rights reserved" })}
           </Footnote>
         </div>
         <div className={styles.navigationContainer}>
@@ -81,9 +81,6 @@ export default function FooterDetails() {
               </Footnote>
             ))}
           </nav>
-          {
-            // This will be changed to the new LangueSwitcher that is done in the header branch, when implementing contentstack
-          }
           <LanguageSwitcher type="desktopFooter" urls={languageSwitcher.urls} />
         </div>
       </div>

components/Footer/Navigation/SecondaryNav/index.tsx

@@ -5,46 +5,49 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./secondarynav.module.css"
 
-import {
-  AppDownLoadLinks,
-  type FooterSecondaryNavProps,
-} from "@/types/components/footer/navigation"
+import { AppDownLoadLinks } from "@/types/components/footer/appDownloadIcons"
+import { type FooterSecondaryNavProps } from "@/types/components/footer/navigation"
 
 export default function FooterSecondaryNav({
   secondaryLinks,
   appDownloads,
 }: FooterSecondaryNavProps) {
   const lang = getLang()
-  console.log("hej", JSON.stringify(secondaryLinks, null, 4))
+
   return (
     <div className={styles.secondaryNavigation}>
-      <nav className={styles.secondaryNavigationGroup}>
-        <Body color="peach80" textTransform="uppercase">
-          {appDownloads.title}
-        </Body>
-        <ul className={styles.secondaryNavigationList}>
-          {appDownloads.links.map((link) => (
-            <li key={link.type} className={styles.appDownloadItem}>
-              <a
-                href={link.href.href}
-                target="_blank"
-                aria-label={link.href.title}
-              >
-                <Image
-                  src={
-                    AppDownLoadLinks[
-                      `${link.type}_${lang}` as keyof typeof AppDownLoadLinks
-                    ]
-                  }
-                  alt={link.href.title}
-                  width={125}
-                  height={40}
-                />
-              </a>
-            </li>
-          ))}
-        </ul>
-      </nav>
+      {appDownloads && (
+        <nav className={styles.secondaryNavigationGroup}>
+          <Body color="peach80" textTransform="uppercase">
+            {appDownloads.title}
+          </Body>
+          <ul className={styles.secondaryNavigationList}>
+            {appDownloads.links.map(
+              (link) =>
+                link.href && (
+                  <li key={link.type} className={styles.appDownloadItem}>
+                    <a
+                      href={link.href.href}
+                      target="_blank"
+                      aria-label={link.href.title}
+                    >
+                      <Image
+                        src={
+                          AppDownLoadLinks[
+                            `${link.type}_${lang}` as keyof typeof AppDownLoadLinks
+                          ]
+                        }
+                        alt={link.href.title}
+                        width={125}
+                        height={40}
+                      />
+                    </a>
+                  </li>
+                )
+            )}
+          </ul>
+        </nav>
+      )}
       {secondaryLinks.map((link) => (
         <nav className={styles.secondaryNavigationGroup} key={link.title}>
           <Body color="peach80" textTransform="uppercase">
@@ -52,7 +55,7 @@ export default function FooterSecondaryNav({
           </Body>
           <ul className={styles.secondaryNavigationList}>
             {link?.links?.map((link) => (
-              <li key={link.id} className={styles.secondaryNavigationItem}>
+              <li key={link.title} className={styles.secondaryNavigationItem}>
                 {link.isExternal ? (
                   <a
                     href={link.url}

components/Footer/Navigation/index.tsx

@@ -3,9 +3,13 @@ import FooterSecondaryNav from "./SecondaryNav"
 
 import styles from "./navigation.module.css"
 
-export default function FooterNavigation({ ...props }) {
-  const { mainLinks, secondaryLinks, appDownloads } = props
+import type { FooterNavigationProps } from "@/types/components/footer/navigation"
 
+export default function FooterNavigation({
+  mainLinks,
+  secondaryLinks,
+  appDownloads,
+}: FooterNavigationProps) {
   return (
     <section className={styles.section}>
       <div className={styles.maxWidth}>

components/Footer/index.tsx

@@ -10,12 +10,16 @@ export default async function Footer() {
     lang: getLang(),
   })
   if (!footerData) {
-    return null
+    return <FooterDetails />
   }
   return (
     <footer>
-      <FooterNavigation {...footerData} />
-      <FooterDetails />
+      <FooterNavigation
+        mainLinks={footerData.mainLinks}
+        secondaryLinks={footerData.secondaryLinks}
+        appDownloads={footerData.appDownloads}
+      />
+      <FooterDetails socialMedia={footerData.socialMedia} />
     </footer>
   )
 }

i18n/dictionaries/da.json

@@ -42,6 +42,7 @@
   "Compare all levels": "Sammenlign alle niveauer",
   "Contact us": "Kontakt os",
   "Continue": "Blive ved",
+  "Copyright all rights reserved": "Scandic AB Alle rettigheder forbeholdes",
   "Could not find requested resource": "Kunne ikke finde den anmodede ressource",
   "Country": "Land",
   "Country code": "Landekode",

i18n/dictionaries/de.json

@@ -41,6 +41,7 @@
   "Compare all levels": "Vergleichen Sie alle Levels",
   "Contact us": "Kontaktieren Sie uns",
   "Continue": "Weitermachen",
+  "Copyright all rights reserved": "Scandic AB Alle Rechte vorbehalten",
   "Could not find requested resource": "Die angeforderte Ressource konnte nicht gefunden werden.",
   "Country": "Land",
   "Country code": "Landesvorwahl",

i18n/dictionaries/en.json

@@ -42,6 +42,7 @@
   "Compare all levels": "Compare all levels",
   "Contact us": "Contact us",
   "Continue": "Continue",
+  "Copyright all rights reserved": "Scandic AB All rights reserved",
   "Could not find requested resource": "Could not find requested resource",
   "Country": "Country",
   "Country code": "Country code",

i18n/dictionaries/fi.json

@@ -42,6 +42,7 @@
   "Compare all levels": "Vertaa kaikkia tasoja",
   "Contact us": "Ota meihin yhteyttä",
   "Continue": "Jatkaa",
+  "Copyright all rights reserved": "Scandic AB Kaikki oikeudet pidätetään",
   "Could not find requested resource": "Pyydettyä resurssia ei löytynyt",
   "Country": "Maa",
   "Country code": "Maatunnus",

i18n/dictionaries/no.json

@@ -42,6 +42,7 @@
   "Compare all levels": "Sammenlign alle nivåer",
   "Contact us": "Kontakt oss",
   "Continue": "Fortsette",
+  "Copyright all rights reserved": "Scandic AB Alle rettigheter forbeholdt",
   "Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
   "Country": "Land",
   "Country code": "Landskode",

i18n/dictionaries/sv.json

@@ -42,6 +42,7 @@
   "Compare all levels": "Jämför alla nivåer",
   "Contact us": "Kontakta oss",
   "Continue": "Fortsätt",
+  "Copyright all rights reserved": "Scandic AB Alla rättigheter förbehålls",
   "Could not find requested resource": "Det gick inte att hitta den begärda resursen",
   "Country": "Land",
   "Country code": "Landskod",

lib/graphql/Fragments/Footer/SocialMedia.graphql

@@ -0,0 +1,11 @@
+fragment SocialMedia on Footer {
+  social_media {
+    links {
+      href {
+        href
+        title
+      }
+      type
+    }
+  }
+}

lib/graphql/Query/Footer.graphql

@@ -1,6 +1,7 @@
 #import "../Fragments/Footer/AppDownloads.graphql"
 #import "../Fragments/Footer/MainLinks.graphql"
 #import "../Fragments/Footer/SecondaryLinks.graphql"
+#import "../Fragments/Footer/SocialMedia.graphql"
 #import "../Fragments/Footer/Refs/MainLinks.graphql"
 #import "../Fragments/Footer/Refs/SecondaryLinks.graphql"
 #import "../Fragments/Refs/System.graphql"
@@ -11,6 +12,7 @@ query GetFooter($locale: String!) {
       ...MainLinks
       ...SecondaryLinks
       ...AppDownloads
+      ...SocialMedia
     }
   }
 }

server/routers/contentstack/base/output.ts

@@ -319,6 +319,14 @@ export const validateFooterConfigSchema = z.object({
             links: z.array(validateLinkItem),
           })
         ),
+        social_media: z.object({
+          links: z.array(
+            z.object({
+              type: z.string(),
+              href: validateExternalLink,
+            })
+          ),
+        }),
       })
     ),
   }),

server/routers/contentstack/base/query.ts

@@ -599,6 +599,7 @@ export const baseQueryRouter = router({
         mainLinks: mainLinks,
         appDownloads: validatedFooterData.app_downloads,
         secondaryLinks: secondaryLinks,
+        socialMedia: validatedFooterData.social_media,
       }
     }),
 })

server/routers/contentstack/base/utils.ts

@@ -49,6 +49,7 @@ export function transformPageConnectionLinks(links: FooterLinkItem[]) {
         title: edge.node.title || "",
         url: edge.node.url || "",
         openInNewTab: link.open_in_new_tab,
+        isExternal: false,
       }))
     } else if (link.link) {
       return [
@@ -56,6 +57,7 @@ export function transformPageConnectionLinks(links: FooterLinkItem[]) {
           title: link.link.title,
           url: link.link.href,
           openInNewTab: link.open_in_new_tab,
+          isExternal: true,
         },
       ]
     }

types/components/footer/appDownloadIcons.ts

@@ -0,0 +1,14 @@
+export enum AppDownLoadLinks {
+  apple_da = "/_static/img/app-store-badge-da.svg",
+  apple_de = "/_static/img/app-store-badge-de.svg",
+  apple_en = "/_static/img/app-store-badge-en.svg",
+  apple_fi = "/_static/img/app-store-badge-fi.svg",
+  apple_no = "/_static/img/app-store-badge-no.svg",
+  apple_sv = "/_static/img/app-store-badge-sv.svg",
+  google_da = "/_static/img/google-play-badge-da.svg",
+  google_de = "/_static/img/google-play-badge-de.svg",
+  google_en = "/_static/img/google-play-badge-en.svg",
+  google_fi = "/_static/img/google-play-badge-fi.svg",
+  google_no = "/_static/img/google-play-badge-no.svg",
+  google_sv = "/_static/img/google-play-badge-sv.svg",
+}

types/components/footer/navigation.ts

@@ -9,40 +9,41 @@ export type FooterMainNavProps = {
 }
 
 export type FooterSecondaryNav = {
-  id: string
   isExternal: boolean
   openInNewTab: boolean
   title: string
   url: string
 }
-export type FooterSecondaryNavProps = {
-  secondaryLinks: {
-    title: string
-    links: FooterSecondaryNav[]
-  }[]
-  appDownloads: {
-    title: string
-    links: {
-      href: {
+type FooterSecondaryNavGroup = {
+  title: string
+  links: FooterSecondaryNav[]
+}
+type FooterLinkWithType = {
+  href?:
+    | {
         href: string
         title: string
       }
-      type: string
-    }[]
-  }
+    | undefined
+  type: string
 }
 
-export enum AppDownLoadLinks {
-  apple_da = "/_static/img/app-store-badge-da.svg",
-  apple_de = "/_static/img/app-store-badge-de.svg",
-  apple_en = "/_static/img/app-store-badge-en.svg",
-  apple_fi = "/_static/img/app-store-badge-fi.svg",
-  apple_no = "/_static/img/app-store-badge-no.svg",
-  apple_sv = "/_static/img/app-store-badge-sv.svg",
-  google_da = "/_static/img/google-play-badge-da.svg",
-  google_de = "/_static/img/google-play-badge-de.svg",
-  google_en = "/_static/img/google-play-badge-en.svg",
-  google_fi = "/_static/img/google-play-badge-fi.svg",
-  google_no = "/_static/img/google-play-badge-no.svg",
-  google_sv = "/_static/img/google-play-badge-sv.svg",
+type FooterAppDownloads = {
+  title: string
+  links: FooterLinkWithType[]
 }
+
+type FooterSocialMedia = {
+  links: FooterLinkWithType[]
+}
+
+export type FooterSecondaryNavProps = {
+  secondaryLinks: FooterSecondaryNavGroup[]
+  appDownloads: FooterAppDownloads
+}
+
+export type FooterDetailsProps = {
+  socialMedia?: FooterSocialMedia
+}
+
+export type FooterNavigationProps = FooterMainNavProps & FooterSecondaryNavProps