@lancom/shared 0.0.111 → 0.0.114

package/assets/js/api/admin.js

@@ -34,9 +34,21 @@ export default {
   saveOrder(order) {
     return order._id ? _put(`admin/order/${order._id}`, order) : _post('admin/order', order);
   },
+  createOrderSubsequentInvoice(order, invoice) {
+    return _post(`admin/shop/${order.shop}/order/${order._id}/invoice`, invoice);
+  },
+  sendOrderSubsequentInvoice(order, invoice) {
+    return _post(`admin/shop/${order.shop}/order/${order._id}/invoice/${invoice}/send`);
+  },
   exportOrderToStarshipit(order, shipment) {
     return _post(`admin/shop/${order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/export-to-starshipit`, shipment);
   },
+  markShipmentAsDispatched(order, shipment) {
+    return _post(`admin/shop/${order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/dispatched`, shipment);
+  },
+  removeShipmentFromStarshipit(order, shipment) {
+    return _delete(`admin/shop/${order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}`);
+  },
   calculateShipmentRates(order, shipment) {
     return _get(`admin/shop/${order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/calculate-shipping`);
   },
@@ -121,6 +133,9 @@ export default {
   fetchInventoryHistory(params) {
     return _get('admin/inventory-history', params);
   },
+  fetchInventoryCommitted(params) {
+    return _get('admin/inventory/committed', params);
+  },
   fetchInventory(params) {
     return _get('admin/inventory');
   },

package/assets/js/api/index.js

@@ -81,11 +81,12 @@ const api = {
   deleteOrder(token) {
     return _delete(`order/${token}`);
   },
-  fetchOrderByToken(token) {
-    return _get(`order/token/${token}`);
+  fetchOrderByToken(token, params) {
+    return _get(`order/token/${token}`, params);
   },
-  createOrderPayment(id, card, shop) {
-    return _post(`shop/${shop}/order/${id}/payment`, card);
+  createOrderPayment(id, card, shop, invoiceId) {
+    const url = invoiceId ? `shop/${shop}/order/${id}/invoice/${invoiceId}/payment` : `shop/${shop}/order/${id}/payment`;
+    return _post(url, card);
   },
   addOrderTimeline(id, item) {
     return _post(`order/${id}/timeline`, item);

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

@@ -12,8 +12,11 @@
             :address="order.shippingAddress"
             :without-additional-info="true" />
         </div>
+        <div class="Cart__quantity-errors">
+          <cart-quantity-errors />
+        </div>
         <progress-steps-controls
-          :disabled-next="isSubmit && invalid"
+          :disabled-next="(isSubmit && invalid) || isNotValidQuantity"
           @prev="$emit('prev')"
           @next="submit" />
       </validation-observer>
@@ -22,12 +25,16 @@
 </template>
 
 <script>
+import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
+import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 
 export default {
   name: 'OrderBillingInformation',
+  mixins: [CartMixin],
   components: {
+    CartQuantityErrors,
     AddressForm,
     ProgressStepsControls
   },

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

@@ -2,14 +2,14 @@
   <div class="PaymentSuccess__wrapper">
     <div class="PaymentSuccess__icon"></div>
     <div class="lc_semibold22">
-      {{ !order.paid ? 'Order Received' : 'Order paid successfully' }}!
+      {{ label }} {{ !model.paid ? ' Received' : ' paid successfully' }}!
     </div>
     <div class="lc_regular18 lc_grey1 mt-5">
-      Order {{ order.code }}
+      {{ label }} {{ model.code }}
     </div>
     <div class="lc_regular16 lc_grey1 mt-5">
       {{
-        !order.paid
+        !model.paid
           ? 'Our team will advise cost and the next steps. Please except a call or email from us after we review.'
           : 'The charge line will appear on your card as "Wholesale Apparel & Workwear"'
       }}
@@ -31,10 +31,21 @@ export default {
       type: Object,
       required: true
     },
+    invoice: {
+      type: Object
+    },
     btnLabel: {
       type: String,
       default: 'Back to editor'
     }
+  },
+  computed: {
+    model() {
+      return this.invoice || this.order
+    },
+    label() {
+      return this.invoice ? 'Invoice' : 'Order';
+    }
   }
 };
 </script>

package/components/faq/faq.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="FAQ__wrapper view-transition">
+    <slot name="header">
+      <div class="FAQ__header">
+          <h1 class="lc_h1--white">
+            Frequently asked questions
+          </h1>
+          <span class="lc_subtitle1--strong-white FAQ__subtitle">
+            Here you can find all the questions you need answered
+          </span>
+      </div>
+    </slot>
+    <div class="content-inner">
+      <div class="row FAQ__content-wrapper">
+        <div class="FAQ__content col-md-10 col-12 mr-auto ml-auto">
+          <div
+            v-for="group in groups"
+            :key="group.type"
+            class="FAQ__group">
+            <div
+              :ref="group.type"
+              class="FAQ__group-header"
+              @click="togable && toggleGroup(group)">
+              <div
+                class="FAQ__group-title"
+                :class="group.type">
+                {{ group.name }}
+              </div>
+              <i
+                v-if="togable"
+                class="icon-cancel FAQ__group-caret"
+                :class="{ active: openedGroup === group.type }"></i>
+            </div>
+            <transition
+              name="fade"
+              appear>
+              <div
+                v-if="openedGroup === group.type"
+                class="FAQ__group-content view-transition">
+                <div
+                  v-for="entity in group.entities"
+                  :key="entity._id"
+                  :ref="entity._id"
+                  class="FAQ__entity">
+                  <div
+                    class="FAQ__entity-header"
+                    @click="toggleEntity(entity)">
+                    <div class="FAQ__entity-title">
+                      {{ entity.question }}
+                    </div>
+                    <i
+                      class="icon-angle-down FAQ__entity-header-caret"
+                      :class="{ active: openedEntities.includes(entity._id) }"></i>
+                  </div>
+                  <transition
+                    name="fade"
+                    appear>
+                    <div
+                      v-if="openedEntities.includes(entity._id)"
+                      class="FAQ__entity-body view-transition"
+                      v-html="entity.answer">
+                    </div>
+                  </transition>
+                </div>
+              </div>
+            </transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FAQ',
+  props: {
+    groups: {
+      type: Array,
+      required: true
+    },
+    togable: {
+      type: Boolean,
+      default: true
+    },
+    preopenedGroup: {
+      type: Object
+    },
+    preopenedEntity: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      openedGroup: null,
+      openedEntities: []
+    };
+  },
+  mounted() {
+    if (this.preopenedGroup) {
+      this.toggleGroup({ type: this.preopenedGroup });
+    }
+    if (this.preopenedEntity) {
+      this.toggleEntity({ _id: this.preopenedEntity });
+    }
+  },
+  methods: {
+    toggleGroup({ type }) {
+      this.openedGroup = this.openedGroup === type ? null : type;
+    },
+    toggleEntity({ _id }) {
+      const index = this.openedEntities.indexOf(_id);
+      if (~index) {
+        this.$delete(this.openedEntities, index);
+      } else {
+        this.openedEntities.push(_id);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@lancom/shared/assets/scss/variables";
+$types: delivery, general, other, printing, garments;
+.FAQ {
+  &__wrapper {
+    margin-top: 20px;
+  }
+  &__header {
+    text-align: center;
+    background-color: $dark_blue;
+    padding: 70px 0 86px 0;
+  }
+  &__subtitle {
+    font-size: 25px;
+    font-weight: normal;
+    line-height: 35px;
+    letter-spacing: 0.02em;
+  }
+  &__content {
+    padding: 100px 0 180px 0;
+  }
+  &__group {
+    background-color: $light_gray;
+    & + & {
+      margin-top: 16px;
+    }
+    &-header {
+      padding: 22px 45px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      text-transform: uppercase;
+    }
+    &-title {
+      font-weight: 500;
+      font-size: 22px;
+      line-height: 29px;
+      letter-spacing: 0.02em;
+      color: $dark_blue;
+      line-height: 41px;
+      padding-left: 62px;
+      position: relative;
+      &:before {
+        content: '';
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        background-size: cover;
+      }
+      @each $type in $types {
+        &.#{$type}:before {
+          background-image: url(~static/icons/#{$type}.svg);
+        }
+      }
+    }
+    &-caret {
+      font-size: 16px;
+      &:before {
+        transform: rotate(45deg);
+        transition: transform .22s ease-in-out;
+      }
+      &.active:before {
+        transform: rotate(0);
+      }
+    }
+    &-content {
+      padding: 22px 45px 60px 45px;
+    }
+  }
+  &__entity {
+    background-color: #FFFFFF;
+    & + & {
+      margin-top: 10px;
+    }
+    &-header {
+      padding: 18px 30px;
+      position: relative;
+      cursor: pointer;
+      &-caret {
+        font-size: 28px;
+        position: absolute;
+        top: 50%;
+        right: 30px;
+        transform: translateY(-50%);
+        &:before {
+          transform: rotate(0);
+          transition: transform .22s ease-in-out;
+        }
+        &.active:before {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    &-title {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 25px;
+      letter-spacing: 0.02em;
+      color: $dark_blue;
+    }
+    &-body {
+      padding: 6px 30px 24px 30px;
+      line-height: 27px;
+      color: $gray;
+      overflow: hidden;
+      @import "@lancom/shared/assets/scss/normalize";
+    }
+  }
+}
+</style>

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

@@ -1,11 +1,12 @@
 <template>
   <div class="OrderPayment__wrapper">
     <h4 class="lc_h1 mt-10 mb-10">
-      Payment Order #{{order.code}}
+      Payment {{ invoice ? 'Invoice' : 'Order'}} #{{model.code}}
     </h4>
     <payment-success
-      v-if="order.paid"
-      :order="order">
+      v-if="model.paid"
+      :order="order"
+      :invoice="invoice">
       <template slot="back-btn">
         <div class="d-flex">
           <btn
@@ -25,7 +26,7 @@
         <div>
           <payment-cart
             ref="paymentCart"
-            :amount="order.totalGST"
+            :amount="model.totalGST"
             :has-spinner="false"
             :payment-data="order.shippingAddress">
           </payment-cart>
@@ -63,7 +64,11 @@ export default {
     order: {
       type: Object,
       required: true
-    }
+    },
+    invoice: {
+      type: Object,
+      required: true
+    },
   },
   data() {
     return {
@@ -72,7 +77,10 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop'])
+    ...mapGetters(['shop']),
+    model() {
+      return this.invoice || this.order;
+    }
   },
   methods: {
     handleErrors(err) {
@@ -86,8 +94,9 @@ export default {
         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;
+          const { _id: invoiceId } = this.invoice || {};
+          const { paid } = await api.createOrderPayment(this.order._id, card, this.shop._id, invoiceId);
+          this.model.paid = paid;
         }
       } catch (e) {
         if (e.response) {

package/components/order/order_view/order-view.mixin.js

@@ -16,11 +16,17 @@ export default {
     order: {
       type: Object,
       required: true
-    }
+    },
+    invoice: {
+      type: Object
+    },
   },
   computed: {
+    model() {
+      return this.invoice || this.order;
+    },
     isPaid() {
-      return this.order.paymentStatus === 'paid';
+      return this.model.paymentStatus === 'paid';
     },
     orderId() {
       return `${this.order.code}`.replace('ORDER', '');
@@ -45,7 +51,7 @@ export default {
       return this.order.shop.settings?.pricing?.gstTax || 0;
     },
     gstTotal() {
-      return tax(this.order.total, this.gstTax) - this.order.total;
+      return tax(this.model.total, this.gstTax) - this.model.total;
     }
   }
 };

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

@@ -17,7 +17,7 @@
         </h4>
       </div>
       <h1 class="text-secondary lc_h1">
-        {{ order.paymentMethod === 'deposit' ? 'Proforma Invoice' : 'Tax invoice' }}
+        {{ model.paymentMethod === 'deposit' ? 'Proforma Invoice' : 'Tax invoice' }}
       </h1>
     </div>
     <div class="OrderView__info">
@@ -34,13 +34,13 @@
       </div>
       <div>
         <div class="lc_regular16">
-          DATE: {{ order.createdAt | shortDate }}
+          DATE: {{ model.createdAt | shortDate }}
         </div>
         <div class="lc_regular16">
           Order ID: {{ orderId }}
         </div>
         <div class="lc_regular16">
-          Invoice ID: INV{{ orderId.replace('ORD', '') }}-01
+          Invoice ID: {{ invoice ? invoice.code : `INV${orderId.replace('ORD', '')}-01` }}
         </div>
       </div>
     </div>
@@ -74,17 +74,17 @@
           </div>
         </td>
         <td
-          v-if="order.paid"
+          v-if="model.paid"
           class="w-50">
           <div class="lc_regular16">
             <b>PAID VIA CREDIT CARD</b>
           </div>
-          <div v-if="order.charge && order.charge.card">
+          <div v-if="model.charge && model.charge.card">
             <div class="lc_regular16">
-              Card: {{ order.charge.card.display_number }}
+              Card: {{ model.charge.card.display_number }}
             </div>
             <div class="lc_regular16">
-              Scheme: {{ order.charge.card.scheme }}
+              Scheme: {{ model.charge.card.scheme }}
             </div>
           </div>
         </td>
@@ -111,9 +111,11 @@
     </table>
     <div class="mt-3">
       <div class="OrderView__products-wrapper">
-        <div class="OrderView__products">
+        <div
+          v-if="model.products.length > 0"
+          class="OrderView__products">
           <order-view-product
-            v-for="product of order.products"
+            v-for="product of model.products"
             :key="product._id"
             :product="product"
             :responsive="responsive"
@@ -125,22 +127,22 @@
             'OrderView__totals--paid': isPaid
           }">
           <div class="lc_regular16">
-            Products Total: <b>{{ order.productsTotal | price }}</b>
+            Products Total: <b>{{ model.productsTotal | price }}</b>
           </div>
           <div class="lc_regular16">
-            Prints Total: <b>{{ order.printsTotal | price }}</b>
+            Prints Total: <b>{{ model.printsTotal | price }}</b>
           </div>
           <div class="lc_regular16">
-            Shipping Total: <b>{{ order.shippingTotal | price }}</b>
+            Shipping Total: <b>{{ model.shippingTotal | price }}</b>
           </div>
           <div class="lc_regular16">
-            Total ex GST: <b>{{ order.total | price }}</b>
+            Total ex GST: <b>{{ model.total | price }}</b>
           </div>
           <div class="lc_regular16">
-            GST: <b>{{ order.totalGST - order.total | price }}</b>
+            GST: <b>{{ model.totalGST - model.total | price }}</b>
           </div>
           <div class="lc_regular16">
-            Total inc GST: <b>{{ order.totalGST | price }}</b>
+            Total inc GST: <b>{{ model.totalGST | price }}</b>
           </div>
         </div>
       </div>

package/components/products/products_filters/products-filters.vue

@@ -47,7 +47,7 @@ export default {
       label: ' high to low'
     }];
     return {
-      sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort),
+      sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort) || sortByOptions[0],
       search: this.$route.query.text || '',
       sortByOptions
     };

package/package.json

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