@lancom/shared 0.0.337 → 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);

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

@@ -1,11 +1,10 @@
 import { fabric } from 'fabric';
-import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 
 let rotate;
 
 export function loadRotateImage(cb = Function.prototype) {
   const image = new Image();
-  image.src = staticLink('/icons/rotate.png');
+  image.src =  '/icons/rotate.png';
   image.onload = () => {
     rotate = image;
     cb();

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/editor/editor.vue

@@ -14,7 +14,7 @@
             <template v-slot:default="{ currentTab }">
               <component
                 :is="editorCurrentTabComponent(currentTab)"
-                @choose-products="selectTab('product')"
+                @choose-products="chooseProducts()"
                 v-if="currentTab">
               </component>
             </template>
@@ -30,7 +30,7 @@
               v-if="isValidPrintOnly && needToAddProducts"
               btn-label="Enter products"
               btn-class="green"
-              @onclick="selectTab('product')" />
+              @onclick="chooseProducts()" />
             <v-popover
               v-else
               ref="popover"
@@ -217,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_product_details/editor-product-details.vue

@@ -120,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

@@ -60,37 +60,34 @@
     position: absolute;
     z-index: 999;
     text-align: center;
-    
-    --placeholder-width: 140px;
-    --placeholder-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
 
     @media (max-width: $bp-extra-small-max) {
-      --placeholder-width: 70px;
-      --placeholder-height: 50px;
       font-size: 10px;
     }
 
     &.tighten {
-      --placeholder-width: 70px;
-      --placeholder-height: 50px;
       font-size: 10px;
-
       @media (max-width: $bp-extra-small-max) {
-        --placeholder-width: 35px;
-        --placeholder-height: 25px;
         font-size: 8px;
       }
     }
-    
-    width: var(--placeholder-width);
-    height: var(--placeholder-height);
-    margin-left: calc(var(--placeholder-width) / 2 * (-1));
-    margin-top: calc(var(--placeholder-height) / 2 * (-1));
     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;
@@ -112,6 +109,20 @@
         background-color: $green;
       }
     }
+    &.side {
+      width: 20px;
+      .EditorWorkspaceSide__placeholder-option span {
+        &:last-child {
+          display: inline;
+        }
+        &:first-child {
+          display: none;
+        }
+      }
+      .EditorWorkspaceSide__placeholder-divider {
+        display: none;
+      }
+    }
   }
   &__alert {
     &-container {

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

@@ -33,15 +33,19 @@
       </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">
       <div
         @click="createTextLayer"
         class="EditorWorkspaceSide__placeholder-option">
-        Type here
+        <span>Type here</span>
+        <span>T</span>
       </div>
       <div class="EditorWorkspaceSide__placeholder-divider">
         or
@@ -53,7 +57,12 @@
           @onuploaded="handleUploaded">
           <template #toggle>
             <div class="EditorWorkspaceSide__placeholder-option">
-              <i class="icon-picture"></i> Add art
+              <span>
+                <i class="icon-picture"></i> Add art
+              </span>
+              <span>
+                <i class="icon-picture"></i>
+              </span>
             </div>
           </template>
           <template v-slot:progress="{ progress }">
@@ -173,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);
@@ -190,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() {
@@ -374,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);
       }
@@ -416,7 +431,7 @@ export default {
       this.deleteButtonPos = pos;
     },
     setOffsetWarningVisibility(visible) {
-      // this.offsetWarningVisible = visible;
+      this.offsetWarningVisible = visible;
     },
     toogleBoundBox(state, option) {
       if (!this.fabricHelper || this.breakpoints.is === 'xs') {

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/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/package.json

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