Merge pull request #4 from DivanteLtd/update/1.12

update 1.12

components/core/CookieNotification.vue

@@ -57,14 +57,14 @@ export default {
       this.isOpen = false
     },
     setVisited () {
-      this.$store.dispatch('claims/set', {claimCode: 'cookiesAccepted', value: true})
+      this.$store.dispatch('claims/set', { claimCode: 'cookiesAccepted', value: true })
     }
   },
   mounted () {
-    this.$store.dispatch('claims/check', {claimCode: 'cookiesAccepted'}).then((cookieClaim) => {
+    this.$store.dispatch('claims/check', { claimCode: 'cookiesAccepted' }).then((cookieClaim) => {
       if (!cookieClaim) {
         this.isOpen = true
-        this.$store.dispatch('claims/set', {claimCode: 'cookiesAccepted', value: false})
+        this.$store.dispatch('claims/set', { claimCode: 'cookiesAccepted', value: false })
       } else {
         this.isOpen = !cookieClaim.value
       }

components/core/ProductBundleOption.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="custom-option mb15">
     <h4> {{ option.title }} </h4>
-    <div class="m5 relative" v-for="opval in option.product_links" :key="opval.id">
+    <div class="m5 relative" v-for="opval in option.product_links" :key="opval.id" data-testid="bundle-single-option">
       <input
         type="radio"
         class="m0 no-outline"

components/core/ProductBundleOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <form class="custom-options">
+  <form class="custom-options" data-testid="bundle-options">
     <div v-for="option in product.bundle_options" :key="('bundleOption_' + option.option_id)">
       <product-bundle-option :option="option" @option-changed="optionChanged" :error-messages="errorMessages" />
     </div>

components/core/ProductCustomOptions.vue

@@ -23,11 +23,11 @@
               type="radio"
               class="m0 no-outline"
               :name="('customOption_' + option.option_id)"
-              :id="('customOption_' + opval.option_type_id)"
+              :id="('customOption_' + option.option_id + '_' + opval.option_type_id)"
               focus
               :value="opval.option_type_id"
               v-model="inputValues[('customOption_' + option.option_id)]"
-            ><label class="pl10 lh20 h4 pointer" :for="('customOption_' + opval.option_type_id)" v-html="opval.title" />
+            ><label class="pl10 lh20 h4 pointer" :for="('customOption_' + option.option_id +'_' + opval.option_type_id)" v-html="opval.title" />
           </div>
         </div>
         <div v-if="option.type === 'checkbox'">

components/core/ProductGalleryCarousel.vue

@@ -11,6 +11,7 @@
       ref="carousel"
       :speed="carouselTransitionSpeed"
       @pageChange="pageChange"
+      :navigate-to="currentPage"
     >
       <slide
         v-for="(images, index) in gallery"
@@ -83,30 +84,29 @@ export default {
   },
   computed: {},
   beforeMount () {
-    this.$bus.$on('filter-changed-product', this.selectVariant)
+    this.$bus.$on('product-after-configure', this.selectVariant)
     this.$bus.$on('product-after-load', this.selectVariant)
   },
   mounted () {
     this.selectVariant()
 
     if (this.configuration.color) {
-      const {color} = this.configuration
+      const { color } = this.configuration
       this.currentColor = color.id
     }
 
     this.$emit('loaded')
   },
   beforeDestroy () {
-    this.$bus.$off('filter-changed-product', this.selectVariant)
+    this.$bus.$off('product-after-configure', this.selectVariant)
     this.$bus.$off('product-after-load', this.selectVariant)
   },
   methods: {
     navigate (index) {
-      if (this.$refs.carousel) {
-        this.$refs.carousel.goToPage(index)
-      }
+      this.currentPage = index
     },
-    selectVariant () {
+    async selectVariant (configuration) {
+      await this.$nextTick()
       if (config.products.gallery.mergeConfigurableChildren) {
         const option = reduce(map(this.configuration, 'attribute_code'), (result, attribute) => {
           result[attribute] = this.configuration[attribute].id
@@ -127,7 +127,7 @@ export default {
       this.$emit('toggle', currentSlide)
     },
     switchCarouselSpeed () {
-      const {color} = this.configuration
+      const { color } = this.configuration
       if (color && this.currentColor !== color.id) {
         this.currentColor = color.id
         this.carouselTransitionSpeed = 0
@@ -137,8 +137,6 @@ export default {
     },
     pageChange (index) {
       this.switchCarouselSpeed()
-
-      this.currentPage = index
       this.hideImageAtIndex = null
     },
     onVideoStarted (index) {

components/core/ProductGalleryImage.vue

@@ -104,11 +104,11 @@ export default {
       return this.highQualityImage
     },
     imageRatio () {
-      const {width, height} = this.$store.state.config.products.gallery
+      const { width, height } = this.$store.state.config.products.gallery
       return `${height / (width / 100)}%`
     },
     style () {
-      return this.calcRatio ? {paddingBottom: this.imageRatio} : {}
+      return this.calcRatio ? { paddingBottom: this.imageRatio } : {}
     },
     isOnline (value) {
       return onlineHelper.isOnline

components/core/ProductGalleryZoomCarousel.vue

@@ -23,6 +23,7 @@
           class="media-zoom-carousel__carousel"
           :speed="carouselTransitionSpeed"
           @pageChange="pageChange"
+          :navigate-to="currentPage"
         >
           <slide
             v-for="(images, index) in gallery"
@@ -104,18 +105,17 @@ export default {
       }
     }
   },
-  destroyed () {
+  beforeDestroy () {
     clearAllBodyScrollLocks()
   },
   methods: {
-    navigate (key) {
-      this.$refs.zoomCarousel.goToPage(key)
+    navigate (index) {
+      this.currentPage = index
     },
     increaseCarouselTransitionSpeed () {
       this.carouselTransitionSpeed = 500
     },
     pageChange (index) {
-      this.currentPage = index
       this.hideImageAtIndex = null
     },
     onVideoStarted (index) {

components/core/ProductImage.vue

@@ -81,11 +81,11 @@ export default {
       return this.highQualityImage
     },
     imageRatio () {
-      const {width, height} = this.$store.state.config.products.gallery
+      const { width, height } = this.$store.state.config.products.gallery
       return `${height / (width / 100)}%`
     },
     style () {
-      return this.calcRatio ? {paddingBottom: this.imageRatio} : {}
+      return this.calcRatio ? { paddingBottom: this.imageRatio } : {}
     },
     isOnline (value) {
       return onlineHelper.isOnline

components/core/ProductPrice.vue

@@ -48,7 +48,7 @@ export default {
     },
     customOptionsPriceDelta () {
       const priceDelta = getCustomOptionPriceDelta(
-        getCustomOptionValues(Object.values(this.customOptions), this.product.custom_options),
+        getCustomOptionValues(Object.values(this.customOptions), this.product.custom_options || []),
         this.product
       )
 

components/core/blocks/Auth/ForgotPass.vue

@@ -66,6 +66,7 @@
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
 import BaseInput from '../Form/BaseInput.vue'
 import { required, email } from 'vuelidate/lib/validators'
+import { Logger } from '@vue-storefront/core/lib/logger'
 import i18n from '@vue-storefront/i18n'
 
 export default {
@@ -105,7 +106,7 @@ export default {
           })
         }
       }).catch((err) => {
-        console.error(err)
+        Logger.error(err)()
         this.$bus.$emit('notification-progress-stop')
       })
     },

components/core/blocks/Auth/Register.vue

@@ -50,6 +50,10 @@
               {
                 condition: !$v.firstName.minLength,
                 text: $t('Name must have at least 2 letters.')
+              },
+              {
+                condition: !$v.firstName.alpha && $v.firstName.$error,
+                text: $t('Accepts only alphabet characters.')
               }
             ]"
           />
@@ -61,10 +65,16 @@
             v-model="lastName"
             @blur="$v.lastName.$touch()"
             :placeholder="$t('Last name *')"
-            :validations="[{
-              condition: !$v.lastName.required && $v.lastName.$error,
-              text: $t('Field is required.')
-            }]"
+            :validations="[
+              {
+                condition: !$v.lastName.required && $v.lastName.$error,
+                text: $t('Field is required.')
+              },
+              {
+                condition: !$v.lastName.alpha && $v.lastName.$error,
+                text: $t('Accepts only alphabet characters.')
+              }
+            ]"
           />
         </div>
         <base-input
@@ -113,13 +123,13 @@
           @blur="$v.conditions.$reset()"
           @change="$v.conditions.$touch()"
           :validations="[{
-            condition: !$v.conditions.required && $v.conditions.$error,
+            condition: !$v.conditions.sameAs && $v.conditions.$error,
             text: $t('You must accept the terms and conditions.')
           }]"
         >
           {{ $t('I accept terms and conditions') }} *
         </base-checkbox>
-        <button-full class="mb20" type="submit">
+        <button-full :disabled="$v.$invalid" class="mb20" type="submit">
           {{ $t('Register an account') }}
         </button-full>
         <div class="center-xs">
@@ -139,7 +149,7 @@ import Register from '@vue-storefront/core/compatibility/components/blocks/Auth/
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
 import BaseCheckbox from 'theme/components/core/blocks/Form/BaseCheckbox.vue'
 import BaseInput from 'theme/components/core/blocks/Form/BaseInput.vue'
-import { required, email, minLength, sameAs } from 'vuelidate/lib/validators'
+import { required, email, minLength, sameAs, alpha } from 'vuelidate/lib/validators'
 
 export default {
   validations: {
@@ -149,10 +159,12 @@ export default {
     },
     firstName: {
       minLength: minLength(2),
-      required
+      required,
+      alpha
     },
     lastName: {
-      required
+      required,
+      alpha
     },
     password: {
       minLength: minLength(8),
@@ -163,7 +175,7 @@ export default {
       sameAsPassword: sameAs('password')
     },
     conditions: {
-      required
+      sameAs: sameAs(() => true)
     }
   },
   mixins: [Register],

components/core/blocks/Checkout/OrderReview.vue

@@ -42,7 +42,7 @@
                 @blur="$v.orderReview.terms.$touch()"
                 v-model="orderReview.terms"
                 :validations="[{
-                  condition: !$v.orderReview.terms.required && $v.orderReview.terms.$error,
+                  condition: !$v.orderReview.terms.sameAs && $v.orderReview.terms.$error,
                   text: $t('Field is required')
                 }]"
               >
@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators'
+import { sameAs } from 'vuelidate/lib/validators'
 import Composite from '@vue-storefront/core/mixins/composite'
 
 import BaseCheckbox from 'theme/components/core/blocks/Form/BaseCheckbox'
@@ -130,7 +130,7 @@ export default {
   validations: {
     orderReview: {
       terms: {
-        required
+        sameAs: sameAs(() => true)
       }
     }
   },

components/core/blocks/Checkout/PersonalDetails.vue

@@ -139,7 +139,7 @@
               @blur="$v.acceptConditions.$touch()"
               v-model="acceptConditions"
               :validations="[{
-                condition: !$v.acceptConditions.required && $v.acceptConditions.$error,
+                condition: !$v.acceptConditions.sameAs && $v.acceptConditions.$error,
                 text: $t('You must accept the terms and conditions.')
               }]"
             >
@@ -256,7 +256,7 @@ export default {
       sameAsPassword: sameAs('password')
     },
     acceptConditions: {
-      required
+      sameAs: sameAs(() => true)
     }
   }
 }

components/core/blocks/Header/CompareIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <router-link :to="localizedRoute('/compare')" class="compare-icon no-underline inline-flex" v-if="isActive">
+  <router-link :to="localizedRoute('/compare')" class="compare-icon no-underline inline-flex" v-if="isActive" data-testid="compare-list-icon">
     <i class="material-icons">compare</i>
     <span
       class="compare-count absolute flex center-xs middle-xs border-box py0 px2 h6 lh16 weight-700 cl-white bg-cl-silver"

components/core/blocks/Header/MicrocartIcon.vue

@@ -21,7 +21,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import MicrocartIcon from '@vue-storefront/core/compatibility/components/blocks/Header/MicrocartIcon'
-import {syncCartWhenLocalStorageChange} from '@vue-storefront/core/modules/cart/helpers'
+import { syncCartWhenLocalStorageChange } from '@vue-storefront/core/modules/cart/helpers'
 
 export default {
   mounted () {

components/core/blocks/Header/WishlistIcon.vue

@@ -3,6 +3,7 @@
     type="button"
     class="inline-flex bg-cl-transparent brdr-none relative"
     @click="toggleWishlistPanel"
+    data-testid="wishlist-icon"
     :aria-label="$t('Open wishlist')"
   >
     <i class="material-icons">favorite_border</i>

components/core/blocks/Microcart/EditMode.vue

@@ -33,7 +33,7 @@ export default {
       this.$store.dispatch('cart/configureItem', { product: this.product, configuration })
     },
     getEditedProduct (filter = {}) {
-      const selectedFilters = {...this.getSelectedOptions, [filter.type]: filter}
+      const selectedFilters = { ...this.getSelectedOptions, [filter.type]: filter }
       const sizeId = get(selectedFilters, 'size.id', '')
       const colorId = get(selectedFilters, 'color.id', '')
       const children = this.product.configurable_children || []

components/core/blocks/Microcart/Microcart.vue

@@ -222,7 +222,7 @@ export default {
       this.addCouponPressed = false
     },
     onEscapePress () {
-      this.toggleMicrocart()
+      this.$store.dispatch('ui/closeMicrocart')
     },
     clearCart () {
       this.$store.dispatch('notification/spawnNotification', {

components/core/blocks/Microcart/Product.vue

@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import config from 'config'
 import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 import { formatProductLink } from '@vue-storefront/core/modules/url/helpers'
@@ -178,6 +178,9 @@ export default {
   },
   mixins: [Product, ProductOption, EditMode],
   computed: {
+    ...mapState({
+      isMicrocartOpen: state => state.ui.microcart
+    }),
     hasProductInfo () {
       return this.product.info && Object.keys(this.product.info).length > 0
     },
@@ -297,6 +300,14 @@ export default {
           const maxQuantity = await this.getQuantity()
           this.maxQuantity = maxQuantity
         }
+      }
+    },
+    isMicrocartOpen: {
+      async handler (isOpen) {
+        if (isOpen) {
+          const maxQuantity = await this.getQuantity()
+          this.maxQuantity = maxQuantity
+        }
       },
       immediate: true
     }