@lancom/shared 0.0.269 → 0.0.270

package/components/product/product_multipacks_carousel/product-multipacks-carousel.vue

@@ -9,8 +9,11 @@
           'ProductMultipacksCarousel__item--active': multipack === selectedMultipack
         }">
         <product-multipack
+          :color="color"
           :multipack="multipack"
           :simple-products="simpleProducts"
+          :active="multipack === selectedMultipack"
+          :with-gst="withGst"
           class="elevation2"
           @selected="toggleMultipack(multipack)" />
       </div>
@@ -31,7 +34,7 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex';
+import { mapMutations, mapGetters } from 'vuex';
 import { inRange } from '@lancom/shared/assets/js/utils/filters';
 import ProductMultipack from './product_multipack/product-multipack';
 
@@ -42,25 +45,44 @@ export default {
   },
   data() {
     return {
-      thumbsPage: 0,
-      selectedMultipack: null
+      thumbsPage: 0
     };
   },
   props: {
     product: {
-      type: Array,
+      type: Object,
+      required: true
+    },
+    color: {
+      type: Object,
       required: true
     },
     simpleProducts: {
       type: Array,
       required: true
     },
+    withGst: {
+      type: Boolean,
+      default: false
+    },
     slidesPerRow: {
       type: Number,
       default: 3
     }
   },
+  created() {
+    console.log('LancomProductMultipacks...')
+  },
   computed: {
+    ...mapGetters('product', ['multipack']),
+    selectedMultipack: {
+      get() {
+        return this.multipack;
+      },
+      set(multipack) {
+        this.setMultipack(multipack);
+      }
+    },
     multipacks() {
       return this.product.multipacks || [];
     },
@@ -72,6 +94,7 @@ export default {
     }
   },
   methods: {
+    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount', 'setMultipack']),
     toggleMultipack(multipack) {
       this.selectedMultipack = this.selectedMultipack === multipack ? null : multipack;
       this.clearSimpleProductsAmount();
@@ -79,21 +102,42 @@ export default {
         this.buyMultipack()
       }
     },
-    ...mapMutations('product', ['setSimpleProductAmount', 'clearSimpleProductsAmount']),
     buyMultipack() {
-      const sizes = [
+      const leftQty = this.addSimpleProducts([
         { size: 'S', percent: 0.15 },
         { size: 'M', percent: 0.2 },
         { size: 'XL', percent: 0.3 },
         { size: '2XL', percent: 0.05 },
         { size: 'L' }
-      ];
+      ]);
+      if (leftQty > 0) {
+        this.clearSimpleProductsAmount();
+        const sizes = [
+          { size: 'L' },
+          { size: 'XL' },
+          { size: 'M' },
+          ...this.simpleProducts
+            .filter(sp => sp.color?._id === this.color._id)
+            .filter(simpleProduct => !['L','XL','M'].includes(simpleProduct.size?.shortName))
+            .map(simpleProduct => ({ size: simpleProduct.size?.shortName }))
+        ];
+        const repeatLeftQty = this.addSimpleProducts(sizes);
+        if (repeatLeftQty > 0) {
+          this.selectedMultipack = null;
+          this.clearSimpleProductsAmount();
+          this.$toastr.e('Stock unavailable');
+        }
+      }
+    },
+    addSimpleProducts(sizes) {
       let leftQty = this.selectedMultipack.qty;
       sizes.forEach(s => {
-        const simpleProduct = this.simpleProducts.find(simpleProduct => simpleProduct.size.shortName === s.size);
+        const simpleProduct = this.simpleProducts
+          .filter(sp => sp.color?._id === this.color._id)
+          .find(simpleProduct => simpleProduct.size?.shortName === s.size);
         if (simpleProduct) {
           const qty = s.percent ? +(s.percent * this.selectedMultipack.qty).toFixed(0) : leftQty;
-          const amount = inRange(qty, 0, simpleProduct.quantityStock || 999);
+          const amount = inRange(qty, 0, simpleProduct.quantityStock || 0);
           leftQty -= amount;
           this.setSimpleProductAmount({
             colorId: simpleProduct.color._id,
@@ -102,7 +146,7 @@ export default {
           });
         }
       });
-      
+      return leftQty;
     },
     goToPrevPage() {
       this.thumbsPage = Math.max(0, this.thumbsPage - 1);

package/components/product/product_multipacks_carousel/product_multipack/product-multipack.scss

@@ -1,6 +1,9 @@
 @import "@/assets/scss/variables";
 
 .ProductMultipack {
+  &__wrapper {
+    cursor: pointer;
+  }
   &__price {
     padding: 10px;
     text-align: center;
@@ -34,10 +37,15 @@
     &-info {
       position: absolute;
       top: 0px;
-      right: 0px;
+      left: 0px;
       display: flex;
       flex-direction: column;
       align-items: end;
     }
+    &-active {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+    }
   }
 }

package/components/product/product_multipacks_carousel/product_multipack/product-multipack.vue

@@ -20,47 +20,70 @@
             @onclick="buyMultipack()" />
         </div>
       </div>
+      <div class="ProductMultipack__banner-active">
+        <checked-icon :checked="active" />
+      </div>
     </div>
     <div class="ProductMultipack__price">
-      {{ oneItemPrice | priceWithTax(pricingSettings, currency) }} each 
-      <span>{{ totalPrice | priceWithTax(pricingSettings, currency) }}</span>
+      {{ oneItemPrice | price(currency) }} each 
+      <span>{{ totalPrice | price(currency) }}</span>
     </div>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+import { priceFromRange } from '@lancom/shared/assets/js/utils/pricing';
 
 export default {
   name: 'LancomProductMultipack',
+  components: {
+    CheckedIcon
+  },
   filters: {
-    priceWithTax
+    price
   },
   props: {
+    color: {
+      type: Object,
+      required: true
+    },
     multipack: {
       type: Object,
       required: true
     },
+    withGst: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
     simpleProducts: {
       type: Array,
       required: true
     }
   },
   computed: {
-    ...mapGetters(['pricingSettings', 'currency']),
+    ...mapGetters(['pricingSettings', 'currency', 'gstTax']),
     bannerImage() {
       const banner = this.multipack.banner?.editorImage || this.multipack.banner;
       return banner?.origin;
     },
     simpleProduct() {
-      return (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
+      const simpleProduct = (this.simpleProducts || []).find(sp => sp.SKU === this.multipack.SKU);
+      const simpleProducts = (this.simpleProducts || []).filter(sp => sp.color?._id === this.color._id);
+      return simpleProducts.find(sp => sp.size?.shortName === simpleProduct?.size?.shortName) || simpleProducts[0];
     },
     totalPrice() {
       return this.oneItemPrice * this.multipack.qty;
     },
     oneItemPrice() {
-      return (this.simpleProduct?.pricing || []).find(p => p.min === this.multipack.qty)?.price || 0;
+      const price = priceFromRange(this.multipack.qty, this.simpleProduct?.pricing);
+      return this.withGst ? tax(price, this.gstTax) : price;
     }
   },
   methods: {

package/feeds/google-shopping.js

@@ -92,7 +92,7 @@ async function googleShoppingFeed(axios, config, availableStores) {
                 }
               } else {
                 info['g:pickup_method'] = { _text: 'not_supported' };
-                info['g:excluded_destination'] = { _text: 'Local_inventory_ads' };
+                info['g:excluded_destination'] = [{ _text: 'Local_inventory_ads' }, { _text: 'Free_local_listings' }];
               }
               if (product.volume) {
                 if (product.volume.length) {

package/package.json

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

package/store/product.js

@@ -10,6 +10,7 @@ import { filterBigSize } from '@lancom/shared/assets/js/utils/product';
 import { sortByName } from '../assets/js/utils/filters';
 
 export const state = () => ({
+  multipack: null,
   calculatingPrice: false,
   images: [],
   priceIncludeGST: false,
@@ -45,6 +46,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
   preSetPrint: ({ preSetPrint }) => preSetPrint,
@@ -263,6 +265,9 @@ export const actions = {
 };
 
 export const mutations = {
+  setMultipack(state, multipack) {
+    state.multipack = multipack;
+  },
   setProduct(state, product) {
     state.product = product;
   },