@lancom/shared 0.0.456 → 0.0.458

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

@@ -1,48 +1,118 @@
 <template>
-  <div class="QuoteOptionView__wrapper">
-    <div class="QuoteOptionView__info">
+  <div
+    :id="`option-${option._id}`"
+    class="QuoteOptionView__wrapper"
+    :class="{ light: (!isSelected && proceedOption) }">
+    <div
+      class="QuoteOptionView__header"
+      :class="{ disabled: !isValidTotalQty }"
+      @click="toggleOption()">
+      <div class="QuoteOptionView__title">
+        <b>Option {{ option.index }}</b> - {{ option.name }}
+        <span v-if="viewedOptionsMap && !viewedOptionsMap[option._id]">NEW</span>
+      </div>
+      <div class="QuoteOptionView__proceed">
+        <CheckedIcon
+          :checked="isSelected"
+          :circle="false" />
+        <span class="QuoteOptionView__proceed-message">
+          proceed with Option {{ option.index }}
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="pricingError"
+      class="text-danger mb-3">
+      {{ pricingError }}
+    </div>
+    <div class="QuoteOptionView__table lc_table">
       <quote-view-product
         v-for="product of option.products"
         :key="product._id"
         :product="product"
+        :pricing="pricing"
+        :option="option"
+        :with-divider="false"
+        @change="updateQuotePricing()"
         class="QuoteOptionView__product" />
     </div>
-    <div class="QuoteOptionView__totals">
-      <div class="lc_regular16">
-        Products Total: <b>{{ option.productsTotal | price(currency) }}</b>
+    <div
+      class="QuoteOptionView__subtotal"
+      :class="{ selected: isSelected }">
+      <div class="QuoteOptionView__subtotal-item">
+        <div class="QuoteOptionView__subtotal-label">
+          Product cost:
+        </div>
+        <div class="QuoteOptionView__subtotal-value">
+          {{ productsTotal | price }}
+        </div>
       </div>
-      <div class="lc_regular16">
-        Prints Total: <b>{{ option.printsTotal | price(currency) }}</b>
+      <div class="QuoteOptionView__subtotal-item">
+        <div class="QuoteOptionView__subtotal-label">
+          Print cost:
+        </div>
+        <div class="QuoteOptionView__subtotal-value">
+          {{ option.printsTotal | price }}
+        </div>
       </div>
-      <div class="lc_regular16">
-        Shipping Total: <b>{{ option.shippingTotal | price(currency) }}</b>
+      <div class="QuoteOptionView__subtotal-item">
+        <div class="QuoteOptionView__subtotal-label">
+          Other cost:
+        </div>
+        <div class="QuoteOptionView__subtotal-value">
+          {{ customProductsTotal | price }}
+        </div>
       </div>
-      <div class="lc_regular16">
-        Total ex {{ taxName }}: <b>{{ option.total | price(currency) }}</b>
+      <div class="QuoteOptionView__subtotal-item">
+        <div class="QuoteOptionView__subtotal-label">
+          SUBTOTAL:
+        </div>
+        <div class="QuoteOptionView__subtotal-value">
+          {{ (option.productsTotal + option.printsTotal) | price }} + GST
+        </div>
       </div>
-      <div class="lc_regular16">
-        {{ taxName }}: <b>{{ optionGst(option) | price(currency) }}</b>
+      <div class="QuoteOptionView__subtotal-item">
+        <div class="QuoteOptionView__subtotal-label">
+          Shipping:
+        </div>
+        <div class="QuoteOptionView__subtotal-value">
+          {{ option.shippingTotal | price }} + GST
+        </div>
       </div>
-      <div class="lc_regular16">
-        Total inc {{ taxName }}: <b>{{ option.total | tax(gstTax) | price(currency) }}</b>
+      <div class="QuoteOptionView__subtotal-item">
+        <div class="QuoteOptionView__subtotal-label">
+          TOTAL INC. GST:
+        </div>
+        <div class="QuoteOptionView__subtotal-value">
+          {{ option.totalGST | price }}
+        </div>
       </div>
     </div>
+    <div
+      v-if="option.message"
+      class="QuoteOptionView__message">
+      <rich-text :text="option.message" />
+    </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';
+import { mapGetters, mapActions } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import RichText from '@lancom/shared/components/common/rich-text';
+import { price } from '@lancom/shared/assets/js/utils/filters';
+import QuoteViewProduct from '@lancom/shared/components/quotes/quote_view_preview/quote_view_product/quote-view-product';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
 
 export default {
   name: 'LancomQuoteOptionView',
   filters: {
-    tax,
     price
   },
   components: {
-    QuoteViewProduct
+    QuoteViewProduct,
+    CheckedIcon,
+    RichText
   },
   props: {
     quote: {
@@ -54,15 +124,121 @@ export default {
       require: true
     }
   },
+  data() {
+    return {
+      pricing: null,
+      pricingError: null
+    };
+  },
+  watch: {
+    pricing() {
+      this.option.total = this.pricing?.totalPriceWithoutTax || 0;
+      this.option.totalGST = this.pricing?.totalPrice || 0;
+      this.option.productsTotal = this.pricing?.products?.products?.totalPriceWithoutTax || 0;
+      this.option.printsTotal = this.pricing?.products?.prints?.totalPriceWithoutTax || 0;
+      this.updateShippingTotal();
+    }
+  },
   computed: {
-    ...mapGetters([
-      'gstTax',
-      'taxName'
-    ])
+    ...mapGetters(['gstTax']),
+    ...mapGetters('quote', ['proceedOption', 'viewedOptionsMap']),
+    isValidTotalQty() {
+      return !this.option.products?.some(product => {
+        const amount = product.simpleProducts?.reduce((sum, { amount }) => sum + (+amount || 0), 0);
+        return product.totalAmount > 0 && product.totalAmount !== amount;
+      });
+    },
+    defaultShippingTotal() {
+      return this.pricing?.shipping?.totalPriceWithoutTax || 0;
+    },
+    suppliersWithRates() {
+      return this.option.suppliersWithRates || [];
+    },
+    isSelected() {
+      return this.proceedOption === this.option;
+    },
+    customProductsTotal() {
+      return (this.option.products || []).reduce((total, { isCustom, simpleProducts }) => {
+        if (isCustom) {
+          const { amount, productCost } = simpleProducts[0] || {};
+          const price = simpleProducts[0] ? (+amount || 0) * (+productCost || 0) : 0;
+          return total + price;
+        }
+
+        return total;
+      }, 0);
+    },
+    productsTotal() {
+      return +this.option.productsTotal - this.customProductsTotal;
+    }
   },
   methods: {
-    optionGst(option) {
-      return tax(option.total, this.gstTax) - option.total;
+    ...mapActions('quote', ['selectOption']),
+    toggleOption() {
+      const option = this.isSelected ? null : this.option;
+      this.selectOption({ option });
+    },
+    updateShippingTotal() {
+      this.option.shippingTotal = typeof this.option.adminShippingTotal === 'number' ? this.option.adminShippingTotal : this.defaultShippingTotal;
+    },
+    async updateQuotePricing() {
+      try {
+        await this.calculateQuotePricing();
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async calculateQuotePricing(includeSuppliersWithRates) {
+      console.log('calculateQuotePricing...', includeSuppliersWithRates);
+      const { address, shop, country, currency } = this.quote;
+      const { products, adminShippingTotal } = this.option;
+      const payload = {
+        entities: (products || []).map(p => ({
+          _id: p._id,
+          brand: p.product?.brand,
+          prints: [
+            ...p.prints
+          ].map(print => ({
+            ...print,
+            printCost: [{ min: 0, price: +(print.printCost || 0) }],
+            setupCost: +(print.setupCost || 0)
+          })),
+          printSurcharge: p.printSurcharge || 0,
+          simpleProducts: (p.simpleProducts || []).reduce((list, sp) => {
+            if (sp.amount > 0) {
+              list.push({
+                guid: sp.guid,
+                amount: sp.amount,
+                weight: p.product?.weight,
+                volume: p.product?.volume,
+                pricing: sp.productCost ? [{ min: 0, price: +(sp.productCost || 0) }] : sp.pricing,
+                unprintedPricing: sp.productCost ? [{ min: 0, price: +(sp.productCost || 0) }] : sp.unprintedPricing
+              });
+            }
+            return list;
+          }, [])
+        })),
+        postcode: address?.postcode,
+        adminShippingTotal,
+        suppliersWithRates: includeSuppliersWithRates ? this.suppliersWithRates : null,
+        selectedSuppliersWithRates: this.suppliersWithRates,
+        country: country?._id || country,
+        currency: currency?._id || currency
+      };
+      if (shop) {
+        try {
+          const pricing = await api.calculateProductPrice(payload, shop._id || shop);
+          this.pricing = pricing;
+          this.$set(this.option, 'suppliersWithRates', pricing.shipping?.suppliersWithRates || []);
+          this.pricingError = null;
+        } catch (e) {
+          this.pricing = null;
+          this.pricingError = e.response?.data?.error;
+        }
+      } else {
+        this.pricing = null;
+        this.pricingError = null;
+      }
     }
   }
 };

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

@@ -0,0 +1,33 @@
+@import "@/assets/scss/variables";
+
+.QuoteViewAccept {
+  &__wrapper {
+    padding: 20px !important;
+    background-color: $black;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+    }
+    ::v-deep {
+      .Checkbox__label:before {
+        background-color: $white;
+      }
+    }
+  }
+  &__message {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 19px;
+    color: $gray;
+    text-transform: none;
+    position: relative;
+    top: 3px;
+    left: -5px;
+    cursor: pointer;
+    a {
+      color: $gray;
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="QuoteViewAccept__wrapper">
+    <div>
+      <label class="form-label">
+        <checkbox v-model="accept" />
+        <span class="QuoteViewAccept__message">
+          I accept the <a href="/info/terms-of-service" target="_blank">terms and conditions</a>.
+        </span>
+      </label>
+    </div>
+    <div>
+      <btn
+        :btn-disabled="!accept || !proceedOption || !isValidProceedOptionQty"
+        btn-class="green"
+        btn-label="ACCEPT"
+        @onclick="showQuotePaymentModal" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import QuoteViewPaymentModal from './../quote_view_payment_modal/quote-view-payment-modal';
+import QuoteViewInvalidStockModal from './../quote_view_invalid_stock_modal/quote-view-invalid-stock-modal';
+
+export default {
+  name: 'QuoteViewAccept',
+  data() {
+    return {
+      accept: false
+    };
+  },
+  computed: {
+    ...mapGetters('quote', ['quote', 'proceedOption', 'proceedOptionNotValidStock']),
+    isValidProceedOptionQty() {
+      return !this.proceedOption?.products?.some(product => {
+        const amount = product.simpleProducts?.reduce((sum, { amount }) => sum + (+amount || 0), 0);
+        return product.totalAmount > 0 && product.totalAmount !== amount;
+      });
+    }
+  },
+  mounted() {
+    if (this.$route.query.checkPayment) {
+      this.showQuotePaymentModal(true);
+    }
+  },
+  methods: {
+    showQuotePaymentModal(skipCheckStock) {
+      if (!skipCheckStock && this.proceedOptionNotValidStock && !this.quote.ignoreStockAvailability) {
+        return this.showQuoteNotValidStockModal();
+      }
+      const params = {
+        name: 'quote-payment',
+        root: this.$root,
+        width: 700,
+        height: 'auto',
+        adaptive: true,
+        // clickToClose: true,
+        transition: 'from-right-to-left'
+      };
+      this.$modal.show(QuoteViewPaymentModal, null, params, {
+        ok() {
+          this.$router.push('/');
+        }
+      });
+    },
+    showQuoteNotValidStockModal() {
+      const params = {
+        name: 'quote-invalid-stock',
+        root: this.$root,
+        width: 700,
+        height: 'auto',
+        adaptive: true,
+        clickToClose: true,
+        transition: 'from-right-to-left'
+      };
+      this.$modal.show(QuoteViewInvalidStockModal, null, params);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-accept.scss';
+</style>

package/components/quotes/quote_view/quote_view_address_form/quote-view-address-form.scss

@@ -0,0 +1,17 @@
+@import "@/assets/scss/variables";
+
+.form-row--cols {
+  @media (max-width: $bp-extra-small-max) {
+    flex-direction: column;
+  }
+  .col-half {
+    @media (max-width: $bp-extra-small-max) {
+      flex-basis: 100%;
+      width: 100%;
+      margin-left: 0 !important;
+      &:nth-child(2) {
+        margin-top: 20px;
+      }
+    }
+  }
+}

package/components/quotes/quote_view/quote_view_address_form/quote-view-address-form.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="QuoteAddressForm__wrapper">
+    <div class="QuoteAddressForm__form">
+      <validation-observer
+        ref="form"
+        class="Subscribe__form-observer">
+        <div class="form-row--cols">
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="Full Name"
+            rules="required"
+            class="form-col col-half">
+            <label
+              for="fullName"
+              class="form-label">
+              Full Name
+            </label>
+            <input
+              id="fullName"
+              ref="fullName"
+              v-model="address.fullName"
+              placeholder="Full Name"
+              name="fullName"
+              type="text"
+              class="form-field labelless"
+              :class="{
+                'is-danger': errors.length,
+                filled: address.fullName
+              }"
+              @keyup.enter="$refs.phone.focus()" />
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="company"
+            class="form-col col-half">
+            <label
+              for="company"
+              class="form-label">
+              Company Name
+            </label>
+            <input
+              id="company"
+              ref="company"
+              v-model="address.company"
+              placeholder="Company Name"
+              name="company"
+              type="text"
+              class="form-field labelless"
+              :class="{
+                'is-danger': errors.length,
+                filled: address.company
+              }"
+              @keyup.enter="$refs.company.focus()" />
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+        </div>
+        <div class="form-row--cols">
+          <validation-provider
+            v-slot="{ errors }"
+            tag="div"
+            name="email"
+            rules="required|email"
+            class="form-col col-half">
+            <label
+              for="email"
+              class="form-label">
+              Email
+            </label>
+            <input
+              id="email"
+              ref="email"
+              v-model="address.email"
+              placeholder="Email"
+              name="email"
+              type="email"
+              class="form-field labelless"
+              :class="{
+                'is-danger': errors.length,
+                filled: address.email
+              }"
+              @keyup.enter="$refs.email.focus()" />
+            <span
+              v-if="errors.length"
+              class="form-help is-danger">
+              {{ errors[0] }}
+            </span>
+          </validation-provider>
+          <phone-input :item="address" class="form-col col-half" />
+        </div>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="Address line 1"
+          rules="required"
+          class="form-row">
+          <label
+            for="addressLine1"
+            class="form-label">
+            Address line 1
+          </label>
+          <input
+            id="addressLine1"
+            ref="addressLine1"
+            v-model="address.addressLine1"
+            name="addressLine1"
+            type="text"
+            class="form-field labelless"
+            placeholder="Address line 1"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.addressLine1
+            }"
+            @keyup.enter="$refs.addressLine1.focus()" />
+          <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">
+          <label
+            for="addressLine2"
+            class="form-label">
+            Address line 2
+          </label>
+          <input
+            id="addressLine2"
+            ref="addressLine2"
+            v-model="address.addressLine2"
+            name="addressLine2"
+            type="text"
+            class="form-field labelless"
+            placeholder="Address line 2"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.addressLine2
+            }"
+            @keyup.enter="$refs.addressLine2.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <div class="form-row--cols mb-1">
+          <postcode-select
+            class="form-col col-half mb-1"
+            :suburb="address"
+            :disabled="true"
+            :labelless="true"
+            placeholder="Suburb">
+          </postcode-select>
+          <div class="form-col mb-1 col-half">
+            <label
+              for="country"
+              class="form-label">
+              Country
+            </label>
+            <input
+              id="country"
+              ref="country"
+              value="Only Australia"
+              name="country"
+              type="country"
+              class="form-field filled labelless"
+              disabled />
+          </div>
+        </div>
+        <validation-provider
+          v-slot="{ errors }"
+          tag="div"
+          name="additionalInfo"
+          class="form-row">
+          <label
+            for="additionalInfo"
+            class="form-label">
+            Additional Info
+          </label>
+          <input
+            id="additionalInfo"
+            ref="additionalInfo"
+            v-model="address.additionalInfo"
+            name="additionalInfo"
+            placeholder="Additional Info"
+            type="text"
+            class="form-field labelless"
+            :class="{
+              'is-danger': errors.length,
+              filled: address.additionalInfo
+            }"
+            @keyup.enter="$refs.additionalInfo.focus()" />
+          <span
+            v-if="errors.length"
+            class="form-help is-danger">
+            {{ errors[0] }}
+          </span>
+        </validation-provider>
+        <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 PostcodeSelect from '@lancom/shared/components/common/postcode_select/postcode-select';
+import PhoneInput from '@lancom/shared/components/common/phone_input/phone-input';
+
+export default {
+  name: 'QuoteViewAddressForm',
+  components: {
+    PostcodeSelect,
+    PhoneInput
+  },
+  props: {
+    address: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    async goToPayment() {
+      const isValid = await this.$refs.form.validate();
+      if (!isValid) {
+        return;
+      }
+      this.$emit('submit');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'quote-view-address-form.scss';
+</style>