@lancom/shared 0.0.336 → 0.0.338

package/assets/js/utils/colors.js

@@ -6,9 +6,11 @@ export const isValidImageType = (i, type) => i.type === type || (i.types || []).
 
 export const isValidImageTypes = (i, types) => types.some(type => isValidImageType(i, type));
 
-export const getColorImage = (product = {}, size = 'small', type, color, allowAnyColor = false) => {
-  const colorImage = color && (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color?._id === i.color || color?._id === i.color?._id));
-  const image = colorImage || (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
+export const getColorImage = (product = {}, size = 'small', type, color, allowAnyColor = false, excludeType = []) => {
+  const excludeTypes = (excludeType && Array.isArray(excludeType) ? excludeType : [excludeType]) || [];
+  const validImages = (product.images || []).filter(i => !excludeTypes.some(type => isValidImageType(i, type)));
+  const colorImage = color && validImages.find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color?._id === i.color || color?._id === i.color?._id));
+  const image = colorImage || validImages.find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
   return image && staticLink(image[size]);
 };
 
@@ -35,11 +37,11 @@ export const getProductCover = (product = {}, size = 'small', type = COLORS_IMAG
   getFunc(product, type, null, true);
 };
 
-export const getFillColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'color', type, color, allowAnyColor);
-export const getSmallColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'small', type, color, allowAnyColor);
-export const getMediumColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'medium', type, color, allowAnyColor);
-export const getLargeColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'large', type, color, allowAnyColor);
-export const getOriginColorImage = (product, type, color, allowAnyColor) => getColorImage(product, 'origin', type, color, allowAnyColor);
+export const getFillColorImage = (product, type, color, allowAnyColor, excludeType) => getColorImage(product, 'color', type, color, allowAnyColor, excludeType);
+export const getSmallColorImage = (product, type, color, allowAnyColor, excludeType) => getColorImage(product, 'small', type, color, allowAnyColor, excludeType);
+export const getMediumColorImage = (product, type, color, allowAnyColor, excludeType) => getColorImage(product, 'medium', type, color, allowAnyColor, excludeType);
+export const getLargeColorImage = (product, type, color, allowAnyColor, excludeType) => getColorImage(product, 'large', type, color, allowAnyColor, excludeType);
+export const getOriginColorImage = (product, type, color, allowAnyColor, excludeType) => getColorImage(product, 'origin', type, color, allowAnyColor, excludeType);
 
 export const getProductFillCover = (product, type, color) => getProductCover(product, 'color', type, color);
 export const getProductSmallCover = (product, type, color) => getProductCover(product, 'small', type, color);
@@ -49,12 +51,12 @@ export const getProductOriginCover = (product, type, color) => getProductCover(p
 
 export const getBgStyle = img => img && ({ 'background-image': `url("${img}")` });
 
-export function getColorBackgroundStyle(color, skipPattern) {
-  const { rgb, pattern, name } = color || {};
+export function getColorBackgroundStyle(color, skipPattern, originBackground) {
+  const { rgb, pattern, patternOrigin, name } = color || {};
 
   if (pattern && !skipPattern) {
     return {
-      'background-image': `url("${staticLink(pattern)}")`
+      'background-image': `url("${staticLink((originBackground && patternOrigin) || pattern)}")`
     };
   }
 

package/assets/js/utils/fabric/selection-style.js

@@ -4,7 +4,7 @@ let rotate;
 
 export function loadRotateImage(cb = Function.prototype) {
   const image = new Image();
-  image.src = '/icons/rotate.png';
+  image.src =  '/icons/rotate.png';
   image.onload = () => {
     rotate = image;
     cb();

package/assets/js/utils/prints.js

@@ -61,7 +61,7 @@ export function getPrintsFromLayers(layers, product) {
       prints.set(printAreaKey, data);
       layer.printGuid = data.guid;
     } else {
-      const print = prints.get(printArea);
+      const print = prints.get(printAreaKey);
       layer.printGuid = print.guid;
       print.layers.push(generatePrintLayer(layer));
       prints.set(printAreaKey, print);

package/components/checkout/cart/cart.vue

@@ -92,10 +92,10 @@ export default {
   filters: { price },
   mixins: [CartMixin],
   computed: {
-    ...mapGetters(['MESSAGES', 'SETTINGS', 'currency']),
+    ...mapGetters(['MESSAGES', 'SETTINGS', 'currency', 'country']),
     ...mapGetters('cart', ['isEmpty', 'cartPricingError', 'cartPricing', 'cartPricingCalculating', 'entities']),
     onlyPostcode() {
-      return !!this.SETTINGS.CART_ONLY_POSTCODE;
+      return !!this.SETTINGS.CART_ONLY_POSTCODE && this.country?.isoCode === 'UK';
     },
     postcodeLabel() {
       return this.onlyPostcode ? 'Postcode' : (this.MESSAGES.CART_POSTCODE || 'Postcode');

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

@@ -6,6 +6,7 @@
         @click="showImage(images, 0)">
         <product-side-with-print
           :product="group"
+          :fill-background="true"
           :default-preview="defaultPreview"
           side="front"
           size="medium" />
@@ -17,6 +18,7 @@
         <product-side-with-print
           :product="group"
           :default-preview="defaultPreview"
+          :fill-background="true"
           side="back"
           size="medium" />
       </div>

package/components/checkout/cart/cart_pricing/cart-pricing.vue

@@ -58,7 +58,7 @@
         COUPON, {{ pricing.coupon.code }}:
       </div>
       <div class="lc_body-large lc_gray-main">
-        {{ pricing.coupon.totalPrice | price(currency) }}
+        {{ couponTotal | price(currency) }}
       </div>
     </div>
     <div class="CartPricing__info CartPricing__info--gray">
@@ -97,6 +97,9 @@ export default {
   },
   computed: {
     ...mapGetters(['currency', 'taxName']),
+    couponTotal() {
+      return -this.pricing.totalsWithoutCoupon.totalPrice + this.pricing.totalPrice;
+    },
     hasSuppliersWithRates() {
       return this.suppliersWithRates.length > 0;
     },

package/components/checkout/order/order-success/order-success.vue

@@ -2,7 +2,7 @@
   <div class="OrderSuccess__wrapper">
     <div class="OrderSuccess__card">
       <div class="OrderSuccess__card-icon">
-        <img src="/images/success.svg" />
+        <img src="~static/images/success.svg" />
       </div>
       <div class="OrderSuccess__card-head">
         RECEIVED!

package/components/common/client_settings/client-settings.scss

@@ -8,7 +8,7 @@
     min-width: 72px;
     width: 33%;
     height: 100%;
-    border-radius: 2px;
+    border-radius: 5px;
     box-shadow: $elevation1;
   }
   &__value {
@@ -52,15 +52,15 @@
   &__dropdown {
     position: absolute;
     z-index: 101;
-    top: 40px;
-    width: 220px;
+    top: 35px;
+    width: 250px;
     margin-top: 20px;
     margin-left: -55px;
     // transform: translateY(-50%);
     padding: 15px;
     box-shadow: 0px 4px 121px 0px rgba(145, 136, 188, 0.34);
     background-color: white;
-    border-radius: 12px;
+    border-radius: 5px;
   }
   &__backdrop {
     top: 0;

package/components/common/client_settings/client-settings.vue

@@ -18,7 +18,8 @@
     </div>
     <div
       v-if="isOpen"
-      class="ClientSettings__dropdown">
+      class="ClientSettings__dropdown"
+      v-click-outside="close">
       <div>
         <div
           class="ClientSettings__field"
@@ -112,6 +113,9 @@ export default {
     }
   },
   methods: {
+    close() {
+      this.isOpen = false;
+    },
     toggleVisibleCountries() {
       this.visibleCountries = !this.visibleCountries;
     },

package/components/common/pricing_table/pricing-table.scss

@@ -3,4 +3,7 @@
 table {
   min-width: 200px;
   background-color: $white;
+  tr th {
+    overflow: hidden;
+  }
 }

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

@@ -2,6 +2,9 @@
   position: relative;
   width: 100%;
   height: 100%;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
   &.preview {
     cursor: pointer;
   }

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

@@ -49,6 +49,10 @@ export default {
       type: Boolean,
       default: false
     },
+    originBackground: {
+      type: Boolean,
+      default: false
+    },
     priviewProducts: {
       type: Array,
       default: null
@@ -76,7 +80,7 @@ export default {
       return [...this.priviewProducts.reduce(predicate, new Map()).values()];
     },
     colorBackground() {
-      return this.fillBackground && getColorBackgroundStyle(this.product.color);
+      return this.fillBackground && getColorBackgroundStyle(this.product.color, false, this.originBackground);
     },
     imageBackground() {
       return this.image && this.getImageBackground(this.image);

package/components/customer/customer_menu/customer-menu.scss

@@ -3,6 +3,11 @@
 .CustomerMenu {
   &__wrapper {
     position: relative;
+    .Btn {
+      &__wrapper {
+        height: 43px;
+      }
+    }
   }
   &__inner {
     min-width: 72px;
@@ -18,7 +23,7 @@
     display: flex;
     align-items: center;
     background-color: rgba(125, 106, 239, 0.07);
-    padding: 10px 10px 5px 10px;
+    padding: 4px;
     border-radius: 20px;
     &--divider {
       display: block;
@@ -60,7 +65,7 @@
     padding: 15px;
     box-shadow: 0px 4px 121px 0px rgba(145, 136, 188, 0.34);
     background-color: white;
-    border-radius: 12px;
+    border-radius: 5px;
   }
   &__backdrop {
     top: 0;
@@ -95,7 +100,8 @@
       display: flex;
       align-items: center;
       font-size: 16px;
-      color: $purple;
+      color: $black;
+      text-decoration: none !important;
 
       &-checked {
         margin-right: 10px;

package/components/customer/customer_menu/customer-menu.vue

@@ -21,24 +21,47 @@
     </div>
     <div
       v-if="isOpen"
-      class="CustomerMenu__dropdown">
+      class="CustomerMenu__dropdown"
+      v-click-outside="close">
       <div>
-        <a href="/customer/settings" class="CustomerMenu__field-item">Settings</a>
+        <a
+          href="/customer/settings"
+          class="CustomerMenu__field-item">
+          Settings
+        </a>
       </div>
       <div>
-        <a href="/customer/orders"  class="CustomerMenu__field-item">Orders</a>
+        <a
+          href="/customer/orders"
+          class="CustomerMenu__field-item">
+          Orders
+        </a>
+      </div>
+      <div>
+        <a
+          href="#"
+          class="CustomerMenu__field-item"
+          @click="auth_logout">Logout</a>
       </div>
     </div>
   </div>
 </template>
   
 <script>
+import { mapActions } from 'vuex';
+
 export default {
   name: 'CustomerMenu',
   data() {
     return {
       isOpen: false,
     };
+  },
+  methods: {
+    ...mapActions('auth', ['auth_logout']),
+    close() {
+      this.isOpen = false;
+    }
   }
 };
 </script>

package/components/editor/editor.vue

@@ -14,6 +14,7 @@
             <template v-slot:default="{ currentTab }">
               <component
                 :is="editorCurrentTabComponent(currentTab)"
+                @choose-products="chooseProducts()"
                 v-if="currentTab">
               </component>
             </template>
@@ -25,7 +26,13 @@
               btn-label="Start again"
               btn-class="white"
               @onclick="showResetAllConfirm" />
+            <btn
+              v-if="isValidPrintOnly && needToAddProducts"
+              btn-label="Enter products"
+              btn-class="green"
+              @onclick="chooseProducts()" />
             <v-popover
+              v-else
               ref="popover"
               trigger="hover"
               :delay="{ hide: 400, show: 400 }"
@@ -210,6 +217,21 @@ export default {
       if (this.$refs.popover) {
         this.$refs.popover.hide();
       }
+    },
+    chooseProducts() {
+      this.selectTab('product');
+      setTimeout(() => {
+        const element = document.getElementById('EditorProductDetails');
+        if (element) {
+          const offset = 100;
+          const elementPosition = element.getBoundingClientRect().top;
+          const offsetPosition = elementPosition + window.pageYOffset - offset;
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth'
+          });
+        }
+      }, 250);
     }
   }
 };

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

@@ -79,7 +79,8 @@
     <editor-pricing
       v-if="hasPricing"
       class="EditorLayers__pricing"
-      :has-cart-btn="false" />
+      :has-cart-btn="false"
+      @choose-products="$emit('choose-products')" />
   </div>
 </template>
 

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

@@ -58,13 +58,16 @@
     display: inline-block;
   }
   &__prints-table {
-    width: 400px;
+    width: 450px;
 
     thead tr,
     tbody td:first-child {
       background-color: $grey_4 !important;
       text-align: center;
     }
+    tr th {
+      font-size: 12px;
+    }
   }
   &__available-warning {
     background-color: $error;

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

@@ -111,6 +111,7 @@
         :side="side"
         :default-preview="false"
         :fill-background="true"
+        :origin-background="true"
         size="large" />
       <div
         class="EditorProductDetails__product-sides-toggle"
@@ -119,7 +120,8 @@
       </div>
     </div>
     <div
-      v-if="productDetailsLoaded">
+      v-if="productDetailsLoaded"
+      id="EditorProductDetails">
       <div class="EditorProductDetails__section">
         <product-colors-selector
           :has-another-print-btn="false"

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

@@ -58,35 +58,71 @@
   }
   &__placeholder {
     position: absolute;
-    cursor: pointer;
     z-index: 999;
-    background-image: url(../../../../static/images/type_here.png);
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    --placeholder-width: 140px;
-    --placeholder-height: 50px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 
     @media (max-width: $bp-extra-small-max) {
-      --placeholder-width: 70px;
-      --placeholder-height: 25px;
+      font-size: 10px;
     }
 
     &.tighten {
-      --placeholder-width: 70px;
-      --placeholder-height: 25px;
-
+      font-size: 10px;
       @media (max-width: $bp-extra-small-max) {
-        --placeholder-width: 35px;
-        --placeholder-height: 12.5px;
+        font-size: 8px;
+      }
+    }
+    letter-spacing: -0.5px;
+    &-option {
+      cursor: pointer;
+      margin: 5px 0;
+      text-transform: uppercase;
+      span {
+        &:last-child {
+          display: none;
+        }
+        &:first-child {
+          display: inline;
+        }
+      }
+    }
+    &-divider {
+      color: $grey_1;
+    }
+    &-progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: $white_high_emphasis;
+      opacity: .7;
+      &-indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        background-color: $green;
+      }
+    }
+    &.side {
+      width: 20px;
+      .EditorWorkspaceSide__placeholder-option span {
+        &:last-child {
+          display: inline;
+        }
+        &:first-child {
+          display: none;
+        }
+      }
+      .EditorWorkspaceSide__placeholder-divider {
+        display: none;
       }
     }
-    
-    width: var(--placeholder-width);
-    height: var(--placeholder-height);
-    margin-left: calc(var(--placeholder-width) / 2 * (-1));
-    margin-top: calc(var(--placeholder-height) / 2 * (-1));
   }
   &__alert {
     &-container {

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

@@ -5,6 +5,7 @@
     :class="{
       'EditorWorkspaceSide__wrapper--zoom-in': isZoomed
     }"
+    v-click-outside="onOutsideClick"
     @mouseover="toogleBoundBox(true)"
     @mouseleave="toogleBoundBox(false)">
     <div
@@ -32,12 +33,50 @@
       </div>
     </div>
     <div
-      v-if="!printAreaLayers.length && fabricHelper"
+      v-if="fabricHelper"
       class="EditorWorkspaceSide__placeholder"
-      :class="{ tighten: printAreaIsSmall }"
+      :class="{
+        tighten: printAreaIsSmall,
+        side: printAreaLayers.length
+      }"
       ignore-document-click
-      :style="positionPlaceholder"
-      @click="createTextLayer">
+      :style="positionPlaceholder">
+      <div
+        @click="createTextLayer"
+        class="EditorWorkspaceSide__placeholder-option">
+        <span>Type here</span>
+        <span>T</span>
+      </div>
+      <div class="EditorWorkspaceSide__placeholder-divider">
+        or
+      </div>
+      <div>
+        <file-uploader
+          :multiple="false"
+          :url="`image/editor/${shop._id}/${product._id}`"
+          @onuploaded="handleUploaded">
+          <template #toggle>
+            <div class="EditorWorkspaceSide__placeholder-option">
+              <span>
+                <i class="icon-picture"></i> Add art
+              </span>
+              <span>
+                <i class="icon-picture"></i>
+              </span>
+            </div>
+          </template>
+          <template v-slot:progress="{ progress }">
+            <div
+              v-if="progress"
+              class="EditorWorkspaceSide__placeholder-progress">
+              <div
+                :style="{ width: `${progress}%`}"
+                class="EditorWorkspaceSide__placeholder-progress-indicator"></div>
+              <spinner v-if="progress >= 100" background="white" style="margin-top: 50px" />
+            </div>
+          </template>
+        </file-uploader>
+      </div>
     </div>
     <div
       v-show="isVisibleOverlay"
@@ -85,9 +124,13 @@ import FabricHelper from '@lancom/shared/assets/js/utils/fabric-helper';
 import { findParentByPredicate } from '@lancom/shared/assets/js/utils/dom';
 import Breakpoints from '@lancom/shared/assets/js/utils/breakpoints';
 import { getColorBackgroundStyle } from '@lancom/shared/assets/js/utils/colors';
+import FileUploader from '@lancom/shared/components/common/file_uploader';
 
 export default {
   name: 'EditorWorkspaceSide',
+  components: {
+    FileUploader
+  },
   props: {
     side: {
       type: String,
@@ -105,6 +148,7 @@ export default {
   },
   data() {
     return {
+      addedFromCanvas: false,
       visibleWireframe: false,
       fabricHelper: null,
       redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
@@ -120,6 +164,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['shop']),
     ...mapGetters('product', [
       'product',
       'layers',
@@ -137,7 +182,7 @@ export default {
       return !!this.wireframeImage;
     },
     wireframeImage() {
-      return this.images.find(i => i.types?.includes('designer') && i.types?.includes(this.side));
+      return this.images.find(i => i.types?.includes('wireframe') && i.types?.includes(this.side));
     },
     sideEditableLayers() {
       return this.editableLayers.filter(l => l.sideId === this.side);
@@ -154,26 +199,32 @@ export default {
       } : null;
     },
     positionPlaceholder() {
-      const { center } = this.fabricHelper.printAreaRect;
+      const { center, left, top, width, height } = this.fabricHelper.printAreaRect;
+      // console.log('this.fabricHelper.printAreaRect: ', this.fabricHelper.printAreaRect);
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
-      return {
-        top: `${center.top * ratio}px`,
-        left: `${center.left * ratio}px`
+      return this.printAreaLayers.length > 0 ? {
+        top: `${top * ratio}px`,
+        left: `${(left + width) * ratio + 4}px`
+      } : {
+        top: `${top * ratio}px`,
+        left: `${left * ratio}px`,
+        width: `${Math.max(60, width * ratio)}px`,
+        height: `${height * ratio}px`,
       };
     },
     showRecommendationToUseLargerImage() {
       return (
         this.selectedLayer &&
         this.selectedLayer.type === 'art' &&
-        this.selectedLayer.dpi >= 38 &&
-        this.selectedLayer.dpi <= 120
+        this.selectedLayer.dpi >= 75 &&
+        this.selectedLayer.dpi <= 100
       );
     },
     showErrorAboutSmallImage() {
       return (
         this.selectedLayer &&
         this.selectedLayer.type === 'art' &&
-        this.selectedLayer.dpi < 38
+        this.selectedLayer.dpi < 75
       );
     },
     printAreaIsSmall() {
@@ -338,7 +389,7 @@ export default {
     updateBackgroundImage() {
       const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
       const wireframeImageUrl = this.visibleWireframe && this.wireframeImage?.large;
-      const imageUrl = wireframeImageUrl || getLargeColorImage(this.product, type, this.editableColor);
+      const imageUrl = wireframeImageUrl || getLargeColorImage(this.product, type, this.editableColor, false, ['wireframe']);
       if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
         return this.fabricHelper.setBackgroundImage(this.backgroundImage);
       }
@@ -355,20 +406,32 @@ export default {
     removeSelected() {
       this.removeTemplateLayer(this.selectedLayer);
     },
+    onOutsideClick() {
+      if (this.addedFromCanvas && this.selectedLayer?.type === 'text' &&  !this.selectedLayer.copy) {
+        this.removeTemplateLayer(this.selectedLayer);
+      }
+      this.addedFromCanvas = false;
+    },
     saveLayersAsImage() {
       const image = this.fabricHelper.getLayersAsImage();
       this.setLayersThumbnail({ side: this.side, value: image });
     },
     createTextLayer() {
+      this.addedFromCanvas = true;
       window.scrollTo(0, 0);
       this.createLayer({ type: 'text', isEditMode: true });
       this.visibleWireframe = true;
     },
+    async handleUploaded({ url, size, fileName }) {
+      window.scrollTo(0, 0);
+      await this.createLayer({ type: 'art', url, size, fileName });
+      this.visibleWireframe = true;
+    },
     setDeleteButtonPosition(pos) {
       this.deleteButtonPos = pos;
     },
     setOffsetWarningVisibility(visible) {
-      // this.offsetWarningVisible = visible;
+      this.offsetWarningVisible = visible;
     },
     toogleBoundBox(state, option) {
       if (!this.fabricHelper || this.breakpoints.is === 'xs') {

package/components/errors/404.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="error-404">
     <div class="mt-10 mb-10 image">
-      <img src="/images/tee.svg" width="250px" />
+      <img src="~static/images/tee.svg" width="250px" />
       <div class="code">
         404
       </div>

package/components/errors/500.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="error-500">
     <div class="mt-10 mb-10 image">
-      <img src="/images/tee.svg" width="250px" />
+      <img src="~static/images/tee.svg" width="250px" />
       <div class="code">
         500
       </div>

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

@@ -19,6 +19,9 @@
       img {
         margin-right: 10px;
       }
+      a {
+        color: $gray_main;
+      }
     }
   }
   &__footer {

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

@@ -10,56 +10,60 @@
       <div
         v-if="addedToCart"
         class="EditorPricing__main-alert">
-        <img src="/images/smile.svg" />
+        <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="/images/sad.svg" />
+        <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="/images/sad.svg" />
+        <img src="~static/images/sad.svg" />
         No prints defined
       </div>
 
       <div
         v-else-if="!hasUsedSimpleProducts && layers.length"
         class="EditorPricing__main-alert">
-        <img src="/images/sad.svg" />
-        No products selected to view price
+        <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="!isValidMiltipackOrderQuantity"
         class="EditorPricing__main-alert">
-        <img src="/images/sad.svg" />
+        <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="/images/sad.svg" />
+        <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="/images/sad.svg" />
+        <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="/images/smile.svg" />
+        <img src="~static/images/smile.svg" />
         All good to go!
       </div>
 

package/components/products/brands/brands.scss

@@ -0,0 +1,90 @@
+@import "@/assets/scss/variables";
+
+.Brands {
+  &__main {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    @media (max-width: $bp-extra-small-max) {
+      margin-top: 40px;
+    }
+    @media (max-width: $bp-small-max) {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 40px;
+    @media (max-width: $bp-medium-max) {
+      margin-top: 20px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      justify-content: space-around;
+    }
+  }
+  &__brand-item {
+    width: 280px;
+    height: 160px;
+    @media (max-width: $bp-medium-max) {
+      width: 240px;
+      height: 140px;
+    }
+    @media (max-width: $bp-small-max) {
+      width: 200px;
+      height: 120px;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      width: 180px;
+      height: 90px;
+    }
+    @media (max-width: $bp-mini-max) {
+      width: 155px;
+    }
+    background-color: rgba(242, 242, 247, 1);
+    margin: 8px 0;
+    text-indent: -9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-logo {
+      display: block;
+      width: 153px;
+      height: 100px;
+      @media (max-width: $bp-extra-small-max) {
+        width: 123px;
+        height: 70px;
+      }
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+  }
+  &__control {
+    margin-top: 10px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    a {
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 31.2px;
+      letter-spacing: -0.005em;
+      color: $purple;
+    }
+  }
+  &__brands-image {
+    margin-top: 80px;
+    @media (max-width: $bp-medium-max) {
+      margin-top: 70px;
+    }
+    @media (max-width: $bp-small-max) {
+      margin-bottom: 70px;
+    }
+    img {
+      width: 100%;
+    }
+  }
+}

package/components/products/brands/brands.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="Brands__wrapper content-inner">
+    <div class="Brands__main">
+      <div
+        data-aos="fade-left"
+        class="Brands__items-wrapper Brands__brands">
+        <div class="Brands__title lc_h2">
+          Brands
+        </div>
+        <div class="Brands__items">
+          <nuxt-link
+            v-for="brand in brands"
+            :key="brand._id"
+            :to="brandLink(brand)"
+            :title="brand.name"
+            class="Brands__brand-item">
+              <span
+                class="Brands__brand-item-logo"
+                :style="{
+                  'background-image': brandBackgroundImage(brand)
+                }">
+              </span>
+          </nuxt-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
+import { staticLink } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'Brands',
+  fetch() {
+    return Promise.all([
+      this.fetchBrands(this.shop._id)
+    ]);
+  },
+  computed: {
+    ...mapGetters(['shop']),
+    ...mapGetters('products', [
+      'brands'
+    ])
+  },
+  methods: {
+    ...mapActions('products', [
+      'fetchBrands'
+    ]),
+    brandLink({ alias: brand }) {
+      return generateProductsLink(null, { brand });
+    },
+    brandBackgroundImage(brand) {
+      const link = staticLink(brand.logo);
+      return link ? `url("${link}")` : null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'brands';
+</style>

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

@@ -28,6 +28,9 @@
         font-size: 13px;
         text-decoration: none;
       }
+      a:hover {
+        font-weight: bold;
+      }
     }
     &-all {
       border-top: 1px solid $gray_main;

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

@@ -28,13 +28,6 @@
         <spinner v-if="searching" />
       </div>
       <div v-if="hasProducts">
-        <div class="ProductsAutocomplete__result-item">
-          <a
-            class="ProductsAutocomplete__result-item-all"
-            :href="fullSearchLink">
-            click to see all results
-          </a>
-        </div>
         <products-autocomplete-item
           v-for="product of products"
           :key="product._id"
@@ -42,6 +35,13 @@
           :product="product"
           class="ProductsAutocomplete__result-item"
           @select="$emit('select', product)" />
+        <div class="ProductsAutocomplete__result-item">
+          <a
+            class="ProductsAutocomplete__result-item-all"
+            :href="fullSearchLink">
+            more
+          </a>
+        </div>
       </div>
     </div>
   </div>

package/components/products/products_catalog/products-catalog.vue

@@ -50,8 +50,7 @@ export default {
       },
       set(page) {
         const link = generateProductsLink(this.$route, { page });
-        this.$router.push(link);
-        window.scrollTo(0, 0);
+        window.location.href = link;
       }
     }
   }

package/components/subscribe/subscribe.vue

@@ -10,7 +10,7 @@
       </slot>
       <slot name="description">
         <div class="Subscribe__description lc_regular16">
-          Sign up for new product relesses, free design rescurrces, and a chance to win 36 free custom printed shirts.
+          Sign up for new product releases, free design resources, tips to grow your brand and promo sale events
         </div>
       </slot>
     </div>

package/feeds/google-shopping.js

@@ -209,7 +209,7 @@ function generateProductLink(product, color, toEditor) {
   return `${link}${color ? `?color=${color.alias || color}` : ''}`;
 }
 
-export const staticLink = (link, config) => {
+const staticLink = (link, config) => {
   const { PROD_S3_BUCKET, DEV_S3_BUCKET, PROD_CDN_URL, DEV_CDN_URL, STATIC_URL } = config || {};
   if ((link || '').startsWith('http')) {
     if (PROD_S3_BUCKET && PROD_CDN_URL) {
@@ -228,5 +228,6 @@ export const staticLink = (link, config) => {
 module.exports = {
   googleShoppingFeed,
   googleLocalShoppingFeed,
-  generateProductLink
+  generateProductLink,
+  staticLink
 };

package/mixins/add-to-cart.js

@@ -38,6 +38,9 @@ export default {
     isValidMiltipackOrderQuantity() {
       return !this.multipack || this.multipack.qty <= this.usedSimpleProductsQuantity;
     },
+    needToAddProducts() {
+      return !this.usedSimpleProducts.length;
+    },
     addToCartDisabled() {
       return !((this.template.layers.length || !this.isPrintPricing) && this.usedSimpleProducts.length) || this.calculatingPrice || !this.isValidOrderQuantity || !this.isValidPrintOnly;
     }

package/package.json

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

package/store/product.js

@@ -370,7 +370,7 @@ export const mutations = {
       layer
     ];
     state.template = { ...state.template, layers };
-    if (layers.length === 1 && !state.product.printOnly) {
+    if (layers.length >= 1) {
         // const printType = state.product.printTypes[0];
         // state.selectedPrintType = printType;
         state.isPrintPricing = true;
@@ -382,7 +382,7 @@ export const mutations = {
     if (state.selectedLayer && state.selectedLayer.createdAt === layer.createdAt) {
       state.selectedLayer = null;
     }
-    if (state.template.layers.length === 0 && !state.product.printOnly) {
+    if (state.template.layers.length === 0) {
       // state.selectedPrintType = null;
       state.isPrintPricing = false;
     }

package/store/products.js

@@ -38,7 +38,7 @@ export const getters = {
 
 export const actions = {
   async fetchBrands({ commit }, shop) {
-    const brands = await api.fetchProductsBrands(shop, { limit: 10 });
+    const brands = await api.fetchProductsBrands(shop, { limit: 100 });
     commit('setBrands', brands);
   },
   async fetchTypes({ commit }, shop) {