From a598b3f1e5498e8fcd850c6065d65cdd647b4433 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Meyer?= <b.meyer@shopware.com>
Date: Fri, 7 Jul 2023 09:21:20 +0200
Subject: [PATCH] feat(poc): improve footer to have two levels

---
 components/layout/footer.tsx                 | 57 ++++++++++++--------
 lib/shopware/api-types/apiTypes-6.5.2.0.d.ts |  2 +-
 lib/shopware/api.ts                          |  5 +-
 lib/shopware/index.ts                        |  5 +-
 lib/shopware/transform.ts                    | 26 +++++----
 lib/shopware/types.ts                        |  2 +-
 6 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 7e10c3168..3d884cac4 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -10,37 +10,52 @@ const { SITE_NAME } = process.env;
 export default async function Footer() {
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const menu = await getMenu({ type: 'footer-navigation' });
+  const menu = await getMenu({ type: 'footer-navigation', depth: 2 });
 
   return (
     <footer className="border-t border-gray-700 bg-white text-black dark:bg-black dark:text-white">
       <div className="mx-auto w-full max-w-7xl px-6">
         <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 transition-colors duration-150 lg:grid-cols-12">
-          <div className="col-span-1 lg:col-span-3">
-            <a className="flex flex-initial items-center font-bold md:mr-24" href="/">
-              <span className="mr-2">
+          <div className="col-span-1 lg:col-span-4">
+            <a className="flex flex-initial items-center font-bold" href="/">
+              <span className="mr-4">
                 <LogoIcon className="h-8" />
               </span>
               <span>{SITE_NAME}</span>
             </a>
           </div>
-          {menu.length ? (
-            <nav className="col-span-1 lg:col-span-7">
-              <ul className="grid md:grid-flow-col md:grid-cols-3 md:grid-rows-4">
-                {menu.map((item: Menu) => (
-                  <li key={item.title} className="py-3 md:py-0 md:pb-4">
-                    <Link
-                      href={item.path}
-                      className="text-gray-800 transition duration-150 ease-in-out hover:text-gray-300 dark:text-gray-100"
-                    >
-                      {item.title}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
+          {menu.map((item: Menu) => (
+            < nav className="col-span-1 lg:col-span-3" key={item.title + item.type} >
+              {
+                item.type === "headline" ? (
+                  <span className='font-bold'>{item.title}</span>
+                ) : null
+              }
+              {item.children.length > 0 ? (
+                <ul className="py-3 md:py-0 md:pt-4" key={item.title}>
+                  {item.children.map((item: Menu) => (
+                    <li key={item.title} className="py-3 md:py-0 md:pb-4">
+                      <Link
+                        href={item.path}
+                        className="text-gray-800 transition duration-150 ease-in-out hover:text-gray-300 dark:text-gray-100"
+                      >
+                        {item.title}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) :
+                // if there are no children, at least display a link
+                <Link
+                  key={item.title}
+                  href={item.path}
+                  className="text-gray-800 transition duration-150 ease-in-out hover:text-gray-300 dark:text-gray-100"
+                >
+                  {item.title}
+                </Link>}
             </nav>
-          ) : null}
-          <div className="col-span-1 text-black dark:text-white lg:col-span-2">
+          ))}
+          <div className="col-span-1 text-black dark:text-white lg:col-span-2 inline-grid justify-items-end">
             <a aria-label="Github Repository" href="https://github.com/vercel/commerce">
               <GitHubIcon className="h-6" />
             </a>
@@ -71,6 +86,6 @@ export default async function Footer() {
           </div>
         </div>
       </div>
-    </footer>
+    </footer >
   );
 }
diff --git a/lib/shopware/api-types/apiTypes-6.5.2.0.d.ts b/lib/shopware/api-types/apiTypes-6.5.2.0.d.ts
index 08da1330e..b223d1509 100644
--- a/lib/shopware/api-types/apiTypes-6.5.2.0.d.ts
+++ b/lib/shopware/api-types/apiTypes-6.5.2.0.d.ts
@@ -689,7 +689,7 @@ export type components = {
       breadcrumb?: readonly unknown[];
       /** Format: int64 */
       childCount?: number;
-      children?: components['schemas']['Category'];
+      children?: components['schemas']['Category'][];
       cmsPage?: components['schemas']['CmsPage'];
       cmsPageId?: string;
       /** Runtime field, cannot be used as part of the criteria. */
diff --git a/lib/shopware/api.ts b/lib/shopware/api.ts
index ac376a72f..82855dd35 100644
--- a/lib/shopware/api.ts
+++ b/lib/shopware/api.ts
@@ -18,14 +18,15 @@ const apiInstance = createAPIClient<operations, operationPaths>({
 });
 
 export async function requestNavigation(
-  type: StoreNavigationTypeSW
+  type: StoreNavigationTypeSW,
+  depth: number
 ): Promise<ApiSchemas['NavigationRouteResponse']> {
   return await apiInstance.invoke(
     'readNavigation post /navigation/{activeId}/{rootId} sw-include-seo-urls',
     {
       activeId: type,
       rootId: type,
-      depth: 1
+      depth: depth
     }
   );
 }
diff --git a/lib/shopware/index.ts b/lib/shopware/index.ts
index 4865a1008..4b54e6806 100644
--- a/lib/shopware/index.ts
+++ b/lib/shopware/index.ts
@@ -34,9 +34,10 @@ import {
   transformStaticCollection
 } from './transform';
 
-export async function getMenu(params?: { type?: StoreNavigationTypeSW }): Promise<Menu[]> {
+export async function getMenu(params?: { type?: StoreNavigationTypeSW, depth?: number }): Promise<Menu[]> {
   const type = params?.type || 'main-navigation';
-  const res = await requestNavigation(type);
+  const depth = params?.depth || 1;
+  const res = await requestNavigation(type, depth);
 
   return res ? transformMenu(res) : [];
 }
diff --git a/lib/shopware/transform.ts b/lib/shopware/transform.ts
index 5b815134b..97f9202a5 100644
--- a/lib/shopware/transform.ts
+++ b/lib/shopware/transform.ts
@@ -12,20 +12,24 @@ import { ListItem } from 'components/layout/search/filter';
 export function transformMenu(res: ApiSchemas['NavigationRouteResponse']) {
   let menu: Menu[] = [];
 
-  res.map((item) =>
-    menu.push({
-      id: item.id ?? '',
-      title: item.name,
-      path:
-        item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
-          ? '/search/' + item.seoUrls[0].seoPathInfo
-          : ''
-    })
-  );
+  res.map((item) => menu.push(transformMenuItem(item)));
 
   return menu;
 }
 
+function transformMenuItem(item: ApiSchemas['Category']): Menu {
+  return {
+    id: item.id ?? '',
+    title: item.name,
+    children: item.children?.map((item) => transformMenuItem(item)) ?? [],
+    path:
+      item.seoUrls && item.seoUrls.length > 0 && item.seoUrls[0] && item.seoUrls[0].seoPathInfo
+        ? '/search/' + item.seoUrls[0].seoPathInfo
+        : '',
+    type: item.children && item.children.length > 0 ? 'headline' : 'link'
+  };
+}
+
 export function transformPage(
   seoUrlElement: ApiSchemas['SeoUrl'],
   resCategory: ApiSchemas['Category']
@@ -223,7 +227,7 @@ function transformVariants(parent: ApiSchemas['Product']): ProductVariant[] {
           }
         };
 
-        productVariants.push(currentVariant)
+        productVariants.push(currentVariant);
       }
     });
   }
diff --git a/lib/shopware/types.ts b/lib/shopware/types.ts
index 2c168cb15..12be345b1 100644
--- a/lib/shopware/types.ts
+++ b/lib/shopware/types.ts
@@ -18,7 +18,7 @@ export type SeoURLResultSW = {
 } & ApiSchemas['EntitySearchResult'];
 
 /** Vercel Commerce Types */
-export type Menu = { id: string; title: string; path: string };
+export type Menu = { id: string; title: string; path: string, type: string, children: Menu[] };
 
 export type Page = {
   id: string;