@lancom/shared 0.0.307 → 0.0.309

package/assets/js/api/index.js

@@ -95,9 +95,9 @@ const api = {
   fetchOrderByToken(token, params) {
     return _get(`order/token/${token}`, params);
   },
-  getPaymentIntent(shop, { amount, currency, payment, description }) {
+  getPaymentIntent(shop, { amount, currency, payment, description, order }) {
     const url = `shop/${shop}/payment-intent`;
-    return _post(url, { amount, currency, payment, description });
+    return _post(url, { amount, currency, payment, description, order });
   },
   createOrderPayment(id, { card, shop, country, currency, invoice, payment, recaptchaToken }) {
     const url = invoice ? `shop/${shop}/order/${id}/invoice/${invoice}/payment` : `shop/${shop}/order/${id}/payment`;

package/assets/js/models/print-area.js

@@ -17,9 +17,9 @@ export const getProductPrintAreas = product => {
   if (!product) {
     return {};
   }
-  const getSizesFromAreas = (areas, map) => (areas || []).reduce((list, { printSize, printAreaOffsets, sizes, _id }) => {
+  const getSizesFromAreas = (areas, map, printAreaSide) => (areas || []).reduce((list, { printSize, side, printAreaOffsets, sizes, _id }) => {
     if (_id && printSize) {
-      list[_id] = { printSize, printAreaOffsets };
+      list[_id] = { printSize, side: printAreaSide || side, printAreaOffsets };
     }
 
     if (sizes) {
@@ -46,8 +46,10 @@ export const getPrintAreaByName = (params, product) => {
   const { printArea, editorWidth, editorHeight, printSize, printAreaOffsets } = params;
   const printAreas = getProductPrintAreas(product);
   const pa = printAreas[printArea] || DEFAULT_PRINT_AREA;
-  const productPrintArea = product.printAreasOffsets?.find(p => p.printAreas?.includes(printArea) && (!p.printSize || p.printSize === printSize?._id));
-  const size = productPrintArea?.printAreaSize || printSize || pa.printSize;
+  const printSizeId = printSize?._id || printSize;
+  const productPrintArea = product.printAreasOffsets?.find(p => p.printAreas?.includes(printArea) && (!p.printSize || p.printSize === printSizeId));
+  const size = productPrintArea?.printAreaSize || (printSize?._id && printSize) || pa.printSize;
+  const sideId = productPrintArea?.side || pa.side;
   const offsets = productPrintArea?.printAreaOffsets ||  printAreaOffsets || pa.printAreaOffsets;
   const pxPerCm = (editorWidth * product.productToImageRatio) / (product.productWidthInCm || 60);
   const widthCm = size ? size.width : DEFAULT_PRINT_SIZE_CM;
@@ -74,7 +76,7 @@ export const getPrintAreaByName = (params, product) => {
   const widthInInches = widthCm * cmToInchesRatio;
   const heightInInches = heightCm * cmToInchesRatio;
 
-  const info = { width, height, top, left, center, printArea, widthInInches, heightInInches };
+  const info = { width, sideId, height, top, left, center, printArea, widthInInches, heightInInches };
   // console.log('getPrintAreaByName:info ', offsets, info, params);
   return info;
 };

package/assets/js/models/product-layers.js

@@ -35,8 +35,8 @@ export class Layer {
     this.guid = generateGUID();
     this.createdAt = new Date().getTime();
     this.colorId = colorId;
-    this.top = top;
-    this.left = left;
+    this.top = top || 0;
+    this.left = left || 0;
   }
 };
 

package/assets/js/utils/layers.js

@@ -7,13 +7,14 @@ export function generateLayersTemplate(template, printArea) {
   }));
 }
 
-function fitLayerToEditorSize(layer, { size }, { width, height, top, left }) {
-  const scaleKoef = Math.min(width, height) / size.width;
-  layer.top = top + layer.top * scaleKoef;
-  layer.left = left + layer.left * scaleKoef;
+export function fitLayerToEditorSize(layer, { size }, { width, height, top, left }) {
+  const scaleKoef = (width < height ? width / size.width : height / size.height) - 0.02;
+  layer.top = top + layer.top * scaleKoef + (Math.abs(size.height * scaleKoef - height) / 2) - 4;
+  layer.left = left + layer.left * scaleKoef + Math.abs((size.width * scaleKoef - width) / 2) - 3;
   ['fontSize', 'scaleX', 'scaleY'].forEach(property => {
     if (property in layer) {
-      layer[property] = layer[property] * scaleKoef;
+      const originalSize = layer[property];
+      layer[property] = originalSize * scaleKoef;
     }
   });
   delete layer.sideId;

package/components/checkout/order/order-billing-information/order-billing-information.vue

@@ -11,6 +11,19 @@
           <address-form
             :address="order.shippingAddress"
             :without-additional-info="true" />
+          <checkbox
+            v-model="copyToBillingAddress"
+            :dark="true">
+            <div class="ml-5">Use same address as the billing address</div>
+          </checkbox>
+          <div
+            v-if="!copyToBillingAddress"
+            class="mt-7">
+            <h5 class="lc_h4 mb-7">Billind Address</h5>
+            <address-form
+              :address="order.billingAddress"
+              :without-additional-info="true" />
+          </div>
         </div>
         <div class="Cart__quantity-errors">
           <cart-quantity-errors />
@@ -49,7 +62,7 @@ export default {
   },
   data() {
     return {
-      copyToShippingAddress: true,
+      copyToBillingAddress: true,
       isSubmit: false
     };
   },
@@ -68,8 +81,8 @@ export default {
       const orderInfo = generateOrderData(this.order, this.entities, this.cartPricing);
       gtm.shippingInfo(orderInfo, this.currency);
 
-      if (this.copyToShippingAddress) {
-        this.order.shippingAddress = { ...this.order.shippingAddress };
+      if (this.copyToBillingAddress) {
+        this.order.billingAddress = { ...this.order.shippingAddress };
         this.$emit('next');
         // this.$emit('step', ORDER_STEPS.SHIPPING_METHOD);
       } else {

package/components/checkout/order/order-payment-information/order-payment-information.vue

@@ -54,15 +54,15 @@
           {{ errorMessage }}
         </div>
         <div
-          v-if="loadingCard"
+          v-if="loadingCard || !orderData"
           class="lc_modal__spinner">
           <spinner />
         </div>
         <payment-card
-          v-if="cartPricing"
+          v-if="orderData"
           ref="paymentCart"
           :amount="cartPricing.totalPrice"
-          :payment-data="order.shippingAddress"
+          :order="orderData"
           @inited="initedCard">
         </payment-card>
         <progress-steps-controls
@@ -121,12 +121,29 @@ export default {
       this.order.paymentMethod = this.isDepositPayment ? ORDER_PAYMENT_METHOD.DEPOSIT : ORDER_PAYMENT_METHOD.CART;
     }
   },
+  async mounted() {
+    await this.initOrderData();
+  },
   methods: {
     ...mapActions('order', ['createOrder', 'saveOrder']),
     ...mapMutations('order', ['setCard']),
     initedCard() {
       this.loadingCard = false;
     },
+    async initOrderData() {
+      if (!this.orderData) {
+        const recaptchaToken = await this.getRecaptcha('create_order');
+        await this.createOrder({
+          ...this.order,
+          recaptchaToken,
+          products: this.entities,
+          pricing: this.cartPricing,
+          shop: this.shop._id,
+          currency: this.currency?._id,
+          country: this.country?._id
+        });
+      }
+    },
     updatePaymentType(isDeposit) {
       this.isDepositPayment = isDeposit;
       this.errorMessage = null;
@@ -167,16 +184,7 @@ export default {
       try {
         this.creating = true;
         if (!this.orderData) {
-          const recaptchaToken = await this.getRecaptcha('create_order');
-          await this.createOrder({
-            ...this.order,
-            recaptchaToken,
-            products: this.entities,
-            pricing: this.cartPricing,
-            shop: this.shop._id,
-            currency: this.currency?._id,
-            country: this.country?._id
-          });
+          await this.initOrderData();
         } else {
           const data = {
             ...this.orderData,

package/components/common/payment/payment_card/payment-card.vue

@@ -4,7 +4,7 @@
       <component
         :is="cardComponent"
         ref="card"
-        :paymentData="paymentData"
+        :order="order"
         :amount="amount"
         @inited="$emit('inited')" />
       </client-only>
@@ -22,7 +22,7 @@ export default {
     StripePayment: () => import('./stripe_payment/stripe-payment')
   },
   props: {
-    paymentData: {
+    order: {
       type: Object,
       required: true
     },

package/components/common/payment/payment_card/pinpayment/pinpayment.vue

@@ -91,7 +91,7 @@ let interval = null;
 export default {
   name: 'Payment',
   props: {
-    paymentData: {
+    order: {
       type: Object,
       required: true
     },
@@ -174,15 +174,16 @@ export default {
     tokenize() {
       this.processing = true;
       return new Promise((resolve, reject) => {
+        const { shippingAddress } = this.order;
         this.fields.tokenize(
           {
             publishable_api_key: process.env.PINPAYMENT_PUBLISHABLE_API_KEY,
-            address_line1: this.paymentData.addressLine1,
-            address_line2: this.paymentData.addressLine2,
-            address_city: this.paymentData.city,
-            address_postcode: this.paymentData.postcode,
-            address_state: this.paymentData.state,
-            address_country: this.paymentData.country
+            address_line1: shippingAddress.addressLine1,
+            address_line2: shippingAddress.addressLine2,
+            address_city: shippingAddress.city,
+            address_postcode: shippingAddress.postcode,
+            address_state: shippingAddress.state,
+            address_country: shippingAddress.country
           },
           (err, response) => {
             if (!this.processing) {

package/components/common/payment/payment_card/stripe_payment/stripe-payment.vue

@@ -21,7 +21,7 @@ export default {
     }
   },
   props: {
-    paymentData: {
+    order: {
       type: Object,
       required: true
     },
@@ -87,7 +87,8 @@ export default {
       const params = {
         currency: this.currency?.isoCode,
         amount: this.amount,
-        payment: this.payment
+        payment: this.payment,
+        order: this.order
       };
       const { clientSecret } = await api.getPaymentIntent(this.shop._id, params);
       this.stripe = window.Stripe(this.stripeClientKey);

package/components/common/postcode_select/postcode-select.vue

@@ -141,6 +141,7 @@ export default {
         return this.selected?._id ? this.selected : null;
       },
       set(option) {
+
         this.updatePostcode(option);
       }
     }
@@ -157,7 +158,7 @@ export default {
       if (query.trim().length > 1) {
         this.isLoading = true;
         const country = this.codeCountry || this.country;
-        const countryName = country ? (['GB','UK'].includes(country.isoCode) ? 'England' : (country.name || country)) : 'Australia';
+        const countryName = country ? (['GB','UK'].includes(country.isoCode) ? 'UK' : (country.name || country)) : 'Australia';
         const params = {
           query: query.trim(),
           country: countryName
@@ -182,9 +183,16 @@ export default {
     async updatePostcode(option) {
       this.selected = option;
       if (!option.value) {
-        const suburb = await api.fetchAddressInfo(option._id, this.shop?._id);
-        this.$emit('input', suburb.postcode);
-        this.$emit('select', suburb);
+        try {
+          this.isLoading = true;
+          const suburb = await api.fetchAddressInfo(option._id, this.shop?._id);
+          this.$emit('input', suburb.postcode);
+          this.$emit('select', suburb);
+          option.label = this.createOptionFromSuburb(suburb).label;
+        } catch (e) {
+        } finally {
+          this.isLoading = false;
+        }
       } else {
         this.$emit('input', option.value);
         this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));

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

@@ -10,57 +10,6 @@
         <img :src="product.brand.logo | staticLink" />
       </div>
       <div class="EditorProductDetails__header-info">
-        <div class="EditorProductDetails__header-row">
-          <span
-            v-if="defaultSimpleProductPricing"
-            class="lc_regular16 lc_grey1">
-            From {{ currency.isoCode }}
-            <v-popover
-              ref="popover"
-              trigger="hover"
-              :delay="{ show: 200, hide: 400 }"
-              popover-class="tooltip popover white"
-              class="EditorProductDetails__discounts-table">
-              <price
-                class="lc_semibold22 lc_black EditorProductDetails__dashed-underline"
-                :price="defaultSimpleProductPricing[0].price"
-                :with-gst="inclGST" />
-              <template slot="popover">
-                <pricing-discounts-table
-                  :prices="defaultSimpleProductPricing"
-                  :with-gst="inclGST" />
-              </template>
-            </v-popover>
-          </span>
-          <span class="lc_regular16 lc_grey1 ml-6">
-            +
-            <v-popover
-              ref="popover"
-              trigger="hover"
-              :delay="{ show: 200, hide: 400 }"
-              popover-class="tooltip popover white no-paddings"
-              class="EditorProductDetails__discounts-table">
-              <span class="EditorProductDetails__dashed-underline">
-                Printing
-              </span>
-              <template slot="popover">
-                <pricing-table
-                  :items="printTypePrices"
-                  :bordered="true"
-                  :striped="false"
-                  :with-gst="inclGST"
-                  class="EditorProductDetails__prints-table" />
-              </template>
-            </v-popover>
-          </span>
-          <span class="ml-10">
-            <checkbox
-              v-model="inclGST"
-              :dark="true">
-              <div class="ml-5">Inc. {{ taxName }}</div>
-            </checkbox>
-          </span>
-        </div>
         <div class="EditorProductDetails__header-row">
           <span class="EditorProductDetails__product-link">
             SKU:
@@ -81,6 +30,68 @@
         </div>
       </div>
     </div>
+    <div class="EditorProductDetails__header-row">
+      <span
+        v-if="defaultSimpleProductPricing"
+        class="lc_regular16 lc_grey1">
+        From {{ currency.isoCode }}
+        <price
+          v-if="printsPrice"
+          class="lc_black lc_semibold22"
+          :price="printsPrice + defaultSimpleProductPricing[0].price"
+          :with-gst="inclGST" />
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white"
+          class="EditorProductDetails__discounts-table">
+          <price
+            class="lc_black EditorProductDetails__dashed-underline"
+            :class="[printsPrice ? 'lc_semibold16' : 'lc_semibold22']"
+            :price="defaultSimpleProductPricing[0].price"
+            :with-gst="inclGST" />
+          <template slot="popover">
+            <pricing-discounts-table
+              :prices="defaultSimpleProductPricing"
+              :with-gst="inclGST" />
+          </template>
+        </v-popover>
+      </span>
+      <span class="lc_regular16 lc_grey1 ml-6">
+        +
+        <v-popover
+          ref="popover"
+          trigger="hover"
+          :delay="{ show: 200, hide: 400 }"
+          popover-class="tooltip popover white no-paddings"
+          class="EditorProductDetails__discounts-table">
+          <span class="EditorProductDetails__dashed-underline">
+            Printing
+          </span>
+          <price
+            v-if="printsPrice"
+            class="lc_black lc_semibold16 EditorProductDetails__dashed-underline"
+            :price="printsPrice"
+            :with-gst="inclGST" />
+          <template slot="popover">
+            <pricing-table
+              :items="printTypePrices"
+              :bordered="true"
+              :striped="false"
+              :with-gst="inclGST"
+              class="EditorProductDetails__prints-table" />
+          </template>
+        </v-popover>
+      </span>
+      <span class="ml-10">
+        <checkbox
+          v-model="inclGST"
+          :dark="true">
+          <div class="ml-5">Inc. {{ taxName }}</div>
+        </checkbox>
+      </span>
+    </div>
     <!-- <div
       v-if="!productAvailableInCurrentCountry"
       class="EditorProductDetails__available-warning">
@@ -126,7 +137,7 @@ import ProductColorsSelector from '@lancom/shared/components/product/product_col
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import modals from '@lancom/shared/mixins/modals';
-import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { staticLink, priceWithTax, price, tax } from '@lancom/shared/assets/js/utils/filters';
 import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import Price from '@lancom/shared/components/common/price';
@@ -146,6 +157,7 @@ export default {
     RichText
   },
   filters: {
+    price,
     priceWithTax,
     staticLink
   },
@@ -165,12 +177,14 @@ export default {
       'productDetailsLoaded',
       'defaultSimpleProduct',
       'selectedPrintType',
-      'isPrintPricing'
+      'isPrintPricing',
+      'printsPrice'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'
     ]),
     ...mapGetters([
+      'gstTax',
       'pricingSettings',
       'country'
     ]),

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

@@ -132,6 +132,9 @@ export default {
       'editorSize',
       'editModeSelectedLayer'
     ]),
+    editableLayersCount() {
+      return this.editableLayers?.length;
+    },
     hasWireframeImage() {
       return !!this.wireframeImage;
     },
@@ -197,6 +200,9 @@ export default {
     layers() {
       this.redrawWithThrottle();
     },
+    editableLayersCount() {
+      this.redraw();
+    },
     selectedLayer() {
       this.redrawWithThrottle();
     },

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -10,7 +10,7 @@
         @click="show('details')">
         <i class="icon-product MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
-          Editor
+          Designer
         </span>
       </div>
       <div

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

@@ -34,7 +34,7 @@
       </div>
       <payment-card
         ref="card"
-        :paymentData="orderData"
+        :order="orderData"
         @inited="initedCard"/>
       <div class="form-row PaymentModal__terms">
         <label class="form-label PaymentModal__label-with-checkbox">

package/components/order/order_payment/order-payment.vue

@@ -28,7 +28,7 @@
             ref="paymentCart"
             :amount="model.totalGST"
             :has-spinner="false"
-            :payment-data="order.shippingAddress">
+            :order="order">
           </payment-card>
           <div
             v-if="errorMessage"

package/components/order/order_view/order_product_prints/order_product_print/order-product-print.vue

@@ -72,7 +72,10 @@ export default {
       return this.print.costType === 'setup only' ? 0 : (this.print.printCost || 0);
     },
     setupCost() {
-      const isFreePricing = this.print.freeSetupOver >= 0 && this.amount > this.print.freeSetupOver;
+      let isFreePricing = this.print.freeSetupOver >= 0 && this.amount > this.print.freeSetupOver;
+      if ((this.print.products || []).indexOf(this.entity.guid) > 0) {
+        isFreePricing = true;
+      }
       return (this.print.costType === 'item cost only' || isFreePricing) ? 0 : (this.print.setupCost || 0);
     },
     total() {

package/components/order/order_view/order_view_product/order-view-product.vue

@@ -128,7 +128,10 @@ export default {
     },
     totalPrice() {
       const printsTotal = (this.product.prints || []).reduce((total, print) => {
-        const isFreePricing = print.freeSetupOver >= 0 && this.amount > print.freeSetupOver;
+        let isFreePricing = print.freeSetupOver >= 0 && this.amount > print.freeSetupOver;
+        if ((print.products || []).indexOf(this.product.guid) > 0) {
+          isFreePricing = true;
+        }
         const printCost = print.costType === 'setup only' ? 0 : print.printCost;
         const setupCost = (print.costType === 'item cost only' || isFreePricing) ? 0 : print.setupCost;
         return total + this.amount * printCost + setupCost;

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.vue

@@ -18,23 +18,45 @@
       <div class="lc_regular14 hidden-md-and-up">
         {{ product.size.shortName }}
       </div>
-      <v-popover
-        trigger="hover"
-        :delay="{ show: 200, hide: 400 }"
-        popover-class="tooltip popover white"
-        class="ProductSizeSelectorColor__price">
-        <span>
-          {{ productPrice | price(currency) }}
-        </span>
-        <template slot="popover">
-          <div>
-            <pricing-discounts-table
-              :with-gst="withGst"
-              :prices="pricing"
-              :amount="usedSimpleProductsQuantity" />
-          </div>
-        </template>
-      </v-popover>
+      <div>
+        <div v-if="printsPrice > 0">
+          <price
+            class="lc_semibold17 ProductSizeSelectorColor__price"
+            :price="printsPrice + productPrice"
+            :with-gst="withGst" />
+        </div>
+        <div>
+          <v-popover
+            trigger="hover"
+            :delay="{ show: 200, hide: 400 }"
+            popover-class="tooltip popover white"
+            class="ProductSizeSelectorColor__price"
+            :style="{
+              display: productPrice ? 'inline-block' : 'block'
+            }">
+            <span :class="[printsPrice ? 'lc_regular13' : 'lc_semibold17']">
+              {{ productPrice | price(currency) }}
+            </span>
+            <template slot="popover">
+              <div>
+                <pricing-discounts-table
+                  :with-gst="withGst"
+                  :prices="pricing"
+                  :amount="usedSimpleProductsQuantity" />
+              </div>
+            </template>
+          </v-popover>
+          <span
+            v-if="printsPrice > 0"
+            class="lc_regular13">
+            +
+            <price
+              :price="printsPrice"
+              :with-gst="withGst" />
+          </span>
+        </div>
+
+      </div>
       <div class="hidden-md-and-up">
         <div
           v-if="product.quantityStock"
@@ -77,6 +99,7 @@ import PricingDiscountsTable from '@lancom/shared/components/common/pricing_disc
 import { price } 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';
 import { tax } from '@lancom/shared/assets/js/utils/filters';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'ProductSizeSelectorColor',
@@ -84,6 +107,7 @@ export default {
     price
   },
   components: {
+    Price,
     PricingDiscountsTable,
     ProductSizeSelectorColorCell
   },
@@ -102,7 +126,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity']),
+    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice']),
     ...mapGetters(['gstTax', 'currency']),
     currentQuantityStockLabel() {
       return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;

package/components/product/wizard/wizard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="Wizard__wrapper">
     <div
-      v-if="preSetPrint"
+      v-if="preSetPrints"
       class="Wizard__header Wizard__header--active">
       <div class="Wizard__header-name">
         PRINT OPTIONS
@@ -43,7 +43,7 @@
           @edit="editLayer($event)"
           @delete="removeTemplateLayer($event)" />
         <div
-          v-if="!preSetPrint"
+          v-if="!preSetPrints"
           class="Wizard__layers-info">
           <p>1. Note final print price will be calculated once garment quantity is finalised</p>
           <p>2. PDF mockup will be provided for approval prior to printing</p>
@@ -180,7 +180,7 @@ export default {
   },
   computed: {
     ...mapGetters(['shop']),
-    ...mapGetters('product', ['product', 'layers', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'availablePrintTypes', 'preSetPrint']),
+    ...mapGetters('product', ['product', 'layers', 'visibleSteps', 'hasLayers', 'isPrintPricing', 'availablePrintTypes', 'preSetPrints']),
     steps() {
       const isScreenPrint = (this.availablePrintTypes || []).includes('screen print');
       return isScreenPrint ? WIZARD_STEPS_LIST.filter(s => s !== WIZARD_STEPS.PRINT_SIZE) : WIZARD_STEPS_LIST.filter(s => s !== WIZARD_STEPS.PRINT_UNDERBASE);
@@ -193,7 +193,7 @@ export default {
     }
   },
   mounted() {
-    if (this.product.printOnly || this.preSetPrint || this.layers.length > 0) {
+    if (this.product.printOnly || this.preSetPrints || this.layers.length > 0) {
       this.isVisible = true;
       this.setIsPrintPricing(this.isVisible);
     }
@@ -214,7 +214,7 @@ export default {
       'setVisibleSteps',
       'setIsPrintPricing',
       'clearTemplateLayers',
-      'setPreSetPrint'
+      'setPreSetPrints'
     ]),
     ...mapMutations('layers', ['setEditableLayers']),
     goToNextStep() {
@@ -262,7 +262,7 @@ export default {
       }
     },
     removePreSetPrint() {
-      this.setPreSetPrint(null);
+      this.setPreSetPrints(null);
       this.clearTemplateLayers();
     }
   }

package/components/products/product_list_product/product-list-product.vue

@@ -82,14 +82,14 @@
         </a>
       </div>
       <div
-        v-if="product.minPrice === product.maxPrice"
+        v-if="minPrice === maxPrice"
         class="ProductListProduct__info-item lc_h4">
-        {{ product.minPrice | price(currency) }}
+        {{ minPrice | price(currency) }}
       </div>
       <div
         v-else
         class="ProductListProduct__info-item lc_h4">
-        {{ product.minPrice | price(currency) }} - {{ product.maxPrice | price(currency) }}
+        {{ minPrice | price(currency) }} - {{ maxPrice | price(currency) }}
       </div>
       <div class="ProductListProduct__info-item mt-2 lc_caption">
         {{ product.colors.length }} {{ product.colors.length === 1 ? 'Colour' : 'Colours' }} | Size: {{ product.sizes | sizesRange }}

package/layouts/products.vue

@@ -194,6 +194,14 @@
         numberOfItems: this.count,
         itemListOrder: 'ItemListUnordered',
         itemListElement: this.products.map(product => {
+          const minPrintsPrice = product.minPrintsPrice || 0;
+          const minProductPrice = product.isClearance ? product.minPriceWithoutClearance : product.minPrice;
+          const minPrice = minProductPrice + minPrintsPrice;
+
+          const maxPrintsPrice = product.maxPrintsPrice || 0;
+          const maxProductPrice = product.isClearance ? product.maxPriceWithoutClearance : product.maxPrice;
+          const maxPrice = maxProductPrice + maxPrintsPrice;
+          
           const schema = {
             '@type': 'Product',
             name: product.name,
@@ -203,8 +211,8 @@
               '@type': 'AggregateOffer',
               offerCount: 1,
               name: product.name,
-              highPrice: product.minPrice,
-              lowPrice: product.maxPrice,
+              highPrice: maxPrice,
+              lowPrice: minPrice,
               priceCurrency: this.currency?.isoCode || 'AUD',
               availability: 'InStock'
             }

package/mixins/product-preview.js

@@ -82,10 +82,14 @@ const productPreview = {
       return this.product?.tags.length > 0;
     },
     minPrice() {
-      return this.product.isClearance ? this.product.minPriceWithoutClearance : this.product.minPrice;
+      const printsPrice = this.product.minPrintsPrice || 0;
+      const productPrice = this.product.isClearance ? this.product.minPriceWithoutClearance : this.product.minPrice;
+      return productPrice + printsPrice;
     },
     maxPrice() {
-      return this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
+      const printsPrice = this.product.maxPrintsPrice || 0;
+      const productPrice = this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
+      return productPrice + printsPrice;
     }
   },
   mounted() {

package/mixins/product-view.js

@@ -1,5 +1,7 @@
 import { mapGetters, createNamespacedHelpers } from 'vuex';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
+import { fitLayerToEditorSize } from '@lancom/shared/assets/js/utils/layers';
+import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
 import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
 import { tax, staticLink, inRange } from '@lancom/shared/assets/js/utils/filters';
 import { getProductLargeCover } from '@lancom/shared/assets/js/utils/colors';
@@ -63,7 +65,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
   },
   computed: {
     ...mapGetters(['shop', 'gstTax', 'country', 'currency']),
-    ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrint', 'preSetPrintPriceRange']),
+    ...mapGetters('product', ['product', 'simpleProducts', 'productDetails', 'editableColor', 'images', 'preSetPrints', 'editorSize', 'printsPrice']),
     pageItemImage() {
       return this.mainProductImageSrc;
     },
@@ -107,22 +109,44 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       await this.fetchProductDetails(data);
     }
 
-    if (this.preSetPrint) {
-      const data = {
-        colorId: this.editableColor._id,
-        type: 'text',
-        properties: {
-          notes: '',
-          copy: '',
-          printArea: this.preSetPrint.printArea,
-          printSize: this.preSetPrint.printSize,
-          printType: this.preSetPrint.printType,
-          required: true
+    try {
+      if (this.preSetPrints) {
+        for (const preSetPrint of this.preSetPrints) {
+          const layers = preSetPrint.printTemplate?.layers || [{ type: 'text' }];
+          for (const layer of layers) {
+            const properties = {
+              ...layer,
+              printArea: preSetPrint.printArea,
+              printSize: preSetPrint.printSize,
+              printType: preSetPrint.printType,
+              required: true
+            };
+            delete properties.guid;
+            if (preSetPrint.printTemplate) {
+              const printArea = getPrintAreaByName({
+                printArea: preSetPrint.printArea,
+                printSize: preSetPrint.printSize,
+                // printAreaOffsets: printArea?.printAreaOffsets,
+                editorWidth: this.editorSize.width,
+                editorHeight: this.editorSize.height
+              }, this.product);
+              fitLayerToEditorSize(properties, preSetPrint.printTemplate, printArea);
+              properties.sideId = printArea?.sideId;
+            }
+            const data = {
+              colorId: this.editableColor._id,
+              type: layer.type || 'text',
+              sideId: properties.sideId || 'front',
+              properties
+            };
+            const model = await getLayerModel(data);
+            this.addTemplateLayer(model);
+          }
         }
-      };
-      const layer = await getLayerModel(data);
-      this.addTemplateLayer(layer);
+      }
+    } catch (e) {
     }
+    
     this.fillBreadcrumbs();
 
     if (multipack) {
@@ -185,7 +209,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       name,
       offers: this.productDetails?.simpleProducts.map(sp => {
         const spMaxPrice = (sp.pricing || []).reduce((price, pricing) => Math.max(price, pricing.price), 0);
-        const maxPrice = this.preSetPrint ? spMaxPrice + this.preSetPrintPriceRange.max : spMaxPrice;
+        const maxPrice = this.printsPrice ? spMaxPrice + this.printsPrice : spMaxPrice;
         const availability = sp.quantityStock > 0 ? 'InStock' : 'OutOfStock';
     
         const offer = {

package/package.json

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

package/store/layers.js

@@ -19,7 +19,6 @@ export const actions = {
 
 export const mutations = {
   setLayersThumbnail(state, { side, value }) {
-    console.log('setLayersThumbnail: ', side, value);
     Vue.set(state.layerThumbnails, side, value);
   },
   setEditableLayer(state, layer) {

package/store/product.js

@@ -15,7 +15,7 @@ export const state = () => ({
   images: [],
   priceIncludeGST: false,
   product: null,
-  preSetPrint: null,
+  preSetPrints: null,
   loadError: null,
   productDetails: null,
   editorSize: {
@@ -52,16 +52,7 @@ export const getters = {
   multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
-  preSetPrint: ({ preSetPrint }) => preSetPrint,
-  preSetPrintPriceRange: ({ preSetPrint, product }) => {
-    const printType = product.printTypes.find(pt => pt._id === preSetPrint?.printType);
-    const { printCost = [] } = (printType?.printAreas || [])
-      .find(({ printSizes }) => (printSizes || []).some(ps => ps?._id === preSetPrint?.printSize)) || {};
-    return {
-      min: Math.min(...printCost.map(({ price }) => price)),
-      max: Math.max(...printCost.map(({ price }) => price))
-    };
-  },
+  preSetPrints: ({ preSetPrints }) => preSetPrints,
   loadError: ({ loadError }) => loadError,
   productDetails: ({ productDetails }) => productDetails,
   productDetailsLoaded: ({ productDetails }) => !!productDetails,
@@ -149,7 +140,13 @@ export const getters = {
   },
   editableSide: ({ editableSide }) => editableSide,
   priceIncludeGST: ({ priceIncludeGST }) => priceIncludeGST,
-  hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice
+  hasUnprintedPrice: ({ product }) => product.minUnprintedPrice || product.maxUnprintedPrice,
+  printsPrice: ({ productPricing, product }) => {
+    const maxPrintsPrice = +product.maxPrintsPrice || 0;
+    const pricing = (productPricing?.products || {})[product._id];
+    const price = pricing?.prints?.prints?.reduce((sum , print) => sum + (+print.priceWithoutTax || 0), 0) || maxPrintsPrice;
+    return price;
+  },
 };
 
 export const actions = {
@@ -159,7 +156,12 @@ export const actions = {
       const query = { country, currency };
       const product = await api.fetchProduct(shop, slug, query);
       commit('setProduct', product);
-      commit('setPreSetPrint', (product.prints || []).find(({ _id }) => _id === print));
+
+      const prints = (product.prints || []).filter(({ _id, printTemplate }) => _id === print || (!print && !!printTemplate));
+      commit('setPreSetPrints', prints);
+      if (prints?.length > 0) {
+        commit('setIsPrintPricing', true);
+      }
     } catch (e) {
       console.log(e);
       const { status, data } = e?.response || {};
@@ -279,7 +281,8 @@ export const mutations = {
     state.loadError = error;
   },
   setProductDetails(state, simpleProducts) {
-    const { preSetPrint } = state;
+    const { preSetPrints } = state;
+    const [preSetPrint] = preSetPrints || [];
     simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id) )
     state.productDetails = { simpleProducts };
     const availableSizes = [];
@@ -364,7 +367,7 @@ export const mutations = {
       ...(state.template.layers || []).filter(l => l.guid !== layer.guid),
       layer
     ];
-    Vue.set(state.template, 'layers', layers);
+    state.template = { ...state.template, layers };
     if (layers.length === 1 && !state.product.printOnly) {
         // const printType = state.product.printTypes[0];
         // state.selectedPrintType = printType;
@@ -492,8 +495,8 @@ export const mutations = {
   setVisibleSteps(state, visibleSteps) {
     state.template.visibleSteps = visibleSteps;
   },
-  setPreSetPrint(state, preSetPrint) {
-    state.preSetPrint = preSetPrint;
+  setPreSetPrints(state, preSetPrints) {
+    state.preSetPrints = preSetPrints;
   },
   setEditableSide(state, side) {
     state.editableSide = side;