@lancom/shared 0.0.102 → 0.0.106

package/components/pricing/pricing_print/pricing-print.vue

@@ -4,12 +4,15 @@
       <div class="row PricingPrint__content">
         <div
           data-aos="aosFadeLeft"
-          class="col-12 PricingPrint__col">
+          class="col-sm-4 col-12 PricingPrint__col">
           <h2 class="lc_h2">
-            Digital printing price list
+            Digital print pricing
           </h2>
           <p class="PricingPrint__description">
-            No setup costs. No minimum quantity. Price as per the print area
+            Smaller prints means we use less ink, more tees means we save time on order handling.
+          </p>
+          <p class="PricingPrint__description">
+            If you have a wholesale enquiry for <b>125 tees</b> or more, we can also screen print your tees with prices starting from <b>$2</b> to <b>$5</b> per print.
           </p>
           <div class="form-actions pull-left">
             <btn
@@ -21,9 +24,12 @@
         </div>
         <div
           data-aos="aosFadeRight"
-          class="col-12 PricingPrint__col">
+          class="col-sm-8 col-12 PricingPrint__col">
           <div class="PricingPrint__table-container">
-            <discounts-table :product="product" />
+            <product-print-price-info-item
+              :print="printType"
+              :visible-table-name="false"
+              :bordered="true" />
           </div>
         </div>
       </div>
@@ -33,18 +39,24 @@
 
 <script>
 import ContactUs from '@lancom/shared/components/asides/contact_us/contact-us';
-import DiscountsTable from './discounts_table/discounts-table';
+import ProductPrintPriceInfoItem from '@lancom/shared/components/product/product_prints_price_info/product_print_price_info/product_print_price_info_item/product-print-price-info-item';
+import { PRINT_TYPES } from '@lancom/shared/assets/js/constants/print-type';
 
 export default {
   name: 'PricingPrint',
   components: {
-    DiscountsTable
+    ProductPrintPriceInfoItem
   },
   props: {
     product: {
       type: Object
     }
   },
+  computed: {
+    printType() {
+      return (this.product.printTypes || []).find(({ type }) => type === PRINT_TYPES.FULL_COLOUR);
+    }
+  },
   methods: {
     contactUs() {
       this.$aside.show(ContactUs);

package/components/pricing/pricing_products_calculator/pricing-products-calculator.scss

@@ -0,0 +1,64 @@
+@import "@/assets/scss/variables";
+$product_types: tee, hoodie, polo;
+
+.PricingProductsCalculator {
+  &__info {
+    margin-top: 30px;
+  }
+  &__product {
+    &-types {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-column-gap: 8px;
+    }
+    &-type {
+      position: relative;
+      &-info {
+        border-radius: 5px;
+        padding: 78px 25px 16px 25px;
+        text-align: center;
+        font-size: 14px;
+        line-height: 21px;
+        color: $gray;
+        background-color: #FFFFFF;
+        position: relative;
+        cursor: pointer;
+        transition: background-color .22s ease-in-out;
+        &:before {
+          content: '';
+          position: absolute;
+          top: 16px;
+          left: 0;
+          height: 50px;
+          width: 100%;
+          background-repeat: no-repeat;
+          background-size: contain;
+          background-position: center;
+        }
+        &.active {
+          background-color: $light_gray;
+        }
+        &.disabled {
+          opacity: .2;
+          pointer-events: none;
+        }
+        @each $type in $product_types {
+          &.#{$type}:before {
+            background-image: url(../../../static/icons/product_#{$type}.svg);
+          }
+        }
+      }
+    }
+    &-placeholder {
+      font-size: 14px;
+      line-height: 150%;
+      text-align: center;
+      color: $black;
+      position: absolute;
+      text-align: center;
+      top: 20px;
+      left: 0;
+      right: 0;
+    }
+  }
+}

package/components/pricing/pricing_products_calculator/pricing-products-calculator.vue

@@ -0,0 +1,86 @@
+<template>
+  <section class="PricingProductsCalculator__wrapper">
+    <div class="col-12">
+      <div class="lc_h3">
+        Choose Product
+      </div>
+      <div class="PricingProductsCalculator__product-types">
+        <div
+          v-for="item in productTypes"
+          :key="item.type"
+          class="PricingProductsCalculator__product-type">
+          <div
+            class="PricingProductsCalculator__product-type-info"
+            :class="{
+              disabled: !item.product,
+              [item.type]: true,
+              active: item.product === activeProduct
+            }"
+            @click="activeProduct = item.product">
+            {{ item.label }}
+            <div
+              v-if="item.product"
+              class="lc_h3">
+              <product-price-range
+                :product="item.product"
+                :with-gst="true"
+                :without-gst="false"
+                :visible-price-info="false"
+                range-divider="to" />
+            </div>
+          </div>
+          <div
+            v-if="!item.product"
+            class="PricingProductsCalculator__product-placeholder">
+            Pricing <br /> coming soon
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="PricingProductsCalculator__info">
+      <pricing-product-calculator :product="activeProduct" />
+    </div>
+  </section>
+</template>
+
+<script>
+import { PRODUCT_TYPES_LIST, PRODUCT_TYPES } from '@lancom/shared/assets/js/constants/product';
+import ProductPriceRange from '@lancom/shared/components/product/product_price_range/product-price-range';
+import PricingProductCalculator from './pricing_product_calculator/pricing-product-calculator';
+
+export default {
+  name: 'PricingProductsCalculator',
+  components: {
+    PricingProductCalculator,
+    ProductPriceRange
+  },
+  props: {
+    products: {
+      type: Array,
+      required: true
+    }
+  },
+  data() {
+    return {
+      activeProduct: this.findProductByType(PRODUCT_TYPES.TEE)
+    };
+  },
+  computed: {
+    productTypes() {
+      return PRODUCT_TYPES_LIST.map(item => ({
+        ...item,
+        product: this.findProductByType(item.type)
+      }));
+    }
+  },
+  methods: {
+    findProductByType(type) {
+      return this.products.find(p => p.productType?.alias === type);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-products-calculator';
+</style>

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing-product-calculator.scss

@@ -0,0 +1,58 @@
+@import "@/assets/scss/variables";
+
+.PricingProductCalculator {
+  &__prints {
+    margin-top: 20px;
+  }
+  &__icon {
+    height: 180px;
+  }
+  &__print-sizes {
+    display: flex;
+    width: 260px;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &__print-size {
+    font-size: 16px;
+    line-height: 170%;
+    text-align: center;
+    color: $black;
+    background-color: $grey_3;
+    padding: 10px;
+    width: 120px;
+    margin: 4px;
+    cursor: pointer;
+    &--active {
+      color: $white;
+      background-color: $green;
+    }
+    &--full {
+      width: 248px;
+    }
+  }
+  &__delivery {
+    display: flex;
+    align-items: center;
+    &-postcode {
+      width: 300px;
+      margin-top: 15px;
+      margin-left: 20px;
+    }
+  }
+  &__breakdown {
+    font-size: 12px;
+    color: $gray;
+    border-bottom: 1px dashed $gray;
+    cursor: pointer;
+  }
+  &__cost {
+    font-size: 17px;
+    color: $black;
+  }
+  &__reprint {
+    font-size: 15px;
+    color: $gray;
+    margin-top: 10px;
+  }
+}

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing-product-calculator.vue

@@ -0,0 +1,296 @@
+<template>
+  <section class="PricingProductCalculator__wrapper">
+    <div class="lc_h3">
+      Print Details - {{ screenPrintMinQuantity }}
+    </div>
+    <div class="row">
+      <div
+        v-for="side in sides"
+        :key="side.type"
+        class="PricingProductCalculator__prints col-sm-6 col-12">
+        <div class="row">
+          <div class="col-4">
+            <PrintSizeIcon
+              class="PricingProductCalculator__icon"
+              :product="product"
+              :side="side" />
+          </div>
+          <div class="col-8">
+            <div class="PricingProductCalculator__print-sizes">
+              <div
+                v-for="size in side.printSizes"
+                :key="size._id"
+                class="PricingProductCalculator__print-size"
+                :class="{
+                  'PricingProductCalculator__print-size--active': side.printSize === size.alias
+                }"
+                @click="side.printSize = size.alias">
+                {{ size.name }}
+              </div>
+              <div
+                class="PricingProductCalculator__print-size PricingProductCalculator__print-size--full"
+                :class="{
+                  'PricingProductCalculator__print-size--active': !side.printSize
+                }"
+                @click="side.printSize = null">
+                no print
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="lc_h3">
+      Print Colours
+    </div>
+    <div class="row">
+      <div
+        v-for="side in sides"
+        :key="side.type"
+        class="PricingProductCalculator__prints col-sm-6 col-12">
+        <div style="padding: 0px 30px">
+          <range
+            v-model="side.colorsQuantity"
+            :min="1"
+            :max="maxScreenPrintColors"
+            :visible-steps="true" />
+          <div class="row">
+            <div class="col-6">
+              <label class="form-label PaymentModal__label-with-checkbox">
+                <checkbox
+                  v-model="side.fullColor"
+                  @change="onChangeFullColor(side)" />
+                <span class="lc_regular14 lc__grey1">
+                  Full colour
+                </span>
+              </label>
+            </div>
+            <div class="col-6">
+              <label class="form-label PaymentModal__label-with-checkbox">
+                <checkbox v-model="side.hasUnderbase" />
+                <span class="lc_regular14 lc__grey1">
+                  With Underbase
+                </span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="lc_h3">
+      Products Quantity
+    </div>
+    <div style="padding: 30px">
+      <range
+        v-model="quantity"
+        :min="1"
+        :max="999"
+        :visible-steps="true" />
+    </div>
+    <div class="PricingProductCalculator__delivery">
+      <div class="lc_h5 mr-10">
+        Delivery
+      </div>
+      <div class="PricingProductCalculator__delivery-postcode">
+        <postcode-select v-model="postcode" />
+      </div>
+    </div>
+    <div class="row">
+      <div
+        v-for="(printTypePricing, index) in printTypesPricing"
+        :key="index"
+        class="PricingProductCalculator__prints col-6">
+        <div class="row">
+          <div class="col-6">
+            <div
+              v-if="printTypePricing.prints[0]"
+              class="mb-10">
+              <div class="lc_h4">
+                {{ labels[printTypePricing.type] }}
+              </div>
+              <div class="lc_regular13">
+                Minimum: {{ printTypePricing.prints[0].printType.minQuantity > 1 ? printTypePricing.prints[0].printType.minQuantity : 'No minimum' }}
+              </div>
+            </div>
+            <div class="PricingProductCalculator__cost">
+              Cost Per Unit: <b>{{ printTypePricing.pricing.products.price | price }}</b>
+            </div>
+            <div>
+              <v-popover
+                trigger="hover"
+                :delay="{ hide: 400 }"
+                popover-class="tooltip popover white">
+                <span class="PricingProductCalculator__breakdown">
+                  breakdown
+                </span>
+                <template
+                  slot="popover">
+                  <product-total-pricing :pricing="printTypePricing.pricing" />
+                </template>
+              </v-popover>
+            </div>
+          </div>
+          <div class="col-6">
+            <btn
+              btn-class="green"
+              btn-label="Edit"
+              @onclick="goToEditor()">
+            </btn>
+          </div>
+        </div>
+        <div class="PricingProductCalculator__reprint">
+          <div v-if="printTypePricing.type === 'full colour print'">
+            Repeat Print same cost
+          </div>
+          <div v-else>
+            Repeat Print: {{ (printTypePricing.pricing.products.price - printTypePricing.pricing.products.prints.totalSetupPrice) | price }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { getPrintAreasSizes, getPrintAreaSizes } from '@lancom/shared/assets/js/utils/prints';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import { getProductsForCalculatePricing, generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import Range from '@lancom/shared/components/common/range/range';
+import api from '@lancom/shared/assets/js/api';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
+import debounce from 'lodash.debounce';
+import { mapGetters } from 'vuex';
+import PrintSizeIcon from './print_size_icon/print-size-icon';
+
+export default {
+  name: 'PricingProductCalculator',
+  filters: {
+    price
+  },
+  components: {
+    PrintSizeIcon,
+    PostcodeSelect,
+    Range,
+    ProductTotalPricing
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    const simpleProduct = [...this.product.simpleProducts].sort((a, b) => a.maxPrice - b.maxPrice)[0];
+    const frontPrintSize = getPrintAreasSizes(this.product.printAreas, 'front');
+    const backPrintSize = getPrintAreasSizes(this.product.printAreas, 'back');
+
+    const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
+    const screenPrintMinQuantity = Math.min(...printTypes.map(printType => printType.minQuantity));
+
+    return {
+      simpleProduct: { ...simpleProduct, amount: screenPrintMinQuantity || this.product.minimumOrderQuantity },
+      labels: {
+        'screen print': 'Screen Print',
+        'full colour print': 'Digital Print'
+      },
+      printTypesPricing: [],
+      availablePrintTypes: ['full colour print', 'screen print'],
+      postcode: null,
+      sides: [{
+        type: 'front',
+        printSize: frontPrintSize[0].alias,
+        printSizes: frontPrintSize,
+        colorsQuantity: 1,
+        hasUnderbase: false,
+        fullColor: false
+      }, {
+        type: 'back',
+        printSize: backPrintSize[0].alias,
+        printSizes: backPrintSize,
+        colorsQuantity: 1,
+        hasUnderbase: false,
+        fullColor: false
+      }],
+      calculatePricingWithDebounce: debounce(this.calculatePricing.bind(this), 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    maxScreenPrintColors() {
+      const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
+      return Math.max(...printTypes.map(printType => printType.colorsQuantity));
+    },
+    screenPrintMinQuantity() {
+      const printTypes = this.product.printTypes.filter(printType => printType.type === 'screen print');
+      return Math.min(...printTypes.map(printType => printType.minQuantity));
+    },
+    pricingPayload() {
+      return [
+        this.simpleProduct.amount,
+        this.sides.map(({ colorsQuantity, hasUnderbase, printSize }) => ({ colorsQuantity, hasUnderbase, printSize })),
+        this.postcode
+      ];
+    },
+    quantity: {
+      get() {
+        return this.simpleProduct.amount;
+      },
+      set(amount) {
+        if (amount < this.screenPrintMinQuantity) {
+          this.sides.forEach(side => {
+            side.fullColor = true;
+            this.onChangeFullColor(side);
+          });
+        }
+        this.simpleProduct.amount = amount;
+      }
+    }
+  },
+  watch: {
+    pricingPayload() {
+      this.calculatePricingWithDebounce();
+    }
+  },
+  mounted() {
+    this.calculatePricingWithDebounce();
+  },
+  methods: {
+    async calculatePricing() {
+      this.printTypesPricing = await Promise.all(
+        this.availablePrintTypes.map(async type => {
+          const prints = this.generateSidesPrints(type);
+          const layers = prints.map(({ printType, printSize, printArea }) => ({ printType: printType?._id, printSize: printSize?._id, printArea: printArea?._id }));
+          const entities = getProductsForCalculatePricing(this.product, [this.simpleProduct], layers, true, true);
+          const pricing = await api.calculateProductPrice({ entities, postcode: this.postcode }, this.shop._id);
+          return { pricing, prints, type };
+        })
+      );
+    },
+    generateSidesPrints(type) {
+      return this.sides
+        .filter(({ printSize }) => printSize)
+        .map(side => {
+          const printType = this.getSidePrintType(side, type) || {};
+          const printSize = side.printSizes.find(({ alias }) => alias === side.printSize);
+          const printArea = this.product.printAreas.find(printArea => getPrintAreaSizes(printArea).some(({ _id }) => _id === printSize?._id));
+          return { printType, printSize, printArea };
+        });
+    },
+    getSidePrintType(side, type) {
+      return this.product.printTypes.find(printType => type === printType.type && (type === 'full colour print' || (printType.colorsQuantity === side.colorsQuantity && !!printType.hasUnderbase === !!side.hasUnderbase)));
+    },
+    goToEditor() {
+      const link = generateProductLink(this.product, null, true);
+      this.$router.push(link);
+    },
+    onChangeFullColor(side) {
+      side.colorsQuantity = side.fullColor ? this.maxScreenPrintColors : 1;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-product-calculator';
+</style>

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing_product_print_calculator/pricing-product-print-calculator.scss

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

package/components/pricing/pricing_products_calculator/pricing_product_calculator/pricing_product_print_calculator/pricing-product-print-calculator.vue

@@ -0,0 +1,26 @@
+<template>
+  <section class="PricingProductPrintCalculator__wrapper">
+    <div>{{ print.type }}</div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: 'PricingProductPrintCalculator',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'pricing-product-print-calculator';
+</style>

package/components/pricing/pricing_products_calculator/pricing_product_calculator/print_size_icon/print-size-icon.scss

@@ -0,0 +1,34 @@
+@import "@/assets/scss/variables";
+$product_types: tee, hoodie, polo;
+$product_sides: front, back;
+$print_areas: a3, a4, half_a4, rect10;
+
+.PrintSizeIcon {
+  &__icon {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    &-container {
+      position: relative;
+      width: 150px;
+      height: 150px;
+      overflow: hidden;
+    }
+
+    @each $side in $product_sides {
+      @each $type in $product_types {
+        &.#{$side}.#{$type} {
+          background-image: url(../../../../../static/icons/#{$side}_#{$type}.svg);
+        }
+        @each $print_area in $print_areas {
+          &.#{$side}.#{$type}.#{$print_area} {
+            background-image: url(../../../../../static/icons/#{$side}_#{$type}_#{$print_area}.svg);
+          }
+        }
+      }
+    }
+  }
+}

package/components/pricing/pricing_products_calculator/pricing_product_calculator/print_size_icon/print-size-icon.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="PrintSizeIcon__wrapper">
+    <div class="PrintSizeIcon__icon-container">
+      <transition
+        name="appear-from-top"
+        appear>
+        <div
+          :key="side.printSize"
+          class="PrintSizeIcon__icon view-transition"
+          :class="{
+            [side.type]: true,
+            [printSizeClassname]: true,
+            [productType]: true
+          }">
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script>
+const MAP_SIZE_ALIASES = {
+  a4_h: 'a4',
+  a4_v: 'a4',
+  rect10_l: 'rect10',
+  rect10_r: 'rect10'
+};
+
+export default {
+  name: 'PrintSizeIcon',
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    productType() {
+      const { productType } = this.product || {};
+      return productType?.alias;
+    },
+    printSizeClassname() {
+      return MAP_SIZE_ALIASES[this.side.printSize] || this.side.printSize;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'print-size-icon';
+</style>