@lancom/shared 0.0.62 → 0.0.66

package/components/checkout/order/order.vue

@@ -0,0 +1,145 @@
+<template>
+  <div
+    v-if="order"
+    class="CheckoutCartPage__wrapper">
+    <progress-steps
+      v-if="!isEmpty || orderData"
+      ref="progressSteps"
+      :steps="steps"
+      :visible-current-step="false"
+      :hidden-done-step-number="true"
+      :step-offset="1"
+      :hidden-steps="hiddenSteps">
+      <div slot-scope="{ currentStep }">
+        <transition>
+          <component
+            :is="stepComponents[currentStep]"
+            ref="steps"
+            :order="order"
+            :group-by-color="groupByColor"
+            @step="goToStep"
+            @next="goToNextStep"
+            @prev="goToPrevStep"></component>
+        </transition>
+      </div>
+      <template slot="after-steps">
+        <slot name="after-steps"></slot>
+      </template>
+    </progress-steps>
+    <div
+      v-else
+      class="lc_caption lc_text-centered Cart__no-entities">
+      Your cart is empty.
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapGetters } from 'vuex';
+import ProgressSteps from '@lancom/shared/components/common/progress_steps/progress-steps';
+import { ORDER_STEPS, ORDER_STEPS_LIST } from '@lancom/shared/assets/js/constants/order';
+import OrderCheckoutMethod from './order-checkout-method/order-checkout-method';
+import OrderBillingInformation from './order-billing-information/order-billing-information';
+import OrderPaymentInformation from './order-payment-information/order-payment-information';
+import OrderReview from './order-review/order-review';
+import OrderSuccess from './order-success/order-success';
+import OrderShippingInformation from './order-shipping-information/order-shipping-information';
+import OrderShippingMethod from './order-shipping-method/order-shipping-method';
+
+export default {
+  name: 'CheckoutOrderPage',
+  components: {
+    ProgressSteps,
+    OrderCheckoutMethod,
+    OrderBillingInformation,
+    OrderPaymentInformation,
+    OrderReview,
+    OrderSuccess,
+    OrderShippingInformation,
+    OrderShippingMethod
+  },
+  props: {
+    groupByColor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      stepComponents: {
+        [ORDER_STEPS.CHECKOUT_METHOD]: 'order-checkout-method',
+        [ORDER_STEPS.BILLING_INFORMATION]: 'order-billing-information',
+        [ORDER_STEPS.SHIPPING_INFORMATION]: 'order-shipping-information',
+        [ORDER_STEPS.SHIPPING_METHOD]: 'order-shipping-method',
+        [ORDER_STEPS.PAYMENT_INFORMATION]: 'order-payment-information',
+        [ORDER_STEPS.ORDER_REVIEW]: 'order-review',
+        [ORDER_STEPS.SUCCESS]: 'order-success'
+      },
+      hiddenSteps: [ORDER_STEPS.SUCCESS],
+      order: null
+    };
+  },
+  computed: {
+    ...mapGetters('cart', ['isEmpty']),
+    ...mapGetters('order', ['orderData']),
+    ...mapGetters('auth', ['isAuthenticated', 'user']),
+    steps() {
+      return this.isAuthenticated ? ORDER_STEPS_LIST.filter(s => s !== ORDER_STEPS.CHECKOUT_METHOD) : ORDER_STEPS_LIST;
+    }
+  },
+  mounted() {
+    const address = {
+      city: null,
+      phone: null,
+      addressLine1: null,
+      addressLine2: null,
+      email: null,
+      fullName: null,
+      company: null,
+      additionalInfo: null,
+      suburb: null,
+      country: 'Australia',
+      state: null,
+      postcode: null
+    };
+    this.order = {
+      paymentMethod: 'card',
+      billingAddress: {
+        ...address,
+        ...(this.user ? {
+          fullName: `${this.user.firstName} ${this.user.lastName}`,
+          phone: this.user.phone,
+          email: this.user.email,
+          company: this.user.company
+        } : {})
+      },
+      shippingAddress: {
+        ...address
+      }
+    };
+    this.setOrderData(null);
+  },
+  methods: {
+    ...mapMutations('order', ['setOrderData']),
+    goToNextStep() {
+      if (this.$refs.progressSteps) {
+        this.$refs.progressSteps.goToNextStep();
+      }
+    },
+    goToPrevStep() {
+      if (this.$refs.progressSteps) {
+        this.$refs.progressSteps.goToPrevStep();
+      }
+    },
+    goToStep(step) {
+      if (this.$refs.progressSteps) {
+        this.$refs.progressSteps.goToStep(step);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order.scss';
+</style>

package/components/checkout/payment/payment-cart/payment-cart.scss

@@ -0,0 +1,53 @@
+@import "@/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.Payment {
+  &__wrapper {
+    .pin-form-field {
+      @extend .form-field;
+      @extend .labelless;
+      border-radius: 0px;
+      background-color: #F4F4F4;
+    }
+  }
+  &__field-container {
+    width: 100%;
+  }
+  &__message {
+    padding: 50px 140px;
+  }
+  &__content {
+    position: relative;
+    min-height: 100px;
+  }
+  &__fileds-spinner {
+    background-color: white;
+  }
+  &__terms {
+    margin-top: 20px;
+  }
+  &__label-with-checkbox {
+    display: flex !important;
+    align-items: center;
+    margin-bottom: 3px !important;
+    a {
+      color: $green;
+    }
+  }
+}
+
+.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/payment/payment-cart/payment-cart.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="Payment__wrapper">
+    <div v-if="processing || loading">
+      <spinner />
+    </div>
+    <div
+      :style="{
+        opacity: loading ? 0 : 1
+      }">
+      <div
+        v-if="amount"
+        class="form-row">
+        <label
+          for="payment-amount"
+          class="form-label">
+          Amount to Pay
+        </label>
+        <input
+          id="payment-amount"
+          :value="`${amount} USD`"
+          name="payment-amount"
+          placeholder="payment-amount"
+          disabled
+          type="text"
+          class="form-field labelless" />
+      </div>
+      <div class="form-row--cols">
+        <div class="form-col col-half">
+          <label class="form-label">
+            Full name
+          </label>
+          <div
+            id="name"
+            class="Payment__field-container">
+          </div>
+          <div
+            id="errors_for_name"
+            class="error_message">
+          </div>
+        </div>
+        <div class="form-col col-half">
+          <label class="form-label">
+            Card number
+          </label>
+          <div
+            id="number"
+            class="Payment__field-container">
+          </div>
+          <div
+            id="errors_for_number"
+            class="error_message">
+          </div>
+        </div>
+      </div>
+      <div class="form-row--cols">
+        <div class="form-col col-half">
+          <label class="form-label">
+            month / Year
+          </label>
+          <div
+            id="expiry"
+            class="Payment__field-container">
+          </div>
+          <div
+            id="errors_for_expiry"
+            class="error_message">
+          </div>
+        </div>
+        <div class="form-col col-half">
+          <label class="form-label">
+            CVC
+          </label>
+          <div
+            id="cvc"
+            class="Payment__field-container">
+          </div>
+          <div
+            id="errors_for_cvc"
+            class="error_message">
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot v-if="!loading" name="controls" v-bind="{ processing }"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Payment',
+  props: {
+    paymentData: {
+      type: Object,
+      required: true
+    },
+    amount: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      loading: false,
+      fields: null
+    };
+  },
+  mounted() {
+    this.initHostedPayment();
+  },
+  methods: {
+    initHostedPayment() {
+      this.loading = true;
+      this.fields = window.HostedFields.create({
+        sandbox: process.env.IS_PROD !== 'true',
+        styles: {
+          input: {
+            'font-size': '16px',
+            'font-family': 'helvetica, tahoma, calibri, sans-serif',
+            color: '#3a3a3a',
+            'background-color': '#F4F4F4',
+            'border-radius': '0px'
+          },
+          '.hosted-fields-invalid:not(:focus)': {
+            color: 'red'
+          },
+          'input::placeholder': {
+            color: '#B0B0BA'
+          }
+        },
+        fields: {
+          name: {
+            selector: '#name',
+            placeholder: 'Full Name'
+          },
+          number: {
+            selector: '#number',
+            placeholder: 'Card Number',
+            type: 'number'
+          },
+          cvc: {
+            selector: '#cvc',
+            placeholder: 'CVC',
+            type: 'number'
+          },
+          expiry: {
+            selector: '#expiry',
+            placeholder: 'MM/YY'
+          }
+        }
+      });
+
+      this.fields.on('ready', () => {
+        this.loading = false;
+      });
+    },
+    parseErrorMessage(err) {
+      const defaultMessage = 'Payment error';
+      const errorMessage = err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description || defaultMessage);
+      return errorMessage;
+    },
+    tokenize() {
+      this.processing = true;
+      return new Promise((resolve, reject) => {
+        this.fields.tokenize(
+          {
+            publishable_api_key: process.env.PINPAYMENT_PUBLISHABLE_API_KEY,
+            address_line1: this.paymentData.addressLine1,
+            address_line2: this.paymentData.addressLine2,
+            address_city: this.paymentData.city,
+            address_postcode: this.paymentData.postcode,
+            address_state: this.paymentData.state,
+            address_country: this.paymentData.country
+          },
+          (err, response) => {
+            if (!this.processing) {
+              return reject(new Error('Payment not processing'));
+            }
+
+            if (err) {
+              reject(this.parseErrorMessage(err));
+            } else {
+              resolve(response);
+            }
+
+            this.processing = false;
+          }
+        );
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'payment-cart.scss';
+</style>

package/components/checkout/payment/payment_failed/payment-failed.scss

@@ -0,0 +1,19 @@
+@import "@/assets/scss/variables";
+
+.PaymentFailed {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+  }
+  &__icon {
+    width: 70px;
+    height: 70px;
+    background-image: url(../../../../static/icons/error.svg);
+    margin-bottom: 30px;
+  }
+  &__btn {
+    margin-top: 20px;
+  }
+}

package/components/checkout/payment/payment_failed/payment-failed.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="PaymentFailed__wrapper">
+    <div class="PaymentFailed__icon"></div>
+    <div class="lc_semibold22">
+      Payment Failed!
+    </div>
+    <div class="lc_regular18 lc_grey1 mt-5">
+      Our bank reported:
+      <span class="PaymentFailed__message">{{ message }}</span>
+    </div>
+    <btn
+      btn-class="green PaymentFailed__btn"
+      btn-label="Try Again"
+      @onclick="$emit('again')" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PaymentFailed',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    orderLink() {
+      return `/order/${this.order.token}`;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'payment-failed.scss';
+</style>

package/components/checkout/payment/payment_success/payment-success.scss

@@ -0,0 +1,19 @@
+@import "@/assets/scss/variables";
+
+.PaymentSuccess {
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+  }
+  &__icon {
+    width: 70px;
+    height: 70px;
+    background-image: url(../../../../static/icons/success.svg);
+    margin-bottom: 30px;
+  }
+  &__btn {
+    margin-top: 20px;
+  }
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="PaymentSuccess__wrapper">
+    <div class="PaymentSuccess__icon"></div>
+    <div class="lc_semibold22">
+      {{ !order.paid ? 'Order Received' : 'Order paid successfully' }}!
+    </div>
+    <div class="lc_regular18 lc_grey1 mt-5">
+      Order {{ order.code }}
+    </div>
+    <div class="lc_regular16 lc_grey1 mt-5">
+      {{
+        !order.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"'
+      }}
+    </div>
+    <slot name="back-btn">
+      <btn
+        btn-class="green PaymentSuccess__btn"
+        btn-label="Back to editor"
+        @onclick="$emit('close')" />
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PaymentSuccess',
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'payment-success.scss';
+</style>

package/components/common/breadcrumbs/breadcrumbs.scss

@@ -0,0 +1,20 @@
+@import '@/assets/scss/variables';
+
+.Breadcrumbs {
+  &__wrapper {
+    display: flex;
+    padding: 15px 0;
+    font-size: 13px;
+    color: $gray_main;
+    a {
+      color: $gray_main;
+      text-decoration: none;
+    }
+  }
+  &__item-wrapper {
+    margin-right: 8px;
+  }
+  &__divider {
+    margin-left: 5px;
+  }
+}

package/components/common/breadcrumbs/breadcrumbs.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="hasBreadcrumbs"
+    class="Breadcrumbs__wrapper">
+    <div class="Breadcrumbs__item-wrapper">
+      <nuxt-link
+        class="Breadcrumbs__item"
+        to="/">
+        Home
+      </nuxt-link>
+      <span class="Breadcrumbs__divider">
+        {{ divider }}
+      </span>
+    </div>
+    <div
+      v-for="(item, index) in items"
+      :key="index"
+      class="Breadcrumbs__item-wrapper">
+      <nuxt-link
+        v-if="item.to"
+        class="Breadcrumbs__item"
+        :to="item.to">
+        {{ item.text }}
+      </nuxt-link>
+      <span
+        v-else
+        class="Breadcrumbs__item">
+        {{ item.text }}
+      </span>
+      <span
+        v-if="index < (itemsCount - 1)"
+        class="Breadcrumbs__divider">
+        {{ divider }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Breadcrumbs',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    divider: {
+      type: String,
+      default: '/'
+    }
+  },
+  computed: {
+    itemsCount() {
+      return this.items.length;
+    },
+    hasBreadcrumbs() {
+      return this.items?.length > 0;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+  @import 'breadcrumbs.scss';
+</style>

package/components/common/breakpoint.vue

@@ -0,0 +1,51 @@
+<script>
+import Breakpoints from '@lancom/shared/assets/js/utils/breakpoints';
+
+const nameOptions = ['xs', 'sm', 'md', 'lg', 'xl'];
+const modeOptions = ['up', 'down', 'only'];
+
+export default {
+  name: 'Breakpoint',
+  props: {
+    name: {
+      type: String,
+      required: true,
+      validator: value => nameOptions.includes(value)
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'only',
+      validator: value => modeOptions.includes(value)
+    }
+  },
+  data() {
+    return {
+      breakpoints: {}
+    };
+  },
+  mounted() {
+    this.breakpoints = new Breakpoints();
+  },
+  render() {
+    if (process.client) {
+      const targetIndex = nameOptions.indexOf(this.name);
+      const currentIndex = nameOptions.indexOf(this.breakpoints.is);
+
+      let valid = false;
+      if (this.mode === 'up') {
+        valid = currentIndex >= targetIndex;
+      } else if (this.mode === 'down') {
+        valid = currentIndex <= targetIndex;
+      } else {
+        valid = currentIndex === targetIndex;
+      }
+      if (valid) {
+        return this.$slots.default;
+      }
+      return null;
+    }
+    return null;
+  }
+};
+</script>