@lancom/shared 0.0.382 → 0.0.384

package/components/common/postcode_select/postcode-select.vue

@@ -75,6 +75,12 @@
         {{ errors[0] }}
       </span>
     </validation-provider>
+    <div
+      v-if="allowEmpty && (value || selected)"
+      class="PostcodeSelect__clear"
+      @click="model = null">
+      <i class="icon-close-r"></i>
+    </div>
   </div>
 </template>
 
@@ -127,6 +133,10 @@ export default {
     suburb: {
       type: Object
     },
+    allowEmpty: {
+      type: Boolean,
+      default: false
+    },
     namePrefix: {
       type: String,
       default: ''
@@ -199,21 +209,21 @@ export default {
       };
     },
     async updatePostcode(option) {
-      this.selected = option;
-      if (!option.value) {
+      this.selected = (this.allowEmpty && this.selected?._id === option?._id) ? null : option;
+      if (this.selected && !this.selected?.value) {
         try {
           this.isLoading = true;
-          const suburb = await api.fetchAddressInfo(option._id, this.shop?._id);
+          const suburb = await api.fetchAddressInfo(this.selected._id, this.shop?._id);
           this.$emit('input', suburb.postcode);
           this.$emit('select', suburb);
-          option.label = this.createOptionFromSuburb(suburb).label;
+          this.selected.label = this.createOptionFromSuburb(suburb).label;
         } catch (e) {
         } finally {
           this.isLoading = false;
         }
       } else {
-        this.$emit('input', option.value);
-        this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));
+        this.$emit('input', this.selected?.value);
+        this.$emit('select', this.suburbs.find(({ _id }) => _id === this.selected?._id));
       }
     }
   }

package/components/common/pricing_discounts_table/pricing-discounts-table.vue

@@ -17,10 +17,20 @@
         }">
         <td>{{ (range.max >= 9999 || !range.max) ? `${range.min}+` : `${range.min}-${range.max}` }}</td>
         <td v-if="withGst">
-          {{ range.price | priceWithTax(pricingSettings, currency) }}
+          <span v-if="range.percent">
+            {{ range.percent }}%
+          </span>
+          <span v-else>
+            {{ range.price | priceWithTax(pricingSettings, currency) }}
+          </span>
         </td>
         <td v-else>
-          {{ range.price | price(currency) }}
+          <span v-if="range.percent">
+            {{ range.percent }}%
+          </span>
+          <span v-else>
+            {{ range.price | price(currency) }}
+          </span>
         </td>
       </tr>
     </tbody>

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;
+        }
+      }
     }
   }
 }