@lancom/shared 0.0.420 → 0.0.422

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

@@ -190,6 +190,7 @@ export default {
             country: this.country?._id
           });
         } catch (e) {
+          console.log('initOrderData: ', e);
         } finally {
           this.initing = false;
         }

package/components/common/payment/payment_card/pinpayment/pinpayment.scss

@@ -10,6 +10,15 @@
       background-color: #F4F4F4;
     }
   }
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+    margin-top: 20px;
+  }
   &__field-container {
     width: 100%;
   }
@@ -50,4 +59,4 @@
       }
     }
   }
-}
+}

package/components/common/payment/payment_card/pinpayment/pinpayment.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="Payment__wrapper">
-    <div v-if="(hasSpinner && processing) || loading">
+    <div
+      v-if="pinpaymentsError"
+      class="Payment__error">
+      {{ pinpaymentsError }}
+    </div>
+    <div v-else-if="(hasSpinner && processing) || loading">
       <spinner />
     </div>
     <div
@@ -86,7 +91,6 @@
 </template>
 
 <script>
-let timer = null;
 let pinpaymentStartLoaded = false;
 
 export default {
@@ -108,26 +112,20 @@ export default {
     return {
       processing: false,
       loading: false,
+      waitPinpaymentTimer: null,
+      pinpaymentsError: null,
       fields: null
     };
   },
   async mounted() {
     this.loading = true;
-
     await this.loadPinpayments();
-
     if (window.HostedFields) {
       await this.initHostedPayment();
-    } else {
-      window.addEventListener('load', async () => {
-        if (!this.fields) {
-          await this.initHostedPayment();
-        }
-      });
     }
   },
   destroyed() {
-    clearInterval(timer);
+    clearInterval(this.waitPinpaymentTimer);
   },
   methods: {
     initHostedPayment() {
@@ -207,30 +205,56 @@ export default {
     },
     async loadPinpayments() {
       if (process.browser) {
-        await (new Promise((resolve, reject) => {
-          if (!pinpaymentStartLoaded) {
-            pinpaymentStartLoaded = true;
-            let domElement = document.createElement('script');
-            domElement.type = "text/javascript";
-            domElement.setAttribute('src', 'https://cdn.pinpayments.com/pin.hosted_fields.v1.js');
-            domElement.onload = () => {
-              resolve();
-            };
-            domElement.onerror = () => {
-              setTimeout(() => this.loadPinpayments(), 1000);
-            };
-            document.body.appendChild(domElement);
-          } else {
-            let repeated = 0;
-            timer = setInterval(() => {
-              if (!!window.HostedFields || repeated++ > 40) {
-                clearInterval(timer);
-                resolve();
-              }
-            }, 500);
+        if (pinpaymentStartLoaded) {
+          await this.waitUntilLoadedPinpayment();
+        }
+        if (!window.HostedField) {
+          pinpaymentStartLoaded = true;
+          for (let index = 0; index < 10; index++) {
+            try {
+              await this.loadPinpaymentsJs();
+              break;
+            } catch (e) {
+              console.log('loadPinpayments:error ', e);
+              await new Promise(resolve => setTimeout(resolve, 500));
+            }
           }
-        }));
+        }
+        if (!window.HostedFields) {
+          this.pinpaymentsError = '"Credit Card" payment temporarily not available';
+        }
       }
+    },
+    waitUntilLoadedPinpayment() {
+      return new Promise((resolve, reject) => {
+        let repeated = 0;
+        this.waitPinpaymentTimer = setInterval(() => {
+          if (!!window.HostedFields || repeated++ > 10) {
+            clearInterval(this.waitPinpaymentTimer);
+            resolve();
+          }
+        }, 500);
+      });
+    },
+    loadPinpaymentsJs() {
+      return (new Promise((resolve, reject) => {
+        const domElement = document.createElement('script');
+        domElement.type = 'text/javascript';
+        domElement.setAttribute('src', 'https://cdn.pinpayments.com/pin.hosted_fields.v1.js');
+        domElement.onload = () => {
+          setTimeout(() => {
+            if (window.HostedFields) {
+              resolve();
+            } else {
+              reject(new Error('Failed to Load JS'));
+            }
+          }, 500);
+        };
+        domElement.onerror = () => {
+          reject(new Error('Failed to Load JS'));
+        };
+        document.body.appendChild(domElement);
+      }));
     }
   }
 };

package/components/product/wizard/wizard_print_underbase/wizard-print-underbase.vue

@@ -20,6 +20,7 @@
       <btn
         btn-class="green"
         btn-label="NEXT"
+        :btn-disabled="!hasSelectedPrintUnderbases"
         @onclick="$emit('next')">
         <i
           slot="icon-after"
@@ -39,7 +40,10 @@ export default {
     WizardPrintAreaPrintUnderbase
   },
   computed: {
-    ...mapGetters('product', ['editablePrintAreas'])
+    ...mapGetters('product', ['editablePrintAreas', 'selectedPrintUnderbases']),
+    hasSelectedPrintUnderbases() {
+      return this.editablePrintAreas.every(e => typeof this.selectedPrintUnderbases[e._id] === 'boolean');
+    }
   }
 };
 </script>

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

@@ -7,10 +7,23 @@
     padding: 30px;
     margin-bottom: 50px;
   }
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
   &__logo {
     margin-bottom: 20px;
   }
+  &__table {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    td {
+      width: 50%;
+      padding: 20px;
+    }
+  }
 }
 .uppercase {
     text-transform: uppercase;
-}
+}

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

@@ -5,46 +5,78 @@
       class="QuoteView__logo">
       <img :src="quote.shop.logo.small" />
     </div>
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="QuoteView__info">
       <div>
-        <h2> {{ quote.shop.name }} </h2>
-        <h4 v-if="shopContacts"> ABN: {{ shopContacts.abn }} </h4>
+        <h2 class="lc_h2"> {{ quote.shop.name }} </h2>
+        <h4 v-if="shopContacts" class="lc_h4"> ABN: {{ shopContacts.abn }} </h4>
       </div>
-      <h1 class="text-secondary">
+      <h1 class="text-secondary lc_h1">
         QUOTE
       </h1>
     </div>
-    <div class="d-flex justify-content-between align-items-center">
+    <div class="QuoteView__info">
       <div v-if="shopContacts">
-        <div>{{ shopContacts.company }}</div>
-        <div>{{ shopContacts.address }}</div>
-        <div>{{ shopContacts.phone }}</div>
+        <div class="lc_regular16">
+          {{ shopContacts.company }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.address }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.phone }}
+        </div>
       </div>
       <div>
-        <div>DATE: {{ quote.createdAt | shortDate }}</div>
-        <div>QUOTE ID: {{ quoteId }}</div>
+        <div class="lc_regular16">
+          DATE: {{ quote.createdAt | shortDate }}
+        </div>
+        <div class="lc_regular16">
+          QUOTE ID: {{ quoteId }}
+        </div>
       </div>
     </div>
 
-    <table class="mt-4 table table-bordered">
+    <table class="QuoteView__table mt-4 lc_table bordered">
       <tr>
         <td>
           <div><b>QUOTE</b></div>
           <div v-if="quote.address">
-            <div>{{ quote.address.fullName }}</div>
-            <div v-if="quote.address.company">{{ quote.address.company }}</div>
-            <div v-if="quote.address.phone">{{ quote.address.phone }}</div>
-            <div>{{ quote.address.email }}</div>
-            <div>{{ quoteAddress }}</div>
-            <div>{{ quote.address.additionalInfo }}</div>
+            <div class="lc_regular16">
+              {{ quote.address.fullName }}
+            </div>
+            <div v-if="quote.address.company" class="lc_regular16">
+              {{ quote.address.company }}
+            </div>
+            <div v-if="quote.address.phone" class="lc_regular16">
+              {{ quote.address.phone }}
+            </div>
+            <div class="lc_regular16">
+              {{ quote.address.email }}
+            </div>
+            <div class="lc_regular16">
+              {{ quoteAddress }}
+            </div>
+            <div class="lc_regular16">
+              {{ quote.address.additionalInfo }}
+            </div>
           </div>
         </td>
         <td class="w-50">
-          <div><b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS'}}</b></div>
-          <div>Bank: {{ depositInfo.bank }}</div>
-          <div>Account name: {{ depositInfo.accountName }}</div>
-          <div>{{ bsbLabel }}: {{ depositInfo.BSB }}</div>
-          <div>Account: {{ depositInfo.account }}</div>
+          <div class="lc_regular16">
+            <b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS' }}</b>
+          </div>
+          <div class="lc_regular16">
+            Bank: {{ depositInfo.bank }}
+          </div>
+          <div class="lc_regular16">
+            Account name: {{ depositInfo.accountName }}
+          </div>
+          <div class="lc_regular16">
+            {{ bsbLabel }}: {{ depositInfo.BSB }}
+          </div>
+          <div class="lc_regular16">
+            Account: {{ depositInfo.account }}
+          </div>
         </td>
       </tr>
     </table>
@@ -58,7 +90,7 @@
     </div>
     <h6
       v-if="quote.expiredAt"
-      class="mt-3">
+      class="mt-3 lc_title mb-5 lc_h3">
       THIS QUOTE IS VALID UNTIL {{ quote.expiredAt | shortDate }}
     </h6>
   </div>

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

@@ -8,12 +8,24 @@
         class="QuoteOptionView__product" />
     </div>
     <div class="QuoteOptionView__totals">
-      <div>Products Total: <b>{{ option.productsTotal | price(currency) }}</b></div>
-      <div>Prints Total: <b>{{ option.printsTotal | price(currency) }}</b></div>
-      <div>Shipping Total: <b>{{ option.shippingTotal | price(currency) }}</b></div>
-      <div>Total ex {{ taxName }}: <b>{{ option.total | price(currency) }}</b></div>
-      <div>{{ taxName }}: <b>{{ optionGst(option) | price(currency) }}</b></div>
-      <div>Total inc {{ taxName }}: <b>{{ option.total | tax(gstTax) | price(currency) }}</b></div>
+      <div class="lc_regular16">
+        Products Total: <b>{{ option.productsTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Prints Total: <b>{{ option.printsTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Shipping Total: <b>{{ option.shippingTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Total ex {{ taxName }}: <b>{{ option.total | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        {{ taxName }}: <b>{{ optionGst(option) | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Total inc {{ taxName }}: <b>{{ option.total | tax(gstTax) | price(currency) }}</b>
+      </div>
     </div>
   </div>
 </template>

package/package.json

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

package/pages/quotes/view/_id/option/_option.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="QuoteViewPage__wrapper">
+    <div class="content-inner">
+      <lancom-quote-view
+        v-if="quote"
+        :quote="quote"
+        :option="option" />
+    </div>
+  </div>
+</template>
+
+<script>
+import QuoteViewPage from '@lancom/shared/pages/quotes/view/_id';
+import LancomQuoteView from '@lancom/shared/components/quotes/quote_view/quote-view';
+
+export default {
+  name: 'QuoteOptionView',
+  components: {
+    LancomQuoteView
+  },
+  mixins: [QuoteViewPage],
+  layout: 'empty'
+};
+</script>

package/plugins/vue-recaptcha.js

@@ -1,29 +1,57 @@
 import Vue from 'vue';
 
-let interval = null;
+let recaptchaStartLoaded = false;
 
 export default () => {
   Vue.mixin({
+    data() {
+      return {
+        waitRecaptchaTimer: null,
+        recaptchaError: null
+      };
+    },
     methods: {
       async getRecaptcha(name) {
         await this.preloadReCaptcha();
         return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
       },
       async preloadReCaptcha() {
+        if (recaptchaStartLoaded) {
+          await this.waitUntilLoadedRecaptcha();
+        }
+
         if (!this.$recaptcha) {
-          clearInterval(interval);
-          await this.loadReCaptcha();
-          await new Promise((resolve, reject) => {
-            interval = setInterval(() => {
-              if (this.$recaptcha) {
-                clearInterval(interval);
-                resolve()
-              }
-            }, 100);
-          });
+          recaptchaStartLoaded = true;
+          for (let index = 0; index < 10; index++) {
+            try {
+              await this.loadRecaptchaJs();
+              break;
+            } catch (e) {
+              console.log('loadRecaptcha:error ', e);
+              await new Promise(resolve => setTimeout(resolve, 500));
+            }
+          }
         }
+
+        await this.$recaptchaLoaded();
+
+        if (!this.$recaptcha) {
+          this.recaptchaError = 'Recaptcha temporarily not available';
+        }
+        console.log('loadRecaptcha:result ', !!this.$recaptcha);
+      },
+      waitUntilLoadedRecaptcha() {
+        return new Promise((resolve, reject) => {
+          let repeated = 0;
+          this.waitRecaptchaTimer = setInterval(() => {
+            if (!!this.$recaptcha || repeated++ > 10) {
+              clearInterval(this.waitRecaptchaTimer);
+              resolve();
+            }
+          }, 500);
+        });
       },
-      async loadReCaptcha() {
+      async loadRecaptchaJs() {
         const { VueReCaptcha } = await import('vue-recaptcha-v3');
         Vue.use(VueReCaptcha, {
           siteKey: process.env.RECAPTCHA_KEY,

package/routes/index.js

@@ -102,6 +102,11 @@ module.exports = function(routes, resolve, config) {
     path: '/order/:token/refund/:refund',
     component: resolve('@lancom/shared/pages/order/_token/refund/_refund.vue'),
     chunkName: 'pages/order/view/refund'
+  }, {
+    name: 'quotes-view-option',
+    path: '/quotes/view/:id/option/:option',
+    component: resolve('@lancom/shared/pages/quotes/view/_id/option/_option.vue'),
+    chunkName: 'pages/quotes/view/option'
   }, {
     name: 'customer-signin',
     path: '/customer/signin',