@lancom/shared 0.0.68 → 0.0.72

package/assets/js/utils/quote.js

@@ -4,11 +4,11 @@ export function convertQuoteToOrder(quote, option) {
     billingAddress: quote.address,
     shippingAddress: quote.address,
     products: option.products,
-    price: option.total,
     total: option.total,
-    productsTotal: option.total,
-    printsTotal: option.total,
-    shippingTotal: option.total,
+    totalGST: option.totalGST,
+    productsTotal: option.productsTotal,
+    printsTotal: option.printsTotal,
+    shippingTotal: option.shippingTotal,
     adminShippingTotal: option.adminShippingTotal
   };
 }

package/components/checkout/payment/payment-cart/payment-cart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Payment__wrapper">
-    <div v-if="processing || loading">
+    <div v-if="(hasSpinner && processing) || loading">
       <spinner />
     </div>
     <div
@@ -95,6 +95,10 @@ export default {
     },
     amount: {
       type: Number
+    },
+    hasSpinner: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -105,11 +109,19 @@ export default {
     };
   },
   mounted() {
-    this.initHostedPayment();
+    this.loading = true;
+    if (window.HostedFields) {
+      this.initHostedPayment();
+    } else {
+      window.addEventListener('load', () => {
+        if (!this.fields) {
+          this.initHostedPayment();
+        }
+      });
+    }
   },
   methods: {
     initHostedPayment() {
-      this.loading = true;
       this.fields = window.HostedFields.create({
         sandbox: process.env.IS_PROD !== 'true',
         styles: {

package/components/checkout/payment/payment_success/payment-success.vue

@@ -17,7 +17,7 @@
     <slot name="back-btn">
       <btn
         btn-class="green PaymentSuccess__btn"
-        btn-label="Back to editor"
+        :btn-label="btnLabel"
         @onclick="$emit('close')" />
     </slot>
   </div>
@@ -30,6 +30,10 @@ export default {
     order: {
       type: Object,
       required: true
+    },
+    btnLabel: {
+      type: String,
+      default: 'Back to editor'
     }
   }
 };

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

@@ -0,0 +1,13 @@
+@import "@/assets/scss/variables";
+
+.OrderPayment {
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+    margin-bottom: 10px;
+  }
+}

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

@@ -0,0 +1,114 @@
+<template>
+  <div class="OrderPayment__wrapper">
+    <h4 class="lc_h1 mt-10 mb-10">
+      Payment Order #{{order.code}}
+    </h4>
+    <payment-success
+      v-if="order.paid"
+      :order="order">
+      <template slot="back-btn">
+        <div class="d-flex">
+          <btn
+            btn-class="green PaymentSuccess__btn"
+            btn-label="GO HOME"
+            to="/" />
+          <!-- <btn
+            btn-class="green PaymentSuccess__btn"
+            btn-label="VIEW ORDER"
+            :to="`/order/${order.token}`" /> -->
+        </div>
+      </template>
+    </payment-success>
+    <div v-else>
+      <div
+        v-if="processing"
+        class="OrderPayment__spinner">
+        <spinner />
+      </div>
+      <div class="OrderPrice__content">
+        <div>
+          <payment-cart
+            ref="paymentCart"
+            :amount="order.totalGST"
+            :has-spinner="false"
+            :payment-data="order.billingAddress">
+          </payment-cart>
+          <div
+            v-if="errorMessage"
+            class="OrderPayment__error">
+            {{ errorMessage }}
+          </div>
+          <btn
+            class="lc_uppercase"
+            btn-class="green"
+            btn-label="MAKE PAYMENT"
+            :btn-block="true"
+            :btn-processing="processing"
+            @onclick="makePayment" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import PaymentCart from '@lancom/shared/components/checkout/payment/payment-cart/payment-cart';
+import PaymentSuccess from '@lancom/shared/components/checkout/payment/payment_success/payment-success';
+
+export default {
+  name: 'OrderPayment',
+  components: {
+    PaymentCart,
+    PaymentSuccess
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      errorMessage: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    handleErrors(err) {
+      // err.messages.forEach(({ message }) => this.$toastr.e(message));
+      const defaultMessage = 'Payment error';
+      this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || defaultMessage;
+    },
+    async makePayment() {
+      try {
+        this.errorMessage = null;
+        this.processing = true;
+        const card = await this.$refs.paymentCart.tokenize();
+        if (card) {
+          const { paid } = await api.createOrderPayment(this.order._id, card, this.shop._id);
+          this.order.paid = paid;
+        }
+      } catch (e) {
+        if (e.response) {
+          const { message } = (e.response && e.response.data) || e;
+          this.handleErrors({ messages: [{ message }] });
+        } else {
+          this.handleErrors(e);
+        }
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import 'order-payment.scss';
+</style>

package/components/order/order_view/order-view.scss

@@ -32,6 +32,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-end;
+    page-break-inside: avoid;
   }
   &__totals {
     margin: 30px 0;

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

@@ -17,7 +17,7 @@
         </h4>
       </div>
       <h1 class="text-secondary lc_h1">
-        Tax invoice
+        {{ order.paymentMethod === 'deposit' ? 'Proforma Invoice' : 'Tax invoice' }}
       </h1>
     </div>
     <div class="OrderView__info">
@@ -96,6 +96,7 @@
             v-for="product of order.products"
             :key="product._id"
             :product="product"
+            :responsive="responsive"
             class="OrderView__product" />
         </div>
         <div
@@ -136,7 +137,13 @@ export default {
   components: {
     OrderViewProduct
   },
-  mixins: [OrderViewMixin]
+  mixins: [OrderViewMixin],
+  props: {
+    responsive: {
+      type: Boolean,
+      default: true
+    }
+  }
 };
 </script>
 

package/components/order/order_view/order_product_prints/order-product-prints.scss

@@ -9,34 +9,14 @@
   &__table {
     min-height: 100px;
     width: 100%;
-    tbody {
-      @media (max-width: $bp-small-max) {
-        display: flex;
-        flex-direction: column;
-      }
-    }
     ::v-deep {
       tr {
         height: 38px;
-        @media (max-width: $bp-small-max) {
-          height: auto !important;
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          margin: 10px 0;
-        }
       }
       td {
         border: 1px solid #efefef;
         text-align: center;
         vertical-align: middle;
-        @media (max-width: $bp-small-max) {
-          width: 50%;
-          padding: 5px;
-          &:last-child {
-            width: 100%;
-          }
-        }
         strong {
           font-weight: bold;
         }
@@ -48,11 +28,6 @@
       }
     }
   }
-  &__head {
-    @media (max-width: $bp-small-max) {
-      display: none !important;
-    }
-  }
   &__th {
     font-weight: bold !important;
     background: #efefef;
@@ -64,4 +39,42 @@
       transform: rotate(180deg);
     }
   }
+
+  &.responsive {
+    .OrderProductPrints {
+      &__table {
+        tbody {
+          @media (max-width: $bp-small-max) {
+            display: flex;
+            flex-direction: column;
+          }
+        }
+        ::v-deep {
+          tr {
+            @media (max-width: $bp-small-max) {
+              height: auto !important;
+              display: flex;
+              flex-direction: row;
+              flex-wrap: wrap;
+              margin: 10px 0;
+            }
+          }
+          td {
+            @media (max-width: $bp-small-max) {
+              width: 50%;
+              padding: 5px;
+              &:last-child {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+      &__head {
+        @media (max-width: $bp-small-max) {
+          display: none !important;
+        }
+      }
+    }
+  }
 }

package/components/order/order_view/order_product_prints/order-product-prints.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="OrderProductPrints__wrapper">
+  <div
+    class="OrderProductPrints__wrapper"
+    :class="{
+      responsive
+    }">
     <div class="OrderProductPrints__title">
       Decoration
     </div>
@@ -32,7 +36,8 @@
           v-for="(print, index) in entity.prints"
           :key="`${entity.guid}_${index}`"
           :entity="entity"
-          :print="print" />
+          :print="print"
+          :responsive="responsive" />
       </tbody>
     </table>
   </div>
@@ -50,6 +55,10 @@ export default {
     entity: {
       type: Object,
       required: true
+    },
+    responsive: {
+      type: Boolean,
+      default: true
     }
   }
 };

package/components/order/order_view/order_product_prints/order_product_print/order-product-print.scss

@@ -7,6 +7,9 @@
   }
   &__wrapper {
     display: contents;
+    .hidden {
+      display: none !important;
+    }
   }
   &__content {
     text-align: left !important;

package/components/order/order_view/order_product_prints/order_product_print/order-product-print.vue

@@ -2,31 +2,31 @@
   <div class="OrderProductPrint__wrapper">
     <tr>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">Print Type</span>
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Print Type</span>
         {{ print.printType.name }}
       </td>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">Location</span>
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Location</span>
         {{ print.printArea.name }}
       </td>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">Size</span>
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Size</span>
         {{ print.printSize.name }}
       </td>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">Setup cost</span>
-        {{ print.setupCost | price }}
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Setup cost</span>
+        {{ setupCost | price }}
       </td>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">QTY</span>
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">QTY</span>
         {{ amount }}
       </td>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">Price</span>
-        {{ print.printCost | price }}
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Price</span>
+        {{ printCost | price }}
       </td>
       <td class="lc_body-small">
-        <span class="hidden-md-and-up">Total</span>
+        <span :class="responsive ? 'hidden-md-and-up' : 'hidden'">Total</span>
         <strong>
           {{ total | price }}
         </strong>
@@ -51,6 +51,10 @@ export default {
     print: {
       type: Object,
       required: true
+    },
+    responsive: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -61,10 +65,10 @@ export default {
       return this.simpleProducts.reduce((sum, { amount }) => sum + amount, 0);
     },
     printCost() {
-      return this.print.printCost || 0;
+      return this.print.costType === 'setup only' ? 0 : (this.print.printCost || 0);
     },
     setupCost() {
-      return this.print.setupCost || 0;
+      return this.print.costType === 'item cost only' ? 0 : (this.print.setupCost || 0);
     },
     total() {
       return this.amount * this.printCost + this.setupCost;

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

@@ -38,7 +38,9 @@
       <div
         v-if="hasPrints"
         class="OrderViewProduct__decorations">
-        <order-product-prints :entity="product" />
+        <order-product-prints
+          :entity="product"
+          :responsive="responsive" />
       </div>
       <div class="OrderViewProduct__subtotal lc_title">
         Subtotal: {{ totalPrice | price }}
@@ -75,6 +77,10 @@ export default {
     withDivider: {
       type: Boolean,
       default: true
+    },
+    responsive: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -95,7 +101,8 @@ export default {
     },
     totalPrice() {
       const printsTotal = (this.product.prints || []).reduce((total, print) => {
-        const { setupCost = 0, printCost = 0 } = print;
+        const printCost = print.costType === 'setup only' ? 0 : print.printCost;
+        const setupCost = print.costType === 'item cost only' ? 0 : print.setupCost;
         return total + this.amount * printCost + setupCost;
       }, 0);
       const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);

package/components/product/product_price_range/product-price-range.vue

@@ -46,7 +46,7 @@ export default {
       required: true
     },
     withGst: {
-      type: Object,
+      type: Boolean,
       required: true
     },
     minPriceAttr: {

package/components/products/products_aside/products-aside.vue

@@ -11,11 +11,11 @@
         class="form-field no-label tiny-placeholder labelless"
         @change="goToTextSearch" />
     </div>
-    <div class="ProductsAside__item">
+    <!-- <div class="ProductsAside__item">
       <products-types
         :has-selected-icon="hasSelectedIcon"
         :has-thumbs="hasThumbs" />
-    </div>
+    </div> -->
     <div class="ProductsAside__item">
       <products-brands
         :has-selected-icon="hasSelectedIcon" />

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -3,8 +3,9 @@
     <div class="ProductsAutocomplete__input">
       <input
         v-model="text"
+        :autofocus="autofocus"
         name="search"
-        placeholder="Search"
+        placeholder="Search products"
         type="text"
         class="form-field no-label tiny-placeholder labelless"
         @input="searchWithDebounce"
@@ -42,6 +43,12 @@ export default {
   components: {
     ProductsAutocompleteItem
   },
+  props: {
+    autofocus: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       searching: false,

package/components/quotes/quote_view/quote_product_prints/quote_product_print/quote-product-print.vue

@@ -15,7 +15,7 @@
       </td>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Setup cost</span>
-        {{ print.setupCost | price }}
+        {{ setupCost | price }}
       </td>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">QTY</span>
@@ -23,7 +23,7 @@
       </td>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Price</span>
-        {{ print.printCost | price }}
+        {{ printCost | price }}
       </td>
       <td class="lc_body-small">
         <span class="hidden-md-and-up">Total</span>
@@ -61,10 +61,10 @@ export default {
       return this.simpleProducts.reduce((sum, { amount }) => sum + amount, 0);
     },
     printCost() {
-      return this.print.printCost || 0;
+      return this.print.costType === 'setup only' ? 0 : (this.print.printCost || 0);
     },
     setupCost() {
-      return this.print.setupCost || 0;
+      return this.print.costType === 'item cost only' ? 0 : (this.print.setupCost || 0);
     },
     total() {
       return this.amount * this.printCost + this.setupCost;

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

@@ -107,7 +107,8 @@ export default {
     },
     totalPrice() {
       const printsTotal = (this.product.prints || []).reduce((total, print) => {
-        const { setupCost = 0, printCost = 0 } = print;
+        const printCost = print.costType === 'setup only' ? 0 : print.printCost;
+        const setupCost = print.costType === 'item cost only' ? 0 : print.setupCost;
         return total + this.amount * printCost + setupCost;
       }, 0);
       const productsTotal = this.simpleProducts.reduce((total, { amount = 0, productCost = 0 }) => total + amount * productCost, 0);
@@ -117,6 +118,9 @@ export default {
 };
 </script>
 
+',
+  ITEM_COST_ONLY: 'item cost only
+
 <style lang="scss" scoped>
 @import 'quote-view-product.scss';
 </style>

package/package.json

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