@lancom/shared 0.0.62 → 0.0.66

package/components/order/order_status/order-status.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="OrderStatus__wrapper">
+    <h4 class="lc_h4">
+      Order Status
+    </h4>
+    <div class="OrderStatus__value">
+      <div v-if="isEditable">
+        <multiselect
+          v-model="order.status"
+          :options="options"
+          :option-height="35"
+          :allow-empty="false"
+          @select="changeStatus" />
+      </div>
+      <div
+        v-else
+        class="OrderStatus__status">
+        {{ order.status }}
+      </div>
+    </div>
+    <!-- <h4 class="lc_h4">
+      Special
+    </h4>
+    <div class="OrderStatus__value">
+      <div v-if="isEditable">
+        <label class="form-label PaymentModal__label-with-checkbox">
+          <checkbox v-model="order.special" @change="changeStatus" />
+          <span class="lc_regular14 lc__grey1">
+            Special Order
+          </span>
+        </label>
+      </div>
+      <div
+        v-else
+        class="OrderStatus__status">
+        {{ order.special ? 'Yes' : 'No' }}
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { ORDER_STATUSES_LIST } from '@lancom/shared/assets/js/constants/order';
+
+export default {
+  name: 'OrderStatus',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isEditable: true,
+      options: ORDER_STATUSES_LIST
+    };
+  },
+  methods: {
+    async changeStatus(status) {
+      try {
+        const order = await api.updateOrder(this.order._id, { status });
+        this.order.status = order.status;
+        this.order.timeline = order.timeline;
+        this.$toastr.s('Order changes saved');
+      } catch (e) {
+        this.$toastr.e('Failed to change order status');
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-status.scss';
+</style>

package/components/order/order_timeline/order-timeline.scss

@@ -0,0 +1,15 @@
+@import "@/assets/scss/variables";
+
+.OrderTimeline {
+  &__list {
+    margin-top: 10px;
+  }
+  &__list-item {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 1px solid $grey_3;
+  }
+  &__list-item-date {
+    color: $grey_2;
+  }
+}

package/components/order/order_timeline/order-timeline.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="OrderTimeline__wrapper">
+    <h4 class="lc_h4">
+      Timeline
+    </h4>
+    <div class="OrderTimeline__list">
+      <div
+        v-for="item in order.timeline"
+        :key="item._id"
+        class="OrderTimeline__list-item">
+        <div class="lc_regular10 OrderTimeline__list-item-date">
+          {{ item.createdAt | sydneyTime }}
+        </div>
+        <div
+          class="lc_regular14"
+          v-html="nl2br(item.message)"></div>
+      </div>
+    </div>
+    <div class="OrderTimeline__add">
+      <validation-provider
+        tag="div"
+        name="Message"
+        class="mb-5 mt-5">
+        <textarea
+          id="timeline_message"
+          v-model="message"
+          name="message"
+          style="height: 140px"
+          placeholder="Note"
+          class="form-field no-label"></textarea>
+      </validation-provider>
+      <btn
+        btn-class="green"
+        :btn-processing="saving"
+        :btn-disabled="!message || saving"
+        btn-label="Add Note "
+        @onclick="addMessage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { sydneyTime, nl2br } from '@lancom/shared/assets/js/utils/filters';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'OrderTimeline',
+  filters: {
+    sydneyTime
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      message: ''
+    };
+  },
+  methods: {
+    async addMessage() {
+      const item = await api.addOrderTimeline(this.order._id, { message: this.message });
+      this.order.timeline = item.timeline;
+      this.message = '';
+    },
+    nl2br
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-timeline.scss';
+</style>

package/components/order/order_tracking_numbers/order-tracking-numbers.scss

@@ -0,0 +1,34 @@
+@import "@/assets/scss/variables";
+
+.OrderTrackingNumbers {
+  &__wrapper {
+    margin-top: 10px;
+  }
+  &__numbers {
+    display: flex;
+    flex-direction: column;
+  }
+  &__number {
+    padding: 10px 3px;
+    border-bottom: 1px solid $light_gray;
+    display: flex;
+    align-content: center;
+    &:last-child {
+      border-bottom: none;
+    }
+    &-label {
+      color: $gray;
+    }
+    &-remove {
+      color: $gray;
+      cursor: pointer;
+      margin-right: 3px;
+      &:hover {
+        color: $green;
+      }
+    }
+  }
+  &__add {
+    margin-top: 15px;
+  }
+}

package/components/order/order_tracking_numbers/order-tracking-numbers.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="OrderTrackingNumbers__wrapper">
+    <h4 class="lc_h4">
+      Tracking Numbers
+    </h4>
+    <div class="OrderTrackingNumbers__value">
+      <div class="OrderTrackingNumbers__numbers">
+        <div
+          v-for="(trackingNumber, index) in trackingNumbers"
+          :key="index"
+          class="OrderTrackingNumbers__number">
+          <i
+            v-if="isEditable"
+            class="icon-delete OrderTrackingNumbers__number-remove"
+            @click="removeTrackingCode(trackingNumber)"></i>
+          <a
+            v-if="trackingNumber.link"
+            :href="trackingNumber.link"
+            target="_blank"
+            class="OrderTrackingNumbers__number-label">
+            {{ trackingNumber.code }}
+          </a>
+          <div
+            v-else
+            class="OrderTrackingNumbers__number-label">
+            {{ trackingNumber.code }}
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="isEditable"
+        class="OrderTrackingNumbers__add">
+        <validation-provider
+          tag="div"
+          name="Link"
+          class="form-row">
+          <input
+            id="number_link"
+            v-model="number.link"
+            name="link"
+            type="text"
+            class="form-field"
+            :class="{
+              filled: number.link
+            }" />
+          <label
+            for="number_link"
+            class="form-label label-inner">
+            Link
+          </label>
+        </validation-provider>
+        <div class="row">
+          <div class="col-sm-7">
+            <validation-provider
+              tag="div"
+              name="Code"
+              class="form-row">
+              <input
+                id="number_code"
+                v-model="number.code"
+                name="code"
+                type="text"
+                class="form-field"
+                :class="{
+                  filled: number.code
+                }" />
+              <label
+                for="number_code"
+                class="form-label label-inner">
+                Number
+              </label>
+            </validation-provider>
+          </div>
+          <div class="col-sm-5">
+            <btn
+              style="width: 100%;"
+              btn-class="green"
+              :btn-processing="number.code && saving"
+              :btn-disabled="!number.code"
+              btn-label="Add Number "
+              @onclick="addTrackingNumber" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'OrderTrackingNumbers',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isEditable: true,
+      saving: false,
+      number: {
+        link: null,
+        code: null
+      }
+    };
+  },
+  computed: {
+    trackingNumbers() {
+      return this.order.trackingNumbers || [];
+    }
+  },
+  methods: {
+    clearNumber() {
+      this.number = {
+        link: null,
+        code: null
+      };
+    },
+    async addTrackingNumber() {
+      const trackingNumbers = [
+        ...this.trackingNumbers,
+        this.number
+      ];
+      const order = await this.saveTrackingNumber(trackingNumbers);
+      if (order) {
+        this.clearNumber();
+        this.order.trackingNumbers = trackingNumbers;
+        this.order.timeline = order.timeline;
+      }
+    },
+    async removeTrackingCode(trackingNumber) {
+      const trackingNumbers = this.trackingNumbers.filter(n => n !== trackingNumber);
+      const success = await this.saveTrackingNumber(trackingNumbers);
+      if (success) {
+        this.order.trackingNumbers = trackingNumbers;
+      }
+    },
+    async saveTrackingNumber(trackingNumbers) {
+      try {
+        this.saving = true;
+        const body = { trackingNumbers };
+        const order = await api.updateOrder(this.order._id, body);
+        this.$toastr.s('Tracking numbers successfully updated');
+
+        return order;
+      } catch (e) {
+        this.$toastr.e('Failed to update tracking numbers');
+      } finally {
+        this.saving = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-tracking-numbers.scss';
+</style>

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

@@ -0,0 +1,51 @@
+import { price, shortDate, tax } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  filters: {
+    price,
+    shortDate,
+    tax
+  },
+  data() {
+    return {
+      processing: false,
+      errorMessage: null
+    };
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    isPaid() {
+      return this.order.paymentStatus === 'paid';
+    },
+    orderId() {
+      return `${this.order.code}`.replace('ORDER', '');
+    },
+    shopContacts() {
+      return this.order.shop.settings?.contacts || {};
+    },
+    depositInfo() {
+      return this.order.shop.settings?.depositInfo || {};
+    },
+    orderAddress() {
+      return [
+        this.order.billingAddress.addressLine1,
+        this.order.billingAddress.addressLine2,
+        this.order.billingAddress.city,
+        this.order.billingAddress.postcode,
+        this.order.billingAddress.state,
+        this.order.billingAddress.country
+      ].filter(i => !!i).join(', ');
+    },
+    gstTax() {
+      return this.order.shop.settings?.pricing?.gstTax || 0;
+    },
+    gstTotal() {
+      return tax(this.order.total, this.gstTax) - this.order.total;
+    }
+  }
+};

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

@@ -0,0 +1,52 @@
+.OrderView {
+  &__wrapper {
+    margin-top: 50px;
+  }
+  &__logo {
+    margin-bottom: 10px;
+  }
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  &__table {
+    margin-top: 20px;
+    td { 
+      width: 50%;
+      padding: 20px;
+    }
+  }
+  &__products {
+    border: 1px solid #dee2e6;
+    padding: 30px;
+    margin-top: 20px;
+  }
+  &__product {
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #dee2e6;
+  }
+  &__totals {
+    margin: 30px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  &__totals {
+    margin: 30px 0;
+    padding: 20px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    &--paid {
+      background-image: url(../../../static/images/paid.svg);
+      background-repeat: no-repeat;    
+      background-position: 0px 0px;
+      background-size: contain;
+    }
+  }
+}
+.uppercase {
+    text-transform: uppercase;
+}

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="OrderView__wrapper">
+    <div
+      v-if="order.shop.logo"
+      class="OrderView__logo">
+      <img :src="order.shop.logo.small" />
+    </div>
+    <div class="OrderView__info">
+      <div>
+        <h2 class="lc_h1">
+          {{ order.shop.name }}
+        </h2>
+        <h4
+          v-if="shopContacts"
+          class="lc_h4">
+          ABN: {{ shopContacts.abn }}
+        </h4>
+      </div>
+      <h1 class="text-secondary lc_h1">
+        Tax invoice
+      </h1>
+    </div>
+    <div class="OrderView__info">
+      <div v-if="shopContacts">
+        <div class="lc_regular16">
+          {{ shopContacts.company }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.address }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.phone }}
+        </div>
+      </div>
+      <div>
+        <div class="lc_regular16">
+          DATE: {{ order.createdAt | shortDate }}
+        </div>
+        <div class="lc_regular16">
+          Order ID: {{ orderId }}
+        </div>
+      </div>
+    </div>
+    <table class="OrderView__table mt-4 lc_table bordered">
+      <tr>
+        <td>
+          <div class="lc_regular16">
+            <b>Order</b>
+          </div>
+          <div class="lc_regular16">
+            {{ order.billingAddress.fullName }}
+          </div>
+          <div
+            v-if="order.billingAddress.company"
+            class="lc_regular16">
+            {{ order.billingAddress.company }}
+          </div>
+          <div
+            v-if="order.billingAddress.phone"
+            class="lc_regular16">
+            {{ order.billingAddress.phone }}
+          </div>
+          <div class="lc_regular16">
+            {{ order.billingAddress.email }}
+          </div>
+          <div class="lc_regular16">
+            {{ orderAddress }}
+          </div>
+          <div class="lc_regular16">
+            {{ order.additionalInfo }}
+          </div>
+        </td>
+        <td class="w-50">
+          <div class="lc_regular16">
+            <b>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">
+            BSB: {{ depositInfo.BSB }}
+          </div>
+          <div class="lc_regular16">
+            Account: {{ depositInfo.account }}
+          </div>
+        </td>
+      </tr>
+    </table>
+    <div class="mt-3">
+      <div class="OrderView__products-wrapper">
+        <div class="OrderView__products">
+          <order-view-product
+            v-for="product of order.products"
+            :key="product._id"
+            :product="product"
+            class="OrderView__product" />
+        </div>
+        <div
+          class="OrderView__totals"
+          :class="{
+            'OrderView__totals--paid': isPaid
+          }">
+          <div class="lc_regular16">
+            Products Total: <b>{{ order.productsTotal | price }}</b>
+          </div>
+          <div class="lc_regular16">
+            Prints Total: <b>{{ order.printsTotal | price }}</b>
+          </div>
+          <div class="lc_regular16">
+            Shipping Total: <b>{{ order.shippingTotal | price }}</b>
+          </div>
+          <div class="lc_regular16">
+            Total ex GST: <b>{{ order.total | price }}</b>
+          </div>
+          <div class="lc_regular16">
+            GST: <b>{{ order.totalGST - order.total | price }}</b>
+          </div>
+          <div class="lc_regular16">
+            Total inc GST: <b>{{ order.totalGST | price }}</b>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import OrderViewMixin from './order-view.mixin';
+import OrderViewProduct from './order_view_product/order-view-product';
+
+export default {
+  name: 'LancomOrderView',
+  components: {
+    OrderViewProduct
+  },
+  mixins: [OrderViewMixin]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-view.scss';
+</style>

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.mixin.js

@@ -0,0 +1,37 @@
+import { getProductColorImages } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    group: {
+      type: Object,
+      required: true
+    },
+    defaultPreview: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    images() {
+      return getProductColorImages(this.group, this.group.color);
+    },
+    product() {
+      return this.group.product;
+    },
+    productsTotalPrice() {
+      return 0;
+    },
+    simpleProductsWithAmount() {
+      return this.group.simpleProducts.filter(e => e.amount > 0);
+    },
+    totalAmount() {
+      return this.simpleProductsWithAmount.reduce((amount, entity) => {
+        return amount + entity.amount;
+      }, 0);
+    }
+  }
+};