@lancom/shared 0.0.62 → 0.0.66

package/components/quotes/quote_request_modal/quote-request-modal.scss

@@ -0,0 +1,5 @@
+.QuoteRequestModal {
+  &__wrapper  {
+    border-radius: 0px;
+  }
+}

package/components/quotes/quote_request_modal/quote-request-modal.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="lc_modal__wrapper QuoteRequestModal__wrapper">
+    <div class="lc_modal__header lc_modal__header--small-padding pull-left">
+      <i
+        class="icon-cancel lc_modal__close--dark"
+        @click="$emit('close')"></i>
+    </div>
+    <div class="lc_modal__content">
+      <quote-request @added="$emit('close', $event)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import QuoteRequest from './../quote_request/quote-request';
+
+export default {
+  name: 'QuoteRequestModal',
+  components: {
+    QuoteRequest
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-request-modal.scss';
+</style>

package/components/quotes/quote_view/quote-view.mixin.js

@@ -0,0 +1,52 @@
+import { mapGetters, mapActions } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import { price, shortDate, tax } from '@lancom/shared/assets/js/utils/filters';
+import { convertQuoteToOrder } from '@lancom/shared/assets/js/utils/quote';
+
+export default {
+  filters: {
+    price,
+    shortDate,
+    tax,
+    printLabel(print) {
+      const { printArea, printSize, printType } = print;
+      return `${printType?.name}. ${printArea?.name}. ${printSize?.name}`;
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      order: null,
+      errorMessage: null
+    };
+  },
+  computed: {
+    ...mapGetters('quote', ['quote', 'option', 'proceedOption', 'selectedOption', 'depositInfo', 'shopContacts', 'quoteAddress', 'quoteId', 'options', 'gstTax']),
+    ...mapGetters(['shop'])
+  },
+  methods: {
+    ...mapActions('quote', ['selectOption', 'clear']),
+    optionGst(option) {
+      return tax(option.total, this.gstTax) - option.total;
+    },
+    async convertToOrder(option) {
+      try {
+        this.processing = true;
+        this.order = await this.createOrder(option);
+        this.clear();
+      } catch (e) {
+        const { message } = (e.response && e.response.data) || e;
+        this.errorMessage = message || 'Save quote error';
+      } finally {
+        this.processing = false;
+      }
+    },
+    createOrder(option) {
+      const orderData = {
+        shop: this.shop._id,
+        ...convertQuoteToOrder(this.quote, option)
+      };
+      return api.createOrder(orderData, this.shop._id);
+    }
+  }
+};

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

@@ -0,0 +1,16 @@
+.QuoteView {
+  &__wrapper {
+    margin-top: 50px;
+  }
+  &__option {
+    border: 1px solid #dee2e6;
+    padding: 30px;
+    margin-bottom: 50px;
+  }
+  &__logo {
+    margin-bottom: 20px;
+  }
+}
+.uppercase {
+    text-transform: uppercase;
+}

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="QuoteView__wrapper">
+    <div
+      v-if="quote.shop.logo"
+      class="QuoteView__logo">
+      <img :src="quote.shop.logo.small" />
+    </div>
+    <div class="d-flex justify-content-between align-items-center">
+      <div>
+        <h2> {{ quote.shop.name }} </h2>
+        <h4 v-if="shopContacts"> ABN: {{ shopContacts.abn }} </h4>
+      </div>
+      <h1 class="text-secondary">
+        QUOTE
+      </h1>
+    </div>
+    <div class="d-flex justify-content-between align-items-center">
+      <div v-if="shopContacts">
+        <div>{{ shopContacts.company }}</div>
+        <div>{{ shopContacts.address }}</div>
+        <div>{{ shopContacts.phone }}</div>
+      </div>
+      <div>
+        <div>DATE: {{ quote.createdAt | shortDate }}</div>
+        <div>QUOTE ID: {{ quoteId }}</div>
+      </div>
+    </div>
+
+    <table class="mt-4 table table-bordered">
+      <tr>
+        <td>
+          <div><b>QUOTE</b></div>
+          <div>{{ quote.fullName }}</div>
+          <div v-if="quote.company">{{ quote.company }}</div>
+          <div v-if="quote.phone">{{ quote.phone }}</div>
+          <div>{{ quote.email }}</div>
+          <div>{{ quoteAddress }}</div>
+          <div>{{ quote.additionalInfo }}</div>
+        </td>
+        <td class="w-50">
+          <div><b>DIRECT DEPOSIT DETAILS</b></div>
+          <div>Bank: {{ depositInfo.bank }}</div>
+          <div>Account name: {{ depositInfo.accountName }}</div>
+          <div>BSB: {{ depositInfo.BSB }}</div>
+          <div>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"
+        class="QuoteView__option" />
+    </div>
+    <h6
+      v-if="quote.expiredAt"
+      class="mt-3">
+      THIS QUOTE IS VALID UNTIL {{ quote.expiredAt | shortDate }}
+    </h6>
+  </div>
+</template>
+
+<script>
+import QuoteViewMixin from './quote-view.mixin';
+import QuoteOptionView from './quote_option_view/quote-option-view';
+
+export default {
+  name: 'LancomQuoteView',
+  components: {
+    QuoteOptionView
+  },
+  mixins: [QuoteViewMixin]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view.scss';
+</style>

package/components/quotes/quote_view/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/quote_option_view/quote-option-view.vue

@@ -0,0 +1,56 @@
+<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>Products Total: <b>{{ option.productsTotal | price }}</b></div>
+      <div>Prints Total: <b>{{ option.printsTotal | price }}</b></div>
+      <div>Shipping Total: <b>{{ option.shippingTotal | price }}</b></div>
+      <div>Total ex GST: <b>{{ option.total | price }}</b></div>
+      <div>GST: <b>{{ optionGst(option) | price }}</b></div>
+      <div>Total inc GST: <b>{{ option.total | tax(gstTax) | price }}</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: {
+    option: {
+      type: Object,
+      require: true
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'gstTax'
+    ])
+  },
+  methods: {
+    optionGst(option) {
+      return tax(option.total, this.gstTax) - option.total;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-option-view.scss';
+</style>

package/components/quotes/quote_view/quote_product_color_simple_products/quote-product-color-simple-products.mixin.js

@@ -0,0 +1,37 @@
+import { getProductColorImages } from '@lancom/shared/assets/js/utils/product';
+
+export default {
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    },
+    group: {
+      type: Object,
+      required: true
+    },
+    defaultPreview: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    images() {
+      return getProductColorImages(this.group, this.group.color);
+    },
+    product() {
+      return this.group.product;
+    },
+    productsTotalPrice() {
+      return 0;
+    },
+    simpleProductsWithAmount() {
+      return this.group.simpleProducts.filter(e => e.amount > 0);
+    },
+    totalAmount() {
+      return this.simpleProductsWithAmount.reduce((amount, entity) => {
+        return amount + entity.amount;
+      }, 0);
+    }
+  }
+};

package/components/quotes/quote_view/quote_product_color_simple_products/quote-product-color-simple-products.scss

@@ -0,0 +1,95 @@
+@import "@/assets/scss/variables";
+
+.QuoteProductColorSimpleProducts {
+  &__wrapper {
+    display: flex;
+    position: relative; 
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column; 
+      align-items: center;
+    }
+  }
+  &__image-wrapper {
+    width: 70px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 200px;
+      margin-top: 20px;
+    }
+  }
+  &__info {
+    flex-grow: 1;
+    margin-left: 20px;
+    @media (max-width: $bp-medium-max) {
+      margin-left: 5px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      margin-left: 0px;
+    }
+  }
+
+  &__image {
+    width: 70px;
+    height: 70px;
+    margin-top: 20px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  &__features {
+    margin-top: 7px;
+    padding-bottom: 7px;
+    display: flex;
+    border-bottom: 1px solid #F4F4F4;
+  }
+  &__feature {
+    margin-right: 19px;
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+
+  &__sum-wrapper {
+    margin-top: 7px;
+    display: flex;
+    padding-bottom: 14px;
+    align-items: center;
+    @media (max-width: $bp-medium-max) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+  &__amount {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    &-labels {
+      margin-right: 26px;
+    }
+  }
+  &__totals {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    @media (max-width: $bp-medium-max) {
+      width: auto;
+      align-self: flex-end;
+      margin-top: 20px;
+    }
+  }
+  &__total {
+    display: flex;
+    &>div:first-child {
+      margin-right: 6px;
+    }
+  }
+
+  &__remove {
+    font-size: 20px;
+    cursor: pointer;
+  }
+}

package/components/quotes/quote_view/quote_product_color_simple_products/quote-product-color-simple-products.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="QuoteProductColorSimpleProducts__wrapper">
+    <div class="QuoteProductColorSimpleProducts__image-wrapper">
+      <div
+        class="QuoteProductColorSimpleProducts__image"
+        @click="showImage(images, 0)">
+        <product-side-with-print
+          :product="group"
+          :default-preview="defaultPreview"
+          side="front"
+          size="medium" />
+      </div>
+    </div>
+    <div class="QuoteProductColorSimpleProducts__info">
+      <div class="QuoteProductColorSimpleProducts__features">
+        <div
+          v-if="group.color"
+          class="QuoteProductColorSimpleProducts__feature">
+          <div class="lc_title-small">
+            Colour:
+          </div>
+          <div class="lc_body-small">
+            {{ group.color.name }}
+          </div>
+        </div>
+      </div>
+      <div class="QuoteProductColorSimpleProducts__sum-wrapper">
+        <div class="QuoteProductColorSimpleProducts__amount">
+          <div class="QuoteProductColorSimpleProducts__amount-labels hidden-sm-and-down">
+            <div class="lc_title-small ">
+              Size:
+            </div>
+            <div class="lc_title-small mt-8">
+              Qty:
+            </div>
+          </div>
+          <quote-product-color-simple-product
+            v-for="simpleProduct in group.simpleProducts"
+            :key="simpleProduct._id"
+            :simple-product="simpleProduct" />
+        </div>
+        <div class="QuoteProductColorSimpleProducts__totals">
+          <div class="QuoteProductColorSimpleProducts__total">
+            <div class="lc_title-small">
+              Total Qty:
+            </div>
+            <div class="lc_body-small">
+              {{ group.amount }}
+            </div>
+          </div>
+          <div class="QuoteProductColorSimpleProducts__total mt-6">
+            <div class="lc_title-small">
+              Total price:
+            </div>
+            <div class="lc_body-small">
+              {{ group.productsTotal | price }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+import QuoteProductColorSimpleProduct from './quote_product_color_simple_product/quote-product-color-simple-product';
+import QuoteProductColorSimpleProducts from './quote-product-color-simple-products.mixin';
+
+export default {
+  name: 'QuoteProductColorSimpleProducts',
+  filters: {
+    price
+  },
+  components: {
+    QuoteProductColorSimpleProduct,
+    ProductSideWithPrint
+  },
+  mixins: [
+    QuoteProductColorSimpleProducts
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-product-color-simple-products.scss';
+</style>

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.scss

@@ -0,0 +1,32 @@
+@import "@/assets/scss/variables";
+
+.QuoteProductColorSimpleProduct {
+  &__wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 4px;
+  }
+  &__label {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: $black;
+    margin-bottom: 6px;
+    margin-top: 0px;
+  }
+  &__field {
+    width: 32px;
+    height: 28px;
+    background: #efefef;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: center;
+    color: #A2A2A2;
+    border-radius: 0;
+    padding: 2px !important;
+  }
+}

package/components/quotes/quote_view/quote_product_color_simple_products/quote_product_color_simple_product/quote-product-color-simple-product.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="QuoteProductColorSimpleProduct__wrapper">
+    <div class="lc_regular16 QuoteProductColorSimpleProduct__label">
+      {{ simpleProduct.size.shortName }}
+    </div>
+    <div
+      class="centered QuoteProductColorSimpleProduct__field">
+      {{ simpleProduct.amount || '-' }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuoteProductColorSimpleProduct',
+  props: {
+    simpleProduct: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-product-color-simple-product.scss';
+</style>

package/components/quotes/quote_view/quote_product_prints/quote-product-prints.scss

@@ -0,0 +1,67 @@
+@import "@/assets/scss/variables";
+
+.QuoteProductPrints {
+  &__title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 10px 0 10px 0;
+  }
+  &__table {
+    min-height: 100px;
+    width: 100%;
+    tbody {
+      @media (max-width: $bp-small-max) {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    ::v-deep {
+      tr {
+        height: 38px;
+        @media (max-width: $bp-small-max) {
+          height: auto !important;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          margin: 10px 0;
+        }
+      }
+      td {
+        border: 1px solid #efefef;
+        text-align: center;
+        vertical-align: middle;
+        @media (max-width: $bp-small-max) {
+          width: 50%;
+          padding: 5px;
+          &:last-child {
+            width: 100%;
+          }
+        }
+        strong {
+          font-weight: bold;
+        }
+        span {
+          display: block;
+          font-size: 12px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  &__head {
+    @media (max-width: $bp-small-max) {
+      display: none !important;
+    }
+  }
+  &__th {
+    font-weight: bold !important;
+    background: #efefef;
+  }
+  &__name {
+    width: 35px;
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+    }
+  }
+}

package/components/quotes/quote_view/quote_product_prints/quote-product-prints.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="QuoteProductPrints__wrapper">
+    <div class="QuoteProductPrints__title">
+      Decoration
+    </div>
+    <table class="lc_table tight-rows QuoteProductPrints__table">
+      <tbody>
+        <tr class="QuoteProductPrints__head">
+          <td class="QuoteProductPrints__th lc_title-small">
+            Type
+          </td>
+          <td class="QuoteProductPrints__th lc_title-small">
+            location
+          </td>
+          <td class="QuoteProductPrints__th lc_title-small">
+            size
+          </td>
+          <td class="QuoteProductPrints__th lc_title-small">
+            Setup cost
+          </td>
+          <td class="QuoteProductPrints__th lc_title-small">
+            QTY
+          </td>
+          <td class="QuoteProductPrints__th lc_title-small">
+            Price
+          </td>
+          <td class="QuoteProductPrints__th lc_title-small">
+            Total
+          </td>
+        </tr>
+        <quote-product-print
+          v-for="(print, index) in entity.prints"
+          :key="`${entity.guid}_${index}`"
+          :entity="entity"
+          :print="print" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import QuoteProductPrint from './quote_product_print/quote-product-print';
+
+export default {
+  name: 'QuoteProductPrints',
+  components: {
+    QuoteProductPrint
+  },
+  props: {
+    entity: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-product-prints.scss';
+</style>

package/components/quotes/quote_view/quote_product_prints/quote_product_print/quote-product-print.scss

@@ -0,0 +1,31 @@
+@import "@/assets/scss/variables";
+
+.QuoteProductPrint {
+  &__info {
+    height: 30px !important;
+    margin: -10px 0 0 0 !important;
+  }
+  &__wrapper {
+    display: contents;
+  }
+  &__content {
+    text-align: left !important;
+    &-inner {
+      display: flex;
+      margin-left: 10px;
+      b {
+        font-weight: bold;
+      }
+      a {
+        color: $black;
+      }
+    }
+    &-text {
+      max-width: 200px;
+      text-overflow: ellipsis;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}