@lancom/shared 0.0.280 → 0.0.282

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="CartPricing__wrapper">
+    <div class="lc_h3 lc_uppercase lc_black">
+      Order summary
+    </div>
+    <div class="CartPricing__info">
+      <div class="lc_body-large lc_gray-main">
+        Product cost:
+      </div>
+      <div class="lc_body-large lc_gray-main">
+        {{ pricing.products.products.totalPriceWithoutTax | price(currency) }}
+      </div>
+    </div>
+    <div class="CartPricing__info">
+      <div class="lc_body-large lc_gray-main">
+        Print cost:
+      </div>
+      <div class="lc_body-large lc_gray-main">
+        {{ pricing.products.prints.totalPriceWithoutTax | price(currency) }}
+      </div>
+    </div>
+    <div class="CartPricing__info CartPricing__info--gray">
+      <div class="lc_body-large lc_black">
+        SUBTOTAL:
+      </div>
+      <div class="lc_body-large lc_black">
+        {{ pricing.products.totalPriceWithoutTax | price(currency) }}
+      </div>
+    </div>
+    <cart-shipments-pricing />
+    <div class="CartPricing__info">
+      <div class="lc_body-large lc_gray-main">
+        Total Delivery:
+      </div>
+      <div
+        v-if="pricing.shipping"
+        class="lc_body-large lc_gray-main">
+        {{ pricing.shipping.totalPriceWithoutTax | price(currency) }} ({{ pricing.shipping.weight }})
+      </div>
+      <div
+        v-else
+        class="lc_body-large lc_gray-main">
+        pending
+      </div>
+    </div>
+    <div class="CartPricing__info lc_gray-main">
+      <div class="lc_body-large">
+        {{ taxName }} {{ pricing.tax.percent }}:
+      </div>
+      <div class="lc_body-large lc_gray-main">
+        {{ pricing.tax.totalPrice | price(currency) }}
+      </div>
+    </div>
+    <div
+      v-if="pricing.coupon && !pricing.coupon.showCouponIsApplied"
+      class="CartPricing__info lc_gray-main">
+      <div class="lc_body-large">
+        COUPON, {{ pricing.coupon.code }}:
+      </div>
+      <div class="lc_body-large lc_gray-main">
+        {{ pricing.coupon.totalPrice | price(currency) }}
+      </div>
+    </div>
+    <div class="CartPricing__info CartPricing__info--gray">
+      <div class="lc_title-large lc_black">
+        TOTAL INC. {{ taxName }}:
+      </div>
+      <div class="lc_title-large lc_black">
+        {{ pricing.totalPrice | price(currency) }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import CartShipmentsPricing from '@lancom/shared/components/checkout/cart/cart_shipments_pricing/cart-shipments-pricing';
+
+export default {
+  name: 'CartPricing',
+  components: {
+    CartShipmentsPricing
+  },
+  filters: {
+    price
+  },
+  props: {
+    pricing: {
+      type: Object,
+      required: true
+    },
+    itemsLabel: {
+      type: String,
+      default: 'Tee'
+    }
+  },
+  computed: {
+    ...mapGetters(['currency', 'taxName']),
+    hasSuppliersWithRates() {
+      return this.suppliersWithRates.length > 0;
+    },
+    suppliersWithRates() {
+      return this.pricing?.shipping?.suppliersWithRates || [];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-pricing';
+</style>

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

@@ -77,7 +77,7 @@ export default {
   },
   mixins: [confirm],
   computed: {
-    ...mapGetters(['shop', 'country']),
+    ...mapGetters(['shop', 'country', 'currency']),
     ...mapGetters('cart', [
       'cartPricing'
     ]),
@@ -98,7 +98,7 @@ export default {
       const reset = await this.showConfirmationModal(message);
 
       if (reset) {
-        this.removeSupplier({ supplier, shop: this.shop });
+        this.removeSupplier({ supplier, shop: this.shop, currency: this.currency });
       }
     }
   }

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

@@ -14,4 +14,20 @@
       }
     }
   }
+}
+
+.CustomerAddressForm {
+  &__toggle-address {
+    margin-bottom: 10px;
+    cursor: pointer;
+    display: inline-block;
+    color: $green;
+    border-bottom: 1px dashed $green;
+  }
+  &__section {
+    padding: 15px;
+    border: 1px solid #d7d7d7;
+    margin-bottom: 10px;
+    border-radius: 4px;
+  }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="CustomerAddressForm__wrapper">
-    <div class="CustomerAddressForm__form">
+    <div class="CustomerAddressForm__form CustomerAddressForm__section">
       <div class="form-row--cols">
         <validation-provider
           v-slot="{ errors }"
@@ -124,69 +124,11 @@
           </span>
         </validation-provider>
       </div>
-      <validation-provider
-        v-slot="{ errors }"
-        tag="div"
-        name="Address line 1"
-        rules="required"
-        class="form-row">
-        <label
-          for="addressLine1"
-          class="form-label">
-          Address line 1
-        </label>
-        <input
-          id="addressLine1"
-          ref="addressLine1"
-          v-model="address.addressLine1"
-          name="addressLine1"
-          type="text"
-          class="form-field labelless"
-          placeholder="Address line 1"
-          :class="{
-            'is-danger': errors.length,
-            filled: address.addressLine1
-          }"
-          @input="validateAddress"
-          @keyup.enter="$refs.addressLine1.focus()" />
-        <span
-          v-if="errors.length"
-          class="form-help is-danger">
-          {{ errors[0] }}
-        </span>
-      </validation-provider>
-      <validation-provider
-        v-slot="{ errors }"
-        tag="div"
-        name="Address line 2"
-        class="form-row">
-        <label
-          for="addressLine2"
-          class="form-label">
-          Address line 2
-        </label>
-        <input
-          id="addressLine2"
-          ref="addressLine2"
-          v-model="address.addressLine2"
-          name="addressLine2"
-          type="text"
-          class="form-field labelless"
-          placeholder="Address line 2"
-          :class="{
-            'is-danger': errors.length,
-            filled: address.addressLine2
-          }"
-          @input="validateAddress"
-          @keyup.enter="$refs.addressLine2.focus()" />
-        <span
-          v-if="errors.length"
-          class="form-help is-danger">
-          {{ errors[0] }}
-        </span>
-      </validation-provider>
+    </div>
+    <div class="CustomerAddressForm__section">
       <div class="form-row--cols">
         <postcode-select
+          v-if="!visibleFullAddress"
           class="form-col col-half"
           :suburb="suburb"
           :labelless="true"
@@ -210,36 +152,190 @@
             disabled />
         </div>
       </div>
-      <validation-provider
-        v-if="!withoutAdditionalInfo"
-        v-slot="{ errors }"
-        tag="div"
-        name="additionalInfo"
-        class="form-row">
-        <label
-          for="additionalInfo"
-          class="form-label">
-          Additional Info
-        </label>
-        <input
-          id="additionalInfo"
-          ref="additionalInfo"
-          v-model="address.additionalInfo"
+      <div
+        @click="visibleFullAddress = !visibleFullAddress"
+        class="CustomerAddressForm__toggle-address">
+        {{ visibleFullAddress ? 'Find a Different Address' : 'Enter Address Manually' }}
+      </div>
+      <div v-if="visibleFullAddress">
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Address line 1"
+          rules="required"
+          class="form-row">
+          <label
+            for="addressLine1"
+            class="form-label">
+            Address line 1
+          </label>
+          <input
+            id="addressLine1"
+            ref="addressLine1"
+            v-model="address.addressLine1"
+            name="addressLine1"
+            type="text"
+            class="form-field labelless"
+            placeholder="Address line 1"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.addressLine1
+            }"
+            @input="validateAddress"
+            @keyup.enter="$refs.addressLine1.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Address line 2"
+          class="form-row">
+          <label
+            for="addressLine2"
+            class="form-label">
+            Address line 2
+          </label>
+          <input
+            id="addressLine2"
+            ref="addressLine2"
+            v-model="address.addressLine2"
+            name="addressLine2"
+            type="text"
+            class="form-field labelless"
+            placeholder="Address line 2"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.addressLine2
+            }"
+            @input="validateAddress"
+            @keyup.enter="$refs.addressLine2.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <validation-provider
+          v-if="!withoutAdditionalInfo"
+          v-slot="{ errors }"
+          tag="div"
           name="additionalInfo"
-          placeholder="Additional Info"
-          type="text"
-          class="form-field labelless"
-          :class="{
-            'is-danger': errors.length,
-            filled: address.additionalInfo
-          }"
-          @keyup.enter="$refs.additionalInfo.focus()" />
-        <span
-          v-if="errors.length"
-          class="form-help is-danger">
-          {{ errors[0] }}
-        </span>
-      </validation-provider>
+          class="form-row">
+          <label
+            for="additionalInfo"
+            class="form-label">
+            Additional Info
+          </label>
+          <input
+            id="additionalInfo"
+            ref="additionalInfo"
+            v-model="address.additionalInfo"
+            name="additionalInfo"
+            placeholder="Additional Info"
+            type="text"
+            class="form-field labelless"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.additionalInfo
+            }"
+            @keyup.enter="$refs.additionalInfo.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <div class="form-row--cols">
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="postcode"
+            class="form-col">
+            <label
+              for="postcode"
+              class="form-label">
+              Postcode
+            </label>
+            <input
+              id="postcode"
+              ref="postcode"
+              v-model="address.postcode"
+              name="postcode"
+              placeholder="Postcode"
+              type="text"
+              class="form-field labelless"
+              :class="{
+                'is-danger': errors.length,
+                filled: address.postcode
+              }" />
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="locality"
+            class="form-col">
+            <label
+              for="locality"
+              class="form-label">
+              Locality
+            </label>
+            <input
+              id="locality"
+              ref="locality"
+              v-model="address.city"
+              name="locality"
+              placeholder="Locality"
+              type="text"
+              class="form-field labelless"
+              :class="{
+                'is-danger': errors.length,
+                filled: address.city
+              }" />
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="state"
+            class="form-col">
+            <label
+              for="state"
+              class="form-label">
+              State
+            </label>
+            <input
+              id="state"
+              ref="state"
+              v-model="address.state"
+              name="state"
+              placeholder="State"
+              type="text"
+              class="form-field labelless"
+              :class="{
+                'is-danger': errors.length,
+                filled: address.state
+              }" />
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -253,6 +349,11 @@ export default {
   components: {
     PostcodeSelect
   },
+  data() {
+    return {
+      visibleFullAddress: false
+    };
+  },
   props: {
     address: {
       type: Object,
@@ -297,9 +398,16 @@ export default {
         this.$set(this.address, 'postcode', suburb.postcode);
         this.$set(this.address, 'city', suburb.locality);
         this.$set(this.address, 'country', suburb.country);
+        if (suburb.addressLine1) {
+          this.$set(this.address, 'addressLine1', suburb.addressLine1);
+        }
+        if (suburb.addressLine2) {
+          this.$set(this.address, 'addressLine2', suburb.addressLine2);
+        }
       }
     },
     handleSuburbChange(suburb) {
+      this.visibleFullAddress = true;
       this.setAddressSuburb(suburb);
       this.setSuburb(suburb);
       this.calculateCartPrice({ shop: this.shop, country: this.country });

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

@@ -1,5 +1,5 @@
 .OrderBillingInformation {
   &__form {
-    margin-top: 44px;
+    margin-top: 14px;
   }
 }

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

@@ -53,12 +53,18 @@
           class="OrderPaymentInformation__error mb-8">
           {{ errorMessage }}
         </div>
-        <payment-cart
+        <div
+          v-if="loadingCard"
+          class="lc_modal__spinner">
+          <spinner />
+        </div>
+        <payment-card
           v-if="cartPricing"
           ref="paymentCart"
           :amount="cartPricing.totalPrice"
-          :payment-data="order.shippingAddress">
-        </payment-cart>
+          :payment-data="order.shippingAddress"
+          @inited="initedCard">
+        </payment-card>
         <progress-steps-controls
           class="OrderPaymentInformation__controls"
           :disabled-prev="creating"
@@ -75,7 +81,7 @@
 import { mapGetters, mapMutations, mapActions } from 'vuex';
 import { generateOrderData } from '@lancom/shared/assets/js/utils/order';
 import gtm from '@lancom/shared/assets/js/utils/gtm';
-import PaymentCart from '@lancom/shared/components/common/payment/payment_card/pinpayment/pinpayment';
+import PaymentCard from '@lancom/shared/components/common/payment/payment_card/payment-card';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 import { ORDER_PAYMENT_METHOD } from '@lancom/shared/assets/js/constants/order';
 import payment from '@lancom/shared/mixins/payment';
@@ -86,7 +92,7 @@ export default {
   name: 'OrderPaymentInformation',
   components: {
     ProgressStepsControls,
-    PaymentCart,
+    PaymentCard,
     CheckedIcon
   },
   mixins: [payment, confirm],
@@ -99,6 +105,7 @@ export default {
   data() {
     return {
       creating: false,
+      loadingCard: true,
       isDepositPayment: this.order.paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT
     };
   },
@@ -116,6 +123,9 @@ export default {
   methods: {
     ...mapActions('order', ['createOrder', 'saveOrder']),
     ...mapMutations('order', ['setCard']),
+    initedCard() {
+      this.loadingCard = false;
+    },
     updatePaymentType(isDeposit) {
       this.isDepositPayment = isDeposit;
       this.errorMessage = null;

package/components/checkout/order/order.vue

@@ -80,6 +80,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters('country'),
     ...mapGetters('cart', ['isEmpty']),
     ...mapGetters('order', ['orderData']),
     ...mapGetters('auth', ['isAuthenticated', 'user']),
@@ -98,7 +99,7 @@ export default {
       company: null,
       additionalInfo: null,
       suburb: null,
-      country: null,
+      country: this.country?.name,
       state: null,
       postcode: null
     };

package/components/common/client_settings/client-settings.scss

@@ -31,6 +31,12 @@
       color: $brand_color_1;
       font-size: 25px;
     }
+    span img {
+      height: 25px;
+      position: relative;
+      top: 3px;
+      left: 2px;
+    }
   }
   &__divider {
     margin-top: 10px;

package/components/common/client_settings/client-settings.vue

@@ -5,7 +5,12 @@
       @click="isOpen = !isOpen">
       <div class="lc_regular16 ClientSettings__value">
         <span v-if="country">
-          <i class="icon-globe"></i>
+          <img
+            v-if="checkedCountry"
+            :src="checkedCountry.icon" />
+          <i
+            v-else
+            class="icon-globe"></i>
         </span>
         <!-- <span class="ClientSettings__value--divider"></span> -->
         <!-- <span v-if="currency">
@@ -97,6 +102,9 @@ export default {
       'countries',
       'currencies'
     ]),
+    checkedCountry() {
+      return this.country && this.countries.find(c => this.country._id === c._id);
+    }
   },
   mounted() {
     if (this.country) {

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

@@ -52,6 +52,7 @@ export default {
           domElement.setAttribute('src', 'https://js.stripe.com/v3/');
           domElement.onload = () => {
             this.loadedStripe = true;
+            this.$emit('inited');
           };
           domElement.onerror = () => {
             setTimeout(() => this.loadStripe(), 1000);

package/components/common/payment/payment_success/payment-success.vue

@@ -11,7 +11,7 @@
       {{
         !model.paid
           ? 'Our team will advise cost and the next steps. Please except a call or email from us after we review.'
-          : 'The charge line will appear on your card as "Wholesale Apparel & Workwear"'
+          : (messages.PAYMENT_SUCCESS || 'The charge line will appear on your card as "Wholesale Apparel & Workwear"')
       }}
     </div>
     <slot name="back-btn">
@@ -24,8 +24,15 @@
 </template>
 
 <script>
+import messages from '@/messages';
+
 export default {
   name: 'PaymentSuccess',
+  data() {
+    return {
+      messages
+    };
+  },
   props: {
     order: {
       type: Object,