chore: release 1.0.0-rc.7

.env.example

@@ -1,27 +1,29 @@
-STORE_ENV=dev
-STORE_URL=http://localhost:3000
-NUXT_APP_ENV=development
-NUXT_APP_PORT=3000
-MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
-MAGENTO_EXTERNAL_CHECKOUT=false
-MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
-MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
-MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
-IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
-IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
-MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
-IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
-IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
-REDIS__HOST=127.0.0.1
-REDIS__PORT=6379
-REDIS_PASSWORD=
-REDIS__KEY_PREFIX=
-REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
-REDIS__ENABLED=false
-RECAPTCHA_ENABLED=true
-RECAPTCHA_HIDE_BADGE=false
-RECAPTCHA_VERSION=3
-RECAPTCHA_SITE_KEY=
-RECAPTCHA_SECRET_KEY=
-RECAPTCHA_SIZE=invisible
-RECAPTCHA_MIN_SCORE=0.5
+VSF_NUXT_APP_ENV=development
+VSF_NUXT_APP_PORT=3000
+
+VSF_STORE_URL=http://localhost:3000
+
+VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
+
+VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false
+VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
+VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+
+VSF_IMAGE_PROVIDER=cloudinary
+VSF_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/
+VSF_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com
+
+VSF_REDIS_ENABLED=false
+VSF_REDIS_HOST=127.0.0.1
+VSF_REDIS_PORT=6379
+VSF_REDIS_KEY_PREFIX=
+VSF_REDIS_CACHE_INVALIDATE_URL=/cache-invalidate
+
+VSF_RECAPTCHA_ENABLED=false
+VSF_RECAPTCHA_SITE_KEY=
+VSF_RECAPTCHA_SECRET_KEY=
+VSF_RECAPTCHA_HIDE_BADGE=
+VSF_RECAPTCHA_SIZE=invisible
+VSF_RECAPTCHA_MIN_SCORE=0.5
+VSF_RECAPTCHA_VERSION=3

.gitignore

@@ -93,6 +93,5 @@ sw.*
 *.swp
 
 version
-.env
-!config/example.json
-config/*.json
+.env.*
+!.env.example

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -2,16 +2,6 @@
 <img src="https://user-images.githubusercontent.com/1626923/137092657-fb398d20-b592-4661-a1f9-4135db0b61d5.png" height="80px"/>  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magento_Logo.svg/2560px-Magento_Logo.svg.png" height="80px"/>
 </div>
 
-### Stay connected
-
-[![GitHub Repo stars](https://img.shields.io/github/stars/vuestorefront/vue-storefront?style=social)](https://github.com/vuestorefront/vue-storefront)
-[![Twitter Follow](https://img.shields.io/twitter/follow/vuestorefront?style=social)](https://twitter.com/vuestorefront)
-[![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCkm1F3Cglty3CE1QwKQUhhg?style=social)](https://www.youtube.com/c/VueStorefront)
-[![Discord](https://img.shields.io/discord/770285988244750366?label=join%20discord&logo=Discord&logoColor=white)](https://discord.vuestorefront.io)
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-19-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
 # Magento 2.x theme
 
 ### Vue Storefront 2 integration with Magento
@@ -109,5 +99,4 @@ Thanks go to these wonderful people 🙌:
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

components/AppFooter.vue

@@ -72,7 +72,7 @@
 import {
   SfFooter, SfList, SfImage, SfMenuItem,
 } from '@storefront-ui/vue';
-import { addBasePath } from '@vue-storefront/core';
+import { addBasePath } from '~/helpers/addBasePath';
 
 export default {
   components: {

components/AppHeader.vue

@@ -2,33 +2,22 @@
   <div>
     <SfHeader
       class="sf-header--has-mobile-search"
-      :class="{'header-on-top': isSearchOpen}"
+      :class="{ 'header-on-top': isSearchOpen }"
     >
       <!-- TODO: add mobile view buttons after SFUI team PR -->
       <template #logo>
         <HeaderLogo />
       </template>
-      <template
-        #navigation
-      >
-        <HeaderNavigationItem
-          v-for="(category, index) in categoryTree"
-          :key="index"
-          v-e2e="'app-header-url_women'"
-          class="nav-item"
-          :label="category.label"
-          :link="localePath(getAgnosticCatLink(category))"
-        />
+      <template #navigation>
+        <HeaderNavigation :category-tree="categoryTree" />
       </template>
       <template #aside>
         <div class="sf-header__switchers">
           <CurrencySelector class="smartphone-only" />
           <StoreSwitcher class="smartphone-only" />
         </div>
       </template>
-      <template
-        #header-icons="{activeIcon}"
-      >
+      <template #header-icons="{ activeIcon }">
         <div class="sf-header__icons">
           <SfButton
             v-e2e="'app-header-account'"
@@ -112,20 +101,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
-  SfOverlay,
-  SfHeader,
-  SfButton,
-  SfBadge,
+  SfOverlay, SfHeader, SfButton, SfBadge,
 } from '@storefront-ui/vue';
 
-import {
-  categoryGetters,
-  useCart,
-  useCategory,
-  useUser, useWishlist,
-} from '@vue-storefront/magento';
 import {
   computed,
   ref,
@@ -135,19 +115,25 @@ import {
   onMounted,
   useFetch,
 } from '@nuxtjs/composition-api';
-import HeaderNavigationItem from '~/components/Header/Navigation/HeaderNavigationItem.vue';
+import HeaderNavigation from '~/components/Header/Navigation/HeaderNavigation.vue';
+import useCategory from '~/modules/catalog/category/composables/useCategory';
 import {
+  useCart,
   useUiHelpers,
   useUiState,
 } from '~/composables';
+import useWishlist from '~/modules/wishlist/composables/useWishlist';
+import { useUser } from '~/modules/customer/composables/useUser';
+import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
+import type { CategoryTree } from '~/modules/GraphQL/types';
 import CurrencySelector from '~/components/CurrencySelector.vue';
 import HeaderLogo from '~/components/HeaderLogo.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
 import StoreSwitcher from '~/components/StoreSwitcher.vue';
 
 export default defineComponent({
   components: {
-    HeaderNavigationItem,
+    HeaderNavigation,
     SfHeader,
     SfOverlay,
     CurrencySelector,
@@ -157,54 +143,57 @@ export default defineComponent({
     SfButton,
     SfBadge,
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
-    SearchResults: () => import(/* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'),
+    SearchResults: () => import(
+      /* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'
+    ),
   },
   setup() {
     const router = useRouter();
     const { app } = useContext();
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
-    const { setTermForUrl, getAgnosticCatLink } = useUiHelpers();
+    const { setTermForUrl, getCatLink } = useUiHelpers();
     const { isAuthenticated } = useUser();
-    const { totalQuantity: cartTotalItems, loadTotalQty: loadCartTotalQty } = useCart();
-    const { itemsCount: wishlistItemsQty, loadItemsCount: loadWishlistItemsCount } = useWishlist('GlobalWishlist');
-
-    const {
-      categories: categoryList,
-      search: categoriesListSearch,
-    } = useCategory('AppHeader:CategoryList');
+    const { loadTotalQty: loadCartTotalQty, cart } = useCart();
+    const { loadItemsCount: loadWishlistItemsCount } = useWishlist();
+    const { categories: categoryList, load: categoriesListLoad } = useCategory();
 
+    const wishlistStore = useWishlistStore();
     const isSearchOpen = ref(false);
     const result = ref(null);
+    const wishlistItemsQty = computed(() => wishlistStore.wishlist?.items_count ?? 0);
 
     const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
-    const categoryTree = categoryGetters.getCategoryTree(categoryList.value?.[0])?.items.filter((c) => c.count > 0);
-
+    const categoryTree = ref<CategoryTree[]>([]);
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push(`${app.localePath('/my-account')}`);
+        await router.push(`${app.localePath('/my-account/my-profile')}`);
       } else {
         toggleLoginModal();
       }
     };
 
     useFetch(async () => {
-      await categoriesListSearch({ pageSize: 20 });
+      await categoriesListLoad({ pageSize: 20 });
+
+      categoryTree.value = categoryList.value?.[0]?.children
+        .filter((category) => category.include_in_menu);
     });
 
-    onMounted(() => {
+    onMounted(async () => {
       if (app.$device.isDesktop) {
-        loadCartTotalQty();
-        loadWishlistItemsCount();
+        await loadCartTotalQty();
+        // eslint-disable-next-line promise/catch-or-return
+        await loadWishlistItemsCount({});
       }
     });
 
     return {
       accountIcon,
-      cartTotalItems,
+      cartTotalItems: computed(() => cart.value?.total_quantity ?? 0),
       categoryTree,
-      getAgnosticCatLink,
+      getCatLink,
       handleAccountClick,
       isAuthenticated,
       isSearchOpen,
@@ -235,14 +224,6 @@ export default defineComponent({
   z-index: 2;
 }
 
-.nav-item {
-  --header-navigation-item-margin: 0 var(--spacer-sm);
-
-  .sf-header-navigation-item__item--mobile {
-    display: none;
-  }
-}
-
 .cart-badge {
   position: absolute;
   bottom: 40%;

components/BottomNavigation.vue

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