@lancom/shared 0.0.422 → 0.0.424

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/related_products/related-products.vue

@@ -36,15 +36,15 @@ export default {
       products: []
     };
   },
+  async fetch() {
+    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
+    this.products = products.splice(0, 6);
+  },
   computed: {
     ...mapGetters(['shop']),
     hasProducts() {
       return this.products.length > 0;
     }
-  },
-  async fetch() {
-    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
-    this.products = products.splice(0, 6);
   }
 };
 </script>

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/components/resource/resource_view/resource-view.mixin.js

@@ -0,0 +1,74 @@
+import api from '@lancom/shared/assets/js/api';
+
+const ORDER_RESOURCE_STATUS = {
+  PENDING_APPROVAL: 'pending approval',
+  APPROVED: 'approved',
+  NOT_APPROVED: 'not approved'
+};
+
+export default {
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false
+    };
+  },
+  computed: {
+    file() {
+      return this.resource.file;
+    },
+    isNotApproved() {
+      return this.resource.status === ORDER_RESOURCE_STATUS.NOT_APPROVED;
+    },
+    isApproved() {
+      return this.resource.status === ORDER_RESOURCE_STATUS.APPROVED;
+    },
+    isAvailableForApprove() {
+      const statuses = [
+        ORDER_RESOURCE_STATUS.APPROVED,
+        ORDER_RESOURCE_STATUS.NOT_APPROVED,
+        ORDER_RESOURCE_STATUS.PENDING_APPROVAL
+      ];
+      return statuses.includes(this.resource.status);
+    },
+    isValidStatus() {
+      const statuses = [
+        ORDER_RESOURCE_STATUS.APPROVED,
+        ORDER_RESOURCE_STATUS.NOT_APPROVED
+      ];
+      return statuses.includes(this.resource.status);
+    }
+  },
+  mounted() {
+    console.log('this.resource: ', this.resource);
+    console.log('this.order: ', this.order);
+  },
+  methods: {
+    approveMockup() {
+      this.resource.status = 'approved';
+    },
+    notApproveMockup() {
+      this.resource.status = 'not approved';
+    },
+    async submitApproval() {
+      this.processing = true;
+      try {
+        await api.approveOrderMockup(this.order, this.resource);
+        this.processing = false;
+        this.$toastr.s('Approval submitted successfully.');
+      } catch (error) {
+        this.processing = false;
+        this.$toastr.e('Failed to submit approval.');
+      }
+    }
+  }
+};

package/components/resource/resource_view/resource-view.scss

@@ -0,0 +1,13 @@
+.ResourceView {
+  &__wrapper {
+    margin-top: 50px;
+  }
+  &__approve-btn {
+    height: 42px;
+  }
+  &__approve {
+    margin-top: 30px;
+    border: 1px solid #f1f1f1;
+    padding: 10px;
+  }
+}

package/components/resource/resource_view/resource-view.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="ResourceView__wrapper">
+    <div class="row">
+      <div class="col-6">
+        <div class="ResourceView__code lc_h3">
+          {{ order.code }}
+        </div>
+        <div>
+          <div>
+            <div class="ResourceView__code lc_h5">
+              Approve Mockup
+            </div>
+            <div
+              v-if="file"
+              class="lc_regular16">
+              <span>
+                Mockup:
+              </span>
+              <a
+                :href="file.origin"
+                target="_blank"
+                class="lc_black">
+                {{ file.fileName }}
+              </a>
+            </div>
+          </div>
+          <div class="ResourceView__approve">
+            <div>
+              <btn
+                :btn-class="isApproved ? 'purple' : 'white'"
+                :btn-disabled="!isAvailableForApprove || processing"
+                :btn-processing="processing"
+                btn-label="Approved"
+                class="ResourceView__approve-btn"
+                @onclick="approveMockup()">
+              </btn>
+              <btn
+                :btn-class="isNotApproved ? 'purple' : 'white'"
+                :btn-disabled="!isAvailableForApprove"
+                :btn-processing="processing"
+                btn-label="Not Approved"
+                class="ResourceView__approve-btn"
+                @onclick="notApproveMockup()">
+              </btn>
+            </div>
+            <div class="mt-10">
+              <validation-provider
+                tag="div"
+                name="Comment"
+                class="mb-5 mt-5">
+                <textarea
+                  id="timeline_message"
+                  v-model="resource.comment"
+                  name="comment"
+                  style="height: 140px"
+                  placeholder="Comment"
+                  class="form-field no-label"></textarea>
+              </validation-provider>
+            </div>
+            <div class="mt-10">
+              <btn
+                btn-class="green"
+                :btn-disabled="!isValidStatus || processing"
+                :btn-processing="processing"
+                btn-label="Save"
+                class="ResourceView__approve-btn"
+                @onclick="submitApproval()">
+              </btn>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-6">
+        <resource-view-prints
+          :order="order"
+          :resource="resource" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ResourceViewMixin from './resource-view.mixin';
+import ResourceViewPrints from './resource_view_prints/resource-view-prints';
+
+export default {
+  name: 'LancomResourceView',
+  components: {
+    ResourceViewPrints
+  },
+  mixins: [ResourceViewMixin]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view.scss';
+</style>

package/components/resource/resource_view/resource_view_prints/resource-view-prints.scss

@@ -0,0 +1,7 @@
+.ResourceViewPrints {
+  &__print {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 4px solid #d8d8d8;
+  }
+}

package/components/resource/resource_view/resource_view_prints/resource-view-prints.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="ResourceViewPrints__wrapper">
+    <resource-view-print
+      v-for="print in prints"
+      :key="print._id"
+      :order="order"
+      :resource="resource"
+      :print="print"
+      class="ResourceViewPrints__print" />
+  </div>
+</template>
+
+<script>
+import ResourceViewPrint from './resource_view_print/resource-view-print';
+
+export default {
+  name: 'LancomResourceViewPrints',
+  components: {
+    ResourceViewPrint
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    prints() {
+      const productsPrints = this.order.products.reduce((prints, product) => [...prints, ...product.prints], []);
+      return [...this.order.prints, ...productsPrints];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view-prints.scss';
+</style>

package/components/resource/resource_view/resource_view_prints/resource_view_print/resource-view-print.scss

@@ -0,0 +1,5 @@
+.ResourceViewPrint {
+  &__products {
+    margin-top: 5px;
+  }
+}

package/components/resource/resource_view/resource_view_prints/resource_view_print/resource-view-print.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ResourceViewPrint__wrapper">
+    <div class="lc_regular12">
+      <div v-if="print.printType">
+        <b class="lc_bold">Print Type:</b> {{ print.printType.name }}
+      </div>
+      <div v-if="print.printArea">
+        <b class="lc_bold">Print Area:</b> {{ print.printArea.name }}
+      </div>
+      <div v-if="print.printSize">
+        <b class="lc_bold">Print Size:</b> {{ print.printSize.name }}
+      </div>
+    </div>
+    <div class="ResourceViewPrint__products">
+      <resource-view-print-products
+        :order="order"
+        :resource="resource"
+        :print="print" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ResourceViewPrintProducts from './resource_view_print_products/resource-view-print-products';
+
+export default {
+  name: 'LancomResourceViewPrint',
+  components: {
+    ResourceViewPrintProducts
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    resource: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  mounted() {
+    console.log('');
+    console.log('this.print: ', this.print);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'resource-view-print.scss';
+</style>