@lancom/shared 0.0.396 → 0.0.398

package/assets/js/utils/coupon.js

@@ -0,0 +1,13 @@
+export function getCouponFreeProducts(coupon, product) {
+  const freeProducts = coupon?.qualifyingProducts?.reduce((products, qualifyingProduct) => {
+    if (qualifyingProduct.products.includes(product?._id || product)) {
+      return [
+        ...products,
+        ...qualifyingProduct.freeProducts
+      ];
+    }
+    return products;
+  }, []);
+
+  return freeProducts || [];
+}

package/assets/js/utils/gtm.js

@@ -156,14 +156,16 @@ const gtm = {
 };
 
 function getOrderItems(order) {
-  return order.products.reduce((products, { product, simpleProducts }) => {
-    return [
-      ...products,
-      ...simpleProducts
-        .filter(({ amount }) => amount > 0)
-        .map(sp => getOrderItem(product, sp))
-    ];
-  }, [])
+  return order.products
+    .filter(p => !p.isFree)
+    .reduce((products, { product, simpleProducts }) => {
+      return [
+        ...products,
+        ...simpleProducts
+          .filter(({ amount }) => amount > 0)
+          .map(sp => getOrderItem(product, sp))
+      ];
+    }, [])
 }
 
 function getOrderItem(product, simpleProduct, currency) {
@@ -173,7 +175,7 @@ function getOrderItem(product, simpleProduct, currency) {
     item_id: SKU,
     item_variant: `${product.name} ${color?.name || ''}-${size?.shortName || ''}`.trim(),
     item_name: product.name.trim(),
-    item_brand: product.brand.name,
+    item_brand: product.brand?.name,
     price: productCost,
     currency: currency?.isoCode || 'AUD',
     quantity: amount,

package/assets/js/utils/order.js

@@ -39,20 +39,21 @@ export function populateProductsFields(products, pricing) {
     product.designId = designId;
 
     product.colors = (product.simpleProducts || []).reduce((colors, sp) => {
-      if (!colors.includes(sp.color._id)) {
-        colors.push(sp.color._id);
+      const _id = sp.color._id || sp.color;
+      if (!colors.includes(_id)) {
+        colors.push(_id);
       }
       return colors;
     }, []);
 
     if (pricing) {
       const productPricing = pricing.products[product.guid] || pricing.products[product?.product._id];
-      product.totalPrice = productPricing.totalPriceWithoutTax;
-      product.printsTotalPrice = productPricing.prints.totalPriceWithoutTax;
-      product.productsTotalPrice = productPricing.products.totalPriceWithoutTax;
+      product.totalPrice = productPricing?.totalPriceWithoutTax;
+      product.printsTotalPrice = productPricing?.prints.totalPriceWithoutTax;
+      product.productsTotalPrice = productPricing?.products.totalPriceWithoutTax;
 
       (product.simpleProducts || []).forEach(sp => {
-        const spPricing = productPricing.products[sp.guid] || productPricing.products[sp._id];
+        const spPricing = productPricing?.products[sp.guid] || productPricing?.products[sp._id];
         if (spPricing) {
           sp.totalPrice = spPricing.totalPriceWithoutTax;
           sp.productCost = spPricing.priceWithoutTax;
@@ -60,7 +61,7 @@ export function populateProductsFields(products, pricing) {
       });
 
       (product.prints || []).forEach(p => {
-        const pPricing = productPricing.prints[p.printArea?._id];
+        const pPricing = productPricing?.prints[p.printArea?._id];
         if (pPricing) {
           p.totalPrice = pPricing.totalPriceWithoutTax;
           p.printCost = pPricing.priceWithoutTax;
@@ -92,6 +93,7 @@ export function populatePrints(products) {
 }
 
 export function generateOrderData(data, cartEntities, pricing) {
+  console.log('generateOrderData:cartEntities: ', cartEntities);
   const order = {
     ...data,
     products: populateProductsFields(cartEntities, pricing),

package/components/checkout/cart/cart.mixin.js

@@ -19,6 +19,7 @@ export default {
       'needToPickup',
       'needToPickupWithoutErrors',
       'entities',
+      'entitiesWithoutFreeProducts',
       'cartPricing',
       'simpleProducts',
       'simpleProductsQuantity',
@@ -35,7 +36,7 @@ export default {
       return this.isNotValidProductsQuantity || this.isNotValidStockQuantity || this.isNotValidPrintsQuantity || this.isNotValidPrintsBigSizeQuantity;
     },
     isNotValidShipping() {
-      return this.needToPickup ? (this.notValidProductsPickup.length > 0 && !this.suburb) : !this.suburb; 
+      return this.needToPickup ? (this.notValidProductsPickup.length > 0 && !this.suburb) : !this.suburb;
     },
     isNotValidProductsQuantity() {
       return this.notValidProductsQuantities.length > 0;
@@ -51,7 +52,7 @@ export default {
     }
   },
   watch: {
-    entities() {
+    entitiesWithoutFreeProducts() {
       this.calculateCartPriceWithDebounce({ shop: this.shop, country: this.country, currency: this.currency });
     }
   },

package/components/checkout/cart/cart.vue

@@ -32,7 +32,7 @@
             <cart-price-info @loaded="loadedPricing($event)" />
           </div>
           <div class="Cart__postcode-container">
-            
+
           </div>
           <div class="Cart__coupon-container">
             <coupon-select
@@ -99,12 +99,12 @@ export default {
   mixins: [CartMixin],
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
-    ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
+    ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities', 'entitiesWithoutFreeProducts']),
     productsEntities() {
-      return this.entities.filter(e => !e.productsKit)
+      return this.entitiesWithoutFreeProducts.filter(e => !e.productsKit)
     },
     productsKitsEntities() {
-      const entities = this.entities.filter(e => !!e.productsKit);
+      const entities = this.entitiesWithoutFreeProducts.filter(e => !!e.productsKit);
       const groupedEntities = entities.reduce((acc, entity) => {
         const { productsKitGuid, productsKit } = entity;
         if (!acc[productsKitGuid]) {
@@ -132,7 +132,7 @@ export default {
   },
   methods: {
     loadedPricing() {
-      gtm.viewCart(this.entities, this.cartPricing, this.currency);
+      gtm.viewCart(this.entitiesWithoutFreeProducts, this.cartPricing, this.currency);
     }
   }
 };

package/components/checkout/cart/cart_entity/cart-entity.mixin.js

@@ -1,6 +1,7 @@
 import { mapGetters } from 'vuex';
 import { groupSimpleProducts } from '@lancom/shared/assets/js/utils/cart';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import { getCouponFreeProducts } from '@lancom/shared/assets/js/utils/coupon';
 
 export default {
   props: {
@@ -17,8 +18,15 @@ export default {
     ...mapGetters(['SETTINGS']),
     ...mapGetters('cart', [
       'cartPricing',
-      'cartProductsPricing'
+      'cartProductsPricing',
+      'coupon'
     ]),
+    hasCouponFreeProducts() {
+      return this.couponFreeProducts.length > 0;
+    },
+    couponFreeProducts() {
+      return getCouponFreeProducts(this.coupon, this.product);
+    },
     product() {
       return this.entity.product;
     },

package/components/checkout/cart/cart_entity/cart-entity.scss

@@ -50,6 +50,9 @@
   &__decorations {
     margin-top: 14px;
   }
+  &__free-products {
+    margin-top: 14px;
+  }
   &__subtotal {
     text-align: right;
     margin-top: 24px;

package/components/checkout/cart/cart_entity/cart-entity.vue

@@ -73,6 +73,13 @@
         class="CartEntity__decorations">
         <cart-entity-prints :entity="entity" />
       </div>
+      <div
+        v-if="hasCouponFreeProducts"
+        class="CartEntity__free-products">
+        <cart-coupon-free-products
+          :free-products="couponFreeProducts"
+          :entity="entity" />
+      </div>
       <div class="CartEntity__subtotal lc_title">
         Subtotal: {{ totalPrice | price(currency) }}
       </div>
@@ -87,6 +94,7 @@
 <script>
 import { price } from '@lancom/shared/assets/js/utils/filters';
 import CartEntityPrints from './cart_entity_prints/cart-entity-prints';
+import CartCouponFreeProducts from './cart_coupon_free_products/cart-coupon-free-products';
 import CartEntityColorSimpleProducts from './cart_entity_color_simple_products/cart-entity-color-simple-products';
 import CartEntity from './cart-entity.mixin';
 
@@ -97,7 +105,8 @@ export default {
   },
   components: {
     CartEntityPrints,
-    CartEntityColorSimpleProducts
+    CartEntityColorSimpleProducts,
+    CartCouponFreeProducts
   },
   mixins: [
     CartEntity

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart-coupon-free-products.scss

@@ -0,0 +1,11 @@
+@import "@/assets/scss/variables";
+
+.CartCouponFreeProducts {
+  &__label {
+    font-size: 12px;
+    font-weight: bold;
+  }
+  &__product {
+    margin-top: 5px;
+  }
+}

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart-coupon-free-products.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="CartCouponFreeProducts__wrapper">
+    <div class="CartCouponFreeProducts__label">
+      Free products
+    </div>
+    <cart-coupon-free-product
+      v-for="freeProduct in freeProducts"
+      :key="freeProduct._id"
+      :free-product="freeProduct"
+      :entity="entity"
+      class="CartCouponFreeProducts__product" />
+  </div>
+</template>
+
+<script>
+import CartCouponFreeProduct from './cart_coupon_free_product/cart-coupon-free-product';
+
+export default {
+  name: 'CartCouponFreeProducts',
+  components: {
+    CartCouponFreeProduct
+  },
+  props: {
+    freeProducts: {
+      type: Array,
+      required: true
+    },
+    entity: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-coupon-free-products.scss';
+</style>

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart_coupon_free_product/cart-coupon-free-product.scss

@@ -0,0 +1,7 @@
+@import "@/assets/scss/variables";
+
+.CartCouponFreeProduct {
+  &__wrapper {
+    font-size: 14px;
+  }
+}

package/components/checkout/cart/cart_entity/cart_coupon_free_products/cart_coupon_free_product/cart-coupon-free-product.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="CartCouponFreeProduct__wrapper">
+    {{ freeProduct.name }} x {{ qty }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CartCouponFreeProduct',
+  props: {
+    freeProduct: {
+      type: Object,
+      required: true
+    },
+    entity: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    qty() {
+      return this.entity.simpleProducts?.reduce((qty, sp) => qty + (sp.amount || 0), 0) || 0;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-coupon-free-product.scss';
+</style>

package/components/common/phone_input/phone-input.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <div>{{ item }}</div>
     <div class="form-row">
       <label
         v-if="labelless"

package/components/products_kit/products_kit/products_kit_cart/products-kit-cart.scss

@@ -17,10 +17,10 @@
     margin: 0 20px;
   }
   &__qty {
-    margin-left: 10px;
+    margin-right: 10px;
     ::v-deep {
       input {
-        padding: 14px;
+        padding: 11px;
         font-size: 20px;
         width: 110px;
       }

package/components/products_kit/products_kit/products_kit_cart/products-kit-cart.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="ProductsKitCart__wrapper">
     <div class="ProductsKitCart__products">
-      <products-kit-cart-options :productsKit="productsKit" />
-      <div class="ProductsKitCart__qty">
-        <number-input
-          v-model="kitQty"
-          :disabled="addingToCart || !isAllOptionsSelected" />
-      </div>
-    </div>
-    <div class="ProductsKitCart__info">
+      <products-kit-cart-options :products-kit="productsKit" />
       <div
         v-if="isAllOptionsSelected"
         class="ProductsKitCart__price">
         {{ totalPrice | price }}
       </div>
+    </div>
+    <div class="ProductsKitCart__info">
+      <div class="ProductsKitCart__qty">
+        <number-input
+          v-model="kitQty"
+          :disabled="addingToCart || !isAllOptionsSelected" />
+      </div>
       <div>
         <btn
-          :btn-disabled="addingToCart || !isAllOptionsSelected"
+          :btn-disabled="addingToCart || !isAllOptionsSelected || !kitQty"
           btn-class="green"
-          btn-label="ADD TO CART" 
-          @onclick="proceedToCard()"/>
+          btn-label="ADD TO CART"
+          @onclick="proceedToCard()" />
       </div>
     </div>
   </div>
@@ -109,10 +109,10 @@ export default {
         };
         await this.addToCart(data);
         this.$toastr.s('Products Kit successfully added to cart');
-        this.kitQty = 1;
+        this.kitQty = 0;
         this.clearOptions();
         this.clearProductsKitPricing();
-      } catch (e) { 
+      } catch (e) {
         console.log(e);
       } finally {
         this.addingToCart = false;

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_color/products-kit-option-color.scss

@@ -1 +1,16 @@
 @import "@/assets/scss/variables";
+
+::v-deep {
+  .multiselect {
+    min-height: 20px;
+    &__tags {
+      padding: 5px;
+      min-height: 20px;
+    }
+    &__single {
+      font-size: 14px;
+      line-height: 20px;
+      margin: 3px 0 0 4px;
+    }
+  }
+}

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products-kit-option-products.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex';
 import ProductsKitOptionProduct from './products_kit_option_product/products-kit-option-product';
 
 export default {
@@ -27,6 +28,31 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    ...mapGetters([
+      'country',
+      'currency',
+      'stockCountry'
+    ])
+  },
+  mounted() {
+    if (this.option.required && this.option.products?.length === 1) {
+      this.selectProduct(this.option.products[0]);
+    }
+  },
+  methods: {
+    ...mapActions('productsKit', ['selectOptionProduct']),
+    selectProduct(product) {
+      const params = {
+        country: this.country?._id,
+        currency: this.currency?._id,
+        stockCountry: this.stockCountry?._id,
+        option: this.option,
+        product
+      };
+      this.selectOptionProduct(params);
+    }
   }
 };
 </script>

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.scss

@@ -8,13 +8,13 @@
     }
   }
   &__preview {
-    width: 250px;
-    height: 490px;
-    margin: 0 0 15px 15px;
+    width: 175px;
+    height: 290px;
+    margin: 7px;
     position: relative;
     z-index: 1;
     &--without-price {
-      height: 440px;
+      height: 340px;
     }
   }
   &__select {
@@ -38,4 +38,38 @@
     font-weight: bold;
     z-index: 2;
   }
+}
+::v-deep {
+  .ProductPreview {
+    &__link {
+      height: 175px;
+      &-cover,
+      &-cover-hover {
+        height: 175px;
+        top: 10px;
+      }
+    }
+    &__sku {
+      font-size: 13px;
+    }
+    &__name {
+      font-size: 15px;
+      line-height: 20px;
+      margin-top: 1px;
+      min-height: 35px;
+    }
+    &__prices-printed-price {
+      font-size: 16px;
+      line-height: 20px;
+    }
+    &__slogan-item {
+      span {
+        padding: 2px 3px;
+        font-size: 8px;
+      }
+    }
+    &__content {
+      padding: 10px 10px 0px 10px;
+    }
+  }
 }

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_products/products_kit_option_product/products-kit-option-product.vue

@@ -13,6 +13,7 @@
         ref="preview"
         :product="product"
         :to-editor="false"
+        :visible-color-thumbs="false"
         :visible-prices="!option.required"
         @preview="onPreviewProduct($event)"
         @color="onProductSelectColor($event)" />
@@ -22,7 +23,7 @@
         :btn-block="true"
         @onclick="selectProduct"
         :btn-class="isSelectedProduct ? 'green' : 'gray'"
-        btn-label="SELECT" />
+        :btn-label="isSelectedProduct ? 'DESELECT' : 'SELECT'" />
       <div
         v-if="isSelectedProduct"
         class="ProductsKitOptionProduct__config mt-5">
@@ -129,7 +130,7 @@ export default {
         currency: this.currency?._id,
         stockCountry: this.stockCountry?._id,
         option: this.option,
-        product: this.product
+        product: this.isSelectedProduct ? null : this.product
       };
       this.selectOptionProduct(params);
     },

package/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size.scss

@@ -1 +1,15 @@
 @import "@/assets/scss/variables";
+
+::v-deep {
+  .multiselect {
+    min-height: 20px;
+    &__tags {
+      padding: 8px 5px 5px 9px;
+      min-height: 20px;
+    }
+    &__single {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.vue

@@ -15,7 +15,7 @@
         class="form-field centered QuoteProductColorSimpleProduct__field"
         :class="{
           empty: !model,
-          error: model > simpleProduct.quantityStock
+          error: model > simpleProduct.quantityStock && !quote.ignoreStockAvailability
         }"
         @wheel="onWheel"
         @change="onChange()" />
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import confirm from '@lancom/shared/mixins/confirm';
 import { inRange, price } from '@lancom/shared/assets/js/utils/filters';
 
@@ -52,6 +53,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters('quote', ['quote']),
     model: {
       get() {
         return this.simpleProduct.amount;

package/mixins/product-preview.js

@@ -29,6 +29,10 @@ const productPreview = {
     visiblePrices: {
       type: Boolean,
       default: true
+    },
+    visibleColorThumbs: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.396",
+  "version": "0.0.398",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/pages/checkout/order.vue

@@ -43,7 +43,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('cart', ['entities', 'coupon', 'cartPricing'])
+    ...mapGetters('cart', ['entitiesWithoutFreeProducts', 'entities', 'coupon', 'cartPricing'])
   },
   methods: {
     loadedPricing() {
@@ -52,7 +52,7 @@ export default {
         value: this.cartPricing.totalPriceWithoutTax,
         currency: 'AUD',
         coupon: this.cartPricing.coupon?.code,
-        items: this.entities.reduce((products, { guid: productGuid, product, simpleProducts }) => {
+        items: this.entitiesWithoutFreeProducts.reduce((products, { guid: productGuid, product, simpleProducts }) => {
           return [
             ...products,
             ...simpleProducts

package/store/cart.js

@@ -3,6 +3,7 @@ import api from '@lancom/shared/assets/js/api';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
 import { getPrintTypeSizePricing } from '@lancom/shared/assets/js/utils/prints';
 import { filterBigSize } from '@lancom/shared/assets/js/utils/product';
+import { getCouponFreeProducts } from '@lancom/shared/assets/js/utils/coupon';
 
 const SUPPLIERS_WITH_RATES_KEY = 'suppliers-with-rates';
 
@@ -73,7 +74,27 @@ const getPrintsQuantities = entities => {
 };
 
 export const getters = {
-  entities: ({ entities }) => entities,
+  entitiesWithoutFreeProducts: ({ entities }) => entities,
+  entities: ({ entities, coupon }) => {
+    return entities.reduce((list, entity) => {
+      const amount = entity.simpleProducts?.reduce((count, sp) => count + +(sp.amount || 0), 0) || 0;
+      const freeProducts = getCouponFreeProducts(coupon, entity.product);
+      return [
+        ...list,
+        entity,
+        ...freeProducts
+          .filter(p => !!p.simpleProducts?.[0])
+          .map(product => ({
+            isFree: true,
+            designId: entity.designId,
+            product,
+            colors: [product.simpleProducts[0].color],
+            prints: [],
+            simpleProducts: [{ ...product.simpleProducts[0], amount }]
+          }))
+      ];
+    }, []);
+  },
   coupon: ({ coupon }) => coupon,
   needToPickup: ({ needToPickup }) => needToPickup,
   needToPickupWithoutErrors: (state, { notValidProductsPickup }) => state.needToPickup && notValidProductsPickup?.length === 0,
@@ -170,7 +191,7 @@ export const actions = {
     })).filter(({ simpleProducts }) => simpleProducts.length > 0);
     const payload = {
       _id: state.id,
-      entities, 
+      entities,
       currency: currency?._id
     };
     await api.saveCart(payload, shop._id);
@@ -235,7 +256,6 @@ export const actions = {
     localStorage.removeItem(SUPPLIERS_WITH_RATES_KEY);
     commit('setSuburb', suburb);
     commit('setCartPricing', null);
-    
   },
   async selectRate({ state: { cartPricing, entities, suburb, coupon }, commit }, { supplier, rate, shop, country, currency }) {
     const suppliersWithRates = cartPricing.shipping.suppliersWithRates

package/store/productsKit.js

@@ -5,7 +5,7 @@ import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
 import Vue from 'vue';
 
 export const state = () => ({
-  amount: 1,
+  amount: 0,
   productsKit: null,
   loadError: null,
   selectedOptionsProducts: {},
@@ -39,10 +39,14 @@ export const getters = {
   selectedOptionsSimpleProducts: ({ selectedOptionsSimpleProducts }) => selectedOptionsSimpleProducts,
   selectedOptionsColors: ({ selectedOptionsColors }) => selectedOptionsColors,
   selectedOptionsSizes: ({ selectedOptionsSizes }) => selectedOptionsSizes,
-  isAllOptionsSelected: ({ productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
-    const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes);
+  isAllOptionsSelected: ({ productsKit, selectedOptionsColors, selectedOptionsSizes, selectedOptionsProducts }) => {
     const requiredOptions = productsKit.productsKitOptions?.filter(pk => pk.required) || [];
-    return requiredOptions?.length <= selectedSimpleProducts?.length;
+    const isAllRequieredSelected = requiredOptions.every(o => !!selectedOptionsProducts[o._id] && !!selectedOptionsColors[o._id] && !!selectedOptionsSizes[o._id]);
+
+    const selectedNotRequiredOptions = productsKit.productsKitOptions?.filter(pk => !pk.required && selectedOptionsProducts[pk._id]) || [];
+    const isAllNotRequieredSelected = selectedNotRequiredOptions.every(o => !!selectedOptionsColors[o._id] && !!selectedOptionsSizes[o._id]);
+
+    return isAllRequieredSelected && isAllNotRequieredSelected;
   },
   selectedSimpleProducts: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes),
   maxOrderQty: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
@@ -93,7 +97,7 @@ export const actions = {
   },
   async selectOptionProduct({ commit }, { option, product, country, currency, stockCountry }) {
     const params = { country, currency, stockCountry };
-    const simpleProducts = await api.fetchProductDetails(null, product.alias, params);
+    const simpleProducts = product ? (await api.fetchProductDetails(null, product.alias, params)) : [];
 
     commit('setSelectedOptionProduct', { option, product });
     commit('setSelectedOptionSimpleProducts', { option, simpleProducts });
@@ -137,7 +141,7 @@ export const actions = {
     commit('setCalculatingPrice', false);
   },
   updateAmount({ getters, commit }, amount) {
-    const value = Math.min(getters.maxOrderQty, Math.max(amount, 1));
+    const value = Math.min(getters.maxOrderQty, Math.max(amount, 0));
     commit('setAmount', value);
   }
 };