@lancom/shared 0.0.158 → 0.0.159

package/assets/js/utils/colors.js

@@ -52,7 +52,7 @@ export function getColorBackgroundStyle(color) {
 
   if (pattern) {
     return {
-      'background-image': `url("${pattern}")`
+      'background-image': `url("${staticLink(pattern)}")`
     };
   }
 

package/assets/js/utils/filters.js

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
 import DateOnly from 'dateonly';
+import Vue from 'vue';
 
 import currencies from '../constants/currencies';
 import { printsLabels } from '../constants/prints';
@@ -88,7 +89,20 @@ export const sydneyTime = d => dayjs(d).utc().utcOffset(10).format('MMM D, YYYY
 
 export const priceInRange = (prices, amount) => ((prices || []).find(({ min, max }) => min <= amount && (!max || max >= amount)) || { price: 0 }).price;
 
-export const staticLink = link => (link || '').startsWith('http') ? link : `${process.env.STATIC_URL}${link}`;
+export const staticLink = link => {
+  const { PROD_S3_BUCKET, DEV_S3_BUCKET, PROD_CDN_URL, DEV_CDN_URL, STATIC_URL } = Vue.$env;
+  if ((link || '').startsWith('http')) {
+    if (PROD_S3_BUCKET && PROD_CDN_URL) {
+      link = link.replace(new RegExp(`https://${PROD_S3_BUCKET}[a-z\-\.0-9]+.amazonaws.com`), PROD_CDN_URL);
+    }
+    if (DEV_S3_BUCKET && PROD_CDN_URL) {
+      link = link.replace(new RegExp(`https://${DEV_S3_BUCKET}[a-z\-\.0-9]+.amazonaws.com`), DEV_CDN_URL);
+    }
+    return link;
+  } else {
+    return `${STATIC_URL}${link}`;
+  };
+}
 
 export const nl2br = text => text.replace(/\n/g, '<br>');
 

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

@@ -147,6 +147,7 @@
             'is-danger': errors.length,
             filled: address.addressLine1
           }"
+          @input="validateAddress"
           @keyup.enter="$refs.addressLine1.focus()" />
         <span
           v-if="errors.length"
@@ -176,6 +177,7 @@
             'is-danger': errors.length,
             filled: address.addressLine2
           }"
+          @input="validateAddress"
           @keyup.enter="$refs.addressLine2.focus()" />
         <span
           v-if="errors.length"
@@ -183,6 +185,23 @@
           {{ errors[0] }}
         </span>
       </validation-provider>
+      <validation-provider
+        ref="addressProvider"
+        v-slot="{ errors }"
+        tag="div"
+        name="Full Address"
+        class="form-row"
+        :rules="{ max: 45 }">
+        <input
+          v-model="fullAddress"
+          name="fullAddress"
+          type="hidden" />
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          Full Address max length is 45
+        </span>
+      </validation-provider>
       <div class="form-row--cols">
         <postcode-select
           class="form-col col-half"
@@ -268,7 +287,16 @@ export default {
     ]),
     ...mapGetters('auth', [
       'user'
-    ])
+    ]),
+    fullAddress: {
+      get() {
+        return [
+          (this.address.addressLine1 || ''),
+          (this.address.addressLine2 || '')
+        ].filter(a => !!a).join(', ');
+      },
+      set() {}
+    }
   },
   created() {
     if (!this.address.suburb && !this.suburb &&  this.user?.suburb) {
@@ -279,6 +307,9 @@ export default {
     }
   },
   methods: {
+    validateAddress() {
+      this.$refs.addressProvider.validate();
+    },
     ...mapMutations('cart', [
       'setSuburb'
     ]),

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

@@ -7,7 +7,9 @@
       <div v-if="creating">
         <spinner />
       </div>
-      <div class="form-row OrderPaymentInformation__form">
+      <div
+        v-else
+        class="form-row OrderPaymentInformation__form">
         <label
           class="form-label OrderPaymentInformation__checkbox"
           @click="updatePaymentType(false)">
@@ -121,22 +123,24 @@ export default {
       }).join('</p><p>')}</p>`;
     },
     async submit() {
+      this.creating = true;
       this.errorMessage = null;
       if (this.isDepositPayment) {
         this.setCard(null);
-        this.submitOrder();
+        await this.submitOrder();
       } else {
         let card = null;
         try {
           card = await this.$refs.paymentCart.tokenize();
         } catch (e) {
-          this.handleErrors(e);
+          await this.handleErrors(e);
         }
         if (card) {
           this.setCard(card);
-          this.submitOrder();
+          await this.submitOrder();
         }
       }
+      this.creating = false;
       // this.$emit('next');
     },
     async submitOrder() {

package/components/news/news_list_item/news-list-item.vue

@@ -37,6 +37,7 @@
 
 <script>
 import { date } from '@lancom/shared/assets/js/utils/filters';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 
 export default {
   name: 'NewsListItem',
@@ -54,7 +55,7 @@ export default {
       return `/news/${this.item.alias}`;
     },
     backgroundImage() {
-      return this.item.image ? `url('${this.item.image.medium}')` : '';
+      return this.item.image ? `url('${staticLink(this.item.image.medium)}')` : '';
     }
   },
   methods: {

package/components/product/gallery/gallery.vue

@@ -19,6 +19,7 @@
           v-hammer:panend="onPanend"
           class="Gallery__big-image"
           :style="{
+            'background-image': `url(${staticLink(image.large)}`,
             'background-size': backgroundSize,
             'background-position': backgroundPosition,
             'touch-action': zoomEnable ? 'none' : 'auto'
@@ -26,8 +27,7 @@
           @mousedown="onMouseDown"
           @mouseenter="onMouseEnter"
           @mouseleave="onMouseLeave"
-          @mousemove="onMouseMove"
-          v-lazy:background-image="staticLink(image.large)">
+          @mousemove="onMouseMove">
           <div
             v-if="image.print"
             class="Gallery__big-print">
@@ -65,7 +65,9 @@
             'Gallery__small-image--active': index === activeIndex
           }"
           @click="goToSlideAndChangeColor(index)"
-          v-lazy:background-image="staticLink(image.small)">
+          :style="{
+            'background-image': `url(${staticLink(image.small)}` 
+          }">
           <div class="Gallery__small-printed">
             {{ image.printType ? 'Printed' : (product.prePrint ? product.prePrintText : image.colorName || 'Blank') }}
           </div>
@@ -175,6 +177,7 @@ export default {
     if (index > -1) {
       this.goToSlide(index, true);
     }
+    console.log('filteredImages: ', this.filteredImages);
   },
   methods: {
     ...mapActions('product', ['selectColor']),

package/nuxt.config.js

@@ -52,6 +52,7 @@ module.exports = (config, axios, { raygunClient } = {}) => ({
     { src: '@/node_modules/@lancom/shared/plugins/error-handler', ssr: false },
     // { src: '@/node_modules/@lancom/shared/plugins/aos', ssr: false },
     '@/node_modules/@lancom/shared/plugins/aos-animation',
+    '@/node_modules/@lancom/shared/plugins/envs',
     { src: '@/node_modules/@lancom/shared/plugins/vue-recaptcha', ssr: false },
     // { src: '@/node_modules/@lancom/shared/plugins/vue-tables-2', ssr: false }
   ],
@@ -68,6 +69,12 @@ module.exports = (config, axios, { raygunClient } = {}) => ({
   env: {
     NODE_ENV: config.NODE_ENV || 'development'
   },
+  publicRuntimeConfig: {
+    PROD_CDN_URL: process.env.PROD_CDN_URL,
+    DEV_CDN_URL: process.env.DEV_CDN_URL,
+    PROD_S3_BUCKET: process.env.PROD_S3_BUCKET,
+    DEV_S3_BUCKET: process.env.DEV_S3_BUCKET
+  },
   build: {
     publicPath: '/client/',
     transpile: [

package/package.json

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

package/plugins/envs.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+export default ({ $config }) => {
+    Vue.prototype.$env = $config;
+    Vue.$env = $config;
+};

package/plugins/vee-validate.js

@@ -12,7 +12,7 @@ extend('required', {
     return `${name} attribute is mandatory`;
   }
 });
-console.log('ValidationObserver:email', email);
+
 extend('email', {
   ...email,
   validate(value) {