@lancom/shared 0.0.106 → 0.0.109

package/assets/js/models/print-area.js

@@ -42,19 +42,21 @@ export const getProductPrintsAreasPrices = (product, printType) => {
   return areas;
 };
 
-export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight }, product) => {
+export const getPrintAreaByName = ({ printArea, editorWidth, editorHeight, printSize, printAreaOffsets }, product) => {
   const printAreas = getProductPrintAreas(product);
-  const { printSize, printAreaOffsets } = printAreas[printArea] || DEFAULT_PRINT_AREA;
+  const pa = printAreas[printArea] || DEFAULT_PRINT_AREA;
+  const size = printSize || pa.printSize;
+  const offsets = printAreaOffsets || pa.printAreaOffsets;
   const pxPerCm = (editorWidth * product.productToImageRatio) / (product.productWidthInCm || 60);
-  const widthCm = printSize ? printSize.width : DEFAULT_PRINT_SIZE_CM;
-  const heightCm = printSize ? printSize.height : DEFAULT_PRINT_SIZE_CM;
+  const widthCm = size ? size.width : DEFAULT_PRINT_SIZE_CM;
+  const heightCm = size ? size.height : DEFAULT_PRINT_SIZE_CM;
   let width = widthCm * pxPerCm;
   let height = heightCm * pxPerCm;
   let top = 0;
   let left = 0;
-  if (printAreaOffsets) {
-    top = (editorHeight - height) / (100 / printAreaOffsets.top);
-    left = (editorWidth - width) / (100 / printAreaOffsets.left);
+  if (offsets) {
+    top = (editorHeight - height) / (100 / offsets.top);
+    left = (editorWidth - width) / (100 / offsets.left);
   } else {
     left = 30;
     top = 30;

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

@@ -4,6 +4,7 @@ import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
 export class Layer {
   type = null;
   colorId = null;
+  sideId = null;
   angle = 0;
   alignVertically = 'center';
   alignHorizontally = 'center';
@@ -78,7 +79,7 @@ export class ArtLayer extends Layer {
   }
 };
 
-export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, properties = {} }) => {
+export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, sideId, properties = {} }) => {
   if (!type) {
     throw new Error('When creating a new layer, you must specify its type');
   }
@@ -100,7 +101,7 @@ export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url,
       throw new Error(`Layer type '${type}' not found or not supported.`);
   }
 
-  Object.assign(layer, properties);
+  Object.assign(layer, properties, { sideId });
   return layer;
 };
 

package/assets/js/utils/cart.js

@@ -10,6 +10,7 @@ export function groupSimpleProducts(entity, isGroupByColor, isPopulateEmptyProdu
         color: simpleProduct.color,
         images: entity.product?.images || [],
         prints: entity.prints,
+        printsThumbnails: entity.printsThumbnails,
         product: entity.product,
         simpleProducts: [],
         amount: 0,

package/assets/js/utils/custom-validation-rules.js

@@ -11,3 +11,10 @@ export const float = {
   },
   message: 'Float number is not valid'
 };
+
+export const maxValue = {
+  validate: value => {
+    return +value <= 1;
+  },
+  message: 'Max number is not valid'
+};

package/assets/js/utils/fabric/wireframe.js

@@ -3,9 +3,9 @@ import { fabric } from 'fabric';
 
 const sizes = [];
 
-export const buildWireframe = ({ width, height, editor, area = 'a4_v', product }) => {
+export const buildWireframe = ({ width, height, editor, print }) => {
   const layers = editor.getObjects();
-  const printAreaSize = layers[0].printAreaSize;
+  const printAreaSize = print.printSize;
   const group = new fabric.Group(layers);
   const groupBounding = group.getBoundingRect();
   const ratioX = (width / groupBounding.width) * 0.8;
@@ -108,8 +108,8 @@ export const buildWireframe = ({ width, height, editor, area = 'a4_v', product }
   ], 'h');
   verticalArrow.set({ selectable: false });
   horizontalArrow.set({ selectable: false });
-  const W = Math.round(groupBounding.width / printAreaSize.width * sizes[area][0]);
-  const H = Math.round(groupBounding.height / printAreaSize.height * sizes[area][1]);
+  const W = Math.round(groupBounding.width / printAreaSize.width);
+  const H = Math.round(groupBounding.height / printAreaSize.height);
   const verticalSize = new fabric.Text(`H: ${H * 10}mm`, {
     top: bounding.top + (bounding.height / 2),
     left: 0,

package/assets/js/utils/fabric-helper.js

@@ -137,6 +137,8 @@ export default class FabricHelper {
   setPrintArea(printArea, size, product) {
     this.printAreaRect = getPrintAreaByName({
       printArea: printArea?._id,
+      printSize: printArea?.printSize,
+      printAreaOffsets: printArea?.printAreaOffsets,
       editorWidth: size.width,
       editorHeight: size.height
     }, product);
@@ -189,7 +191,7 @@ export default class FabricHelper {
   }
 
   createObject({ layer, active }) {
-    const initial = !layer.modifiedAt;
+    const initial = false; // !layer.modifiedAt;
     return new Promise(resolve => {
       const methods = {
         text: 'createTextObject',
@@ -216,8 +218,8 @@ export default class FabricHelper {
     });
   }
 
-  buildWireframe({ width, height, area }) {
-    buildWireframe({ width, height, editor: this.editor, area });
+  buildWireframe({ width, height, print }) {
+    buildWireframe({ width, height, editor: this.editor, print });
   }
 
   checkAnyBoundingIntersection() {

package/assets/js/utils/order.js

@@ -43,13 +43,13 @@ export function populateProductsFields(products, pricing) {
     }, []);
 
     if (pricing) {
-      const productPricing = pricing.products[product.guid];
+      const productPricing = pricing.products[product.guid] || pricing.products[product?.product._id];
       product.totalPrice = productPricing.totalPriceWithoutTax;
       product.printsTotalPrice = productPricing.prints.totalPriceWithoutTax;
       product.productsTotalPrice = productPricing.products.totalPriceWithoutTax;
 
       (product.simpleProducts || []).forEach(sp => {
-        const spPricing = productPricing.products[sp.guid];
+        const spPricing = productPricing.products[sp.guid] || productPricing.products[sp._id];
         if (spPricing) {
           sp.totalPrice = spPricing.totalPriceWithoutTax;
           sp.productCost = spPricing.priceWithoutTax;
@@ -57,7 +57,7 @@ export function populateProductsFields(products, pricing) {
       });
 
       (product.prints || []).forEach(p => {
-        const pPricing = productPricing.prints[p.printArea._id];
+        const pPricing = productPricing.prints[p.printArea?._id];
         if (pPricing) {
           p.totalPrice = pPricing.totalPriceWithoutTax;
           p.printCost = pPricing.priceWithoutTax;

package/assets/js/utils/prints.js

@@ -58,8 +58,8 @@ export function getPrintsFromLayers(layers, product) {
 }
 
 export function getPrintTypeSizePricing(printType, sizeId) {
-  return printType?.printAreas
+  return (printType?.printAreas || [])
     .find(({ printSizes }) => {
       return printSizes.map(size => size?._id || size).includes(sizeId);
-    }) || printType?.printAreas[0];
+    }) || (printType?.printAreas || [])[0];
 }

package/assets/js/utils/product.js

@@ -21,7 +21,7 @@ export function getProductsForCalculatePricing(mainProduct, simpleProducts, laye
   }];
 }
 
-export function generateCartProducts(mainProduct, simpleProducts, layers, hasPrints, layersThumbnails = [], editorSize = null) {
+export function generateCartProducts(mainProduct, simpleProducts, layers, hasPrints, printsThumbnails = {}, editorSize = null) {
   return [{
     guid: generateGUID(),
     product: mainProduct,
@@ -30,7 +30,8 @@ export function generateCartProducts(mainProduct, simpleProducts, layers, hasPri
       guid: generateGUID(),
       amount: sp.amount || 0
     })),
-    prints: hasPrints ? getPrintsFromLayers(layers, mainProduct) : []
+    prints: hasPrints ? getPrintsFromLayers(layers, mainProduct) : [],
+    printsThumbnails
   }];
   // const timestamp = Date.now();
   // const productsWithPricing = getProductsForCalculatePricing(mainProduct, simpleProducts, layers, hasPrints);

package/assets/js/utils/products-grouping/by-colors.js

@@ -1,23 +1,27 @@
-export function groupProductsByColor(products = [], productsPricing) {
+export function groupProductsByColor(products = []) {
   const groupProducts = new Map();
-  products.forEach(product => {
-    const productPricing = productsPricing[product.guid] || productsPricing[product._id];
-    if (productPricing) {
-      const { amount } = productPricing;
+  products
+    .forEach(product => {
+      product.simpleProducts.forEach(sp => {
+        const defaultGroup = {
+          amount: 0,
+          products: []
+        };
+        const colorId = sp?.color._id || sp.color;
+        const group = groupProducts.get(colorId) || defaultGroup;
 
-      const defaultGroup = {
-        amount: 0,
-        products: []
-      };
-      const group = groupProducts.get(product.color._id) || defaultGroup;
+        if (sp.amount > 0) {
+          group.amount += (sp.productCost || 0) * (sp.amount || 0);
+          group.product = {
+            ...product.product,
+            printsThumbnails: (product.printsThumbnails || {})
+          };
+          group.color = sp.color;
+          group.products.push(sp);
 
-      group.amount += amount;
-      group.product = product;
-      group.color = product.color;
-      group.products.push(product);
-
-      groupProducts.set(product.color._id, group);
-    }
-  });
+          groupProducts.set(colorId, group);
+        }
+      });
+    });
   return [...groupProducts];
 }

package/components/asides/contact_us/contact-us.vue

@@ -182,6 +182,9 @@ export default {
   computed: {
     ...mapGetters(['contacts', 'shop'])
   },
+  mounted() {
+    this.preloadReCaptcha();
+  },
   methods: {
     async submit() {
       try {

package/components/asides/offer_screen_printing/offer-screen-printing.vue

@@ -11,25 +11,25 @@
       <validation-provider
         v-slot="{ errors }"
         tag="div"
-        name="Name"
+        name="Full Name"
         rules="required"
         class="form-row">
         <input
           id="name"
           ref="name"
-          v-model="form.name"
+          v-model="form.fullName"
           name="name"
           type="text"
           class="form-field"
           :class="{
             'is-danger': errors.length,
-            filled: form.name
+            filled: form.fullName
           }"
           @keyup.enter="$refs.email.focus()" />
         <label
           for="name"
           class="form-label label-inner">
-          Name
+          Full Name
         </label>
         <span
           v-if="errors.length"
@@ -104,12 +104,12 @@
         <textarea
           id="body"
           ref="body"
-          v-model="form.body"
+          v-model="form.description"
           name="body"
           class="form-textarea--size3"
           :class="{
             'is-danger': errors.length,
-            filled: form.body
+            filled: form.description
           }">
         </textarea>
         <label
@@ -161,6 +161,7 @@ export default {
     ]),
     ...mapGetters('product', [
       'product',
+      'template',
       'layers',
       'usedSimpleProducts',
       'selectedPrintAreas',
@@ -174,19 +175,28 @@ export default {
       try {
         this.processing = true;
         const recaptchaToken = await this.getRecaptcha('offer_screen_printing');
-        const products = generateCartProducts(this.product, this.layers, this.usedSimpleProducts, this.layerThumbnails, this.selectedPrintAreas, this.editorSize, this.printsPricing);
-        populateProductsFields(products);
+        let products = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, true, this.layerThumbnails);
+        products = populateProductsFields(products, this.productPricing);
+        products.forEach(p => {
+          p.prints.forEach(print => {
+            delete print.printType;
+            delete print.printCost;
+            delete print.setupCost;
+            delete print.pricing;
+          });
+        });
         const body = {
           recaptchaToken,
+          address: this.form,
           ...this.form,
-          products,
-          shop: this.shop._id,
-          price: await api.calculateProductPrice({ products, screenPrint: true }, this.shop._id)
+          options: [{ products, index: 0 }],
+          shop: this.shop._id
         };
-        await api.screenPrintingQuote(body, this.shop._id);
+        await api.saveQuoteRequest(body, this.shop._id);
         this.$toastr.s('We will review your design and advise if we can screen print you design and offer better pricing');
         this.$emit('close');
       } catch (error) {
+        console.log(error);
         this.$toastr.e(error);
       } finally {
         this.processing = false;

package/components/checkout/cart/cart_entity/cart_entity_color_simple_products/cart-entity-color-simple-products.mixin.js

@@ -61,10 +61,12 @@ export default {
       this.$modal.show(
         ImageViewer,
         {
-          items: images.map(({ origin, type }) => ({
+          items: images.map(({ origin, types = [] }) => ({
             src: staticLink(origin),
-            color: this.group.color.rgb
-            // print: this.entity.prints[SIDE_TYPES[type]]
+            color: this.group.color.rgb,
+            print: Object.keys((this.entity.printsThumbnails || {}))
+              .filter(type => types.includes(type))
+              .map(type => this.entity.printsThumbnails[type])[0]
           })),
           index
         },

package/components/checkout/cart/cart_entity/cart_entity_prints/cart-entity-prints.vue

@@ -63,6 +63,9 @@ export default {
     sumPrints() {
       return (this.entity.prints || []).length;
     }
+  },
+  mounted() {
+    console.log(this.entity);
   }
 };
 </script>

package/components/common/btn.vue

@@ -1,6 +1,7 @@
 <template>
   <component
-    :is="to ? 'nuxt-link' : 'div'"
+    :is="to ? 'nuxt-link' : (btnType || btnTag || 'div')"
+    :type="btnType"
     class="Btn__wrapper"
     :class="{
       block: btnBlock,
@@ -56,6 +57,12 @@ export default {
     to: {
       type: String
     },
+    btnTag: {
+      type: String
+    },
+    btnType: {
+      type: String
+    },
     btnClass: {
       type: String,
       default: 'white'

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

@@ -9,19 +9,35 @@
         class="form-label">
         {{ labelText }}
       </label>
-      <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
-        }"
-        @change="validateCoupon" />
+      <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" />
+        </div>
+        <div class="col-5">
+          <btn
+            btn-class="green"
+            :btn-block="true"
+            :btn-disabled="isLoading"
+            btn-label="Apply"
+            @onclick="validateCoupon">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </div>
+      </div>
       <span
         v-if="code && notValidCoupon"
         class="form-help is-danger">
@@ -29,13 +45,15 @@
       </span>
     </validation-provider>
     <div v-if="value">
-      <div class="mt-10 lc_h4">
+      <div
+        v-if="isValidPricing"
+        class="lc_h4">
         {{ value.value | price }} OFF
       </div>
       <div
-        v-if="value.minOrderValue"
-        class="mt-10 lc_caption">
-        Min Order For Coupon: {{ value.minOrderValue | price }}
+        v-else
+        class="lc_caption form-help is-danger">
+        Invalid coupon: Min Order for Coupon: {{ value.minOrderValue | price }}
       </div>
     </div>
   </div>
@@ -55,6 +73,9 @@ export default {
     value: {
       type: Object
     },
+    pricing: {
+      type: Object
+    },
     labelText: {
       type: String,
       default: 'Coupon'
@@ -69,6 +90,9 @@ export default {
   },
   computed: {
     ...mapGetters(['shop']),
+    isValidPricing() {
+      return !this.value.minOrderValue || this.pricing.coupon;
+    },
     model: {
       get() {
         return this.value?.code;

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

@@ -56,7 +56,8 @@
         type="text"
         :value="value"
         :class="{ 'filled': value || selected }"
-        class="form-hidden-validator form-field" />
+        class="form-hidden-validator form-field"
+        style="display: none" />
       <label
         v-if="!labelless"
         class="form-label label-inner"
@@ -126,7 +127,7 @@ export default {
       set(option) {
         this.selected = option;
         this.$emit('input', option.value);
-        this.$emit('select', this.suburbs.find(({ postcode }) => postcode === option.value));
+        this.$emit('select', this.suburbs.find(({ _id }) => _id === option._id));
       }
     }
   },
@@ -148,10 +149,11 @@ export default {
         this.options = [];
       }
     },
-    createOptionFromSuburb({ locality, state, postcode, city }) {
+    createOptionFromSuburb({ locality, state, postcode, city, _id }) {
       return {
         label: [locality || city, state, postcode].filter(i => !!i).join(', '),
-        value: postcode
+        value: postcode,
+        _id: _id
       };
     }
   }

package/components/common/product_side_with_print/product-side-with-print.vue

@@ -85,8 +85,8 @@ export default {
       return getColorImage(this.product, this.size, this.side, color) || getProductCover(this.product, this.size, this.side, color);
     },
     print() {
-      const { layersThumbnails = {} } = this.product || {};
-      return layersThumbnails[this.side];
+      const { printsThumbnails = {} } = this.product || {};
+      return printsThumbnails[this.side];
     }
   },
   methods: {

package/components/customer/signin_form/signin-form.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="form__wrapper SignInFrom__wrapper">
-    <validation-observer ref="form" @submit="submit()">
+    <validation-observer
+      ref="form"
+      @keyup.enter="submit">
       <div class="form__content mt-4">
         <div class="row">
           <div class="col-sm-6 col-12">
@@ -84,6 +86,7 @@
             :btn-processing="processing"
             :btn-disabled="processing"
             :btn-block="true"
+            btn-type="button"
             btn-label="Log in"
             @onclick="submit()">
             <i
@@ -121,7 +124,7 @@ export default {
       this.error = null;
 
       const isValid = await this.$refs.form.validate();
-      if (!isValid) {
+      if (!isValid || this.processing) {
         return;
       }
 

package/components/design/approve_design_tables/approve-design-tables.scss

@@ -20,10 +20,10 @@
     }
   }
   &__thumbnail {
-    width: 250px;
-    height: 250px;
+    width: 210px;
+    height: 210px;
     &-cell {
-      width: 250px;
+      width: 210px;
       position: relative;
       padding: 5px;
     }

package/components/design/approve_design_tables/approve-design-tables.vue

@@ -3,7 +3,7 @@
     <table class="lc_table bordered ApproveDesignTables__table">
       <thead class="centered">
         <tr class="stripped">
-          <th>Tee Color</th>
+          <th>Color</th>
           <th>Design Front</th>
           <th>Design Back</th>
           <th>Products</th>
@@ -22,12 +22,12 @@
               size="medium"
               class="ApproveDesignTables__thumbnail" />
             <div
-              v-if="!group.product.prints.front"
+              v-if="!group.product.printsThumbnails.front"
               class="ApproveDesignTables__no-design">
               No design
             </div>
-            <div v-if="group.product.printAreas.front">
-              {{ group.product.printAreas.front | print }}
+            <div v-if="group.product.printsThumbnails.front">
+              {{ group.product.printsThumbnails.front | print }}
             </div>
           </td>
           <td class="ApproveDesignTables__thumbnail-cell">
@@ -37,12 +37,12 @@
               size="medium"
               class="ApproveDesignTables__thumbnail" />
             <div
-              v-if="!group.product.prints.back"
+              v-if="!group.product.printsThumbnails.back"
               class="ApproveDesignTables__no-design">
               No design
             </div>
-            <div v-if="group.product.printAreas.back">
-              {{ group.product.printAreas.back | print }}
+            <div v-if="group.product.printsThumbnails.back">
+              {{ group.product.printsThumbnails.back | print }}
             </div>
           </td>
           <td>
@@ -75,12 +75,12 @@
       </thead>
       <tbody class="centered">
         <tr
-          v-for="product in products"
+          v-for="product in simpleProducts"
           :key="product._id">
-          <td>{{ product.brand }}</td>
+          <td>{{ product.brand.name }}</td>
           <td>{{ product.style }}</td>
           <td>{{ product.color.name }}</td>
-          <td>{{ product.size.name }}</td>
+          <td>{{ product.size.shortName }}</td>
           <td>{{ product.amount }}</td>
         </tr>
         <tr>
@@ -119,14 +119,25 @@ export default {
     }
   },
   computed: {
+    simpleProducts() {
+      return this.products
+        .reduce((items, { product, simpleProducts }) => ([
+          ...items,
+          ...simpleProducts.map(sp => ({ ...product, ...sp }))
+        ]), [])
+        .filter(({ amount }) => amount > 0);
+    },
     totalAmount() {
-      return this.products.reduce((amount, product) => {
-        return amount + product.amount;
+      return this.simpleProducts.reduce((amount, product) => {
+        return amount + (product.amount * product.productCost);
       }, 0);
     },
     productsByColor() {
-      return groupProductsByColor(this.products, this.order.price.products);
+      return groupProductsByColor(this.products);
     }
+  },
+  mounted() {
+    groupProductsByColor(this.products);
   }
 };
 </script>

package/components/design/approve_design_tees/approve-design-tees.vue

@@ -7,11 +7,11 @@
         </div>
         <div class="ApproveDesignTees__container">
           <product-side-with-print
-            :product="product"
+            :product="productWithPrint"
             side="front"
             size="large" />
           <div
-            v-if="!product.prints.front"
+            v-if="!hasFrontPrint"
             class="ApproveDesignTees__no-design">
             No design
           </div>
@@ -23,11 +23,11 @@
         </div>
         <div class="ApproveDesignTees__container">
           <product-side-with-print
-            :product="product"
+            :product="productWithPrint"
             side="back"
             size="large" />
           <div
-            v-if="!product.prints.back"
+            v-if="!hasBackPrint"
             class="ApproveDesignTees__no-design">
             No design
           </div>
@@ -50,6 +50,20 @@ export default {
       type: Object,
       required: true
     }
+  },
+  computed: {
+    hasFrontPrint() {
+      return this.product.prints.some(({ printArea }) => printArea.side === 'front');
+    },
+    hasBackPrint() {
+      return this.product.prints.some(({ printArea }) => printArea.side === 'back');
+    },
+    productWithPrint() {
+      return {
+        ...this.product.product,
+        printsThumbnails: (this.product.printsThumbnails || {})
+      };
+    }
   }
 };
 </script>

package/components/editor/editor.vue

@@ -176,7 +176,7 @@ export default {
       }
     },
     proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing);
+      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
       this.addToCart({ entities, shop: this.shop });
       this.showCartModal(async () => {
         const message = 'Do you wish to continue with editing the current design or reset the editor?';

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

@@ -104,7 +104,6 @@ export default {
       this.$emit('layer-added', { layer, toEditMode: true });
     },
     async handleUploaded({ url, size }) {
-      debugger
       const layer = await this.createLayer({ type: 'art', url, size });
       this.$emit('layer-added', { layer, toEditMode: false });
     }

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

@@ -85,7 +85,7 @@ export default {
     },
     selectSuboption(option) {
       this.closeSuboptions();
-      this.$emit('select', option);
+      this.$emit('select', { ...option, printArea: { ...option.printArea, _id: this.option.printArea._id } });
     },
     calcPrintPrice(option) {
       const amount = this.usedSimpleProducts.reduce((amount, product) => product.amount + amount, 0);

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

@@ -173,6 +173,7 @@ export default {
       this.redrawWithThrottle();
     },
     printArea(value) {
+      console.log(value);
       this.fabricHelper.setPrintArea(value, this.editorSize, this.product);
       this.redraw();
     },

package/components/products/products_autocomplete/products-autocomplete.vue

@@ -8,6 +8,10 @@
         placeholder="Search products"
         type="text"
         class="form-field no-label tiny-placeholder labelless"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
         @input="searchWithDebounce"
         @focus="showResults"
         @blur="hideResults" />

package/components/products/products_filters/products-filters.vue

@@ -40,14 +40,11 @@ export default {
   name: 'ProductsFilters',
   data() {
     const sortByOptions = [{
-      value: '',
-      label: 'Without Sort'
+      value: 'price-low-high',
+      label: 'low to high'
     }, {
       value: 'price-high-low',
       label: ' high to low'
-    }, {
-      value: 'price-low-high',
-      label: 'low to high'
     }];
     return {
       sortBy: sortByOptions.find(({ value }) => value === this.$route.query.sort),

package/components/subscribe/subscribe.vue

@@ -100,6 +100,9 @@ export default {
   computed: {
     ...mapGetters(['shop'])
   },
+  mounted() {
+    this.preloadReCaptcha();
+  },
   methods: {
     async submit() {
       const isValid = await this.$refs.form.validate();

package/components/the_navbar/the-navbar.scss

@@ -20,6 +20,10 @@
         height: $mobile_navbar_height + $mobile_notification_bar_height;
       }
     }
+    p {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
   }
   &__notification {
     background-color: $black;
@@ -30,6 +34,7 @@
     &-close {
       position: absolute;
       right: 20px;
+      top: 10px;
       cursor: pointer;
       color: $black;
     }

package/components/the_navbar/the-navbar.vue

@@ -9,8 +9,7 @@
         v-if="notificationBar.enabled"
         class="TheNavbar__notification lc_regular12"
         :style="{
-          'background-color': notificationBar.backgroundColor,
-          color: notificationBar.textColor
+          'background-color': notificationBar.backgroundColor
         }">
         <span v-html="notificationBar.text"></span>
         <span

package/mixins/product-preview.js

@@ -75,6 +75,12 @@ const productPreview = {
     },
     hasTags() {
       return this.product?.tags.length > 0;
+    },
+    minPrice() {
+      return this.product.isClearance ? this.product.minPriceWithoutClearance : this.product.minPrice;
+    },
+    maxPrice() {
+      return this.product.isClearance ? this.product.maxPriceWithoutClearance : this.product.maxPrice;
     }
   },
   mounted() {

package/package.json

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

package/plugins/vee-validate.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { required, email, max, min_value as minValue, integer } from 'vee-validate/dist/rules';
+import { required, email, max, min_value as minValue, max_value as maxValue, integer } from 'vee-validate/dist/rules';
 import { phone, float } from '@lancom/shared/assets/js/utils/custom-validation-rules';
 
 Vue.component('ValidationProvider', ValidationProvider);
@@ -16,5 +16,6 @@ extend('email', email);
 extend('max', max);
 extend('float', float);
 extend('min_value', minValue);
+extend('max_value', maxValue);
 extend('phone', phone);
 extend('integer', integer);

package/plugins/vue-recaptcha.js

@@ -4,10 +4,13 @@ export default () => {
   Vue.mixin({
     methods: {
       async getRecaptcha(name) {
+        await this.preloadReCaptcha();
+        return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
+      },
+      async preloadReCaptcha() {
         if (!this.$recaptcha) {
           await this.loadReCaptcha();
         }
-        return process.env.IS_LOCAL === 'true' || await this.$recaptcha(name);
       },
       async loadReCaptcha() {
         const { VueReCaptcha } = await import('vue-recaptcha-v3');

package/store/product.js

@@ -184,7 +184,6 @@ export const actions = {
     }
   ) {
     const { center: { top, left } } = getters.printArea;
-    const { selectedPrintArea } = getters;
     const layer = await getLayerModel({
       type,
       colorId: editableColor?._id,
@@ -193,10 +192,11 @@ export const actions = {
       isEditMode,
       url,
       originalSize: size,
+      sideId: getters.editableSide?.id,
       properties: {
         ...(properties || {}),
         printArea: editablePrintArea?._id,
-        printSize: selectedPrintArea?._id,
+        printSize: editablePrintArea?.printSize?._id,
         printType: selectedPrintType?._id
       }
     });