Release/v1.0.0 rc.5.1

components/AddToWishlist.vue

@@ -0,0 +1,75 @@
+<template>
+  <component
+    :is="component"
+    v-if="isShow"
+    class="add-to-wishlist"
+    @click="$emit('addToWishlist')"
+  >
+    <SfIcon
+      :icon="isInWishlist ? isInWishlistIcon : wishlistIcon"
+      size="lg"
+      color="green-primary"
+      viewBox="0 0 24 24"
+      :coverage="1"
+    />
+    <SfButton class="sf-button--text">
+      {{ $t(actionText) }}
+    </SfButton>
+  </component>
+</template>
+
+<script>
+import { defineComponent, computed } from '@nuxtjs/composition-api';
+import { SfIcon, SfButton } from '@storefront-ui/vue';
+
+export default defineComponent({
+  name: 'AddToWishlist',
+  components: {
+    SfIcon,
+    SfButton,
+  },
+  props: {
+    component: {
+      type: String,
+      default: 'span',
+    },
+    isInWishlist: {
+      type: Boolean,
+      default: false,
+    },
+    wishlistIcon: {
+      type: String,
+      default: 'heart',
+    },
+    isInWishlistIcon: {
+      type: String,
+      default: 'heart_fill',
+    },
+    isShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const actionText = computed(() => (props.isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'));
+
+    return {
+      actionText,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.add-to-wishlist {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  &__content {
+    margin-left: 5px;
+    display: flex;
+  }
+}
+</style>

components/CurrencySelector.vue

@@ -21,7 +21,11 @@
           <a
             href="/"
             :class="selectedCurrency === currency ? 'container__currency--selected-label' : ''"
-            @click.prevent="handleChanges(() => changeCurrency(currency), false, true)"
+            @click.prevent="handleChanges({
+              callback: () => changeCurrency(currency),
+              redirect: false,
+              refresh: true
+            })"
           >
             <SfCharacteristic class="currency">
               <template #title>
@@ -86,7 +90,8 @@ export default defineComponent({
         minimumFractionDigits: 0,
         maximumFractionDigits: 0,
       },
-    ).replace(/\d/g, '')
+    )
+      .replace(/\d/g, '')
       .trim());
 
     const { handleChanges } = useHandleChanges();
@@ -143,10 +148,12 @@ export default defineComponent({
       display: flex;
     }
   }
+
   &__currency {
     &--selected-label {
       font-weight: bold;
     }
+
     width: 20px;
     --button-box-shadow: none;
     padding: 0px;

components/LocaleSelector.vue

@@ -26,7 +26,11 @@
             href="/"
             class="container__store--link"
             :class="storeGetters.getSelected(storeConfig, store) ? 'container__store--selected' : ''"
-            @click="handleChanges(() => changeStore(store))"
+            @click="handleChanges({
+              callback: () => changeStore(store),
+              redirect: false,
+              windowRefresh: true,
+            })"
           >
             <SfCharacteristic class="language">
               <template #title>

components/LoginModal.vue

@@ -42,7 +42,7 @@
             </ValidationProvider>
             <ValidationProvider
               v-slot="{ errors }"
-              rules="required|password"
+              rules="required"
             >
               <SfInput
                 v-model="form.password"

components/Products/BundleProductSelector.vue

@@ -4,8 +4,8 @@
   >
     <SfList class="bundle_products">
       <SfListItem
-        v-for="(bundle, index) in bundleProduct"
-        :key="index"
+        v-for="(bundle) in bundleProduct"
+        :key="`${bundle.uid}`"
         class="bundle_products--item"
       >
         <p
@@ -17,8 +17,8 @@
           class="bundle_products--options"
         >
           <SfListItem
-            v-for="(option, i) in bundle.options"
-            :key="i"
+            v-for="(option) in bundle.options"
+            :key="`${option.uid}`"
             class="bundle_products--options-option"
           >
             <template
@@ -57,14 +57,14 @@
         <SfQuantitySelector
           v-if="selectedOptions[bundle.uid]"
           v-model="selectedOptions[bundle.uid].quantity"
-          :disabled="canChangeQuantity(bundle) || !canAddToCart"
+          :disabled="!canChangeQuantity || !canAddToCart"
         />
       </SfListItem>
     </SfList>
     <SfButton
       v-e2e="'product_add-to-cart'"
       :disabled="loading || !canAddToCart"
-      class="color-primary sf-button bundle_products--add-to-cart"
+      class="color-primary bundle_products--add-to-cart"
       @click="addToCart"
     >
       Add to Cart
@@ -83,7 +83,6 @@ import { productGetters, useCart } from '@vue-storefront/magento';
 import {
   computed,
   defineComponent,
-  onBeforeMount,
   ref,
   watch,
 } from '@nuxtjs/composition-api';
@@ -110,22 +109,27 @@ export default defineComponent({
   setup(props, { emit }) {
     const { product, loading: productLoading } = productData();
     const { loading, addItem } = useCart();
-    const selectedOptions = ref(() => bundleProductInitialSelector(productGetters.getBundleProducts(product.value)));
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const bundleProduct = computed(() => productGetters.getBundleProducts(product.value));
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const selectedOptions = ref(() => []);
+    selectedOptions.value = bundleProductInitialSelector(bundleProduct.value);
+
     const canChangeQuantity = (bundle) => {
       const selectedOption = bundle.options.find((o) => o.uid === selectedOptions.value[bundle.uid]?.uid);
 
       return !selectedOption.can_change_quantity;
     };
 
     const price = computed(() => Object.keys(selectedOptions.value)
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       .reduce((s, k) => s + (Number.parseFloat(selectedOptions.value[k].price) * selectedOptions.value[k].quantity), 0));
 
     const addToCart = async () => {
-      const bundleProductData = computed(() => Object.keys(selectedOptions.value).map((k, i) => {
-        const selectedOption = selectedOptions.value[k];
+      const bundleProductData = computed(() => Object.keys(selectedOptions.value).map((selectedOptionKey) => {
+        const selectedOption = selectedOptions.value[selectedOptionKey];
         return {
           uid: selectedOption.uid,
           value: selectedOption.quantity,
@@ -141,10 +145,6 @@ export default defineComponent({
       });
     };
 
-    onBeforeMount(() => {
-      selectedOptions.value = bundleProductInitialSelector(bundleProduct.value);
-    });
-
     watch(bundleProduct, (newVal) => {
       selectedOptions.value = newVal;
     }, { deep: true });
@@ -197,7 +197,11 @@ export default defineComponent({
         &:before{
           content: '+';
           margin-right: 5px;
-          font: var(--price-regular-font, var(--price-regular-font-weight, var(--font-weight--medium)) var(--price-regular-font-size, var(--font-size--lg))/var(--price-regular-font-line-height, 1.6) var(--price-regular-font-family, var(--font-family--secondary)));
+          font: var(--price-regular-font,
+                var(--price-regular-font-weight,
+                var(--font-weight--medium)) var(--price-regular-font-size,
+                var(--font-size--lg))/var(--price-regular-font-line-height, 1.6) var(--price-regular-font-family,
+                var(--font-family--secondary)));
           color: var(--price-regular-color, var(--c-text));
         }
       }

helpers/magentoConfig/handleChanges.ts

@@ -9,10 +9,16 @@ export const useHandleChanges = () => {
     fullPath,
   } = route.value;
 
-  const handleChanges = async (cb, redirect = true, refresh = false) => {
-    if (cb) {
-      await cb();
+  const handleChanges = async ({
+    callback,
+    redirect = true,
+    refresh = false,
+    windowRefresh = false,
+  }) => {
+    if (callback) {
+      await callback();
     }
+
     if (redirect) {
       await router.replace(path);
     }
@@ -21,6 +27,10 @@ export const useHandleChanges = () => {
       // @ts-ignore
       router.go(fullPath);
     }
+
+    if (windowRefresh) {
+      window.location.reload();
+    }
   };
 
   return {

nuxt.config.js

@@ -84,6 +84,7 @@ export default {
     'cookie-universal-nuxt',
     'vue-scrollto/nuxt',
     '@vue-storefront/middleware/nuxt',
+    '@nuxtjs/html-validator',
   ],
   i18n: {
     country: 'US',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/magento-theme",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.5.1",
   "private": true,
   "license": "MIT",
   "homepage": "https://github.com/vuestorefront/magento2",
@@ -26,11 +26,12 @@
   "dependencies": {
     "@nuxtjs/composition-api": "^0.31.0",
     "@nuxtjs/google-fonts": "^1.3.0",
+    "@nuxtjs/html-validator": "^0.6.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.2.1",
     "@storefront-ui/vue": "^0.11.3",
     "@vue-storefront/core": "~2.5.2",
-    "@vue-storefront/magento": "1.0.0-rc.5",
+    "@vue-storefront/magento": "1.0.0-rc.5.1",
     "@vue-storefront/middleware": "~2.5.2",
     "@vue-storefront/nuxt": "~2.5.2",
     "@vue-storefront/nuxt-theme": "~2.5.2",

pages/MyAccount/OrderHistory.vue

@@ -73,6 +73,7 @@
           <SfButton
             data-cy="order-history-btn_start"
             class="no-orders__button"
+            @click="$router.push('/')"
           >
             {{ $t('Start shopping') }}
           </SfButton>

pages/Product.vue

@@ -144,6 +144,13 @@
                 class="product__add-to-cart"
                 @click="addItem({ product, quantity: parseInt(qty) })"
               />
+              <div class="product__additional-actions">
+                <AddToWishlist
+                  :is-in-wishlist="isInWishlist"
+                  :is-show="isAuthenticated"
+                  @addToWishlist="addItemToWishlist({product})"
+                />
+              </div>
             </div>
             <LazyHydrate when-idle>
               <SfTabs
@@ -289,6 +296,7 @@ import ProductAddReviewForm from '~/components/ProductAddReviewForm.vue';
 import UpsellProducts from '~/components/UpsellProducts';
 import RelatedProducts from '~/components/RelatedProducts';
 import HTMLContent from '~/components/HTMLContent';
+import AddToWishlist from '~/components/AddToWishlist';
 
 export default defineComponent({
   name: 'ProductPage',
@@ -315,6 +323,7 @@ export default defineComponent({
     SfSelect,
     SfTabs,
     UpsellProducts,
+    AddToWishlist,
   },
   middleware: cacheControl({
     'max-age': 60,
@@ -344,10 +353,7 @@ export default defineComponent({
       addReview,
     } = useReview(`productReviews-${id}`);
     const { isAuthenticated } = useUser();
-    const {
-      isInWishlist,
-      addItem: addToWishlist,
-    } = useWishlist('GlobalWishlist');
+    const { addItem: addItemToWishlist, isInWishlist } = useWishlist('GlobalWishlist');
     const { error: nuxtError } = useContext();
     const basePrice = ref(0);
     const openTab = ref(1);
@@ -408,10 +414,7 @@ export default defineComponent({
           return productGetters.getPrice(product.value).special;
       }
     });
-
-    const addItemToWishlist = async () => {
-      await addToWishlist({ product: product.value });
-    };
+
     const changeTab = (tabNumber, callback) => {
       document
         .querySelector('#tabs')
@@ -690,6 +693,11 @@ export default defineComponent({
     }
   }
 
+  &__additional-actions {
+    display: flex;
+    justify-content: flex-start;
+  }
+
   &__gallery {
     flex: 1;
   }