@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <slot name="cart-pricing" v-bind="{ cartPricing, itemsLabel }">
+      <product-total-pricing
+        v-if="cartPricing && cartPricing.amount"
+        :pricing="cartPricing"
+        :items-label="itemsLabel" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import { mapGetters, createNamespacedHelpers } from 'vuex';
+import debounce from 'lodash.debounce';
+import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+const { mapActions } = createNamespacedHelpers('cart');
+
+export default {
+  name: 'LancomCartPriceInfo',
+  filters: { price },
+  components: {
+    ProductTotalPricing
+  },
+  props: {
+    itemsLabel: {
+      type: String,
+      default: 'Tee'
+    }
+  },
+  data() {
+    return {
+      price: null,
+      calculatePriceWithDebounce: debounce(this.calculatePrice, 500)
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', [
+      'entities',
+      'cartPricing'
+    ])
+  },
+  watch: {
+    entities() {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  mounted() {
+    this.calculatePriceWithDebounce();
+  },
+  methods: {
+    ...mapActions([
+      'calculateCartPrice'
+    ]),
+    calculatePrice() {
+      this.calculateCartPrice(this.shop);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-price-info.scss';
+</style>

package/components/checkout/cart/cart_quantity_errors/cart-quantity-errors.scss

@@ -0,0 +1,8 @@
+@import '@/assets/scss/variables';
+
+.CartQuantityErrors {
+  &__wrapper {
+    color: $error;
+    font-size: 13px;
+  }
+}

package/components/checkout/cart/cart_quantity_errors/cart-quantity-errors.vue

@@ -0,0 +1,32 @@
+<template>
+  <ul class="CartQuantityErrors__wrapper">
+    <li
+      v-for="product in notValidProductsQuantities"
+      :key="product._id">
+      Minimum <b>{{ product.name }}</b> order quantity: {{ product.minimumOrderQuantity }}
+    </li>
+    <li
+      v-for="print in notValidPrintsQuantities"
+      :key="print._id">
+      Minimum products quantity with <b>{{ print.name }}</b> print type: {{ print.minQuantity }}
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'CartQuantityErrors',
+  computed: {
+    ...mapGetters('cart', [
+      'notValidProductsQuantities',
+      'notValidPrintsQuantities'
+    ])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'cart-quantity-errors.scss';
+</style>

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

@@ -0,0 +1,17 @@
+@import "@/assets/scss/variables";
+
+.form-row--cols {
+  @media (max-width: $bp-extra-small-max) {
+    flex-direction: column;
+  }
+  .col-half {
+    @media (max-width: $bp-extra-small-max) {
+      flex-basis: 100%;
+      width: 100%;
+      margin-left: 0 !important;
+      &:nth-child(2) {
+        margin-top: 20px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,301 @@
+<template>
+  <div class="CustomerAddressForm__wrapper">
+    <div class="CustomerAddressForm__form">
+      <div class="form-row--cols">
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Full Name"
+          rules="required"
+          class="form-col col-half">
+          <label
+            for="fullName"
+            class="form-label">
+            Full Name
+          </label>
+          <input
+            id="fullName"
+            ref="fullName"
+            v-model="address.fullName"
+            placeholder="Full Name"
+            name="fullName"
+            type="text"
+            class="form-field labelless"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.fullName
+            }"
+            @keyup.enter="$refs.phone.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="company"
+          class="form-col col-half">
+          <label
+            for="company"
+            class="form-label">
+            Company Name
+          </label>
+          <input
+            id="company"
+            ref="company"
+            v-model="address.company"
+            placeholder="Company Name"
+            name="company"
+            type="text"
+            class="form-field labelless"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.company
+            }"
+            @keyup.enter="$refs.company.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+      </div>
+      <div class="form-row--cols">
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="email"
+          rules="required|email"
+          class="form-col col-half">
+          <label
+            for="email"
+            class="form-label">
+            Email
+          </label>
+          <input
+            id="email"
+            ref="email"
+            v-model="address.email"
+            placeholder="Email"
+            name="email"
+            type="email"
+            class="form-field labelless"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.email
+            }"
+            @keyup.enter="$refs.email.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Phone"
+          rules="required|phone"
+          class="form-col col-half">
+          <label
+            for="phone"
+            class="form-label">
+            Phone number
+          </label>
+          <input
+            id="phone"
+            ref="phone"
+            v-model="address.phone"
+            placeholder="Phone"
+            name="phone"
+            type="number"
+            class="form-field labelless"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.phone
+            }"
+            @keyup.enter="$refs.phone.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </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
+          }"
+          @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="address_line2"
+          class="form-label">
+          Address line 2
+        </label>
+        <input
+          id="address_line2"
+          ref="address_line2"
+          v-model="address.address_line2"
+          name="address_line2"
+          type="text"
+          class="form-field labelless"
+          placeholder="Address line 2"
+          :class="{
+            'is-danger': errors.length,
+            filled: address.address_line2
+          }"
+          @keyup.enter="$refs.address_line2.focus()" />
+        <span
+          v-if="errors.length"
+          class="form-help is-danger">
+          {{ errors[0] }}
+        </span>
+      </validation-provider>
+      <div class="form-row--cols">
+        <postcode-select
+          class="form-col col-half"
+          :suburb="suburb"
+          :labelless="true"
+          placeholder="Suburb"
+          @select="handleSuburbChange">
+        </postcode-select>
+        <div class="form-col col-half">
+          <label
+            for="country"
+            class="form-label">
+            Country
+          </label>
+          <input
+            id="country"
+            ref="country"
+            value="Only Australia"
+            name="country"
+            type="country"
+            class="form-field filled labelless"
+            disabled />
+        </div>
+      </div>
+      <validation-provider
+        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"
+          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>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+
+export default {
+  name: 'AddressForm',
+  components: {
+    PostcodeSelect
+  },
+  props: {
+    address: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', [
+      'suburb'
+    ]),
+    ...mapGetters('auth', [
+      'user'
+    ])
+  },
+  created() {
+    if (!this.address.suburb && !this.suburb &&  this.user?.suburb) {
+      this.handleSuburbChange(this.user.suburb);
+    }
+    if (!this.address.suburb) {
+      this.setAddressSuburb(this.suburb);
+    }
+  },
+  methods: {
+    ...mapMutations('cart', [
+      'setSuburb'
+    ]),
+    ...mapActions('cart', [
+      'calculateCartPrice'
+    ]),
+    setAddressSuburb(suburb) {
+      this.$set(this.address, 'suburb', suburb);
+      if (suburb) {
+        this.$set(this.address, 'state', suburb.state);
+        this.$set(this.address, 'postcode', suburb.postcode);
+        this.$set(this.address, 'city', suburb.locality);
+      }
+    },
+    handleSuburbChange(suburb) {
+      this.setAddressSuburb(suburb);
+      this.setSuburb(suburb);
+      this.calculateCartPrice(this.shop);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'address-form.scss';
+</style>

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

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

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="OrderBillingInformation__wrapper">
+    <div class="lc_h3 lc_uppercase lc_bold">
+      Delivery Address
+    </div>
+    <div class="OrderBillingInformation__form">
+      <validation-observer
+        ref="form"
+        v-slot="{ invalid }">
+        <div class="OrderBillingInformation__content">
+          <address-form :address="order.billingAddress" />
+          <!-- <div class="form-row mt-10">
+            <label class="form-label">
+              <checkbox v-model="copyToShippingAddress" />
+              <span class="lc_regular14 lc__grey1">
+                Ship to this address
+              </span>
+            </label>
+          </div> -->
+        </div>
+        <progress-steps-controls
+          :disabled-next="invalid || !order.billingAddress.postcode"
+          @prev="$emit('prev')"
+          @next="submit" />
+      </validation-observer>
+    </div>
+  </div>
+</template>
+
+<script>
+import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
+import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
+import { ORDER_STEPS } from '@lancom/shared/assets/js/constants/order';
+
+export default {
+  name: 'OrderBillingInformation',
+  components: {
+    AddressForm,
+    ProgressStepsControls
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      copyToShippingAddress: true
+    };
+  },
+  methods: {
+    submit() {
+      if (this.copyToShippingAddress) {
+        this.order.shippingAddress = { ...this.order.billingAddress };
+        this.$emit('next');
+        // this.$emit('step', ORDER_STEPS.SHIPPING_METHOD);
+      } else {
+        this.$emit('next');
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-billing-information.scss';
+</style>

package/components/checkout/order/order-checkout-method/order-checkout-method.scss

@@ -0,0 +1,9 @@
+.OrderCheckoutMethod {
+  &__controls {
+    display: flex;
+    width: 100%;
+    > div {
+      flex-grow: 1;
+    }
+  }
+}

package/components/checkout/order/order-checkout-method/order-checkout-method.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="OrderCheckoutMethod__wrapper">
+    <div class="row">
+      <div class="col-12">
+        <div class="OrderCheckoutMethod__controls">
+          <div>
+            <btn
+              :btn-class="isRegister ? 'white' : 'green'"
+              btn-label="LOG IN"
+              :btn-block="true"
+              @onclick="isRegister = false" />
+          </div>
+          <div>
+            <btn
+              :btn-class="isRegister ? 'green' : 'white'"
+              btn-label="REGISTER"
+              :btn-block="true"
+              @onclick="isRegister = true" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <customer-form
+          v-if="isRegister"
+          :customer="customer"
+          @save="createdCustomer($event)" />
+        <signin-form
+          v-else
+          @signin="signin()" />
+      </div>
+    </div>
+    <progress-steps-controls
+      :show-prev="false"
+      label-next="Checkout as Guest"
+      @next="$emit('next')" />
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
+import SigninForm from '@lancom/shared/components/customer/signin_form/signin-form';
+import CustomerForm from '@lancom/shared/components/customer/customer_form/customer-form';
+
+export default {
+  name: 'OrderCheckoutMethod',
+  components: {
+    ProgressStepsControls,
+    SigninForm,
+    CustomerForm
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isRegister: false,
+      customer: {
+        firstName: null,
+        lastName: null,
+        email: null,
+        phone: null,
+        password: null
+      }
+    };
+  },
+  computed: {
+    ...mapGetters('auth', ['user'])
+  },
+  methods: {
+    ...mapActions('auth', ['update_user']),
+    createdCustomer({ customer: user, token }) {
+      this.update_user({ user, token });
+
+      this.updateorderData(user);
+
+      this.$emit('next');
+    },
+    signin() {
+      this.updateorderData(this.user);
+      this.$emit('next');
+    },
+    updateorderData(user) {
+      if (user) {
+        this.order.billingAddress.fullName = this.order.billingAddress.fullName || `${user.firstName} ${user.lastName}`;
+        this.order.billingAddress.phone = this.order.billingAddress.phone || user.phone;
+        this.order.billingAddress.email =  this.order.billingAddress.email || user.email;
+        this.order.billingAddress.company =  this.order.billingAddress.company || user.company;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-checkout-method.scss';
+</style>

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

@@ -0,0 +1,44 @@
+@import "@/assets/scss/variables";
+
+.OrderPaymentInformation {
+  &__wrapper {
+    min-height: 300px;
+  }
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+  }
+  &__form {
+    margin-top: 37px;
+    display: flex;
+  }
+  &__checkbox {
+    display: flex;
+    margin-right: 30px;
+    align-items: center;
+    cursor: pointer;
+  }
+  &__checkbox-label {
+    position: relative;
+    text-transform: capitalize;
+    margin-left: 5px;
+  }
+  &__controls {
+    margin-top: 42px !important;
+  }
+  &__direct-deposit-info {
+    ::v-deep {
+      p {
+        margin-bottom: 5px;
+        line-height: 25px;
+        strong {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}