@lancom/shared 0.0.309 → 0.0.311

package/assets/js/utils/fabric-helper.js

@@ -192,7 +192,6 @@ export default class FabricHelper {
 
   createObject({ layer, active }) {
     const initial = !layer.modifiedAt;
-    console.log('createObject...', layer.type, layer.top, layer.left);
     return new Promise(resolve => {
       const methods = {
         text: 'createTextObject',

package/assets/js/utils/layers.js

@@ -7,10 +7,11 @@ export function generateLayersTemplate(template, printArea) {
   }));
 }
 
-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;
+export function fitLayerToEditorSize(layer, { size }, printArea) {
+  const { width, height, top, left } = printArea;
+  const scaleKoef = width / size.width;
+  layer.top = top + layer.top * scaleKoef - 5 + (height - size.height * scaleKoef) / 2;
+  layer.left = left + layer.left * scaleKoef - 5 + (width - size.width * scaleKoef) / 2;
   ['fontSize', 'scaleX', 'scaleY'].forEach(property => {
     if (property in layer) {
       const originalSize = layer[property];

package/assets/scss/ui_kit/_grid.scss

@@ -783,7 +783,7 @@
   margin-left: auto !important;
 }
 // margins
-@for $i from 1 through 10 {
+@for $i from 1 through 20 {
   .mt-#{$i} {
     margin-top: #{$i}px !important;
   }

package/components/checkout/order/address-form/address-form.scss

@@ -14,4 +14,12 @@
       }
     }
   }
+}
+
+.CustomerAddressForm {
+  &__copy-btn {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
 }

package/components/checkout/order/address-form/address-form.vue

@@ -258,6 +258,9 @@ export default {
       type: Object,
       required: true
     },
+    copyFrom: {
+      type: Object
+    },
     withoutAdditionalInfo: {
       type: Boolean,
       default: false

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

@@ -11,17 +11,20 @@
           <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 class="mt-20 mb-20">
+            <checkbox
+              v-model="copyToBillingAddress"
+              :dark="true">
+              <div class="ml-5">Use same address as the billing address</div>
+            </checkbox>
+          </div>
           <div
             v-if="!copyToBillingAddress"
-            class="mt-7">
-            <h5 class="lc_h4 mb-7">Billind Address</h5>
+            class="mt-15">
+            <h5 class="lc_h3 lc_uppercase lc_bold mt-10 mb-15">Billing Address</h5>
             <address-form
               :address="order.billingAddress"
+              :copy-from="order.shippingAddress"
               :without-additional-info="true" />
           </div>
         </div>
@@ -46,6 +49,27 @@ import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import AddressForm from '@/components/checkout/order/address-form/address-form';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 
+function isSameAddresses(address, billingAddress) {
+  if (!billingAddress) {
+    return true;
+  }
+  const fields = [
+    'fullName',
+    'additionalInfo',
+    'addressLine1',
+    'addressLine2',
+    'city',
+    'company',
+    'country',
+    'email',
+    'phone',
+    'postcode',
+    'state'
+  ];
+  const getKey = model => fields.reduce((v, field) => `${v}-${model[field] || ''}`, '');
+  return address && getKey(address) === getKey(billingAddress);
+}
+
 export default {
   name: 'OrderBillingInformation',
   mixins: [CartMixin],
@@ -62,7 +86,7 @@ export default {
   },
   data() {
     return {
-      copyToBillingAddress: true,
+      copyToBillingAddress: isSameAddresses(this.order?.shippingAddress, this.order?.billingAddress),
       isSubmit: false
     };
   },

package/components/checkout/order/order.vue

@@ -106,7 +106,7 @@ export default {
     this.order = {
       paymentMethod: 'card',
       billingAddress: {
-        ...address,
+        ...JSON.parse(JSON.stringify(address)),
         ...(this.user ? {
           fullName: `${this.user.firstName} ${this.user.lastName}`,
           phone: this.user.phone,

package/components/common/payment/payment_success/payment-success.vue

@@ -24,13 +24,13 @@
 </template>
 
 <script>
-import messages from '@/messages';
+import { MESSAGES } from '@/messages';
 
 export default {
   name: 'PaymentSuccess',
   data() {
     return {
-      messages
+      messages: MESSAGES
     };
   },
   props: {

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -81,7 +81,7 @@ export default {
       return this.print && this.getImageBackground(this.print);
     },
     image() {
-      const color = this.defaultPreview ? null : this.product.color;
+      const color = this.defaultPreview ? null : (this.product.color || (this.product.colors || [])[0]);
       const product = this.product?.product || this.product;
       return getColorImage(product, this.size, this.side, color) || getProductCover(product, this.size, this.side, color);
     },

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

@@ -1,6 +1,17 @@
 @import "@/assets/scss/variables";
 
 .EditorWorkspace {
+  &__preloading {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: white;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+  }
   &__sides {
     position: relative;
     width: 100%;

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

@@ -1,5 +1,10 @@
 <template>
   <div class="EditorWorkspace__wrapper">
+    <div
+      v-if="preloading"
+      class="EditorWorkspace__preloading">
+      <placeholder />
+    </div>
     <breakpoint
       name="md"
       mode="up">
@@ -17,7 +22,7 @@
               class="EditorWorkspace__sides rotate-y-container"
               :class="{rotating: isRotating}">
               <transition
-                name="rotate"
+                :name="preloading ? 'empty' : 'rotate'"
                 mode="in-out"
                 @before-enter="isRotating = true"
                 @after-leave="isRotating = false">
@@ -50,7 +55,7 @@
             class="EditorWorkspace__sides rotate-y-container"
             :class="{rotating: isRotating}">
             <transition
-              name="rotate"
+              :name="preloading ? 'empty' : 'rotate'"
               mode="in-out"
               @before-enter="isRotating = true"
               @after-leave="isRotating = false">
@@ -72,7 +77,7 @@
             :class="{
               'EditorWorkspace__sides-toggle--fixed': isZoomIn
             }"
-            @click="toggleSide">
+            @click="toggleSide()">
             <i class="icon-rotate-tee"></i>
           </div>
           <div
@@ -108,6 +113,7 @@ import { createNamespacedHelpers } from 'vuex';
 import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Tabs from '@lancom/shared/components/common/tabs';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
 import EditorWorkspaceSide from './editor_workspace_side/editor-workspace-side';
 
 const { mapGetters, mapMutations } = createNamespacedHelpers('product');
@@ -115,6 +121,7 @@ const { mapGetters, mapMutations } = createNamespacedHelpers('product');
 export default {
   name: 'EditorWorkspace',
   components: {
+    Placeholder,
     EditorWorkspaceSide,
     EditorPrintAreaOptions,
     EditorPricing,
@@ -122,6 +129,7 @@ export default {
   },
   data() {
     return {
+      preloading: true,
       isRotating: false,
       zoomSize: null,
       productSides: [
@@ -146,22 +154,38 @@ export default {
       return !!this.zoomSize;
     }
   },
+  mounted() {
+    this.preloadingEditor();
+  },
   methods: {
     ...mapMutations([
       'setEditableSide',
       'setSelectedPrintArea',
       'setEditablePrintArea'
     ]),
+   async preloadingEditor() {
+      this.preloading = true;
+      const sides = ['back', 'front'];
+      for (const side of sides) {
+        await (new Promise((resolve) => {
+          setTimeout(() => {
+            this.toggleSide(side);
+            resolve();
+          }, 500);
+        }));
+      }
+      this.preloading = false;
+    },
     selectTab(value) {
       if (this.editableSide.id !== value) {
         this.setEditablePrintArea(null);
         this.setEditableSide({ id: value });
       }
     },
-    toggleSide() {
+    toggleSide(side) {
       this.setEditablePrintArea(null);
       this.setEditableSide({
-        id: this.editableSide.id === 'front' ? 'back' : 'front'
+        id: side || (this.editableSide.id === 'front' ? 'back' : 'front')
       });
     },
     selectPrintArea({ printArea, size }) {

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

@@ -48,7 +48,7 @@
         @click="hide">
       </div>
       <div
-        v-if="isOpen"
+        v-show="isOpen"
         key="container"
         class="MobileEditorProductDetails__container"
         @close="hide">

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

@@ -361,7 +361,7 @@ export default {
           recaptchaToken,
           currency: this.currency?._id,
           country: this.country?._id,
-          billingAddress: this.form,
+          billingAddress: JSON.parse(JSON.stringify(this.form)),
           shippingAddress: this.form,
           products: this.entities,
           pricing: this.cartPricing,

package/components/order/order_product_prints_preview/order-product-prints-preview.vue

@@ -7,6 +7,7 @@
         <product-side-with-print
           :product="product"
           :side="side"
+          :default-preview="defaultPreview"
           size="medium" />
       </div>
     </div>
@@ -29,6 +30,10 @@ export default {
     product: {
       type: Object,
       required: true
+    },
+    defaultPreview: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/order/order_view/order-view.mixin.js

@@ -46,32 +46,35 @@ export default {
     depositInfo() {
       return this.settings?.depositInfo || {};
     },
+    displayAddress() {
+      return this.invoice?.address || this.order.billingAddress || this.order.shippingAddress;
+    },
     fullName() {
-      return this.invoice?.address?.fullName || this.order.shippingAddress.fullName;
+      return this.displayAddress.fullName;
     },
     company() {
-      return this.invoice?.address?.company || this.order.shippingAddress.company;
+      return this.displayAddress.company;
     },
     phone() {
-      return this.invoice?.address?.phone || this.order.shippingAddress.phone;
+      return this.displayAddress.phone;
     },
     email() {
-      return this.invoice?.address?.email || this.order.shippingAddress.email;
+      return this.displayAddress.email;
     },
     additionalInfo() {
-      return this.invoice?.address?.additionalInfo || this.order.shippingAddress.additionalInfo;
+      return this.displayAddress.additionalInfo;
     }, 
     purchaseOrderNumber() {
       return this.invoice?.purchaseOrderNumber || this.order.purchaseOrderNumber;
     },
     orderAddress() {
       return [
-        this.invoice?.address?.addressLine1 || this.order.shippingAddress.addressLine1,
-        this.invoice?.address?.addressLine2 || this.order.shippingAddress.addressLine2,
-        this.invoice?.address?.city || this.order.shippingAddress.city,
-        this.invoice?.address?.postcode || this.order.shippingAddress.postcode,
-        this.invoice?.address?.state || this.order.shippingAddress.state,
-        this.invoice?.address?.country || this.order.shippingAddress.country
+        this.displayAddress.addressLine1,
+        this.displayAddress.addressLine2,
+        this.displayAddress.city,
+        this.displayAddress.postcode,
+        this.displayAddress.state,
+        this.displayAddress.country
       ].filter(i => !!i).join(', ');
     },
     gstTax() {

package/components/product/wizard/wizard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="Wizard__wrapper">
     <div
-      v-if="preSetPrints"
+      v-if="hasPresetPrints"
       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="!preSetPrints"
+          v-if="!hasPresetPrints"
           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>
@@ -190,10 +190,13 @@ export default {
     },
     productPrintAreas() {
       return this.product.printAreas || [];
+    },
+    hasPresetPrints() {
+      return this.preSetPrints?.length > 0
     }
   },
   mounted() {
-    if (this.product.printOnly || this.preSetPrints || this.layers.length > 0) {
+    if (this.product.printOnly || this.hasPresetPrints || this.layers.length > 0) {
       this.isVisible = true;
       this.setIsPrintPricing(this.isVisible);
     }

package/mixins/product-view.js

@@ -110,7 +110,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
     }
 
     try {
-      if (this.preSetPrints) {
+      if (this.preSetPrints?.length) {
         for (const preSetPrint of this.preSetPrints) {
           const layers = preSetPrint.printTemplate?.layers || [{ type: 'text' }];
           for (const layer of layers) {
@@ -140,6 +140,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
               properties
             };
             const model = await getLayerModel(data);
+            model.createdAt = Date.now();
             this.addTemplateLayer(model);
           }
         }

package/package.json

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

package/store/product.js

@@ -205,7 +205,9 @@ export const actions = {
   },
   async calculateProductPrice({ state: { template, product, isPrintPricing }, commit, getters }, { shop, country, currency }) {
     commit('setCalculatingPrice', true);
-    const entities = getProductsForCalculatePricing(product, getters.usedSimpleProducts, template.layers, isPrintPricing, true);
+    const spProducts = getters.usedSimpleProducts?.length > 0 ? getters.usedSimpleProducts : (getters.defaultSimpleProduct ? [{ ...getters.defaultSimpleProduct, amount: 1 }] : []);
+    const entities = getProductsForCalculatePricing(product, spProducts, template.layers, isPrintPricing, true);
+
     const response = await api.calculateProductPrice({ entities, country: country?._id, currency: currency?._id }, shop._id);
     commit('setProductPricing', response);
     commit('setCalculatingPrice', false);