@lancom/shared 0.0.449 → 0.0.451

package/assets/js/api/index.js

@@ -161,7 +161,7 @@ const api = {
   subscribe(data, shop) {
     return _post(`shop/${shop}/subscribe`, data);
   },
-  uploadImage(file, progressCallback = Function.prototype, requestUrl = 'image/upload') {
+  uploadImage(file, progressCallback = Function.prototype, requestUrl = 'image/upload', convert = false) {
     const config = {
       onUploadProgress: ({ loaded, total }) => {
         progressCallback(Math.round((loaded * 100) / total));
@@ -169,6 +169,9 @@ const api = {
     };
     const formData = new FormData();
     formData.set('file', file);
+    if (convert) {
+      requestUrl += (requestUrl.includes('?') ? '&' : '?') + 'convert=true';
+    }
     return _post(requestUrl, formData, config);
   },
   sendFailedConversionFile(data, shop) {

package/assets/js/utils/export-print-to-svg.js

@@ -11,7 +11,7 @@ export function convertPrintToSVG(layers, printSize) {
   return new Promise(resolve => {
     const svgSize = getSVGSize(printSize);
     console.log('svgSize: ', svgSize);
-    const canvas = new fabric.Canvas(document.createElement('canvas'), { ...svgSize, uniScaleTransform: false });
+    const canvas = new fabric.Canvas(document.createElement('canvas'), { ...svgSize });
     Promise.all(
       layers
         .map(layer => {

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

@@ -1,59 +1,160 @@
 import { fabric } from 'fabric';
 
-let rotate;
+let rotateImg;
+let centerImg;
 
 export function loadRotateImage(cb = Function.prototype) {
   const image = new Image();
-  image.src =  '/icons/rotate.png';
+  image.src = '/icons/rotate.png';
   image.onload = () => {
-    rotate = image;
+    rotateImg = image;
     cb();
   };
 }
 
-fabric.Object.prototype.drawControls = function (ctx) {
-  if (!this.hasControls) {
-    return this;
-  }
-
-  const { x: width, y: height } = this._calculateCurrentDimensions();
-  const scaleOffset = this.cornerSize;
-  const left = -(width + scaleOffset) / 2;
-  const top = -(height + scaleOffset) / 2;
-  const methodName = this.transparentCorners ? 'stroke' : 'fill';
+export function loadCenterImage(cb = Function.prototype) {
+  const image = new Image();
+  image.src = '/icons/center.png';
+  image.onload = () => {
+    centerImg = image;
+    cb();
+  };
+}
 
+function renderIcon(ctx, left, top, styleOverride, fabricObject, icon) {
+  const size = 20;
   ctx.save();
+  ctx.translate(left, top);
+  ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+  ctx.drawImage(icon, -size / 2, -size / 2, size, size);
+  ctx.restore();
+}
 
-  ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
-  if (!this.transparentCorners) {
-    ctx.strokeStyle = this.cornerStrokeColor;
-  }
-  this._setLineDash(ctx, this.cornerDashArray, null);
-
-  this._drawControl('tl', ctx, methodName, left, top);
-  this._drawControl('tr', ctx, methodName, left + width, top);
-  this._drawControl('bl', ctx, methodName, left, top + height);
-  this._drawControl('br', ctx, methodName, left + width, top + height);
-
-  if (!this.get('lockUniScaling')) {
-    this._drawControl('mt', ctx, methodName, left + width / 2, top);
-    this._drawControl('mb', ctx, methodName, left + width / 2, top + height);
-    this._drawControl('mr', ctx, methodName, left + width, top + height / 2);
-    this._drawControl('ml', ctx, methodName, left, top + height / 2);
-  }
-
-  if (this.hasRotatingPoint) {
-    const rotateLeft = left + width / 2 - 4;
-    const rotateTop = top - this.rotatingPointOffset - 5;
-    const drawRotateIcon = () => ctx.drawImage(rotate, rotateLeft, rotateTop, 20, 20);
-    if (!rotate) {
-      loadRotateImage(drawRotateIcon);
-    } else {
-      drawRotateIcon();
-    }
-  }
+export function setupCustomControls(fabricHelper) {
+  fabric.Object.prototype.set({
+    padding: 20,
+    cornerSize: 8,
+    cornerStyle: 'circle',
+    borderColor: '#7D6AEF',
+    cornerColor: '#7D6AEF',
+    cornerStrokeColor: '#fff',
+    transparentCorners: false
+  });
 
-  ctx.restore();
+  delete fabric.Object.prototype.controls.ml;
+  delete fabric.Object.prototype.controls.mr;
+  delete fabric.Object.prototype.controls.mt;
+  delete fabric.Object.prototype.controls.mb;
 
-  return this;
-};
+  ['tl', 'bl', 'br'].forEach(key => {
+    fabric.Object.prototype.controls[key].sizeX = 7;
+    fabric.Object.prototype.controls[key].sizeY = 7;
+  });
+
+  fabric.Object.prototype.controls.tr = new fabric.Control({
+    x: 0.5,
+    y: -0.5,
+    cursorStyle: 'pointer',
+    mouseUpHandler: function(eventData, transform) {
+      const target = transform.target;
+      fabricHelper.dispatch('removeLayer', target.layer);
+      fabricHelper.editor.remove(target);
+      fabricHelper.editor.renderAll();
+      return true;
+    },
+    render: function(ctx, left, top, styleOverride, fabricObject) {
+      const size = 10;
+      ctx.save();
+      ctx.translate(left, top);
+      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+      ctx.fillStyle = '#FF4444';
+      ctx.beginPath();
+      ctx.arc(0, 0, size / 2, 0, 2 * Math.PI, false);
+      ctx.fill();
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(-4, -4);
+      ctx.lineTo(4, 4);
+      ctx.moveTo(4, -4);
+      ctx.lineTo(-4, 4);
+      ctx.stroke();
+      ctx.restore();
+    },
+    cornerSize: 10
+  });
+
+  fabric.Object.prototype.controls.mtr = new fabric.Control({
+    x: 0,
+    y: -0.5,
+    offsetY: -30,
+    cursorStyle: 'pointer',
+    actionHandler: fabric.controlsUtils.rotationWithSnapping,
+    actionName: 'rotate',
+    render: function(ctx, left, top, styleOverride, fabricObject) {
+      if (rotateImg) {
+        renderIcon(ctx, left, top, styleOverride, fabricObject, rotateImg);
+      }
+    },
+    cornerSize: 20,
+    withConnection: true
+  });
+
+  fabric.Object.prototype.controls.centerControl = new fabric.Control({
+    x: 0,
+    y: -0.5,
+    offsetY: -30,
+    offsetX: 30,
+    cursorStyle: 'pointer',
+    mouseUpHandler: function(eventData, transform) {
+      const target = transform.target;
+      const helper = fabricHelper;
+
+      if (helper && helper.printAreaRect) {
+        const printArea = helper.printAreaRect;
+        const scaleX = printArea.width / target.width;
+        const scaleY = printArea.height / target.height;
+        const scale = Math.min(scaleX, scaleY) * 0.8;
+
+        target.set({
+          scaleX: scale,
+          scaleY: scale,
+          left: printArea.left + printArea.width / 2,
+          top: printArea.top + printArea.height / 2
+        });
+
+        target.setCoords();
+        helper.editor.renderAll();
+        helper.dispatch('setField', { field: 'scaleX', value: scale });
+        helper.dispatch('setField', { field: 'scaleY', value: scale });
+        helper.dispatch('setField', { field: 'left', value: target.left });
+        helper.dispatch('setField', { field: 'top', value: target.top });
+        helper.dispatch('setField', { field: 'boundingRect', value: target.getBoundingRect() });
+      }
+
+      return true;
+    },
+    render: function(ctx, left, top, styleOverride, fabricObject) {
+      if (centerImg) {
+        renderIcon(ctx, left, top, styleOverride, fabricObject, centerImg);
+      } else {
+        const size = 20;
+        ctx.save();
+        ctx.translate(left, top);
+        ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+        ctx.fillStyle = '#7D6AEF';
+        ctx.beginPath();
+        ctx.arc(0, 0, size / 2, 0, 2 * Math.PI, false);
+        ctx.fill();
+        ctx.fillStyle = '#fff';
+        ctx.font = '14px Arial';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('⊙', 0, 0);
+        ctx.restore();
+      }
+    },
+    cornerSize: 20,
+    withConnection: true
+  });
+}

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

@@ -1,7 +1,7 @@
 
 import { fabric } from 'fabric';
 import { getPrintAreaByName } from '../models/print-area';
-import { loadRotateImage } from './fabric/selection-style';
+import { loadRotateImage, loadCenterImage, setupCustomControls } from './fabric/selection-style';
 import EventDispatcher from './event-dispatcher';
 import { createText, createArt } from './fabric/object-factory';
 import { buildWireframe } from './fabric/wireframe';
@@ -14,7 +14,7 @@ class Background {
   backgroundImage = null;
 
   constructor({ background, size }) {
-    this.canvas = new fabric.Canvas(background, { ...size, uniScaleTransform: false });
+    this.canvas = new fabric.Canvas(background, { ...size });
   }
 
   clear() {
@@ -68,7 +68,7 @@ export default class FabricHelper {
 
   constructor({ editor, background, size }) {
     this.size = size;
-    this.editor = new fabric.Canvas(editor, { ...size, uniScaleTransform: false });
+    this.editor = new fabric.Canvas(editor, { ...size });
     if (background) {
       this.background = new Background({ background, size });
     }
@@ -88,8 +88,10 @@ export default class FabricHelper {
     //   return -this.height / 2 + this.getHeightOfLine(0) / this.lineHeight;
     // };
 
-    this.setDeleteButtonListeners();
     loadRotateImage();
+    loadCenterImage();
+    setupCustomControls(this);
+    this.setDeleteButtonListeners();
   }
 
   clear() {
@@ -209,7 +211,6 @@ export default class FabricHelper {
             obj.hiddenTextarea.focus();
           }
         }
-        obj.setControlsVisibility({ tr: false });
 
         if (initial) {
           this.dispatch('setField', { field: 'boundingRect', value: obj.getBoundingRect() });
@@ -264,28 +265,6 @@ export default class FabricHelper {
   }
 
   setDeleteButtonListeners() {
-    this.editor.on('object:selected', ({ target }) => {
-      this.dispatch('setDeleteButtonPosition', target.oCoords.tr);
-    });
-    this.editor.on('object:modified', ({ target }) => {
-      this.dispatch('setDeleteButtonPosition', target.oCoords.tr);
-      target.setControlsVisibility({ tr: false });
-    });
-    this.editor.on('object:moving', ({ target }) => {
-      target.setControlsVisibility({ tr: true });
-      this.dispatch('setDeleteButtonPosition', null);
-    });
-    this.editor.on('object:scaling', ({ target }) => {
-      target.setControlsVisibility({ tr: true });
-      this.dispatch('setDeleteButtonPosition', null);
-    });
-    this.editor.on('object:rotating', ({ target }) => {
-      target.setControlsVisibility({ tr: true });
-      this.dispatch('setDeleteButtonPosition', null);
-    });
-    this.editor.on('selection:cleared', () => {
-      this.dispatch('setDeleteButtonPosition', null);
-    });
   }
 
   handleListeners(object, type) {
@@ -293,13 +272,12 @@ export default class FabricHelper {
     ** COMMON EVENTS
     */
     object.on('selected', () => this.dispatch('selectLayer', object.layer));
-    object.on('rotating', ({ target: { angle } }) => {
-      this.dispatch('setField', { field: 'angle', value: parseInt(angle) });
+    object.on('rotating', () => {
+      this.dispatch('setField', { field: 'angle', value: parseInt(object.angle) });
     });
-    object.on('moved', ({ target }) => {
-      const { top, left } = target;
-      this.dispatch('setField', { field: 'top', value: Math.round(top) });
-      this.dispatch('setField', { field: 'left', value: Math.round(left) });
+    object.on('moved', () => {
+      this.dispatch('setField', { field: 'top', value: Math.round(object.top) });
+      this.dispatch('setField', { field: 'left', value: Math.round(object.left) });
     });
     object.on('moving', () => this.checkBoundingIntersection(object));
     object.on('scaling', () => {
@@ -339,7 +317,6 @@ export default class FabricHelper {
       object.on('changed', () => {
         this.dispatch('setField', { field: 'copy', value: object.text });
         this.dispatch('setField', { field: 'boundingRect', value: object.getBoundingRect() });
-        this.dispatch('setDeleteButtonPosition', object.oCoords.tr);
         // if (/\n/g.test(object.text || '')) {
         //   this.discardActiveObjects();
         //   object.text = object.text.replace(/\n/g, '');

package/components/common/file_uploader.vue

@@ -48,6 +48,7 @@ export default {
   name: 'FileUploader',
   props: {
     required: { type: Boolean, default: false },
+    convert: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     hasUploadLink: { type: Boolean, default: false },
@@ -113,18 +114,18 @@ export default {
     },
     async upload() {
       try {
-        const image = await api.uploadImage(this.file, this.onProgress, this.url);
+        const image = await api.uploadImage(this.file, this.onProgress, this.url, this.convert);
         this.onProgress(0);
         const url = image && staticLink(image.thumb || image.origin);
         this.$emit('onuploaded', { ...image, url });
       } catch (e) {
         console.dir(e);
         this.onProgress(0);
-        const { message, data } = e.response.data;
-        if (message === 'Conversion failed' && this.hasConversionErrorModal) {
+        const { message, error, data } = e.response?.data || {};
+        if ([message, error].includes('Conversion failed') && this.hasConversionErrorModal) {
           this.showConversionFailedModal(data);
         } else if (this.showErrorMessage) {
-          this.$toastr.e(e);
+          this.$toastr.e(error || message || e.message || e);
         } else {
           this.$emit('onerror', e);
         }

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

@@ -177,7 +177,7 @@ export default {
     if (this.suburb) {
       const option = this.createOptionFromSuburb(this.suburb);
       this.selected = option;
-      await this.handleSearch(this.selected.value.trim())
+      // await this.handleSearch(this.selected.value.trim());
     }
   },
   methods: {

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

@@ -59,6 +59,10 @@ export default {
     defaultPreview: {
       type: Boolean,
       default: true
+    },
+    allowCoverImage: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -80,7 +84,7 @@ export default {
     },
     colorBackground() {
       const color = this.color || this.product.color;
-      return this.fillBackground && getColorBackgroundStyle(color, false, this.originBackground);
+      return (this.fillBackground || (!this.allowCoverImage && !this.image)) && getColorBackgroundStyle(color, false, this.originBackground);
     },
     imageBackground() {
       return this.image && this.getImageBackground(this.image);
@@ -91,7 +95,7 @@ export default {
     image() {
       const color = this.defaultPreview ? null : (this.color || this.product.color || (this.product.colors || [])[0]);
       const product = this.product?.product || this.product;
-      return getColorImage(product, this.size, this.side, color) || getProductCover(product, this.size, this.side, color);
+      return getColorImage(product, this.size, this.side, color) || (this.allowCoverImage ? getProductCover(product, this.size, this.side, color) : null);
     },
     print() {
       const { printsThumbnails = {} } = this.product || {};

package/components/editor/editor_colors/editor-colors.vue

@@ -14,6 +14,7 @@
           :color="color"
           :fill-background="false"
           :default-preview="false"
+          :allow-cover-image="false"
           class="EditorColors__color-image">
         </product-side-with-print>
         <div class="EditorColors__color-name">

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

@@ -310,8 +310,7 @@ export default {
       if (this.$refs.previewCanvas) {
         this.fabricCanvas = new fabric.Canvas(this.$refs.previewCanvas, {
           width: this.$refs.previewCanvas.parentElement.offsetWidth - 100,
-          height: 200,
-          uniScaleTransform: false
+          height: 200
         });
         this.fabricCanvas.renderOnAddRemove = false;
         this.setupCanvasListeners();

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.scss

@@ -96,6 +96,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    max-width: 400px;
   }
   &__edit {
     width: 100%;

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

@@ -145,8 +145,8 @@ export default {
           break;
       }
       return {
-        class: quality ? quality.replace(' ', '_') : null,
-        value: isVector ? null : `${quality} / ${this.layer.dpi} DPI`
+        class: null, // quality ? quality.replace(' ', '_') : null,
+        value: isVector ? null : `${this.layer.dpi} DPI` // isVector ? null : `${quality} / ${this.layer.dpi} DPI`
       };
     }
   },

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

@@ -23,6 +23,7 @@
     <file-uploader
       class="EditorLayersToolbar__option"
       :multiple="false"
+      :convert="true"
       :url="`image/editor/${shop._id}/${product._id}`"
       @onuploaded="handleUploaded">
       <div slot="toggle">

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

@@ -34,13 +34,6 @@
         {{ visibleOnpress ? 'Real product photo' : 'Press for real product photo' }}
       </div>
     </div>
-    <div
-      v-if="deleteButtonPos"
-      :style="deleteButtonPosition"
-      class="EditorWorkspaceSide__delete-object"
-      @click="removeSelected">
-      <i class="icon-cancel"></i>
-    </div>
     <div>
       <div class="EditorWorkspaceSide__background-container">
         <canvas ref="background"></canvas>
@@ -78,6 +71,7 @@
         }">
         <file-uploader
           :multiple="false"
+          :convert="true"
           :url="`image/editor/${shop._id}/${product._id}`"
           @onuploaded="handleUploaded">
           <template #toggle>
@@ -114,7 +108,7 @@
       class="EditorWorkspaceSide__overlay"
       @mousedown="$emit('zoom-in')"></div>
     <div class="EditorWorkspaceSide__alert-container">
-      <div
+      <!-- <div
         v-if="showErrorAboutSmallImage"
         class="EditorWorkspaceSide__alert-error"
         @click="adjustSelectedArtDPI">
@@ -132,7 +126,7 @@
         class="EditorWorkspaceSide__alert-error">
         <i class="icon-attention-circled"></i>
         Part of your design layer is outside the print area.
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -190,7 +184,6 @@ export default {
       backgroundImage: null,
       backgroundImageUrl: null,
       backgroundImageLoaded: false,
-      deleteButtonPos: null,
       drawingInProcess: false,
       breakpoints: new Breakpoints()
     };
@@ -239,12 +232,6 @@ export default {
       const layers = this.editableLayers.filter(l => !paId || (l.printArea === paId));
       return layers;
     },
-    deleteButtonPosition() {
-      return this.deleteButtonPos ? {
-        top: `${this.deleteButtonPos.y}px`,
-        left: `${this.deleteButtonPos.x}px`
-      } : null;
-    },
     positionPlaceholder() {
       const { center, left, top, width, height } = this.fabricHelper.printAreaRect;
       const ratio = this.calcWorkspaceSize() / this.editorSize.width;
@@ -339,7 +326,7 @@ export default {
       const layer = this.printAreaLayers.find(l => l.editableDetails);
       if (layer?.editableDetails) {
         this.setSelectedLayer(layer);
-        this.setEditModeSelectedLayer(true);
+        this.$nextTick(() => this.setEditModeSelectedLayer(true));
       }
     },
     checkVisibleWireframe() {
@@ -393,7 +380,10 @@ export default {
         this.setSelectedLayerField(data);
         this.saveLayersAsImageWithDebounce();
       });
-      this.fabricHelper.on('selectLayer', this.setSelectedLayer);
+      this.fabricHelper.on('selectLayer', (layer) => {
+        this.setSelectedLayer(layer);
+        this.$nextTick(() => this.setEditModeSelectedLayer(true));
+      });
       this.fabricHelper.on('removeLayer', (layer) => {
         setTimeout(() => {
           if (!this.editModeSelectedLayer) {
@@ -403,7 +393,6 @@ export default {
           }
         }, 100);
       });
-      this.fabricHelper.on('setDeleteButtonPosition', this.setDeleteButtonPosition);
       this.fabricHelper.on('outOfPrintArea', this.setOffsetWarningVisibility);
 
       this.updateBackgroundImage();
@@ -478,7 +467,7 @@ export default {
       if (!this.isEditMode) {
         setTimeout(() => {
           this.setSelectedLayer(layer);
-          this.setEditModeSelectedLayer(true);
+          this.$nextTick(() => this.setEditModeSelectedLayer(true));
           this.toogleBoundBox(true);
         });
       }
@@ -488,9 +477,6 @@ export default {
       await this.createLayer({ type: 'art', url, size, fileName });
       this.visibleWireframe = true;
     },
-    setDeleteButtonPosition(pos) {
-      this.deleteButtonPos = pos;
-    },
     setOffsetWarningVisibility(visible) {
       this.setOffsetWarningVisible(visible);
     },

package/components/modals/failed_conversion_modal/failed-conversion-modal.vue

@@ -53,6 +53,7 @@
           </validation-provider>
           <phone-input
             :item="form"
+            :labelless="false"
             class="form-col col-half" />
         </div>
         <validation-provider

package/components/order/order_view/order-view.mixin.js

@@ -100,13 +100,16 @@ export default {
     taxName() {
       return this.settings?.pricing?.taxName || 'GST';
     },
+    isPayedViaLink() {
+      return this.model.charge?.payment_method_details?.type === 'link';
+    },
     paymentCard() {
       if (this.model.charge?.card) {
         return {
           number: this.model.charge.card.display_number,
           scheme: this.model.charge.card.scheme
         };
-      } else if (this.model.charge) {
+      } else if (this.model.charge && !this.isPayedViaLink) {
         return {
           number: `XXXX-XXXX-XXXX-${this.model.charge.payment_method_details?.card?.last4 || 'XXXX'}`,
           scheme: this.model.charge.payment_method_details?.card?.brand

package/components/order/order_view/order-view.vue

@@ -125,7 +125,7 @@
           v-if="model.paid"
           class="w-33">
           <div class="lc_regular16">
-            <b>PAID VIA CREDIT CARD</b>
+            <b>{{ isPayedViaLink ? 'PAID VIA Stripe(Link)' : 'PAID VIA CREDIT CARD' }}</b>
           </div>
           <div v-if="paymentCard">
             <div class="lc_regular16">

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

@@ -192,7 +192,6 @@ export default {
       return this.availableColors?.filter(color => this.product.colorsPricing?.some(c => c.colors?.includes(color._id) && c.clearance)) || [];
     },
     clearanceColorsWithQty() {
-      console.log('clearanceColors: ', this.clearanceColors);
       return this.clearanceColors.map(color => {
         const qty = this.usedSimpleProducts.reduce((sum, sp) => sp.color._id === color._id ? sum + (sp.amount || 0) : sum, 0);
         return qty > 0 ? { ...color, qty } : null;

package/components/product/product_check_delivery/product-check-delivery.vue

@@ -9,7 +9,7 @@
         <span>Detected:</span>
       </div>
       <div class="ProductCheckDelivery__detected-position">
-        London, Greater London
+        {{ suburbInfo }}
       </div>
     </div>
     <div class="ProductCheckDelivery__postcode">
@@ -119,6 +119,13 @@ export default {
     },
     suppliersWithRates() {
       return this.pricing?.shipping?.suppliersWithRates || [];
+    },
+    suburbInfo() {
+      const { locality, state } = this.suburb || {};
+      if (locality && state) {
+        return `${locality}, ${state}`;
+      }
+      return 'London, Greater London';
     }
   },
   watch: {

package/components/product/wizard/wizard_print_layers/wizard_print_layer/wizard-print-layer.vue

@@ -74,6 +74,7 @@
                 v-else-if="layer.type === 'art'">
                 <div class="WizardPrintLayer__info-art">
                   <a
+                    v-if="layer.file"
                     :href="layer.file.origin"
                     target="_blank">
                     <!-- <img

package/components/product/wizard/wizard_print_text_or_logo/wizard_text_or_logo_form/wizard-text-or-logo-form.vue

@@ -30,6 +30,7 @@
         <div class="WizardTextOrLogoForm__type-input">
           <file-uploader
             :multiple="false"
+            :convert="true"
             :url="`image/editor/${shop._id}/${product._id}`"
             :has-conversion-error-modal="false"
             :show-error-message="false"

package/feeds/google-shopping.js

@@ -20,6 +20,13 @@ const COUNTRIES_SIZE_SYSTEMS = {
   GB: 'UK'
 };
 
+function replaceVariables(text, product, sp) {
+  return (text || '')
+    .replace(/{colour}/g, sp.color?.name)
+    .replace(/{size}/g, sp.size?.name)
+    .replace(/{brand}/g, product.brand?.name);
+}
+
 async function googleShoppingFeed(axios, config, availableStores, country, isEditor, params) {
   const { allowSameDayDelivery } = params || {};
   const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}&country=${country || ''}`);
@@ -38,23 +45,22 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
               return !availableStores || availableStores.includes(sp.storeCode);
             })
             .map(sp => {
-              const filterImagesByType = imgType => (product.images || []).filter(i => (i.types || []).includes(imgType) && sp.color._id === i.color).map(i => i.image);
+              const filterImagesByType = (imgType, skipColor) => (product.images || []).filter(i => (i.types || []).includes(imgType) && (skipColor || sp.color._id === i.color)).map(i => i.image);
               const feedImages = filterImagesByType('feed_primary');
               const frontImages = filterImagesByType('front');
               const backImages = filterImagesByType('back');
               const additionalImages = filterImagesByType('additional_image_link');
-              const catalogFrontImages = (product.images || []).filter(i => (i.types || []).includes('catalog_front')).map(i => i.image);
+              const catalogFrontImages = filterImagesByType('catalog_front');
+              const catalogBackImages = filterImagesByType('catalog_back');
               const feedImage = spliceFirstImage(feedImages);
-              const image = feedImage || spliceFirstImage(frontImages) || spliceFirstImage(catalogFrontImages) || spliceFirstImage(backImages) || null;
+              const image = feedImage || spliceFirstImage(catalogFrontImages) || spliceFirstImage(frontImages) || spliceFirstImage(backImages) || null;
               const images = [
+                ...catalogBackImages,
                 ...additionalImages,
                 ...((!backImages?.includes(image) && getImages(backImages)) || (!frontImages?.includes(image) && getImages(frontImages)) || [])
-                  .filter(image => !additionalImages.includes(image))
+                  .filter(image => !additionalImages.includes(image) && !catalogBackImages.includes(image))
               ];
-              const feedTitle = (product.feedTitle || '')
-                .replace(/{colour}/g, sp.color.name)
-                .replace(/{size}/g, sp.size.name)
-                .replace(/{brand}/g, product.brand.name)
+              const feedTitle = product.feedTitle;
               const title = feedTitle || `${product.name} ${sp.color.name}`;
               const description = `${product.description || product.fabricInfoShort || product.name || ''}`
                 .replace(/ /g, ' ')
@@ -66,11 +72,10 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
               if (sp.multipackQty) {
                 link = link.includes('?') ? `${link}&multipack=${sp.SKU}` : `${link}?multipack=${sp.SKU}`;
               }
-
               const productWeight = +((product.weight || 0) * (sp.multipackQty || 1)).toFixed(3);
               const info = {
-                'g:title': { _text: sp.title || title },
-                'g:description': { _text: sp.description || description },
+                'g:title': { _text: replaceVariables(sp.title || title, product, sp) },
+                'g:description': { _text: replaceVariables(sp.description || description, product, sp) },
                 link: { _text: link },
                 'g:canonical_link': { _text: link.split('?')[0] },
                 'g:id': { _text: sp.SKU },
@@ -143,7 +148,7 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 info['g:local_shipping_label'] = { _text: 'sameday' };
               }
 
-              const productHighlight = `${product.feedProductHighlight || ''}`
+              const productHighlight = replaceVariables(`${product.feedProductHighlight || ''}`, product, sp)
                 .trim()
                 .split(/\n+/g)
                 .map(highlight => `${highlight || ''}`.trim())
@@ -183,7 +188,11 @@ async function googleShoppingFeed(axios, config, availableStores, country, isEdi
                 }
               }
 
-              const feedLifestyleImage = product.feedLifestyleImage || filterImagesByType('model')[0];
+              if (isClearance) {
+                info['g:custom_label_4'] = { _text: 'clearance' };
+              }
+
+              const feedLifestyleImage = filterImagesByType('model')[0] || product.feedLifestyleImage || filterImagesByType('model', true)[0];
               if (feedLifestyleImage) {
                 info['g:lifestyle_image_link'] = { _text: staticLink(feedLifestyleImage, config) };
               }

package/mixins/layouts/products.js

@@ -60,7 +60,6 @@ export default {
       if (this.currentCategory) {
         const categoriesBreadcrumbs = [];
         let category = this.currentCategory;
-        console.log('category: ', category);
         while (category) {
           categoriesBreadcrumbs.unshift({
             to: generateProductsLink(this.$route, {
@@ -120,7 +119,13 @@ export default {
 
       const items = ['Products'];
       if (this.currentCategory) {
-        items.push(this.currentCategory.name);
+        const categoryNames = [];
+        let category = this.currentCategory;
+        while (category) {
+          categoryNames.unshift(category.name);
+          category = category.parent;
+        }
+        items.push(...categoryNames);
       }
       if (this.currentProductType) {
         items.push(this.currentProductType.name);

package/nuxt.config.js

@@ -49,7 +49,7 @@ module.exports = (config, axios, { raygunClient, publicPath, productUrlToEditor
   },
   plugins: [
     '@/node_modules/@lancom/shared/plugins/jsonld',
-    '@/node_modules/@lancom/shared/plugins/vue-fragment',
+    { src: '@/node_modules/@lancom/shared/plugins/vue-fragment', ssr: false },
     '@/node_modules/@lancom/shared/plugins/global-components',
     '@/node_modules/@lancom/shared/plugins/directives',
     '@/node_modules/@lancom/shared/plugins/vue-js-modal',

package/package.json

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