@lancom/shared 0.0.422 → 0.0.423

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -63,8 +63,8 @@
               :display-products-count="true"
               class="ProductColorsSelector__section" />
             <div
-              class="ProductColorsSelector__toggle-gst"
-              v-if="hasToggleGst">
+              v-if="hasToggleGst"
+              class="ProductColorsSelector__toggle-gst">
               <checkbox
                 v-model="inclGST"
                 :dark="true"
@@ -75,13 +75,14 @@
           </div>
           <div class="ProductColorsSelector__countries">
             <div>
-              Stock by countries: 
+              Stock by countries:
             </div>
             <div>
               <client-settings-stock-country />
             </div>
           </div>
-          <products-size-selector-color
+          <component
+            :is="productsSizeSelector"
             :key="productDetailsKey"
             :with-gst="inclGSTFinal"
             class="ProductColorsSelector__section"
@@ -101,6 +102,7 @@ import ProductColorsSelector from '@lancom/shared/components/product/layouts/pro
 import ProductColorsSelectorOptions from '@lancom/shared/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options';
 import ProductColorImage from '@lancom/shared/components/product/product_color_image/product-color-image';
 import ProductsSizeSelectorColor from '@lancom/shared/components/product/products_size_selector_color/products-size-selector-color';
+import ProductsMultipacksSizeSelectorColor from '@lancom/shared/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color';
 import ClientSettingsStockCountry from '@lancom/shared/components/common/client_settings_stock_country/client-settings-stock-country';
 
 export default {
@@ -113,14 +115,6 @@ export default {
     Multiselect,
     ClientSettingsStockCountry
   },
-  data() {
-    return {
-      inclGSTFinal: false,
-      inclGSTSpinner: false,
-      inclGSTSpinnerTimer: null,
-      opened: true
-    };
-  },
   props: {
     hasAnotherPrintBtn: {
       type: Boolean,
@@ -131,9 +125,17 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      inclGSTFinal: false,
+      inclGSTSpinner: false,
+      inclGSTSpinnerTimer: null,
+      opened: true
+    };
+  },
   computed: {
     ...mapGetters(['stockCountry', 'taxName']),
-    ...mapGetters('product', ['productDetailsKey', 'editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
+    ...mapGetters('product', ['product', 'productDetailsKey', 'editableColor', 'availableColors', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'priceIncludeGST']),
     selectedColor: {
       get() {
         return this.editableColor;
@@ -149,6 +151,13 @@ export default {
       set(value) {
         this.setPriceIncludeGST(value);
       }
+    },
+    productsSizeSelector() {
+      return this.availableMultipacksColorsSelector ? ProductsMultipacksSizeSelectorColor : ProductsSizeSelectorColor;
+    },
+    availableMultipacksColorsSelector() {
+      const multipacks = (this.product.multipacks || []);
+      return multipacks.some(m => !m.SKU);
     }
   },
   watch: {

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.vue

@@ -63,6 +63,9 @@ export default {
       type: Object,
       required: true
     },
+    multipack: {
+      type: Object
+    },
     sideControls: {
       type: Boolean,
       default: false
@@ -88,7 +91,7 @@ export default {
   },
   computed: {
     ...mapGetters(['currency']),
-    ...mapGetters('product', ['usedSimpleProducts', 'product']),
+    ...mapGetters('product', ['commonProductsMultipacks', 'usedSimpleProducts', 'product']),
     disabled() {
       const sizeWithoutColor = this.color.sizes && !this.color.sizes.find(({ alias }) => alias === this.size.alias);
       return sizeWithoutColor || this.outStock;
@@ -97,17 +100,34 @@ export default {
       return this.usedSimpleProducts
         .find(({ color, size }) => color._id === this.color._id && size._id === this.size._id);
     },
+    simpleProductAmount() {
+      return (this.simpleProduct || {}).amount || this.defaultValue || 0;
+    },
     model: {
       get() {
-        return (this.simpleProduct || {}).amount || this.defaultValue;
+        const amount = this.simpleProductAmount;
+        if (this.multipack) {
+          const biggerMultipacks = [...this.commonProductsMultipacks]
+            .sort((a, b) => b.qty - a.qty)
+            .filter(p => p.qty > this.multipack.qty);
+          const biggerMultipacksAmount = amount - biggerMultipacks.reduce((leftAmount, p) => leftAmount % p.qty, amount);
+          const multipackAmount = amount - biggerMultipacksAmount;
+          const result = Math.floor(multipackAmount / this.multipack.qty);
+          return result;
+        }
+        return amount;
       },
       set(value) {
         const outOfStockQuantity = this.simpleProduct?.quantityStock;
+        if (this.multipack) {
+          const leftAmount = this.simpleProductAmount - (this.model * this.multipack.qty);
+          value = leftAmount + Math.max(0, value) * this.multipack.qty;
+        }
         if (outOfStockQuantity && outOfStockQuantity < value && this.showMaxModal) {
           const message = `Maximum value: ${outOfStockQuantity}`;
           this.showConfirmationModal(message);
         }
-        const amount = inRange(value, 0, outOfStockQuantity || 999);
+        const amount = inRange(value, 0, outOfStockQuantity || 1000);
         this.setSimpleProductAmount({
           colorId: this.color._id,
           sizeId: this.size._id,

package/components/product/products_multipacks_size_selector_color/product_multipacks_size_selector_color/product-multipacks-size-selector-color.scss

@@ -0,0 +1,61 @@
+@import '@/assets/scss/variables';
+
+.ProductMultipacksSizeSelectorColor {
+  &__wrapper td {
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    &.disabled {
+      color: $gray_main;
+      pointer-events: none !important;
+    }
+  }
+  &__color-name {
+    width: 70px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+      width: 100%;
+      display: block;
+      margin-left: -20px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      width: 40px;
+      span {
+        margin-left: -6px;
+      }
+    }
+  }
+  &__size {
+    width: 70px;
+  }
+  &__in-stock,
+  &__out-stock {
+    font-weight: 600;
+    text-transform: none;
+  }
+  &__out-stock {
+    color: $gray_main;
+  }
+  &__stock {
+    font-size: 11px;
+    letter-spacing: -1px;
+  }
+}
+
+::v-deep .ProductSizeSelectorColorCell {
+  &__field {
+    line-height: 20px;
+    input {
+      height: 30px;
+      padding: 5px !important;
+      background-color: $gray;
+    }
+  }
+  &__side-control {
+    background: $green;
+    width: 26px;
+  }
+}

package/components/product/products_multipacks_size_selector_color/product_multipacks_size_selector_color/product-multipacks-size-selector-color.vue

@@ -0,0 +1,102 @@
+<template>
+  <tr class="ProductMultipacksSizeSelectorColor__wrapper">
+    <td
+      v-if="rowspan"
+      :rowspan="rowspan"
+      class="ProductMultipacksSizeSelectorColor__color-name">
+      <span>
+        {{ product.color.name }}
+      </span>
+    </td>
+    <td
+      class="ProductMultipacksSizeSelectorColor__size"
+      :class="{ disabled }">
+      <div>
+        {{ product.size.shortName }}
+      </div>
+      <div class="ProductMultipacksSizeSelectorColor__stock">
+        <div
+          v-if="product.quantityStock"
+          class="ProductMultipacksSizeSelectorColor__in-stock">
+          {{ currentQuantityStockLabel }} in stock
+        </div>
+        <div
+          v-else
+          class="ProductMultipacksSizeSelectorColor__out-stock">
+          out of stock
+        </div>
+      </div>
+    </td>
+    <td
+      v-for="multipack in commonProductsMultipacks"
+      :key="multipack._id"
+      class="ProductMultipacksSizeSelectorColor__cell">
+      <product-size-selector-color-cell
+        :side-controls="true"
+        :show-max-modal="false"
+        :out-stock="disabled"
+        :color="product.color"
+        :size="product.size"
+        :multipack="multipack" />
+    </td>
+  </tr>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import ProductSizeSelectorColorCell from '@lancom/shared/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell';
+
+export default {
+  name: 'ProductMultipacksSizeSelectorColor',
+  filters: {
+    price
+  },
+  components: {
+    ProductSizeSelectorColorCell
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    rowspan: {
+      type: Number,
+      default: 0
+    },
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['commonProductsMultipacks', 'isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice']),
+    ...mapGetters(['gstTax', 'currency']),
+    currentQuantityStockLabel() {
+      return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;
+    },
+    pricing() {
+      return (this.isPrintPricing ? this.product.pricing : this.product.unprintedPricing) || [];
+    },
+    productPrice() {
+      const amount = this.usedSimpleProductsQuantity;
+      const pricing = this.pricing;
+      const price = (pricing.find(({ min, max }) => (!min || min <= amount) && (!max || max >= amount)) || pricing[0] || {}).price || 0;
+      return this.withGst ? tax(price, this.gstTax) : price;
+    },
+    productPrintsPrice() {
+      return this.withGst ? tax(this.printsPrice, this.gstTax) : this.printsPrice;
+    },
+    disabled() {
+      return !this.product.quantityStock || !this.productPrice;
+    },
+    currentQuantityStock() {
+      return (this.product.quantityStock || 0) - (this.product.amount || 0);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'product-multipacks-size-selector-color.scss';
+</style>

package/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color.scss

@@ -0,0 +1,15 @@
+@import '@/assets/scss/variables';
+
+.ProductsMultipacksSizeSelectorColor {
+  &__table {
+    border: 1px solid $gray;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+  }
+  &__cost-column {
+    width: 150px;
+  }
+}

package/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <table class="ProductsMultipacksSizeSelectorColor__table lc_table bordered">
+      <thead class="centered">
+        <tr>
+          <th
+            colspan="2"
+            class="ProductsMultipacksSizeSelectorColor__cost-column">
+          </th>
+          <th
+            v-for="multipack in commonProductsMultipacks"
+            :key="multipack._id">
+            {{ multipack.name }} ({{ multipack.qty }})
+          </th>
+        </tr>
+        <tr>
+          <th
+            colspan="2"
+            class="ProductsMultipacksSizeSelectorColor__cost-column">
+            COST
+          </th>
+          <th
+            v-for="multipack in commonProductsMultipacks"
+            :key="multipack._id">
+            {{ priceFromRange(multipack.qty, multipack.qty) | price(currency) }}
+          </th>
+        </tr>
+        <tr>
+          <th
+            colspan="2"
+            style="width: 140px;">
+            UNiTCOST
+          </th>
+          <th
+            v-for="multipack in commonProductsMultipacks"
+            :key="multipack._id">
+            {{ priceFromRange(multipack.qty, 1) | price(currency) }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="centered">
+        <product-multipacks-size-selector-color
+          v-for="(product, index) in products"
+          :key="`${editableColor._id}_${product._id}`"
+          :rowspan="index === 0 ? products.length : 0"
+          :with-gst="withGst"
+          :product="product" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { sortBySize } from '@lancom/shared/assets/js/utils/sizes';
+import { priceFromRange } from '@lancom/shared/assets/js/utils/pricing';
+import { price, tax } from '@lancom/shared/assets/js/utils/filters';
+import ProductMultipacksSizeSelectorColor from './product_multipacks_size_selector_color/product-multipacks-size-selector-color';
+
+export default {
+  name: 'ProductsMultipacksSizeSelectorColor',
+  filters: {
+    price
+  },
+  components: {
+    ProductMultipacksSizeSelectorColor
+  },
+  props: {
+    withGst: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters(['gstTax']),
+    ...mapGetters('product', ['defaultSimpleProduct', 'commonProductsMultipacks', 'editableColor', 'editableColorSimpleProducts']),
+    products() {
+      return sortBySize(this.editableColorSimpleProducts);
+    },
+    pricing() {
+      return this.defaultSimpleProduct.pricing;
+    }
+  },
+  methods: {
+    priceFromRange(min, qty) {
+      const price = priceFromRange(min, this.pricing) * qty;
+      return this.withGst ? tax(price, this.gstTax) : price;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-multipacks-size-selector-color.scss';
+</style>

package/components/product/wizard-editor/wizard-editor.vue

@@ -10,7 +10,7 @@
             v-show="visibleWizard" />
         </div>
         <div
-          v-if="editableColor"
+          v-if="editableColor && availableMultipacks"
           class="Editor__section">
           <product-multipacks-carousel
             :key="editableColor._id"
@@ -77,6 +77,10 @@ export default {
       'isPrintPricing',
       'priceIncludeGST'
     ]),
+    availableMultipacks() {
+      const multipacks = (this.product.multipacks || []);
+      return multipacks.some(m => !!m.SKU);
+    },
     visibleWizard() {
       return (this.product.printTypes || []).length > 0;
     },

package/components/products/children_categories/children-categories.scss

@@ -12,7 +12,7 @@
 }
 
 .CategoryCard {
-  width: 270px;
+  width: 170px;
   margin: 0 0 15px 15px;
   position: relative;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
@@ -34,7 +34,7 @@
 
   &__image-wrapper {
     width: 100%;
-    height: 300px;
+    height: 200px;
     overflow: hidden;
     position: relative;
   }
@@ -62,4 +62,4 @@
   @media (max-width: $bp-extra-small-max) {
     margin: 0 auto 25px auto;
   }
-} 
+}

package/layouts/products.vue

@@ -20,16 +20,12 @@
             <h1 class="Products__name">
               {{ routeName }}
             </h1>
-            <div
-              v-if="!visiblChildrenCategories"
-              class="Products__filters">
+            <div class="Products__filters">
               <products-filters @open="openAside" />
             </div>
           </div>
           <div class="Products__content">
-            <div
-              v-if="!visiblChildrenCategories"
-              class="Products__aside">
+            <div class="Products__aside">
               <breakpoint
                 name="md"
                 mode="up">
@@ -37,10 +33,8 @@
               </breakpoint>
             </div>
             <div class="Products__list">
-              <children-categories v-if="visiblChildrenCategories" />
-              <products-catalog
-                v-else
-                class="Products__catalog" />
+              <children-categories v-if="hasChildrenCategories" />
+              <products-catalog class="Products__catalog" />
             </div>
           </div>
           <div
@@ -103,7 +97,7 @@
     async fetch() {
       await this.loadProducts();
 
-      if (this.page === 1 && this.products.length === 0) {
+      if (this.page === 1) {
         await this.fetchChildrenCategories(this.currentCategory);
       }
 
@@ -115,8 +109,8 @@
       ...mapGetters('page', ['routeInfo']),
       ...mapGetters(['notificationBar', 'shop', 'country', 'currency']),
       ...mapGetters('products', ['category', 'childrenCategories', 'categories', 'brands', 'types', 'tags', 'loadError', 'count', 'products', 'minPrice', 'maxPrice', 'page']),
-      visiblChildrenCategories() {
-        return false; // this.page === 1 && this.products.length === 0 && this.childrenCategories.length > 0;
+      hasChildrenCategories() {
+        return this.childrenCategories.length > 0;
       },
       pageItemCanonical() {
         const page = +this.$route.query.page;

package/package.json

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

package/store/product.js

@@ -56,6 +56,7 @@ export const getters = {
   productDetailsKey: ({ productDetailsKey }) => productDetailsKey,
   loadingProductDetails: ({ loadingProductDetails }) => loadingProductDetails,
   multipack: ({ multipack }) => multipack,
+  commonProductsMultipacks: ({ product }) => product?.multipacks?.filter(p => !p.SKU) || [],
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
   preSetPrints: ({ preSetPrints }) => preSetPrints,