@lancom/shared 0.0.383 → 0.0.384

package/assets/js/api/index.js

@@ -38,6 +38,9 @@ const api = {
   fetchCustomerOrders(customer, shop) {
     return _get(`shop/${shop}/customer/${customer._id}/orders`);
   },
+  fetchCustomerCoupons(customer, shop) {
+    return _get(`shop/${shop}/customer/${customer._id}/coupons`);
+  },
   searchProducts(shop, text, save) {
     return _get(`shop/${shop}/products/search`, { text, save });
   },

package/components/checkout/cart/cart.mixin.js

@@ -28,11 +28,15 @@ export default {
       'quantities',
       'notValidProductsQuantities',
       'notValidStockQuantities',
-      'notValidPrintsQuantities'
+      'notValidPrintsQuantities',
+      'notValidProductsPickup'
     ]),
     isNotValidQuantity() {
       return this.isNotValidProductsQuantity || this.isNotValidStockQuantity || this.isNotValidPrintsQuantity || this.isNotValidPrintsBigSizeQuantity;
     },
+    isNotValidShipping() {
+      return (this.needToPickup && this.notValidProductsPickup.length > 0) || !this.suburb; 
+    },
     isNotValidProductsQuantity() {
       return this.notValidProductsQuantities.length > 0;
     },

package/components/checkout/cart/cart.vue

@@ -20,16 +20,13 @@
             :btn-block="true"
             @onclick="removeAllSimpleProducts" />
           <div class="Cart__total-container">
+            <cart-shipping
+              class="mb-10"
+              @suburb="handleSuburbChange" />
             <cart-price-info @loaded="loadedPricing($event)" />
           </div>
           <div class="Cart__postcode-container">
-            <postcode-select
-              :suburb="suburb"
-              :labelless="true"
-              :only-postcode="onlyPostcode"
-              :placeholder="postcodeLabel"
-              :label-text="postcodeInfoLabel"
-              @select="handleSuburbChange" />
+            
           </div>
           <div class="Cart__coupon-container">
             <coupon-select
@@ -42,7 +39,7 @@
           </div>
           <div class="mt-10">
             <btn
-              :btn-disabled="isNotValidQuantity || cartPricingError || cartPricingCalculating"
+              :btn-disabled="isNotValidShipping || isNotValidQuantity || cartPricingError || cartPricingCalculating"
               :btn-block="true"
               :to="'/checkout/order'"
               btn-class="green"
@@ -73,13 +70,13 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
-import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
 import CouponSelect from '@lancom/shared/components/common/coupon_select/coupon-select';
 import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
 import CartEntity from '@lancom/shared/components/checkout/cart/cart_entity/cart-entity';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
 import CartPriceInfo from '@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info';
+import CartShipping from '@lancom/shared/components/checkout/cart/cart_shipping/cart-shipping';
 
 export default {
   name: 'CheckoutCart',
@@ -87,23 +84,14 @@ export default {
     CartEntity,
     CartPriceInfo,
     CartQuantityErrors,
-    PostcodeSelect,
-    CouponSelect
+    CouponSelect,
+    CartShipping
   },
   filters: { price },
   mixins: [CartMixin],
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
     ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
-    onlyPostcode() {
-      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'UK';
-    },
-    postcodeLabel() {
-      return this.onlyPostcode ? 'Postcode' : (this.MESSAGES.CART_POSTCODE || 'Postcode');
-    },
-    postcodeInfoLabel() {
-      return this.MESSAGES.CART_POSTCODE_INFO || 'Enter postcode to calculate shipping';
-    },
     couponLabel() {
       return (this.MESSAGES.CART_COUPON || 'Coupon code').trim();
     },

package/components/checkout/cart/cart_price_info/cart-price-info.vue

@@ -3,37 +3,14 @@
     <slot name="cart-pricing" v-bind="{ cartPricing, itemsLabel }">
       <cart-pricing
         v-if="cartPricing && cartPricing.amount"
-        :pricing="cartPricing" />
+        :pricing="cartPricing"
+        :disabled-rates="disabledRates" />
     </slot>
     <div
       v-if="cartPricingError"
       class="CartPriceInfo__error">
       {{ cartPricingError }}
     </div>
-    <div>
-      <div class="mt-20 mb-20">
-        <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="hasNotValidProductsPickup"
-        class="CartPriceInfo__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>
 
@@ -43,7 +20,7 @@ import debounce from 'lodash.debounce';
 import CartPricing from '@lancom/shared/components/checkout/cart/cart_pricing/cart-pricing';
 import { price } from '@lancom/shared/assets/js/utils/filters';
 
-const { mapActions, mapMutations } = createNamespacedHelpers('cart');
+const { mapActions } = createNamespacedHelpers('cart');
 
 export default {
   name: 'LancomCartPriceInfo',
@@ -55,11 +32,14 @@ export default {
     itemsLabel: {
       type: String,
       default: 'Tee'
+    },
+    disabledRates: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      visiblePickupError: null,
       price: null,
       calculatePriceWithDebounce: debounce(this.calculatePrice, 500)
     };
@@ -67,31 +47,10 @@ export default {
   computed: {
     ...mapGetters(['shop', 'country', 'currency', 'contacts']),
     ...mapGetters('cart', [
-      'notValidProductsPickup',
-      'needToPickup',
-      'needToPickupWithoutErrors',
       'entities',
       'cartPricing',
       'cartPricingError'
-    ]),
-    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);
-        }
-      }
-    }
+    ])
   },
   watch: {
     entities() {
@@ -103,10 +62,6 @@ export default {
     this.$emit('loaded', this.cartPricing);
   },
   methods: {
-    ...mapMutations([
-      'setSuburb',
-      'setNeedToPickup'
-    ]),
     ...mapActions([
       'calculateCartPrice'
     ]),

package/components/checkout/cart/cart_pricing/cart-pricing.scss

@@ -3,14 +3,14 @@
 .CartPricing {
   &__wrapper {
     border: 2px solid $gray;
-    padding: 28px 20px;
+    padding: 0px 20px 28px 20px;
     @media (max-width: $bp-small-max) {
-      padding: 15px 10px;
+      padding: 0px 10px 15px 10px;
     }
 
     @media (max-width: $bp-small-max) {
       .lc_h3 {
-        font-size: 19px;
+        font-size: 16px;
       }
       .lc_body-large {
         font-size: 14px;
@@ -20,6 +20,14 @@
       }
     }
   }
+  &__header {
+    padding: 10px;
+    background-color: $gray;
+    margin: 0 -20px;
+    @media (max-width: $bp-small-max) {
+      margin: 0 -10px;
+    }
+  }
   &__info {
     padding: 11px;
     display: flex;

package/components/checkout/cart/cart_pricing/cart-pricing.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="CartPricing__wrapper">
-    <div class="lc_h3 lc_uppercase lc_black">
+    <div class="lc_h4 lc_uppercase lc_black CartPricing__header">
       Order summary
     </div>
     <div class="CartPricing__info">
@@ -27,7 +27,7 @@
         {{ pricing.products.totalPriceWithoutTax | price(currency) }}
       </div>
     </div>
-    <cart-shipments-pricing />
+    <cart-shipments-pricing :disabled-rates="disabledRates" />
     <div class="CartPricing__info">
       <div class="lc_body-large lc_gray-main">
         Total Delivery:
@@ -90,6 +90,10 @@ export default {
       type: Object,
       required: true
     },
+    disabledRates: {
+      type: Boolean,
+      default: false
+    },
     itemsLabel: {
       type: String,
       default: 'Tee'

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.scss

@@ -21,6 +21,9 @@
       justify-content: space-between;
       font-weight: bold;
       font-size: 16px;
+      &--disabled {
+        pointer-events: none !important;
+      }
     }
     &-brands {
       display: flex;

package/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.vue

@@ -15,7 +15,11 @@
         class="CartShipmentsPricing__supplier">
         <div class="CartShipmentsPricing__supplier-info">
           <div class="CartShipmentsPricing__supplier-brands">
-            <div @click="removeSupplierConfirm(supplier)">
+            <div
+              :class="{
+                'CartShipmentsPricing__supplier-info--disabled': disabledRates
+              }"
+              @click="removeSupplierConfirm(supplier)">
               <i class="icon-delete"></i>
             </div>
             <div>
@@ -31,7 +35,7 @@
           :key="`rate-${i}`"
           class="CartShipmentsPricing__rate"
           :class="{
-            'CartShipmentsPricing__rate--disabled': rate.disabled
+            'CartShipmentsPricing__rate--disabled': disabledRates || rate.disabled
           }"
           @click="!rate.selected && selectRate({ supplier, rate, shop, country, currency })">
           <div class="CartShipmentsPricing__rate-info">
@@ -76,6 +80,12 @@ export default {
     }
   },
   mixins: [confirm],
+  props: {
+    disabledRates: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     ...mapGetters(['shop', 'country', 'currency']),
     ...mapGetters('cart', [

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

@@ -0,0 +1,43 @@
+@import '@/assets/scss/variables';
+
+.CartShipping {
+  &__wrapper {
+    border: 2px solid $gray;
+    padding: 0px 20px 20px 20px;
+    @media (max-width: $bp-small-max) {
+      padding: 0px 10px 15px 10px;
+    }
+    @media (max-width: $bp-small-max) {
+      .lc_h3 {
+        font-size: 16px;
+      }
+      .lc_body-large {
+        font-size: 14px;
+      }
+      .lc_title-large {
+        font-size: 16px;
+      }
+    }
+    ::v-deep {
+      .form-label {
+        font-size: 15px !important;
+      }
+    }
+    &--warning {
+      border-color: $error;
+    }
+  }
+  &__header {
+    padding: 10px;
+    background-color: $gray;
+    margin: 0 -20px;
+    @media (max-width: $bp-small-max) {
+      margin: 0 -10px;
+    }
+  }
+  &__pickup-errors {
+    color: $error;
+    font-size: 13px;
+    line-height: 17px;
+  }
+}

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/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>