chore: release 1.0.0-rc.10

components/AppHeader.vue

@@ -12,8 +12,14 @@
       </template>
       <template #aside>
         <div class="sf-header__switchers">
-          <CurrencySelector class="smartphone-only" />
-          <StoreSwitcher class="smartphone-only" />
+          <CurrencySelector
+            v-if="hasCurrencyToSelect"
+            class="smartphone-only"
+          />
+          <StoreSwitcher
+            v-if="hasStoresToSelect"
+            class="smartphone-only"
+          />
         </div>
       </template>
       <template #header-icons="{ activeIcon }">
@@ -96,6 +102,7 @@
       v-if="isSearchOpen"
       :visible="isSearchOpen"
       :search-results="productSearchResults"
+      @close="isSearchOpen = false"
     />
     <SfOverlay :visible="isSearchOpen" />
   </div>
@@ -126,22 +133,21 @@ import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
 import { useUser } from '~/modules/customer/composables/useUser';
 import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
 import type { CategoryTree, ProductInterface } 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';
+import { useTopBar } from './TopBar/useTopBar';
 
 export default defineComponent({
   components: {
     HeaderNavigation,
     SfHeader,
     SfOverlay,
-    CurrencySelector,
     HeaderLogo,
-    StoreSwitcher,
     SvgImage,
     SfButton,
     SfBadge,
+    CurrencySelector: () => import('~/components/CurrencySelector.vue'),
+    StoreSwitcher: () => import('~/components/StoreSwitcher.vue'),
     SearchBar: () => import('~/components/Header/SearchBar/SearchBar.vue'),
     SearchResults: () => import(
       /* webpackPrefetch: true */ '~/components/Header/SearchBar/SearchResults.vue'
@@ -157,6 +163,8 @@ export default defineComponent({
     const { loadItemsCount: loadWishlistItemsCount } = useWishlist();
     const { categories: categoryList, load: categoriesListLoad } = useCategory();
 
+    const { hasCurrencyToSelect, hasStoresToSelect } = useTopBar();
+
     const isSearchOpen = ref(false);
     const productSearchResults = ref<ProductInterface[] | null>(null);
 
@@ -204,6 +212,8 @@ export default defineComponent({
       toggleWishlistSidebar,
       wishlistHasProducts,
       wishlistItemsQty,
+      hasCurrencyToSelect,
+      hasStoresToSelect,
     };
   },
 });

components/BottomNavigation.vue

@@ -4,7 +4,8 @@
       <SfBottomNavigationItem
         :class="{ 'sf-bottom-navigation__item--active': $route.name && $route.name.startsWith('home') }"
         label="Home"
-        @click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
+        data-testid="bottom-navigation-home"
+        @click="handleHomeClick"
       >
         <template #icon>
           <SvgImage
@@ -17,6 +18,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Menu"
+        data-testid="bottom-navigation-menu"
         @click="loadCategoryMenu"
       >
         <template #icon>
@@ -31,6 +33,7 @@
       <SfBottomNavigationItem
         v-if="isAuthenticated"
         label="Wishlist"
+        data-testid="bottom-navigation-wishlist"
         @click="toggleWishlistSidebar"
       >
         <template #icon>
@@ -44,6 +47,7 @@
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
         label="Account"
+        data-testid="bottom-navigation-account"
         @click="handleAccountClick"
       >
         <template #icon>
@@ -56,11 +60,12 @@
         </template>
       </SfBottomNavigationItem>
       <SfBottomNavigationItem
-        :label="$route.name && $route.name.startsWith('product') ? 'Add to Cart' : 'Basket'"
+        :label="$t('Cart')"
+        data-testid="bottom-navigation-cart"
         @click="toggleCartSidebar"
       >
         <template #icon>
-          <SfCircleIcon aria-label="Add to cart">
+          <SfCircleIcon aria-label="Go to cart">
             <SvgImage
               icon="add_to_cart"
               width="25"
@@ -78,14 +83,15 @@
 <script lang="ts">
 import { SfBottomNavigation, SfCircleIcon } from '@storefront-ui/vue';
 import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
-import { useUiState } from '~/composables';
+import { useUiState } from '~/composables/useUiState';
 import { useUser } from '~/modules/customer/composables/useUser';
 import SvgImage from '~/components/General/SvgImage.vue';
 import { useCategoryStore } from '~/modules/catalog/category/stores/category';
 
 const MobileCategorySidebar = () => import('~/modules/catalog/category/components/sidebar/MobileCategorySidebar/MobileCategorySidebar.vue');
 
 export default defineComponent({
+  name: 'BottomNavigation',
   components: {
     SfBottomNavigation,
     SfCircleIcon,
@@ -103,6 +109,15 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const router = useRouter();
     const { app } = useContext();
+
+    const handleHomeClick = async () => {
+      const homePath = app.localeRoute({ name: 'home' });
+      await router.push(homePath);
+      if (isMobileMenuOpen.value) {
+        toggleMobileMenu();
+      }
+    };
+
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
         await router.push(app.localeRoute({ name: 'customer' }));
@@ -127,7 +142,7 @@ export default defineComponent({
       toggleMobileMenu,
       loadCategoryMenu,
       handleAccountClick,
-      app,
+      handleHomeClick,
     };
   },
 });

components/CartSidebar.vue

@@ -92,6 +92,7 @@
                 <SfCollectedProduct
                   v-for="product in products"
                   :key="product.product.original_sku"
+                  :has-more-actions="false"
                   data-testid="cart-sidebar-collected-product"
                   :image="cartGetters.getItemImage(product)"
                   :title="cartGetters.getItemName(product)"
@@ -293,7 +294,7 @@ import {
   useContext,
   onMounted,
 } from '@nuxtjs/composition-api';
-import _debounce from 'lodash.debounce';
+import { debounce } from 'lodash-es';
 import { cartGetters } from '~/getters';
 import {
   useUiState,
@@ -396,7 +397,7 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-    const delayedUpdateItemQty = _debounce(
+    const delayedUpdateItemQty = debounce(
       (params) => updateItemQty(params),
       1000,
     );
@@ -548,31 +549,12 @@ export default defineComponent({
     }
   }
 
-  &__actions {
-    transition: opacity 150ms ease-in-out;
-  }
-
-  &__save,
-  &__compare {
-    --button-padding: 0;
-
-    &:focus {
-      --cp-save-opacity: 1;
-      --cp-compare-opacity: 1;
-    }
-  }
-
-  &__save {
-    opacity: var(--cp-save-opacity, 0);
-  }
-
-  &__compare {
-    opacity: var(--cp-compare-opacity, 0);
+  ::v-deep .sf-collected-product__actions {
+    display: none;
   }
 
   &:hover {
-    --cp-save-opacity: 1;
-    --cp-compare-opacity: 1;
+    --collected-product-configuration-display: initial;
     @include for-desktop {
       .collected-product__properties {
         display: none;

components/CurrencySelector/CurrenciesModal.vue

@@ -48,7 +48,10 @@ export default defineComponent({
   },
   props: {
     isModalOpen: Boolean,
-    selectedCurrency: String,
+    selectedCurrency: {
+      type: String,
+      default: '',
+    },
   },
   emits: ['closeModal'],
   setup() {
@@ -58,7 +61,7 @@ export default defineComponent({
       load: loadCurrencies,
     } = useCurrency();
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
+    const availableCurrencies = computed<string[]>(() => currencies.value?.available_currency_codes || []);
 
     onMounted(() => {
       if (currencies.value && currencies.value?.available_currency_codes) return;