vuestorefront · Frodigo · Jan 20, 2022 · Jan 20, 2022
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -28,7 +28,7 @@
         />
       </template>
       <template #aside>
-        <LocaleSelector class="smartphone-only" />
+        <StoreSwitcher class="smartphone-only" />
       </template>
       <template
         #header-icons="{activeIcon}"
@@ -178,6 +178,7 @@ import {
   watch,
   defineComponent,
   useRouter,
+  useContext,
 } from '@nuxtjs/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
@@ -190,14 +191,14 @@ import {
   useUiHelpers,
   useUiState,
 } from '~/composables';
-import LocaleSelector from '~/components/LocaleSelector.vue';
+import StoreSwitcher from '~/components/StoreSwitcher.vue';
 import SearchResults from '~/components/SearchResults.vue';
 
 export default defineComponent({
   components: {
     SfHeader,
     SfImage,
-    LocaleSelector,
+    StoreSwitcher,
     SfIcon,
     SfButton,
     SfBadge,
@@ -208,6 +209,7 @@ export default defineComponent({
   directives: { clickOutside },
   setup() {
     const router = useRouter();
+    const { app } = useContext();
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
@@ -246,7 +248,7 @@ export default defineComponent({
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push('/my-account');
+        await router.push(`${app.localePath('/my-account')}`);
       } else {
         toggleLoginModal();
       }

diff --git a/components/BottomNavigation.vue b/components/BottomNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="navigation-bottom smartphone-only">
-    <nuxt-link to="/">
+    <nuxt-link to="localePath('/')">
       <SfBottomNavigationItem
         :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
         icon="home"
@@ -52,7 +52,7 @@
 <script>
 import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
 import { useUser } from '@vue-storefront/magento';
-import { defineComponent, useRouter } from '@nuxtjs/composition-api';
+import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
 import { useUiState } from '~/composables';
 
 export default defineComponent({
@@ -71,10 +71,10 @@ export default defineComponent({
     } = useUiState();
     const { isAuthenticated } = useUser();
     const router = useRouter();
-
+    const { app } = useContext();
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        return router.push('/my-account');
+        await router.push(`${app.localePath('/my-account')}`);
       }
       toggleLoginModal();
     };

diff --git a/components/CartSidebar.vue b/components/CartSidebar.vue
@@ -105,8 +105,6 @@
                       $n(cartGetters.getItemPrice(product).special, 'currency')
                     : ''
                 "
-                :stock="99999"
-                :qty="cartGetters.getItemQty(product)"
                 :link="
                   localePath(
                     `/p/${cartGetters.getItemSku(product)}${cartGetters.getSlug(
@@ -119,14 +117,25 @@
                 @click:remove="sendToRemove({ product })"
               >
                 <template #input>
-                  <div class="sf-collected-product__quantity-wrapper">
+                  <div
+                    v-if="isInStock(product)"
+                    class="sf-collected-product__quantity-wrapper"
+                  >
                     <SfQuantitySelector
                       :disabled="loading"
                       :qty="cartGetters.getItemQty(product)"
                       class="sf-collected-product__quantity-selector"
                       @input="updateItemQty({ product, quantity: $event })"
                     />
                   </div>
+                  <SfBadge
+                    v-else
+                    class="color-danger sf-badge__absolute"
+                  >
+                    <template #default>
+                      <span>{{ $t('Out of stock') }}</span>
+                    </template>
+                  </SfBadge>
                 </template>
                 <template #configuration>
                   <div v-if="getAttributes(product).length > 0">
@@ -221,6 +230,7 @@
   </div>
 </template>
 <script>
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import {
   SfLoader,
   SfNotification,
@@ -232,22 +242,24 @@ import {
   SfCollectedProduct,
   SfImage,
   SfQuantitySelector,
+  SfBadge,
 } from '@storefront-ui/vue';
 import {
   computed,
   defineComponent,
   ref,
   useRouter,
+  useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import {
   useCart,
   useUser,
   cartGetters,
   useExternalCheckout,
 } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
 import { useUiState, useUiNotification } from '~/composables';
 import CouponCode from './CouponCode.vue';
+import stockStatusEnum from '~/enums/stockStatusEnum';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -262,12 +274,14 @@ export default defineComponent({
     SfCollectedProduct,
     SfImage,
     SfQuantitySelector,
+    SfBadge,
     CouponCode,
   },
   setup() {
     const { initializeCheckout } = useExternalCheckout();
     const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
     const router = useRouter();
+    const { app } = useContext();
     const {
       cart,
       removeItem,
@@ -278,7 +292,7 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const { send: sendNotification, notifications } = useUiNotification();
 
-    const products = computed(() => cartGetters.getItems(cart.value));
+    const products = computed(() => cartGetters.getItems(cart.value).filter(Boolean));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];
@@ -287,13 +301,14 @@ export default defineComponent({
     const isLoaderVisible = ref(false);
     const tempProduct = ref();
 
-    onSSR(async () => {
-      await loadCart();
+    onMounted(() => {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      loadCart();
     });
 
     const goToCheckout = async () => {
       const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' });
-      await router.push(redirectUrl);
+      await router.push(`${app.localePath(redirectUrl)}`);
     };
 
     const sendToRemove = ({ product }) => {
@@ -325,10 +340,12 @@ export default defineComponent({
       });
     };
 
+    const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
+
     return {
       sendToRemove,
       actionRemoveItem,
-      loading,
+      loading: computed(() => (!!loading.value)),
       isAuthenticated,
       products,
       removeItem,
@@ -345,6 +362,7 @@ export default defineComponent({
       cartGetters,
       getAttributes,
       getBundles,
+      isInStock,
     };
   },
 });
@@ -492,5 +510,9 @@ export default defineComponent({
       }
     }
   }
+  .sf-badge__absolute {
+    position: absolute;
+    left: 0;
+  }
 }
 </style>
diff --git a/components/CurrencySelector.vue b/components/CurrencySelector.vue
@@ -82,17 +82,23 @@ export default defineComponent({
       change: changeCurrency,
     } = useCurrency();
 
-    const currentCurrencySymbol = computed(() => (0).toLocaleString(
-      selectedLocale.value,
-      {
-        style: 'currency',
-        currency: selectedCurrency.value,
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      },
-    )
-      .replace(/\d/g, '')
-      .trim());
+    const currentCurrencySymbol = computed(() => {
+      try {
+        return (0).toLocaleString(
+          selectedLocale.value.replace(/[!"$-/:-?[\]^_`{-~]/, '-'),
+          {
+            style: 'currency',
+            currency: selectedCurrency.value,
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          },
+        )
+          .replace(/\d/g, '')
+          .trim();
+      } catch {
+        return selectedLocale.value;
+      }
+    });
 
     const { handleChanges } = useHandleChanges();
 
@@ -107,6 +113,7 @@ export default defineComponent({
       handleChanges,
       isCurrencyModalOpen,
       selectedCurrency,
+      selectedLocale,
     };
   },
 });

diff --git a/components/LoginModal.vue b/components/LoginModal.vue
@@ -56,13 +56,6 @@
                 class="form__element"
               />
             </ValidationProvider>
-            <SfCheckbox
-              v-model="rememberMe"
-              v-e2e="'login-modal-remember-me'"
-              name="remember-me"
-              label="Remember me"
-              class="form__element checkbox"
-            />
             <div v-if="error.login">
               {{ error.login }}
             </div>

diff --git a/components/SearchResults.vue b/components/SearchResults.vue
@@ -36,7 +36,7 @@
               >
                 <SfMenuItem
                   :label="category.label"
-                  :link="th.getAgnosticCatLink(category)"
+                  :link="localePath(th.getAgnosticCatLink(category))"
                 >
                   <template #mobile-nav-icon>
                     &#8203;
@@ -76,7 +76,7 @@
                   :image="productGetters.getProductThumbnailImage(product)"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
-                  :link="`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`"
+                  :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
                   :wishlist-icon="isAuthenticated ? 'heart' : ''"
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
@@ -96,7 +96,7 @@
                 :image="productGetters.getProductThumbnailImage(product)"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
-                :link="`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`"
+                :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
                 :wishlist-icon="isAuthenticated ? 'heart' : ''"
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"