@lancom/shared 0.0.457 → 0.0.459

package/components/quotes/quote_view/quote_view_question/quote-view-question.scss

@@ -0,0 +1,84 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewQuestion {
+  &__wrapper {
+    border: 2px solid $gray;
+    padding: 54px;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 24px;
+    }
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &__message {
+    width: 549px;
+    font-weight: 800;
+    font-size: 30px;
+    line-height: 41px;
+    text-align: center;
+    color: $black;
+    margin-bottom: 40px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 280px;
+      font-size: 25px;
+      line-height: 35px;
+    }
+  }
+  &__form {
+    width: 100%;
+  }
+  &__label {
+    font-style: normal;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    margin-bottom: 10px;
+  }
+  &__upload {
+    display: flex;
+    &--uploading {
+      pointer-events: none;
+      opacity: 0.7;
+    }
+    &-btn {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 22px;
+      text-transform: uppercase;
+      background-color: $green;
+      padding: 8px 14px;
+      &--disabled {
+        background-color: $gray;
+      }
+      &--uploaded {
+        opacity: 0.5;
+      }
+    }
+    &-info {
+      font-size: 12px;
+      line-height: 16px;
+      color: $black;
+      margin-left: 12px;
+    }
+    &-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+    &-file {
+      margin-top: 5px;
+      font-size: 12px;
+      a {
+        text-decoration: none;
+        color: $black;
+      }
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_question/quote-view-question.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="QuoteViewQuestion__wrapper">
+    <div
+      v-if="!enabledForm"
+      class="QuoteViewQuestion__content">
+      <div class="QuoteViewQuestion__message">
+        For any requests regarding this quote, use the live chat or send us an offline message here:
+      </div>
+      <btn
+        btn-class="green"
+        btn-label="ASK A QUESTION"
+        @onclick="enableForm()" />
+    </div>
+    <div
+      v-else
+      class="QuoteViewQuestion__form">
+      <validation-observer
+        v-slot="{ invalid, handleSubmit }"
+        tag="form">
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Description"
+          class="form-row">
+          <textarea
+            id="quote-request-description"
+            v-model="question.text"
+            name="quote-request-description"
+            class="form-textarea--size3 labelless"
+            placeholder="Your message here"
+            :class="{
+              'is-danger': errors.length,
+              filled: question.text
+            }">
+          </textarea>
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <div class="form-row">
+          <div class="QuoteViewQuestion__label">
+            Upload image or file
+          </div>
+          <file-uploader
+            :multiple="false"
+            :url="`image/editor/${shop._id}/undefined`"
+            :has-conversion-error-modal="false"
+            :show-error-message="false"
+            @onchange="handleUploadChange"
+            @onerror="handleUploadError"
+            @onuploaded="handleUploaded">
+            <template v-slot:toggle="{ uploading }">
+              <div
+                class="QuoteViewQuestion__upload"
+                :class="{
+                  'QuoteViewQuestion__upload--uploading': uploading
+                }">
+                <div
+                  class="QuoteViewQuestion__upload-btn"
+                  :class="{
+                    'QuoteViewQuestion__upload-btn--disabled': uploading,
+                    'QuoteViewQuestion__upload-btn--uploaded': question.file
+                  }">
+                  Upload
+                </div>
+                <div class="QuoteViewQuestion__upload-info">
+                  <div>Note: accepted file types:</div>
+                  <div><b>JPEG / PNG / AI / EPS / PDF</b></div>
+                </div>
+              </div>
+            </template>
+            <template v-slot:progress="{ progress }">
+              <div
+                v-if="progress"
+                class="QuoteViewQuestion__upload-progress">
+                <spinner background="black" />
+              </div>
+            </template>
+          </file-uploader>
+          <div
+            v-if="uploadError"
+            class="QuoteViewQuestion__error">
+            {{ uploadError }}
+          </div>
+          <div
+            v-if="question.file"
+            class="QuoteViewQuestion__upload-file">
+            <span @click="question.file = null">x</span>
+            Logo:
+            <a
+              :href="question.file.origin"
+              target="_blank">
+              {{ question.file.fileName }}
+            </a>
+          </div>
+        </div>
+        <div class="QuoteViewQuestion__btn form-actions full">
+          <div class="row">
+            <div class="col-sm-6 col-5">
+              <btn
+                btn-class="white"
+                :btn-block="true"
+                btn-label="Cancel"
+                @onclick="disableForm(submit)" />
+            </div>
+            <div class="col-sm-6 col-7">
+              <btn
+                btn-class="green"
+                :btn-disabled="processing || invalid"
+                :btn-processing="processing"
+                :btn-block="true"
+                btn-label="Submit Question"
+                @onclick="handleSubmit(submit)" />
+            </div>
+          </div>
+          </btn>
+        </div>
+      </validation-observer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
+import api from '@lancom/shared/assets/js/api';
+
+export default {
+  name: 'QuoteViewQuestion',
+  components: {
+    FileUploader
+  },
+  data() {
+    return {
+      uploadError: null,
+      processing: false,
+      enabledForm: false,
+      question: null
+    };
+  },
+  computed: {
+    ...mapGetters('quote', ['quote']),
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    enableForm() {
+      this.question = {
+        phone: null,
+        email: null,
+        file: null,
+        text: null
+      };
+      this.enabledForm = true;
+    },
+    disableForm() {
+      this.enabledForm = false;
+    },
+    handleUploaded(file) {
+      this.question.file = file;
+    },
+    handleUploadError(e) {
+      const { error, data } = e?.response?.data || {};
+      if (data) {
+        this.question.file = {
+          fileName: data.fileName,
+          origin: data.source
+        };
+      } else {
+        this.uploadError = error;
+      }
+    },
+    handleUploadChange() {
+      this.uploadError = null;
+      this.question.file = null;
+    },
+    async submit() {
+      try {
+        this.processing = true;
+        const recaptchaToken = await this.getRecaptcha('add_quote_question');
+        const body = {
+          recaptchaToken,
+          question: this.question
+        };
+        const review = await api.addQuoteQuestion(this.quote, this.shop._id, body);
+        this.$toastr.s('Your question will be processed within 24 hours. Thank You.');
+        this.$emit('added', review);
+        this.quote.questions = [...(this.quote.questions || []), this.question];
+        this.disableForm();
+      } catch (error) {
+        this.$toastr.e(error);
+      } finally {
+        this.processing = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-question.scss';
+</style>

package/components/quotes/quote_view/quote_view_questions/quote-view-questions.scss

@@ -0,0 +1,39 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewQuestions {
+  &__wrapper {
+    border: 2px solid $gray;
+  }
+  &__title {
+    padding: 24px;
+    font-weight: 800;
+    font-size: 22px;
+    line-height: 30px;
+    text-align: center;
+    color: $black;
+    background: $gray;
+  }
+  &__questions {
+    padding: 10px 25px;
+    text-align: center;
+  }
+  &__question {
+    margin: 15px 0;
+    &-text {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 23px;
+      color: $black;
+      a {
+        color: $black;
+      }
+    }
+    &-answer {
+      margin-top: 0px;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 23px;
+      color: $gray_main;
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_questions/quote-view-questions.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    v-if="hasQuestions"
+    class="QuoteViewQuestions__wrapper">
+    <div class="QuoteViewQuestions__title">
+      Your questions
+    </div>
+    <div class="QuoteViewQuestions__questions">
+      <div
+        v-for="question in questions"
+        :key="question._id"
+        class="QuoteViewQuestions__question">
+        <div class="QuoteViewQuestions__question-text">
+          You: {{ question.text }}
+          <div v-if="question.file">
+            <a
+              :href="question.file.origin"
+              target="_blank">
+              {{ question.file.fileName }}
+            </a>
+          </div>
+        </div>
+        <div class="QuoteViewQuestions__question-answer">
+          Support: {{ question.answer }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'QuoteViewQuestions',
+  computed: {
+    ...mapGetters('quote', ['quote']),
+    hasQuestions() {
+      return this.questions.length > 0;
+    },
+    questions() {
+      return (this.quote.questions || []).slice(0, 20); // .filter(q => !!q.answer);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-questions.scss';
+</style>

package/components/quotes/quote_view_preview/quote-view.scss

@@ -0,0 +1,29 @@
+.QuoteView {
+  &__wrapper {
+    margin-top: 50px;
+  }
+  &__option {
+    border: 1px solid #dee2e6;
+    padding: 30px;
+    margin-bottom: 50px;
+  }
+  &__info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  &__logo {
+    margin-bottom: 20px;
+  }
+  &__table {
+    margin-top: 20px;
+    margin-bottom: 10px;
+    td {
+      width: 50%;
+      padding: 20px;
+    }
+  }
+}
+.uppercase {
+    text-transform: uppercase;
+}

package/components/quotes/quote_view_preview/quote-view.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="QuoteView__wrapper">
+    <div
+      v-if="quote.shop.logo"
+      class="QuoteView__logo">
+      <img :src="quote.shop.logo.small" />
+    </div>
+    <div class="QuoteView__info">
+      <div>
+        <h2 class="lc_h2"> {{ quote.shop.name }} </h2>
+        <h4 v-if="shopContacts" class="lc_h4"> ABN: {{ shopContacts.abn }} </h4>
+      </div>
+      <h1 class="text-secondary lc_h1">
+        QUOTE
+      </h1>
+    </div>
+    <div class="QuoteView__info">
+      <div v-if="shopContacts">
+        <div class="lc_regular16">
+          {{ shopContacts.company }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.address }}
+        </div>
+        <div class="lc_regular16">
+          {{ shopContacts.phone }}
+        </div>
+      </div>
+      <div>
+        <div class="lc_regular16">
+          DATE: {{ quote.createdAt | shortDate }}
+        </div>
+        <div class="lc_regular16">
+          QUOTE ID: {{ quoteId }}
+        </div>
+      </div>
+    </div>
+
+    <table class="QuoteView__table mt-4 lc_table bordered">
+      <tr>
+        <td>
+          <div><b>QUOTE</b></div>
+          <div v-if="quote.address">
+            <div class="lc_regular16">
+              {{ quote.address.fullName }}
+            </div>
+            <div v-if="quote.address.company" class="lc_regular16">
+              {{ quote.address.company }}
+            </div>
+            <div v-if="quote.address.phone" class="lc_regular16">
+              {{ quote.address.phone }}
+            </div>
+            <div class="lc_regular16">
+              {{ quote.address.email }}
+            </div>
+            <div class="lc_regular16">
+              {{ quoteAddress }}
+            </div>
+            <div class="lc_regular16">
+              {{ quote.address.additionalInfo }}
+            </div>
+          </div>
+        </td>
+        <td class="w-50">
+          <div class="lc_regular16">
+            <b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS' }}</b>
+          </div>
+          <div class="lc_regular16">
+            Bank: {{ depositInfo.bank }}
+          </div>
+          <div class="lc_regular16">
+            Account name: {{ depositInfo.accountName }}
+          </div>
+          <div class="lc_regular16">
+            {{ bsbLabel }}: {{ depositInfo.BSB }}
+          </div>
+          <div class="lc_regular16">
+            Account: {{ depositInfo.account }}
+          </div>
+        </td>
+      </tr>
+    </table>
+    <div class="mt-3">
+      <quote-option-view
+        v-for="(optionItem, index) of options"
+        :key="`option-${index}`"
+        :option="optionItem"
+        :quote="quote"
+        class="QuoteView__option" />
+    </div>
+    <h6
+      v-if="quote.expiredAt"
+      class="mt-3 lc_title mb-5 lc_h3">
+      THIS QUOTE IS VALID UNTIL {{ quote.expiredAt | shortDate }}
+    </h6>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import QuoteViewMixin from './quote-view.mixin';
+import QuoteOptionView from './quote_option_view/quote-option-view';
+
+export default {
+  name: 'LancomQuoteView',
+  components: {
+    QuoteOptionView
+  },
+  mixins: [QuoteViewMixin],
+  computed: {
+    ...mapGetters(['MESSAGES']),
+    bsbLabel() {
+      return this.MESSAGES.DIRECT_DEPOSIT_BSB || 'BSB';
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view.scss';
+</style>

package/components/quotes/quote_view_preview/quote_option_view/quote-option-view.scss

@@ -0,0 +1,10 @@
+.QuoteOptionView {
+  &__totals {
+    margin-top: 60px;
+  }
+  &__product {
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid #dee2e6;
+  }
+}

package/components/quotes/quote_view_preview/quote_option_view/quote-option-view.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="QuoteOptionView__wrapper">
+    <div class="QuoteOptionView__info">
+      <quote-view-product
+        v-for="product of option.products"
+        :key="product._id"
+        :product="product"
+        class="QuoteOptionView__product" />
+    </div>
+    <div class="QuoteOptionView__totals">
+      <div class="lc_regular16">
+        Products Total: <b>{{ option.productsTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Prints Total: <b>{{ option.printsTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Shipping Total: <b>{{ option.shippingTotal | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Total ex {{ taxName }}: <b>{{ option.total | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        {{ taxName }}: <b>{{ optionGst(option) | price(currency) }}</b>
+      </div>
+      <div class="lc_regular16">
+        Total inc {{ taxName }}: <b>{{ option.total | tax(gstTax) | price(currency) }}</b>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { tax, price } from '@lancom/shared/assets/js/utils/filters';
+import QuoteViewProduct from './../quote_view_product/quote-view-product';
+
+export default {
+  name: 'LancomQuoteOptionView',
+  filters: {
+    tax,
+    price
+  },
+  components: {
+    QuoteViewProduct
+  },
+  props: {
+    quote: {
+      type: Object,
+      require: true
+    },
+    option: {
+      type: Object,
+      require: true
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'gstTax',
+      'taxName'
+    ])
+  },
+  methods: {
+    optionGst(option) {
+      return tax(option.total, this.gstTax) - option.total;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-option-view.scss';
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.457",
+  "version": "0.0.459",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/pages/quotes/view/_id/option/_option.vue

@@ -11,7 +11,7 @@
 
 <script>
 import QuoteViewPage from '@lancom/shared/pages/quotes/view/_id';
-import LancomQuoteView from '@lancom/shared/components/quotes/quote_view/quote-view';
+import LancomQuoteView from '@lancom/shared/components/quotes/quote_view_preview/quote-view';
 
 export default {
   name: 'QuoteOptionView',

package/plugins/crisp.js

@@ -0,0 +1,13 @@
+export default () => {
+  window.$crisp = [['safe', true], ['do', 'chat:close'], ['do', 'chat:hide']];
+  window.CRISP_WEBSITE_ID = '8c07b4ea-6446-4fe5-ad43-4aae73ca6652';
+
+  (function () {
+    const d = document;
+    const s = d.createElement('script');
+
+    s.src = 'https://client.crisp.chat/l.js';
+    s.async = 1;
+    d.getElementsByTagName('head')[0].appendChild(s);
+  })();
+};

package/store/products.js

@@ -23,7 +23,10 @@ export const state = () => ({
 export const getters = {
   products: ({ products }) => products,
   types: ({ types }) => types || [],
-  colors: ({ colors }) => colors || [],
+  colors: ({ colors, colorGroups }) => {
+    const colorGroupsSet = new Set(colorGroups?.map(g => g._id));
+    return colors.filter(c => c.colorGroups?.some(g => colorGroupsSet.has(g)));
+  },
   colorGroups: ({ colorGroups }) => colorGroups || [],
   brands: ({ brands }) => brands || [],
   categories: ({ categories }) => categories || [],