@lancom/shared 0.0.323 → 0.0.325

package/assets/js/api/index.js

@@ -99,9 +99,9 @@ const api = {
     const url = `shop/${shop}/payment-intent`;
     return _post(url, { amount, currency, payment, description, order });
   },
-  createOrderPayment(id, { card, shop, country, currency, invoice, payment, recaptchaToken }) {
+  createOrderPayment(id, { card, shop, country, currency, invoice, payment, recaptchaToken, path }) {
     const url = invoice ? `shop/${shop}/order/${id}/invoice/${invoice}/payment` : `shop/${shop}/order/${id}/payment`;
-    return _post(url, { card, country, payment, currency, recaptchaToken });
+    return _post(url, { card, country, payment, currency, recaptchaToken, path });
   },
   addOrderTimeline(id, item) {
     return _post(`order/${id}/timeline`, item);

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

@@ -188,7 +188,7 @@
       <div class="form-row--cols">
         <postcode-select
           class="form-col col-half"
-          :suburb="suburb"
+          :suburb="address.suburb"
           :labelless="true"
           :required="true"
           placeholder="Suburb"
@@ -279,6 +279,14 @@ export default {
     if (!this.address.suburb && !this.suburb &&  this.user?.suburb) {
       this.handleSuburbChange(this.user.suburb);
     }
+    if (!this.address.suburb && this.address.state && this.address.postcode && this.address.city && this.address.country) {
+      this.handleSuburbChange({
+        state: this.address.state,
+        postcode: this.address.postcode,
+        locality: this.address.city,
+        country: this.address.country
+      });
+    }
     if (!this.address.suburb) {
       this.setAddressSuburb(this.suburb);
     }

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

@@ -125,6 +125,15 @@ export default {
   },
   async mounted() {
     await this.initOrderData();
+    if (this.$route.query.checkPayment) {
+      if (this.orderData.paid) {
+        this.onOrderSucces();
+        this.$emit('next');
+      } else if (this.orderData.failedCharge) {
+        this.handleErrors({ message: this.orderData.failedCharge });
+        this.showPaymentErrorInfo();
+      }
+    }
   },
   methods: {
     ...mapActions('order', ['createOrder', 'saveOrder']),
@@ -208,14 +217,7 @@ export default {
         if (!this.isFailedOrderCharge) {
           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 bank transfer`;
-            const options = { submitLabel: 'PAY LATER', cancelLabel: 'TRY AGAIN', warning: true };
-            const isSwitchToDeposit = await this.showConfirmationModal(message, options);
-            if (isSwitchToDeposit) {
-              this.updatePaymentType(true);
-            }
-          });
+          this.showPaymentErrorInfo();
         }
       } catch (e) {
         const { message } = (e.response && e.response.data) || e;
@@ -224,6 +226,16 @@ export default {
         this.creating = false;
       }
     },
+    showPaymentErrorInfo() {
+      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 bank transfer`;
+        const options = { submitLabel: 'PAY LATER', cancelLabel: 'TRY AGAIN', warning: true };
+        const isSwitchToDeposit = await this.showConfirmationModal(message, options);
+        if (isSwitchToDeposit) {
+          this.updatePaymentType(true);
+        }
+      });
+    }
   }
 };
 </script>

package/components/checkout/order/order.vue

@@ -6,6 +6,7 @@
       v-if="!isEmpty || orderData"
       ref="progressSteps"
       :steps="steps"
+      :start-step="startStep"
       :visible-current-step="false"
       :hidden-done-step-number="true"
       :step-offset="1"
@@ -66,6 +67,7 @@ export default {
   },
   data() {
     return {
+      startStep: null,
       stepComponents: {
         [ORDER_STEPS.CHECKOUT_METHOD]: 'order-checkout-method',
         [ORDER_STEPS.BILLING_INFORMATION]: 'order-billing-information',
@@ -89,6 +91,9 @@ export default {
     }
   },
   mounted() {
+    if (this.$route.query.checkPayment && (this.orderData?.paid || !!this.orderData?.failedCharge)) {
+      this.startStep = ORDER_STEPS.PAYMENT_INFORMATION;
+    }
     const address = {
       city: null,
       phone: null,
@@ -106,8 +111,8 @@ export default {
     this.order = {
       paymentMethod: 'card',
       billingAddress: {
-        ...JSON.parse(JSON.stringify(address)),
-        ...(this.user ? {
+        ...JSON.parse(JSON.stringify(this.orderData?.billingAddress || address)),
+        ...((!this.orderData && this.user) ? {
           fullName: `${this.user.firstName} ${this.user.lastName}`,
           phone: this.user.phone,
           email: this.user.email,
@@ -115,8 +120,8 @@ export default {
         } : {})
       },
       shippingAddress: {
-        ...address,
-        ...(this.user ? {
+        ...JSON.parse(JSON.stringify(this.orderData?.shippingAddress || address)),
+        ...((!this.orderData && this.user) ? {
           fullName: `${this.user.firstName} ${this.user.lastName}`,
           phone: this.user.phone,
           email: this.user.email,
@@ -124,7 +129,7 @@ export default {
         } : {})
       }
     };
-    this.setOrderData(null);
+    // this.setOrderData(null);
   },
   methods: {
     ...mapMutations('order', ['setOrderData']),

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -31,6 +31,9 @@ export default {
       type: String,
       required: true
     },
+    color: {
+      type: Object
+    },
     size: {
       default: 'small',
       validator(value) {
@@ -81,7 +84,7 @@ export default {
       return this.print && this.getImageBackground(this.print);
     },
     image() {
-      const color = this.defaultPreview ? null : (this.product.color || (this.product.colors || [])[0]);
+      const color = this.defaultPreview ? null : (this.color || this.product.color || (this.product.colors || [])[0]);
       const product = this.product?.product || this.product;
       return getColorImage(product, this.size, this.side, color) || getProductCover(product, this.size, this.side, color);
     },
@@ -102,11 +105,14 @@ export default {
       this.$modal.show(
         ImageViewer,
         {
-          items: this.products.map(product => ({
-            src: getColorImage(product, 'large', this.side),
-            print: this.print,
-            color: product.color.rgb
-          })),
+          items: this.products.map(product => {
+            const p = product.product || product;
+            return {
+              src: getColorImage(p, 'large', this.side, this.color) || getProductCover(p, this.size, this.side, this.color),
+              print: this.print,
+              color: this.color?.rgb || product.color?.rgb
+            };
+          }),
           index: this.products.indexOf(this.product)
         },
         {

package/components/order/order_payment/order-payment.vue

@@ -82,6 +82,11 @@ export default {
       return this.invoice || this.order;
     }
   },
+  mounted() {
+    if (this.$route.query.checkPayment && this.model.failedCharge) {
+      this.handleErrors({ error_description: this.model.failedCharge })
+    }
+  },
   methods: {
     handleErrors(err) {
       // err.messages.forEach(({ message }) => this.$toastr.e(message));
@@ -96,9 +101,22 @@ export default {
         if (card) {
           const { _id: invoice } = this.invoice || {};
           const recaptchaToken = await this.getRecaptcha('order_payment');
-          const payload = { invoice, card, shop: this.shop._id, country: this.country?._id, payment: this.payment, currency: this.currency?.isoCode, recaptchaToken };
-          const { paid } = await api.createOrderPayment(this.order._id, payload);
-          this.model.paid = paid;
+          const payload = {
+            invoice,
+            card,
+            shop: this.shop._id,
+            country: this.country?._id,
+            payment: this.payment,
+            currency: this.currency?.isoCode,
+            recaptchaToken,
+            path: window.location.pathname
+          };
+          const result = await api.createOrderPayment(this.order._id, payload);
+          if (result.redirect_url) {
+            window.location.href = result.redirect_url;
+          } else {
+            this.model.paid = result.paid;
+          }
         }
       } catch (e) {
         console.log('handleErrors: ', e);

package/components/order/order_product_prints_preview/order-product-prints-preview.vue

@@ -7,6 +7,7 @@
         <product-side-with-print
           :product="product"
           :side="side"
+          :color="color"
           :default-preview="defaultPreview"
           size="medium" />
       </div>
@@ -31,6 +32,9 @@ export default {
       type: Object,
       required: true
     },
+    defaultColor: {
+      type: Object
+    },
     defaultPreview: {
       type: Boolean,
       default: true
@@ -39,6 +43,10 @@ export default {
   computed: {
     sides() {
       return Object.keys(this.product.printsThumbnails || {});
+    },
+    color() {
+      const simpleProduct = this.product.simpleProducts?.find(sp => sp.amount > 0);
+      return this.defaultColor || simpleProduct?.color;
     }
   }
 };

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

@@ -132,11 +132,11 @@ export default {
         if ((print.products || []).indexOf(this.product.guid) > 0) {
           isFreePricing = true;
         }
-        const printCost = print.costType === 'setup only' ? 0 : print.printCost;
-        const setupCost = (print.costType === 'item cost only' || isFreePricing) ? 0 : print.setupCost;
+        const printCost = (print.costType === 'setup only' ? 0 : print.printCost) || 0;
+        const setupCost = ((print.costType === 'item cost only' || isFreePricing) ? 0 : print.setupCost) || 0;
         return total + this.amount * printCost + setupCost;
       }, 0);
-      const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);
+      const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + (amount || 0) * (productCost || 0), 0);
       return this.amount > 0 ? (printsTotal + productsTotal) : 0;
     }
   }

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

@@ -22,6 +22,11 @@ export default {
       errorMessage: null
     };
   },
+  created() {
+    if (this.quote.order) {
+      this.order = this.quote.order;
+    }
+  },
   computed: {
     ...mapGetters(['MESSAGES']),
     ...mapGetters('quote', ['quote', 'option', 'proceedOption', 'selectedOption', 'depositInfo', 'shopContacts', 'quoteAddress', 'quoteId', 'options', 'gstTax']),

package/mixins/payment.js

@@ -52,8 +52,10 @@ export default {
           currency: this.currency?.isoCode,
           recaptchaToken: await this.getRecaptcha('order_payment')
         };
-        await this.submitPayment(data);
-        this.onOrderSucces();
+        const success = await this.submitPayment(data);
+        if (success) {
+          this.onOrderSucces();
+        }
       } catch (e) {
         const { message } = (e.response && e.response.data) || e;
         this.handleErrors({ messages: [{ message }] });

package/package.json

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

package/pages/checkout/order.vue

@@ -24,6 +24,11 @@ export default {
     CartPriceInfo: () => import('@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info')
   },
   mixins: [metaInfo, CartMixin],
+  async asyncData({ store, query }) {
+    if (query.order) {
+      await store.dispatch('order/loadOrderData', query.order);
+    }
+  },
   computed: {
     ...mapGetters('cart', ['entities', 'coupon', 'cartPricing'])
   },

package/store/order.js

@@ -13,6 +13,10 @@ export const getters = {
 };
 
 export const actions = {
+  async loadOrderData({ commit }, token) {
+    const response = await api.fetchOrderByToken(token);
+    commit('setOrderData', response);
+  },
   async createOrder({ commit }, data) {
     const { shop, products, pricing, recaptchaToken } = data;
     const order = generateOrderData(data, products, pricing);
@@ -22,8 +26,12 @@ export const actions = {
   async submitPayment({ commit, state: { orderData } }, { card, payment, country, shop, currency, recaptchaToken }) {
     const { _id } = orderData || {};
     const response = await api.createOrderPayment(_id, { card, shop, country, payment, currency, recaptchaToken });
+    if (response.redirect_url) {
+      window.location.href = response.redirect_url;
+      return;
+    }
     commit('setOrderData', response);
-    return {};
+    return true;
   },
   async saveOrder({ commit }, data) {
     const response = await api.updateOrder(data._id, data);