@lancom/shared 0.0.383 → 0.0.384

package/components/customer/customer_coupons/customer-coupons.scss

@@ -0,0 +1,33 @@
+@import "@/assets/scss/variables";
+
+.CustomerCoupons__wrapper {
+  .VueTables {
+    &__table {
+      width: 100%;
+      border-collapse: collapse;
+      th, td {
+        padding: 10px;
+        text-align: left;
+        border-bottom: 1px solid $grey_2;
+        font-size: 14px;
+        &:nth-child(-n+3) {
+          width: 220px;
+        }
+      }
+      th {
+        background-color: $grey_3;
+        font-weight: bold;
+      }
+      a {
+        color: $black;
+        text-decoration: none;
+        transition: color 0.2s ease;
+        
+        &:hover {
+          color: darken($black, 10%);
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}

package/components/customer/customer_coupons/customer-coupons.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="CustomerCoupons__wrapper">
+    <client-only>
+      <v-server-table
+        :key="uniqueKey"
+        ref="table"
+        :columns="columns"
+        :options="options">
+        <template #value="{ row }">
+          <div v-if="row.percentValue || row.value">
+            {{ row.percentValue ? `${row.percentValue}%` : price(row.value)  }}
+          </div>
+        </template>
+        <template #minOrderValue="{ row }">
+          {{ row.minOrderValue ? price(row.minOrderValue) : ''  }}
+        </template>
+        <template #items="{ row }">
+          <div>
+            <customer-coupon-products
+              v-if="row.products && row.products.length > 0"
+              :coupon="row" />
+            <customer-coupon-prints
+              v-if="row.prints && row.prints.length > 0"
+              :coupon="row" />
+          </div>
+        </template>
+        <template #apply="{ row }">
+          <div class="CustomerCoupon__apply">
+            <customer-coupon-apply :coupon="row" />
+          </div>
+        </template>
+      </v-server-table>
+    </client-only>
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+import Vue from 'vue';
+import { ServerTable } from 'vue-tables-2';
+import CustomerCouponApply from './customer_coupon_apply/customer-coupon-apply';
+import CustomerCouponPrints from './customer_coupon_prints/customer-coupon-prints';
+import CustomerCouponProducts from './customer_coupon_products/customer-coupon-products';
+import { _get } from '@lancom/shared/assets/js/api/helpers';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+Vue.use(ServerTable);
+
+export default {
+  name: 'CustomerCoupons',
+  components: {
+    CustomerCouponApply,
+    CustomerCouponPrints,
+    CustomerCouponProducts
+  },
+  props: {
+    customer: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      uniqueKey: Date.now(),
+      orders: [],
+      columns: ['name', 'code', 'value', 'minOrderValue', 'items', 'apply']
+    }
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    url() {
+      return `shop/${this.shop._id}/customer/${this.customer._id}/coupons`;
+    },
+    options() {
+      return {
+        query: null,
+        perPage: 15,
+        perPageValues: [15],
+        initialPage: 1,
+        filterable: false,
+        headings: { select: '' },
+        requestFunction: params => this.request(params),
+        columnsClasses: {
+          controls: 'controls-column'
+        }
+      };
+    }
+  },
+  methods: {
+    price,
+    async request(params) {
+      const query = { ...params };
+      const result = await _get(this.url, query);
+      return result;
+    },
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-coupons';
+</style>
+  

package/components/customer/customer_coupons/customer_coupon_apply/customer-coupon-apply.scss

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

package/components/customer/customer_coupons/customer_coupon_apply/customer-coupon-apply.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="CustomerCouponApply__wrapper">
+    <btn
+      btn-class="green"
+      :btn-disabled="processing"
+      :btn-processing="processing"
+      btn-label="Coupon Apply"
+      @onclick="applyCoupon()">
+    </btn>
+  </div>
+</template>
+  
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+  name: 'CustomerCouponApply',
+  data() {
+    return {
+      processing: false
+    }
+  },
+  props: {
+    coupon: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    ...mapMutations('cart', [
+      'setCoupon'
+    ]),
+    async applyCoupon() {
+      try {
+        this.processing = true;
+        this.setCoupon(this.coupon);
+        this.$router.push('/checkout/cart');
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-coupon-apply';
+</style>
+  

package/components/customer/customer_coupons/customer_coupon_prints/customer-coupon-prints.scss

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

package/components/customer/customer_coupons/customer_coupon_prints/customer-coupon-prints.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="CustomerCouponPrints__wrapper">
+    <div class="lc_h5 mb-5 mt-5">Prints</div>
+    <CustomerCouponPrint
+      v-for="(print, index) in coupon.prints"
+      :key="index"
+      :coupon="coupon"
+      :print="print"
+    />
+  </div>
+</template>
+  
+<script>
+import CustomerCouponPrint from './customer_coupon_print/customer-coupon-print';
+
+export default {
+  name: 'CustomerCouponPrints',
+  components: {
+    CustomerCouponPrint
+  },
+  props: {
+    coupon: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-coupon-prints';
+</style>
+  

package/components/customer/customer_coupons/customer_coupon_prints/customer_coupon_print/customer-coupon-print.scss

@@ -0,0 +1,19 @@
+@import "@/assets/scss/variables";
+
+.CustomerCouponPrint {
+  &__wrapper {
+    .lc_table {
+      tr {
+        height: 38px;
+      }
+      td, th {
+        padding: 2px 0px !important;
+      }
+    }
+  }
+  &__print-types,
+  &__print-areas,
+  &__print-sizes {
+    display: flex;
+  }
+}

package/components/customer/customer_coupons/customer_coupon_prints/customer_coupon_print/customer-coupon-print.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="CustomerCouponPrint__wrapper">
+    <div class="CustomerCouponPrint__print-types mb-4">
+      <div
+        v-for="(printType, index) in printTypes"
+        :key="index">
+        {{ index > 0 ? ', ' : '' }}<b>{{ printType.name }}</b>
+      </div>
+    </div>
+    <div v-for="(printArea, index) in printAreas" :key="index">
+      <div
+        v-if="printArea.freeSetupOver > 0"
+        class="mb-4">
+        Free Setup Over <b>{{ printArea.freeSetupOver | price(currency) }}</b>
+      </div>
+      <div
+        v-if="printArea.setupCost > 0"
+        class="mb-4">
+        Setup Cost <b>{{ printArea.setupCost | price(currency) }}</b>
+      </div>
+      <div
+        v-if="printArea.printSizes"
+        class="CustomerCouponPrint__print-sizes mb-4">
+        <div class="mr-5">Size: </div>
+        <div
+          v-for="(printSize, index) in printArea.printSizes"
+          :key="index">
+          {{ index > 0 ? ', ' : '' }}<b>{{ printSize.name }}</b>
+        </div>
+      </div>
+      <pricing-discounts-table
+        class="mt-4"
+        :prices="printArea.printCost"
+        :bordered="true"
+        :with-gst="false" />
+    </div>
+    
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+
+export default {
+  name: 'CustomerCouponPrint',
+  filters: {
+    price
+  },
+  components: {
+    PricingDiscountsTable
+  },
+  props: {
+    coupon: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters(['currency']),
+    printTypes() {
+      return this.print.printTypes || [];
+    },
+    printAreas() {
+      return this.print.printAreas || [];
+    }
+  },
+  mounted() {
+    console.log('print: ', this.print);
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-coupon-print';
+</style>
+  

package/components/customer/customer_coupons/customer_coupon_products/customer-coupon-products.scss

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

package/components/customer/customer_coupons/customer_coupon_products/customer-coupon-products.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="CustomerCouponProducts__wrapper">
+    <div class="lc_h5 mb-5 mt-5">Products</div>
+    <CustomerCouponProduct
+      v-for="(product, index) in coupon.products"
+      :key="index"
+      :coupon="coupon"
+      :product="product"
+    />
+  </div>
+</template>
+  
+<script>
+import CustomerCouponProduct from './customer_coupon_product/customer-coupon-product';
+
+export default {
+  name: 'CustomerCouponProducts',
+  components: {
+    CustomerCouponProduct
+  },
+  props: {
+    coupon: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-coupon-products';
+</style>
+  

package/components/customer/customer_coupons/customer_coupon_products/customer_coupon_product/customer-coupon-product.scss

@@ -0,0 +1,17 @@
+@import "@/assets/scss/variables";
+
+.CustomerCouponProduct {
+  &__wrapper {
+    .lc_table {
+      tr {
+        height: 38px;
+      }
+      td, th {
+        padding: 2px 0px !important;
+      }
+    }
+  }
+  &__products {
+    display: flex;
+  }
+}

package/components/customer/customer_coupons/customer_coupon_products/customer_coupon_product/customer-coupon-product.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="CustomerCouponProduct__wrapper">
+    <div>
+      <ul class="CustomerCouponProduct__products">
+        <li v-for="(product, index) in products" :key="index">
+          {{ index > 0 ? ', ' : '' }}<b>{{ product.name }}</b>
+        </li>
+      </ul>
+    </div>
+    <div
+      v-if="product.onlyPrinted"
+      class="lc_regular14 mt-4">
+      Only Printed: <b>Yes</b>
+    </div>
+    <pricing-discounts-table
+      class="mt-4"
+      :prices="product.pricing"
+      :bordered="true"
+      :with-gst="false" />
+  </div>
+</template>
+  
+<script>
+import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
+
+export default {
+  name: 'CustomerCouponProduct',
+  components: {
+    PricingDiscountsTable
+  },
+  props: {
+    coupon: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    products() {
+      return this.product.products || [];
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'customer-coupon-product';
+</style>
+  

package/components/customer/customer_navigation_menu/customer-navigation-menu.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="CustomerMenu__wrapper">
+    <div
+      v-for="menuItem of menuItems"
+      :key="menuItem.key"
+      :class="{ 'active': menuItem.key === activeMenuItem }"
+      class="CustomerMenu__menu-item">
+      <a :href="menuItem.url">
+        {{ menuItem.label }}
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomerMenu',
+  data() {
+    return {
+      menuItems: [{
+        label: 'Settings',
+        key: 'settings',
+        url: '/customer/settings'
+      }, {
+        label: 'Orders',
+        key: 'orders',
+        url: '/customer/orders'
+      }, {
+        label: 'Coupons',
+        key: 'coupons',
+        url: '/customer/coupons'
+      }]
+    };
+  },
+  props: {
+    activeMenuItem: {
+      type: String,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
+.CustomerMenu {
+  &__wrapper {
+    display: flex;
+    margin-bottom: 10px;
+  }
+  &__menu-item {
+    a {
+      display: inline-block;
+      padding: 10px 20px;
+      cursor: pointer;
+      color: $black;
+      text-decoration: none;
+      border: 1px solid  $green;
+      margin-right: 5px;
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+    &.active a {
+      font-weight: bold;
+      color: $black;
+      background-color: $green;
+    }
+  }
+} 
+</style>

package/components/customer/customer_orders/customer-orders.scss

@@ -1,19 +1,33 @@
 @import "@/assets/scss/variables";
 
-.CustomerOrders {
-  &__wrapper {
-    position: relative;
-  }
-  &__table {
-    th {
-      font-weight: bold;
-    }
-    td {
-      padding: 15px;
-      a {
-        color: $purple;
+.CustomerOrders__wrapper {
+  .VueTables {
+    &__table {
+      width: 100%;
+      border-collapse: collapse;
+      th, td {
+        padding: 10px;
+        text-align: left;
+        border-bottom: 1px solid $grey_2;
+        font-size: 14px;
+        &:nth-child(-n+3) {
+          width: 220px;
+        }
+      }
+      th {
+        background-color: $grey_3;
         font-weight: bold;
       }
+      a {
+        color: $black;
+        text-decoration: none;
+        transition: color 0.2s ease;
+        
+        &:hover {
+          color: darken($black, 10%);
+          text-decoration: underline;
+        }
+      }
     }
   }
 }

package/components/customer/customer_orders/customer-orders.vue

@@ -1,40 +1,53 @@
 <template>
   <div class="CustomerOrders__wrapper">
-    <table class="lc_table bordered CustomerOrders__table">
-      <thead class="centered">
-        <tr>
-          <th>Created At</th>
-          <th>Code</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="order of orders"
-          :key="order._id">
-          <td>{{ order.createdAt | date }}</td>
-          <td>
-            <a
-              :href="`/order/${order.token}`"
-              target="_blank">
-              {{ order.code }}
-            </a>
-          </td>
-          <td>{{ order.status }}</td>
-        </tr>
-      </tbody>
-    </table>
+    <client-only>
+      <v-server-table
+        :key="uniqueKey"
+        ref="table"
+        :columns="columns"
+        :options="options">
+        <template #createdAt="{ row }">
+          {{ row.createdAt | date }}
+        </template>
+        <template #code="{ row }">
+          <a
+            :href="`/order/${row.token}`"
+            target="_blank">
+            {{ row.code }}
+          </a>
+        </template>
+        <template #tracking="{ row }">
+          <div class="CustomerOrders__trackings">
+            <customer-order-trackings :order="row" />
+          </div>
+        </template>
+        <template #reorder="{ row }">
+          <div class="CustomerOrders__reorder">
+            <customer-order-reorder :order="row" />
+          </div>
+        </template>
+      </v-server-table>
+    </client-only>
   </div>
 </template>
   
 <script>
 import { mapGetters } from 'vuex';
-import api from '@lancom/shared/assets/js/api';
+import Vue from 'vue';
+import { ServerTable } from 'vue-tables-2';
 import { date } from '@lancom/shared/assets/js/utils/filters';
+import CustomerOrderTrackings from './customer_order_trackings/customer-order-trackings';
+import CustomerOrderReorder from './customer_order_reorder/customer-order-reorder';
+import { _get } from './../../../assets/js/api/helpers';
 
+Vue.use(ServerTable);
 
 export default {
   name: 'CustomerOrders',
+  components: {
+    CustomerOrderTrackings,
+    CustomerOrderReorder
+  },
   filters: {
     date
   },
@@ -46,19 +59,37 @@ export default {
   },
   data() {
     return {
-      orders: []
+      uniqueKey: Date.now(),
+      orders: [],
+      columns: ['createdAt', 'status', 'code', 'totalGST', 'tracking', 'reorder']
     }
   },
   computed: {
-    ...mapGetters(['contacts', 'shop']),
-  },
-  mounted() {
-    this.locadCustomerOrders();
+    ...mapGetters(['shop']),
+    url() {
+      return `shop/${this.shop._id}/customer/${this.customer._id}/orders`;
+    },
+    options() {
+      return {
+        query: null,
+        perPage: 15,
+        perPageValues: [15],
+        initialPage: 1,
+        filterable: false,
+        headings: { select: '' },
+        requestFunction: params => this.request(params),
+        columnsClasses: {
+          controls: 'controls-column'
+        }
+      };
+    }
   },
   methods: {
-    async locadCustomerOrders() {
-      this.orders = await api.fetchCustomerOrders(this.customer, this.shop._id);
-    }
+    async request(params) {
+      const query = { ...params };
+      const result = await _get(this.url, query);
+      return result;
+    },
   }
 };
 </script>

package/components/customer/customer_orders/customer_order_reorder/customer-order-reorder.scss

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