@lancom/shared 0.0.396 → 0.0.397

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.397",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

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);
   }
 };