@lancom/shared 0.0.351 → 0.0.353

package/assets/js/utils/colors.js

@@ -11,7 +11,7 @@ export const getColorImage = (product = {}, size = 'small', type, color, allowAn
   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]);
+  return image && image[size] && staticLink(image[size]);
 };
 
 export const getProductCover = (product = {}, size = 'small', type = COLORS_IMAGES_TYPES.FRONT, color, allowAnyColor = false) => {

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

@@ -65,7 +65,8 @@ export const getFormattedFont = alias => {
 export const getFontPath = alias => {
   const { PROD_CDN_URL, DEV_CDN_URL, CDN_DOMAIN } = Vue.$env;
   const { path } = getFont(alias) || {};
-  return path && staticLink(`${CDN_DOMAIN || PROD_CDN_URL || DEV_CDN_URL || ''}${path}`);
+  const domain = process.env.IS_LOCAL ? '' : (CDN_DOMAIN || PROD_CDN_URL || DEV_CDN_URL || '');
+  return path && staticLink(`${domain}${path}`);
 };
 
 export const loadFont = alias => new Promise((resolve, reject) => {

package/assets/js/utils/product.js

@@ -110,10 +110,12 @@ function getCategoryPathFromRoute(routeParams) {
 }
 
 export function generateProductsLink($route, data, skipParams = false) {
-  let { type, category, brand, text, sort } = data;
+  let { type, category, brand, text, sort, minimumQty, productionTime } = data;
   category = (category || category === null) ? generateCategoryPath(category) : getCategoryPathFromRoute($route?.params);
   type = (type || type === null) ? type : ($route?.params?.type || $route?.query?.type);
   brand = (brand || brand === null) ? brand : ($route?.params?.brand || $route?.query?.brand);
+  minimumQty = (minimumQty || minimumQty === null) ? minimumQty : ($route?.params?.minimumQty || $route?.query?.minimumQty);
+  productionTime = (productionTime || productionTime === null) ? productionTime : ($route?.params?.productionTime || $route?.query?.productionTime);
   text = (text || text === '') ? text : $route?.query?.text;
   sort = (sort || sort === '') ? sort : $route?.query?.sort;
 
@@ -125,6 +127,12 @@ export function generateProductsLink($route, data, skipParams = false) {
   if (sort) {
     params.push(`sort=${sort}`);
   }
+  if (minimumQty) {
+    params.push(`minimumQty=${minimumQty}`);
+  }
+  if (productionTime) {
+    params.push(`productionTime=${productionTime}`);
+  }
 
   const { page = 1 } = data;
   if (page > 1) {
@@ -132,7 +140,7 @@ export function generateProductsLink($route, data, skipParams = false) {
   }
 
   Object.keys({ ...(($route && $route.query) || {}), ...data }).forEach(key => {
-    const rootKeys = ['text', 'sort', 'page', 'category', 'type', 'brand'];
+    const rootKeys = ['text', 'sort', 'page', 'category', 'type', 'brand', 'minimumQty', 'productionTime'];
     if (!rootKeys.includes(key)) {
       let items = ($route && $route.query[key]) ? $route.query[key].split(',') : [];
       items = (data[key] ? (items.includes(data[key]) ? items.filter(c => c !== data[key]) : [...items, data[key]]) : items).join(',');

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

@@ -5,7 +5,7 @@
         name="header"
         :invalid="invalid">
       </slot>
-      <div class="EditorLayerFormText__content">
+      <div class="EditorLayerFormText__content" @click.stop>
         <validation-provider
           tag="div"
           name="Copy"

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

@@ -13,6 +13,19 @@
       margin-top: -10px;
     }
   }
+  &__colors {
+    position: relative;
+  }
+  &__loader {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   &__description {
     margin-top: 15px;
     color: rgb(118, 118, 118);

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

@@ -125,9 +125,19 @@
         <i class="icon-rotate-tee"></i>
       </div>
     </div>
+    <div class="EditorProductDetails__section">
+      <client-only>
+        <gallery
+          v-if="hasImages"
+          :show-big-image="false"
+          :image-types="['model']"
+          :show-filters="false" />
+      </client-only>
+    </div>
     <div
       v-if="productDetailsLoaded"
-      id="EditorProductDetails">
+      id="EditorProductDetails"
+      class="EditorProductDetails__colors">
       <div class="EditorProductDetails__section">
         <product-colors-selector
           :has-another-print-btn="false"
@@ -136,6 +146,13 @@
       <div class="EditorProductDetails__section">
         <editor-pricing :has-cart-btn="false" />
       </div>
+      <div
+        v-if="loadingProductDetails"
+        class="EditorProductDetails__loader">
+        <div>
+          <spinner />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -153,10 +170,13 @@ import Price from '@lancom/shared/components/common/price';
 import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
 import RichText from '@lancom/shared/components/common/rich-text';
 import QuoteRequestModal from '@lancom/shared/components/quotes/quote_request_modal/quote-request-modal';
+import Gallery from '@lancom/shared/components/product/gallery/gallery';
+import { isValidImageType } from '@lancom/shared/assets/js/utils/colors';
 
 export default {
   name: 'EditorProductDetails',
   components: {
+    Gallery,
     ProductColorsSelector,
     PricingDiscountsTable,
     EditorPricing,
@@ -179,6 +199,7 @@ export default {
   computed: {
     ...mapGetters(['taxName']),
     ...mapGetters('product', [
+      'loadingProductDetails',
       'product',
       'editableColor',
       'images',
@@ -197,6 +218,12 @@ export default {
       'pricingSettings',
       'country'
     ]),
+    hasImages() {
+      return this.modelImages.length > 0;
+    },
+    modelImages() {
+      return this.images.filter(i => isValidImageType(i, 'model'));
+    },
     previewPrintProduct() {
       return {
         ...this.product,

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

@@ -85,7 +85,11 @@
     position: fixed;
     right: 20px;
     top: 20px;
-    font-size: 28px;
+    font-size: 18px;
+    display: flex;
+    .Btn__wrapper {
+      height: 40px;
+    }
   }
   &__side {
     position: absolute;

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

@@ -84,9 +84,14 @@
           </div>
           <div
             v-if="isZoomIn"
-            class="EditorWorkspace__zoom-out"
-            @click="zoomOut()">
-            <i class="icon-cancel"></i>
+            class="EditorWorkspace__zoom-out">
+            <btn
+              btn-class="green"
+              btn-label="Save"
+              @onclick="zoomOut()" />
+            <btn
+              btn-label="Cancel"
+              @onclick="zoomOut(true)" />
           </div>
         </div>
       </client-only>
@@ -136,14 +141,7 @@ export default {
       size: null,
       fabricHelper: null,
       preloading: true,
-      isRotating: false,
-      productSides: [
-        { label: 'Front', value: 'front' },
-        { label: 'Back', value: 'back' }
-        // { label: 'Left sleeve', value: 'left_sleeve' },
-        // { label: 'Right sleeve', value: 'right_sleeve' },
-        // { label: 'Outside label', value: 'outside_label' }
-      ]
+      isRotating: false
     };
   },
   props: {
@@ -156,6 +154,7 @@ export default {
     ...mapGetters([
       'product',
       'selectedLayer',
+      'selectedLayerCopy',
       'productDetailsLoaded',
       'selectedPrintArea',
       'editablePrintArea',
@@ -164,6 +163,14 @@ export default {
       'editableLayers',
       'editorSize'
     ]),
+    productSides() {
+      const sides = [
+        { label: 'Front', value: 'front' },
+        { label: 'Back', value: 'back' }
+      ]
+      const validSides = sides.filter(s => this.product.printAreas?.some(pa => pa.side === s.value));
+      return validSides[0] ? validSides : [sides[0]];
+    },
     sideZoomSize() {
       return this.printAreaZoomSize?.width;
     },
@@ -216,10 +223,14 @@ export default {
       'setEditableSide',
       'setSelectedPrintArea',
       'setEditablePrintArea',
-      'setSelectedLayer'
+      'setSelectedLayer',
+      'updateTemplateLayer'
     ]),
-    zoomOut() {
-      this.setSelectedLayer(null);
+    zoomOut(isCancel) {
+      if (isCancel) {
+        this.updateTemplateLayer(this.selectedLayerCopy);
+      }
+      setTimeout(() => this.setSelectedLayer(null), 100);
     },
     onWorkspaceChange({ size, fabricHelper }) {
       this.fabricHelper = fabricHelper;

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

@@ -6,14 +6,20 @@
     transition: background-color 0.5s ease;
     background-color: white;
   }
-  &__toggle-wireframe {
+  &__toggle-bg {
     position: absolute;
+    top: 5px;
+    display: flex;
+    left: 0;
+    right: 0;
+  }
+  &__toggle-wireframe {
     z-index: 1001;
     background: gainsboro;
     padding: 6px;
-    top: 5px;
     font-size: 14px;
     cursor: pointer;
+    margin-right: 5px;
     &--active {
       background: rgb(196, 226, 236);
     }
@@ -88,6 +94,9 @@
           display: inline;
         }
       }
+      &:last-child {
+        display: none;
+      }
     }
     &-divider {
       color: $grey_1;
@@ -110,10 +119,17 @@
       }
     }
     &.side {
-      width: 20px;
+      display: flex;
+      flex-direction: row;
       .EditorWorkspaceSide__placeholder-option span {
         &:last-child {
-          display: inline;
+          display: inline-block;
+          background-color: $purple;
+          color: $white;
+          cursor: pointer;
+          padding: 4px;
+          margin: 1px;
+          font-size: 15px;
         }
         &:first-child {
           display: none;
@@ -122,6 +138,13 @@
       .EditorWorkspaceSide__placeholder-divider {
         display: none;
       }
+      .EditorWorkspaceSide__placeholder-option--edit-btn {
+        display: flex;
+        span {
+          margin-top: -0.5px !important;
+          display: inline-block !important;
+        }
+      }
     }
   }
   &__alert {

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

@@ -7,15 +7,29 @@
     }"
     v-click-outside="onOutsideClick"
     @mouseover="toogleBoundBox(true)"
-    @mouseleave="toogleBoundBox(false)">
+    @mouseleave="toogleBoundBox(false)"
+    @mouseup="toggleOnpressImage(false)">
     <div
-      v-if="hasWireframeImage"
-      class="EditorWorkspaceSide__toggle-wireframe"
-      :class="{
-        'EditorWorkspaceSide__toggle-wireframe--active': visibleWireframe
-      }"
-      @click.stop.prevent="toggleWireframeImage">
-      {{ visibleWireframe ? 'Hide Wireframe' : 'Show Wireframe' }}
+      v-if="hasOnpressImage || hasWireframeImage"
+      class="EditorWorkspaceSide__toggle-bg">
+      <div
+        v-if="hasWireframeImage"
+        class="EditorWorkspaceSide__toggle-wireframe"
+        :class="{
+          'EditorWorkspaceSide__toggle-wireframe--active': visibleWireframe
+        }"
+        @click.stop.prevent="toggleWireframeImage">
+        {{ visibleWireframe ? 'Hide Wireframe' : 'Show Wireframe' }}
+      </div>
+      <div
+        v-if="hasOnpressImage"
+        class="EditorWorkspaceSide__toggle-wireframe"
+        :class="{
+          'EditorWorkspaceSide__toggle-wireframe--active': visibleOnpress
+        }"
+        @mousedown.stop.prevent="toggleOnpressImage(true)">
+        {{ visibleOnpress ? 'Hide On Press' : 'Show On Press' }}
+      </div>
     </div>
     <div
       v-if="deleteButtonPos"
@@ -33,7 +47,7 @@
       </div>
     </div>
     <div
-      v-if="fabricHelper"
+      v-if="fabricHelper && !editModeSelectedLayer"
       class="EditorWorkspaceSide__placeholder"
       :class="{
         tighten: !isZoomed && printAreaIsSmall,
@@ -45,7 +59,7 @@
         @click="createTextLayer"
         class="EditorWorkspaceSide__placeholder-option">
         <span>Type here</span>
-        <span>T</span>
+        <span style="margin-top: -0.5px;">Text</span>
       </div>
       <div class="EditorWorkspaceSide__placeholder-divider">
         or
@@ -61,7 +75,7 @@
                 <i class="icon-picture"></i> Add art
               </span>
               <span>
-                <i class="icon-picture"></i>
+                Art
               </span>
             </div>
           </template>
@@ -77,6 +91,12 @@
           </template>
         </file-uploader>
       </div>
+      <!-- <div
+        v-if="editablePrintAreaLayers"
+        @click="editFirstLayer"
+        class="EditorWorkspaceSide__placeholder-option EditorWorkspaceSide__placeholder-option--edit-btn">
+        <span>Edit</span>
+      </div> -->
     </div>
     <div
       v-show="isVisibleOverlay"
@@ -143,6 +163,7 @@ export default {
     return {
       addedFromCanvas: false,
       visibleWireframe: false,
+      visibleOnpress: false,
       fabricHelper: null,
       redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
       saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 400),
@@ -165,6 +186,7 @@ export default {
       'editableColor',
       'editableLayers',
       'selectedLayer',
+      'selectedLayerCopy',
       'editorSize',
       'editModeSelectedLayer'
     ]),
@@ -174,12 +196,22 @@ export default {
     hasWireframeImage() {
       return !!this.wireframeImage;
     },
+    hasOnpressImage() {
+      return !!this.onpressImage;
+    },
     wireframeImage() {
       return this.images.find(i => i.types?.includes('wireframe') && i.types?.includes(this.side));
     },
+    onpressImage() {
+      console.log('this.images: ', this.images);
+      return this.product.images?.find(i => i.types?.includes('on_press'));
+    },
     sideEditableLayers() {
       return this.editableLayers.filter(l => l.sideId === this.side);
     },
+    editablePrintAreaLayers() {
+      return this.printAreaLayers.some(l => l.editableDetails);
+    },
     printAreaLayers() {
       const paId = this.printArea?.parentPrintArea || this.printArea?._id;
       const layers = this.editableLayers.filter(l => !paId || (l.printArea === paId));
@@ -196,8 +228,8 @@ export default {
       // console.log('this.fabricHelper.printAreaRect: ', this.fabricHelper.printAreaRect);
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
       return this.printAreaLayers.length > 0 ? {
-        top: `${top * ratio}px`,
-        left: `${(left + width) * ratio + 4}px`
+        top: `${(top + height) * ratio}px`,
+        left: `${left * ratio}px`
       } : {
         top: `${top * ratio}px`,
         left: `${left * ratio}px`,
@@ -241,6 +273,9 @@ export default {
     visibleWireframe() {
       this.updateBackgroundImage();
     },
+    visibleOnpress() {
+      this.updateBackgroundImage();
+    },
     layers() {
       this.redrawWithThrottle();
     },
@@ -275,18 +310,29 @@ export default {
     ...mapActions('product', ['createLayer']),
     ...mapMutations('product', [
       'setSelectedLayerField',
+      'setEditModeSelectedLayer',
       'setSelectedLayer',
       'removeTemplateLayer'
     ]),
     ...mapMutations('layers', [
       'setLayersThumbnail'
     ]),
+    editFirstLayer() {
+      const layer = this.printAreaLayers.find(l => l.editableDetails);
+      if (layer?.editableDetails) {
+        this.setSelectedLayer(layer);
+        this.setEditModeSelectedLayer(true);
+      }
+    },
     checkVisibleWireframe() {
       this.visibleWireframe = this.sideEditableLayers.length > 0;
     },
     toggleWireframeImage() {
       this.visibleWireframe = !this.visibleWireframe;
     },
+    toggleOnpressImage(state) {
+      this.visibleOnpress = state;
+    },
     adjustSelectedArtDPI() {
       const measure = this.fabricHelper.getEditorDPI();
       const scale = measure / 75;
@@ -385,19 +431,22 @@ export default {
       const isMedium = this.calcWorkspaceSize(true) <= 400;
       const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
       const wireframeImageUrl = this.visibleWireframe && (isMedium ? this.wireframeImage?.medium : this.wireframeImage?.large);
+      const onpressImageUrl = this.visibleOnpress && (isMedium ? this.onpressImage?.medium : this.onpressImage?.large);
       const getter = isMedium ? getMediumColorImage : getLargeColorImage;
-      const imageUrl = wireframeImageUrl || getter(this.product, type, this.editableColor, false, ['wireframe']);
+      const imageUrl = wireframeImageUrl || onpressImageUrl || getter(this.product, type, this.editableColor, false, ['wireframe']);
       if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
         return this.fabricHelper.setBackgroundImage(this.backgroundImage);
       }
 
       this.backgroundImageLoaded = false;
+      this.backgroundImageUrl = imageUrl;
       fabric.Image.fromURL(imageUrl, image => {
-        image.scale(this.editorSize.width / image.width);
-        this.backgroundImage = image;
-        this.backgroundImageUrl = imageUrl;
-        this.backgroundImageLoaded = true;
-        this.fabricHelper.setBackgroundImage(this.backgroundImage);
+        if (this.backgroundImageUrl === imageUrl) {
+          image.scale(this.editorSize.width / image.width);
+          this.backgroundImage = image;
+          this.backgroundImageLoaded = true;
+          this.fabricHelper.setBackgroundImage(this.backgroundImage);
+        }
       });
     },
     removeSelected() {

package/components/product/gallery/gallery.scss

@@ -215,5 +215,11 @@
       max-width: 800px;
       max-height: 800px;
     }
+    &.preview {
+      img {
+        max-width: 350px;
+        max-height: 350px;
+      }
+    }
   }
 }

package/components/product/gallery/gallery.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="Gallery__wrapper">
-    <div class="Gallery__big">
+    <div
+      v-if="showBigImage"
+      class="Gallery__big">
       <div class="Gallery__big-image">
         <img
           :src="staticLink(currentImage.large)"
@@ -40,7 +42,10 @@
     </div>
     <div
       v-if="isZooming"
-      class="Gallery__zoom-image">
+      class="Gallery__zoom-image"
+      :class="{
+        preview: !showBigImage
+      }">
       <img
         :src="staticLink(currentImage.large)"
         :style="zoomImageStyles"
@@ -54,7 +59,9 @@
         :class="{
           'Gallery__small-image--active': (visibleImagesFrom + index) === activeIndex
         }"
-        @click="goToSlideAndChangeColor(visibleImagesFrom + index)">
+        @click="goToSlideAndChangeColor(visibleImagesFrom + index)"
+        @mouseenter="startPreview(visibleImagesFrom + index)"
+        @mouseleave="stopZoom">
         <img
           :src="staticLink(image.small)"
           :alt="product.name"
@@ -81,7 +88,7 @@
       </button>
     </div>
     <div
-      v-if="hasValidFilters"
+      v-if="showFilters && hasValidFilters"
       class="Gallery__filters">
       <div
         v-for="filter in validFilters"
@@ -116,6 +123,17 @@ export default {
     slidesPerRow: {
       type: Number,
       default: 6
+    },
+    showBigImage: {
+      type: Boolean,
+      default: true
+    },
+    showFilters: {
+      type: Boolean,
+      default: true
+    },
+    imageTypes: {
+      type: Array
     }
   },
   data() {
@@ -149,7 +167,7 @@ export default {
       return this.validFilters.length > 1;
     },
     galleryImages() {
-      return this.images.filter(i => !(i.types || []).includes('designer'));
+      return this.imageTypes ? this.images.filter(i => isValidImageTypes(i, this.imageTypes)) : this.images.filter(i => !(i.types || []).includes('designer'));
     },
     validFilters() {
       return this.filters.filter(filter => (this.galleryImages || []).some(i => this.isValidImageByFilter(filter, i)));
@@ -199,6 +217,12 @@ export default {
   methods: {
     ...mapActions('product', ['selectColor']),
     staticLink,
+    startPreview(index) {
+      if (!this.isZoomin) {
+        this.startZoom();
+        this.goToSlideAndChangeColor(index);
+      }
+    },
     startZoom() {
       this.isZooming = true;
     },

package/components/product/layouts/product_main_info/product-main-info.vue

@@ -29,7 +29,7 @@
         class="lc_regular16 ProductMainInfo__description-body"
         v-html="product.description || '—'">
       </p>
-      <div class="ProductMainInfo__additional-info">
+      <!-- <div class="ProductMainInfo__additional-info">
         <span class="lc_medium16">
           &bull;
           Shoulder to shoulder tape
@@ -52,7 +52,7 @@
             </div>
           </template>
         </v-popover>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>

package/components/product/product.vue

@@ -18,6 +18,17 @@
         <section class="Product__section">
           <product-main-info :product="product" />
         </section>
+        <section class="Product__section">
+          <btn
+            :btn-block="true"
+            :to="goToEditorLink"
+            btn-class="purple"
+            btn-label="DESIGN AND ORDER">
+            <i
+              slot="icon-after"
+              class="icon-arrow-right"></i>
+          </btn>
+        </section>
         <section class="Product__section">
           <wizard-editor />
         </section>
@@ -44,6 +55,9 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import RelatedProducts from '@lancom/shared/components/product/related_products/related-products';
+import Gallery from '@lancom/shared/components/product/gallery/gallery';
+import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
 import ProductMainInfo from './layouts/product_main_info/product-main-info';
 import ProductColorsSelector from './product_colors_selector/product-colors-selector';
 import ProductTierPrices from './layouts/product_tier_prices/product-tier-prices';
@@ -51,8 +65,6 @@ import ProductFabricAndSizeInfo from './layouts/product_fabric_and_size_info/pro
 import ProductPackaging from './layouts/product_packaging/product-packaging';
 import ProductModelMeasurements from './layouts/product_model_measurements/product-model-measurements';
 import ProductSizeTable from './layouts/product_size_table/product-size-table';
-import RelatedProducts from '@lancom/shared/components/product/related_products/related-products';
-import Gallery from '@lancom/shared/components/product/gallery/gallery';
 import WizardEditor from './wizard-editor/wizard-editor.vue';
 
     
@@ -80,6 +92,9 @@ export default {
       'productDetails',
       'editableColor'
     ]),
+    goToEditorLink() {
+      return generateProductLink(this.product, null, true);
+    },
     hasImages() {
       return this.images.length > 0;
     }

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

@@ -6,7 +6,7 @@
     <div
       v-if="hasAdditionalColors"
       :style="{
-        'top': additionalColorHeight,
+        'top': hasMainColor ? additionalColorHeight : 0,
         width: '100%',
         height: '100%',
         position: 'relative'
@@ -41,6 +41,9 @@ export default {
     }
   },
   computed: {
+    hasMainColor() {
+      return (!!this.color?.pattern || !!this.color?.rgb);
+    },
     pattern() {
       return this.color.pattern && staticLink(this.color.pattern);
     },
@@ -54,7 +57,9 @@ export default {
       return (this.color.additionalColors || []);
     },
     additionalColorHeight() {
-      return `${100 / (this.additionalColors.length + 1)}%`;
+      const color = this.hasMainColor ? 1 : 0;
+      const height = 100 / (this.additionalColors.length + color);
+      return `${height}%`;
     },
     additionalColorsThumbs() {
       return (this.color.additionalColors || [])

package/components/products/products_aside/products-aside.vue

@@ -23,6 +23,16 @@
           :has-selected-icon="hasSelectedIcon"
           :selected-icon-circle="selectedIconCircle" />
       </div>
+      <div class="ProductsAside__item">
+        <products-production-time
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle" />
+      </div>
+      <div class="ProductsAside__item">
+        <products-minimum-qty
+          :has-selected-icon="hasSelectedIcon"
+          :selected-icon-circle="selectedIconCircle" />
+      </div>
       <div class="ProductsAside__item">
         <products-colors />
       </div>
@@ -44,6 +54,8 @@ import ProductsBrands from '@lancom/shared/components/products/products_brands/p
 import ProductsTags from '@lancom/shared/components/products/products_tags/products-tags';
 import ProductsAttributes from '@lancom/shared/components/products/products_attributes/products-attributes';
 import ProductsColors from '@lancom/shared/components/products/products_colors/products-colors';
+import ProductsProductionTime from '@lancom/shared/components/products/products_production_time/products-production-time';
+import ProductsMinimumQty from '@lancom/shared/components/products/products_minimum_qty/products-minimum-qty';
 import { generateProductsLink } from '@lancom/shared/assets/js/utils/product';
 
 export default {
@@ -53,7 +65,9 @@ export default {
     ProductsBrands,
     ProductsTags,
     ProductsAttributes,
-    ProductsColors
+    ProductsColors,
+    ProductsProductionTime,
+    ProductsMinimumQty
   },
   props: {
     hasSelectedIcon: {

package/components/products/products_link/products-link.vue

@@ -27,6 +27,12 @@ export default {
     color: {
       type: String
     },
+    productionTime: {
+      type: String
+    },
+    minimumQty: {
+      type: String
+    },
     attributes: {
       type: Object
     },
@@ -45,6 +51,8 @@ export default {
         brand: this.brand,
         tags: this.tags,
         colors: this.color,
+        productionTime: this.productionTime,
+        minimumQty: this.minimumQty,
         option: this.option,
         text: this.text,
         sort: this.sort,

package/components/products/products_minimum_qty/products-minimum-qty.scss

@@ -0,0 +1,39 @@
+@import "@/assets/scss/variables";
+
+.ProductsMinimumQty {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__item {
+    margin: 13px 0;
+    font-size: 15px;
+    font-weight: 400;
+    i {
+      font-size: 20px;
+      margin-right: 10px;
+    }
+    a {
+      color: $grey_1;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &--active a {
+      color: $green;
+    }
+    &-icon {
+      margin-right: 10px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/components/products/products_minimum_qty/products-minimum-qty.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="ProductsMinimumQty__wrapper">
+    <toggle-content label="Minimum Qty">
+      <div
+        v-for="minimumQtyRange in minimumQtyRanges"
+        :key="minimumQtyRange.alias"
+        class="ProductsMinimumQty__item"
+        :class="{
+          'ProductsMinimumQty__item--active': isSelectedMinimumQty(minimumQtyRange)
+        }">
+        <products-link
+          class="ProductsMinimumQty__more"
+          :minimum-qty="isSelectedMinimumQty(minimumQtyRange) ? null : minimumQtyRange.alias">
+          <span>
+            {{ minimumQtyRange.name }}
+          </span>
+          <checked-icon
+            v-if="hasSelectedIcon"
+            :checked="isSelectedMinimumQty(minimumQtyRange)"
+            :circle="selectedIconCircle" />
+        </products-link>
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  name: 'ProductsMinimumQty',
+  components: {
+    ProductsLink,
+    ToggleContent,
+    CheckedIcon
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      minimumQtyRanges: [{
+        alias: 'no-minimums',
+        name: 'No minimums'
+      }, {
+        alias: '6-or-less',
+        name: '6 or less'
+      }, {
+        alias: '12-or-less',
+        name: '12 or less'
+      }, {
+        alias: '25-or-less',
+        name: '25 or less'
+      }, {
+        alias: '50-or-less',
+        name: '50 or less'
+      }, {
+        alias: '100-or-less',
+        name: '100 or less'
+      }]
+    };
+  },
+  computed: {
+    selectedMinimumQties() {
+      const minimumQty = (this.$route.query.minimumQty || '').split(',');
+      return this.minimumQtyRanges.filter(minimumQtyRange => minimumQty.includes(minimumQtyRange.alias));
+    }
+  },
+  methods: {
+    isSelectedMinimumQty(minimumQty) {
+      return this.selectedMinimumQties.some(mq => mq.alias === minimumQty.alias);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-minimum-qty';
+</style>

package/components/products/products_production_time/products-production-time.scss

@@ -0,0 +1,39 @@
+@import "@/assets/scss/variables";
+
+.ProductsProductionTime {
+  &__header {
+    font-size: 22px;
+    line-height: 20px;
+    font-weight: 600;
+    margin-top: 3px;
+    margin-bottom: 24px;
+    color: $black;
+  }
+  &__item {
+    margin: 13px 0;
+    font-size: 15px;
+    font-weight: 400;
+    i {
+      font-size: 20px;
+      margin-right: 10px;
+    }
+    a {
+      color: $grey_1;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &--active a {
+      color: $green;
+    }
+    &-icon {
+      margin-right: 10px;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      width: 20px;
+      height: 20px;
+    }
+  }
+}

package/components/products/products_production_time/products-production-time.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="ProductsProductionTime__wrapper">
+    <toggle-content label="Production Time">
+      <div
+        v-for="produnctionRange in produnctionTimesRanges"
+        :key="produnctionRange.alias"
+        class="ProductsProductionTime__item"
+        :class="{
+          'ProductsProductionTime__item--active': isSelectedProdunctionTime(produnctionRange)
+        }">
+        <products-link
+          class="ProductsProductionTime__more"
+          :production-time="isSelectedProdunctionTime(produnctionRange) ? null : produnctionRange.alias">
+          <span>
+            {{ produnctionRange.name }}
+          </span>
+          <checked-icon
+            v-if="hasSelectedIcon"
+            :checked="isSelectedProdunctionTime(produnctionRange)"
+            :circle="selectedIconCircle" />
+        </products-link>
+      </div>
+    </toggle-content>
+  </div>
+</template>
+
+<script>
+import ToggleContent from '@lancom/shared/components/common/toggle-content';
+import ProductsLink from '@lancom/shared/components/products/products_link/products-link';
+import CheckedIcon from '@lancom/shared/components/common/checked-icon';
+
+export default {
+  name: 'ProductsProductionTime',
+  components: {
+    ProductsLink,
+    ToggleContent,
+    CheckedIcon
+  },
+  props: {
+    hasSelectedIcon: {
+      type: Boolean,
+      default: false
+    },
+    selectedIconCircle: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      produnctionTimesRanges: [{
+        alias: 'same-day',
+        name: 'Same day'
+      }, {
+        alias: '3-days',
+        name: 'Rush 3 day'
+      }, {
+        alias: '10-days',
+        name: '10 days'
+      }, {
+        alias: '2-weeks',
+        name: '2 weeks'
+      }, {
+        alias: '4-weeks',
+        name: '4 or more weeks'
+      }]
+    };
+  },
+  computed: {
+    selectedProdunctionTimes() {
+      const productionTime = (this.$route.query.productionTime || '').split(',');
+      return this.produnctionTimesRanges.filter(produnctionTimesRange => productionTime.includes(produnctionTimesRange.alias));
+    }
+  },
+  methods: {
+    isSelectedProdunctionTime(produnctionTime) {
+      return this.selectedProdunctionTimes.some(pt => pt.alias === produnctionTime.alias);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'products-production-time';
+</style>

package/feeds/google-shopping.js

@@ -59,8 +59,9 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 .replace(/·/, '·');
                 
               let link = `https://${config.HOST_NAME}${generateProductLink(product, sp.color, isEditor)}`;
+              link = link.includes('?') ? `${link}&price=IT` : `${link}?price=IT`
               if (sp.multipackQty) {
-                link = `${link}&multipack=${sp.SKU}`
+                link = link.includes('?') ? `${link}&multipack=${sp.SKU}` : `${link}?multipack=${sp.SKU}`;
               }
 
               const productWeight = +((product.weight || 0) * (sp.multipackQty || 1)).toFixed(3);
@@ -72,6 +73,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 'g:item_group_id': { _text: product.SKU },
                 'g:size': { _text: sp.size.name },
                 'g:size_system': COUNTRIES_SIZE_SYSTEMS[country] || country || 'AU',
+                'g:ships_from_country': country || 'AU',
                 'g:size_type': 'regular',
                 'g:gender': { _text: product.gender },
                 'g:material': { _text: product.fabricInfoShort },
@@ -119,6 +121,10 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 }
               }
 
+              if (product.country) {
+                info['g:shipping_label'] = product.country;
+              }
+
               const productHighlight = `${product.feedProductHighlight || ''}`
                 .trim()
                 .split(/\n+/g)

package/layouts/products.vue

@@ -61,7 +61,7 @@
   import gtm from '@lancom/shared/assets/js/utils/gtm';
   import metaInfo from '@lancom/shared/mixins/meta-info';
   import { generateProductsLink, generateProductLink } from '@lancom/shared/assets/js/utils/product';
-  import { getProductLargeCover } from '@lancom/shared/assets/js/utils/colors';
+  import { getProductLargeCover, getProductMediumCover } from '@lancom/shared/assets/js/utils/colors';
   import LazyHydrate from 'vue-lazy-hydration';
   import TheNavbar from '@/components/the_navbar/the-navbar';
   import TheChangesSavedIndicator from '@lancom/shared/components/the_changes_saved_indicator/the-changes-saved-indicator';
@@ -93,6 +93,9 @@
     middleware: ['page-info'],
     async fetch() {
       await this.loadProducts();
+      if (process.server) {
+        this.$root.context?.res?.setHeader('Cache-Control', `max-age=${86400}`);;
+      }
     },
     computed: {
       ...mapGetters('page', ['routeInfo']),
@@ -253,7 +256,7 @@
             };
           }
   
-          const image = getProductLargeCover(product, 'front');
+          const image = getProductLargeCover(product, 'front') || getProductMediumCover(product, 'front');
           if (image) {
             schema.image = image;
           }
@@ -324,7 +327,6 @@
           setTimeout(() => this.logGtm());
         } catch ({ response }) {
           if (process.server) {
-            // console.log('status code: ', this.loadError, process.server, this._self.context, Object.keys(this));
             this.$root.context.res.statusCode = this.loadError?.statusCode || 500;
           }
         }

package/middleware/page-info.js

@@ -1,15 +1,28 @@
-export default async function ({ store, route, redirect }) {
+export default async function ({ store, route, redirect, error }) {
   const matchedRoute = route.matched[route.matched.length - 1];
   if (matchedRoute) {
     const path = matchedRoute.path.replace(/\?/g, '');
     const data = {
       shop: store.getters.shop._id,
       route: path || '/',
-      fullPath: route.fullPath
+      fullPath: route.path
     };
     const routeInfo = await store.dispatch('page/fetchRouteInfo', data);
     if (routeInfo?.type === 'redirect' && routeInfo.redirectTo) {
-      redirect(301, routeInfo.redirectTo);
+      redirect(301, route.fullPath.replace(route.path, routeInfo.redirectTo));
+    }
+  } else {
+    const data = {
+      shop: store.getters.shop._id,
+      route: route.path || '/',
+      fullPath: route.path
+    };
+    const routeInfo = await store.dispatch('page/fetchRouteInfo', data);
+    if (routeInfo?.type === 'deleted') {
+      error({
+        statusCode: 410,
+        message: 'Page has been deleted'
+      });
     }
   }
 }

package/mixins/product-view.js

@@ -17,7 +17,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     if (to && to.name === 'brand-tees-slug') { return 'slide-right-to-left'; };
     return 'fade';
   },
-  async asyncData({ store, params, error, query, redirect }) {
+  async asyncData({ store, params, error, query, redirect, res }) {
     try {
       const { print, color, colour } = query;
       const { shop, country, stockCountry, currency } = store.getters;
@@ -53,6 +53,9 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       if (query.store) {
         await store.dispatch('product/updatePriceIncludeGST', true);
       }
+      if (query.price) {
+        store.commit('product/setPriceIncludeGST', query.price === 'IT');
+      }
     } catch (e) {
       console.log(e);
     }
@@ -63,6 +66,8 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       error(loadError);
     }
 
+    res?.setHeader('Cache-Control', `max-age=${3600}`);
+
     return {
       isEditor,
       pageItem,
@@ -122,9 +127,10 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     };
     if (!this.product) {
       await this.fetchProduct(data);
-      await this.fetchProductDetails(data);
     }
 
+    await this.fetchProductDetails(data);
+
     try {
       if (this.preSetPrints?.length) {
         for (const preSetPrint of this.preSetPrints) {
@@ -187,7 +193,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
   },
   methods: {
     ...mapActions(['fetchProduct', 'fetchProductDetails', 'selectColor']),
-    ...mapMutations(['clearProduct', 'clearTemplate', 'addTemplateLayer', 'setSimpleProductAmount']),
+    ...mapMutations(['clearProduct', 'clearTemplate', 'addTemplateLayer', 'setSimpleProductAmount', 'setPriceIncludeGST']),
     staticLink,
     goToInfoTab(tab) {
       this.$refs.infoTabs.selectedTab = tab;
@@ -235,7 +241,7 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
     const productSchema = {
       '@context': 'https://schema.org',
       '@type': 'Product',
-      description: this.product.gsFeedDescription || this.product.description,
+      description: (this.product.gsFeedDescription || this.product.description || '').replace(/<[^>]*>/g, ''),
       name,
       offers: this.productDetails?.simpleProducts.map(sp => {
         const spMaxPrice = (sp.pricing || []).reduce((price, pricing) => Math.max(price, pricing.price), 0);

package/package.json

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

package/plugins/cache-headers.js

@@ -1,13 +1,17 @@
 module.exports = function (req, res, next) {
+  if (res.getHeader('Cache-Control')) {
+    return next();
+  }
+
   if (!/auth\=/.test(req.headers?.cookie || '')) {
     const routes = [
       /^\/quotes\//,
       /\.xml$/
     ];
     const value = routes.some(route => route.test(`${req.url}`)) ? 'no-cache' : `max-age=${31536000}`;
-    res.setHeader('Cache-Control', value);
+    res?.setHeader('Cache-Control', value);
   } else {
-    res.setHeader('Cache-Control', 'no-cache');
+    res?.setHeader('Cache-Control', 'no-cache');
   }
   next();
 };

package/store/product.js

@@ -12,6 +12,7 @@ import { sortByName } from '../assets/js/utils/filters';
 export const state = () => ({
   multipack: null,
   calculatingPrice: false,
+  loadingProductDetails: false,
   images: [],
   priceIncludeGST: false,
   product: null,
@@ -34,6 +35,7 @@ export const state = () => ({
   isPrintPricing: false,
   editableColor: null,
   selectedLayer: null,
+  selectedLayerCopy: null,
   editablePrintArea: null,
   editablePrintAreas: [],
   selectedPrintType: null,
@@ -49,6 +51,7 @@ export const state = () => ({
 });
 
 export const getters = {
+  loadingProductDetails: ({ loadingProductDetails }) => loadingProductDetails,
   multipack: ({ multipack }) => multipack,
   calculatingPrice: ({ calculatingPrice }) => calculatingPrice,
   product: ({ product }) => product,
@@ -78,6 +81,7 @@ export const getters = {
   editableColor: ({ editableColor }) => editableColor,
   editableLayers: ({ template, editableColor, editablePrintArea }) => template.layers,
   selectedLayer: ({ selectedLayer }) => selectedLayer,
+  selectedLayerCopy: ({ selectedLayerCopy }) => selectedLayerCopy,
   editModeSelectedLayer: ({ editModeSelectedLayer }) => editModeSelectedLayer,
   selectedPrintAreas: ({ selectedPrintAreas }) => selectedPrintAreas,
   selectedPrintArea: ({ selectedPrintAreas, editablePrintArea }) =>
@@ -177,8 +181,10 @@ export const actions = {
   },
   async fetchProductDetails({ commit, state }, { shop, slug, country, stockCountry, currency, defaultColor = 'white' }) {
     const params = { country, currency, stockCountry };
+    commit('setLoadingProductDetails', true);
     const response = await api.fetchProductDetails(shop, slug, params);
     commit('setProductDetails', response);
+    commit('setLoadingProductDetails', false);
 
     const catalogFrontColorId = getColorOfDefaultCatalogFrontImage(state.product);
     const editableColor = state.availableColors.find(c => c.alias === defaultColor) ||
@@ -273,6 +279,9 @@ export const actions = {
 };
 
 export const mutations = {
+  setLoadingProductDetails(state, loadingProductDetails) {
+    state.loadingProductDetails = loadingProductDetails;
+  },
   setMultipack(state, multipack) {
     state.multipack = multipack;
   },
@@ -351,6 +360,7 @@ export const mutations = {
   */
   setSelectedLayer(state, layer) {
     state.selectedLayer = layer;
+    state.selectedLayerCopy = JSON.parse(JSON.stringify(layer || null));
   },
   setEditModeSelectedLayer(state, editMode) {
     state.editModeSelectedLayer = editMode;