@lancom/shared 0.0.105 → 0.0.106

package/components/pricing/pricing_example/pricing-example.scss

@@ -1,6 +1,9 @@
 @import "@/assets/scss/variables";
 
 .PricingExample {
+  &__tabs {
+    margin-bottom: 30px;
+  }
   &__description {
     line-height: 170%;
     color: $gray;
@@ -59,7 +62,7 @@
     }
     &-total-price {
       font-weight: bold;
-      font-size: 40px;
+      font-size: 30px;
       line-height: 120%;
       letter-spacing: 0.02em;
       color: $green;

package/components/pricing/pricing_example/pricing-example.vue

@@ -5,6 +5,18 @@
         <div
           data-aos="aosFadeLeft"
           class="col-sm-5 col-12 PricingExample__col">
+          <div class="PricingExample__tabs">
+            <btn
+              :btn-class="availablePrintType === 'full colour print' ? 'green' : 'white'"
+              btn-label="Digital printing"
+              @onclick="changeAvailablePrintType('full colour print')">
+            </btn>
+            <btn
+              :btn-class="availablePrintType === 'screen print' ? 'green' : 'white'"
+              btn-label="Screen printing"
+              @onclick="changeAvailablePrintType('screen print')">
+            </btn>
+          </div>
           <h2 class="lc_h2">
             Example of price calculation
           </h2>
@@ -36,29 +48,41 @@
             <div class="PricingExample__example-formula-table">
               <table
                 v-if="productPricing"
-                class="lc_table col-2-highlighted tight-rows">
+                class="lc_table col-2-highlighted tight-rows layout-auto">
                 <tbody>
                   <tr>
-                    <td>Tees [AS Colour Staple Tee]:</td>
-                    <td>{{ productPricing.amount }} x {{ productPricing.products.products.price | price }} = {{ productPricing.products.products.totalPrice | price }}</td>
-                    <td>Total cost:</td>
-                  </tr>
-                  <tr>
-                    <td>Front Print [Half-A4]:</td>
-                    <td>{{ productPricing.amount }} x {{ printsPricing.front.price | price }} = {{ printsPricing.front.totalPrice | price }}</td>
-                    <td>
+                    <td class="lc_regular13">
+                      Tees [AS Colour Staple Tee]:
+                    </td>
+                    <td class="lc_regular13 lc_bold">
+                      {{ productPricing.amount }} x {{ productPricing.products.products.price | price }} = {{ productPricing.products.products.totalPrice | price }}
+                    </td>
+                    <td :rowspan="1 + printsPricing.length">
+                      Total cost:
                       <div class="PricingExample__example-total-price">
                         {{ productPricing.totalPrice | price }}
                       </div>
                       <div class="PricingExample__example-tax">
                         Inclusive of GST: {{ productPricing.tax.totalPrice | price }}
                       </div>
+                      <div class="mt-10">
+                        + Delivery
+                      </div>
                     </td>
                   </tr>
-                  <tr>
-                    <td>Back Print [A3]:</td>
-                    <td>{{ productPricing.amount }} x {{ printsPricing.back.price | price }} = {{ printsPricing.back.totalPrice | price }}</td>
-                    <td>+ Delivery</td>
+                  <tr
+                    v-for="(print, index) in printsPricing"
+                    :key="index">
+                    <td class="lc_regular13">
+                      {{ print.printArea.name }} [{{ print.printSize.name }}]:
+                    </td>
+                    <td class="lc_regular13 lc_bold">
+                      {{ productPricing.amount }} x {{ print.price | price }}
+                      <span v-if="print.setupPrice > 0">
+                        + {{ print.setupPrice| price }}
+                      </span>
+                      = {{ print.totalPrice | price }}
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -71,30 +95,86 @@
 </template>
 
 <script>
-import productsPrice from '@lancom/shared/mixins/products-price';
-import { PRODUCT_TYPES } from '@lancom/shared/assets/js/constants/product';
+import api from '@lancom/shared/assets/js/api';
+import { getPrintAreasSizes, getPrintAreaSizes } from '@lancom/shared/assets/js/utils/prints';
+import { getProductsForCalculatePricing, generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'PricingExample',
-  mixins: [
-    productsPrice
-  ],
+  filters: {
+    price
+  },
   props: {
-    products: {
-      type: Array,
+    product: {
+      type: Object,
       required: true
     }
   },
   data() {
+    const simpleProduct = [...this.product.simpleProducts].sort((a, b) => a.maxPrice - b.maxPrice)[0];
     return {
-      amount: 20,
-      front: { printArea: 'half_a4_h' },
-      back: { printArea: 'a3' },
-      product: null
+      simpleProduct: { ...simpleProduct, amount: 55 },
+      labels: {
+        'screen print': 'Screen Print',
+        'full colour print': 'Digital Print'
+      },
+      productPricing: null,
+      availablePrintType: 'full colour print',
+      postcode: null,
+      sides: [{
+        type: 'front',
+        printSize: 'rect10',
+        printSizes: getPrintAreasSizes(this.product.printAreas, 'front'),
+        colorsQuantity: 1,
+        hasUnderbase: false
+      }, {
+        type: 'back',
+        printSize: 'a4',
+        printSizes: getPrintAreasSizes(this.product.printAreas, 'back'),
+        colorsQuantity: 1,
+        hasUnderbase: false
+      }]
     };
   },
-  created() {
-    this.product = this.products.find(p => p.productType.alias === PRODUCT_TYPES.TEE);
+  computed: {
+    ...mapGetters(['shop']),
+    printsPricing() {
+      return this.productPricing?.products[this.product._id]?.prints.prints || [];
+    }
+  },
+  mounted() {
+    this.calculatePricing();
+  },
+  methods: {
+    async calculatePricing() {
+      const prints = this.generateSidesPrints();
+      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);
+      this.productPricing = await api.calculateProductPrice({ entities }, this.shop._id);
+    },
+    generateSidesPrints() {
+      return this.sides
+        .filter(({ printSize }) => printSize)
+        .map(side => {
+          const printType = this.getSidePrintType(side, this.availablePrintType) || {};
+          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);
+    },
+    changeAvailablePrintType(type) {
+      this.availablePrintType = type;
+      this.calculatePricing();
+    }
   }
 };
 </script>

package/components/pricing/pricing_garment/pricing-garment.scss

@@ -20,41 +20,54 @@ $product_types: tee, hoodie, polo;
       grid-column-gap: 8px;
     }
     &-type {
-      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);
+      &-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;
+    }
   }
   &__table-container {
     margin-top: 20px;

package/components/pricing/pricing_garment/pricing-garment.vue

@@ -12,20 +12,31 @@
             <div
               v-for="item in productTypes"
               :key="item.type"
-              class="PricingGarment__product-type"
-              :class="{
-                [item.type]: true,
-                active: item.product === product,
-                disabled: !item.product
-              }"
-              @click="product = item.product">
-              {{ item.label }}
+              class="PricingGarment__product-type">
+              <div
+                class="PricingGarment__product-type-info"
+                :class="{
+                  disabled: !item.product,
+                  [item.type]: true,
+                  active: item.product === product
+                }"
+                @click="product = item.product">
+                {{ item.label }}
+              </div>
+              <div
+                v-if="!item.product"
+                class="PricingGarment__product-placeholder">
+                Pricing <br /> coming soon
+              </div>
             </div>
           </div>
           <div
             v-if="product"
             class="PricingGarment__table-container">
-            <pricing-discounts-table :prices="product.pricing" />
+            <pricing-discounts-table
+              :prices="simpleProduct.pricing"
+              :bordered="false"
+              :striped="true" />
           </div>
         </div>
         <div
@@ -72,8 +83,11 @@ export default {
       }));
     },
     imageBackground() {
-      const image = getColorImage(this.product, 'large', 'pricing') || getColorImage(this.product, 'large', 'front');
+      const image = getColorImage(this.product, 'large', 'pricing', null, true) || getColorImage(this.product, 'large', 'front', null, true);
       return image && `url('${image}')`;
+    },
+    simpleProduct() {
+      return [...this.product.simpleProducts].sort((a, b) => a.maxPrice - b.maxPrice)[0];
     }
   },
   mounted() {

package/components/pricing/pricing_main_section/pricing-main-section.scss

@@ -26,7 +26,6 @@
   &__content {
     box-shadow: 10px 10px 30px rgba(75, 75, 75, 0.05);
     border-radius: 5px;
-    overflow: hidden;
     margin-top: -200px;
     padding: 0 0 0 0;
     z-index: 1;

package/components/pricing/pricing_main_section/pricing-main-section.vue

@@ -16,19 +16,10 @@
         <div class="PricingMainSection__content col-sm-12 col-12 mr-auto ml-auto">
           <div class="PricingMainSection__content-col row">
             <div class="col-12">
-              <div class="row">
-                <div class="col-12">
-                  <div class="lc_h3 lc_text-centered">
-                    Compare Printing Quotes
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-12 col-sm-6">
-              <pricing-digital-printing :products="products" />
-            </div>
-            <div class="col-12 col-sm-6">
-              <pricing-screen-printing :products="products" />
+              <pricing-products-calculator
+                v-if="products.length > 0"
+                class="Pricing__section"
+                :products="products" />
             </div>
           </div>
         </div>
@@ -38,14 +29,12 @@
 </template>
 
 <script>
-import PricingDigitalPrinting from '@lancom/shared/components/pricing/pricing_digital_printing/pricing-digital-printing';
-import PricingScreenPrinting from '@lancom/shared/components/pricing/pricing_screen_printing/pricing-screen-printing';
+import PricingProductsCalculator from '@lancom/shared/components/pricing/pricing_products_calculator/pricing-products-calculator';
 
 export default {
   name: 'PricingMainSection',
   components: {
-    PricingScreenPrinting,
-    PricingDigitalPrinting
+    PricingProductsCalculator
   },
   props: {
     products: {

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

@@ -17,7 +17,7 @@
   &__table-container {
     margin-top: 20px;
     padding: 32px 36px;
-    border: 2px solid $light_gray;
+    // border: 2px solid $light_gray;
     border-radius: 5px;
     @media (max-width: $bp-extra-small-max) {
       ::v-deep tr, ::v-deep th, ::v-deep td {

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;
+  }
+}