CMS-45730 Add footer links

Author: TRomesh

templates/alloy-template/src/components/base/Footer.tsx

@@ -13,52 +13,13 @@ interface FooterSection {
 interface FooterProps {
   client: GraphClient;
   currentPath: string;
-  sections?: FooterSection[];
 }
 
-const defaultSections: FooterSection[] = [
-  {
-    title: 'PRODUCTS',
-    links: [
-      { label: 'Alloy Plan', href: '/en/alloy-plan' },
-      { label: 'Alloy Track', href: '/en/alloy-track' },
-      { label: 'Alloy Meet', href: '/en/alloy-meet' },
-    ],
-  },
-  {
-    title: 'THE COMPANY',
-    links: [
-      { label: 'History', href: '/en/history' },
-      { label: 'News & Events', href: '/en/news' },
-      { label: 'Management', href: '/en/management' },
-      { label: 'Contact us', href: '/en/contact' },
-      { label: 'Become a reseller', href: '/en/reseller' },
-    ],
-  },
-  {
-    title: 'NEWS & EVENTS',
-    links: [
-      { label: 'Events', href: '/en/events' },
-      { label: 'Press Releases', href: '/en/press' },
-    ],
-  },
-  {
-    title: 'CUSTOMER ZONE',
-    links: [
-      { label: 'Reseller extranet', href: '/en/reseller-extranet' },
-      { label: 'Log out', href: '/en/logout' },
-    ],
-  },
-];
-
-async function Footer({
-  client,
-  currentPath,
-  sections = defaultSections,
-}: FooterProps) {
+async function Footer({ client, currentPath }: FooterProps) {
   const allLinks = await Promise.all([
     client.getItems('/en/'),
     client.getItems('/en/about-us'),
+    client.getItems('/en/about-us/news-events'),
   ]);
 
   // Flatten the array of arrays and map to FooterLink format
@@ -68,17 +29,36 @@ async function Footer({
     href: ancestor._metadata?.url?.hierarchical,
   }));
 
-  console.info(
-    'Footer footerLinks:',
-    currentPath,
-    JSON.stringify(footerLinks, null, 2)
+  // Group links by category based on URL patterns
+  const categorizedLinks = footerLinks.reduce<{
+    products: FooterLink[];
+    company: FooterLink[];
+    news: FooterLink[];
+  }>(
+    (acc, link) => {
+      if (link.href?.match(/\/about-us\/news-events\/.+/)) {
+        acc.news.push({ label: link.label, href: link.href });
+      } else if (link.href?.includes('/about-us')) {
+        acc.company.push({ label: link.label, href: link.href });
+      } else if (link.href) {
+        acc.products.push({ label: link.label, href: link.href });
+      }
+      return acc;
+    },
+    { products: [], company: [], news: [] }
   );
 
+  const formattedFooterLink: FooterSection[] = [
+    { title: 'PRODUCTS', links: categorizedLinks.products },
+    { title: 'THE COMPANY', links: categorizedLinks.company },
+    { title: 'NEWS & EVENTS', links: categorizedLinks.news },
+  ];
+
   return (
     <footer className="bg-gray-800 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
-          {sections.map((section, index) => (
+          {formattedFooterLink.map((section, index) => (
             <div key={index} className="space-y-4">
               <h3 className="text-sm font-bold uppercase tracking-wider text-white">
                 {section.title}