@lancom/shared 0.0.284 → 0.0.286

package/assets/js/api/index.js

@@ -160,8 +160,8 @@ const api = {
   fetchAddressInfo(id, shop) {
     return _get(`shop/${shop || '-1'}/postcodes/address/${id}`);
   },
-  fetchProductPrintTemplates() {
-    return _get('print-templates');
+  fetchProductPrintTemplates(shop) {
+    return _get(`shop/${shop || '-1'}/print-templates`);
   },
   fetchPrintTypes(shop) {
     return _get(`shop/${shop}/print-types`);

package/assets/js/models/product-layers.js

@@ -64,7 +64,7 @@ export class TextLayer extends Layer {
 
 export class ArtLayer extends Layer {
   url = null;
-  fileName = 'default';
+  fileName = '';
   editableDetails = true;
   scaleX = 1;
   scaleY = 1;

package/assets/scss/_common.scss

@@ -4,6 +4,11 @@ body {
   overflow-x: hidden;
 }
 
+.multiselect__spinner {
+  z-index: 2 !important;
+  top: 6px !important;
+}
+
 .content {
   width: 100%;
   margin-top: $navbar_height;

package/assets/scss/variables/_theme.scss

@@ -8,6 +8,9 @@ $mobile_notification_bar_height: 40px !default;
 // Scrollbar
 $scrollbar_width: 6px;
 
+$orange: #e76d00 !default;
+$orange_light: #ff9940 !default;
+
 // Colors
 $black_high_emphasis: #000000;
 $black_medium_emphasis: rgba(0, 0, 0, .66);

package/components/checkout/cart/cart.vue

@@ -26,15 +26,15 @@
             <postcode-select
               :suburb="suburb"
               :labelless="true"
-              placeholder="Postcode"
-              label-text="Enter postcode to calculate shipping"
+              :placeholder="postcodeLabel"
+              :label-text="postcodeInfoLabel"
               @select="handleSuburbChange" />
           </div>
           <div class="Cart__coupon-container">
             <coupon-select
               v-model="cartCoupon"
               :pricing="cartPricingCalculating ? null : cartPricing"
-              label-text="Enter coupon code" />
+              :label-text="couponLabel" />
           </div>
           <div class="Cart__quantity-errors">
             <cart-quantity-errors />
@@ -91,7 +91,17 @@ export default {
   filters: { price },
   mixins: [CartMixin],
   computed: {
+    ...mapGetters(['MESSAGES']),
     ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
+    postcodeLabel() {
+      return this.MESSAGES.CART_POSTCODE || 'Postcode';
+    },
+    postcodeInfoLabel() {
+      return this.MESSAGES.CART_POSTCODE_INFO || 'Enter postcode to calculate shipping';
+    },
+    couponLabel() {
+      return (this.MESSAGES.CART_COUPON || 'Coupon code').trim();
+    },
     cartCoupon: {
       get() {
         return this.coupon;

package/components/checkout/order/address-form/address-form.scss

@@ -14,20 +14,4 @@
       }
     }
   }
-}
-
-.CustomerAddressForm {
-  &__toggle-address {
-    margin-bottom: 10px;
-    cursor: pointer;
-    display: inline-block;
-    color: $green;
-    border-bottom: 1px dashed $green;
-  }
-  &__section {
-    padding: 15px;
-    border: 1px solid #d7d7d7;
-    margin-bottom: 10px;
-    border-radius: 4px;
-  }
 }

package/components/checkout/order/address-form/address-form.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="CustomerAddressForm__wrapper">
-    <div class="CustomerAddressForm__form CustomerAddressForm__section">
+    <div class="CustomerAddressForm__form">
       <div class="form-row--cols">
         <validation-provider
           v-slot="{ errors }"
@@ -124,16 +124,74 @@
           </span>
         </validation-provider>
       </div>
-    </div>
-    <div class="CustomerAddressForm__section">
+      <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
+          }"
+          @input="validateAddress"
+          @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
+          }"
+          @input="validateAddress"
+          @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">
         <postcode-select
-          v-if="!visibleFullAddress"
           class="form-col col-half"
           :suburb="suburb"
           :labelless="true"
           :required="true"
-          :placeholder="postcodeLabel"
+          placeholder="Suburb"
           @select="handleSuburbChange">
         </postcode-select>
         <div class="form-col col-half">
@@ -152,190 +210,36 @@
             disabled />
         </div>
       </div>
-      <div
-        @click="visibleFullAddress = !visibleFullAddress"
-        class="CustomerAddressForm__toggle-address">
-        {{ visibleFullAddress ? 'Find a Different Address' : 'Enter Address Manually' }}
-      </div>
-      <div v-if="visibleFullAddress">
-        <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
-            }"
-            @input="validateAddress"
-            @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
-            }"
-            @input="validateAddress"
-            @keyup.enter="$refs.addressLine2.focus()" />
-          <span
-            v-if="errors.length"
-            class="form-help is-danger">
-            {{ errors[0] }}
-          </span>
-        </validation-provider>
-        <validation-provider
-          v-if="!withoutAdditionalInfo"
-          v-slot="{ errors }"
-          tag="div"
+      <validation-provider
+        v-if="!withoutAdditionalInfo"
+        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"
-          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 class="form-row--cols">
-          <validation-provider
-            v-slot="{ errors }"
-            tag="div"
-            name="postcode"
-            class="form-col">
-            <label
-              for="postcode"
-              class="form-label">
-              Postcode
-            </label>
-            <input
-              id="postcode"
-              ref="postcode"
-              v-model="address.postcode"
-              name="postcode"
-              placeholder="Postcode"
-              type="text"
-              class="form-field labelless"
-              :class="{
-                'is-danger': errors.length,
-                filled: address.postcode
-              }" />
-            <span
-              v-if="errors.length"
-              class="form-help is-danger">
-              {{ errors[0] }}
-            </span>
-          </validation-provider>
-          <validation-provider
-            v-slot="{ errors }"
-            tag="div"
-            :name="localityLabel"
-            class="form-col">
-            <label
-              for="locality"
-              class="form-label">
-              {{ localityLabel }}
-            </label>
-            <input
-              id="locality"
-              ref="locality"
-              v-model="address.city"
-              name="locality"
-              :placeholder="localityLabel"
-              type="text"
-              class="form-field labelless"
-              :class="{
-                'is-danger': errors.length,
-                filled: address.city
-              }" />
-            <span
-              v-if="errors.length"
-              class="form-help is-danger">
-              {{ errors[0] }}
-            </span>
-          </validation-provider>
-          <validation-provider
-            v-slot="{ errors }"
-            tag="div"
-            :name="stateLabel"
-            class="form-col">
-            <label
-              for="state"
-              class="form-label">
-              {{ stateLabel }}
-            </label>
-            <input
-              id="state"
-              ref="state"
-              v-model="address.state"
-              name="state"
-              :placeholder="stateLabel"
-              type="text"
-              class="form-field labelless"
-              :class="{
-                'is-danger': errors.length,
-                filled: address.state
-              }" />
-            <span
-              v-if="errors.length"
-              class="form-help is-danger">
-              {{ errors[0] }}
-            </span>
-          </validation-provider>
-        </div>
-      </div>
+          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>
   </div>
 </template>
@@ -349,11 +253,6 @@ export default {
   components: {
     PostcodeSelect
   },
-  data() {
-    return {
-      visibleFullAddress: false
-    };
-  },
   props: {
     address: {
       type: Object,
@@ -365,22 +264,13 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'currency', 'MESSAGES']),
+    ...mapGetters(['shop', 'country']),
     ...mapGetters('cart', [
       'suburb'
     ]),
     ...mapGetters('auth', [
       'user'
-    ]),
-    postcodeLabel() {
-      return this.MESSAGES?.POSTCODES_LABEL || 'Suburb';
-    },
-    localityLabel() {
-      return this.MESSAGES?.LOCALITY || 'Locality';
-    },
-    stateLabel() {
-      return this.MESSAGES?.STATE || 'State';
-    }
+    ])
   },
   created() {
     if (!this.address.suburb && !this.suburb &&  this.user?.suburb) {
@@ -407,19 +297,12 @@ export default {
         this.$set(this.address, 'postcode', suburb.postcode);
         this.$set(this.address, 'city', suburb.locality);
         this.$set(this.address, '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) {
-      this.visibleFullAddress = true;
       this.setAddressSuburb(suburb);
       this.setSuburb(suburb);
-      this.calculateCartPrice({ shop: this.shop, country: this.country, currency: this.currency });
+      this.calculateCartPrice({ shop: this.shop, country: this.country });
     }
   }
 };
@@ -427,4 +310,4 @@ export default {
 
 <style lang="scss" scoped>
 @import 'address-form.scss';
-</style>
+</style>

package/components/checkout/order/order-billing-information/order-billing-information.vue

@@ -29,7 +29,7 @@ import gtm from '@lancom/shared/assets/js/utils/gtm';
 import { generateOrderData } from '@lancom/shared/assets/js/utils/order';
 import CartQuantityErrors from '@lancom/shared/components/checkout/cart/cart_quantity_errors/cart-quantity-errors';
 import CartMixin from '@lancom/shared/components/checkout/cart/cart.mixin';
-import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
+import AddressForm from '@/components/checkout/order/address-form/address-form';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 
 export default {

package/components/checkout/order/order-shipping-information/order-shipping-information.vue

@@ -19,7 +19,7 @@
 
 <script>
 import { mapMutations } from 'vuex';
-import AddressForm from '@lancom/shared/components/checkout/order/address-form/address-form';
+import AddressForm from '@/components/checkout/order/address-form/address-form';
 import ProgressStepsControls from '@lancom/shared/components/common/progress_steps/progress_steps_controls/progress-steps-controls';
 
 export default {

package/components/common/coupon_select/coupon-select.vue

@@ -1,33 +1,37 @@
 <template>
-  <div class="CouponSelect__wrapper form-row">
+  <div class="CouponSelect__wrapper">
     <validation-provider
       tag="div"
       name="coupon"
       class="form-col col-half">
-      <label
-        for="coupon"
-        class="form-label">
-        {{ labelText }}
-      </label>
       <div class="row">
         <div class="col-7">
-          <input
-            id="coupon"
-            ref="coupon"
-            v-model="code"
-            placeholder="Coupon"
-            name="coupon"
-            type="text"
-            class="form-field labelless"
-            :class="{
-              'is-danger': code && notValidCoupon,
-              filled: code
-            }"
-            @keydown.enter="validateCoupon" />
-          <span
-            v-if="value"
-            class="CouponSelect__clear"
-            @click="clearCoupon()">remove coupon</span>
+          <div class="form-row">
+            <input
+              id="coupon"
+              ref="coupon"
+              v-model="code"
+              placeholder="Coupon"
+              name="coupon"
+              type="text"
+              class="form-field"
+              :class="{
+                'is-danger': code && notValidCoupon,
+                filled: code
+              }"
+              @keydown.enter="validateCoupon" />
+            <label
+              v-if="labelText"
+              for="coupon"
+              class="form-label label-inner"
+              style="color: #999 !important;">
+              {{ labelText }}
+            </label>
+            <span
+              v-if="value"
+              class="CouponSelect__clear"
+              @click="clearCoupon()">remove coupon</span>
+          </div>
         </div>
         <div class="col-5">
           <btn

package/components/common/postcode_select/postcode-select.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="PostcodeSelect">
+  <div class="PostcodeSelect form-row">
     <validation-provider
       v-slot="{ errors }"
       tag="div"
@@ -96,8 +96,7 @@ export default {
       type: String
     },
     labelText: {
-      type: String,
-      default: 'Suburb'
+      type: String
     },
     placeholder: {
       type: String,
@@ -131,7 +130,7 @@ export default {
   computed: {
     ...mapGetters(['shop', 'MESSAGES']),
     displayLabelText() {
-      return this.MESSAGES.POSTCODES_LABEL || this.labelText;
+      return this.labelText || this.MESSAGES.POSTCODES_LABEL || 'Suburb';
     },
     model: {
       get() {
@@ -151,7 +150,7 @@ export default {
   },
   methods: {
     async handleSearch(query) {
-      if (query.trim().length > 2) {
+      if (query.trim().length > 1) {
         this.isLoading = true;
         const country = this.codeCountry || this.country;
         const countryName = country ? (country.isoCode === 'GB' ? 'England' : (country.name || country)) : 'Australia';

package/components/common/products_list_dropdown/products-list-dropdown.vue

@@ -48,7 +48,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop'])
+    ...mapGetters(['shop', 'country'])
   },
   methods: {
     select(product) {
@@ -58,7 +58,7 @@ export default {
     async loadProducts(text) {
       try {
         this.loading = true;
-        this.products = (await api.fetchProducts(this.shop._id, { text })).products;
+        this.products = (await api.fetchProducts(this.shop._id, { text, country: this.country?._id })).products;
       } catch (e) {
       } finally {
         this.loading = false;

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

@@ -121,7 +121,7 @@ export default {
       const printAreas = getAllPrintAreas(this.product);
       const groups = new Map();
       this.editableLayers.forEach(layer => {
-        const printArea = printAreas.find(pa => pa._id === layer.printArea);
+        const printArea = printAreas.find(pa => pa._id === layer.printArea) || { _id: null, name: 'Layers'};
         if (printArea) {
           const defaultGroup = { layers: [], printArea };
           const group = groups.get(printArea._id) || defaultGroup;

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

@@ -107,13 +107,13 @@ export default {
       }
       let quality;
       switch (true) {
-        case this.layer.dpi < 100:
+        case this.layer.dpi < 75:
           quality = 'too small';
           break;
-        case this.layer.dpi >= 100 && this.layer.dpi < 150:
+        case this.layer.dpi >= 75 && this.layer.dpi < 100:
           quality = 'low quality';
           break;
-        case this.layer.dpi >= 150:
+        case this.layer.dpi >= 100:
           quality = 'good quality';
           break;
       }

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

@@ -29,7 +29,9 @@
               </template>
             </v-popover>
           </span>
-          <span class="lc_regular16 lc_grey1 ml-6">
+          <span
+            v-if="isPrintPricing"
+            class="lc_regular16 lc_grey1 ml-6">
             +
             <v-popover
               ref="popover"
@@ -108,7 +110,8 @@ export default {
       'product',
       'productDetailsLoaded',
       'defaultSimpleProduct',
-      'selectedPrintType'
+      'selectedPrintType',
+      'isPrintPricing'
     ]),
     ...mapGetters('layers', [
       'layerThumbnails'

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

@@ -122,7 +122,7 @@ export default {
       'editModeSelectedLayer'
     ]),
     printAreaLayers() {
-      return this.editableLayers.filter(l => l.printArea === this.printArea._id);
+      return this.editableLayers.filter(l => !this.printArea || l.printArea === this.printArea._id);
     },
     deleteButtonPosition() {
       return this.deleteButtonPos ? {
@@ -230,15 +230,16 @@ export default {
       this.fabricHelper.scaleWorkspace({ width: size, height: size });
     },
     initEventsListeners() {
-      document.addEventListener('click', this.onDocumentClick);
+      document.addEventListener('mousedown', this.onDocumentStartClick);
       window.addEventListener('resize', this.onResize);
     },
     clearEventsListeners() {
-      document.removeEventListener('click', this.onDocumentClick);
+      document.removeEventListener('mousedown', this.onDocumentStartClick);
       window.removeEventListener('resize', this.onResize);
     },
     onDocumentClick({ target }) {
       // todo: replace by click outside plugin?
+      console.log('target: ', target);
       const isCanvasElement = target.tagName === 'CANVAS';
       const isIgnoreClick = !!findParentByPredicate(target, element => element.hasAttribute('ignore-document-click'));
       if (!isCanvasElement && !isIgnoreClick) {

package/components/modals/editor_layers_templates/editor-layers-templates.vue

@@ -28,11 +28,9 @@
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
+import { mapMutations, mapActions, mapGetters } from 'vuex';
 import api from '@lancom/shared/assets/js/api';
 
-const { mapMutations, mapActions, mapGetters } = createNamespacedHelpers('product');
-
 export default {
   name: 'EditorLayersTemplates',
   data() {
@@ -42,16 +40,17 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['printArea', 'editableLayers'])
+    ...mapGetters(['shop']),
+    ...mapGetters('product', ['printArea', 'editableLayers'])
   },
   async mounted() {
     this.loading = true;
-    this.layerTemplates = await api.fetchProductPrintTemplates();
+    this.layerTemplates = await api.fetchProductPrintTemplates(this.shop._id);
     this.loading = false;
   },
   methods: {
-    ...mapActions(['createLayer']),
-    ...mapMutations(['updateTemplateLayer', 'setSelectedLayer']),
+    ...mapActions('product', ['createLayer']),
+    ...mapMutations('product', ['updateTemplateLayer', 'setSelectedLayer']),
     async applyLayerTemplate(template) {
       this.loading = true;
       const printArea = this.printArea;

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

@@ -14,6 +14,34 @@
       }
     }
   }
+  &__tag {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    z-index: 3;
+    &-icon {
+      margin-bottom: 4px;
+      font-size: 12px;
+      color: $orange
+    }
+    &-item  {
+      margin-bottom: 2px;
+      span {
+        display: inline-block;
+        padding: 4px 5px;
+        background: $orange_light;
+        font-weight: 800;
+        font-size: 10px;
+        line-height: 14px;
+        letter-spacing: -0.02em;
+        text-transform: uppercase;
+        color: $black;
+      }
+    }
+  }
   &__colors {
     display: flex;
     flex-wrap: wrap;

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

@@ -38,6 +38,23 @@
       <!-- <div class="ProductListProduct__gender">
         <span>{{ product.gender }}</span>
       </div> -->
+      <div
+        v-if="hasTags"
+        class="ProductListProduct__tag">
+        <div
+          v-for="tag in tags"
+          :key="`${tag._id}-${product._id}`"
+          class="ProductListProduct__tag-item">
+          <span
+            :style="{
+              'background-color': tag.backgroundColor,
+              'color': tag.textColor,
+              'font-size': tag.fontSize
+            }">
+            {{ tag.name }}
+          </span>
+        </div>
+      </div>
     </a>
     <div class="ProductListProduct__info">
       <div class="ProductListProduct__info-item">

package/layouts/products.vue

@@ -334,7 +334,7 @@
       }
     }
     &__aside {
-      width: 230px;
+      width: 215px;
       flex-grow: 1;
       flex-shrink: 0;
       @media (max-width: $bp-small-max) {

package/mixins/product-view.js

@@ -30,8 +30,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING) => ({
       await store.dispatch('product/fetchProduct', data);
       await store.dispatch('product/fetchProductDetails', data);
 
-      if (IS_PRODUCT_PRESET_PRINT_PRICING) {
-        const product = store.getters['product/product'];
+      const product = store.getters['product/product'];
+      if (IS_PRODUCT_PRESET_PRINT_PRICING && product.printOnly) {
         const printType = product.printTypes[0];
         store.commit('product/setSelectedPrintType', printType);
         store.commit('product/setIsPrintPricing', true);

package/package.json

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

package/store/product.js

@@ -363,6 +363,11 @@ export const mutations = {
       layer
     ];
     Vue.set(state.template, 'layers', layers);
+    if (layers.length === 1 && !state.product.printOnly) {
+        const printType = state.product.printTypes[0];
+        state.selectedPrintType = printType;
+        state.isPrintPricing = true;
+    }
   },
   removeTemplateLayer(state, layer) {
     const index = state.template.layers.findIndex(({ createdAt }) => createdAt === layer.createdAt);
@@ -370,6 +375,10 @@ export const mutations = {
     if (state.selectedLayer && state.selectedLayer.createdAt === layer.createdAt) {
       state.selectedLayer = null;
     }
+    if (state.template.layers.length === 0 && !state.product.printOnly) {
+      state.selectedPrintType = null;
+      state.isPrintPricing = false;
+    }
   },
   updateTemplateLayer(state, layer) {
     const index = state.template.layers.findIndex(({ createdAt, _id }) => createdAt === layer.createdAt || (_id && _id === layer._id));