@lancom/shared 0.0.62 → 0.0.66

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="OrderPaymentInformation__wrapper">
+    <div class="lc_h3 lc_uppercase lc_bold">
+      Payment info
+    </div>
+    <div>
+      <div v-if="creating">
+        <spinner />
+      </div>
+      <div class="form-row OrderPaymentInformation__form">
+        <label
+          class="form-label OrderPaymentInformation__checkbox"
+          @click="isDepositPayment = false">
+          <checked-icon :checked="!isDepositPayment" />
+          <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+            Credit Card
+          </span>
+        </label>
+        <label
+          class="form-label OrderPaymentInformation__checkbox"
+          @click="isDepositPayment = true">
+          <checked-icon :checked="isDepositPayment" />
+          <span class="lc_regular12 lc__grey1 OrderPaymentInformation__checkbox-label">
+            Direct Deposit
+          </span>
+        </label>
+      </div>
+      <div
+        v-if="isDepositPayment"
+        class="OrderPaymentInformation__direct-deposit">
+        <div
+          class="OrderPaymentInformation__direct-deposit-info"
+          v-html="depositInfo(orderSettings.depositInfo)">
+        </div>
+        <div
+          v-if="isFailedOrderCharge"
+          class="OrderPaymentInformation__error">
+          {{ errorMessage }}
+        </div>
+        <progress-steps-controls
+          class="OrderPaymentInformation__controls"
+          :disabled-next="creating"
+          :disabled-prev="creating"
+          label-next="CREATE ORDER"
+          @prev="$emit('prev')"
+          @next="submit" />
+      </div>
+      <payment-cart
+        v-else
+        ref="paymentCart"
+        :payment-data="order.billingAddress">
+        <template slot="controls">
+          <div
+            v-if="isFailedOrderCharge"
+            class="OrderPaymentInformation__error">
+            {{ errorMessage }}
+          </div>
+          <progress-steps-controls
+            class="OrderPaymentInformation__controls"
+            :disabled-prev="creating"
+            :disabled-next="creating"
+            label-next="MAKE PAYMENT"
+            @prev="$emit('prev')"
+            @next="submit" />
+        </template>
+      </payment-cart>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapMutations, mapActions } from 'vuex';
+import PaymentCart from '@lancom/shared/components/checkout/payment/payment-cart/payment-cart';
+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';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  name: 'OrderPaymentInformation',
+  components: {
+    ProgressStepsControls,
+    PaymentCart,
+    CheckedIcon
+  },
+  mixins: [payment],
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      creating: false,
+      isDepositPayment: this.order.paymentMethod === ORDER_PAYMENT_METHOD.DEPOSIT
+    };
+  },
+  computed: {
+    ...mapGetters(['orderSettings']),
+    ...mapGetters('order', ['card']),
+    ...mapGetters('cart', ['entities', 'notEmptySimpleProducts', 'cartPricing'])
+  },
+  watch: {
+    isDepositPayment() {
+      this.order.paymentMethod = this.isDepositPayment ? ORDER_PAYMENT_METHOD.DEPOSIT : ORDER_PAYMENT_METHOD.CART;
+    }
+  },
+  methods: {
+    ...mapActions('order', ['createOrder', 'saveOrder']),
+    ...mapMutations('order', ['setCard']),
+    depositInfo(info) {
+      return `<p>${info.split('\n').map(line => {
+        const [name, ...data] = line.split(':');
+        return data.length > 0 ? `<strong>${name}: </strong> ${data.join('')}` : name;
+      }).join('</p><p>')}</p>`;
+    },
+    async submit() {
+      if (this.isDepositPayment) {
+        this.setCard(null);
+      } else {
+        const card = await this.$refs.paymentCart.tokenize();
+        this.setCard(card);
+      }
+
+      this.submitOrder();
+      // this.$emit('next');
+    },
+    async submitOrder() {
+      try {
+        this.creating = true;
+        if (!this.orderData) {
+          await this.createOrder({
+            ...this.order,
+            products: this.entities,
+            pricing: this.cartPricing,
+            shop: this.shop._id
+          });
+        } else {
+          const data = {
+            ...this.orderData,
+            ...this.order,
+            charge: null
+          };
+          await this.saveOrder(data);
+        }
+        if (!this.isDepositPayment) {
+          await this.proceedPayment(this.card);
+          if (!this.isFailedOrderCharge) {
+            this.$emit('next');
+          }
+        } else {
+          this.onOrderSucces();
+          this.$emit('next');
+        }
+      } finally {
+        this.creating = false;
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-payment-information.scss';
+</style>

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

@@ -0,0 +1,13 @@
+.OrderReview {
+  &__wrapper {
+    position: relative;
+  }
+  &__message {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: white;
+  }
+}

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

@@ -0,0 +1,127 @@
+<template>
+  <div class="OrderReview__wrapper">
+    <div v-if="processing">
+      <spinner />
+    </div>
+    <div>
+      <cart-entities-group-table
+        :grouped-entities="groupedEntities"
+        :editable="false" />
+      <cart-price-info items-label="Products" />
+    </div>
+    <progress-steps-controls
+      :disabled-next="processing"
+      :processing-next="processing"
+      label-next="Submit order"
+      @prev="$emit('prev')"
+      @next="submit" />
+    <div
+      v-if="isVisibleChargeMessage"
+      class="OrderReview__message">
+      <payment-success
+        v-if="isSuccessOrderCharge"
+        :order="orderData">
+        <template slot="back-btn">
+          <btn
+            btn-class="green PaymentSuccess__btn"
+            btn-label="Back to home"
+            to="/" />
+        </template>
+      </payment-success>
+      <payment-failed
+        v-else
+        :order="orderData"
+        :message="errorMessage"
+        @again="retryPayment()" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import CartEntitiesGroupTable from '@lancom/shared/components/checkout/cart/cart_entities_group_table/cart-entities-group-table';
+import CartPriceInfo from '@lancom/shared/components/checkout/cart/cart_price_info/cart-price-info';
+import { groupSimpleProducts } from '@lancom/shared/assets/js/utils/cart';
+import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
+import { ORDER_PAYMENT_METHOD, ORDER_STEPS } from '@lancom/shared/assets/js/constants/order';
+import payment from '@lancom/shared/mixins/payment';
+import PaymentSuccess from '@lancom/shared/components/checkout/payment/payment_success/payment-success';
+import PaymentFailed from '@lancom/shared/components/checkout/payment/payment_failed/payment-failed';
+
+export default {
+  name: 'OrderReview',
+  components: {
+    ProgressStepsControls,
+    CartEntitiesGroupTable,
+    PaymentSuccess,
+    PaymentFailed,
+    CartPriceInfo
+  },
+  mixins: [payment],
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    groupByColor: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters('cart', ['entities', 'notEmptySimpleProducts', 'cartPricing']),
+    isPaymentOrder() {
+      return this.order.paymentMethod === ORDER_PAYMENT_METHOD.CARD;
+    },
+    groupedEntities() {
+      return [...groupSimpleProducts(this.entities, this.groupByColor)];
+    }
+  },
+  methods: {
+    ...mapActions('order', ['createOrder', 'saveOrder']),
+    ...mapActions('cart', ['clearCart']),
+    ...mapMutations('product', ['clearTemplate']),
+    ...mapMutations('layers', ['resetLayers']),
+    async submit() {
+      try {
+        this.processing = true;
+        if (!this.orderData) {
+          await this.createOrder({
+            ...this.order,
+            products: this.entities,
+            pricing: this.cartPricing,
+            shop: this.shop._id
+          });
+        } else {
+          const data = {
+            ...this.orderData,
+            ...this.order,
+            charge: null
+          };
+          await this.saveOrder(data);
+        }
+        if (this.isPaymentOrder) {
+          await this.proceedPayment(this.card);
+        } else {
+          this.onOrderSucces();
+        }
+      } finally {
+        this.processing = false;
+      }
+    },
+    retryPayment() {
+      this.clearFailedCharge();
+      this.$emit('step', ORDER_STEPS.PAYMENT_INFORMATION);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-review.scss';
+</style>

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

@@ -0,0 +1,11 @@
+@import '@/assets/scss/variables';
+
+.OrderShippingInformation {
+    &__copy-from-billing {
+        margin-top: 10px;
+        display: inline-block;
+        color: $green;
+        font-size: 15px;
+        cursor: pointer;
+    }
+}

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="OrderShippingInformation__wrapper">
+    <validation-observer ref="form" v-slot="{ invalid }">
+      <div class="OrderShippingInformation__content">
+        <address-form :address="order.shippingAddress" />
+        <div
+          class="OrderShippingInformation__copy-from-billing"
+          @click="copyFromBillingAddress()">
+          Use Billing Address
+        </div>
+      </div>
+      <progress-steps-controls
+        :disabled-next="invalid"
+        @prev="$emit('prev')"
+        @next="$emit('next')" />
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex';
+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';
+
+export default {
+  name: 'OrderShippingInformation',
+  components: {
+    AddressForm,
+    ProgressStepsControls
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    ...mapMutations('cart', [
+      'setSuburb'
+    ]),
+    copyFromBillingAddress() {
+      this.order.shippingAddress = { ...this.order.billingAddress };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-shipping-information.scss';
+</style>

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

@@ -0,0 +1,67 @@
+<template>
+  <div class="OrderShippingMethod__wrapper">
+    <div class="lc_h4">
+      Shipping Details
+    </div>
+    <div v-if="shippingPricing">
+      <div class="lc_regular14">
+        Total: {{ shippingPricing.totalPrice | price }}
+      </div>
+      <div class="lc_regular14">
+        Postcode: {{ shippingPricing.postcode }}
+      </div>
+      <div class="lc_regular14">
+        Weight: {{ shippingPricing.weight }}
+      </div>
+    </div>
+    <progress-steps-controls
+      @prev="$emit('prev')"
+      @next="$emit('next')" />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
+
+export default {
+  name: 'OrderShippingMethod',
+  components: {
+    ProgressStepsControls
+  },
+  filters: {
+    price
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('cart', ['cartPricing']),
+    shippingPricing() {
+      return this.cartPricing?.shipping;
+    }
+  },
+  mounted() {
+    if (!this.shippingPricing) {
+      this.calculateCartPrice(this.shop);
+    }
+  },
+  methods: {
+    ...mapActions('cart', ['calculateCartPrice'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-shipping-method.scss';
+</style>

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

@@ -0,0 +1,42 @@
+@import "@/assets/scss/variables";
+
+.OrderSuccess {
+  &__wrapper {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+  &__card {
+    min-height: 250px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    background: white;
+    &-head {
+      font-weight: 800;
+      font-size: 36px;
+      line-height: 49px;
+      text-transform: uppercase;
+      color: $black;
+    }
+    &-order {
+      font-weight: 800;
+      font-size: 16px;
+      line-height: 22px;
+      text-transform: uppercase;
+      color: $black;
+    }
+    &-info {
+      font-size: 16px;
+      line-height: 120%;
+      color: #303030;
+      opacity: 0.6;
+      color: $black;
+      width: 410px;
+      text-align: center;
+      margin-bottom: 34px;
+      margin-top: 7px;
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="OrderSuccess__wrapper">
+    <div class="OrderSuccess__card">
+      <div class="OrderSuccess__card-icon">
+        <img src="/images/success.svg" />
+      </div>
+      <div class="OrderSuccess__card-head">
+        RECEIVED!
+      </div>
+      <div
+        v-if="orderData"
+        class="OrderSuccess__card-order">
+        Order {{ orderData.code }}
+      </div>
+      <div class="OrderSuccess__card-info">
+        Thanks for your order! You will receive an order confirmation email shortly. 
+      </div>
+      <div>
+        <btn
+          to="/"
+          btn-label="BACK TO HOME"
+          btn-class="green" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'OrderSuccess',
+  computed: {
+    ...mapGetters('order', ['orderData'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-success.scss';
+</style>

package/components/checkout/order/order.scss

@@ -0,0 +1,44 @@
+
+@import "@/assets/scss/variables";
+
+::v-deep {
+  .ProgressSteps{
+    &__wrapper {
+      border: none;
+    }
+    &__steps {
+      justify-content: center;
+    }
+    &__steps-wrapper {
+      background-color: none;
+    }
+    &__controls {
+      margin-top: 10px;
+    }
+    &__content-wrapper {
+      padding: 51px 0;
+      min-height: 400px;
+    }
+    &__step-line-prev,
+    &__step-line-next {
+      opacity: 0;
+    }
+    &__step {
+      flex-grow: 0;
+      flex-direction: row;
+      margin: 0 60px;
+      @media (max-width: $bp-small-max) {
+        margin: 0 15px;
+      }
+      &-progress {
+        width: auto;
+      }
+      &-name {
+        position: relative;
+        bottom: auto;
+        margin-top: 0;
+        margin-left: 19px;
+      }
+    }
+  }
+}