@lancom/shared 0.0.282 → 0.0.283

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
@@ -125,11 +125,14 @@ export default {
       suburbs: [],
       options: [],
       isLoading: false,
-      handleSearchWithDebounce: debounce(this.handleSearch, 500)
+      handleSearchWithDebounce: debounce(this.handleSearch, 1000)
     };
   },
   computed: {
-    ...mapGetters(['shop']),
+    ...mapGetters(['shop', 'MESSAGES']),
+    displayLabelText() {
+      return this.MESSAGES.POSTCODES_LABEL || this.labelText;
+    },
     model: {
       get() {
         return this.selected?._id ? this.selected : null;
@@ -148,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.shop?._id);
+        this.suburbs = await api.fetchSuburbs({ query: query.trim(), country: countryName }, this.shop?._id);
         this.options = this.suburbs.map(this.createOptionFromSuburb);
         this.isLoading = false;
       } else {

package/layouts/products.vue

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

package/package.json

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

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 = {