@lancom/shared 0.0.281 → 0.0.283

package/assets/js/api/index.js

@@ -154,11 +154,11 @@ const api = {
   sendFailedConversionFile(data, shop) {
     return _post(`shop/${shop}/image/send-failed-conversion`, data);
   },
-  fetchSuburbs(params) {
-    return _get('postcodes', params);
+  fetchSuburbs(params, shop) {
+    return _get(`shop/${shop || '-1'}/postcodes`, params);
   },
-  fetchAddressInfo(id) {
-    return _get(`postcodes/address/${id}`);
+  fetchAddressInfo(id, shop) {
+    return _get(`shop/${shop || '-1'}/postcodes/address/${id}`);
   },
   fetchProductPrintTemplates() {
     return _get('print-templates');

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

@@ -74,5 +74,7 @@ export const getPrintAreaByName = (params, product) => {
   const widthInInches = widthCm * cmToInchesRatio;
   const heightInInches = heightCm * cmToInchesRatio;
 
-  return { width, height, top, left, center, printArea, widthInInches, heightInInches };
+  const info = { width, height, top, left, center, printArea, widthInInches, heightInInches };
+  // console.log('getPrintAreaByName:info ', offsets, info, params);
+  return info;
 };

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

@@ -192,13 +192,15 @@ 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',
         art: 'createArtObject'
       };
       this[methods[layer.type]]({ layer, initial }).then(obj => {
-        obj.clipPath = this.boundingBox;
+        // obj.clipPath = this.boundingBox;
+        console.log('obj: ', obj.top, obj.left);
         this.handleListeners(obj, layer.type);
         this.editor.add(obj);
         if (active) {
@@ -222,21 +224,6 @@ export default class FabricHelper {
     buildWireframe({ width, height, editor: this.editor, print });
   }
 
-  checkAnyBoundingIntersection() {
-    const objects = this.editor.getObjects();
-
-    if (!objects.length) {
-      return this.dispatch('outOfPrintArea', false);
-    }
-
-    let isOut = false;
-    objects.forEach(object => {
-      if (!isOut) {
-        isOut = this.checkBoundingIntersection(object);
-      }
-    });
-  }
-
   checkBoundingIntersection(object) {
     const width = object.width * object.scaleX;
     const height = object.height * object.scaleY;
@@ -359,7 +346,7 @@ export default class FabricHelper {
           this.dispatch('setField', { field: 'copy', value: object.text });
         } else {
           this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
-          this.checkBoundingIntersection(object);
+          // this.checkBoundingIntersection(object);
         }
       });
     }

package/assets/js/utils/product.js

@@ -148,4 +148,13 @@ export function sortByOrder(items, itemProp) {
 export function sortByOrderASC(items, itemProp) {
   const getOrder = item => (itemProp ? +(item[itemProp] && item[itemProp].order) : item.order) || 0;
   return [...(items || [])].sort((a, b) => getOrder(a) - getOrder(b));
-}
+}
+
+export function getAllPrintAreas(product) {
+  return product.printAreas
+    ?.reduce((options, pa) => [
+      ...options,
+      pa,
+      ...pa.sizes.map(s => ({ ...s, side: pa.side }))
+    ], []) || [];
+}

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

@@ -133,7 +133,7 @@
           :suburb="suburb"
           :labelless="true"
           :required="true"
-          placeholder="Suburb"
+          :placeholder="postcodeLabel"
           @select="handleSuburbChange">
         </postcode-select>
         <div class="form-col col-half">
@@ -281,19 +281,19 @@
           <validation-provider
             v-slot="{ errors }"
             tag="div"
-            name="locality"
+            :name="localityLabel"
             class="form-col">
             <label
               for="locality"
               class="form-label">
-              Locality
+              {{ localityLabel }}
             </label>
             <input
               id="locality"
               ref="locality"
               v-model="address.city"
               name="locality"
-              placeholder="Locality"
+              :placeholder="localityLabel"
               type="text"
               class="form-field labelless"
               :class="{
@@ -309,19 +309,19 @@
           <validation-provider
             v-slot="{ errors }"
             tag="div"
-            name="state"
+            :name="stateLabel"
             class="form-col">
             <label
               for="state"
               class="form-label">
-              State
+              {{ stateLabel }}
             </label>
             <input
               id="state"
               ref="state"
               v-model="address.state"
               name="state"
-              placeholder="State"
+              :placeholder="stateLabel"
               type="text"
               class="form-field labelless"
               :class="{
@@ -365,13 +365,22 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['shop', 'country']),
+    ...mapGetters(['shop', 'country', 'MESSAGES']),
     ...mapGetters('cart', [
       'suburb'
     ]),
     ...mapGetters('auth', [
       'user'
-    ])
+    ]),
+    postcodeLabel() {
+      return this.MESSAGES?.POSTCODES_LABEL || 'Suburb';
+    },
+    localityLabel() {
+      return this.MESSAGES?.LOCALITY || 'Locality';
+    },
+    stateLabel() {
+      return this.MESSAGES?.STATE || 'State';
+    }
   },
   created() {
     if (!this.address.suburb && !this.suburb &&  this.user?.suburb) {

package/components/common/client_settings/client-settings.scss

@@ -55,13 +55,23 @@
     top: 40px;
     width: 220px;
     margin-top: 20px;
-    margin-left: 10px;
+    margin-left: -55px;
     // transform: translateY(-50%);
     padding: 15px;
     box-shadow: 0px 4px 121px 0px rgba(145, 136, 188, 0.34);
     background-color: white;
     border-radius: 12px;
   }
+  &__backdrop {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    z-index: 100;
+    background: red;
+
+  }
   &__field {
     font-size: 18px;
     font-weight: 600;
@@ -72,6 +82,10 @@
     cursor: pointer;
     padding: 6px;
     align-items: center;
+    &--open,
+    &--open * {
+      pointer-events: none !important;
+    }
     > i {
       color: $purple;
     }

package/components/common/client_settings/client-settings.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="ClientSettings__wrapper">
     <div
-      class="ClientSettings__field"
-      @click="isOpen = !isOpen">
-      <div class="lc_regular16 ClientSettings__value">
+      class="ClientSettings__field">
+      <div
+        class="lc_regular16 ClientSettings__value"
+        @click="isOpen = !isOpen">
         <span v-if="country">
           <img
             v-if="checkedCountry"
@@ -12,16 +13,11 @@
             v-else
             class="icon-globe"></i>
         </span>
-        <!-- <span class="ClientSettings__value--divider"></span> -->
-        <!-- <span v-if="currency">
-          <i class="icon-message"></i>
-        </span> -->
         <i class="icon-angle-down ClientSettings__caret"></i>
       </div>
     </div>
     <div
       v-if="isOpen"
-      v-click-outside="close"
       class="ClientSettings__dropdown">
       <div>
         <div
@@ -112,9 +108,6 @@ export default {
     }
   },
   methods: {
-    close() {
-      this.isOpen = false;
-    },
     toggleVisibleCountries() {
       this.visibleCountries = !this.visibleCountries;
     },

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

@@ -10,7 +10,7 @@
         v-if="labelless"
         class="form-label"
         @click="$refs.suburb.$el.focus()">
-        {{ labelText }}
+        {{ displayLabelText }}
       </label>
       <multiselect
         ref="suburb"
@@ -62,7 +62,7 @@
         v-if="!labelless"
         class="form-label label-inner"
         @click="$refs.suburb.$el.focus()">
-        {{ labelText }}
+        {{ displayLabelText }}
       </label>
       <slot></slot>
       <span
@@ -76,6 +76,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import debounce from 'lodash.debounce';
 import Multiselect from 'vue-multiselect';
 import api from '@lancom/shared/assets/js/api';
@@ -124,10 +125,14 @@ export default {
       suburbs: [],
       options: [],
       isLoading: false,
-      handleSearchWithDebounce: debounce(this.handleSearch, 500)
+      handleSearchWithDebounce: debounce(this.handleSearch, 1000)
     };
   },
   computed: {
+    ...mapGetters(['shop', 'MESSAGES']),
+    displayLabelText() {
+      return this.MESSAGES.POSTCODES_LABEL || this.labelText;
+    },
     model: {
       get() {
         return this.selected?._id ? this.selected : null;
@@ -146,11 +151,11 @@ export default {
   },
   methods: {
     async handleSearch(query) {
-      if (query.length) {
+      if (query.trim().length > 2) {
         this.isLoading = true;
         const country = this.codeCountry || this.country;
         const countryName = country ? (country.isoCode === 'GB' ? 'England' : (country.name || country)) : 'Australia';
-        this.suburbs = await api.fetchSuburbs({ query, country: countryName });
+        this.suburbs = await api.fetchSuburbs({ query: query.trim(), country: countryName }, this.shop?._id);
         this.options = this.suburbs.map(this.createOptionFromSuburb);
         this.isLoading = false;
       } else {
@@ -167,7 +172,7 @@ export default {
     async updatePostcode(option) {
       this.selected = option;
       if (!option.value) {
-        const suburb = await api.fetchAddressInfo(option._id);
+        const suburb = await api.fetchAddressInfo(option._id, this.shop?._id);
         this.$emit('input', suburb.postcode);
         this.$emit('select', suburb);
       } else {

package/components/editor/editor.scss

@@ -9,7 +9,7 @@
   &__workspace {
     @media (min-width: $bp-medium-min) {
       position: sticky;
-      top: calc(#{$navbar_height} + 50px);
+      top: calc(#{$navbar_height} + 20px);
     }
   }
   &__content {

package/components/editor/editor.vue

@@ -86,6 +86,7 @@ import EditorProductDetails from './editor_product_details/editor-product-detail
 import MobileEditorProductDetails from './mobile_editor_product_details/mobile-editor-product-details';
 import EditorLayers from './editor_layers/editor-layers';
 import EditorWizard from './editor_wizard/editor-wizard';
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
 const MIN_SCREEN_AMOUNT = 125;
 
@@ -102,7 +103,8 @@ export default {
   },
   mixins: [
     modals,
-    confirmModal
+    confirmModal,
+    addToCartMixin
   ],
   data() {
     return {
@@ -149,9 +151,6 @@ export default {
     productAvailableInCurrentCountry() {
       const { countries } = this.product;
       return !(countries || []).length || countries.includes(this.country._id);
-    },
-    addToCartDisabled() {
-      return !this.usedSimpleProducts.length || (this.product.printOnly && !this.template.layers.length);
     }
   },
   watch: {
@@ -200,24 +199,6 @@ export default {
         this.resetLayers();
       }
     },
-    async proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
-      await this.addToCart({ entities, shop: this.shop, pricing: this.productPricing, country: this.country, currency: this.currency });
-      this.$router.push('/checkout/cart');
-      // this.showCartModal(async () => {
-      //   const message = 'Do you wish to continue with editing the current design or reset the editor?';
-      //   const reset = await this.showConfirmationModal(message, {
-      //     cancelLabel: 'Keep design',
-      //     submitLabel: 'Reset editor'
-      //   });
-      //   if (reset) {
-      //     this.clearTemplate();
-      //     this.resetLayers();
-      //   } else {
-      //     this.clearTemplate(true);
-      //   }
-      // });
-    },
     goToDesignAndClosePopover() {
       this.selectTab('design');
       if (this.$refs.popover) {

package/components/editor/editor_layers/editor-layers.scss

@@ -19,4 +19,22 @@
   &__pricing {
     margin-top: 30px;
   }
+}
+.EditorLayersGroup {
+  &__wrapper {
+    margin: 5px 0;
+  }
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: $light_gray;
+    cursor: pointer;
+  }
+  &__arrow {
+    &.opened {
+      transform: rotateZ(-90deg);
+    }
+  }
 }

package/components/editor/editor_layers/editor-layers.vue

@@ -30,24 +30,41 @@
         <editor-layers-toolbar
           @layer-added="handleLayerAdded">
         </editor-layers-toolbar>
-        <div
-          v-if="editableLayers.length"
-          class="EditorLayers__list-content">
-          <div class="EditorLayers__list-header">
-            <h5 class="lc_h5">
-              Layers:
-            </h5>
+        <div v-if="editableLayersGroups.length > 0">
+          <div
+            v-for="group in editableLayersGroups"
+            :key="group.printArea._id"
+            class="EditorLayersGroup__wrapper">
+            <div
+              @click="toggleOpenedGroup(group.printArea)"
+              class="EditorLayersGroup__header">
+              <div>
+                <h5 class="lc_h5">
+                   {{ group.printArea.name }} ({{ group.layers.length }})
+                </h5>
+                <div class="lc_caption">{{ group.printArea.side }}</div>
+              </div>
+              <div
+                class="EditorLayersGroup__arrow"
+                :class="{ opened: openedGroup === group.printArea._id }">
+                <i class="icon-arrow-left"></i>
+              </div>
+            </div>
+            <div
+              class="EditorLayers__list-content"
+              v-if="openedGroup === group.printArea._id">
+              <editor-layers-layer
+                v-for="(layer, index) in group.layers"
+                :key="`${layer.createdAt}-${index}`"
+                :layer="layer"
+                :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
+                @select="setSelectedLayer(layer)"
+                @edit="editLayer(layer)"
+                @duplicate="duplicateLayer(layer)"
+                @remove="removeLayer(layer)">
+              </editor-layers-layer>
+            </div>
           </div>
-          <editor-layers-layer
-            v-for="(layer, index) in editableLayers"
-            :key="`${layer.createdAt}-${index}`"
-            :layer="layer"
-            :active="selectedLayer && selectedLayer.createdAt === layer.createdAt"
-            @select="setSelectedLayer(layer)"
-            @edit="editLayer(layer)"
-            @duplicate="duplicateLayer(layer)"
-            @remove="removeLayer(layer)">
-          </editor-layers-layer>
         </div>
       </div>
     </transition>
@@ -62,6 +79,7 @@
 import { createNamespacedHelpers } from 'vuex';
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import { cloneLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { getAllPrintAreas } from '@lancom/shared/assets/js/utils/product';
 import EditorLayerForms from './editor_layer_forms';
 import EditorLayersLayer from './editor_layers_layer/editor-layers-layer';
 import EditorLayersToolbar from './editor_layers_toolbar/editor-layers-toolbar';
@@ -76,6 +94,11 @@ export default {
     EditorLayersToolbar,
     EditorPricing
   },
+  data() {
+    return {
+      openedGroup: null
+    };
+  },
   props: {
     hasPricing: {
       type: Boolean,
@@ -84,6 +107,7 @@ export default {
   },
   computed: {
     ...mapGetters([
+      'product',
       'template',
       'editableLayers',
       'selectedLayer',
@@ -92,6 +116,20 @@ export default {
     ]),
     editableLayerType() {
       return this.selectedLayer ? `editor-layer-form-${this.selectedLayer.type}` : null;
+    },
+    editableLayersGroups() {
+      const printAreas = getAllPrintAreas(this.product);
+      const groups = new Map();
+      this.editableLayers.forEach(layer => {
+        const printArea = printAreas.find(pa => pa._id === layer.printArea);
+        if (printArea) {
+          const defaultGroup = { layers: [], printArea };
+          const group = groups.get(printArea._id) || defaultGroup;
+          group.layers.push(layer);
+          groups.set(printArea._id, group);
+        }
+      });
+      return Array.from(groups.values());
     }
   },
   watch: {
@@ -111,9 +149,26 @@ export default {
       'setSelectedLayerField',
       'addTemplateLayer',
       'removeTemplateLayer',
-      'updateTemplateLayer'
+      'updateTemplateLayer',
+      'setEditableSide',
+      'setSelectedPrintArea',
+      'setEditablePrintArea'
     ]),
     ...mapActions(['increaseLayersUpdatesCount']),
+    toggleOpenedGroup(printArea) {
+      this.openedGroup = printArea?._id === this.openedGroup ? null : printArea?._id;
+      if (printArea) {
+        if (this.editableSide.id !== printArea.side) {
+          this.setEditableSide({ id: printArea.side });
+        }
+        this.setEditablePrintArea(printArea);
+        this.setSelectedPrintArea({
+          sideId: printArea.side,
+          printArea: printArea._id,
+          size: printArea.printSize
+        });
+      }
+    },
     handleLayerAdded({ layer, toEditMode }) {
       if (toEditMode) {
         this.editLayer(layer);

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.vue

@@ -17,6 +17,12 @@
       </div>
     </div>
     <div class="EditorLayersLayer__content">
+      <!-- <div>
+        <div v-if="layerPrintArea">layerPrintArea: {{ layerPrintArea.name }}</div>
+        <div v-if="layerPrintType">layerPrintType: {{ layerPrintType.name }}</div>
+        <div v-if="layerPrintSize">layerPrintSize: {{ layerPrintSize.name }}</div>
+        <div v-if="side">side: {{ side }}</div>
+      </div> -->
       <div class="EditorLayersLayer__info">
         <div class="EditorLayersLayer__info-row">
           <div class="EditorLayersLayer__badge">
@@ -62,16 +68,14 @@
 </template>
 
 <script>
+import printLayerMixin from '@lancom/shared/mixins/print-layer';
 import { number } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'EditorLayersLayer',
+  mixins: [printLayerMixin],
   filters: { number },
   props: {
-    layer: {
-      type: Object,
-      required: true
-    },
     active: {
       type: Boolean,
       default: false
@@ -118,6 +122,9 @@ export default {
         value: `${quality} / ${this.layer.dpi} DPI`
       };
     }
+  },
+  mounted() {
+    console.log('layer: ', this.layer);
   }
 };
 </script>

package/components/editor/editor_print_area_options/editor-print-area-options.vue

@@ -82,7 +82,10 @@ export default {
         .map(printArea => ({
           ...groupItemToOption(printArea),
           sides: [printArea.side],
-          suboptions: (printArea.sizes || []).map(i => ({ ...groupItemToOption(i), sides: [printArea.side] }))
+          suboptions: [
+            { ...groupItemToOption(printArea), sides: [printArea.side] },
+            ...(printArea.sizes || []).map(i => ({ ...groupItemToOption(i), sides: [printArea.side] }))
+          ]
         }));
     }
   }

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -100,7 +100,7 @@ export default {
   },
   methods: {
     handleClick() {
-      if (this.option.suboptions && this.option.suboptions.length) {
+      if (this.option.suboptions && this.option.suboptions.length > 1) {
         this.showOptions = !this.showOptions;
       } else {
         this.$emit('select', this.option);
@@ -108,7 +108,7 @@ export default {
     },
     selectSuboption(option) {
       this.closeSuboptions();
-      this.$emit('select', { ...option, printArea: { ...option.printArea, _id: this.option.printArea._id } });
+      this.$emit('select', option);
     },
     calcPrintPrice(option) {
       const amount = this.usedSimpleProducts.reduce((amount, product) => product.amount + amount, 0);

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

@@ -6,6 +6,7 @@
       <tabs
         v-if="productDetailsLoaded"
         :tabs="productSides"
+        :selected="editableSide.id"
         :full-width="false"
         @select="selectTab">
         <template
@@ -92,7 +93,7 @@
         v-if="productDetailsLoaded"
         ref="areaOptions"
         :product="product"
-        :selected="selectedPrintArea._id"
+        :selected="selectedPrintArea && selectedPrintArea._id"
         :side="editableSide.id"
         @select="selectPrintArea"
         @option-mouseover="toogleBoundBox(true, $event)"
@@ -157,7 +158,9 @@ export default {
       'setEditablePrintArea'
     ]),
     selectTab(value) {
-      this.setEditableSide({ id: value });
+      if (this.editableSide.id !== value) {
+        this.setEditableSide({ id: value });
+      }
     },
     toggleSide() {
       this.setEditableSide({

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

@@ -25,7 +25,7 @@
       </div>
     </div>
     <div
-      v-if="!editableLayers.length && fabricHelper"
+      v-if="!printAreaLayers.length && fabricHelper"
       class="EditorWorkspaceSide__placeholder"
       :class="{ tighten: printAreaIsSmall }"
       ignore-document-click
@@ -89,7 +89,7 @@ export default {
       type: Object
     },
     printAreaSize: {
-      type: Object,
+      type: String | Object,
       required: true
     },
     zoomSize: {
@@ -121,6 +121,9 @@ export default {
       'editorSize',
       'editModeSelectedLayer'
     ]),
+    printAreaLayers() {
+      return this.editableLayers.filter(l => l.printArea === this.printArea._id);
+    },
     deleteButtonPosition() {
       return this.deleteButtonPos ? {
         top: `${this.deleteButtonPos.y}px`,
@@ -151,7 +154,8 @@ export default {
       );
     },
     printAreaIsSmall() {
-      return this.printAreaSize?.alias === 'rect10';
+      const code = this.printAreaSize?.alias || this.printAreaSize;
+      return code === 'rect10';
     },
     backgroundColor() {
       return this.backgroundImageLoaded && this.editableColor?.rgb;
@@ -174,7 +178,6 @@ export default {
       this.redrawWithThrottle();
     },
     printArea(value) {
-      console.log(value);
       this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
       this.redraw();
     },
@@ -281,23 +284,16 @@ export default {
       await this.addLayersToCanvas();
       this.drawingInProcess = false;
       this.saveLayersAsImageWithDebounce();
-      this.checkBoundingIntersection();
-    },
-    addLayersToCanvas() {
-      return this.editableLayers.reduce(async (promise, layer) => {
-        await promise;
-        return new Promise(resolve => {
-          this.fabricHelper.createObject({
-            layer,
-            active: this.isLayerSelected(layer)
-          }).then(obj => {
-            resolve();
-          });
-        });
-      }, Promise.resolve());
     },
-    checkBoundingIntersection() {
-      this.fabricHelper.checkAnyBoundingIntersection();
+    async addLayersToCanvas() {
+      const layers = this.editableLayers.filter(l => l.sideId === this.side);
+      for (const layer of layers) {
+        const params = {
+          layer,
+          active: this.isLayerSelected(layer)
+        };
+        await this.fabricHelper.createObject(params);
+      }
     },
     isLayerSelected(layer) {
       return this.selectedLayer && this.selectedLayer.createdAt === layer.createdAt;
@@ -326,6 +322,7 @@ export default {
       this.setLayersThumbnail({ side: this.side, value: image });
     },
     createTextLayer() {
+      window.scrollTo(0, 0);
       this.createLayer({ type: 'text', isEditMode: true });
     },
     setDeleteButtonPosition(pos) {

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

@@ -64,7 +64,7 @@
     background: #FFF;
     box-shadow: $elevation2;
     overflow: hidden;
-    z-index: 104;
+    z-index: 99999;
     padding-bottom: 78px;
     transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1);
   }
@@ -75,7 +75,7 @@
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, .3);
-    z-index: 103;
+    z-index: 99998;
     transition: opacity .4s cubic-bezier(0.23, 1, 0.32, 1);
   }
   &__close {

package/components/product/editor_pricing/editor-pricing.vue

@@ -87,7 +87,7 @@
             v-if="hasCartBtn"
             btn-class="green"
             btn-label="Add to cart"
-            :btn-disabled="addToCartDisabled || !isValidOrderQuantity"
+            :btn-disabled="addToCartDisabled"
             class="EditorPricing__add-to-cart-button"
             @onclick="proceedToCard" />
         </div>
@@ -97,14 +97,15 @@
 </template>
 
 <script>
-import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 import debounce from 'lodash.debounce';
-import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
 import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
 import EditorPricingDetails from '@lancom/shared/components/editor/editor_pricing/editor_pricing_details/editor-pricing-details';
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
 export default {
   name: 'EditorPricing',
+  mixins: [addToCartMixin],
   filters: {
     price,
     tax,
@@ -118,7 +119,6 @@ export default {
     return {
       price: null,
       showDetails: false,
-      addedToCart: false,
       calculatePriceWithDebounce: debounce(() => this.calculateProductPrice({ shop: this.shop, country: this.country }), 500)
     };
   },
@@ -134,32 +134,15 @@ export default {
       'product',
       'usedSimpleProducts',
       'usedSimpleProductsQuantity',
-      'usedBigSizeSimpleProductsQuantity',
       'productPricing',
       'layers',
       'selectedPrintAreas',
-      'printsPricing',
-      'template',
-      'editorSize',
       'availablePrintTypes',
       'isPrintPricing',
       'minimumOrderQuantity',
-      'calculatingPrice',
       'priceIncludeGST',
       'multipack'
     ]),
-    isValidOrderQuantity() {
-      return this.isValidBigSizeOrderQuantity && this.isValidMiltipackOrderQuantity && (!this.minimumOrderQuantity || this.usedSimpleProductsQuantity >= this.minimumOrderQuantity);
-    },
-    isValidBigSizeOrderQuantity() {
-      return this.usedSimpleProductsQuantity ? ((this.usedBigSizeSimpleProductsQuantity / this.usedSimpleProductsQuantity * 100) <= 50) : true;
-    },
-    isValidMiltipackOrderQuantity() {
-      return !this.multipack || this.multipack.qty <= this.usedSimpleProductsQuantity;
-    },
-    addToCartDisabled() {
-      return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice;
-    },
     hasUsedSimpleProducts() {
       return this.usedSimpleProducts.length > 0;
     },
@@ -199,23 +182,9 @@ export default {
     }
   },
   methods: {
-    ...mapActions('cart', ['addToCart']),
     ...mapActions('product', [
       'calculateProductPrice'
     ]),
-    ...mapMutations('product', ['clearTemplate', 'setIsPrintPricing']),
-    ...mapMutations('layers', ['resetLayers']),
-    proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing);
-      this.addToCart({ entities, shop: this.shop, pricing: this.productPricing, country: this.country, currency: this.currency });
-      this.$toastr.s('Products successfully added to cart');
-      this.clearTemplate(true);
-      // this.resetLayers();
-      // this.setIsPrintPricing(false);
-      setTimeout(() => {
-        this.addedToCart = true;
-      });
-    },
     toggleDetails() {
       this.showDetails = !this.showDetails;
     }

package/components/product/wizard/wizard_print_layers/wizard_print_layer/wizard-print-layer.vue

@@ -149,12 +149,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import printLayerMixin from '@lancom/shared/mixins/print-layer';
 import { pricingRange } from '@lancom/shared/assets/js/utils/filters';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
 import WizardTextOrLogoForm from './../../wizard_print_text_or_logo/wizard_text_or_logo_form/wizard-text-or-logo-form';
 
 export default {
   name: 'WizardPrintLayer',
+  mixins: [printLayerMixin],
   components: {
     PricingDiscountsTable,
     WizardTextOrLogoForm
@@ -163,45 +165,12 @@ export default {
     pricingRange
   },
   props: {
-    layer: {
-      type: Object,
-      required: true
-    },
     editable: {
       type: Boolean
     }
   },
   computed: {
-    ...mapGetters(['currency']),
-    ...mapGetters('product', ['product']),
-    type() {
-      return this.layer.type;
-    },
-    productPrintAreas() {
-      return this.product.printAreas || [];
-    },
-    layerPrintArea() {
-      return this.productPrintAreas.find(({ _id }) => _id === this.layer.printArea);
-    },
-    layerPrintSizes() {
-      const { printSize, sizes = [] } = this.layerPrintArea;
-      return [
-        printSize,
-        ...sizes
-          .map(({ printSize }) => printSize)
-          .filter(({ _id }) => _id !== printSize._id)
-      ];
-    },
-    layerPrintType() {
-      return this.product.printTypes.find(({ _id }) => _id === this.layer.printType);
-    },
-    layerPrintSize() {
-      return this.layerPrintSizes.find(({ _id }) => _id === this.layer.printSize);
-    },
-    layerPrintPricing() {
-      const printArea = this.layerPrintType.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType.printAreas[0];
-      return printArea.printCost;
-    }
+    ...mapGetters(['currency'])
   }
 };
 </script>

package/components/product/wizard/wizard_print_text_or_logo/wizard-print-text-or-logo.vue

@@ -33,6 +33,7 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex';
 import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
 import WizardTextOrLogoForm from './wizard_text_or_logo_form/wizard-text-or-logo-form';
 
 const DEFAULT_LAYER = {
@@ -55,7 +56,15 @@ export default {
   },
   computed: {
     ...mapGetters('layers', ['editableLayers']),
-    ...mapGetters('product', ['editableColor', 'selectedPrintAreas', 'selectedPrintTypes', 'editablePrintAreas']),
+    ...mapGetters('product', [
+      'product',
+      'editorSize',
+      'editableColor',
+      'selectedPrintAreas',
+      'selectedPrintTypes',
+      'editablePrintAreas',
+      'editableSide'
+    ]),
     isValidLayers() {
       return !this.layers.some(l => !l.copy && !l.file);
     }
@@ -78,9 +87,21 @@ export default {
           const editablePrintArea = this.editablePrintAreas.find(pa => pa._id === printAreaId);
           const selectedPrintArea = this.selectedPrintAreas[printAreaId];
           const selectedPrintType = this.selectedPrintTypes[printAreaId];
+          const { width, height } = this.editorSize;
+          const { center: { top, left } } = getPrintAreaByName({
+            printArea: editablePrintArea._id,
+            printSize: selectedPrintArea,
+            printAreaOffsets: editablePrintArea?.printAreaOffsets,
+            editorWidth: width,
+            editorHeight: height
+          }, this.product);
+          
           const data = {
             type: layer.type,
             colorId: this.editableColor?._id,
+            sideId: editablePrintArea.side,
+            top,
+            left,
             properties: {
               notes: layer.notes,
               printArea: editablePrintArea._id,

package/components/the_navbar/the-navbar.scss

@@ -10,7 +10,7 @@
     top: 0;
     left: 0;
     right: 0;
-    z-index: 101;
+    z-index: 9999;
     @media (max-width: $bp-small-max) {
       height: $mobile_navbar_height;
     }

package/feeds/google-shopping.js

@@ -68,7 +68,7 @@ async function googleShoppingFeed(axios, config, availableStores, country) {
                 'g:color': { _text: sp.color.name },
                 'g:image_link': { _text: sp.image || image },
                 'g:additional_image_link': (sp.image ? [image, ...images] : images).map(i => ({ _text: i })),
-                'g:price': { _text: `${(sp.price || 0)} AUD` },
+                'g:price': { _text: `${(sp.price || 0)} ${sp.currency || 'AUD'}` },
                 'g:availability': { _text: sp.quantityStock > 0 ? 'in_stock' : 'out_of_stock' },
                 'g:google_product_category': { _text: product.feedGoogleProductCategory || 2047 },
                 'g:product_type': { _text: product.feedProductType || `Home > Products > ${product.productType.name}`, },

package/layouts/products.vue

@@ -47,7 +47,7 @@
           </div>
         </div>
       </div>
-      <LazyHydrate on-interaction>
+      <LazyHydrate when-idle>
         <the-footer />
       </LazyHydrate>
       <modals-container />

package/mixins/add-to-cart.js

@@ -0,0 +1,64 @@
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  data() {
+    return {
+      addedToCart: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'usedSimpleProductsQuantity',
+      'usedBigSizeSimpleProductsQuantity',
+      'productPricing',
+      'layers',
+      'template',
+      'isPrintPricing',
+      'minimumOrderQuantity',
+      'calculatingPrice',
+      'multipack'
+    ]),
+    isValidOrderQuantity() {
+      return this.isValidBigSizeOrderQuantity && this.isValidMiltipackOrderQuantity && (!this.minimumOrderQuantity || this.usedSimpleProductsQuantity >= this.minimumOrderQuantity);
+    },
+    isValidBigSizeOrderQuantity() {
+      return this.usedSimpleProductsQuantity ? ((this.usedBigSizeSimpleProductsQuantity / this.usedSimpleProductsQuantity * 100) <= 50) : true;
+    },
+    isValidMiltipackOrderQuantity() {
+      return !this.multipack || this.multipack.qty <= this.usedSimpleProductsQuantity;
+    },
+    addToCartDisabled() {
+      return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice || !this.isValidOrderQuantity;
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['addToCart', 'calculateCartPrice']),
+    ...mapMutations('product', ['clearTemplate', 'setIsPrintPricing']),
+    ...mapMutations('layers', ['resetLayers']),
+    async proceedToCard() {
+      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing);
+      await this.addToCart({
+        entities,
+        shop: this.shop,
+        pricing: this.productPricing,
+        country: this.country,
+        currency: this.currency
+      });
+      this.$toastr.s('Products successfully added to cart');
+
+      this.clearTemplate(true);
+
+      this.calculateCartPrice({ shop: this.shop, country: this.country });
+
+      // this.resetLayers();
+      // this.setIsPrintPricing(false);
+      setTimeout(() => {
+        this.addedToCart = true;
+      });
+    }
+  }
+};

package/mixins/print-layer.js

@@ -0,0 +1,45 @@
+import { mapGetters } from 'vuex';
+import { getAllPrintAreas } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('product', ['product']),
+    side() {
+      return this.layer.sideId;
+    },
+    type() {
+      return this.layer.type;
+    },
+    productPrintAreas() {
+      return getAllPrintAreas(this.product);
+    },
+    layerPrintArea() {
+      return this.productPrintAreas.find(({ _id }) => _id === this.layer.printArea);
+    },
+    layerPrintSizes() {
+      const { printSize, sizes = [] } = this.layerPrintArea;
+      return [
+        printSize,
+        ...sizes
+          .map(({ printSize }) => printSize)
+          .filter(({ _id }) => _id !== printSize._id)
+      ];
+    },
+    layerPrintType() {
+      return this.product.printTypes.find(({ _id }) => _id === this.layer.printType);
+    },
+    layerPrintSize() {
+      return this.layerPrintSizes.find(({ _id }) => _id === this.layer.printSize);
+    },
+    layerPrintPricing() {
+      const printArea = this.layerPrintType.printAreas.find(({ printSizes }) => printSizes.map(({ _id }) => _id).includes(this.layer.printSize)) || this.layerPrintType.printAreas[0];
+      return printArea.printCost;
+    }
+  }
+};

package/package.json

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

package/store/cart.js

@@ -156,9 +156,11 @@ export const actions = {
   async calculateCartPrice({ state: { suburb, entities, coupon, cartPricing }, commit }, { shop, country }) {
     const selectedSuppliersWithRates = cartPricing?.shipping?.suppliersWithRates;
     const payload = generateCalculatePriceData(entities, suburb, null, coupon, selectedSuppliersWithRates, country);
+    console.log('calculateCartPrice:payload: ', payload)
     try {
       commit('setCartPricingCalculating', true);
       const response = await api.calculateProductPrice(payload, shop._id);
+      console.log('response: ', response);
       commit('setCartPricing', response);
       commit('setCartPricingError', null);
     } catch (e) {
@@ -220,6 +222,7 @@ export const mutations = {
     state.id = id;
   },
   setEntities(state, entities) {
+    console.log('setEntities: ', entities);
     state.entities = entities;
   },
   setSuburb(state, suburb) {
@@ -229,6 +232,7 @@ export const mutations = {
     state.coupon = coupon;
   },
   setCartPricing(state, price) {
+    console.log('setCartPricing: ', price);
     state.cartPricing = price;
   },
   setCartPricingCalculating(state, calculating) {

package/store/index.js

@@ -1,8 +1,10 @@
 import api from '@lancom/shared/assets/js/api';
 import { saveStatePlugin, loadState } from '@lancom/shared/plugins/save-state';
+import { MESSAGES, COUNTRIES_MESSAGES } from '@/messages';
 const cookieparser = process.server ? require('cookieparser') : undefined;
 const CLOSED_NOTIFICATION = 'lancom-closed-notification-1.0';
 
+
 export const state = () => ({
   country: null,
   currency: null,
@@ -38,7 +40,8 @@ export const getters = {
   taxName: ({ pricing }) => pricing?.taxName || 'GST',
   displayPricingWithTax: ({ pricing }) => !!pricing?.displayPricingWithTax,
   screenPrintsPrices: ({ pricing }) => pricing?.screenPrintsPrices || {},
-  depositInfo: ({ depositInfo }) => depositInfo || {}
+  depositInfo: ({ depositInfo }) => depositInfo || {},
+  MESSAGES: ({ country }) => ({ ...MESSAGES, ...(COUNTRIES_MESSAGES[country?.isoCode] || {}) })
 };
 
 export const actions = {

package/store/product.js

@@ -82,11 +82,7 @@ export const getters = {
   availableColors: ({ availableColors }) => availableColors,
   availableSizes: ({ availableSizes }) => availableSizes,
   editableColor: ({ editableColor }) => editableColor,
-  editableLayers: ({ template, editableColor, editablePrintArea }) => template.layers
-    .filter(({ printArea }) => (
-      // colorId === editableColor._id &&
-      printArea === editablePrintArea?._id
-    )),
+  editableLayers: ({ template, editableColor, editablePrintArea }) => template.layers,
   selectedLayer: ({ selectedLayer }) => selectedLayer,
   editModeSelectedLayer: ({ editModeSelectedLayer }) => editModeSelectedLayer,
   selectedPrintAreas: ({ selectedPrintAreas }) => selectedPrintAreas,
@@ -106,6 +102,8 @@ export const getters = {
   printArea: ({ editablePrintArea, editorSize: { width, height }, product }) => {
     return getPrintAreaByName({
       printArea: editablePrintArea?._id,
+      printSize: editablePrintArea?.printSize,
+      printAreaOffsets: editablePrintArea?.printAreaOffsets,
       editorWidth: width,
       editorHeight: height
     }, product);
@@ -122,7 +120,7 @@ export const getters = {
   minimumOrderQuantity: ({ product, template }) => {
     const layersPrintTypes = (template.layers || []).map(({ printType }) => printType);
     const printTypesMinQuantity = (product.printTypes || [])
-      .filter(printType => layersPrintTypes.includes(printType._id))
+      .filter(printType => layersPrintTypes.includes(printType._id || printType))
       .map(printType => printType.minQuantity);
     return Math.max(
       product.minimumOrderQuantity,
@@ -242,6 +240,7 @@ export const actions = {
         printType: selectedPrintType?._id
       }
     });
+    console.log('layer: ', layer);
     if (preselect) {
       commit('setSelectedLayer', layer);
     }