feat(SW-395): Added tracking to header and footer

components/Footer/Details/SocialLink/index.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { trackSocialMediaClick } from "@/utils/tracking"
+
+import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
+import type { SocialLinkProps } from "@/types/components/footer/socialLink"
+import type { IconName } from "@/types/components/icon"
+
+function SocialIcon({ iconName }: SocialIconsProps) {
+  const SocialIcon = getIconByIconName(iconName as IconName)
+  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
+}
+
+export default function SocialLink({ link }: SocialLinkProps) {
+  const { href, title } = link
+  return (
+    <a
+      color="white"
+      href={href}
+      key={title}
+      target="_blank"
+      aria-label={title}
+      onClick={() => trackSocialMediaClick(title)}
+    >
+      <SocialIcon iconName={title} />
+    </a>
+  )
+}

components/Footer/Details/index.tsx

@@ -1,6 +1,5 @@
 import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
@@ -9,16 +8,10 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
+import SocialLink from "./SocialLink"
+
 import styles from "./details.module.css"
 
-import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
-import type { IconName } from "@/types/components/icon"
-
-function SocialIcon({ iconName }: SocialIconsProps) {
-  const SocialIcon = getIconByIconName(iconName as IconName)
-  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
-}
-
 export default async function FooterDetails() {
   const lang = getLang()
   const intl = await getIntl()
@@ -40,18 +33,7 @@ export default async function FooterDetails() {
         </Link>
         <nav className={styles.socialNav}>
           {footer?.socialMedia.links.map(
-            (link) =>
-              link.href && (
-                <a
-                  color="white"
-                  href={link.href.href}
-                  key={link.href.title}
-                  target="_blank"
-                  aria-label={link.href.title}
-                >
-                  <SocialIcon iconName={link.href.title} />
-                </a>
-              )
+            ({ href }) => href && <SocialLink link={href} key={href.title} />
           )}
         </nav>
       </div>