@lancom/shared 0.0.435 → 0.0.437

package/components/common/payment/payment_card/googlepay/googlepay.vue

@@ -17,7 +17,7 @@
         </label>
         <input
           id="payment-amount"
-          :value="`${amount} AUD`"
+          :value="`${amount} ${currency ? currency.isoCode : 'AUD'}`"
           name="payment-amount"
           placeholder="payment-amount"
           disabled

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

@@ -63,6 +63,16 @@
       }
     }
   }
+  &__controls {
+    display: flex;
+    gap: 20px;
+    .EditorPrintAreaOptions__wrapper {
+      padding: 0;
+    }
+    .Btn__wrapper {
+      height: 44px;
+    }
+  }
 }
 .EditorLayersGroup {
   &__wrapper {

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

@@ -21,7 +21,16 @@
                   <i class="icon-arrow-left EditorLayers__close-editable-icon"></i>
                   See all design layers
                 </div>
-                <div>
+                <div class="EditorLayers__controls">
+                  <editor-print-area-options
+                    v-if="selectedLayer"
+                    :selected="selectedLayerPrintArea"
+                    :side="selectedLayer.sideId"
+                    :product="product"
+                    :layers="editableLayers"
+                    @select="handlePrintAreaSelect"
+                    @option-mouseover="toogleBoundBox(true, $event)"
+                    @option-mouseleave="toogleBoundBox(false, $event)" />
                   <btn
                     btn-class="green"
                     btn-label="Save"
@@ -29,15 +38,6 @@
                 </div>
               </div>
             </template>
-            <template #after-canvas="{ invalid }">
-              <editor-print-area-options
-                v-if="selectedLayer"
-                :selected="selectedLayerPrintArea"
-                :side="selectedLayer.sideId"
-                :product="product"
-                :layers="editableLayers"
-                @select="handlePrintAreaSelect" />
-            </template>
           </component>
         </div>
         <div
@@ -163,7 +163,8 @@ export default {
       'selectedLayer',
       'editModeSelectedLayer',
       'editableSide',
-      'selectedPrintArea'
+      'selectedPrintArea',
+      'editablePrintArea'
     ]),
     editableLayerType() {
       return this.selectedLayer ? `editor-layer-form-${this.selectedLayer.type}` : null;
@@ -217,7 +218,8 @@ export default {
       'updateTemplateLayer',
       'setEditableSide',
       'setSelectedPrintArea',
-      'setEditablePrintArea'
+      'setEditablePrintArea',
+      'setPreviewPrintArea'
     ]),
     ...mapActions(['increaseLayersUpdatesCount']),
     openSelectedLayerGroup(selected) {
@@ -284,7 +286,14 @@ export default {
 
       const printSize = printArea.printSize._id;
       this.setLayerField({ field: 'printSize', value: printSize });
-      console.log('handlePrintAreaSelect: ', option, this.selectedLayer);
+
+      this.toggleOpenedGroup(printArea, true);
+    },
+    toogleBoundBox(state, option) {
+      if (option) {
+        const printArea = state ? option.printArea : this.editablePrintArea;
+        this.setPreviewPrintArea(printArea);
+      }
     }
   }
 };

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.scss

@@ -23,7 +23,7 @@
     position: absolute;
     text-transform: uppercase;
     font-size: 22px;
-    font-weight: 800px;
+    font-weight: 800;
     left: 0;
     right: 0;
     text-align: center;

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/editor-layer-form-text.vue

@@ -309,7 +309,7 @@ export default {
     initFabricCanvas() {
       if (this.$refs.previewCanvas) {
         this.fabricCanvas = new fabric.Canvas(this.$refs.previewCanvas, {
-          width: this.$refs.previewCanvas.parentElement.offsetWidth,
+          width: this.$refs.previewCanvas.parentElement.offsetWidth - 100,
           height: 200,
           uniScaleTransform: false
         });

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.scss

@@ -17,6 +17,9 @@
     &.selected {
       background-color: $green;
     }
+    > * {
+      pointer-events: none;
+    }
   }
   &__info {
     text-align: center;
@@ -51,7 +54,7 @@
         }
       }
     }
-    
+
     // TEE - FRONT
     @each $position in center, left, right {
       &.front.tee.#{$position} {
@@ -72,4 +75,4 @@
       background-image: url(./../../../../static/icons/print-area/sleeve-right_tee_right.svg);
     }
   }
-}
+}

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

@@ -224,7 +224,7 @@ export default {
       const name = this.product.name;
       const color = this.availableColors?.find(c => c.alias === this.$route.query?.color);
       const size = this.availableSizes?.find(c => c.shortName === this.$route.query?.size);
-      return `${name}${(color || size) ? ` | ${[color?.name, size?.shortName].filter(i => !!i).join(', ') || ''}` : ''}`;
+      return `${name}${(color || size) ? ` | ${[color?.name, size?.name].filter(i => !!i).join(', ') || ''}` : ''}`;
     },
     hasImages() {
       return this.modelImages.length > 0;

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

@@ -115,7 +115,8 @@
         :side="editableSide.id"
         :layers="editableLayers"
         @select="selectPrintArea"
-        @option-mouseover="toogleBoundBox(true, $event)">
+        @option-mouseover="toogleBoundBox(true, $event)"
+        @option-mouseleave="toogleBoundBox(false, $event)">
       </editor-print-area-options>
     </div>
   </div>

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

@@ -1,11 +1,11 @@
 <template>
   <div
+    v-click-outside="onOutsideClick"
     class="EditorWorkspaceSide__wrapper"
     :style="backgroundColor"
     :class="{
       'EditorWorkspaceSide__wrapper--zoom-in': isZoomed
     }"
-    v-click-outside="onOutsideClick"
     @mouseover="toogleBoundBox(true)"
     @mouseup="toggleOnpressImage(false)">
     <div
@@ -210,7 +210,8 @@ export default {
       'editModeSelectedLayer',
       'offsetWarningVisible',
       'showRecommendationToUseLargerImage',
-      'showErrorAboutSmallImage'
+      'showErrorAboutSmallImage',
+      'previewPrintArea'
     ]),
     editableLayersCount() {
       return this.editableLayers?.length;
@@ -301,6 +302,10 @@ export default {
       this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
       this.redraw();
     },
+    previewPrintArea(value) {
+      this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
+      this.redraw();
+    },
     zoomSize() {
       this.handleWorkspaceSize();
     }
@@ -498,8 +503,6 @@ export default {
         const area = state ? option.printArea : this.printArea;
         this.fabricHelper.setPrintArea(area, this.editorSize, this.product);
       }
-
-      this.fabricHelper.background.toggleBorder(state);
     }
   }
 };

package/components/email_link/email-link.vue

@@ -1,22 +1,37 @@
 <template>
-  <a ref="link"></a>
+  <a
+    v-if="emailDisplaySSR"
+    :href="`mailto:${emailAddress}`">{{ emailAddress }}</a>
+  <a
+    v-else
+    ref="link"></a>
 </template>
-  
+
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'EmailLink',
   props: {
     email: {
-      type: Array | String,
+      type: [Array, String],
       required: true
     }
   },
+  computed: {
+    ...mapGetters(['SETTINGS']),
+    emailAddress() {
+      return (Array.isArray(this.email) ? this.email : [this.email]).join('@');
+    },
+    emailDisplaySSR() {
+      return !!this.SETTINGS?.EMAIL_DISPLAY_SSR;
+    }
+  },
   mounted() {
-    if (process.client) {
-      const email = (Array.isArray(this.email) ? this.email : [this.email]).join('@');
+    if (!this.emailDisplaySSR) {
       const linkEl = this.$refs.link;
-      linkEl.href = `mailto:${email}`;
-      linkEl.textContent = email;
+      linkEl.href = `mailto:${this.emailAddress}`;
+      linkEl.textContent = this.emailAddress;
     }
   }
 };

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

@@ -2,7 +2,7 @@
   <btn
     :btn-class="btnClass"
     btn-label="Add to cart"
-    :btn-disabled="addToCartDisabled"
+    :btn-disabled="!allowClick && addToCartDisabled"
     :btn-processing="addingToCart"
     @onclick="proceedToCard">
     <template slot="icon-before">
@@ -21,6 +21,10 @@ export default {
     btnClass: {
       type: String,
       default: 'green'
+    },
+    allowClick: {
+      type: Boolean,
+      default: false
     }
   }
 };

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

@@ -1,6 +1,9 @@
 @import "@/assets/scss/variables";
 .EditorPricing {
   &__main {
+    &-alerts-wrapper {
+      display: contents;
+    }
     &-alert {
       display: flex;
       align-items: center;

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

@@ -6,65 +6,68 @@
         class="EditorPricing__details">
         <editor-pricing-details />
       </div>
-
       <div
-        v-if="addedToCart"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/smile.svg" />
-        Products have been added to cart
-      </div>
+        v-if="visibleAlert"
+        class="EditorPricing__alerts-wrapper">
+        <div
+          v-if="addedToCart"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/smile.svg" />
+          Products have been added to cart
+        </div>
 
-      <div
-        v-else-if="!hasUsedSimpleProducts && (!layers.length && isPrintPricing)"
-        class="EditorPricing__main-alert">
-        <img src="~static/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="~static/images/sad.svg" />
+          No products selected and no prints defined
+        </div>
 
-      <div
-        v-else-if="hasUsedSimpleProducts && ((!isValidPrintOnly || !layers.length && isPrintPricing))"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        No prints defined
-      </div>
+        <div
+          v-else-if="hasUsedSimpleProducts && ((!isValidPrintOnly || !layers.length && isPrintPricing))"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          No prints defined
+        </div>
 
-      <div
-        v-else-if="!hasUsedSimpleProducts && layers.length"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-        <a
-          href="#"
-          @click.prevent.stop="$emit('choose-products')">
-          Choose products here to continue
-        </a>
-      </div>
+        <div
+          v-else-if="!hasUsedSimpleProducts && layers.length"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          <a
+            href="#"
+            @click.prevent.stop="$emit('choose-products')">
+            Please enter the quantity required
+          </a>
+        </div>
 
-      <div
-        v-else-if="!isValidMiltipackOrderQuantity"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/sad.svg" />
-         bulk pack {{ multipack.qty }} - add more x {{ multipack.qty - usedSimpleProductsQuantity }}
-      </div>
+        <div
+          v-else-if="!isValidMiltipackOrderQuantity"
+          class="EditorPricing__main-alert">
+          <img src="~static/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="~static/images/sad.svg" />
-        Minimum order of these items must be {{ minimumOrderQuantity }} or more
-      </div>
+        <div
+          v-else-if="!isValidOrderQuantity && isValidBigSizeOrderQuantity && minimumOrderQuantity > 1"
+          class="EditorPricing__main-alert">
+          <img src="~static/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="~static/images/sad.svg" />
-        Minimum order of 5XL-7XL should be 50%
-      </div>
+        <div
+          v-else-if="!isValidBigSizeOrderQuantity"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/sad.svg" />
+          Minimum order of 5XL-7XL should be 50%
+        </div>
 
-      <div
-        v-else-if="isValidOrderQuantity"
-        class="EditorPricing__main-alert">
-        <img src="~static/images/smile.svg" />
-        {{ hasPrintIssues ? 'Proceed with order, Will be in touch regarding print issue' : 'All good to go!' }}
+        <div
+          v-else-if="isValidOrderQuantity"
+          class="EditorPricing__main-alert">
+          <img src="~static/images/smile.svg" />
+          {{ hasPrintIssues ? 'Proceed with order, Will be in touch regarding print issue' : 'All good to go!' }}
+        </div>
       </div>
 
       <div
@@ -129,10 +132,15 @@ export default {
     hasPricing: {
       type: Boolean,
       default: true
+    },
+    visibleAlert: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     return {
+      clickedAddToCart: false,
       price: null,
       showDetails: false,
       calculatePriceWithDebounce: debounce(() => this.calculateProductPrice({ shop: this.shop, country: this.country, currency: this.currency }), 500)

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.scss

@@ -45,6 +45,18 @@
     &-selected-icon {
       position: absolute;
     }
+    &>i {
+      position: absolute;
+      z-index: 3;
+      top: -3px;
+      right: -5px;
+      color: $purple;
+      background-color: white;
+      border-radius: 50%;
+      padding: 3px 0;
+      font-size: 15px;
+      box-shadow: 0 0 2px grey;
+    }
   }
   &__products-count {
     position: absolute;
@@ -58,11 +70,11 @@
     font-weight: bold;
     font-size: 12px;
     line-height: 16px;
-    text-align: center;  
+    text-align: center;
     span:not(:empty) {
       background-color: white;
       border-radius: 50%;
       width: 16px;
     }
-  }  
-}
+  }
+}

package/components/product/layouts/product_colors_selector/product_colors_selector_options/product-colors-selector-options.vue

@@ -7,6 +7,10 @@
       class="ProductColorsSelectorOptions__color"
       :class="{ selected: editableColor === color }"
       @click="toggleSelection(color)">
+      <i
+        v-if="isClearanceColor(color)"
+        v-tooltip="'Clearance'"
+        class="icon-percent"></i>
       <product-color-image
         :color="color"
         :lazy="true"
@@ -44,7 +48,8 @@ export default {
       'template',
       'editableColor',
       'simpleProducts',
-      'templateColors'
+      'templateColors',
+      'product'
     ])
   },
   mounted() {
@@ -67,6 +72,9 @@ export default {
     },
     countColorProducts({ _id }) {
       return this.simpleProducts.reduce((count, { color, amount }) => color._id === _id ? count + (amount || 0) : count, 0);
+    },
+    isClearanceColor(color) {
+      return this.product.colorsPricing?.some(c => c.colors?.includes(color._id) && c.clearance);
     }
   }
 };

package/components/product/product_color_image/product-color-image.scss

@@ -5,4 +5,4 @@
   &.zoomedIn {
     background-size: 200%;
   }
-}
+}

package/components/product/product_pricing_tiers/product-pricing-tiers.vue

@@ -44,7 +44,7 @@ export default {
     ...mapGetters('product', ['product', 'editableColor', 'priceIncludeGST', 'isPrintPricing', 'printsPrice', 'defaultSimpleProduct']),
     ...mapGetters(['pricingSettings', 'currency']),
     visibleTiers() {
-      const pricing = this.defaultSimpleProduct.pricing;
+      const pricing = this.defaultSimpleProduct?.pricing || [];
       return pricing.map(p => ({ ...p, price: p.price + this.printsPrice }));
     }
   },

package/components/product/products_multipacks_size_selector_color/products-multipacks-size-selector-color.vue

@@ -78,7 +78,7 @@ export default {
       return sortBySize(this.editableColorSimpleProducts);
     },
     pricing() {
-      return this.defaultSimpleProduct.pricing;
+      return this.defaultSimpleProduct?.pricing || [];
     }
   },
   methods: {

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.vue

@@ -46,16 +46,42 @@
               </div>
             </template>
           </v-popover>
-          <span
+          <v-popover
             v-if="printsPrice > 0"
-            class="lc_regular13">
-            +
-            <price
-              :price="printsPrice"
-              :with-gst="withGst" />
-          </span>
+            trigger="hover"
+            :delay="{ show: 200, hide: 400 }"
+            popover-class="tooltip popover white"
+            class="ProductSizeSelectorColor__price ml-6"
+            style="display: inline-block;">
+            <span class="lc_regular13">
+              {{ productPrintsPrice | price(currency) }}
+            </span>
+            <template slot="popover">
+              <div>
+                <table class="lc_table bordered">
+                  <thead>
+                    <tr class="highlighted">
+                      <th>Area</th>
+                      <th>Size</th>
+                      <th>Type</th>
+                      <th>Price</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(print, index) in productPricingPrints"
+                      :key="index">
+                      <td>{{ print.printArea ? print.printArea.name : '' }}</td>
+                      <td>{{ print.printSize ? print.printSize.name : '' }}</td>
+                      <td>{{ print.printType ? print.printType.name : '' }}</td>
+                      <td>{{ (withGst ? print.price : print.priceWithoutTax) | price(currency) }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </template>
+          </v-popover>
         </div>
-
       </div>
       <div class="hidden-md-and-up">
         <div
@@ -126,7 +152,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice']),
+    ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity', 'printsPrice', 'productPricingPrints']),
     ...mapGetters(['gstTax', 'currency']),
     currentQuantityStockLabel() {
       return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;

package/feeds/google-shopping.js

@@ -106,16 +106,18 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:sale_price'] = { _text: `${(sp.clearancePrice)} ${sp.currencyCode || 'AUD'}` };
               }
 
-              if (sp.storeCode) {
-                info['g:store_code'] = { _text: sp.storeCode };
-                info['g:link_template'] = { _text: `${link}&store={store_code}` };
-                if (availableStores) {
-                  info['g:pickup_method'] = { _text: 'buy' };
-                  info['g:pickup_sla'] = { _text: product.prePrint ? 'next day' : 'same day' };
+              if (!config.IGNORE_STORE_CODE) {
+                if (sp.storeCode) {
+                  info['g:store_code'] = { _text: sp.storeCode };
+                  info['g:link_template'] = { _text: `${link}&store={store_code}` };
+                  if (availableStores) {
+                    info['g:pickup_method'] = { _text: 'buy' };
+                    info['g:pickup_sla'] = { _text: product.prePrint ? 'next day' : 'same day' };
+                  }
+                } else {
+                  info['g:pickup_method'] = { _text: 'not_supported' };
+                  info['g:excluded_destination'] = [{ _text: 'Local_inventory_ads' }, { _text: 'Free_local_listings' }];
                 }
-              } else {
-                info['g:pickup_method'] = { _text: 'not_supported' };
-                info['g:excluded_destination'] = [{ _text: 'Local_inventory_ads' }, { _text: 'Free_local_listings' }];
               }
               if (product.volume) {
                 if (product.volume.length) {

package/mixins/add-to-cart.js

@@ -51,6 +51,7 @@ export default {
     ...mapMutations('layers', ['resetLayers']),
     async proceedToCard() {
       if (this.addingToCart || this.addToCartDisabled) {
+        this.$emit('proceed', false);
         return;
       }
       try {
@@ -65,20 +66,21 @@ export default {
           googleClickId: this.googleClickId
         });
         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) { 
+      } catch (e) {
       } finally {
         this.addingToCart = false;
       }
+      this.$emit('proceed', true);
     }
   }
-};
+};

package/mixins/product-view.js

@@ -289,7 +289,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
           url,
           availability: `https://schema.org/${availability}`,
           price: +tax(maxPrice, this.gstTax).toFixed(2),
-          priceCurrency: 'AUD',
+          priceCurrency: this.currency?.isoCode || 'AUD',
           priceValidUntil: '31-12-2030',
           sku: sp.SKU,
           ...(brandAdditionalProductsRichSnippet.offers || {})

package/package.json

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

package/pages/checkout/order.vue

@@ -43,6 +43,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currency']),
     ...mapGetters('cart', ['entitiesWithoutFreeProducts', 'entities', 'coupon', 'cartPricing'])
   },
   methods: {
@@ -50,7 +51,7 @@ export default {
       gtm.push({
         event: 'begin_checkout',
         value: this.cartPricing.totalPriceWithoutTax,
-        currency: 'AUD',
+        currency: this.currency ? this.currency.isoCode : 'AUD',
         coupon: this.cartPricing.coupon?.code,
         items: this.entitiesWithoutFreeProducts.reduce((products, { guid: productGuid, product, simpleProducts }) => {
           return [
@@ -62,7 +63,7 @@ export default {
                 item_name: product.name,
                 item_brand: product.brand.name,
                 price: this.cartPricing.products[productGuid]?.products[guid]?.totalPriceWithoutTax,
-                currency: 'AUD',
+                currency: this.currency ? this.currency.isoCode : 'AUD',
                 quantity: amount
               }))
           ];

package/store/product.js

@@ -17,7 +17,7 @@ export const state = () => ({
   loadingProductDetails: false,
   productDetailsKey: Date.now(),
   images: [],
-  priceIncludeGST: false,
+  priceIncludeGST: true,
   product: null,
   preSetPrints: null,
   loadError: null,
@@ -58,6 +58,7 @@ export const state = () => ({
   selectedPrintAreas: {},
   productPricing: null,
   selectedTab: null,
+  previewPrintArea: null,
   layersUpdatesCount: 0,
   editableSide: { id: 'front' }
 });
@@ -173,6 +174,10 @@ export const getters = {
     const pricePrintsPrice = pricing?.prints?.prints?.reduce((sum, print) => sum + (+print.priceWithoutTax || 0), 0);
     return pricePrintsPrice >= 0 ? pricePrintsPrice : maxPrintsPrice;
   },
+  productPricingPrints: ({ productPricing, product }) => {
+    const pricing = (productPricing?.products || {})[product._id];
+    return pricing?.prints?.prints || [];
+  },
   offsetWarningVisible: ({ offsetWarningVisible }) => offsetWarningVisible,
   showRecommendationToUseLargerImage: ({ selectedLayer }) => {
     return (
@@ -208,7 +213,8 @@ export const getters = {
     } else {
       return PRODUCT_STOCK_STATUS.NOT_IN_STOCK;
     }
-  }
+  },
+  previewPrintArea: ({ previewPrintArea }) => previewPrintArea
 };
 
 export const actions = {
@@ -634,6 +640,9 @@ export const mutations = {
   },
   setCalculatingPrice(state, calculatingPrice) {
     state.calculatingPrice = calculatingPrice;
+  },
+  setPreviewPrintArea(state, previewPrintArea) {
+    state.previewPrintArea = previewPrintArea;
   }
 };