@lancom/shared 0.0.102 → 0.0.106

package/components/editor/editor_product_details/editor-product-details.vue

@@ -20,7 +20,7 @@
               popover-class="tooltip popover white"
               class="EditorProductDetails__discounts-table">
               <span class="lc_semibold22 lc_black EditorProductDetails__dashed-underline">
-                {{ defaultSimpleProduct.pricing[0].price | tax(pricingSettings.gstTax) | price }}
+                {{ defaultSimpleProduct.pricing[0].price | priceWithTax(pricingSettings) }}
               </span>
               <template slot="popover">
                 <pricing-discounts-table :prices="defaultSimpleProduct.pricing" />
@@ -50,9 +50,10 @@
                 Printing
               </span>
               <template slot="popover">
-                <discounts-table
-                  :visible-sleeve="false"
-                  :striped="true"
+                <pricing-table
+                  :items="printTypePrices"
+                  :bordered="true"
+                  :striped="false"
                   class="EditorProductDetails__prints-table" />
               </template>
             </v-popover>
@@ -80,10 +81,10 @@ import { mapGetters } from 'vuex';
 import ProductColorsSelector from '@lancom/shared/components/product/layouts/product_colors_selector/product-colors-selector';
 import ProductSizeSelector from '@lancom/shared/components/product/product_size_selector/product-size-selector';
 import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
-import DiscountsTable from '@lancom/shared/components/pricing/pricing_print/discounts_table/discounts-table.vue';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import modals from '@lancom/shared/mixins/modals';
-import { price, tax, staticLink } from '@lancom/shared/assets/js/utils/filters';
+import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
 
 export default {
   name: 'EditorProductDetails',
@@ -92,11 +93,10 @@ export default {
     ProductSizeSelector,
     PricingDiscountsTable,
     EditorPricing,
-    DiscountsTable
+    PricingTable
   },
   filters: {
-    price,
-    tax,
+    priceWithTax,
     staticLink
   },
   mixins: [modals],
@@ -104,7 +104,8 @@ export default {
     ...mapGetters('product', [
       'product',
       'productDetailsLoaded',
-      'defaultSimpleProduct'
+      'defaultSimpleProduct',
+      'selectedPrintType'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'
@@ -114,6 +115,17 @@ export default {
     ]),
     productLink() {
       return `/${this.product.SKU}/${this.product.alias}`;
+    },
+    printTypePrices() {
+      return [...(this.selectedPrintType?.printAreas || []).reduce((sizes, area) => {
+        (area.printSizes || []).forEach(size => {
+          sizes.set(size._id, {
+            name: size.name,
+            pricing: area.printCost
+          });
+        });
+        return sizes;
+      }, new Map()).values()];
     }
   }
 };

package/components/editor/editor_workspace/editor-workspace.vue

@@ -24,7 +24,8 @@
                   ref="editor"
                   :key="side"
                   :side="side"
-                  :print-area="selectedPrintArea"
+                  :print-area="editablePrintArea"
+                  :print-area-size="selectedPrintArea"
                   :class="side"
                   class="EditorWorkspace__side rotate-y-element">
                 </editor-workspace-side>
@@ -56,7 +57,8 @@
                 ref="editor"
                 :key="editableSide.id"
                 :side="editableSide.id"
-                :print-area="selectedPrintArea"
+                :print-area="editablePrintArea"
+                :print-area-size="selectedPrintArea"
                 :class="editableSide.id"
                 :zoom-size="zoomSize"
                 class="EditorWorkspace__side rotate-y-element"
@@ -139,6 +141,7 @@ export default {
       'product',
       'productDetailsLoaded',
       'selectedPrintArea',
+      'editablePrintArea',
       'editableSide',
       'editableColor'
     ]),
@@ -149,7 +152,8 @@ export default {
   methods: {
     ...mapMutations([
       'setEditableSide',
-      'setSelectedPrintArea'
+      'setSelectedPrintArea',
+      'setEditablePrintArea'
     ]),
     selectTab(value) {
       this.setEditableSide({ id: value }); // todo improve later by adding real sides
@@ -159,8 +163,9 @@ export default {
         id: this.editableSide.id === 'front' ? 'back' : 'front'
       });
     },
-    selectPrintArea(printArea) {
-      this.setSelectedPrintArea({ sideId: this.editableSide.id, printArea });
+    selectPrintArea({ printArea, size }) {
+      this.setEditablePrintArea(printArea);
+      this.setSelectedPrintArea({ sideId: this.editableSide.id, printArea: printArea._id, size });
     },
     toogleBoundBox(state, printAreaOption) {
       if (this.$refs.editor) {

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -86,6 +86,9 @@ export default {
       default: null
     },
     printArea: {
+      type: Object
+    },
+    printAreaSize: {
       type: String,
       required: true
     },
@@ -147,10 +150,10 @@ export default {
       );
     },
     printAreaIsSmall() {
-      return ['rect10_l', 'rect10_r'].includes(this.printArea);
+      return this.printAreaSize === 'rect10';
     },
     backgroundColor() {
-      return this.backgroundImageLoaded && this.editableColor.rgb;
+      return this.backgroundImageLoaded && this.editableColor?.rgb;
     },
     isZoomed() {
       return !!this.zoomSize;
@@ -320,13 +323,13 @@ export default {
     setOffsetWarningVisibility(visible) {
       // this.offsetWarningVisible = visible;
     },
-    toogleBoundBox(state, printArea) {
+    toogleBoundBox(state, option) {
       if (!this.fabricHelper || this.breakpoints.is === 'xs') {
         return;
       }
 
-      if (printArea) {
-        const area = state ? printArea.value : this.printArea;
+      if (option) {
+        const area = state ? option.printArea : this.printArea;
         this.fabricHelper.setPrintArea(area, this.editorSize, this.product);
       }
 

package/components/modals/cart_modal/cart-modal.vue

@@ -31,7 +31,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Cart from '@lancom/shared/components/checkout/cart/cart';
+import Cart from '@/components/checkout/cart/cart';
 
 export default {
   name: 'CartModal',

package/components/modals/order_modal/order-modal.vue

@@ -295,13 +295,10 @@ export default {
     ...mapGetters(['shop']),
     ...mapGetters('order', ['orderData']),
     ...mapGetters('cart', [
-      'notEmptySimpleProducts',
+      'entities',
       'cartPricing',
       'suburb'
-    ]),
-    numberOfProducts() {
-      return this.notEmptySimpleProducts.length;
-    }
+    ])
   },
   mounted() {
     if (this.orderData) {
@@ -340,8 +337,9 @@ export default {
       try {
         this.processing = true;
         await this.createOrder({
-          ...this.form,
-          products: this.notEmptySimpleProducts,
+          billingAddress: this.form,
+          shippingAddress: this.form,
+          products: this.entities,
           pricing: this.cartPricing,
           shop: this.shop._id
         });

package/components/modals/payment_modal/payment-modal.vue

@@ -155,7 +155,7 @@ export default {
     },
     isSuccessOrderCharge() {
       const { charge, test } = this.orderData;
-      return true || (charge && charge.success) || test;
+      return (charge && charge.success) || test;
     },
     isFailedOrderCharge() {
       const { charge } = this.orderData;

package/components/pricing/pricing_digital_printing/pricing-digital-printing.vue

@@ -250,7 +250,7 @@ export default {
   },
   data() {
     return {
-      product: null
+      product: this.products.find(p => p.productType.alias === PRODUCT_TYPES.TEE)
     };
   },
   computed: {
@@ -271,9 +271,6 @@ export default {
       return productType?.alias;
     }
   },
-  created() {
-    this.product = this.findProductByType(PRODUCT_TYPES.TEE);
-  },
   methods: {
     contactUs() {
       this.$aside.show(ContactUs);

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 {