@lancom/shared 0.0.453 → 0.0.456

package/assets/js/api/index.js

@@ -3,6 +3,7 @@ import { _get, _post, _put, _delete, _patch } from './helpers';
 import adminApi from './admin';
 import { unminifySimpleProducts } from './utils/simple-products';
 import { unminifyProduct } from './utils/product';
+import { createCachedFunction } from './../utils/cache';
 
 const api = {
   fetchClientSettings(shop, params) {
@@ -93,12 +94,12 @@ const api = {
     const url = shop ? `shop/${shop}/products/${alias}/simple-products` : `products/${alias}/simple-products`;
     return unminifySimpleProducts(await _get(url, params));
   },
-  fetchRelatedProducts(shop, alias, params) {
+  fetchRelatedProducts: createCachedFunction((shop, alias, params) => {
     return _get(`shop/${shop}/products/${alias}/related-products`, params);
-  },
-  fetchOtherProducts(shop, alias, params) {
+  }, 5000),
+  fetchOtherProducts: createCachedFunction((shop, alias, params) => {
     return _get(`shop/${shop}/products/${alias}/other-products`, params);
-  },
+  }, 5000),
   fetchHelpMessages(shop, group) {
     return _get(`shop/${shop}/help-messages/${group}`);
   },

package/assets/js/utils/breakpoints.js

@@ -3,7 +3,8 @@ import debounce from 'lodash.debounce';
 
 class Breakpoints {
   screens = {
-    mini: 448,
+    mini: 449,
+    xs: 450,
     sm: 768,
     md: 1024,
     lg: 1280,
@@ -48,7 +49,7 @@ class Breakpoints {
 
 
   isMini(val) {
-    return val < this.screens.mini;
+    return val <= this.screens.mini;
   }
 
   isXs(val) {

package/assets/js/utils/cache.js

@@ -0,0 +1,33 @@
+const createCachedFunction = (fn, ttl = 30000) => {
+  const cache = new Map();
+  const inFlight = new Map();
+
+  return (...args) => {
+    const cacheKey = JSON.stringify(args);
+    const cached = cache.get(cacheKey);
+    const now = Date.now();
+
+    if (cached && now - cached.timestamp < ttl) {
+      return Promise.resolve(cached.data);
+    }
+
+    const existing = inFlight.get(cacheKey);
+    if (existing) {
+      return existing;
+    }
+
+    const promise = fn(...args).then(data => {
+      cache.set(cacheKey, { data, timestamp: now });
+      inFlight.delete(cacheKey);
+      return data;
+    }).catch(error => {
+      inFlight.delete(cacheKey);
+      throw error;
+    });
+
+    inFlight.set(cacheKey, promise);
+    return promise;
+  };
+};
+
+export { createCachedFunction };

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

@@ -137,17 +137,19 @@ export default class FabricHelper {
   }
 
   setPrintArea(printArea, size, product) {
-    this.printAreaRect = getPrintAreaByName({
-      printArea: printArea?.parentPrintArea || printArea?._id,
-      printSize: printArea?.printSize,
-      printAreaOffsets: printArea?.printAreaOffsets,
-      editorWidth: size.width,
-      editorHeight: size.height
-    }, product, true);
-    if (this.background) {
-      this.background.setBoundingRect(this.printAreaRect);
+    if (printArea) {
+      this.printAreaRect = getPrintAreaByName({
+        printArea: printArea?.parentPrintArea || printArea?._id,
+        printSize: printArea?.printSize,
+        printAreaOffsets: printArea?.printAreaOffsets,
+        editorWidth: size.width,
+        editorHeight: size.height
+      }, product, true);
+      if (this.background) {
+        this.background.setBoundingRect(this.printAreaRect);
+      }
+      this.addBoundingArea();
     }
-    this.addBoundingArea();
   }
 
   addBoundingArea() {

package/components/common/tabs.vue

@@ -179,6 +179,7 @@ export default {
   &s--primary &.disabled,
   &s--secondary &.disabled {
     pointer-events: none;
+    opacity: 0.7;
   }
   &s--large &.short,
   &s--primary &.short,

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

@@ -43,7 +43,7 @@
       </div>
     </div>
     <div
-      v-if="fabricHelper && !editModeSelectedLayer"
+      v-if="fabricHelper && fabricHelper.printAreaRect && !editModeSelectedLayer"
       class="EditorWorkspaceSide__placeholder"
       :class="{
         tighten: !isZoomed && printAreaIsSmall,
@@ -233,7 +233,7 @@ export default {
       return layers;
     },
     positionPlaceholder() {
-      const { center, left, top, width, height } = this.fabricHelper.printAreaRect;
+      const { center, left, top, width, height } = this.fabricHelper.printAreaRect || {};
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
       if (this.printAreaLayers.length > 0) {
         return {
@@ -451,7 +451,7 @@ export default {
       this.removeTemplateLayer(this.selectedLayer);
     },
     onOutsideClick() {
-      if (this.addedFromCanvas && this.selectedLayer?.type === 'text' &&  !this.selectedLayer.copy) {
+      if (this.addedFromCanvas && this.selectedLayer?.type === 'text' && !this.selectedLayer.copy) {
         this.removeTemplateLayer(this.selectedLayer);
       }
       this.addedFromCanvas = false;

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.scss

@@ -8,6 +8,13 @@
     background: white;
     left: 0;
     right: 0;
+    // min-height: 64px;
+    box-shadow: none !important;
+    border-radius: 0;
+    border: none;
+    .EditorPricing__clearance-messages {
+      display: none;
+    }
   }
   &__menu {
     position: fixed;
@@ -117,4 +124,4 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
-}
+}

package/components/editor/mobile_editor_product_details/mobile-editor-product-details.vue

@@ -79,7 +79,7 @@
             style="margin-top: 40px;" />
           <editor-layers
             v-show="currentTab === 'layers'"
-            :hasPricing="false" />
+            :has-pricing="false" />
         </div>
       </div>
     </div>
@@ -101,6 +101,12 @@ const { mapMutations, mapGetters } = createNamespacedHelpers('product');
 export default {
   name: 'MobileEditorProductDetails',
   mixins: [addToCartMixin],
+  props: {
+    isEditMode: {
+      type: Boolean,
+      default: true
+    }
+  },
   components: {
     EditorWorkspace,
     EditorLayers,
@@ -156,14 +162,14 @@ export default {
 
       const prevTab = this.currentTab;
 
-      if (this.isOpen) {
+      if (this.isOpen && this.isEditMode) {
         this.hide(true);
       }
 
       this.$nextTick(() => {
         this.isOpen = true;
 
-        if(tab === 'layers') {
+        if (!this.isEditMode && tab === 'layers') {
           this.setEditModeSelectedLayer(false);
         }
 

package/components/product/clearance_products/clearance-products.scss

@@ -0,0 +1,35 @@
+.ClearanceProducts {
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 4px 0 16px;
+    gap: 16px;
+  }
+
+  &__title {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  &__all {
+    color: #194BB3;
+    text-align: center;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    text-decoration: underline;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  &__list {
+    display: grid;
+    gap: 14px;
+  }
+}
+

package/components/product/clearance_products/clearance-products.vue

@@ -0,0 +1,85 @@
+<template>
+  <section
+    class="ClearanceProducts__wrapper">
+    <div class="ClearanceProducts__head">
+      <h2 class="ClearanceProducts__title">
+        Clearance Product
+      </h2>
+      <a
+        href="/c/clearance"
+        class="ClearanceProducts__all">
+        View all clearance products
+      </a>
+    </div>
+    <div class="ClearanceProducts__list">
+      <clearance-product
+        v-for="item in products"
+        :key="item._id"
+        :product="item"
+        :to-editor="toEditor"
+        class="ClearanceProducts__product" />
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import api from '@lancom/shared/assets/js/api';
+import ClearanceProduct from './clearance_product/clearance-product';
+
+export default {
+  name: 'ClearanceProducts',
+  components: {
+    ClearanceProduct
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    toEditor: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      products: [],
+      loading: false
+    };
+  },
+  computed: {
+    ...mapGetters(['shop', 'country', 'currency'])
+  },
+  mounted() {
+    this.loadProducts();
+  },
+  methods: {
+    isClearanceColor(color) {
+      return color?.pricing?.some(c => c.clearance);
+    },
+    hasClearanceColors(product) {
+      return (product.colors || []).some(color => this.isClearanceColor(color));
+    },
+    async loadProducts() {
+      try {
+        this.loading = true;
+        const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, {
+          needShuffle: false,
+          country: this.country?._id,
+          currency: this.currency?._id
+        });
+        const clearanceProducts = products.filter(p => p.isClearance || this.hasClearanceColors(p));
+        this.products = clearanceProducts.slice(0, 1);
+      } catch (e) {
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'clearance-products';
+</style>

package/components/product/clearance_products/clearance_product/clearance-product.scss

@@ -0,0 +1,82 @@
+.ClearanceProduct {
+  &__wrapper {
+    display: flex;
+    gap: 12px;
+    padding: 12px;
+    border-radius: 8px;
+    border: 1px solid #E5E5E5;
+    background: #FFF;
+  }
+
+  &__img {
+    width: 64px;
+    height: 64px;
+    object-fit: contain;
+    border-radius: 4px;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1;
+  }
+
+  &__row {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__title {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &__sku {
+    color: #666;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+  }
+
+  &__clearance-label {
+    color: #D97706;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+  }
+
+  &__price {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+  }
+
+  &__price-current {
+    color: #0A0A0A;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  &__price-old {
+    color: #999;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    text-decoration: line-through;
+  }
+}
+

package/components/product/clearance_products/clearance_product/clearance-product.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="ClearanceProduct__wrapper">
+    <a
+      v-if="productСover"
+      :href="productLink">
+      <img
+        :src="productСover"
+        :alt="product.name"
+        class="ClearanceProduct__img" />
+    </a>
+    <div class="ClearanceProduct__body">
+      <div class="ClearanceProduct__row">
+        <a
+          :href="productLink"
+          class="ClearanceProduct__title">
+          {{ product.name }}
+        </a>
+      </div>
+      <div
+        v-if="product.SKU"
+        class="ClearanceProduct__sku">
+        sku: {{ product.SKU }}
+      </div>
+      <div class="ClearanceProduct__price">
+        <span class="ClearanceProduct__price-current">
+          <price
+            :price="currentColorMaxPrice"
+            :with-gst="priceIncludeGST" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import productPreview from '@lancom/shared/mixins/product-preview';
+import Price from '@lancom/shared/components/common/price';
+
+export default {
+  name: 'ClearanceProduct',
+  components: {
+    Price
+  },
+  mixins: [productPreview],
+  props: {
+    toEditor: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'clearance-product';
+</style>

package/components/product/other_products/other-products.vue

@@ -4,15 +4,19 @@
       <h2 class="OtherProducts__title">
         Other Products
       </h2>
-      <a href="#" class="OtherProducts__all">
+      <a
+        v-if="categoryLink"
+        :href="categoryLink"
+        class="OtherProducts__all">
         View all products in this category
       </a>
     </div>
     <div class="OtherProducts__list">
       <other-product
-        v-for="product in products"
-        :key="product._id"
-        :product="product"
+        v-for="item in products"
+        :key="item._id"
+        :product="item"
+        :to-editor="toEditor"
         class="OtherProducts__product" />
     </div>
   </section>
@@ -35,7 +39,7 @@ export default {
     },
     toEditor: {
       type: Boolean,
-      default: true
+      default: false
     },
     limit: {
       type: Number,
@@ -49,21 +53,44 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['shop', 'country', 'currency'])
+    ...mapGetters(['shop', 'country', 'currency']),
+    categoryLink() {
+      const category = this.product.category;
+      if (!category) {
+        return null;
+      }
+      const categories = [];
+      let current = category;
+      while (current) {
+        categories.unshift(current.alias);
+        current = current.parent;
+      }
+      return categories.length ? `/c/${categories.join('/')}` : null;
+    }
   },
   mounted() {
     this.loadProducts();
   },
   methods: {
+    isClearanceColor(color) {
+      return color?.pricing?.some(c => c.clearance);
+    },
+    hasClearanceColors(product) {
+      return (product.colors || []).some(color => this.isClearanceColor(color));
+    },
     async loadProducts() {
       try {
         this.loading = true;
-        const condition = {
+        const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, {
+          needShuffle: false,
           country: this.country?._id,
-          currency: this.currency?._id,
-          limit: this.limit
-        };
-        this.products = (await api.fetchOtherProducts(this.shop._id, this.product.alias, condition)).products;
+          currency: this.currency?._id
+        });
+        this.products = products.sort((a, b) => {
+          const aIsClearance = a.isClearance || this.hasClearanceColors(a);
+          const bIsClearance = b.isClearance || this.hasClearanceColors(b);
+          return aIsClearance === bIsClearance ? 0 : aIsClearance ? -1 : 1;
+        });
       } catch (e) {
       } finally {
         this.loading = false;

package/components/product/other_products/other_product/other-product.vue

@@ -21,28 +21,10 @@
         class="OtherProduct__sku">
         sku: {{ product.SKU }}
       </div>
-      <div
-        v-if="product.isClearance"
-        class="OtherProduct__price">
-        <span
-          v-if="product.oldPrice"
-          class="OtherProduct__price-old">
-          <price
-            :price="minPrice"
-            :with-gst="priceIncludeGST" />
-        </span>
-        <span class="OtherProduct__price-current">
-          <price
-            :price="product.minPrice"
-            :with-gst="priceIncludeGST" />
-        </span>
-      </div>
-      <div
-        v-else
-        class="OtherProduct__price">
+      <div class="OtherProduct__price">
         <span class="OtherProduct__price-current">
           <price
-            :price="minPrice"
+            :price="currentColorMaxPrice"
             :with-gst="priceIncludeGST" />
         </span>
       </div>
@@ -59,7 +41,13 @@ export default {
   components: {
     Price
   },
-  mixins: [productPreview]
+  mixins: [productPreview],
+  props: {
+    toEditor: {
+      type: Boolean,
+      default: false
+    }
+  }
 };
 </script>
 

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

@@ -1,3 +1,5 @@
+@import "@/assets/scss/variables";
+
 .ProductPricingTiers {
   &__title {
     color: #0A0A0A;
@@ -21,6 +23,9 @@
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
     cursor: pointer;
     transition: all 0.3s ease;
+    @media (max-width: $bp-extra-small-max) {
+      width: 132px;
+    }
     &:hover {
       transform: translateY(-3px);
       box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
@@ -35,11 +40,20 @@
       font-weight: 600;
       line-height: 28px;
       text-align: center;
+      @media (max-width: $bp-extra-small-max) {
+        padding: 8px 0;
+        font-size: 12px;
+        line-height: 20px;
+      }
       span {
         color: #194BB3;
         font-size: 18px;
         font-weight: 700;
         line-height: 28px;
+        @media (max-width: $bp-extra-small-max) {
+          font-size: 14px;
+          line-height: 20px;
+        }
       }
     }
     &-price {
@@ -50,11 +64,21 @@
       margin-top: 6px;
       padding: 4px;
       text-align: center;
+      @media (max-width: $bp-extra-small-max) {
+        font-size: 10px;
+        line-height: 16px;
+        margin-top: 4px;
+        padding: 2px;
+      }
       span {
         color: #194BB3;
         font-size: 12px;
         font-weight: 700;
         line-height: 20px;
+        @media (max-width: $bp-extra-small-max) {
+          font-size: 10px;
+          line-height: 16px;
+        }
       }
     }
   }

package/components/product/related_products/related-products.vue

@@ -37,11 +37,15 @@ export default {
     };
   },
   async fetch() {
-    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, { needShuffle: true });
+    const { products } = await api.fetchRelatedProducts(this.shop._id, this.product.alias, {
+      needShuffle: false,
+      country: this.country?._id,
+      currency: this.currency?._id
+    });
     this.products = products.splice(0, 6);
   },
   computed: {
-    ...mapGetters(['shop']),
+    ...mapGetters(['shop', 'country', 'currency']),
     hasProducts() {
       return this.products.length > 0;
     }

package/components/the_aside/the-aside.scss

@@ -34,6 +34,13 @@
     z-index: 200;
     transition: opacity .16s cubic-bezier(0.23, 1, 0.32, 1);
   }
+  &__close {
+    position: absolute;
+    right: 10px;
+    top: 40px;
+    font-weight: bold;
+    font-size: 20px;
+  }
 }
 
 .TheAside__container,

package/mixins/product-preview.js

@@ -2,6 +2,7 @@ import { mapGetters } from 'vuex';
 import { getColorBackgroundStyle, getProductMediumCover, getBgStyle, getProductHoverCover } from '@lancom/shared/assets/js/utils/colors';
 import { staticLink } from '@lancom/shared/assets/js/utils/filters';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
 
 const loadHolder = {
   canLoadImages: true,
@@ -129,6 +130,68 @@ const productPreview = {
         case 'child':
           return 'icon-baby';
       }
+    },
+
+    colors() {
+      const colors = this.product.colors?.filter(c => !!c) || [];
+      const sortedColors = colors.sort((a, b) => {
+        const aIsClearance = this.isClearanceColor(a);
+        const bIsClearance = this.isClearanceColor(b);
+        return aIsClearance === bIsClearance ? 0 : aIsClearance ? -1 : 1;
+      });
+      return this.full ? sortedColors : sortedColors.slice(0, this.maxVisibleColors);
+    },
+    hasSizes() {
+      return this.sizes.length > 0;
+    },
+    sizes() {
+      const sizes = sortSizes(this.product.sizes || []);
+      return this.full ? sizes : sizes.slice(0, this.maxVisibleSizes);
+    },
+    hiddenSizesCount() {
+      const sizes = this.product.sizes || [];
+      return sizes.length - this.sizes.length;
+    },
+    isVisibleShowMore() {
+      const colors = this.product.colors || [];
+      return (colors.length > this.maxVisibleColors) && !this.full;
+    },
+    mainColor() {
+      return this.currentColor || this.colorWithMaxPrice;
+    },
+    colorWithMaxPrice() {
+      const colorWithMaxPrice = this.product.colors?.reduce((max, current) => {
+        const currentMaxPrice = current?.maxPrice || 0;
+        const maxPrice = max?.maxPrice || 0;
+        return (!max || (current && currentMaxPrice > maxPrice)) ? current : max;
+      }, null);
+      return colorWithMaxPrice;
+    },
+    visibleTiers() {
+      const pricing = (this.full ? this.mainColor?.pricing : this.mainColor?.pricing?.slice(0, this.maxVisibleTiers)) || [];
+      const printsPrice = this.product.minPrintsPrice || 0;
+      return pricing.map(p => ({ ...p, price: p.price + printsPrice }));
+    },
+    currentColorMaxPrice() {
+      const printsPrice = this.product.maxPrintsPrice || 0;
+      const productPrice = this.mainColor?.maxPrice || 0;
+      return productPrice + printsPrice;
+    },
+    currentColorMaxPriceWithoutClearance() {
+      const printsPrice = this.product.maxPrintsPrice || 0;
+      const productPrice = this.mainColor?.maxPriceWithoutClearance || 0;
+      return productPrice + printsPrice;
+    },
+    minClearanceColorPrice() {
+      const clearanceColors = this.product.colors?.filter(c => this.isClearanceColor(c)) || [];
+      const minClearanceColor = clearanceColors.reduce((min, current) => {
+        const currentMinPrice = current?.minPrice || 0;
+        const minPrice = min?.minPrice || 0;
+        return (!min || (current && currentMinPrice < minPrice)) ? current : min;
+      }, null);
+      const printsPrice = this.product.minPrintsPrice || 0;
+      const productPrice = minClearanceColor?.minPrice || 0;
+      return minClearanceColor ? productPrice + printsPrice : 0;
     }
   },
   mounted() {

package/mixins/product-view.js

@@ -125,8 +125,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       return (thumbProductImages.length > 0 ? thumbProductImages : this.images).slice(0, 6);
     },
     mainProductImageSrc() {
-      const image = (this.isEditor && this.mainProductImage.extralarge) || this.mainProductImage.large;
-      return this.mainProductImage && staticLink(image);
+      const image = (this.isEditor && this.mainProductImage?.extralarge) || this.mainProductImage?.large;
+      return image && staticLink(image);
     },
     mainProductImageStyles() {
       return this.mainProductImageSrc ? { 'background-image': `url(${this.mainProductImageSrc});` } : {};

package/package.json

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