@lancom/shared 0.0.280 → 0.0.282

package/components/editor/editor_workspace/editor-workspace.vue

@@ -6,6 +6,7 @@
       <tabs
         v-if="productDetailsLoaded"
         :tabs="productSides"
+        :selected="editableSide.id"
         :full-width="false"
         @select="selectTab">
         <template
@@ -90,8 +91,9 @@
       }">
       <editor-print-area-options
         v-if="productDetailsLoaded"
+        ref="areaOptions"
         :product="product"
-        :selected="selectedPrintArea._id"
+        :selected="selectedPrintArea && selectedPrintArea._id"
         :side="editableSide.id"
         @select="selectPrintArea"
         @option-mouseover="toogleBoundBox(true, $event)"
@@ -109,7 +111,7 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import EditorPrintAreaOptions from '@lancom/shared/components/editor/editor_print_area_options/editor-print-area-options';
-import EditorPricing from '@lancom/shared/components/editor/editor_pricing/editor-pricing';
+import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import Tabs from '@lancom/shared/components/common/tabs';
 import EditorWorkspaceSide from './editor_workspace_side/editor-workspace-side';
 
@@ -156,7 +158,9 @@ export default {
       'setEditablePrintArea'
     ]),
     selectTab(value) {
-      this.setEditableSide({ id: value }); // todo improve later by adding real sides
+      if (this.editableSide.id !== value) {
+        this.setEditableSide({ id: value });
+      }
     },
     toggleSide() {
       this.setEditableSide({

package/components/editor/editor_workspace/editor_workspace_side/editor-workspace-side.vue

@@ -25,7 +25,7 @@
       </div>
     </div>
     <div
-      v-if="!editableLayers.length && fabricHelper"
+      v-if="!printAreaLayers.length && fabricHelper"
       class="EditorWorkspaceSide__placeholder"
       :class="{ tighten: printAreaIsSmall }"
       ignore-document-click
@@ -89,7 +89,7 @@ export default {
       type: Object
     },
     printAreaSize: {
-      type: Object,
+      type: String | Object,
       required: true
     },
     zoomSize: {
@@ -121,6 +121,9 @@ export default {
       'editorSize',
       'editModeSelectedLayer'
     ]),
+    printAreaLayers() {
+      return this.editableLayers.filter(l => l.printArea === this.printArea._id);
+    },
     deleteButtonPosition() {
       return this.deleteButtonPos ? {
         top: `${this.deleteButtonPos.y}px`,
@@ -151,7 +154,8 @@ export default {
       );
     },
     printAreaIsSmall() {
-      return this.printAreaSize?.alias === 'rect10';
+      const code = this.printAreaSize?.alias || this.printAreaSize;
+      return code === 'rect10';
     },
     backgroundColor() {
       return this.backgroundImageLoaded && this.editableColor?.rgb;
@@ -174,7 +178,6 @@ export default {
       this.redrawWithThrottle();
     },
     printArea(value) {
-      console.log(value);
       this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
       this.redraw();
     },
@@ -281,23 +284,16 @@ export default {
       await this.addLayersToCanvas();
       this.drawingInProcess = false;
       this.saveLayersAsImageWithDebounce();
-      this.checkBoundingIntersection();
-    },
-    addLayersToCanvas() {
-      return this.editableLayers.reduce(async (promise, layer) => {
-        await promise;
-        return new Promise(resolve => {
-          this.fabricHelper.createObject({
-            layer,
-            active: this.isLayerSelected(layer)
-          }).then(obj => {
-            resolve();
-          });
-        });
-      }, Promise.resolve());
     },
-    checkBoundingIntersection() {
-      this.fabricHelper.checkAnyBoundingIntersection();
+    async addLayersToCanvas() {
+      const layers = this.editableLayers.filter(l => l.sideId === this.side);
+      for (const layer of layers) {
+        const params = {
+          layer,
+          active: this.isLayerSelected(layer)
+        };
+        await this.fabricHelper.createObject(params);
+      }
     },
     isLayerSelected(layer) {
       return this.selectedLayer && this.selectedLayer.createdAt === layer.createdAt;
@@ -326,6 +322,7 @@ export default {
       this.setLayersThumbnail({ side: this.side, value: image });
     },
     createTextLayer() {
+      window.scrollTo(0, 0);
       this.createLayer({ type: 'text', isEditMode: true });
     },
     setDeleteButtonPosition(pos) {

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -64,7 +64,7 @@
     background: #FFF;
     box-shadow: $elevation2;
     overflow: hidden;
-    z-index: 104;
+    z-index: 99999;
     padding-bottom: 78px;
     transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1);
   }
@@ -75,7 +75,7 @@
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, .3);
-    z-index: 103;
+    z-index: 99998;
     transition: opacity .4s cubic-bezier(0.23, 1, 0.32, 1);
   }
   &__close {

package/components/modals/cart_modal/cart-modal.vue

@@ -31,7 +31,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import Cart from '@/components/checkout/cart/cart';
+import Cart from '@lancom/shared/components/checkout/cart/cart';
 
 export default {
   name: 'CartModal',

package/components/modals/order_modal/order-modal.vue

@@ -335,6 +335,12 @@ export default {
         this.$set(this.form, 'postcode', suburb.postcode);
         this.$set(this.form, 'city', suburb.locality);
         this.$set(this.form, 'country', suburb.country);
+        if (suburb.addressLine1) {
+          this.$set(this.address, 'addressLine1', suburb.addressLine1);
+        }
+        if (suburb.addressLine2) {
+          this.$set(this.address, 'addressLine2', suburb.addressLine2);
+        }
       }
     },
     handleSuburbChange(suburb) {

package/components/modals/payment_modal/payment-modal.vue

@@ -104,7 +104,7 @@ export default {
   data() {
     return {
       processing: false,
-      loadingCard: false,
+      loadingCard: true,
       form: {},
       fields: null,
       agreeTermsAndCondition: false,
@@ -113,7 +113,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'payment']),
+    ...mapGetters(['shop', 'country', 'payment', 'currency']),
     ...mapGetters('order', ['orderData']),
     isVisibleChargeMessage() {
       return this.isSuccessOrderCharge || this.isFailedOrderCharge;
@@ -152,7 +152,7 @@ export default {
     ...mapMutations('product', ['clearTemplate']),
     ...mapMutations('layers', ['resetLayers']),
     initedCard() {
-      this.loadingCard = true;
+      this.loadingCard = false;
     },
     handleErrors(err) {
       // err.messages.forEach(({ message }) => this.$toastr.e(message));
@@ -165,6 +165,7 @@ export default {
           card,
           shop: this.shop._id,
           country: this.country?._id,
+          currency: this.currency?.isoCode,
           payment: this.payment,
           recaptchaToken: await this.getRecaptcha('order_payment')
         };

package/components/order/order_payment/order-payment.vue

@@ -24,12 +24,12 @@
       </div>
       <div class="OrderPrice__content">
         <div>
-          <payment-cart
+          <payment-card
             ref="paymentCart"
             :amount="model.totalGST"
             :has-spinner="false"
             :payment-data="order.shippingAddress">
-          </payment-cart>
+          </payment-card>
           <div
             v-if="errorMessage"
             class="OrderPayment__error">
@@ -51,13 +51,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
-import PaymentCart from '@lancom/shared/components/common/payment/payment_card/pinpayment/pinpayment';
+import PaymentCard from '@lancom/shared/components/common/payment/payment_card/payment-card';
 import PaymentSuccess from '@lancom/shared/components/common/payment/payment_success/payment-success';
 
 export default {
   name: 'OrderPayment',
   components: {
-    PaymentCart,
+    PaymentCard,
     PaymentSuccess
   },
   props: {
@@ -77,7 +77,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'payment']),
+    ...mapGetters(['shop', 'country', 'currency', 'payment']),
     model() {
       return this.invoice || this.order;
     }
@@ -96,7 +96,7 @@ export default {
         if (card) {
           const { _id: invoice } = this.invoice || {};
           const recaptchaToken = await this.getRecaptcha('order_payment');
-          const payload = { invoice, card, shop: this.shop._id, country: this.country?._id, payment: this.payment, recaptchaToken };
+          const payload = { invoice, card, shop: this.shop._id, country: this.country?._id, payment: this.payment, currency: this.currency?.isoCode, recaptchaToken };
           const { paid } = await api.createOrderPayment(this.order._id, payload);
           this.model.paid = paid;
         }

package/components/product/editor_pricing/editor-pricing.scss

@@ -0,0 +1,75 @@
+@import "@/assets/scss/variables";
+.EditorPricing {
+  &__main {
+    &-alert {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 50px;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 27px;
+      background-color: $gray;
+      color: $gray_main;
+      @media (max-width: $bp-extra-small-max) {
+        height: 63px;
+        padding: 15px;
+        font-size: 16px;
+      }
+      img {
+        margin-right: 10px;
+      }
+    }
+  }
+  &__footer {
+    background: $green;
+    height: 76px;
+    padding: 0 14px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media (max-width: $bp-extra-small-max) {
+      flex-wrap: wrap;
+      justify-content: center;
+      height: auto;
+      min-height: 110px;
+    }
+
+    &-section {
+      display: flex;
+      align-items: center;
+    }
+  }
+  &__total {
+    margin-left: 38px;
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 30px;
+    text-transform: uppercase;
+    color: $black;
+    span {
+      font-weight: bold;
+    }
+  }
+  &__toggle-details {
+    font-weight: 800;
+    font-size: 16px;
+    line-height: 22px;
+    text-decoration: underline;
+    text-transform: uppercase;
+    cursor: pointer;
+    @media (max-width: $bp-extra-small-max) {
+      text-align: center;
+    }
+  }
+  &__add-to-cart-button {
+    margin-left: 30px;
+  }
+}
+::v-deep .btn-green {
+  background-color: white;
+  color: $black;
+  &.disabled {
+    background-color: $gray;
+  }
+}

package/components/product/editor_pricing/editor-pricing.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="EditorPricing__wrapper">
+    <div class="EditorPricing__main">
+      <div
+        v-if="isValidOrderQuantity && showDetails"
+        class="EditorPricing__details">
+        <editor-pricing-details />
+      </div>
+
+      <div
+        v-if="addedToCart"
+        class="EditorPricing__main-alert">
+        <img src="/images/smile.svg" />
+        Products have been added to cart
+      </div>
+
+      <div
+        v-else-if="!hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        No products selected and no prints defined
+      </div>
+
+      <div
+        v-else-if="hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        No prints defined
+      </div>
+
+      <div
+        v-else-if="!hasUsedSimpleProducts && layers.length"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        No products selected to view price
+      </div>
+
+      <div
+        v-else-if="!isValidMiltipackOrderQuantity"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+         bulk pack {{ multipack.qty }} - add more x {{ multipack.qty - usedSimpleProductsQuantity }}
+      </div>
+
+      <div
+        v-else-if="!isValidOrderQuantity && isValidBigSizeOrderQuantity && minimumOrderQuantity > 1"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        Minimum order of these items must be {{ minimumOrderQuantity }} or more
+      </div>
+
+      <div
+        v-else-if="!isValidBigSizeOrderQuantity"
+        class="EditorPricing__main-alert">
+        <img src="/images/sad.svg" />
+        Minimum order of 5XL-7XL should be 50%
+      </div>
+
+      <div
+        v-else-if="isValidOrderQuantity"
+        class="EditorPricing__main-alert">
+        <img src="/images/smile.svg" />
+        All good to go!
+      </div>
+
+      <div class="EditorPricing__footer">
+        <div class="EditorPricing__footer-section">
+          <i class="icon-close-r"></i>
+          <div class="EditorPricing__total">
+            Pending:
+            <span v-if="isValidOrderQuantity && productPricing">
+              {{ totalPrice | price(currency) }}
+            </span>
+            <span v-else>
+              -
+            </span>
+          </div>
+        </div>
+        <div class="EditorPricing__footer-section">
+          <div
+            v-if="isValidOrderQuantity"
+            class="lc_medium16 EditorPricing__toggle-details"
+            @click="toggleDetails">
+            {{ showDetails ? 'Hide' : 'Show' }} detail
+          </div>
+          <btn
+            v-if="hasCartBtn"
+            btn-class="green"
+            btn-label="Add to cart"
+            :btn-disabled="addToCartDisabled"
+            class="EditorPricing__add-to-cart-button"
+            @onclick="proceedToCard" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import debounce from 'lodash.debounce';
+import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
+import EditorPricingDetails from '@lancom/shared/components/editor/editor_pricing/editor_pricing_details/editor-pricing-details';
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
+
+export default {
+  name: 'EditorPricing',
+  mixins: [addToCartMixin],
+  filters: {
+    price,
+    tax,
+    sizesRange,
+    printsRange
+  },
+  components: {
+    EditorPricingDetails
+  },
+  data() {
+    return {
+      price: null,
+      showDetails: false,
+      calculatePriceWithDebounce: debounce(() => this.calculateProductPrice({ shop: this.shop, country: this.country }), 500)
+    };
+  },
+  props: {
+    hasCartBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency']),
+    ...mapGetters('product', [
+      'product',
+      'usedSimpleProducts',
+      'usedSimpleProductsQuantity',
+      'productPricing',
+      'layers',
+      'selectedPrintAreas',
+      'availablePrintTypes',
+      'isPrintPricing',
+      'minimumOrderQuantity',
+      'priceIncludeGST',
+      'multipack'
+    ]),
+    hasUsedSimpleProducts() {
+      return this.usedSimpleProducts.length > 0;
+    },
+    totalPrice() {
+      const { totalPriceWithoutTax, totalPrice } = this.productPricing;
+      return this.priceIncludeGST ? totalPrice : totalPriceWithoutTax;
+    }
+  },
+  watch: {
+    layers() {
+      this.calculatePriceWithDebounce();
+      this.addedToCart = false;
+      if (!this.layers.length) {
+        this.showDetails = false;
+      }
+    },
+    usedSimpleProducts() {
+      this.calculatePriceWithDebounce();
+      this.addedToCart = false;
+      if (!this.hasUsedSimpleProducts) {
+        this.showDetails = false;
+      }
+    },
+    selectedPrintAreas() {
+      this.calculatePriceWithDebounce();
+    },
+    availablePrintTypes() {
+      this.calculatePriceWithDebounce();
+    },
+    isPrintPricing() {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  mounted() {
+    if (this.usedSimpleProducts.length > 0) {
+      this.calculatePriceWithDebounce();
+    }
+  },
+  methods: {
+    ...mapActions('product', [
+      'calculateProductPrice'
+    ]),
+    toggleDetails() {
+      this.showDetails = !this.showDetails;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing';
+</style>

package/components/product/editor_pricing/editor_pricing_details/editor-pricing-details.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="EditorPricingDetails__wrapper">
+    <editor-pricing-details-products />
+    <editor-pricing-details-prints v-if="isPrintPricing" />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import EditorPricingDetailsProducts from './editor_pricing_details_products/editor-pricing-details-products';
+import EditorPricingDetailsPrints from './editor_pricing_details_prints/editor-pricing-details-prints';
+
+export default {
+  name: 'EditorPricingDetails',
+  components: {
+    EditorPricingDetailsProducts,
+    EditorPricingDetailsPrints
+  },
+  computed: {
+    ...mapGetters('product', [
+      'isPrintPricing'
+    ])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-pricing-details';
+</style>

package/components/product/editor_pricing/editor_pricing_details/editor_pricing_details_prints/editor-pricing-details-prints.scss

@@ -0,0 +1,41 @@
+@import '@/assets/scss/variables';
+
+.EditorPricingDetailsPrints {
+  &__wrapper td {
+      font-weight: 600;
+    border: 1px solid $gray;
+    font-size: 16px;
+    line-height: 25px;
+    text-transform: uppercase;
+    color: $black;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 2px;
+      font-size: 12px;
+    }
+    strong {
+      font-weight: bold;
+    }
+    &.disabled {
+      color: $gray_main;
+      pointer-events: none !important;
+    }
+  }
+  &__th {
+    font-weight: bold !important;
+    background: $gray;
+    @media (max-width: $bp-extra-small-max) {
+      padding: 2px;
+      font-size: 12px;
+    }
+  }
+  &__name {
+    width: 70px;
+    @media (max-width: $bp-extra-small-max) {
+      width: 30px;
+    }
+    span {
+      writing-mode: vertical-lr;
+      transform: rotate(180deg);
+    }
+  }
+}