@lancom/shared 0.0.456 → 0.0.458

package/components/quotes/quote_view/quote_view_banner/quote-view-banner.scss

@@ -0,0 +1,67 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewBanner {
+  &__wrapper {
+    background-image: url(~/static/images/quote_header_bg.png);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    height: 584px;
+    position: relative;
+    @media (max-width: $bp-extra-small-max) {
+      height: 400px;
+    }
+  }
+  &__info {
+    position: absolute;
+    top: 111px;
+    left: 86px;
+    color: $white;
+    @media (max-width: $bp-extra-small-max) {
+      left: 30px;
+      top: 30px;
+      right: 0;
+    }
+    &-text {
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 25px;
+      margin-top: 8px;
+    }
+  }
+  &__title {
+    font-weight: 800;
+    font-size: 60px;
+    line-height: 82px;
+    text-transform: uppercase;
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 40px;
+      line-height: 62px;
+    }
+  }
+  &__fields {
+    margin-bottom: 20px;
+  }
+  &__field {
+    margin-top: 21px;
+    &-name {
+      font-weight: bold;
+      font-size: 14px;
+      line-height: 19px;
+      text-transform: uppercase;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+    &-text {
+      font-weight: 800;
+      font-size: 26px;
+      line-height: 35px;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 20px;
+        line-height: 25px;
+      }
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_banner/quote-view-banner.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    class="QuoteViewBanner__wrapper"
+    :style="{
+      'background-image': backgroundImage
+    }">
+    <div class="QuoteViewBanner__info">
+      <div class="QuoteViewBanner__title">
+        Proposal
+      </div>
+      <div
+        v-if="address"
+        class="QuoteViewBanner__fields">
+        <div class="QuoteViewBanner__field">
+          <div class="QuoteViewBanner__field-name">
+            customer name
+          </div>
+          <div class="QuoteViewBanner__field-text">
+            {{ address.fullName }}
+          </div>
+        </div>
+        <div class="QuoteViewBanner__field">
+          <div class="QuoteViewBanner__field-name">
+            company name
+          </div>
+          <div class="QuoteViewBanner__field-text">
+            {{ address.company }}
+          </div>
+        </div>
+      </div>
+      <div class="QuoteViewBanner__info-text">
+        {{ quote.createdAt | shortDate }}
+      </div>
+      <div class="QuoteViewBanner__info-text">
+        Custom uniforms
+      </div>
+      <div
+        v-if="quote.user"
+        class="QuoteViewBanner__info-text">
+        Prepared by {{ quote.user.fullName }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { shortDate } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'QuoteViewBanner',
+  filters: {
+    shortDate
+  },
+  computed: {
+    ...mapGetters('quote', ['quote']),
+    address() {
+      return this.quote.billingAddress || this.quote.address;
+    },
+    backgroundImage() {
+      return this.quote.image ? `url(${this.quote.image.large})` : null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-banner.scss';
+</style>

package/components/quotes/quote_view/quote_view_billing_information/quote-view-billing-information.scss

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

package/components/quotes/quote_view/quote_view_billing_information/quote-view-billing-information.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="QuoteBillingInformation__wrapper">
+    <div class="lc_h3 lc_uppercase lc_bold">
+      Delivery Address
+    </div>
+    <div class="QuoteBillingInformation__form">
+      <validation-observer ref="form">
+        <div class="QuoteBillingInformation__content">
+          <address-form
+            :address="quote.address"
+            :postcodes-range="quote.address.postcode"
+            :without-additional-info="true" />
+          <div class="mt-20 mb-20">
+            <checkbox
+              v-model="copyToBillingAddress"
+              :dark="true">
+              <div class="ml-5">Use same address as the billing address</div>
+            </checkbox>
+          </div>
+          <div
+            v-if="!copyToBillingAddress"
+            class="mt-15">
+            <h5 class="lc_h3 lc_uppercase lc_bold mt-10 mb-15">Billing Address</h5>
+            <address-form
+              :address="quote.billingAddress"
+              :copy-from="quote.address"
+              :without-additional-info="true" />
+          </div>
+        </div>
+        <div style="margin-top: 30px;">
+          <btn
+            :btn-block="true"
+            btn-class="green"
+            btn-label="NEXT"
+            @onclick="goToPayment">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+      </validation-observer>
+    </div>
+  </div>
+</template>
+
+<script>
+import AddressForm from '@/components/checkout/order/address-form/address-form';
+import { isSameAddresses } from '@lancom/shared/assets/js/utils/address';
+
+export default {
+  name: 'QuoteViewBillingInformation',
+  components: {
+    AddressForm
+  },
+  props: {
+    quote: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      copyToBillingAddress: isSameAddresses(this.quote?.address, this.quote?.billingAddress)
+    };
+  },
+  created() {
+    if (!this.quote.billingAddress) {
+      this.quote.billingAddress = {
+        city: null,
+        phone: null,
+        addressLine1: null,
+        addressLine2: null,
+        email: null,
+        fullName: null,
+        company: null,
+        additionalInfo: null,
+        suburb: null,
+        country: this.country?.name,
+        state: null,
+        postcode: null
+      };
+    }
+    if (!this.quote.address) {
+      this.quote.address = {
+        ...this.quote.billingAddress
+      };
+    }
+  },
+  methods: {
+    async goToPayment() {
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+
+      if (this.copyToBillingAddress) {
+        this.quote.billingAddress = { ...this.quote.address };
+      }
+
+      this.$emit('submit');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-billing-information.scss';
+</style>

package/components/quotes/quote_view/quote_view_header/quote-view-header.scss

@@ -0,0 +1,65 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewHeader {
+  &__wrapper {
+    display: flex;
+    justify-content: space-between;
+    padding: 19px 0;
+  }
+  &__info {
+    display: flex;
+    align-items: center;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: space-between;
+    }
+  }
+  &__left-logo {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+  &__mobile-menu {
+    margin-right: 20px;
+  }
+  &__print {
+    margin-top: 10px;
+    margin-right: 10px;
+    display: none;
+    @media (max-width: $bp-small-max) {
+      display: block;
+    }
+  }
+  &__phone {
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 19px;
+    text-transform: uppercase;
+    margin-right: 36px;
+    @media (max-width: $bp-extra-small-max) {
+      margin-right: 0px;
+    }
+  }
+  &__socials {
+    display: flex;
+    a {
+      display: flex;
+      width: 40px;
+      height: 40px;
+      @media (max-width: $bp-extra-small-max) {
+        width: 20px;
+        height: 20px;
+      }
+      margin-right: 10px;
+      background-color: $green;
+      color: $black;
+      font-size: 22px;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 12px;
+      }
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_header/quote-view-header.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="QuoteViewHeader__wrapper">
+    <div class="QuoteViewHeader__left-logo">
+      <div class="hidden-md-and-up">
+        <div
+          class="QuoteViewHeader__mobile-menu"
+          @click="showMenu()">
+          <i class="icon-menu"></i>
+        </div>
+      </div>
+      <div class="QuoteViewHeader__logo">
+        <a href="/">
+          <logo />
+        </a>
+      </div>
+    </div>
+    <div class="QuoteViewHeader__print">
+      <quote-view-print />
+    </div>
+    <div class="QuoteViewHeader__info">
+      <div class="QuoteViewHeader__phone">
+        <i class="icon-smartphone"></i>
+        <a :href="`tel:${contacts.phone}`" style="color: #303030;">{{contacts.phone}}</a>
+      </div>
+      <!-- <div class="QuoteViewHeader__socials">
+        <a href="/">
+          <i class="icon-facebook"></i>
+        </a>
+        <a href="/">
+          <i class="icon-twitter"></i>
+        </a>
+        <a href="/">
+          <i class="icon-instagram"></i>
+        </a>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import modals from '@lancom/shared/mixins/modals';
+import Logo from '@/components/common/logo/logo';
+import QuoteViewMobileMenu from './../quote_view_mobile_menu/quote-view-mobile-menu';
+import QuoteViewPrint from './../quote_view_print/quote-view-print';
+
+export default {
+  name: 'QuoteViewHeader',
+  components: {
+    Logo,
+    QuoteViewPrint
+  },
+  mixins: [
+    modals
+  ],
+  computed: {
+    ...mapGetters(['contacts'])
+  },
+  methods: {
+    showMenu() {
+      this.$aside.show(QuoteViewMobileMenu);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-header.scss';
+</style>

package/components/quotes/quote_view/quote_view_info/quote-view-info.scss

@@ -0,0 +1,36 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewInfo {
+  &__code {
+    font-weight: 800;
+    font-size: 20px;
+    line-height: 27px;
+    text-transform: uppercase;
+  }
+  &__author {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 25px;
+    margin-top: 6px;
+  }
+  &__state-wrapper {
+    margin-top: 15px;
+    display: flex;
+  }
+  &__state {
+    font-weight: 800;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    text-transform: uppercase;
+    padding: 5px;
+
+    &--current {
+      background-color: $green;
+    }
+    &--expired {
+      background-color: #EA3434;
+      color: $white;
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_info/quote-view-info.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="QuoteViewInfo__wrapper">
+    <div class="QuoteViewInfo__code">
+      Quote ID: {{ quoteId }}
+    </div>
+    <div
+      v-if="quote.user"
+      class="QuoteViewInfo__author">
+      By {{ quote.user.fullName }}
+    </div>
+    <div class="QuoteViewInfo__state-wrapper">
+      <span
+        class="QuoteViewInfo__state"
+        :class="stateClassname">
+        {{ isExpiredQuote ? 'expired' : 'current' }}
+      </span>
+      <quote-view-print />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import QuoteViewPrint from './../quote_view_print/quote-view-print';
+
+export default {
+  name: 'QuoteViewInfo',
+  components: {
+    QuoteViewPrint
+  },
+  computed: {
+    ...mapGetters('quote', ['quoteId', 'quote', 'isExpiredQuote']),
+    stateClassname() {
+      return this.isExpiredQuote ? 'QuoteViewInfo__state--expired' : 'QuoteViewInfo__state--current';
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-info.scss';
+</style>

package/components/quotes/quote_view/quote_view_invalid_stock_modal/quote-view-invalid-stock-modal.scss

@@ -0,0 +1,17 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewInvalidStockModal {
+  &__wrapper  {
+    border-radius: 0px;
+    @media (max-width: $bp-extra-small-max) {
+      min-height: 100vh;
+    }
+  }
+  &__message {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 31px;
+    text-align: center;
+    color: #303030;
+  }
+}

package/components/quotes/quote_view/quote_view_invalid_stock_modal/quote-view-invalid-stock-modal.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="lc_modal__wrapper QuoteViewInvalidStockModal__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">
+      <div class="QuoteViewInvalidStockModal__message">
+        There has been an issue with approval processing. we will contact you to confirm the order details. You can also contact us on <a :href="`tel:${contacts.phone}`" style="color: #303030;">{{contacts.phone}}</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'QuoteViewInvalidStockModal',
+  computed: {
+    ...mapGetters(['contacts'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-invalid-stock-modal.scss';
+</style>

package/components/quotes/quote_view/quote_view_menu/quote-view-menu.scss

@@ -0,0 +1,74 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewMenu {
+  &__wrapper {
+    margin-top: 38px;
+    border-top: 2px solid $gray;
+    padding-right: 38px;
+    padding-left: 25px;
+  }
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 32px;
+    margin-bottom: 45px;
+    cursor: pointer;
+    &-icon {
+      transform: rotate(0deg);
+      transform-origin: center center;
+      transition: transform 0.2s linear;
+      width: 20px;
+      height: 20px;
+      display: block;
+      &--opened {
+        transform: rotate(-90deg);
+      }
+    }
+    &-label {
+      font-weight: 800;
+      font-size: 22px;
+      line-height: 30px;
+      text-transform: uppercase;
+    }
+  }
+  &__item {
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    margin-top: 6px;
+    a {
+      display: block;
+      padding: 12px 16px;
+      color: $black;
+      cursor: pointer;
+    }
+    span {
+      background: #F38320;
+      padding: 1px 7px;
+      font-weight: bold;
+      font-size: 16.25px;
+      line-height: 22px;
+      color: $white;
+      text-decoration: none;
+      display: inline-block;
+      margin-left: 9px;
+    }
+    &--active,
+    &:hover {
+      background-color: $black;
+      a {
+        color: $white;
+      }
+    }
+    &--light {
+      a {
+        color: $gray_main;
+      }
+    }
+    &--bottom {
+      margin-top: 95px;
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_menu/quote-view-menu.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="QuoteViewMenu__wrapper">
+    <div
+      class="QuoteViewMenu__header"
+      @click="toggleMenu()">
+      <span class="QuoteViewMenu__header-label">Menu</span>
+      <span
+        class="QuoteViewMenu__header-icon"
+        :class="{
+          'QuoteViewMenu__header-icon--opened': opened
+        }">
+        <i class="icon-arrow-left"></i>
+      </span>
+    </div>
+    <div
+      v-if="opened"
+      class="QuoteViewMenu__items-wrapper">
+      <ul class="QuoteViewMenu__items">
+        <li
+          class="QuoteViewMenu__item"
+          :class="{
+            'QuoteViewMenu__item--active': !currentOption,
+            'QuoteViewMenu__item--light': !!currentOption
+          }">
+          <a @click="goToIntro()">
+            Intro
+          </a>
+        </li>
+
+        <li
+          v-for="option in options"
+          :key="option._id"
+          class="QuoteViewMenu__item"
+          :class="{
+            'QuoteViewMenu__item--active': currentOption === option,
+            'QuoteViewMenu__item--light': currentOption !== option
+          }">
+          <a @click="goToOption(option)">
+            Option {{ option.index }}
+            <span v-if="viewedOptionsMap && !viewedOptionsMap[option._id]">
+              NEW
+            </span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'QuoteViewMenu',
+  data() {
+    return {
+      opened: true,
+      currentOption: null
+    };
+  },
+  computed: {
+    ...mapGetters('quote', ['options', 'viewedOptionsMap'])
+  },
+  mounted() {
+    if (this.$route.query.option) {
+      const option = this.options[this.$route.query.option - 1];
+      if (option) {
+        setTimeout(() => this.goToOption(option), 200);
+      }
+    }
+  },
+  methods: {
+    toggleMenu() {
+      this.opened = !this.opened;
+    },
+    goToIntro() {
+      this.currentOption = null;
+      this.goToElement('quote-intro');
+      this.onSelected();
+    },
+    goToOption(option) {
+      this.currentOption = option;
+      const { _id } = option;
+      this.goToElement(`option-${_id}`);
+      this.onSelected();
+    },
+    goToElement(selector) {
+      const $el = document.getElementById(selector);
+      if ($el?.scrollIntoView) {
+        $el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    },
+    onSelected() {
+      this.$emit('selected');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-menu.scss';
+</style>