@lancom/shared 0.0.287 → 0.0.288

package/assets/js/utils/shop.js

@@ -0,0 +1,24 @@
+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)
+    },
+    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/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_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/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/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.288",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

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;
     }
   },