@lancom/shared 0.0.383 → 0.0.385

package/components/checkout/cart/cart_shipping/cart-shipping.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="CartShipping__wrapper"
+    :class="{
+      'CartShipping__wrapper--warning': (needToPickup && hasNotValidProductsPickup) || !suburb
+    }">
+    <div class="lc_h4 lc_uppercase lc_black CartShipping__header">
+      Order Shipping
+    </div>
+    <div class="mt-10">
+      <postcode-select
+        :suburb="suburb"
+        :labelless="true"
+        :only-postcode="onlyPostcode"
+        :placeholder="postcodeLabel"
+        :label-text="postcodeInfoLabel"
+        :allow-empty="true"
+        @select="$emit('suburb', $event)" />
+      <div class="mt-10 mb-10">
+        <checkbox
+          v-model="wantsToPickup"
+          :dark="true"
+          @change="calculatePrice()">
+          <div class="ml-10 CartPriceInfo__pickup-label">
+            {{ contacts.warehousePickupInfo ? `Pickup from ${contacts.warehousePickupInfo}` : 'Wants to pickup' }}
+          </div>
+        </checkbox>
+      </div>
+      <div
+        v-if="visiblePickupError && hasNotValidProductsPickup"
+        class="CartShipping__pickup-errors">
+        <div>Not all items in cart are available for pickup. Some items are available for delivery only</div>
+        <ul>
+          <li
+            v-for="product in notValidProductsPickup"
+            :key="product._id">
+            <b>{{ product.name }}. {{ product.size ? product.size.shortName : '' }}</b> order quantity: {{ product.amount }}. Available {{ product.warehouseQuantityStock }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, createNamespacedHelpers } from 'vuex';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+const { mapActions, mapMutations } = createNamespacedHelpers('cart');
+
+export default {
+  name: 'LancomCartShipping',
+  filters: { price },
+  components: {
+    PostcodeSelect
+  },
+  props: {
+    itemsLabel: {
+      type: String,
+      default: 'Tee'
+    }
+  },
+  data() {
+    return {
+      visiblePickupError: null,
+      price: null
+    };
+  },
+  computed: {
+    ...mapGetters(['shop', 'SETTINGS', 'MESSAGES', 'country', 'currency', 'contacts']),
+    ...mapGetters('cart', [
+      'suburb',
+      'notValidProductsPickup',
+      'needToPickup',
+      'needToPickupWithoutErrors',
+      'cartPricing',
+      'cartPricingError'
+    ]),
+    postcodeInfoLabel() {
+      return this.MESSAGES.CART_POSTCODE_INFO || 'Enter postcode to calculate shipping';
+    },
+    onlyPostcode() {
+      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'UK';
+    },
+    postcodeLabel() {
+      return this.onlyPostcode ? 'Postcode' : (this.MESSAGES.CART_POSTCODE || 'Postcode');
+    },
+    hasNotValidProductsPickup() {
+      return this.notValidProductsPickup.length > 0;
+    },
+    wantsToPickup: {
+      get() {
+        return this.needToPickup;
+      },
+      set(needToPickup) {
+        if (needToPickup && this.hasNotValidProductsPickup) {
+          this.visiblePickupError = true;
+        } else {
+          // if (needToPickup) {
+          //   this.setSuburb(null);
+          // }
+          this.setNeedToPickup(needToPickup);
+          this.visiblePickupError = false;
+        }
+      }
+    }
+  },
+  methods: {
+    ...mapMutations([
+      'setSuburb',
+      'setNeedToPickup'
+    ]),
+    ...mapActions([
+      'calculateCartPrice'
+    ]),
+    async calculatePrice() {
+      await this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-shipping.scss';
+</style>

package/components/checkout/order/address-form/address-form.vue

@@ -160,6 +160,7 @@
         <postcode-select
           class="form-col col-half"
           :suburb="address.suburb"
+          :disabled="disabledPostcode"
           :labelless="true"
           :required="true"
           :name-prefix="namePrefix"
@@ -244,6 +245,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disabledPostcode: {
+      type: Boolean,
+      default: false
+    },
     namePrefix: {
       type: String,
       default: ''

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

@@ -11,6 +11,7 @@
           <address-form
             :address="order.shippingAddress"
             :only-contact-info="needToPickupWithoutErrors"
+            :disabled-postcode="true"
             :without-additional-info="true" />
           <div
             v-if="!needToPickupWithoutErrors"

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

@@ -34,6 +34,14 @@
               Google Pay
             </span>
           </label>
+          <label
+            class="form-label OrderPaymentInformation__checkbox"
+            @click="updatePaymentType('apple')">
+            <checked-icon :checked="paymentMethod === 'apple'" />
+            <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+              Apple Pay
+            </span>
+          </label>
         </div>
         <div
           v-if="paymentMethod === 'deposit'"
@@ -71,6 +79,7 @@
             ref="paymentCart"
             :key="paymentMethod"
             :google="paymentMethod === 'google'"
+            :apple="paymentMethod === 'apple'"
             :amount="cartPricing.totalPrice"
             :order="orderData"
             @inited="initedCard">

package/components/common/number_input/number-input.scss

@@ -0,0 +1,69 @@
+@import "@/assets/scss/variables";
+
+.NumberInput {
+  &__wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    &--double {
+      width: 200px;
+      input {
+        font-size: 25px !important;
+      }
+    }
+    &.side-controls {
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+    }
+  }
+  &__field {
+    position: relative;
+    width: 100%;
+    input {
+      text-align: center !important;
+      color: $black;
+      transition: height .2s ease-in-out;
+      &.invalidate {
+        opacity: .3;
+      }
+      &.empty {
+        color: $grey_2;
+      }
+    }
+  }
+  &__side-control {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 3px;
+    bottom: 3px;
+    width: 20px;
+    background: $grey_2;
+    border-radius: 3px;
+    padding-top: 2px;
+    cursor: pointer;
+    &--left {
+      left: 3px;
+    }
+    &--right {
+      padding-top: 2px;
+      right: 3px;
+    }
+    &--double {
+      width: 40px;
+      padding-top: 5px;
+      font-size: 20px;
+    }
+    &.disabled {
+      display: none;
+    }
+  }
+}

package/components/common/number_input/number-input.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="NumberInput__wrapper"
+    :class="{
+      'side-controls': sideControls,
+      'NumberInput__wrapper--double': doubleSize
+    }">
+    <div class="NumberInput__field">
+      <div
+        class="NumberInput__side-control NumberInput__side-control--left"
+        :class="{ disabled, 'NumberInput__side-control--double': doubleSize }"
+        @click="model -= step">
+        <span> - </span>
+      </div>
+      <input
+        v-model.number="model"
+        :id="id"
+        :min="min"
+        :max="max"
+        :name="name || uniqueCode"
+        placeholder="0"
+        type="number"
+        class="form-control"
+        :class="{ invalidate: disabled, empty: !model }"
+        :disabled="disabled"
+        @change="$emit('change', model)" />
+      <div
+        class="NumberInput__side-control NumberInput__side-control--right"
+        :class="{ disabled, 'NumberInput__side-control--double': doubleSize }"
+        @click="model += step">
+        <span> + </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
+
+export default {
+  name: 'NumberInput',
+  data() {
+    return {
+      uniqueCode: generateGUID()
+    };
+  },
+  props: {
+    id: {
+      type: String
+    },
+    value: {
+      type: Number
+    },
+    name: {
+      type: String
+    },
+    min: {
+      type: Number
+    },
+    max: {
+      type: Number
+    },
+    sideControls: {
+      type: Boolean,
+      default: true
+    },
+    doubleSize: {
+      type: Boolean,
+      default: false
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        value = typeof this.min === 'number' ? Math.max(this.min, +value) : value;
+        value = typeof this.max === 'number' ? Math.min(this.max, +value) : value;
+        this.$emit('input', +value);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'number-input.scss';
+</style>

package/components/common/payment/payment_card/applepay/applepay.scss

@@ -0,0 +1,8 @@
+@import "@/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.Payment {
+  &__wrapper {
+    font-weight: bold;
+  }
+}

package/components/common/payment/payment_card/applepay/applepay.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="Payment__wrapper">
+    Temporarily Not Available
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Applepay'
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import 'applepay.scss';
+</style>

package/components/common/payment/payment_card/payment-card.vue

@@ -17,6 +17,7 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'PaymentCard',
   components: {
+    Applepay: () => import('./applepay/applepay'),
     Googlepay: () => import('./googlepay/googlepay'),
     Pinpayment: () => import('./pinpayment/pinpayment'),
     Stripe: () => import('./stripe_card/stripe-card'),
@@ -32,6 +33,9 @@ export default {
     },
     google: {
       type: Boolean
+    },
+    apple: {
+      type: Boolean
     }
   },
   computed: {
@@ -40,6 +44,9 @@ export default {
       if (this.google) {
         return 'googlepay';
       }
+      if (this.apple) {
+        return 'applepay';
+      }
       return this.payment?.type || 'stripe-payment';
     }
   },

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

@@ -5,4 +5,10 @@
     font-weight: bold;
     background-color: $green_lighter;
   }
+  &__clear {
+    position: absolute;
+    cursor: pointer;
+    top: 25px;
+    left: -5px;
+  }
 }

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";