@lancom/shared 0.0.287 → 0.0.289

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

@@ -340,14 +340,15 @@ export default class FabricHelper {
       object.on('changed', () => {
         // this.dispatch('setField', { field: 'copy', value: object.text });
         // this.dispatch('setField', { field: 'boundingRect', value: object.getBoundingRect() });
-        if (/\n/g.test(object.text || '')) {
-          this.discardActiveObjects();
-          object.text = object.text.replace(/\n/g, '');
-          this.dispatch('setField', { field: 'copy', value: object.text });
-        } else {
-          this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
-          // this.checkBoundingIntersection(object);
-        }
+        // if (/\n/g.test(object.text || '')) {
+        //   this.discardActiveObjects();
+        //   object.text = object.text.replace(/\n/g, '');
+        //   this.dispatch('setField', { field: 'copy', value: object.text });
+        // } else {
+        //   this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
+        //   // this.checkBoundingIntersection(object);
+        // }
+        this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
       });
     }
     /*

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

@@ -3,6 +3,7 @@ import {
   FONTS, FONTS_HEBREW, FONTS_HINDI, FONTS_BENGALI, FONTS_GUJARATI, FONTS_KANNADA, FONTS_MALYALAM,
   FONTS_MARATHI, FONTS_TAMIL, FONTS_TELUGU, FONTS_ORIYA
 } from './../constants/fonts';
+import Vue from 'vue';
 
 const fontsLoadList = {};
 
@@ -61,8 +62,9 @@ export const getFormattedFont = alias => {
 };
 
 export const getFontPath = alias => {
+  const { PROD_CDN_URL, DEV_CDN_URL } = Vue.$env;
   const { path } = getFont(alias) || {};
-  return path && staticLink(path);
+  return path && staticLink(`${PROD_CDN_URL || DEV_CDN_URL || ''}${path}`);
 };
 
 export const loadFont = alias => new Promise((resolve, reject) => {

package/assets/js/utils/shop.js

@@ -0,0 +1,28 @@
+export function getShopCountrySettings(shop, country) {
+  const countrySettings = (shop.countries || []).find(c => c.country?._id === country?._id) || { settings: [] };
+  const countrySetting = (countrySettings?.settings || [])[0];
+
+  return {
+    ...shop.settings,
+    contacts: {
+      ...shop.settings.contacts,
+      ...settingsValues(countrySetting?.settings?.contacts)
+    },
+    depositInfo: {
+      ...shop.settings.depositInfo,
+      ...settingsValues(countrySetting?.settings?.depositInfo)
+    },
+    order: {
+      ...shop.settings.order,
+      ...settingsValues(countrySetting?.settings?.order)
+    },
+    pricing: {
+      ...shop.settings.pricing,
+      ...settingsValues(countrySetting?.settings?.pricing)
+    }
+  };
+}
+
+function settingsValues(settings) {
+  return Object.keys(settings || {}).reduce((s, key) => (!!settings[key] ? { ...s, [key]: settings[key] } : s), {});
+}

package/components/checkout/cart/cart.vue

@@ -26,6 +26,7 @@
             <postcode-select
               :suburb="suburb"
               :labelless="true"
+              :only-postcode="true"
               :placeholder="postcodeLabel"
               :label-text="postcodeInfoLabel"
               @select="handleSuburbChange" />

package/components/checkout/cart/cart_entities_group/cart_entities_group_size_cell/cart-entities-group-size-cell.vue

@@ -14,6 +14,7 @@
       min="0"
       class="form-field centered CartEntitiesGroupSizeCell__field"
       :class="{ empty: !model }"
+      @wheel="onWheel"
       @focus="onFocus()"
       @blur="onBlur()" />
     <div
@@ -76,6 +77,9 @@ export default {
   },
   methods: {
     ...mapActions('cart', ['setEntityAmount']),
+    onWheel(e) {
+      e.target.blur();
+    },
     onFocus() {
       this.defaultValue = '';
     },

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart_entity_color_simple_product/cart-entity-color-simple-product.vue

@@ -20,6 +20,7 @@
           empty: !model,
           error: model > simpleProduct.quantityStock
         }"
+        @wheel="onWheel"
         @change="onChange()"
         @focus="onFocus()"
         @blur="onBlur()" />
@@ -119,6 +120,9 @@ export default {
   },
   methods: {
     ...mapActions('cart', ['setSimpleProductAmount']),
+    onWheel(e) {
+      e.target.blur();
+    },
     onChange() {
       if (this.$refs.input) {
         this.$refs.input.blur();

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

@@ -23,7 +23,7 @@
           @click="updatePaymentType(true)">
           <checked-icon :checked="isDepositPayment" />
           <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
-            Direct Deposit
+            Bank Transfer
           </span>
         </label>
       </div>
@@ -110,6 +110,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['MESSAGES']),
     ...mapGetters(['country', 'currency']),
     ...mapGetters(['orderSettings']),
     ...mapGetters('order', ['card']),
@@ -189,7 +190,7 @@ export default {
             this.$emit('next');
           } else {
             this.$nextTick(async () => {
-              const message = `Unfortunately our payment gateway has reported the following error: '${this.errorMessage}'. Please check your card number and try again. Alternatively you can proceed with a 'pay later' order and receive an email confirmation now and pay via credit card or direct deposit`;
+              const message = `Unfortunately our payment gateway has reported the following error: '${this.errorMessage}'. Please check your card number and try again. Alternatively you can proceed with a 'pay later' order and receive an email confirmation now and pay via credit card or bank transfer`;
               const options = { submitLabel: 'PAY LATER', cancelLabel: 'TRY AGAIN', warning: true };
               const isSwitchToDeposit = await this.showConfirmationModal(message, options);
               if (isSwitchToDeposit) {

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

@@ -110,6 +110,10 @@ export default {
       type: Boolean,
       default: false
     },
+    onlyPostcode: {
+      type: Boolean,
+      default: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -154,7 +158,14 @@ export default {
         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: query.trim(), country: countryName }, this.shop?._id);
+        const params = {
+          query: query.trim(),
+          country: countryName
+        };
+        if (this.onlyPostcode) {
+          params.onlyPostcode = true;
+        }
+        this.suburbs = await api.fetchSuburbs(params, this.shop?._id);
         this.options = this.suburbs.map(this.createOptionFromSuburb);
         this.isLoading = false;
       } else {
@@ -163,9 +174,9 @@ export default {
     },
     createOptionFromSuburb({ locality, state, postcode, city, _id, address, id }) {
       return {
-        label: address || [locality || city, state, postcode].filter(i => !!i).join(', '),
+        label: this.onlyPostcode ? postcode : (address || [locality || city, state, postcode].filter(i => !!i).join(', ')),
         value: postcode,
-        _id: id || _id
+        _id: id || _id || postcode
       };
     },
     async updatePostcode(option) {

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -16,133 +16,132 @@
             class="form-label">
             Write your text
           </label>
-          <input
+          <textarea
             id="copy"
             ref="copy"
             v-model="copy"
             type="text"
             name="copy"
+            style="height: 100px;"
             class="form-field bordered labelless"
             placeholder="Your text here"
-            :class="{ filled: copy }" />
+            :class="{ filled: copy }"></textarea>
         </validation-provider>
-        <fragment>
-          <div
-            v-if="copy.includes('\n')"
-            class="form-row">
-            <div class="form-label">
-              Align text
+        <div
+          v-if="copy.includes('\n')"
+          class="form-row">
+          <div class="form-label">
+            Align text
+          </div>
+          <div class="EditorLayerFormText__align-options">
+            <div
+              class="EditorLayerFormText__align-option ripple"
+              :class="{ active: textAlign === 'left' }"
+              @click="textAlign = 'left'">
+              <i class="icon-align-left"></i>
             </div>
-            <div class="EditorLayerFormText__align-options">
-              <div
-                class="EditorLayerFormText__align-option ripple"
-                :class="{ active: textAlign === 'left' }"
-                @click="textAlign = 'left'">
-                <i class="icon-align-left"></i>
-              </div>
-              <div
-                class="EditorLayerFormText__align-option ripple"
-                :class="{ active: textAlign === 'center' }"
-                @click="textAlign = 'center'">
-                <i class="icon-align-center"></i>
-              </div>
-              <div
-                class="EditorLayerFormText__align-option ripple"
-                :class="{ active: textAlign === 'right' }"
-                @click="textAlign = 'right'">
-                <i class="icon-align-right"></i>
-              </div>
+            <div
+              class="EditorLayerFormText__align-option ripple"
+              :class="{ active: textAlign === 'center' }"
+              @click="textAlign = 'center'">
+              <i class="icon-align-center"></i>
             </div>
+            <div
+              class="EditorLayerFormText__align-option ripple"
+              :class="{ active: textAlign === 'right' }"
+              @click="textAlign = 'right'">
+              <i class="icon-align-right"></i>
+            </div>
+          </div>
+        </div>
+        <div class="form-row low-dense">
+          <font-family-select
+            v-model="fontFamily"
+            @input="selectFont"
+            @select="selectFont" />
+          <input
+            type="text"
+            :value="fontFamily"
+            :class="{ 'filled': fontFamily }"
+            class="form-hidden-validator form-field" />
+        </div>
+        <div class="form-row--cols low-dense">
+          <div class="form-col col-half">
+            <label class="form-label">
+              Text color
+            </label>
+            <color-picker v-model="fill" />
           </div>
-          <div class="form-row low-dense">
-            <font-family-select
-              v-model="fontFamily"
-              @input="selectFont"
-              @select="selectFont" />
+          <div class="form-col col-half">
+            <label
+              for="fontSize"
+              class="form-label">
+              Text size
+            </label>
+            <i
+              class="icon-minus form-icon-left  EditorLayerFormText__field-action"
+              @click="decreaseFontSize">
+            </i>
             <input
+              id="fontSize"
+              ref="fontSize"
+              v-model.number="fontSize"
+              name="fontSize"
               type="text"
-              :value="fontFamily"
-              :class="{ 'filled': fontFamily }"
-              class="form-hidden-validator form-field" />
+              class="form-field icon-inside-lr filled centered labelless" />
+            <i
+              class="icon-plus form-icon-right EditorLayerFormText__field-action"
+              @click="increaseFontSize">
+            </i>
           </div>
-          <div class="form-row--cols low-dense">
-            <div class="form-col col-half">
-              <label class="form-label">
-                Text color
-              </label>
-              <color-picker v-model="fill" />
-            </div>
-            <div class="form-col col-half">
-              <label
-                for="fontSize"
-                class="form-label">
-                Text size
-              </label>
-              <i
-                class="icon-minus form-icon-left  EditorLayerFormText__field-action"
-                @click="decreaseFontSize">
-              </i>
-              <input
-                id="fontSize"
-                ref="fontSize"
-                v-model.number="fontSize"
-                name="fontSize"
-                type="text"
-                class="form-field icon-inside-lr filled centered labelless" />
-              <i
-                class="icon-plus form-icon-right EditorLayerFormText__field-action"
-                @click="increaseFontSize">
-              </i>
-            </div>
-          </div>
-          <div class="form-row--cols low-dense">
-            <div class="form-col col-half">
-              <label class="form-label EditorLayerFormText__label-with-checkbox">
-                <span>
-                  Outline color
-                </span>
-                <Checkbox v-model="enableOutline" />
-              </label>
-              <color-picker
-                v-if="enableOutline"
-                v-model="stroke">
-              </color-picker>
-            </div>
-            <div
+        </div>
+        <div class="form-row--cols low-dense">
+          <div class="form-col col-half">
+            <label class="form-label EditorLayerFormText__label-with-checkbox">
+              <span>
+                Outline color
+              </span>
+              <Checkbox v-model="enableOutline" />
+            </label>
+            <color-picker
               v-if="enableOutline"
-              class="form-col col-half">
-              <label
-                for="fontSize"
-                class="form-label">
-                Outline weight
-              </label>
-              <i
-                class="icon-minus form-icon-left  EditorLayerFormText__field-action"
-                @click="decreaseStrokeWidth">
-              </i>
-              <input
-                id="strokeWidth"
-                ref="strokeWidth"
-                v-model.number="strokeWidth"
-                name="strokeWidth"
-                type="text"
-                class="form-field icon-inside-lr filled centered labelless" />
-              <i
-                class="icon-plus form-icon-right EditorLayerFormText__field-action"
-                @click="increaseStrokeWidth">
-              </i>
-            </div>
-            <div
-              v-else
-              class="form-col col-half">
-              &nbsp;
-            </div>
+              v-model="stroke">
+            </color-picker>
+          </div>
+          <div
+            v-if="enableOutline"
+            class="form-col col-half">
+            <label
+              for="fontSize"
+              class="form-label">
+              Outline weight
+            </label>
+            <i
+              class="icon-minus form-icon-left  EditorLayerFormText__field-action"
+              @click="decreaseStrokeWidth">
+            </i>
+            <input
+              id="strokeWidth"
+              ref="strokeWidth"
+              v-model.number="strokeWidth"
+              name="strokeWidth"
+              type="text"
+              class="form-field icon-inside-lr filled centered labelless" />
+            <i
+              class="icon-plus form-icon-right EditorLayerFormText__field-action"
+              @click="increaseStrokeWidth">
+            </i>
+          </div>
+          <div
+            v-else
+            class="form-col col-half">
+            &nbsp;
           </div>
-          <editor-layer-common-fields
-            :layer="layer"
-            @set-layer-field="data => $emit('set-layer-field', data)">
-          </editor-layer-common-fields>
-        </fragment>
+        </div>
+        <editor-layer-common-fields
+          :layer="layer"
+          @set-layer-field="data => $emit('set-layer-field', data)">
+        </editor-layer-common-fields>
       </div>
     </validation-observer>
   </div>

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

@@ -29,9 +29,7 @@
               </template>
             </v-popover>
           </span>
-          <span
-            v-if="isPrintPricing"
-            class="lc_regular16 lc_grey1 ml-6">
+          <span class="lc_regular16 lc_grey1 ml-6">
             +
             <v-popover
               ref="popover"

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

@@ -91,7 +91,7 @@
       }">
       <editor-print-area-options
         v-if="productDetailsLoaded"
-        ref="areaOptions"
+        :key="editableSide.id"
         :product="product"
         :selected="editablePrintArea && editablePrintArea._id"
         :side="editableSide.id"
@@ -159,6 +159,7 @@ export default {
     ]),
     selectTab(value) {
       if (this.editableSide.id !== value) {
+        this.setEditablePrintArea(null);
         this.setEditableSide({ id: value });
       }
     },

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

@@ -237,7 +237,7 @@ export default {
       document.removeEventListener('mousedown', this.onDocumentStartClick);
       window.removeEventListener('resize', this.onResize);
     },
-    onDocumentClick({ target }) {
+    onDocumentStartClick({ target }) {
       // todo: replace by click outside plugin?
       console.log('target: ', target);
       const isCanvasElement = target.tagName === 'CANVAS';

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

@@ -1,4 +1,6 @@
+import { mapGetters } from 'vuex';
 import { price, shortDate, tax } from '@lancom/shared/assets/js/utils/filters';
+import { getShopCountrySettings } from '@lancom/shared/assets/js/utils/shop';
 
 export default {
   filters: {
@@ -22,6 +24,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters(['MESSAGES']),
     couponTotal() {
       return Math.abs(this.order.couponTotal || 0);
     },
@@ -34,11 +37,14 @@ export default {
     orderId() {
       return `${this.order.code}`.replace('ORDER', '');
     },
+    settings() {
+      return getShopCountrySettings(this.order.shop, this.order.country);
+    },
     shopContacts() {
-      return this.order.shop.settings?.contacts || {};
+      return this.settings?.contacts || {};
     },
     depositInfo() {
-      return this.order.shop.settings?.depositInfo || {};
+      return this.settings?.depositInfo || {};
     },
     fullName() {
       return this.invoice?.address?.fullName || this.order.shippingAddress.fullName;
@@ -69,10 +75,31 @@ export default {
       ].filter(i => !!i).join(', ');
     },
     gstTax() {
-      return this.order.shop.settings?.pricing?.gstTax || 0;
+      return this.settings?.pricing?.gstTax || 0;
     },
     gstTotal() {
       return tax(this.model.total, this.gstTax) - this.model.total;
+    },
+    taxName() {
+      return this.settings?.pricing?.taxName || 'GST'
+    },
+    paymentCard() {
+      if (this.model.charge?.card) {
+        return {
+          number: this.model.charge.card.display_number,
+          scheme: this.model.charge.card.scheme
+        };
+      } else if (this.model.charge) {
+        return {
+          number: `XXXX-XXXX-XXXX-${this.model.charge.payment_method_details?.card?.last4 || 'XXXX'}`,
+          scheme: this.model.charge.payment_method_details?.card?.brand
+        };
+      }
     }
+  },
+  mounted() {
+    console.log('');
+    console.log('this.settings: ', this.settings);
+    console.log('this.order: ', this.order);
   }
 };

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

@@ -27,6 +27,13 @@
         </h5>
       </div>
     </div>
+    <div
+      v-if="depositInfo.vatNumber"
+      class="OrderView__info">
+      <h5 class="text-secondary lc_h5">
+        VAT Number: {{ depositInfo.vatNumber }}
+      </h5>
+    </div>
     <div class="OrderView__info">
       <div v-if="shopContacts">
         <div class="lc_regular16">
@@ -86,12 +93,12 @@
           <div class="lc_regular16">
             <b>PAID VIA CREDIT CARD</b>
           </div>
-          <div v-if="model.charge && model.charge.card">
+          <div v-if="paymentCard">
             <div class="lc_regular16">
-              Card: {{ model.charge.card.display_number }}
+              Card: {{ paymentCard.number }}
             </div>
             <div class="lc_regular16">
-              Scheme: {{ model.charge.card.scheme }}
+              Scheme: {{ paymentCard.scheme }}
             </div>
           </div>
         </td>
@@ -99,7 +106,7 @@
           v-else
           class="w-33">
           <div class="lc_regular16">
-            <b>DIRECT DEPOSIT DETAILS</b>
+            <b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS'}}</b>
           </div>
           <div class="lc_regular16">
             Bank: {{ depositInfo.bank }}
@@ -198,7 +205,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import OrderViewMixin from './order-view.mixin';
 import OrderViewProduct from './order_view_product/order-view-product';
 
@@ -213,9 +219,6 @@ export default {
       type: Boolean,
       default: true
     }
-  },
-  computed: {
-    ...mapGetters(['taxName'])
   }
 };
 </script>

package/components/product/product.vue

@@ -19,11 +19,14 @@
           <product-main-info :product="product" />
         </section>
         <section class="Product__section">
-          <product-colors-selector v-if="productDetails" />
+          <wizard-editor />
         </section>
-        <section class="Product__section">
+        <!-- <section class="Product__section">
+          <product-colors-selector v-if="productDetails" />
+        </section> -->
+        <!-- <section class="Product__section">
           <product-tier-prices :product="product" />
-        </section>
+        </section> -->
         <section class="Product__section">
           <product-fabric-and-size-info :product="product" />
         </section>
@@ -50,6 +53,8 @@ import ProductModelMeasurements from './layouts/product_model_measurements/produ
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
 import RelatedProducts from '@lancom/shared/components/product/related_products/related-products';
 import Gallery from '@lancom/shared/components/product/gallery/gallery';
+import WizardEditor from './wizard-editor/wizard-editor.vue';
+
     
 // import ProductLabelsCustomization from './layouts/product_labels_customization/product-labels-customization';
 
@@ -64,7 +69,8 @@ export default {
     ProductModelMeasurements,
     ProductSizeTable,
     RelatedProducts,
-    Gallery
+    Gallery,
+    WizardEditor
     // ProductLabelsCustomization
   },
   computed: {

package/components/product/product_size_selector/product_size_selector_color/product_size_selector_color_cell/product-size-selector-color-cell.vue

@@ -27,6 +27,7 @@
         :class="{ invalidate: disabled, empty: !model }"
         :aria-label="size.name"
         :disabled="disabled"
+        @wheel="onWheel"
         @focus="onFocus()"
         @blur="onBlur()" />
       <div
@@ -117,6 +118,9 @@ export default {
   },
   methods: {
     ...mapMutations('product', ['setSimpleProductAmount']),
+    onWheel(e) {
+      e.target.blur();
+    },
     onFocus() {
       this.defaultValue = '';
     },

package/components/product/wizard-editor/wizard-editor-async.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="EditorAsync__wrapper">
+    <placeholder
+      v-if="!isLoadedComponent"
+      style="height: 500px" />
+    <wizard-editor
+      v-else
+      v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ComponentAsyncMixin from '@lancom/shared/mixins/component-async';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
+
+export default {
+  name: 'EditorAsync',
+  components: {
+    Placeholder
+  },
+  mixins: [ComponentAsyncMixin],
+  methods: {
+    async importComponents() {
+      const component = await import('./wizard-editor');
+      Vue.component('wizard-editor', component.default);
+    }
+  }
+};
+</script>

package/components/product/wizard-editor/wizard-editor.scss

@@ -0,0 +1,37 @@
+@import '@/assets/scss/variables';
+
+.Editor {
+  &__section {
+    margin-bottom: 20px;
+    position: relative;
+  }
+  &__colors-selector {
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+  &__tooltip-message {
+    width: 250px;
+    font-size: 14px;
+    padding: 20px;
+    background: $green;
+    color: $black;
+    position: absolute;
+    top: 150px;
+    left: 50%;
+    width: 272px;
+    font-size: 14px;
+    padding: 10px;
+    line-height: 23px;
+    border-radius: 4px;
+    text-align: center;
+    font-weight: bold;
+    z-index: 2;
+    margin-left: -125px;
+    span {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+}

package/components/product/wizard-editor/wizard-editor.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="Editor__wrapper">
+    <div>
+      <div
+        v-if="productDetailsLoaded"
+        class="Editor__wizard">
+        <div class="Editor__section">
+          <wizard
+            ref="wizard"
+            v-show="visibleWizard" />
+        </div>
+        <div
+          v-if="editableColor"
+          class="Editor__section">
+          <product-multipacks-carousel
+            :key="editableColor._id"
+            :product="product"
+            :color="editableColor"
+            :simple-products="simpleProducts"
+            :with-gst="priceIncludeGST" />
+        </div>
+        <div
+          class="Editor__section"
+          @mouseenter="onColorsSelectorMouseenter"
+          @mouseleave="onColorsSelectorMouseleave"
+          @mousemove="onColorsSelectorMousemoveWithThrottle">
+          <product-colors-selector
+            class="Editor__colors-selector"
+            :class="{
+              'Editor__colors-selector--disabled': disabledProductsSelector
+            }" />
+          <div
+            v-show="disabledProductsSelector"
+            ref="message"
+            class="Editor__tooltip-message">
+            You must complete the print details above, or <span @click="hideWizard()">cancel</span> the print
+          </div>
+        </div>
+        <div class="Editor__section">
+          <editor-pricing />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import throttle from 'lodash.throttle';
+import ProductMultipacksCarousel from '@lancom/shared/components/product/product_multipacks_carousel/product-multipacks-carousel';
+import Wizard from '@lancom/shared/components/product/wizard/wizard';
+import ProductColorsSelector from '@lancom/shared/components/product/product_colors_selector/product-colors-selector';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
+
+export default {
+  name: 'Editor',
+  components: {
+    ProductColorsSelector,
+    ProductMultipacksCarousel,
+    Wizard,
+    EditorPricing
+  },
+  data() {
+    return {
+      isVisibleMessage: false,
+      onColorsSelectorMousemoveWithThrottle: throttle(this.onColorsSelectorMousemove, 20)
+    };
+  },
+  computed: {
+    ...mapGetters('product', [
+      'product',
+      'simpleProducts',
+      'editableColorSimpleProducts',
+      'editableColor',
+      'productDetailsLoaded',
+      'hasLayers',
+      'isPrintPricing',
+      'priceIncludeGST'
+    ]),
+    visibleWizard() {
+      return (this.product.printTypes || []).length > 0;
+    },
+    disabledProductsSelector() {
+      return this.isPrintPricing && !this.hasLayers;
+    }
+  },
+  destroyed() {
+    if (this.$refs.message) {
+      document.body.removeChild(this.$refs.message);
+    }
+  },
+  methods: {
+    onColorsSelectorMouseenter() {
+      // this.isVisibleMessage = this.disabledProductsSelector;
+    },
+    onColorsSelectorMousemove({ clientX, clientY }) {
+      // if (this.isVisibleMessage && this.$refs.message) {
+      //   document.body.appendChild(this.$refs.message);
+      //   this.$refs.message.style.display = 'block';
+      //   this.$refs.message.style.top = `${clientY}px`;
+      //   this.$refs.message.style.left = ('ontouchstart' in window) ? '50%' : `${clientX}px`;
+      // }
+    },
+    onColorsSelectorMouseleave() {
+      // if (this.isVisibleMessage && this.$refs.message) {
+      //   document.body.removeChild(this.$refs.message);
+      // }
+      // this.isVisibleMessage = false;
+      // this.$refs.message.style.display = 'none';
+    },
+    hideWizard() {
+      this.$refs.wizard.toggleVisible();
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'wizard-editor';
+</style>

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -38,7 +38,7 @@
         <products-autocomplete-item
           v-for="product of products"
           :key="product._id"
-          :to-editor="false"
+          :to-editor="toEditor"
           :product="product"
           class="ProductsAutocomplete__result-item"
           @select="$emit('select', product)" />
@@ -71,6 +71,10 @@ export default {
     placeholder: {
       type: String,
       default: 'Search products'
+    },
+    toEditor: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

package/components/quotes/quote_view/quote-view.mixin.js

@@ -23,6 +23,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['MESSAGES']),
     ...mapGetters('quote', ['quote', 'option', 'proceedOption', 'selectedOption', 'depositInfo', 'shopContacts', 'quoteAddress', 'quoteId', 'options', 'gstTax']),
     ...mapGetters(['shop', 'country', 'currency'])
   },

package/components/quotes/quote_view/quote-view.vue

@@ -38,7 +38,7 @@
           <div>{{ quote.address.additionalInfo }}</div>
         </td>
         <td class="w-50">
-          <div><b>DIRECT DEPOSIT DETAILS</b></div>
+          <div><b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS'}}</b></div>
           <div>Bank: {{ depositInfo.bank }}</div>
           <div>Account name: {{ depositInfo.accountName }}</div>
           <div>BSB: {{ depositInfo.BSB }}</div>

package/mixins/product-view.js

@@ -34,7 +34,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       if (IS_PRODUCT_PRESET_PRINT_PRICING) {
         const printType = product.printTypes[0];
         store.commit('product/setSelectedPrintType', printType);
-        store.commit('product/setIsPrintPricing', true);
+        // store.commit('product/setIsPrintPricing', true);
       }
 
       if (query.store) {

package/package.json

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

package/store/cart.js

@@ -45,7 +45,7 @@ const getInvalidStockQuantities = entities => {
 };
 
 const getPrintsQuantities = entities => {
-  const printTypes = entities.reduce((types, e) => [...types, ...e.prints.map(({ printType }) => ({ ...printType, guid: `${e.guid}-${printType._id}` }))], []);
+  const printTypes = entities.reduce((types, e) => [...types, ...e.prints.map(({ printType }) => ({ ...printType, guid: `${e.guid}-${printType?._id}` }))], []);
   const grouped = groupBy(printTypes, 'guid');
   const quantities = Object.keys(grouped).map(guid => {
     const [{ name, minQuantity }] = grouped[guid];
@@ -279,7 +279,7 @@ function generateCalculatePriceData(entities, suburb, suppliersWithRates, coupon
         return {
           _id: print._id,
           guid: print.guid,
-          costType: print.printType.costType,
+          costType: print.printType?.costType,
           setupCost,
           printCost,
           freeSetupOver,

package/store/index.js

@@ -3,7 +3,7 @@ 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';
-
+import { getShopCountrySettings } from '@lancom/shared/assets/js/utils/shop';
 
 export const state = () => ({
   country: null,
@@ -50,7 +50,6 @@ export const actions = {
     const menus = await api.fetchMenus(shop._id);
     commit('setMenus', menus);
     commit('setShop', shop);
-    commit('setSettings', shop.settings);
     // if (req.headers.cookie) {
     const { country, currency } = (req.headers.cookie && cookieparser.parse(req.headers.cookie)) || {};
     const headers = (req && req.headers) ? Object.assign({}, req.headers) : {};
@@ -59,14 +58,16 @@ export const actions = {
     commit('setCountry', settings.country);
     commit('setCurrency', settings.currency);
 
-    const countrySettings = (shop.countries || []).find(c => c.country?._id === settings.country?._id) || { settings: [] };
-      
+    const countrySetting = getShopCountrySettings(shop, settings.country);
+    commit('setSettings', countrySetting);
+
     if (process.env.PINPAYMENT_PUBLISHABLE_API_KEY) {
       commit('setPayment', {
         type: 'pinpayment',
         clientKey: process.env.PINPAYMENT_PUBLISHABLE_API_KEY
       });
     } else {
+      const countrySettings = (shop.countries || []).find(c => c.country?._id === settings.country?._id) || { settings: [] };
       const countrySetting = (countrySettings?.settings || []).find(s => !!s.settings.app.STRIPE_PUBLIC_KEY);
       if (countrySetting) {
         commit('setPayment', {
@@ -76,13 +77,6 @@ export const actions = {
       }
     }
 
-
-    const pricingSetting = (countrySettings?.settings || []).find(s => !!s.settings.pricing);
-    commit('setPricing', {
-      ...shop.settings.pricing,
-      ...(pricingSetting?.settings?.pricing || {})
-    });
-
     // }
     try {
       if (req.headers.cookie) {
@@ -142,12 +136,13 @@ export const mutations = {
   setCurrency(state, currency) {
     state.currency = currency;
   },
-  setSettings(state, { contacts, notificationBar, discountPopup, order, depositInfo }) {
+  setSettings(state, { contacts, notificationBar, discountPopup, order, depositInfo, pricing }) {
     state.contacts = contacts;
     state.orderInfo = order;
     state.notificationBar = notificationBar;
     state.discountPopup = discountPopup;
     state.depositInfo = depositInfo;
+    state.pricing = pricing;
   },
   setShop(state, shop) {
     state.shop = shop;

package/store/product.js

@@ -364,8 +364,8 @@ export const mutations = {
     ];
     Vue.set(state.template, 'layers', layers);
     if (layers.length === 1 && !state.product.printOnly) {
-        const printType = state.product.printTypes[0];
-        state.selectedPrintType = printType;
+        // const printType = state.product.printTypes[0];
+        // state.selectedPrintType = printType;
         state.isPrintPricing = true;
     }
   },
@@ -376,7 +376,7 @@ export const mutations = {
       state.selectedLayer = null;
     }
     if (state.template.layers.length === 0 && !state.product.printOnly) {
-      state.selectedPrintType = null;
+      // state.selectedPrintType = null;
       state.isPrintPricing = false;
     }
   },