@lancom/shared 0.0.294 → 0.0.296

package/assets/js/models/product-layers.js

@@ -71,15 +71,16 @@ export class ArtLayer extends Layer {
   width = null;
   height = null;
 
-  constructor(type, colorId, top, left, url, originalSize) {
+  constructor(type, colorId, top, left, url, originalSize, fileName) {
     super(colorId, top, left);
     this.type = type;
     this.url = url;
     this.originalSize = originalSize;
+    this.fileName = fileName;
   }
 };
 
-export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, sideId, properties = {} }) => {
+export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url, originalSize, sideId, fileName, properties = {} }) => {
   if (!type) {
     throw new Error('When creating a new layer, you must specify its type');
   }
@@ -95,7 +96,7 @@ export const getLayerModel = async ({ type, colorId, top, left, isEditMode, url,
       }
       break;
     case 'art':
-      layer = new ArtLayer(type, colorId, top, left, url, originalSize);
+      layer = new ArtLayer(type, colorId, top, left, url, originalSize, fileName);
       break;
     default:
       throw new Error(`Layer type '${type}' not found or not supported.`);

package/assets/js/utils/colors.js

@@ -7,7 +7,7 @@ export const isValidImageType = (i, type) => i.type === type || (i.types || []).
 export const isValidImageTypes = (i, types) => types.some(type => isValidImageType(i, type));
 
 export const getColorImage = (product = {}, size = 'small', type, color, allowAnyColor = false) => {
-  const colorImage = color && (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color._id === i.color || color._id === i.color._id));
+  const colorImage = color && (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (color?._id === i.color || color?._id === i.color?._id));
   const image = colorImage || (product.images || []).find(i => isValidImageType(i, type || COLORS_IMAGES_TYPES.FRONT) && (allowAnyColor || !i.color));
   return image && staticLink(image[size]);
 };

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

@@ -7,14 +7,13 @@ import { createObject } from './fabric/object-factory';
 
 const sizes = [];
 
-export function convertPrintToSVG(entity, sideId) {
+export function convertPrintToSVG(layers, printSize) {
   return new Promise(resolve => {
-    const svgSize = getSVGSize(entity, sideId);
+    const svgSize = getSVGSize(printSize);
+    console.log('svgSize: ', svgSize);
     const canvas = new fabric.Canvas(document.createElement('canvas'), { ...svgSize, uniScaleTransform: false });
-
-    const sideLayers = getSideLayers(entity, sideId);
     Promise.all(
-      sideLayers
+      layers
         .map(layer => {
           if (layer.type === 'art') {
             layer.url = layer.url.replace('thumb', 'origin');
@@ -27,7 +26,7 @@ export function convertPrintToSVG(entity, sideId) {
         .map(l => createObject(l, true))
     ).then(objects => {
       objects.forEach(object => {
-        const zoom = svgSize.width / object.layer.printAreaSize.width;
+        const zoom = 1;
         let artOriginZoom = 1;
         if (object.layer.type === 'art') {
           artOriginZoom *= object.layer._width / object.width;
@@ -40,33 +39,26 @@ export function convertPrintToSVG(entity, sideId) {
       });
 
       let svg = canvas.toSVG();
-      svg = insertFontsStyleToSvg(sideLayers, svg);
+      svg = insertFontsStyleToSvg(layers, svg);
       resolve(svg);
     });
   });
 }
 
-export function exportPrintToSVG(entity, sideId) {
-  convertPrintToSVG(entity, sideId).then(svg => {
+export function exportPrintToSVG(layers, printSize) {
+  convertPrintToSVG(layers, printSize).then(svg => {
     const blob = new Blob([svg], { type: 'image/svg+xml' });
-    FileSaver.saveAs(blob, `${sideId}-${entity.guid}.svg`);
+    FileSaver.saveAs(blob, `Pint-${Date.now()}.svg`);
   });
 };
 
-function getSVGSize(entity, sideId) {
-  const printArea = getPrintArea(entity, sideId);
-  const printSize = sizes[printArea];
+function getSVGSize(printSize) {
   return {
-    width: printSize[0] * PIXELS_PER_CM,
-    height: printSize[1] * PIXELS_PER_CM
+    width: printSize.width * PIXELS_PER_CM,
+    height: printSize.height * PIXELS_PER_CM
   };
 }
 
-function getPrintArea(entity, sideId) {
-  const printAreas = entity.printAreas || {};
-  return printAreas[sideId];
-}
-
 function getSideLayers(entity, sideId) {
   return (entity.layers || []).filter(layer => layer.sideId === sideId);
 }

package/assets/js/utils/fabric/wireframe.js

@@ -3,9 +3,9 @@ import { fabric } from 'fabric';
 
 const sizes = [];
 
-export const buildWireframe = ({ width, height, editor, print }) => {
+export const buildWireframe = ({ width, height, editor, print, printSize }) => {
   const layers = editor.getObjects();
-  const printAreaSize = print.printSize;
+  const printAreaSize = printSize || print?.printSize || { width: 1, height: 1};
   const group = new fabric.Group(layers);
   const groupBounding = group.getBoundingRect();
   const ratioX = (width / groupBounding.width) * 0.8;
@@ -108,8 +108,8 @@ export const buildWireframe = ({ width, height, editor, print }) => {
   ], 'h');
   verticalArrow.set({ selectable: false });
   horizontalArrow.set({ selectable: false });
-  const W = Math.round(groupBounding.width / printAreaSize.width);
-  const H = Math.round(groupBounding.height / printAreaSize.height);
+  const W = Math.round(groupBounding.width / printAreaSize.width * 10);
+  const H = Math.round(groupBounding.height / printAreaSize.height * 10);
   const verticalSize = new fabric.Text(`H: ${H * 10}mm`, {
     top: bounding.top + (bounding.height / 2),
     left: 0,

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

@@ -220,8 +220,8 @@ export default class FabricHelper {
     });
   }
 
-  buildWireframe({ width, height, print }) {
-    buildWireframe({ width, height, editor: this.editor, print });
+  buildWireframe({ width, height, print, printSize }) {
+    buildWireframe({ width, height, editor: this.editor, print, printSize });
   }
 
   checkBoundingIntersection(object) {

package/assets/js/utils/order.js

@@ -1,4 +1,4 @@
-import { getProductSides } from './product';
+import { getProductSides, getProductLayers } from './product';
 import { getPrintTypeSizePricing } from '@lancom/shared/assets/js/utils/prints';
 
 export function populateProductsFields(products, pricing) {
@@ -9,7 +9,8 @@ export function populateProductsFields(products, pricing) {
     const sides = getProductSides(product);
     const sidesKeys = [];
     sides.forEach(side => {
-      const sideLayers = product.layers.filter(l => l.sideId === side);
+      const layers = getProductLayers(product);
+      const sideLayers = layers.filter(l => l.sideId === side);
       const lastModifiedLayer = sideLayers.sort((l1, l2) => l2.modifiedAt - l1.modifiedAt)[0];
       const key = `${side}-${lastModifiedLayer.modifiedAt}`;
 
@@ -23,7 +24,9 @@ export function populateProductsFields(products, pricing) {
       sideLayers.forEach(l => {
         l.printId = printId;
       });
-
+      if (!product.printIds) {
+        product.printIds = {};
+      }
       product.printIds[side] = printId;
     });
 

package/assets/js/utils/prints.js

@@ -21,11 +21,18 @@ export function getPrintAreaSizes({ printSize, sizes = [] }) {
 };
 
 export const generatePrintLayer = layer => {
-  return {
+  const model = {
     ...layer,
     text: layer.copy,
     params: layer
   };
+  if (layer.url) {
+    model.file = {
+      fileName: layer.fileName,
+      origin: layer.url
+    }
+  }
+  return model
 };
 
 export function getPrintsFromLayers(layers, product) {

package/assets/js/utils/product.js

@@ -58,12 +58,21 @@ export function generateCartProducts(mainProduct, simpleProducts, layers, hasPri
   //   });
 }
 
-export function getProductSides({ layers = [] }) {
+export function getProductLayers(product, layersSideId) {
+  const layers = (product?.prints || [])
+    .reduce((layers, print) => [
+      ...layers,
+      ...(print.layers || []).map(l => ({ ...(l.params || {}) }))
+    ], []);
+  return layers.filter(({ sideId }) => !layersSideId || sideId === layersSideId);
+}
+
+export function getProductSides(product) {
+  const layers = getProductLayers(product);
   const sidesSet = layers.reduce((sides, layer) => {
     sides.add(layer.sideId);
     return sides;
   }, new Set());
-
   return [...sidesSet];
 }
 

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

@@ -10,6 +10,16 @@
           side="front"
           size="medium" />
       </div>
+      <div
+        v-if="entity && entity.printsThumbnails && entity.printsThumbnails.back"
+        class="CartEntityColorSimpleProducts__image"
+        @click="showImage(images, 1)">
+        <product-side-with-print
+          :product="group"
+          :default-preview="defaultPreview"
+          side="back"
+          size="medium" />
+      </div>
     </div>
     <div class="CartEntityColorSimpleProducts__info">
       <div class="CartEntityColorSimpleProducts__features">

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

@@ -82,7 +82,8 @@ export default {
     },
     image() {
       const color = this.defaultPreview ? null : this.product.color;
-      return getColorImage(this.product, this.size, this.side, color) || getProductCover(this.product, this.size, this.side, color);
+      const product = this.product?.product || this.product;
+      return getColorImage(product, this.size, this.side, color) || getProductCover(product, this.size, this.side, color);
     },
     print() {
       const { printsThumbnails = {} } = this.product || {};

package/components/editor/editor.vue

@@ -75,7 +75,6 @@
 
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex';
-import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
 import modals from '@lancom/shared/mixins/modals';
 import confirmModal from '@lancom/shared/mixins/confirm';
 import OfferScreenPrinting from '@lancom/shared/components/asides/offer_screen_printing/offer-screen-printing';

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

@@ -103,8 +103,8 @@ export default {
       const layer = await this.createLayer({ type: 'text' });
       this.$emit('layer-added', { layer, toEditMode: true });
     },
-    async handleUploaded({ url, size }) {
-      const layer = await this.createLayer({ type: 'art', url, size });
+    async handleUploaded({ url, size, fileName }) {
+      const layer = await this.createLayer({ type: 'art', url, size, fileName });
       this.$emit('layer-added', { layer, toEditMode: false });
     }
   }

package/components/editor/editor_print_area_options/editor-print-area-options.scss

@@ -6,14 +6,15 @@
     align-items: center;
     justify-content: center;
     padding: 8px 0;
+    flex-wrap: wrap;
     &.singleRow {
       grid-template-columns: repeat(4, 1fr);
     }
   }
 
   &__option {
-    margin: 0 5px;
-    min-width: 150px;
+    margin: 0 5px 10px 5px;
+    min-width: 144px;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -35,7 +35,7 @@
         top: -90px;
         left: calc((-720px + 100vw) / 2);
         max-width: none;
-        z-index: 104;
+        z-index: 9999;
       }
     }
     &-toggle {
@@ -86,7 +86,7 @@
     position: sticky;
     bottom: 20px;
     background: white;
-    width: 296px;
+    width: 310px;
     @media (min-width: $bp-small-min) {
       width: 580px;
     }

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

@@ -8,7 +8,7 @@
     bottom: 0;
     left: 0;
     height: 78px;
-    z-index: 105;
+    z-index: 10000;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     background-color: $white_high_emphasis;

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

@@ -115,7 +115,7 @@
             Account name: {{ depositInfo.accountName }}
           </div>
           <div class="lc_regular16">
-            BSB: {{ depositInfo.BSB }}
+            {{ bsbLabel }}: {{ depositInfo.BSB }}
           </div>
           <div class="lc_regular16">
             Account: {{ depositInfo.account }}
@@ -205,6 +205,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import OrderViewMixin from './order-view.mixin';
 import OrderViewProduct from './order_view_product/order-view-product';
 
@@ -219,6 +220,12 @@ export default {
       type: Boolean,
       default: true
     }
+  },
+  computed: {
+    ...mapGetters(['MESSAGES']),
+    bsbLabel() {
+      return this.MESSAGES.DIRECT_DEPOSIT_BSB || 'BSB';
+    },
   }
 };
 </script>

package/components/product/product_print_preview/product-print-preview.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="ProductPrintPreview__wrapper">
+    <canvas ref="print"></canvas>
+    <div
+      class="ProductPrintPreview__export"
+      @click="exportPrintToSVG">
+      Export To SVG
+    </div>
+  </div>
+</template>
+
+<script>
+import { exportPrintToSVG } from '@lancom/shared/assets/js/utils/export-print-to-svg';
+import FabricHelper from '@lancom/shared/assets/js/utils/fabric-helper';
+
+export default {
+  name: 'ProductPrintPreview',
+  data() {
+    return {
+      fabricHelper: null,
+      size: {
+        width: 540,
+        height: 540
+      }
+    };
+  },
+  props: {
+    product: {
+      type: Object,
+      required: true
+    },
+    print: {
+      type: Object,
+      required: true
+    },
+    printSize: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    layers() {
+      const layers = (this.print.layers || [])
+        .filter(l => !!l.params)
+        .map(l => ({ ...l.params }));
+      return layers;
+    }
+  },
+  async mounted() {
+    console.log('print: ', this.print);
+    this.fabricHelper = new FabricHelper({
+      editor: this.$refs.print,
+      size: this.size
+    });
+    await this.drawLayers();
+    this.fabricHelper.buildWireframe({
+      ...this.size,
+      // area: product.printAreas[this.sideId],
+      printSize: this.printSize,
+      product: this.product
+    });
+  },
+  methods: {
+    drawLayers() {
+      return this.layers.reduce(async (promise, layer) => {
+        await promise;
+        return new Promise(resolve => {
+          this.fabricHelper.createObject({ layer }).then(obj => {
+            resolve();
+          });
+        });
+      }, Promise.resolve());
+    },
+    exportPrintToSVG() {
+      exportPrintToSVG(this.layers, this.printSize);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ProductPrintPreview {
+  &__wrapper {
+    width: 540px;
+    height: 540px;
+    position: relative;
+    // background-image: url(~static/images/trasnparent-pattern.png);
+    canvas {
+      // border: 2px solid blue;
+    }
+  }
+  &__export {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+    display: inline-block;
+    padding: 10px;
+    cursor: pointer;
+    background: rgb(110, 217, 246);
+    z-index: 99;
+  }
+}
+</style>

package/components/product/products_size_selector_color/product_size_selector_color/product-size-selector-color.vue

@@ -39,7 +39,7 @@
         <div
           v-if="product.quantityStock"
           class="ProductSizeSelectorColor__in-stock">
-          {{ currentQuantityStock }} in stock
+          {{ currentQuantityStockLabel }} in stock
         </div>
         <div
           v-else
@@ -52,7 +52,7 @@
       <div
         v-if="product.quantityStock"
         class="ProductSizeSelectorColor__in-stock">
-        {{ currentQuantityStock }} in stock
+        {{ currentQuantityStockLabel }} in stock
       </div>
       <div
         v-else
@@ -104,6 +104,9 @@ export default {
   computed: {
     ...mapGetters('product', ['isPrintPricing', 'usedSimpleProductsQuantity']),
     ...mapGetters(['gstTax', 'currency']),
+    currentQuantityStockLabel() {
+      return this.currentQuantityStock > 100 ? '100+' : this.currentQuantityStock;
+    },
     pricing() {
       return (this.isPrintPricing ? this.product.pricing : this.product.unprintedPricing) || [];
     },

package/components/quotes/quote_view/quote-view.vue

@@ -41,7 +41,7 @@
           <div><b>{{ MESSAGES.DIRECT_DEPOSIT_DETAILS || 'DIRECT DEPOSIT DETAILS'}}</b></div>
           <div>Bank: {{ depositInfo.bank }}</div>
           <div>Account name: {{ depositInfo.accountName }}</div>
-          <div>BSB: {{ depositInfo.BSB }}</div>
+          <div>{{ bsbLabel }}: {{ depositInfo.BSB }}</div>
           <div>Account: {{ depositInfo.account }}</div>
         </td>
       </tr>
@@ -62,6 +62,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import QuoteViewMixin from './quote-view.mixin';
 import QuoteOptionView from './quote_option_view/quote-option-view';
 
@@ -70,7 +71,13 @@ export default {
   components: {
     QuoteOptionView
   },
-  mixins: [QuoteViewMixin]
+  mixins: [QuoteViewMixin],
+  computed: {
+    ...mapGetters(['MESSAGES']),
+    bsbLabel() {
+      return this.MESSAGES.DIRECT_DEPOSIT_BSB || 'BSB';
+    },
+  }
 };
 </script>
 

package/feeds/google-shopping.js

@@ -14,6 +14,11 @@ async function googleLocalShoppingFeed(axios, config, availableStores, country)
     .map(i => fields.reduce((item, field) => ({ ...item, [field]: i[field] }), {}));
   return result;
 }
+
+const COUNTRIES_SIZE_SYSTEMS = {
+  GB: 'UK'
+};
+
 async function googleShoppingFeed(axios, config, availableStores, country) {
   const { data } = await axios.get(`${config.LOCAL_API_URL}/feed/products?host=${config.HOST_NAME}&country=${country || ''}`);
   const spliceFirstImage = images => (images || []).splice(0, 1)[0];
@@ -58,7 +63,7 @@ async function googleShoppingFeed(axios, config, availableStores, country) {
                 'g:id': { _text: sp.SKU },
                 'g:item_group_id': { _text: product.SKU },
                 'g:size': { _text: sp.size.name },
-                'g:size_system': country || 'AU',
+                'g:size_system': COUNTRIES_SIZE_SYSTEMS[country] || country || 'AU',
                 'g:size_type': 'regular',
                 'g:gender': { _text: product.gender },
                 'g:material': { _text: product.fabricInfoShort },

package/mixins/add-to-cart.js

@@ -22,6 +22,9 @@ export default {
       'calculatingPrice',
       'multipack'
     ]),
+    ...mapGetters('layers', [
+      'layerThumbnails'
+    ]),
     isValidOrderQuantity() {
       return this.isValidBigSizeOrderQuantity && this.isValidMiltipackOrderQuantity && (!this.minimumOrderQuantity || this.usedSimpleProductsQuantity >= this.minimumOrderQuantity);
     },
@@ -40,7 +43,7 @@ export default {
     ...mapMutations('product', ['clearTemplate', 'setIsPrintPricing']),
     ...mapMutations('layers', ['resetLayers']),
     async proceedToCard() {
-      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing);
+      const entities = generateCartProducts(this.product, this.template.simpleProducts, this.template.layers, this.isPrintPricing, this.layerThumbnails);
       await this.addToCart({
         entities,
         shop: this.shop,

package/package.json

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

package/store/layers.js

@@ -19,6 +19,7 @@ export const actions = {
 
 export const mutations = {
   setLayersThumbnail(state, { side, value }) {
+    console.log('setLayersThumbnail: ', side, value);
     Vue.set(state.layerThumbnails, side, value);
   },
   setEditableLayer(state, layer) {

package/store/product.js

@@ -220,7 +220,8 @@ export const actions = {
       preselect = true,
       isEditMode,
       size,
-      properties
+      properties,
+      fileName
     }
   ) {
     const { center: { top, left } } = getters.printArea;
@@ -230,6 +231,7 @@ export const actions = {
       top,
       left,
       isEditMode,
+      fileName,
       url,
       originalSize: size,
       sideId: getters.editableSide?.id,