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>