@lancom/shared 0.0.62 → 0.0.66

package/components/modals/order_modal/order-modal.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="lc_modal__wrapper OrderModal__wrapper">
+    <validation-observer v-slot="{ invalid }">
+      <div class="lc_modal__header">
+        <h5 class="lc_modal__header-title">
+          Customer information
+        </h5>
+        <i
+          class="icon-cancel lc_modal__close--dark"
+          @click="$emit('close')"></i>
+      </div>
+      <div class="lc_modal__content">
+        <div class="form-row--cols">
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="Full Name"
+            rules="required"
+            class="form-col col-half">
+            <input
+              id="fullName"
+              ref="fullName"
+              v-model="form.fullName"
+              name="fullName"
+              type="text"
+              class="form-field"
+              :class="{
+                'is-danger': errors.length,
+                filled: form.fullName
+              }"
+              @keyup.enter="$refs.fullName.focus()" />
+            <label
+              for="fullName"
+              class="form-label label-inner">
+              Full Name
+            </label>
+            <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"
+            class="form-col col-half">
+            <input
+              id="phone"
+              ref="phone"
+              v-model="form.phone"
+              name="phone"
+              type="text"
+              class="form-field"
+              :class="{
+                'is-danger': errors.length,
+                filled: form.phone
+              }"
+              @keyup.enter="$refs.phone.focus()" />
+            <label
+              for="phone"
+              class="form-label label-inner">
+              Phone number
+            </label>
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+        </div>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="company"
+          class="form-row">
+          <input
+            id="company"
+            ref="company"
+            v-model="form.company"
+            name="company"
+            type="text"
+            class="form-field"
+            :class="{
+              'is-danger': errors.length,
+              filled: form.company
+            }"
+            @keyup.enter="$refs.company.focus()" />
+          <label
+            for="company"
+            class="form-label label-inner">
+            Company Name
+          </label>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="email"
+          rules="required|email"
+          class="form-row">
+          <input
+            id="email"
+            ref="email"
+            v-model="form.email"
+            name="email"
+            type="email"
+            class="form-field"
+            :class="{
+              'is-danger': errors.length,
+              filled: form.email
+            }"
+            @keyup.enter="$refs.email.focus()" />
+          <label
+            for="email"
+            class="form-label label-inner">
+            Email
+          </label>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <div class="form-row">
+          <input
+            id="country"
+            ref="country"
+            value="Only Australia"
+            name="country"
+            type="country"
+            class="form-field filled labelless"
+            disabled />
+        </div>
+        <postcode-select
+          :suburb="suburb"
+          @select="handleSuburbChange">
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="suburb"
+            rules="required"
+            class="form-row">
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+            <input
+              v-model="form.suburb"
+              type="hidden"
+              name="suburb" />
+          </validation-provider>
+        </postcode-select>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Address line 1"
+          rules="required"
+          class="form-row">
+          <input
+            id="addressLine1"
+            ref="addressLine1"
+            v-model="form.addressLine1"
+            name="addressLine1"
+            type="text"
+            class="form-field"
+            :class="{
+              'is-danger': errors.length,
+              filled: form.addressLine1
+            }"
+            @keyup.enter="$refs.addressLine1.focus()" />
+          <label
+            for="addressLine1"
+            class="form-label label-inner">
+            Address line 1
+          </label>
+          <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">
+          <input
+            id="address_line2"
+            ref="address_line2"
+            v-model="form.address_line2"
+            name="address_line2"
+            type="text"
+            class="form-field"
+            :class="{
+              'is-danger': errors.length,
+              filled: form.address_line2
+            }"
+            @keyup.enter="$refs.address_line2.focus()" />
+          <label
+            for="address_line2"
+            class="form-label label-inner">
+            Address line 2
+          </label>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="additionalInfo"
+          class="form-row">
+          <input
+            id="additionalInfo"
+            ref="additionalInfo"
+            v-model="form.additionalInfo"
+            name="additionalInfo"
+            type="text"
+            class="form-field"
+            :class="{
+              'is-danger': errors.length,
+              filled: form.additionalInfo
+            }"
+            @keyup.enter="$refs.additionalInfo.focus()" />
+          <label
+            for="additionalInfo"
+            class="form-label label-inner">
+            Additional Info
+          </label>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <div class="OrderModal__prices">
+          <product-total-pricing :pricing="cartPricing" />
+        </div>
+      </div>
+      <div class="lc_modal__footer">
+        <div class="form-actions full">
+          <btn
+            btn-class="white"
+            btn-label="Back"
+            @onclick="back">
+          </btn>
+          <btn
+            btn-class="green"
+            :btn-processing="processing"
+            :btn-disabled="invalid || processing"
+            btn-label="Submit"
+            @onclick="submit">
+          </btn>
+        </div>
+      </div>
+    </validation-observer>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex';
+import PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import ProductTotalPricing from '@lancom/shared/components/common/products_total_pricing/products-total-pricing';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'OrderModal',
+  filters: { price },
+  components: {
+    PostcodeSelect,
+    ProductTotalPricing
+  },
+  props: {
+    switchModal: {
+      type: Function,
+      required: true
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      form: {}
+    };
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('order', ['orderData']),
+    ...mapGetters('cart', [
+      'notEmptySimpleProducts',
+      'cartPricing',
+      'suburb'
+    ]),
+    numberOfProducts() {
+      return this.notEmptySimpleProducts.length;
+    }
+  },
+  mounted() {
+    if (this.orderData) {
+      this.form = {
+        city: this.orderData.city,
+        phone: this.orderData.phone,
+        addressLine1: this.orderData.addressLine1,
+        address_line2: this.orderData.addressLine2,
+        email: this.orderData.email,
+        fullName: this.orderData.fullName,
+        company: this.orderData.company,
+        additionalInfo: this.orderData.additionalInfo
+      };
+    }
+    this.form.suburb = this.suburb;
+  },
+  methods: {
+    ...mapActions('order', [
+      'createOrder'
+    ]),
+    ...mapMutations('cart', [
+      'setSuburb'
+    ]),
+    ...mapActions('cart', [
+      'calculateCartPrice'
+    ]),
+    handleSuburbChange(suburb) {
+      this.form.suburb = suburb;
+      this.setSuburb(suburb);
+      this.calculateCartPrice(this.shop);
+    },
+    back() {
+      this.switchModal('showCartModal');
+    },
+    async submit() {
+      try {
+        this.processing = true;
+        await this.createOrder({
+          ...this.form,
+          products: this.notEmptySimpleProducts,
+          pricing: this.cartPricing,
+          shop: this.shop._id
+        });
+        this.switchModal('showPaymentModal');
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-modal.scss';
+</style>

package/components/modals/payment_modal/payment-modal.scss

@@ -0,0 +1,57 @@
+@import "@lancom/shared/assets/scss/ui_kit";
+@import "@/assets/scss/variables";
+
+.PaymentModal {
+  &__wrapper {
+    .pin-form-field {
+      @extend .form-field;
+      @extend .labelless;
+    }
+  }
+  &__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;
+    }
+  }
+}
+
+.lc_modal {
+  &__content {
+    position: relative;
+  }
+  &__spinner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: white;
+    z-index: 99;
+    .Spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -10px;
+      margin-top: -10px;
+    }
+  }
+}