@lancom/shared 0.0.457 → 0.0.458

package/components/quotes/quote_view/quote_view_message/quote-view-message.scss

@@ -0,0 +1,53 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewMessage {
+  &__title {
+    background-color: $green;
+    color: $black;
+    padding: 17px 21px;
+    font-weight: 800;
+    font-size: 36px;
+    line-height: 49px;
+    display: inline-block;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 7px 11px;
+      font-size: 21px;
+      line-height: 32px;
+    }
+  }
+  &__text {
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 30px;
+    color: $gray_main;
+    padding-top: 20px;
+    @media (max-width: $bp-extra-small-max) {
+      padding-top: 0px;
+      font-size: 16px;
+      line-height: 21px;
+    }
+    p {
+      margin-top: 20px;
+    }
+  }
+  &__sign {
+    margin-top: 36px;
+    background-image: url(~/static/images//oren_sign.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    width: 136px;
+    height: 66px;
+  }
+  &__author {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 27px;
+    margin-top: 16px;
+    color: $gray_main;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 15px;
+      line-height: 20px;
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_message/quote-view-message.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="QuoteViewMessage__wrapper">
+    <div
+      v-if="address"
+      class="QuoteViewMessage__title">
+      Dear {{ address.fullName }},
+    </div>
+    <div class="QuoteViewMessage__text">
+      <rich-text :text="quote.message" />
+    </div>
+    <div class="QuoteViewMessage__sign"></div>
+    <div
+      v-if="quote.user"
+      class="QuoteViewMessage__author">
+      {{ quote.user.fullName }} | Account Manager at Workdepot
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import RichText from '@lancom/shared/components/common/rich-text';
+
+export default {
+  name: 'QuoteViewMessage',
+  components: {
+    RichText
+  },
+  computed: {
+    ...mapGetters('quote', ['quote']),
+    address() {
+      return this.quote.billingAddress || this.quote.address;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-message.scss';
+</style>

package/components/quotes/quote_view/quote_view_mobile_menu/quote-view-mobile-menu.scss

@@ -0,0 +1 @@
+@import "@/assets/scss/variables";

package/components/quotes/quote_view/quote_view_mobile_menu/quote-view-mobile-menu.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="QuoteViewMobileMenu__wrapper">
+    <quote-view-info class="QuoteView__info" />
+    <quote-view-menu @selected="$emit('close')" />
+  </div>
+</template>
+
+<script>
+import QuoteViewInfo from './../quote_view_info/quote-view-info';
+import QuoteViewMenu from './../quote_view_menu/quote-view-menu';
+
+export default {
+  name: 'QuoteViewMobileMenu',
+  components: {
+    QuoteViewInfo,
+    QuoteViewMenu
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-mobile-menu.scss';
+</style>

package/components/quotes/quote_view/quote_view_payment/quote-view-payment.scss

@@ -0,0 +1,58 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewPayment {
+  &__wrapper {
+    padding: 0px 50px 50px 50px;
+    position: relative;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 0px;
+    }
+  }
+  &__error {
+    font-weight: bold;
+    font-size: 14px;
+    padding: 18px 10px;
+    text-align: center;
+    color: $white;
+    background: #EA3434;
+    margin-bottom: 10px;
+  }
+  &__spinner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+  }
+  &__header {
+    border-bottom: 2px solid $gray;
+    padding-bottom: 30px;
+    text-align: center;
+    &-title {
+      font-weight: 800;
+      font-size: 36px;
+      line-height: 49px;
+    }
+    &-description {
+      font-size: 16px;
+      line-height: 120%;
+      color: $black;
+      opacity: 0.6;
+      margin-top: 14px;
+    }
+  }
+  &__controls {
+    margin: 14px 40px 0 40px;
+    @media (max-width: $bp-extra-small-max) {
+      margin: 14px 0px 0 0px;
+    }
+  }
+  &__control {
+    margin-top: 26px;
+  }
+}

package/components/quotes/quote_view/quote_view_payment/quote-view-payment.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="QuoteViewPayment__wrapper">
+    <div
+      v-if="processing"
+      class="QuoteViewPayment__spinner">
+      <spinner />
+    </div>
+    <div v-if="order && !order.failedCharge">
+      <quote-payment-success
+        v-if="order.paid"
+        :order="order"
+        btn-label="go to homepage"
+        @ok="goHome" />
+      <quote-payment-success
+        v-else
+        :order="order"
+        message="thanks for your acceptance"
+        description="You will be emailed a tax invoice shortly!"
+        @ok="goHome" />
+    </div>
+    <div v-else-if="isPayment">
+      <payment-card
+        v-if="quote"
+        ref="paymentCart"
+        :amount="proceedOption.totalGST"
+        :order="quote">
+      </payment-card>
+      <div
+        v-if="errorMessage"
+        class="QuoteViewPayment__error">
+        {{ errorMessage }}
+      </div>
+      <btn
+        class="lc_uppercase"
+        btn-class="green"
+        btn-label="MAKE PAYMENT"
+        :btn-block="true"
+        @onclick="convertToOrderWithPayment">
+        <i
+          slot="icon-after"
+          class="icon-arrow-right"></i>
+      </btn>
+    </div>
+    <div v-else>
+      <div class="QuoteViewPayment__header">
+        <div class="QuoteViewPayment__header-title">
+          Payment method
+        </div>
+        <div class="QuoteViewPayment__header-description">
+          Сhoose the method you want to pay for items.
+        </div>
+      </div>
+      <div class="QuoteViewPayment__controls lc_uppercase">
+        <div class="QuoteViewPayment__control">
+          <btn
+            btn-class="white"
+            btn-label="pay now using a credit card"
+            :btn-block="true"
+            @onclick="isPayment = true">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+        <div class="QuoteViewPayment__control">
+          <btn
+            btn-class="white"
+            btn-label="pay upon receipt of tax invoice"
+            :btn-block="true"
+            @onclick="convertToOrder(proceedOption)">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+        <div class="QuoteViewPayment__control">
+          <btn
+            btn-class="white"
+            btn-label="purchase order (AUS Government Organisation)"
+            :btn-block="true"
+            :btn-disabled="!quote.purchaseOrderAllowed"
+            @onclick="convertToPOOrder(proceedOption)"
+            style="font-size: 14px;">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from '@lancom/shared/assets/js/api';
+import gapis from '@lancom/shared/assets/js/utils/gapis';
+import { mapGetters, mapMutations } from 'vuex';
+import PaymentCard from '@lancom/shared/components/common/payment/payment_card/payment-card';
+import QuoteViewMixin from '@lancom/shared/components/quotes/quote_view_preview/quote-view.mixin';
+import QuotePaymentSuccess from './quote_payment_success/quote-payment-success';
+
+export default {
+  name: 'QuoteViewPayment',
+  components: {
+    QuotePaymentSuccess,
+    PaymentCard
+  },
+  mixins: [
+    QuoteViewMixin
+  ],
+  data() {
+    return {
+      isPayment: false,
+      errorMessage: null
+    };
+  },
+  computed: {
+    ...mapGetters(['country', 'payment']),
+    ...mapGetters('quote', ['proceedOption'])
+  },
+  mounted() {
+    if (this.$route.query.checkPayment) {
+      this.isPayment = true;
+      if (this.order?.failedCharge) {
+        this.handleErrors({ error_description: this.order.failedCharge });
+      }
+    }
+  },
+  methods: {
+    ...mapMutations('quote', ['setOrder']),
+    goHome() {
+      this.$router.push('/');
+    },
+    handleErrors(err) {
+      console.log(err);
+      // err.messages.forEach(({ message }) => this.$toastr.e(message));
+      const defaultMessage = 'Payment error';
+      this.errorMessage = (err.messages ? err.messages.map(({ message }) => message).join(', ') : (err.error_description)) || defaultMessage;
+    },
+    convertToPOOrder(option) {
+      this.convertToOrder({
+        ...option,
+        paymentMethod: 'purchase order',
+        paymentStatus: 'purchase order'
+      });
+    },
+    async convertToOrderWithPayment() {
+      try {
+        this.errorMessage = null;
+        this.processing = true;
+        const card = await this.$refs.paymentCart.tokenize();
+        if (card) {
+          const order = this.order || await this.createOrder({ ...this.proceedOption, paymentMethod: 'card' });
+
+          const payload = {
+            card,
+            shop: this.shop._id,
+            country: this.country?._id,
+            payment: this.payment,
+            path: window.location.pathname,
+            recaptchaToken: await this.getRecaptcha('order_payment')
+          };
+          const result = await api.createOrderPayment(order._id, payload);
+          if (result.redirect_url) {
+            window.location.href = result.redirect_url;
+            return;
+          }
+          this.order = result;
+          this.setOrder(this.order);
+          // gtm.purchase(this.order);
+          gapis.surveyOptin(this.order, this.shop);
+        }
+        this.clear();
+      } catch (e) {
+        if (e.response) {
+          const { message } = (e.response && e.response.data) || e;
+          this.handleErrors({ messages: [{ message }] });
+        } else {
+          this.handleErrors(e);
+        }
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-payment.scss';
+</style>

package/components/quotes/quote_view/quote_view_payment/quote_payment_success/quote-payment-success.scss

@@ -0,0 +1,40 @@
+@import "@/assets/scss/variables";
+
+.QuotePaymentSuccess {
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &__icon {
+    width: 88px;
+    height: 88px;
+    border-radius: 44px;
+    background-color: $green;
+    color: $black;
+    font-size: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &__message {
+    font-weight: 800;
+    font-size: 36px;
+    line-height: 49px;
+    margin-top: 20px;
+    text-align: center;
+  }
+  &__description {
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 120%;
+    color: $black;
+    opacity: 0.6;
+    margin-top: 20px;
+    text-align: center;
+  }
+  &__control {
+    margin-top: 35px;
+    min-width: 226px;
+  }
+}

package/components/quotes/quote_view/quote_view_payment/quote_payment_success/quote-payment-success.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="QuotePaymentSuccess__wrapper">
+    <div class="QuotePaymentSuccess__icon">
+      <i class="icon-ok"></i>
+    </div>
+    <div class="QuotePaymentSuccess__message lc_uppercase">
+      {{ message }}
+    </div>
+    <div v-if="order" class="lc_regular18 lc_grey1 mt-5">
+      Order {{ order.code }}
+    </div>
+    <div class="QuotePaymentSuccess__description">
+      {{ description }}
+    </div>
+    <div class="QuotePaymentSuccess__control lc_uppercase">
+      <btn
+        btn-class="green"
+        :btn-label="btnLabel"
+        :btn-block="true"
+        @onclick="$emit('ok')" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuotePaymentSuccess',
+  props: {
+    order: {
+      type: Object
+    },
+    message: {
+      type: String,
+      default: 'Thank you!'
+    },
+    description: {
+      type: String,
+      default: 'Thanks for your order! You will receive an order confirmation email shortly.'
+    },
+    btnLabel: {
+      type: String,
+      default: 'OK!'
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-payment-success.scss';
+</style>

package/components/quotes/quote_view/quote_view_payment_modal/quote-view-payment-modal.scss

@@ -0,0 +1,10 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewPaymentModal {
+  &__wrapper  {
+    border-radius: 0px;
+    @media (max-width: $bp-extra-small-max) {
+      min-height: 100vh;
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_payment_modal/quote-view-payment-modal.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="lc_modal__wrapper QuoteViewPaymentModal__wrapper">
+    <div class="lc_modal__header pull-left">
+      <i
+        class="icon-cancel lc_modal__close--dark"
+        @click="$emit('close')"></i>
+    </div>
+    <div class="lc_modal__content">
+      <quote-view-address-form
+        v-if="!canPay"
+        :quote="quote"
+        @submit="canPay = true" />
+      <quote-view-payment
+        v-else
+        @ok="$emit('close')" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import QuoteViewPayment from './../quote_view_payment/quote-view-payment';
+import QuoteViewAddressForm from './../quote_view_billing_information/quote-view-billing-information';
+
+export default {
+  name: 'QuoteViewPaymentModal',
+  components: {
+    QuoteViewPayment,
+    QuoteViewAddressForm
+  },
+  data() {
+    return {
+      canPay: false
+    };
+  },
+  computed: {
+    ...mapGetters('quote', ['quote'])
+  },
+  mounted() {
+    if (this.$route.query.checkPayment) {
+      this.canPay = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-payment-modal.scss';
+</style>

package/components/quotes/quote_view/quote_view_print/quote-view-print.scss

@@ -0,0 +1,54 @@
+@import "@/assets/scss/variables";
+.QuoteViewPrint {
+  &__wrapper {
+    position: relative;
+  }
+  &__field {
+    display: flex !important;
+    align-items: center;
+    cursor: pointer;
+  }
+  &__inner {
+    min-width: 72px;
+    width: 33%;
+    height: 100%;
+    border-radius: 2px;
+    box-shadow: $elevation1;
+  }
+  &__value {
+    color: $grey_1;
+    text-transform: uppercase;
+    margin-left: 20px;
+    flex-grow: 1;
+    cursor: pointer;
+    display: flex;
+  }
+  &__caret {
+    color: $grey_5;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  &__dropdown {
+    position: absolute;
+    z-index: 101;
+    top: 40px;
+    margin-left: -100px;
+    width: 250px;
+    // transform: translateY(-50%);
+    padding: 10px;
+    box-shadow: 0 0 2px grey;
+    background-color: white;
+  }
+  &__field {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    &-item {
+      padding: 7px 10px;
+      cursor: pointer;
+      &:hover {
+        background-color: $grey_3;
+      }
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_print/quote-view-print.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="QuoteViewPrint__wrapper">
+    <div
+      class="QuoteViewPrint__field"
+      @click="open()">
+      <div class="lc_regular16 QuoteViewPrint__value">
+        <spinner v-if="generating" /> Save PDF
+      </div>
+      <i class="icon-angle-down QuoteViewPrint__caret"></i>
+    </div>
+    <div
+      v-if="isOpen"
+      v-click-outside="close"
+      class="QuoteViewPrint__dropdown">
+      <div>
+        <div
+          v-for="option of options"
+          :key="option._id"
+          class="QuoteViewPrint__field-item"
+          @click="downloadQuoteOption(option)">
+          Option {{ option.index }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'QuoteViewPrint',
+  data() {
+    return {
+      isOpen: false,
+      generating: false
+    };
+  },
+  computed: {
+    ...mapGetters('quote', ['quote', 'options'])
+  },
+  methods: {
+    open() {
+      if (!this.generating) {
+        this.isOpen = !this.isOpen;
+      }
+    },
+    close() {
+      this.isOpen = false;
+    },
+    async downloadQuoteOption(option) {
+      try {
+        this.generating = true;
+        this.close();
+        const { pdf } = await api.generateQuotePDF(this.quote._id, option._id);
+        const res = await fetch(pdf);
+        const blob = await res.blob();
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.setAttribute('download', `${this.quote.code}-${option.index}`);
+        a.click();
+      } catch (e) {
+      } finally {
+        this.generating = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'quote-view-print';
+</style>