@lancom/shared 0.0.310 → 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/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/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/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.310",
+  "version": "0.0.311",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {