@lancom/shared 0.0.307 → 0.0.308

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_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/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/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', 'preSetPrintsPriceRange', 'editorSize']),
     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.preSetPrints ? spMaxPrice + this.preSetPrintsPriceRange.max : 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.308",
   "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,8 +52,9 @@ export const getters = {
   multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
-  preSetPrint: ({ preSetPrint }) => preSetPrint,
-  preSetPrintPriceRange: ({ preSetPrint, product }) => {
+  preSetPrints: ({ preSetPrints }) => preSetPrints,
+  preSetPrintsPriceRange: ({ preSetPrints, product }) => {
+    const [preSetPrint] = preSetPrints || [];
     const printType = product.printTypes.find(pt => pt._id === preSetPrint?.printType);
     const { printCost = [] } = (printType?.printAreas || [])
       .find(({ printSizes }) => (printSizes || []).some(ps => ps?._id === preSetPrint?.printSize)) || {};
@@ -159,7 +160,7 @@ 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));
+      commit('setPreSetPrints', (product.prints || []).filter(({ _id, printTemplate }) => _id === print || (!print && !!printTemplate)));
     } catch (e) {
       console.log(e);
       const { status, data } = e?.response || {};
@@ -279,7 +280,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 +366,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 +494,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;