@lancom/shared 0.0.301 → 0.0.302

package/assets/scss/_common.scss

@@ -9,6 +9,10 @@ body {
   top: 6px !important;
 }
 
+.v--modal-overlay {
+  z-index: 99999 !important;
+}
+
 .content {
   width: 100%;
   margin-top: $navbar_height;

package/components/editor/editor.vue

@@ -31,12 +31,8 @@
               :delay="{ hide: 400, show: 400 }"
               :disabled="!addToCartDisabled"
               class="Editor__add-to-cart">
-              <btn
-                btn-class="green"
-                btn-label="Add to cart"
-                :btn-disabled="addToCartDisabled"
-                class="Editor__add-to-cart-button"
-                @onclick="proceedToCard" />
+              <add-to-cart-btn
+                class="Editor__add-to-cart-button" />
               <template slot="popover">
                 <p>
                   You've not added any text or art to print. We only sell custom printed products. <br />
@@ -76,9 +72,7 @@
       name="sm"
       mode="down">
       <client-only>
-        <mobile-editor-product-details
-          :add-to-cart-disabled="addToCartDisabled"
-          @add-to-cart="proceedToCard" />
+        <mobile-editor-product-details />
       </client-only>
     </breakpoint>
   </div>
@@ -97,6 +91,7 @@ import MobileEditorProductDetails from './mobile_editor_product_details/mobile-e
 import EditorLayers from './editor_layers/editor-layers';
 import EditorWizard from './editor_wizard/editor-wizard';
 import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
+import AddToCartBtn from '@lancom/shared/components/product/add-to-cart-btn';
 
 const MIN_SCREEN_AMOUNT = 125;
 
@@ -109,7 +104,8 @@ export default {
     EditorWizard,
     MobileEditorProductDetails,
     ProductsListDropdown,
-    Tabs
+    Tabs,
+    AddToCartBtn
   },
   mixins: [
     modals,

package/components/editor/editor_layers/editor-layers.scss

@@ -16,6 +16,11 @@
       color: $grey_5;
     }
   }
+  &__close-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
   &__pricing {
     margin-top: 30px;
   }

package/components/editor/editor_layers/editor-layers.vue

@@ -13,11 +13,19 @@
           :layer="selectedLayer"
           @set-layer-field="setLayerField">
           <template v-slot:header="{ invalid }">
-            <div
-              class="lc_regular16 EditorLayers__close-editable"
-              @click="closeEditableLayer(invalid)">
-              <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
-              See all design layers
+            <div class="EditorLayers__close-wrapper">
+              <div
+                class="lc_regular16 EditorLayers__close-editable"
+                @click="closeEditableLayer(invalid)">
+                <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
+                See all design layers
+              </div>
+              <div>
+                <btn
+                  btn-class="green"
+                  btn-label="Save"
+                  @onclick="closeEditableLayer(invalid)" />
+              </div>
             </div>
           </template>
         </component>

package/components/editor/editor_product_details/editor-product-details.vue

@@ -91,6 +91,7 @@
         :key="side"
         :product="previewPrintProduct"
         :side="side"
+        :default-preview="false"
         size="large" />
       <div
         class="EditorProductDetails__product-sides-toggle"

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

@@ -159,6 +159,7 @@ export default {
       }
     },
     toggleSide() {
+      this.setEditablePrintArea(null);
       this.setEditableSide({
         id: this.editableSide.id === 'front' ? 'back' : 'front'
       });

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

@@ -21,9 +21,14 @@
       </div>
       <div
         class="MobileEditorProductDetails__menu-action cart"
-        :class="{ invalidate: addToCartDisabled }"
-        @click="addToCart">
-        <i class="icon-bag MobileEditorProductDetails__menu-action-icon"></i>
+        :class="{ invalidate: addToCartDisabled || addingToCart }"
+        @click="saveToCart">
+        <spinner
+          v-if="addingToCart"
+          class="MobileEditorProductDetails__menu-action-icon" />
+        <i
+          v-else
+          class="icon-bag MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
           Add to Cart
         </span>
@@ -60,8 +65,8 @@
             @click="hide"></i>
         </div>
         <div class="MobileEditorProductDetails__content custom-scrollbar-container">
-          <editor-workspace v-if="currentTab === 'details'" />
-          <editor-layers v-if="currentTab === 'layers'" />
+          <editor-workspace v-show="currentTab === 'details'" />
+          <editor-layers v-show="currentTab === 'layers'" />
         </div>
       </div>
     </transition-group>
@@ -71,41 +76,36 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 import EditorWorkspace from '../editor_workspace/editor-workspace';
 import EditorLayers from '../editor_layers/editor-layers';
 
-const { mapMutations } = createNamespacedHelpers('product');
+const { mapMutations, mapGetters } = createNamespacedHelpers('product');
 
 export default {
   name: 'MobileEditorProductDetails',
+  mixins: [addToCartMixin],
   components: {
     EditorWorkspace,
     EditorLayers
   },
-  props: {
-    addToCartDisabled: {
-      type: Boolean,
-      required: true
-    }
-  },
-
   data() {
     return {
       isOpen: false,
       currentTab: null
     };
   },
-
+  computed: {
+    ...mapGetters(['selectedLayer', 'editablePrintArea'])
+  },
   mounted() {
     EventBus.$on('focus-on-default-product', this.focusOnDefaultProduct);
   },
-
   beforeDestroy() {
     EventBus.$off('focus-on-default-product', this.focusOnDefaultProduct);
   },
-
   methods: {
-    ...mapMutations(['setEditModeSelectedLayer']),
+    ...mapMutations(['setEditModeSelectedLayer', 'removeTemplateLayer', 'setSelectedLayer']),
     focusOnDefaultProduct() {
       this.show('details');
     },
@@ -126,15 +126,19 @@ export default {
       });
     },
     hide() {
+      if (this.selectedLayer?.type === 'text' &&  !this.selectedLayer.copy) {
+        this.removeTemplateLayer(this.selectedLayer);
+      }
+      this.setSelectedLayer(null);
       this.isOpen = false;
       this.currentTab = null;
     },
-    addToCart() {
+    async saveToCart() {
       if (this.addToCartDisabled) {
         return;
       }
+      await this.proceedToCard();
       this.hide();
-      this.$emit('add-to-cart');
     }
   }
 };

package/components/order/order_view/order-view.vue

@@ -13,7 +13,7 @@
         <h4
           v-if="shopContacts"
           class="lc_h4">
-          ABN: {{ shopContacts.abn }}
+          {{ abnLabel }}: {{ shopContacts.abn }}
         </h4>
       </div>
       <div>
@@ -226,6 +226,9 @@ export default {
     bsbLabel() {
       return this.MESSAGES.DIRECT_DEPOSIT_BSB || 'BSB';
     },
+    abnLabel() {
+      return this.MESSAGES.ABN || 'ABN';
+    },
   }
 };
 </script>

package/components/product/add-to-cart-btn.vue

@@ -0,0 +1,18 @@
+<template>
+  <btn
+    btn-class="green"
+    btn-label="Add to cart"
+    :btn-disabled="addToCartDisabled"
+    :btn-processing="addingToCart"
+    @onclick="proceedToCard" />
+</template>
+
+<script>
+import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
+
+export default {
+  name: 'AddToCartBtn',
+  mixins: [addToCartMixin]
+};
+</script>
+

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

@@ -22,7 +22,7 @@
       </div>
 
       <div
-        v-else-if="hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
+        v-else-if="hasUsedSimpleProducts && ((!isValidPrintOnly || !layers.length && isPrintPricing))"
         class="EditorPricing__main-alert">
         <img src="/images/sad.svg" />
         No prints defined
@@ -83,13 +83,9 @@
             @click="toggleDetails">
             {{ showDetails ? 'Hide' : 'Show' }} detail
           </div>
-          <btn
+          <add-to-cart-btn
             v-if="hasCartBtn"
-            btn-class="green"
-            btn-label="Add to cart"
-            :btn-disabled="addToCartDisabled"
-            class="EditorPricing__add-to-cart-button"
-            @onclick="proceedToCard" />
+            class="EditorPricing__add-to-cart-button" />
         </div>
       </div>
     </div>
@@ -100,6 +96,7 @@
 import { mapGetters, mapActions } from 'vuex';
 import debounce from 'lodash.debounce';
 import { price, sizesRange, printsRange, tax } from '@lancom/shared/assets/js/utils/filters';
+import AddToCartBtn from '@lancom/shared/components/product/add-to-cart-btn';
 import EditorPricingDetails from '@lancom/shared/components/editor/editor_pricing/editor_pricing_details/editor-pricing-details';
 import addToCartMixin from '@lancom/shared/mixins/add-to-cart';
 
@@ -113,7 +110,8 @@ export default {
     printsRange
   },
   components: {
-    EditorPricingDetails
+    EditorPricingDetails,
+    AddToCartBtn
   },
   data() {
     return {

package/components/products/product_list_product/product-list-product.scss

@@ -40,6 +40,11 @@
         text-transform: uppercase;
         color: $black;
       }
+      &--qty {
+        span {
+          background: #b236b9;
+        }
+      }
     }
   }
   &__colors {

package/components/products/product_list_product/product-list-product.vue

@@ -39,7 +39,7 @@
         <span>{{ product.gender }}</span>
       </div> -->
       <div
-        v-if="hasTags"
+        v-if="hasTags || product.minimumPrintOrderQuantity > 0"
         class="ProductListProduct__tag">
         <div
           v-for="tag in tags"
@@ -54,6 +54,16 @@
             {{ tag.name }}
           </span>
         </div>
+        <div
+          v-if="product.minimumPrintOrderQuantity > 0"
+          class="ProductListProduct__tag-item ProductListProduct__tag-item--qty">
+          <span>Print Minimum: {{ product.minimumPrintOrderQuantity }}</span>
+        </div>
+        <div
+          v-if="product.minimumPrintOrderQuantity > 0"
+          class="ProductListProduct__tag-item ProductListProduct__tag-item--qty">
+          <span>{{ product.printOnly ? 'No Blanks' : `Blank Minimum: ${product.minimumOrderQuantity}` }}</span>
+        </div>
       </div>
     </a>
     <div class="ProductListProduct__info">

package/mixins/add-to-cart.js

@@ -4,7 +4,8 @@ import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
 export default {
   data() {
     return {
-      addedToCart: false
+      addedToCart: false,
+      addingToCart: false
     };
   },
   computed: {
@@ -28,6 +29,9 @@ export default {
     isValidOrderQuantity() {
       return this.isValidBigSizeOrderQuantity && this.isValidMiltipackOrderQuantity && (!this.minimumOrderQuantity || this.usedSimpleProductsQuantity >= this.minimumOrderQuantity);
     },
+    isValidPrintOnly() {
+      return !this.product.printOnly || this.template.layers.length > 0;
+    },
     isValidBigSizeOrderQuantity() {
       return this.usedSimpleProductsQuantity ? ((this.usedBigSizeSimpleProductsQuantity / this.usedSimpleProductsQuantity * 100) <= 50) : true;
     },
@@ -35,7 +39,7 @@ export default {
       return !this.multipack || this.multipack.qty <= this.usedSimpleProductsQuantity;
     },
     addToCartDisabled() {
-      return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice || !this.isValidOrderQuantity;
+      return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice || !this.isValidOrderQuantity || !this.isValidPrintOnly;
     }
   },
   methods: {
@@ -43,25 +47,34 @@ export default {
     ...mapMutations('product', ['clearTemplate', 'setIsPrintPricing']),
     ...mapMutations('layers', ['resetLayers']),
     async proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
-      await this.addToCart({
-        entities,
-        shop: this.shop,
-        pricing: this.productPricing,
-        country: this.country,
-        currency: this.currency
-      });
-      this.$toastr.s('Products successfully added to cart');
-
-      this.clearTemplate(true);
-
-      this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
-
-      // this.resetLayers();
-      // this.setIsPrintPricing(false);
-      setTimeout(() => {
-        this.addedToCart = true;
-      });
+      if (this.addingToCart || this.addToCartDisabled) {
+        return;
+      }
+      try {
+        this.addingToCart = true;
+        const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
+        await this.addToCart({
+          entities,
+          shop: this.shop,
+          pricing: this.productPricing,
+          country: this.country,
+          currency: this.currency
+        });
+        this.$toastr.s('Products successfully added to cart');
+  
+        this.clearTemplate(true);
+  
+        this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
+  
+        // this.resetLayers();
+        // this.setIsPrintPricing(false);
+        setTimeout(() => {
+          this.addedToCart = true;
+        });
+      } catch (e) { 
+      } finally {
+        this.addingToCart = false;
+      }
     }
   }
 };

package/package.json

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

package/store/cart.js

@@ -25,8 +25,13 @@ const getEntitiesQuantity = entities => {
 const getProductsQuantities = entities => {
   const grouped = groupBy(entities, e => e.product._id);
   const quantities = Object.keys(grouped).map(_id => {
-    const [{ product: { name, minimumOrderQuantity } }] = grouped[_id];
-    return { _id, name, minimumOrderQuantity, quantity: getEntitiesQuantity(grouped[_id]) };
+    const [{ prints, product: { name, minimumOrderQuantity, minimumPrintOrderQuantity } }] = grouped[_id];
+    console.log('');
+    console.log('getProductsQuantities:', prints);
+    console.log('minimumPrintOrderQuantity: ', minimumPrintOrderQuantity);
+    console.log('minimumOrderQuantity: ', minimumOrderQuantity);
+    const minQty = (prints?.length > 0 ? minimumPrintOrderQuantity : minimumOrderQuantity) || minimumOrderQuantity;
+    return { _id, name, minimumOrderQuantity: minQty, quantity: getEntitiesQuantity(grouped[_id]) };
   });
   return quantities;
 };

package/store/product.js

@@ -123,7 +123,7 @@ export const getters = {
       .filter(printType => layersPrintTypes.includes(printType._id || printType))
       .map(printType => printType.minQuantity);
     return Math.max(
-      product.minimumOrderQuantity,
+      layersPrintTypes?.length > 0 ? product.minimumPrintOrderQuantity : product.minimumOrderQuantity,
       ...printTypesMinQuantity
     );
   },

package/store/products.js

@@ -33,6 +33,14 @@ export const getters = {
 };
 
 export const actions = {
+  async fetchBrands({ commit }, shop) {
+    const brands = await api.fetchProductsBrands(shop, { limit: 10 });
+    commit('setBrands', brands);
+  },
+  async fetchTypes({ commit }, shop) {
+    const types = await api.fetchProductsTypes(shop, { limit: 10 });
+    commit('setTypes', types);
+  },
   async fetchProducts({ commit }, { shop, params }) {
     try {
       commit('setLoadError', null);