@lancom/shared 0.0.62 → 0.0.66

package/components/order/order_approval/order-approval.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="OrderApproval__wrapper">
+    <h4 class="lc_h4">
+      Approval
+    </h4>
+    <div v-if="hasApprovalPDFs">
+      <div class="OrderApproval__list">
+        <div
+          v-for="approvalPDF in order.approvalPDFs"
+          :key="approvalPDF._id"
+          class="OrderApproval__list-item">
+          <a
+            :href="approvalPDF.file | staticLink"
+            target="_blank"
+            class="OrderApproval__link ml-5">
+            {{ approvalPDF.name }}
+          </a>
+        </div>
+      </div>
+      <div class="OrderApproval__list">
+        <order-approval-message :order="order" />
+      </div>
+    </div>
+    <div v-else>
+      <btn
+        class="mt-10"
+        btn-class="green"
+        :btn-processing="loading"
+        :btn-disabled="loading"
+        btn-label="Generate approval PDFs"
+        @onclick="generateApprovalPDFs" />
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+import OrderApprovalMessage from './order_approval_message/order-approval-message';
+
+export default {
+  name: 'OrderApproval',
+  filters: {
+    staticLink
+  },
+  components: {
+    OrderApprovalMessage
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false
+    };
+  },
+  computed: {
+    hasApprovalPDFs() {
+      const { approvalPDFs = [] } = this.order;
+      return approvalPDFs.length > 0;
+    }
+  },
+  methods: {
+    async generateApprovalPDFs() {
+      try {
+        this.loading = true;
+        const item = await api.generateApprovalPDFs(this.order.token);
+        this.order.approvalPDFs = item.approvalPDFs;
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-approval.scss';
+</style>

package/components/order/order_approval/order_approval_message/order-approval-message.scss

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

package/components/order/order_approval/order_approval_message/order-approval-message.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="OrderApprovalMessage__wrapper">
+    <h4 class="lc_h4">
+      Approval Emai
+    </h4>
+    <div class="form-row mb-10">
+      <validation-provider
+        tag="div"
+        name="Message"
+        class="mb-5 mt-5">
+        <textarea
+          v-model="approve.message"
+          name="message"
+          style="height: 140px"
+          placeholder="Approval message"
+          class="form-field no-label"></textarea>
+      </validation-provider>
+    </div>
+    <div class="form-row mb-10">
+      <label class="form-label PaymentModal__label-with-checkbox">
+        <checkbox v-model="approve.attachPDFs" />
+        <span class="lc_regular14 lc__grey1">
+          Attach approval PDFs
+        </span>
+      </label>
+    </div>
+    <div class="form-row">
+      <btn
+        btn-class="green"
+        :btn-processing="loading"
+        :btn-disabled="!approve.message || loading"
+        btn-label="Send to Customer "
+        @onclick="sendApprovalMessage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'OrderApprovalMessage',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      approve: {
+        message: 'Please see attached design files requiring your approval. Please review each design file, and reply with either ALL APPROVED or advise if changes are required. Note ALL APPROVED designs are final.',
+        attachPDFs: true
+      }
+    };
+  },
+  computed: {
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    async sendApprovalMessage() {
+      try {
+        this.loading = true;
+        const item = await api.sendApprovalMessage(this.order.token, this.approve, this.shop._id);
+        this.order.timeline = item.timeline;
+        this.order.status = item.status;
+        this.$toastr.s('Approval message successfully sent');
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-approval-message.scss';
+</style>

package/components/order/order_entity/order-entity.scss

@@ -0,0 +1,25 @@
+
+@import "@/assets/scss/variables";
+.OrderEntity {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    & + & {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid $light_gray;
+    }
+  }
+  &__prints {
+    display: flex;
+    align-items: center;
+  }
+  &__thumbnail {
+    width: 500px;
+    height: 500px;
+  }
+  &__info-col,
+  &__layers {
+    padding: 0 24px;
+  }
+}

package/components/order/order_entity/order-entity.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="OrderEntity__wrapper">
+    <div class="OrderEntity__info">
+      <div class="OrderEntity__info-col">
+        <div class="lc_subtitle1">
+          {{ entity.name }} | {{ entity.brand }} | {{ entity.style }}
+        </div>
+        <div class="lc_caption">
+          Color: {{ entity.color.name }}
+        </div>
+        <div class="lc_caption">
+          Size: {{ entity.size.name }}
+        </div>
+      </div>
+      <div class="OrderEntity__info-col">
+        <div class="lc_overline">
+          Amount: {{ entity.amount }}
+        </div>
+        <div class="lc_overline OrderEntity__price">
+          Price: {{ pricingProducts[entity._id].totalPrice | price }}
+        </div>
+      </div>
+    </div>
+    <div class="OrderEntity__prints">
+      <div
+        v-for="(side, index) in ['front','back']"
+        :key="index"
+        class="OrderEntity__print">
+        <product-side-with-print
+          :product="entity"
+          :side="side"
+          size="medium"
+          class="OrderEntity__thumbnail" />
+        <div
+          class="btn btn-green"
+          @click="savePrint(side)">
+          Save Print
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import { exportPrintToSVG } from '@lancom/shared/assets/js/utils/export-print-to-svg';
+import { SIDE_TYPES } from '@lancom/shared/assets/js/constants/sides';
+
+export default {
+  name: 'OrderEntity',
+  filters: { price },
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    pricingProducts: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    savePrint(sideId) {
+      exportPrintToSVG(this.entity, SIDE_TYPES[sideId]);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-entity.scss';
+</style>

package/components/order/order_entity/order_entity_side_layers/order-entity-side-layers.scss

@@ -0,0 +1,14 @@
+
+@import "@/assets/scss/variables";
+.OrderEntitySideLayers {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__layer {
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 1px solid grey;;
+  }
+}

package/components/order/order_entity/order_entity_side_layers/order-entity-side-layers.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    v-if="hasLayers"
+    class="OrderEntitySideLayers__wrapper">
+    <div class="lc_overline">
+      Layers
+    </div>
+    <div
+      v-for="(layer, index) in sideLayers"
+      :key="index"
+      class="OrderEntitySideLayers__layer">
+      <div class="lc_caption">
+        Type: {{ layer.type }}
+      </div>
+      <div class="lc_caption">
+        Position: Top: {{ layer.top }}px, Left: {{ layer.left }}px, Angle: {{ layer.angle }}°
+      </div>
+
+      <div v-if="layer.type === 'text'">
+        <div class="lc_caption">
+          Fill: {{ layer.fill }}
+        </div>
+        <div class="lc_caption">
+          Text: {{ layer.copy }}
+        </div>
+        <div
+          v-if="layer.fontFamily"
+          class="lc_caption">
+          Font Family:
+          <a :href="getFontPath(layer.fontFamily)" target="_blank">
+            {{ layer.fontFamily }}
+          </a>
+        </div>
+        <div class="lc_caption">
+          Stroke: {{ layer.strokeWidth }}px, {{ layer.stroke }}
+        </div>
+      </div>
+      <div v-else>
+        <a :href="layer.url" target="_blank">
+          <img
+            :src="layer.url"
+            width="30px" />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { SIDE_TYPES } from '@lancom/shared/assets/js/constants/sides';
+import { getFontPath } from '@lancom/shared/assets/js/utils/fonts-helper';
+
+export default {
+  name: 'OrderEntitySideLayers',
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    side: {
+      type: Number,
+      required: true
+    }
+  },
+  computed: {
+    hasLayers() {
+      return this.sideLayers.length > 0;
+    },
+    sideId() {
+      return SIDE_TYPES[this.side];
+    },
+    sideLayers() {
+      return (this.entity.layers || []).filter(layer => layer.sideId === this.sideId);
+    }
+  },
+  methods: {
+    getFontPath
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-entity-side-layers.scss';
+</style>

package/components/order/order_main_info/order-main-info.scss

@@ -0,0 +1,11 @@
+.OrderMainInfo {
+  &__wrapper {
+    padding: 12px;
+    i {
+      cursor: pointer;
+    }
+  }
+  &__content {
+    padding-top: 4px;
+  }
+}

package/components/order/order_main_info/order-main-info.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="OrderMainInfo__wrapper">
+    <h4 class="lc_h4">
+      Customer details
+      <i
+        class="icon-copy"
+        @click="copyFullInfo()"></i>
+    </h4>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.fullName)"></i>
+      <b>Full Name:</b> {{ order.fullName }}
+    </div>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.email)"></i>
+      <b>Email:</b> {{ order.email }}
+    </div>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.phone)"></i>
+      <b>Phone:</b> {{ order.phone }}
+    </div>
+    <div
+      v-if="order.company"
+      class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.company)"></i>
+      <b>Company:</b> {{ order.company }}
+    </div>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.city)"></i>
+      <b>Suburb:</b> {{ order.city }}
+    </div>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.state)"></i>
+      <b>State:</b> {{ order.state }}
+    </div>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.postcode)"></i>
+      <b>Postcode:</b> {{ order.postcode }}
+    </div>
+    <div class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.addressLine1)"></i>
+      <b>Address Line1:</b> {{ order.addressLine1 }}
+    </div>
+    <div
+      v-if="order.addressLine2"
+      class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.addressLine2)"></i>
+      <b>Address Line2:</b> {{ order.addressLine2 }}
+    </div>
+    <div
+      v-if="order.additionalInfo"
+      class="lc_caption OrderMainInfo__content">
+      <i
+        class="icon-copy"
+        @click="copyToClipboard(order.additionalInfo)"></i>
+      <b>Additional Info:</b> {{ order.additionalInfo }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { copyToClipboard } from '@lancom/shared/assets/js/utils/copy-to-clipboard';
+
+export default {
+  name: 'OrderMainInfo',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    copyFullInfo() {
+      const info = [
+        `Full Name: ${this.order.fullName}`,
+        `Phone: ${this.order.phone}`,
+        this.order.company ? `Company: ${this.order.company}` : null,
+        `Suburb: ${this.order.city}`,
+        `State: ${this.order.state}`,
+        `Postcode: ${this.order.postcode}`,
+        `Address Line1: ${this.order.addressLine1}`,
+        this.order.addressLine2 ? `Address Line2: ${this.order.addressLine2}` : null,
+        this.order.additionalInfo ? `additionalInfo: ${this.order.additionalInfo}` : null
+      ];
+      const text = info.filter(i => !!i).join('\n');
+      this.copyToClipboard(text);
+    },
+    copyToClipboard(text) {
+      copyToClipboard(text);
+      this.$toastr.s('Info copied');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-main-info.scss';
+</style>

package/components/order/order_price/order-price.scss

@@ -0,0 +1,8 @@
+.OrderPrice {
+  &__wrapper {
+    padding: 12px;
+  }
+  &__content {
+    padding-top: 12px;
+  }
+}

package/components/order/order_price/order-price.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="OrderPrice__wrapper">
+    <h4 class="lc_h4">
+      Order summary
+    </h4>
+    <div class="OrderPrice__content">
+      <div class="lc_caption OrderPrice__row">
+        <b>Tees:</b> {{ price.amount }} ({{ price.products.products.totalPriceWithoutTax | price }})
+      </div>
+      <div class="lc_caption OrderPrice__row">
+        <div><b>Prints:</b></div>
+        <div
+          v-for="[size, pricing] in printsPrice"
+          :key="size"
+          style="padding-left: 15px;">
+          {{ size | print }}: {{ pricing.amount }} ({{ pricing.totalPriceWithoutTax | price }})
+        </div>
+        <div style="padding-left: 15px;">
+          <b>Prints total:</b> {{ price.products.prints.totalPriceWithoutTax | price }}
+        </div>
+      </div>
+      <div
+        v-if="price.shipping"
+        class="lc_caption OrderPrice__row">
+        <b>Delivery:</b> {{ price.shipping.totalPriceWithoutTax | price }} ({{ price.shipping.weight }})
+      </div>
+      <div class="lc_caption OrderPrice__row">
+        <b>Order amount ex GST:</b> {{ price.totalPriceWithoutTax | price }}
+      </div>
+      <div class="lc_caption OrderPrice__row">
+        <b>GST:</b> {{ price.tax.totalPrice | price }} ({{ price.tax.percent }})
+      </div>
+      <div class="lc_caption OrderPrice__row">
+        <b>Order amount inc GST:</b> {{ price.totalPrice | price }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { groupProductsPrintsBySize } from '@lancom/shared/assets/js/utils/products-grouping';
+import { price, print } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'OrderPriceInfo',
+  filters: { price, print },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    price() {
+      return this.order.price;
+    },
+    printsPrice() {
+      return groupProductsPrintsBySize(this.order.products, this.order.price.products);
+    }
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import 'order-price.scss';
+</style>

package/components/order/order_prints_groups/order-prints-groups.scss

@@ -0,0 +1,14 @@
+.OrderPrintsGroups {
+  &__wrapper {
+    table td {
+      line-height: 1.6rem;
+      padding: 10px 5px;
+    }
+  }
+  &__thumbnail {
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+    cursor: pointer;
+  }
+}