@lancom/shared 0.0.382 → 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

@@ -8,6 +8,7 @@ export default {
   ],
   data() {
     return {
+      visiblePickupError: false,
       calculateCartPriceWithDebounce: debounce(this.calculateCartPrice, 300)
     };
   },
@@ -16,6 +17,7 @@ export default {
     ...mapGetters('auth', ['user']),
     ...mapGetters('cart', [
       'needToPickup',
+      'needToPickupWithoutErrors',
       'entities',
       'cartPricing',
       'simpleProducts',
@@ -26,22 +28,15 @@ export default {
       'quantities',
       'notValidProductsQuantities',
       'notValidStockQuantities',
-      'notValidPrintsQuantities'
+      'notValidPrintsQuantities',
+      'notValidProductsPickup'
     ]),
-    wantsToPickup: {
-      get() {
-        return this.needToPickup;
-      },
-      set(needToPickup) {
-        if (needToPickup) {
-          this.setSuburb(null);
-        }
-        this.setNeedToPickup(needToPickup);
-      }
-    },
     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;
     },
@@ -81,7 +76,7 @@ export default {
     },
     handleSuburbChange(suburb) {
       this.setSuburb(suburb);
-      this.setNeedToPickup(false);
+      // this.setNeedToPickup(false);
       this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
     },
     handleCouponChange(coupon) {

package/components/checkout/cart/cart.vue

@@ -20,36 +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>
-            <div class="mt-20 mb-20">
-              <checkbox
-                v-model="wantsToPickup"
-                :disabled="hasNotValidProductsPickup"
-                :dark="true"
-                @change="recalculatePricing()">
-                <div class="ml-10 Cart__pickup-label">Wants to pickup</div>
-              </checkbox>
-            </div>
-            <div v-if="hasNotValidProductsPickup">
-              <ul class="Cart__pickup-errors">
-                <li
-                  v-for="product in notValidProductsPickup"
-                  :key="product._id">
-                  Not Available for pickup <b>{{ product.name }}. {{ product.size ? product.size.shortName : '' }}</b> order quantity: {{ product.amount }}. Available {{ product.warehouseQuantityStock }}
-                </li>
-              </ul>
-            </div>
+            
           </div>
           <div class="Cart__coupon-container">
             <coupon-select
@@ -62,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"
@@ -93,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',
@@ -107,26 +84,14 @@ export default {
     CartEntity,
     CartPriceInfo,
     CartQuantityErrors,
-    PostcodeSelect,
-    CouponSelect
+    CouponSelect,
+    CartShipping
   },
   filters: { price },
   mixins: [CartMixin],
   computed: {
     ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
-    ...mapGetters('cart', ['isEmpty', 'notValidProductsPickup','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
-    hasNotValidProductsPickup() {
-      return this.notValidProductsPickup.length > 0;
-    },
-    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';
-    },
+    ...mapGetters('cart', ['isEmpty','cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
     couponLabel() {
       return (this.MESSAGES.CART_COUPON || 'Coupon code').trim();
     },

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

@@ -7,4 +7,15 @@
     color: $white;
     background-color: $error;
   }
+  &__pickup-label {
+    font-weight: 800;
+    font-size: 16px;
+    line-height: 22px;
+    text-transform: uppercase;
+    color: #303030;
+  }
+  &__pickup-errors {
+    color: $error;
+    font-size: 13px;
+  }
 }

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

@@ -3,7 +3,8 @@
     <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"
@@ -31,6 +32,10 @@ export default {
     itemsLabel: {
       type: String,
       default: 'Tee'
+    },
+    disabledRates: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -40,7 +45,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters(['shop', 'country', 'currency', 'contacts']),
     ...mapGetters('cart', [
       'entities',
       'cartPricing',

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,9 +35,9 @@
           :key="`rate-${i}`"
           class="CartShipmentsPricing__rate"
           :class="{
-            'CartShipmentsPricing__rate--disabled': rate.disabled
+            'CartShipmentsPricing__rate--disabled': disabledRates || rate.disabled
           }"
-          @click="selectRate({ supplier, rate, shop, country, currency })">
+          @click="!rate.selected && selectRate({ supplier, rate, shop, country, currency })">
           <div class="CartShipmentsPricing__rate-info">
             <div class="CartShipmentsPricing__rate-icon">
               <checked-icon :checked="rate.selected" />
@@ -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

@@ -1,7 +1,7 @@
 <template>
   <div class="OrderBillingInformation__wrapper">
     <div class="lc_h3 lc_uppercase lc_bold">
-      {{ needToPickup ? 'Contact Info' : 'Delivery Address' }}
+      {{ needToPickupWithoutErrors ? 'Contact Info' : 'Delivery Address' }}
     </div>
     <div class="OrderBillingInformation__form">
       <validation-observer
@@ -10,10 +10,11 @@
         <div class="OrderBillingInformation__content">
           <address-form
             :address="order.shippingAddress"
-            :only-contact-info="needToPickup"
+            :only-contact-info="needToPickupWithoutErrors"
+            :disabled-postcode="true"
             :without-additional-info="true" />
           <div
-            v-if="!needToPickup"
+            v-if="!needToPickupWithoutErrors"
             class="mt-20 mb-20">
             <checkbox
               v-model="copyToBillingAddress"
@@ -78,7 +79,7 @@ export default {
     ...mapGetters(['currency'])
   },
   mounted() {
-    if (this.needToPickup) {
+    if (this.needToPickupWithoutErrors) {
       this.copyToBillingAddress = false;
     }
   },
@@ -86,7 +87,7 @@ export default {
     async submit() {
       this.isSubmit = true;
 
-      const isValid = await this.$refs.form.validate() && (!!this.order.shippingAddress.postcode || this.needToPickup);
+      const isValid = await this.$refs.form.validate() && (!!this.order.shippingAddress.postcode || this.needToPickupWithoutErrors);
       if (!isValid) {
         return;
       }

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