feat(theme): support navigating to nested categories in mobile side menu (#709)

* fix(theme): allow spec.ts files to be used

Before this commit there were 2 issues:
- Types from Cypress and Jest fighting for the `expect()` keyword in .spec.ts files
  but this happened only when running tests with Jest (ts-jest)

- TypeScript didn't know where to find the @types/jest (when using
  tsserver), so I changed the typeRoots to point to the parent pkg

This is only a half-solution as I think if I used some composite configs
it'd be more manageable

fix(theme): squash this

fix(theme): squash this

* feat(theme): add nested categories in mobile category menu

refactor(theme): refactor find active category function to return whole object

squash this

feat(theme): pinia working wip

feat(theme): reorganize folders for helpers

feat(theme): reduce duplication in graphql query

feat(theme): adjust desktop and mobile categories

fix(theme): fix invalid import paths

Author: sethidden

packages/theme/components/BottomNavigation.vue

@@ -18,7 +18,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Menu"
-        @click="toggleMobileMenu"
+        @click="loadCategoryMenu"
       >
         <template #icon>
           <SvgImage
@@ -72,22 +72,25 @@
         </template>
       </SfBottomNavigationItem>
     </SfBottomNavigation>
-    <MobileMenuSidebar />
+    <MobileCategorySidebar v-if="isMobileMenuOpen" />
   </div>
 </template>
 
 <script>
 import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
 import { useUiState, useUser } from '~/composables';
-import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
+import { useCategoryStore } from '~/stores/category';
+import { useApi } from '~/composables/useApi';
+
+const MobileCategorySidebar = () => import('~/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue');
 
 export default defineComponent({
   components: {
     SfBottomNavigation,
     SfCircleIcon,
-    MobileMenuSidebar,
+    MobileCategorySidebar,
     SvgImage,
   },
   setup() {
@@ -101,6 +104,7 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const router = useRouter();
     const { app } = useContext();
+    const api = useApi();
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         await router.push(`${app.localePath('/my-account')}`);
@@ -109,12 +113,21 @@ export default defineComponent({
       }
     };
 
+    const loadCategoryMenu = async () => {
+      const categories = useCategoryStore(api);
+      if (categories.categories === null) {
+        await categories.load();
+      }
+      toggleMobileMenu();
+    };
+
     return {
       isAuthenticated,
       isMobileMenuOpen,
       toggleWishlistSidebar,
       toggleCartSidebar,
       toggleMobileMenu,
+      loadCategoryMenu,
       handleAccountClick,
       app,
     };

packages/theme/lang/de.js

@@ -253,4 +253,5 @@ export default {
   "There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details.": "Beim Versuch, Versandarten abzurufen, ist ein Fehler aufgetreten. Es tut uns leid, bitte versuchen Sie es mit anderen Versanddetails oder später.",
   "There was some error while trying to select this shipping method. We are sorry, please try with different shipping method.": "Beim Versuch, diese Versandart auszuwählen, ist ein Fehler aufgetreten. Es tut uns leid, bitte versuchen Sie es mit einer anderen Versandart.",
   "We can't find products matching the selection.":"Wir können keine Produkte finden, die der Auswahl entsprechen.",
+  "AllProductsFromCategory": "Alle {categoryName}"
 };

packages/theme/lang/en.js

@@ -251,4 +251,5 @@ export default {
   "There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details.": "There was some error while trying to fetch shipping methods. We are sorry, please try with different shipping details.",
   "There was some error while trying to select this shipping method. We are sorry, please try with different shipping method.": "There was some error while trying to select this shipping method. We are sorry, please try with different shipping method.",
   "We can't find products matching the selection.":"We can't find products matching the selection.",
+  "AllProductsFromCategory": "All {categoryName}"
 };

packages/theme/modules/catalog/category/components/sidebar/CategorySidebar.vue

@@ -4,17 +4,17 @@
     height="500px"
   >
     <SfAccordion
-      :open="activeCategory"
-      :show-chevron="true"
+      :open="topLevelCategoryLabel"
+      show-chevron
     >
       <SfAccordionItem
-        v-for="(cat, i) in categoryTree.items"
+        v-for="(cat, i) in categoryTree && categoryTree.items"
         :key="i"
         :header="cat.label"
       >
         <SfList class="list">
           <SfListItem
-            v-for="(subCat, j) in cat.items"
+            v-for="(subCat, j) in cat && cat.items"
             :key="j"
             class="list__item"
           >
@@ -54,23 +54,25 @@
   </SkeletonLoader>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SfList,
   SfMenuItem,
   SfAccordion,
 } from '@storefront-ui/vue';
+
 import {
   defineComponent, onMounted, ref,
-  useRoute,
+  useRoute, computed,
 } from '@nuxtjs/composition-api';
-
 import { useUiHelpers } from '~/composables';
-import { useSidebar } from './useSidebar.ts';
-import SkeletonLoader from '~/components/SkeletonLoader';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import { useApi } from '~/composables/useApi';
+import { useCategoryStore } from '~/stores/category';
+import { findActiveCategory, findCategoryAncestors } from '~/modules/catalog/category/helpers';
+import { CategoryTreeInterface } from '../../types';
 
 export default defineComponent({
-  name: 'CategorySidebar',
   components: {
     SfList,
     SfMenuItem,
@@ -79,23 +81,31 @@ export default defineComponent({
   },
   setup() {
     const uiHelpers = useUiHelpers();
-    const categoryTree = ref({});
-    const activeCategory = ref('');
-    const isLoading = ref(true);
     const route = useRoute();
-    const { loadCategoryTree, findActiveCategory } = useSidebar();
+    const api = useApi();
+
+    const categoryStore = useCategoryStore(api);
+    const categoryTree = computed(() => categoryStore.categories);
+    const activeCategory = ref<CategoryTreeInterface | null>(null);
+    const activeCategoryAncestors = ref(null);
+    const isLoading = ref(true);
 
     onMounted(async () => {
-      categoryTree.value = await loadCategoryTree() ?? {};
-      activeCategory.value = findActiveCategory(categoryTree.value, route.value.fullPath);
+      if (categoryStore.categories === null) {
+        await categoryStore.load();
+      }
+      activeCategory.value = findActiveCategory(categoryTree.value, route.value.fullPath.replace('/default/c', ''));
+      activeCategoryAncestors.value = findCategoryAncestors(categoryStore.categories, activeCategory.value);
       isLoading.value = false;
     });
 
+    const topLevelCategoryLabel = computed(() => activeCategoryAncestors.value?.[0]?.label);
+
     return {
       ...uiHelpers,
       categoryTree,
-      activeCategory,
       isLoading,
+      topLevelCategoryLabel,
     };
   },
 });

packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue

@@ -0,0 +1,133 @@
+<template>
+  <SfSidebar
+    :title="currentCategory && currentCategory.label || $t('Menu')"
+    visible
+    class="mobile-menu-sidebar sf-sidebar--left"
+    @close="toggleMobileMenu"
+  >
+    <SfList class="mobile-menu-sidebar__list">
+      <template v-if="currentCategory">
+        <SfMenuItem
+          class="mobile-menu-sidebar__item"
+          :label="$i18n.t('Go back')"
+          @click="onGoCategoryUp()"
+        >
+          <template #mobile-nav-icon>
+            <div v-show="false" />
+          </template>
+        </SfMenuItem>
+
+        <SfMenuItem
+          class="mobile-menu-sidebar__item"
+          :label="$i18n.t('AllProductsFromCategory', { categoryName: currentCategory.label })"
+          :count="currentCategory.count"
+          @click="navigate(currentCategory)"
+        />
+      </template>
+      <SfMenuItem
+        v-for="(category, index) in currentItems || categoryTree.items"
+        :key="index"
+        :label="category.label"
+        :count="category.count"
+        class="mobile-menu-sidebar__item"
+        @click="category.items.length === 0 ? navigate(category) : onGoCategoryDown(category)"
+      />
+    </SfList>
+  </SfSidebar>
+</template>
+<script lang="ts">
+import {
+  SfSidebar, SfList, SfMenuItem,
+} from '@storefront-ui/vue';
+import {
+  defineComponent, useRouter, useContext, useRoute,
+} from '@nuxtjs/composition-api';
+import { useUiHelpers, useUiState } from '~/composables';
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+import { findActiveCategory, findCategoryAncestors } from '~/modules/catalog/category/helpers';
+import { useApi } from '~/composables/useApi';
+import { useCategoryStore } from '~/stores/category';
+import { useMobileCategoryTree } from './logic';
+
+export default defineComponent({
+  components: {
+    SfSidebar,
+    SfList,
+    SfMenuItem,
+  },
+  setup() {
+    const api = useApi();
+    const { isMobileMenuOpen, toggleMobileMenu } = useUiState();
+    const { getAgnosticCatLink } = useUiHelpers();
+    const router = useRouter();
+    const route = useRoute();
+    const app = useContext();
+
+    const categoryStore = useCategoryStore(api);
+    const categoryTree = categoryStore.categories;
+
+    const navigate = (category: CategoryTreeInterface) => {
+      toggleMobileMenu();
+      const path = app.localePath(getAgnosticCatLink(category) as string);
+      router.push(path);
+    };
+
+    const activeCategory = findActiveCategory(categoryTree, route.value.fullPath.replace('/default/c', ''));
+    const initialHistory: CategoryTreeInterface[] = activeCategory === null ? [] : findCategoryAncestors(categoryTree, activeCategory);
+
+    // A category-less category can't be entered into - it can only navigated to
+    const initialHistoryWithSnippedSubcategorylessTail = initialHistory.at(-1)?.items.length
+      ? initialHistory
+      : initialHistory.slice(0, -1);
+
+    const {
+      current: currentCategory, history, currentItems, onGoCategoryUp, onGoCategoryDown,
+    } = useMobileCategoryTree(initialHistoryWithSnippedSubcategorylessTail);
+
+    return {
+      currentCategory,
+      currentItems,
+      onGoCategoryUp,
+      onGoCategoryDown,
+      categoryTree,
+      history,
+
+      navigate,
+      isMobileMenuOpen,
+      toggleMobileMenu,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.mobile-menu-sidebar {
+  --sidebar-z-index: 3;
+  --overlay-z-index: 3;
+
+  &__list {
+    .mobile-menu-sidebar__item {
+      padding: var(--spacer-base) 0;
+      --menu-item-font-size: 1.75rem;
+
+      &:not(:first-of-type) {
+        border-top: 1px solid var(--c-light);
+      }
+
+      &:not(:last-of-type) {
+        border-bottom: 1px solid var(--c-light);
+      }
+    }
+  }
+
+  ::v-deep {
+    .nuxt-link-active {
+      --menu-item-label-color: var(--c-primary);
+    }
+  }
+}
+.go-back {
+  display: flex;
+  align-items: center;
+}
+</style>

packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/__tests__/logic.spec.ts

@@ -0,0 +1,41 @@
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+import { useMobileCategoryTree } from '../logic';
+
+const createCategoryItem = (label: string): CategoryTreeInterface => ({
+  label, items: [], isCurrent: false, count: 10,
+});
+
+describe('categoryTreeLogic', () => {
+  it('can go down down a category', () => {
+    const itemFirst = createCategoryItem('Itemless1');
+    const { history, current, onGoCategoryDown } = useMobileCategoryTree();
+    onGoCategoryDown(itemFirst);
+    expect(current.value.label).toBe(itemFirst.label);
+    expect(history.value).toHaveLength(1);
+  });
+
+  it('can go up a category', () => {
+    const itemFirst = createCategoryItem('Itemless1');
+    const itemSecond = createCategoryItem('Itemless2');
+
+    const { current, onGoCategoryDown, onGoCategoryUp } = useMobileCategoryTree();
+
+    onGoCategoryDown(itemFirst);
+    onGoCategoryDown(itemSecond);
+    onGoCategoryUp();
+
+    expect(current.value.label).toBe(itemFirst.label);
+  });
+
+  it('current item is last in history', () => {
+    const itemFirst = createCategoryItem('Itemless1');
+    const itemSecond = createCategoryItem('Itemless2');
+    const { history, current, onGoCategoryDown } = useMobileCategoryTree();
+
+    onGoCategoryDown(itemFirst);
+    onGoCategoryDown(itemSecond);
+
+    expect(current.value.label).toBe(itemSecond.label);
+    expect(history.value).toHaveLength(2);
+  });
+});

packages/theme/modules/catalog/category/components/sidebar/MobileCategorySidebar/logic.ts

@@ -0,0 +1,20 @@
+import { computed, ref } from '@nuxtjs/composition-api';
+import { CategoryTreeInterface } from '~/modules/catalog/category/types';
+
+export const useMobileCategoryTree = (initialHistory: CategoryTreeInterface[] = []) => {
+  const history = ref<CategoryTreeInterface[]>(initialHistory);
+  const current = computed<CategoryTreeInterface | null>(() => history.value.at(-1) ?? null);
+  const currentItems = computed<CategoryTreeInterface[]>(() => current.value?.items);
+  const onGoCategoryDown = (category: CategoryTreeInterface) => {
+    history.value.push(category);
+  };
+  const onGoCategoryUp = () => history.value.pop();
+
+  return {
+    history,
+    current,
+    currentItems,
+    onGoCategoryUp,
+    onGoCategoryDown,
+  };
+};