@lancom/shared 0.0.388 → 0.0.390

package/assets/js/utils/simple-products.js

@@ -0,0 +1,24 @@
+export function getSimpleProductsColors(simpleProducts, onlyWithStock = true) {
+  const uniqueColorsMap = new Map();
+  (simpleProducts || [])
+    .filter(sp => !onlyWithStock || sp.quantityStock > 0)
+    .forEach(sp => {
+      if (sp.color && !uniqueColorsMap.has(sp.color._id)) {
+        uniqueColorsMap.set(sp.color._id, sp.color);
+      }
+    });
+  return Array.from(uniqueColorsMap.values());
+}
+
+export function getSimpleProductsSizes(simpleProducts, sizesColor, onlyWithStock = true) {
+  const uniqueSizesMap = new Map();
+  (simpleProducts || [])
+    .filter(sp => !onlyWithStock || sp.quantityStock > 0)
+    .forEach(({ size, color }) => {
+      const isSameColor = !sizesColor || color?._id === sizesColor._id;
+      if (size && isSameColor && !uniqueSizesMap.has(size._id)) {
+        uniqueSizesMap.set(size._id, size);
+      }
+    });
+  return Array.from(uniqueSizesMap.values());
+}

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

@@ -9,7 +9,9 @@
       </div>
     </div>
     <div class="ProductsKitCart__info">
-      <div class="ProductsKitCart__price">
+      <div
+        v-if="isAllOptionsSelected"
+        class="ProductsKitCart__price">
         {{ totalPrice | price }}
       </div>
       <div>
@@ -107,6 +109,7 @@ export default {
         };
         await this.addToCart(data);
         this.$toastr.s('Products Kit successfully added to cart');
+        this.kitQty = 1;
         this.clearOptions();
         this.clearProductsKitPricing();
       } catch (e) { 

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

@@ -34,6 +34,7 @@
 import { mapGetters, mapActions } from 'vuex';
 import Multiselect from 'vue-multiselect';
 import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
+import { getSimpleProductsColors } from '@lancom/shared/assets/js/utils/simple-products';
 
 export default {
   name: 'ProductsKitOptionColor',
@@ -66,15 +67,7 @@ export default {
     },
     availableColors() {
       const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
-      const uniqueColorsMap = new Map();
-      simpleProducts
-        .filter(sp => sp.quantityStock > 0)
-        .forEach(sp => {
-          if (sp.color && !uniqueColorsMap.has(sp.color._id)) {
-            uniqueColorsMap.set(sp.color._id, sp.color);
-          }
-        });
-      return Array.from(uniqueColorsMap.values());
+      return getSimpleProductsColors(simpleProducts);
     }
   },
   methods: {

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

@@ -13,8 +13,29 @@
     margin: 0 0 15px 15px;
     position: relative;
     z-index: 1;
+    &--without-price {
+      height: 440px;
+    }
   }
   &__select {
     padding: 0 20px 10px 20px;
   }
+  &__config {
+    position: relative;
+  }
+  &__no-stock {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    opacity: 0.5;
+    font-size: 17px;
+    font-weight: bold;
+    z-index: 2;
+  }
 }

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

@@ -4,11 +4,17 @@
     :class="{
       'ProductsKitOptionProduct__wrapper--active': isSelectedProduct
     }">
-    <div class="ProductsKitOptionProduct__preview">
+    <div
+      class="ProductsKitOptionProduct__preview"
+      :class="{
+        'ProductsKitOptionProduct__preview--without-price': option.required
+      }">
       <product-preview-main
         ref="preview"
         :product="product"
         :to-editor="false"
+        :visible-prices="!option.required"
+        @preview="onPreviewProduct($event)"
         @color="onProductSelectColor($event)" />
     </div>
     <div class="ProductsKitOptionProduct__select">
@@ -19,7 +25,7 @@
         btn-label="SELECT" />
       <div
         v-if="isSelectedProduct"
-        class="mt-5">
+        class="ProductsKitOptionProduct__config mt-5">
         <products-kit-option-color
           :products-kit="productsKit"
           :option="option"
@@ -33,6 +39,11 @@
           class="mt-5 lc_subtitle3">
           Stock: {{ currentQuantityStockLabel }}
         </div>
+        <div
+          v-if="dontHaveAvailableStock"
+          class="ProductsKitOptionProduct__no-stock">
+          out of stock
+        </div>
       </div>
     </div>
   </div>
@@ -43,6 +54,7 @@ import { mapGetters, mapActions } from 'vuex';
 import ProductPreviewMain from '@/components/product/product_preview_main/product-preview-main';
 import ProductsKitOptionColor from '@lancom/shared/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_color/products-kit-option-color';
 import ProductsKitOptionSize from '@lancom/shared/components/products_kit/products_kit/products_kit_options/products_kit_option/products_kit_option_size/products-kit-option-size';
+import { getSimpleProductsSizes, getSimpleProductsColors } from '@lancom/shared/assets/js/utils/simple-products';
 
 export default {
   name: 'ProductsKitOptionProduct',
@@ -95,7 +107,13 @@ export default {
     },
     currentQuantityStockLabel() {
       return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;
-    }
+    },
+    dontHaveAvailableStock() {
+      const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
+      const colors = getSimpleProductsColors(simpleProducts);
+      const sizes = getSimpleProductsSizes(simpleProducts, this.selectedColor);
+      return this.isSelectedProduct && (!colors.length || (this.selectedColor && !sizes.length));
+    },
   },
   watch: {
     selectedColor() {
@@ -117,6 +135,12 @@ export default {
     },
     onProductSelectColor(color) {
       this.selectOptionColor({ option: this.option, color });
+    },
+    onPreviewProduct(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      this.selectProduct();
     }
   }
 };

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

@@ -29,6 +29,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import Multiselect from 'vue-multiselect';
+import { getSimpleProductsSizes } from '@lancom/shared/assets/js/utils/simple-products';
 
 export default {
   name: 'ProductsKitOptionSize',
@@ -64,16 +65,7 @@ export default {
     },
     availableSizes() {
       const simpleProducts = this.selectedOptionsSimpleProducts[this.option._id] || [];
-      const uniqueSizesMap = new Map();
-      simpleProducts
-        .filter(sp => sp.quantityStock > 0)
-        .forEach(({ size, color }) => {
-          const isSameColor = color?._id === this.selectedColor?._id;
-          if (size && isSameColor && !uniqueSizesMap.has(size._id)) {
-            uniqueSizesMap.set(size._id, size);
-          }
-        });
-      return Array.from(uniqueSizesMap.values());
+      return getSimpleProductsSizes(simpleProducts, this.selectedColor);
     }
   },
   watch: {

package/feeds/google-shopping.js

@@ -79,7 +79,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 'g:size_system': COUNTRIES_SIZE_SYSTEMS[country] || country || 'AU',
                 'g:ships_from_country': country || 'AU',
                 'g:size_type': 'regular',
-                'g:gender': { _text: product.gender },
+                'g:gender': { _text: product.feedGender || product.gender },
                 'g:material': { _text: product.fabricInfoShort },
                 'g:brand': { _text: product.brand.name },
                 'g:condition': { _text: 'new' },
@@ -177,6 +177,10 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:lifestyle_image_link'] = { _text: staticLink(product.feedLifestyleImage, config) };
               }
 
+              if (product.feedAgeGroup) {
+                info['g:age_group'] = { _text: product.feedAgeGroup };
+              }
+
               return info;
             })
         ];

package/mixins/product-preview.js

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

package/nuxt.config.js

@@ -32,6 +32,7 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
     exclude: [
       // '/',
       '/faq',
+      '/quotes/request',
       '/products/',
       '/preview/**',
       '/checkout/**',

package/package.json

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

package/plugins/vee-validate.js

@@ -22,7 +22,7 @@ extend('email', {
       if (auDomain && auDomain[0]) {
         return auDomain[0] === '.com.au';
       } else if (comDomain && comDomain[0]) {
-        return comDomain[0] === '.com';
+        return ['.com', '.college'].includes(comDomain[0]);
       }
       return true;
     }