From f6167d5a1246745b0bf100b006dcfc44a064c9e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dziedzi=C5=84ski?=
 <32803679+Michal-Dziedzinski@users.noreply.github.com>
Date: Thu, 7 May 2020 10:34:37 +0200
Subject: [PATCH] feat: add MegaMenu component (#593)

* feat: add MegaMenu component

* feat(helpers): getCategoryUrl

Co-authored-by: Patryk Tomczyk <13100280+patzick@users.noreply.github.com>
Co-authored-by: martaradziszewska <marta.radziszewskaa@gmail.com>
---
 api/composables.api.md                        | 15 +++-
 api/helpers.api.md                            |  4 +
 .../models/content/category/Category.ts       |  3 +
 .../__tests__/useNavigation.spec.ts           | 21 +++++
 .../composables/src/hooks/useNavigation.ts    | 30 ++++++--
 .../default-theme/components/SwMegaMenu.vue   | 77 +++++++++++++++++++
 ...{TopNavigation.vue => SwTopNavigation.vue} | 70 +++++++++--------
 packages/default-theme/layouts/default.vue    |  6 +-
 .../default-theme/pages/account/orders.vue    | 15 ++--
 .../__tests__/category/getCategoryUrl.spec.ts | 23 ++++++
 .../helpers/src/category/getCategoryUrl.ts    |  9 +++
 packages/helpers/src/category/index.ts        |  1 +
 12 files changed, 229 insertions(+), 45 deletions(-)
 create mode 100644 packages/default-theme/components/SwMegaMenu.vue
 rename packages/default-theme/components/{TopNavigation.vue => SwTopNavigation.vue} (82%)
 create mode 100644 packages/helpers/__tests__/category/getCategoryUrl.spec.ts
 create mode 100644 packages/helpers/src/category/getCategoryUrl.ts

diff --git a/api/composables.api.md b/api/composables.api.md
index c91c93228..2e43a983f 100644
--- a/api/composables.api.md
+++ b/api/composables.api.md
@@ -16,6 +16,7 @@ import { CustomerUpdateEmailParam } from '@shopware-pwa/shopware-6-client';
 import { CustomerUpdatePasswordParam } from '@shopware-pwa/shopware-6-client';
 import { CustomerUpdateProfileParam } from '@shopware-pwa/shopware-6-client';
 import { GuestOrderParams } from '@shopware-pwa/commons/interfaces/request/GuestOrderParams';
+import { NavigationElement } from '@shopware-pwa/commons/interfaces/models/content/navigation/Navigation';
 import { Order } from '@shopware-pwa/commons/interfaces/models/checkout/order/Order';
 import { PaymentMethod } from '@shopware-pwa/commons/interfaces/models/checkout/payment/PaymentMethod';
 import { Product } from '@shopware-pwa/commons/interfaces/models/content/product/Product';
@@ -154,7 +155,19 @@ export interface UseCurrency {
 export const useCurrency: () => UseCurrency;
 
 // @alpha (undocumented)
-export const useNavigation: () => any;
+export interface UseNavigation {
+    // (undocumented)
+    fetchNavigationElements: (depth: number) => Promise<void>;
+    // (undocumented)
+    fetchRoutes: () => Promise<void>;
+    // (undocumented)
+    navigationElements: NavigationElement[];
+    // (undocumented)
+    routes: Ref<Readonly<any>>;
+}
+
+// @alpha (undocumented)
+export const useNavigation: () => UseNavigation;
 
 // @alpha (undocumented)
 export interface UseProduct<PRODUCT, SEARCH> {
diff --git a/api/helpers.api.md b/api/helpers.api.md
index d0d68ede9..336363a03 100644
--- a/api/helpers.api.md
+++ b/api/helpers.api.md
@@ -4,6 +4,7 @@
 
 ```ts
 
+import { Category } from '@shopware-pwa/commons/interfaces/models/content/category/Category';
 import { CmsPage } from '@shopware-pwa/commons/interfaces/models/content/cms/CmsPage';
 import { CmsSection } from '@shopware-pwa/commons/interfaces/models/content/cms/CmsPage';
 import { Country } from '@shopware-pwa/commons/interfaces/models/system/country/Country';
@@ -72,6 +73,9 @@ export function getCategoryAvailableSorting({ sorting, }?: {
     sorting?: Sorting;
 }): UiCategorySorting[];
 
+// @alpha
+export const getCategoryUrl: (category: Partial<Category>) => string;
+
 // @alpha (undocumented)
 export function getCmsSections(content: CmsPage): CmsSection[];
 
diff --git a/packages/commons/interfaces/models/content/category/Category.ts b/packages/commons/interfaces/models/content/category/Category.ts
index fcfec6f22..09576d830 100644
--- a/packages/commons/interfaces/models/content/category/Category.ts
+++ b/packages/commons/interfaces/models/content/category/Category.ts
@@ -39,4 +39,7 @@ export interface Category extends Entity {
   parentVersionId: string;
   childrenCount: number;
   afterCategoryVersionId: string;
+  route?: {
+    path?: string;
+  };
 }
diff --git a/packages/composables/__tests__/useNavigation.spec.ts b/packages/composables/__tests__/useNavigation.spec.ts
index 1e67c7d67..5b455d395 100644
--- a/packages/composables/__tests__/useNavigation.spec.ts
+++ b/packages/composables/__tests__/useNavigation.spec.ts
@@ -7,6 +7,9 @@ jest.mock("@shopware-pwa/shopware-6-client");
 const mockedGetPage = shopwareClient as jest.Mocked<typeof shopwareClient>;
 
 describe("Composables - useNavigation", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   describe("computed", () => {
     describe("routes", () => {
       it("should get null when routeNames are not fetched", () => {
@@ -41,5 +44,23 @@ describe("Composables - useNavigation", () => {
         expect(routes.value).toHaveLength(3);
       });
     });
+    describe("fetchNavigationElements", () => {
+      it("should fetch navigation elements correcly", async () => {
+        mockedGetPage.getNavigation.mockResolvedValueOnce({
+          count: 3,
+          children: [
+            { name: "Clothin", route: { path: "clothing/" } },
+            { name: "Sports", route: { path: "sports/" } },
+            {
+              name: "Accessories & Others",
+              route: { path: "accessories-others/" },
+            },
+          ],
+        } as any);
+        const { navigationElements, fetchNavigationElements } = useNavigation();
+        await fetchNavigationElements(2);
+        expect(navigationElements).toHaveLength(3);
+      });
+    });
   });
 });
diff --git a/packages/composables/src/hooks/useNavigation.ts b/packages/composables/src/hooks/useNavigation.ts
index 19cd6f1b1..8a8301e8e 100644
--- a/packages/composables/src/hooks/useNavigation.ts
+++ b/packages/composables/src/hooks/useNavigation.ts
@@ -1,27 +1,47 @@
 import Vue from "vue";
-import { reactive, computed } from "@vue/composition-api";
+import { reactive, computed, Ref } from "@vue/composition-api";
 import { getNavigation } from "@shopware-pwa/shopware-6-client";
 import { getNavigationRoutes } from "@shopware-pwa/helpers";
+import { NavigationElement } from "@shopware-pwa/commons/interfaces/models/content/navigation/Navigation";
+
+/**
+ * @alpha
+ */
+export interface UseNavigation {
+  routes: Ref<Readonly<any>>;
+  navigationElements: NavigationElement[];
+  fetchNavigationElements: (depth: number) => Promise<void>;
+  fetchRoutes: () => Promise<void>;
+}
 
 const sharedNavigation = Vue.observable({
   routes: null,
+  navigationElements: [],
 } as any);
 
 /**
  * @alpha
  */
-export const useNavigation = (): any => {
+export const useNavigation = (): UseNavigation => {
   const localNavigation = reactive(sharedNavigation);
   const routes = computed(() => localNavigation.routes);
 
   const fetchRoutes = async (params?: any): Promise<void> => {
-    const navigation = await getNavigation(params);
-    if (typeof navigation.children === "undefined") return;
-    sharedNavigation.routes = getNavigationRoutes(navigation.children);
+    const { children } = await getNavigation(params);
+    if (typeof children === "undefined") return;
+    sharedNavigation.routes = getNavigationRoutes(children);
+  };
+
+  const fetchNavigationElements = async (depth: number) => {
+    const { children } = await getNavigation({ depth });
+    localNavigation.navigationElements.length = 0;
+    localNavigation.navigationElements.push(...children);
   };
 
   return {
     routes,
+    navigationElements: localNavigation.navigationElements,
+    fetchNavigationElements,
     fetchRoutes,
   };
 };
diff --git a/packages/default-theme/components/SwMegaMenu.vue b/packages/default-theme/components/SwMegaMenu.vue
new file mode 100644
index 000000000..ff154874b
--- /dev/null
+++ b/packages/default-theme/components/SwMegaMenu.vue
@@ -0,0 +1,77 @@
+<template>
+  <SfMegaMenu :visible="visible" :title="category.name" class="sw-mega-menu">
+    <div class="sw-mega-menu__content">
+      <div
+        class="sw-mega-menu__content-section"
+        v-for="subcategory in category.children"
+        :key="subcategory.name"
+      >
+        <nuxt-link
+          class="sf-header__link"
+          :to="getCategoryUrl(subcategory)"
+        >
+          <SfHeading
+            :title="subcategory.name"
+            :subtitle="subcategory.description"
+            :level="4"
+          />
+        </nuxt-link>
+        <SfList>
+          <SfListItem v-for="child in subcategory.children" :key="child.label">
+            <nuxt-link
+              class="sf-header__link"
+              :to="getCategoryUrl(child)"
+            >
+              <SfMenuItem :label="child.name" />
+            </nuxt-link>
+          </SfListItem>
+        </SfList>
+      </div>
+    </div>
+  </SfMegaMenu>
+</template>
+
+<script>
+import { SfMegaMenu, SfMenuItem, SfList, SfHeading } from '@storefront-ui/vue'
+import { getCategoryUrl } from '@shopware-pwa/helpers'
+
+export default {
+  name: 'SwMegaMenu',
+  components: { SfMegaMenu, SfMenuItem, SfList, SfHeading },
+  props: {
+    category: {
+      type: Object,
+      default: () => ({}),
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    return { getCategoryUrl }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.sw-mega-menu {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  top: 100%;
+  &__content {
+    flex-wrap: wrap;
+    display: flex;
+    max-width: 80vw;
+
+    &-section {
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: flex-start;
+    }
+  }
+}
+</style>
diff --git a/packages/default-theme/components/TopNavigation.vue b/packages/default-theme/components/SwTopNavigation.vue
similarity index 82%
rename from packages/default-theme/components/TopNavigation.vue
rename to packages/default-theme/components/SwTopNavigation.vue
index 107a4b2ac..96a90e2ed 100644
--- a/packages/default-theme/components/TopNavigation.vue
+++ b/packages/default-theme/components/SwTopNavigation.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="top-navigation">
+    <SfOverlay :visible="!!currentCategoryName" />
     <SfTopBar class="top-bar desktop-only">
       <template #right>
         <SwCurrency class="sf-header__currency" />
@@ -25,21 +26,23 @@
       <template #navigation>
         <SwPluginSlot name="top-navigation-before" />
         <SfHeaderNavigationItem
-          v-for="{ routeLabel, routePath } in routes"
-          :key="routeLabel"
+          v-for="category in navigationElements"
+          :key="category.name"
           class="sf-header__link"
+          @mouseover="currentCategoryName = category.name"
+          @mouseleave="currentCategoryName = null"
+          @keyup.tab="currentCategoryName = category.name"
         >
-          <nuxt-link class="sf-header__link" :to="routePath">
-            <a
-              :style="{
-                display: 'flex',
-                alignItems: 'center',
-                height: '100%',
-              }"
-            >
-              {{ routeLabel }}
-            </a>
+          <nuxt-link
+            class="sf-header__link"
+            :to="getCategoryUrl(category)"
+          >
+            {{ category.name }}
           </nuxt-link>
+          <SwMegaMenu
+            :category="category"
+            :visible="category.name === currentCategoryName"
+          />
         </SfHeaderNavigationItem>
         <SwPluginSlot name="top-navigation-after" />
       </template>
@@ -68,7 +71,7 @@
               :has-badge="isLoggedIn"
               @click="userIconClick"
             />
-            <SfIcon
+            <SfIcon 
               v-if="cartIcon"
               :icon="cartIcon"
               :has-badge="count > 0"
@@ -97,10 +100,11 @@
 <script>
 import {
   SfHeader,
-  SfIcon,
   SfImage,
-  SfTopBar,
   SfSearchBar,
+  SfOverlay,
+  SfTopBar,
+  SfIcon,
 } from '@storefront-ui/vue'
 import {
   useUser,
@@ -112,50 +116,57 @@ import {
 } from '@shopware-pwa/composables'
 import SwLoginModal from '@shopware-pwa/default-theme/components/modals/SwLoginModal'
 import SwCurrency from '@shopware-pwa/default-theme/components/SwCurrency'
+import SwMegaMenu from '@shopware-pwa/default-theme/components/SwMegaMenu'
+import { ref, reactive, onMounted } from '@vue/composition-api'
 import { PAGE_ACCOUNT } from '@shopware-pwa/default-theme/helpers/pages'
+import { getCategoryUrl } from '@shopware-pwa/helpers'
 import SwPluginSlot from 'sw-plugins/SwPluginSlot'
 
 export default {
   components: {
     SfHeader,
-    SfIcon,
     SwLoginModal,
     SfImage,
-    SfTopBar,
     SfSearchBar,
+    SwMegaMenu,
+    SfOverlay,
+    SfTopBar,
     SwCurrency,
-    SwPluginSlot
+    SfIcon,
+    SwPluginSlot,
   },
   setup() {
-    const { routes, fetchRoutes } = useNavigation()
     const { isLoggedIn, logout } = useUser()
     const { count } = useCart()
     const { toggleSidebar } = useCartSidebar()
     const { toggleModal } = useUserLoginModal()
     const { search: fulltextSearch } = useProductSearch()
+    const { fetchNavigationElements, navigationElements } = useNavigation()
+
+    const currentCategoryName = ref(null)
+
+    onMounted(async () => {
+      await fetchNavigationElements(3)
+    })
 
     return {
-      routes,
-      fetchRoutes,
       count,
       toggleModal,
       toggleSidebar,
       isLoggedIn,
       logout,
       fulltextSearch,
+      navigationElements,
+      getCategoryUrl,
+      currentCategoryName,
     }
   },
   data() {
     return {
-      navigationElements: [{ name: '' }],
-      activeSidebar: 'account',
       activeIcon: '',
       isModalOpen: false,
     }
   },
-  async mounted() {
-    await this.fetchRoutes({ depth: 1 })
-  },
   methods: {
     userIconClick() {
       if (this.isLoggedIn) this.$router.push(PAGE_ACCOUNT)
@@ -174,7 +185,7 @@ export default {
   --header-navigation-item-margin: 0 1rem 0 0;
   margin-bottom: var(--spacer-sm);
   .sf-header {
-    padding: 0 var(--spacer-sm);
+    // padding: 0 var(--spacer-sm);
     &__currency {
       position: relative;
       margin: 0 var(--spacer-base) 0 var(--spacer-base);
@@ -213,15 +224,14 @@ export default {
       }
       &__link {
         display: flex;
-        align-items: center;
-        height: 100;
       }
     }
   }
 }
 .top-bar {
   padding: 0 var(--spacer-sm);
-
+  position: relative;
+  z-index: 1;
   &__location-label {
     margin: 0 var(--spacer-sm) 0 0;
   }
diff --git a/packages/default-theme/layouts/default.vue b/packages/default-theme/layouts/default.vue
index fc2d34685..49b6cc25d 100644
--- a/packages/default-theme/layouts/default.vue
+++ b/packages/default-theme/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <SwPluginSlot name="page-top" />
-    <TopNavigation />
+    <SwTopNavigation />
     <SwPluginSlot name="top-header-after" />
     <SwPluginSlot name="breadcrumbs">
       <SfBreadcrumbs
@@ -23,7 +23,7 @@
 
 <script>
 import { SfBreadcrumbs } from '@storefront-ui/vue'
-import TopNavigation from '@shopware-pwa/default-theme/components/TopNavigation'
+import SwTopNavigation from '@shopware-pwa/default-theme/components/SwTopNavigation'
 import SwBottomNavigation from '@shopware-pwa/default-theme/components/SwBottomNavigation'
 import SwCart from '@shopware-pwa/default-theme/components/SwCart'
 import SwFooter from '@shopware-pwa/default-theme/components/SwFooter'
@@ -32,7 +32,7 @@ import SwPluginSlot from 'sw-plugins/SwPluginSlot'
 export default {
   components: {
     SfBreadcrumbs,
-    TopNavigation,
+    SwTopNavigation,
     SwCart,
     SwFooter,
     SwBottomNavigation,
diff --git a/packages/default-theme/pages/account/orders.vue b/packages/default-theme/pages/account/orders.vue
index 744545338..a89d5ca85 100644
--- a/packages/default-theme/pages/account/orders.vue
+++ b/packages/default-theme/pages/account/orders.vue
@@ -12,7 +12,7 @@
       <SfTable v-else class="orders">
         <SfTableHeading>
           <SfTableHeader
-          class="orders__header"
+            class="orders__header"
             v-for="tableHeader in tableHeaders"
             :key="tableHeader"
             >{{ tableHeader }}</SfTableHeader
@@ -20,7 +20,11 @@
         </SfTableHeading>
         <!-- consider making SfTableRow public (not internal component) to split it down to smaller components. -->
         <SfTableRow v-for="order in orderList" :key="order[0]">
-          <SfTableData class="orders__data" v-for="(data, key) in order" :key="key">
+          <SfTableData
+            class="orders__data"
+            v-for="(data, key) in order"
+            :key="key"
+          >
             <template v-if="key === 3"
               ><!-- order status -->
               <span
@@ -59,7 +63,7 @@ import {
   SfButton,
 } from '@storefront-ui/vue'
 import { useUser } from '@shopware-pwa/composables'
-import helpers from '../../helpers'
+import { formatDate, formatPrice } from '@shopware-pwa/default-theme/helpers'
 
 export default {
   name: 'OrderHistory',
@@ -94,10 +98,10 @@ export default {
   },
   methods: {
     formatDate(date) {
-      return helpers.formatDate(date)
+      return formatDate(date)
     },
     formatPrice(price) {
-      return helpers.formatPrice(price)
+      return formatPrice(price)
     },
   },
 }
@@ -109,5 +113,4 @@ export default {
   margin: 0 0 var(--spacer-xl) 0;
   color: var(--c-dark-variant);
 }
-
 </style>
diff --git a/packages/helpers/__tests__/category/getCategoryUrl.spec.ts b/packages/helpers/__tests__/category/getCategoryUrl.spec.ts
new file mode 100644
index 000000000..ee974188c
--- /dev/null
+++ b/packages/helpers/__tests__/category/getCategoryUrl.spec.ts
@@ -0,0 +1,23 @@
+import { getCategoryUrl } from "@shopware-pwa/helpers";
+
+describe("Shopware helpers - getCategoryUrl", () => {
+  it("should return root path if there is no category", () => {
+    const result = getCategoryUrl(undefined as any);
+    expect(result).toEqual("/");
+  });
+
+  it("should return root path category has no route", () => {
+    const result = getCategoryUrl({});
+    expect(result).toEqual("/");
+  });
+
+  it("should return root path category has no route path", () => {
+    const result = getCategoryUrl({ route: {} });
+    expect(result).toEqual("/");
+  });
+
+  it("should return category route path", () => {
+    const result = getCategoryUrl({ route: { path: "some/path" } });
+    expect(result).toEqual("/some/path");
+  });
+});
diff --git a/packages/helpers/src/category/getCategoryUrl.ts b/packages/helpers/src/category/getCategoryUrl.ts
new file mode 100644
index 000000000..8fb3815fa
--- /dev/null
+++ b/packages/helpers/src/category/getCategoryUrl.ts
@@ -0,0 +1,9 @@
+import { Category } from "@shopware-pwa/commons/interfaces/models/content/category/Category";
+
+/**
+ * Get url for category.
+ *
+ * @alpha
+ */
+export const getCategoryUrl = (category: Partial<Category>): string =>
+  `/${category?.route?.path || ""}`;
diff --git a/packages/helpers/src/category/index.ts b/packages/helpers/src/category/index.ts
index eef78aecb..bbdb4a8a4 100644
--- a/packages/helpers/src/category/index.ts
+++ b/packages/helpers/src/category/index.ts
@@ -1,2 +1,3 @@
 export * from "./getCategoryAvailableFilters";
 export * from "./getCategoryAvailableSorting";
+export * from "./getCategoryUrl";