@lancom/shared 0.0.295 → 0.0.297

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/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/assets/scss/ui_kit/_table.scss

@@ -18,7 +18,7 @@
   th {
     font-size: 16px;
     line-height: 170%;
-    color: $gray;
+    color: $dark_blue;
     vertical-align: middle;
   }
   &:not(.tight-rows) tr {

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/checkout/cart/cart_shipments_pricing/cart-shipments-pricing.vue

@@ -94,7 +94,8 @@ export default {
       'removeSupplier'
     ]),
     async removeSupplierConfirm(supplier) {
-      const message = `Will be removed all products related to brands: ${commaArray(supplier.brands.map(b => b.name))}. Are you sure?`;
+
+      const message = `All products from ${commaArray(supplier.brands.map(b => b.name))} will be removed from the cart. Click OK to proceed`;
       const reset = await this.showConfirmationModal(message);
 
       if (reset) {

package/components/common/price.vue

@@ -1,11 +1,11 @@
 <template>
   <span>
-    {{ price | priceWithTax(pricingSettings, currency) }}
+    {{ displayPrice }}
   </span>
 </template>
   
 <script>
-import { priceWithTax } from '@lancom/shared/assets/js/utils/filters';
+import { priceWithTax, price } from '@lancom/shared/assets/js/utils/filters';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -16,10 +16,17 @@ export default {
   props: {
     price: {
       type: Number
+    },
+    withGst: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
-    ...mapGetters(['pricingSettings', 'currency'])
+    ...mapGetters(['pricingSettings', 'currency']),
+    displayPrice() {
+      return this.withGst ? priceWithTax(this.price, this.pricingSettings, this.currency) : price(this.price, this.currency);
+    }
   }
 };
 </script>

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

@@ -56,9 +56,20 @@
         </div>
       </breakpoint>
       <div class="col-md-6 col-12 Editor__col">
-        <client-only>
-          <editor-workspace class="Editor__workspace" />
-        </client-only>
+        <breakpoint
+          name="sm"
+          mode="down">
+          <client-only>
+            <editor-product-details />
+          </client-only>
+        </breakpoint>
+        <breakpoint
+          name="sm"
+          mode="up">
+          <client-only>
+            <editor-workspace class="Editor__workspace" />
+          </client-only>
+        </breakpoint>
       </div>
     </div>
     <breakpoint
@@ -75,7 +86,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_layer/editor-layers-layer.vue

@@ -43,7 +43,7 @@
           <div
             class="EditorLayersLayer__quality-value"
             :class="artQuality.class">
-            {{ artQuality.value }}
+            {{ artQuality.value || artQuality.class }}
           </div>
         </div>
       </div>
@@ -105,6 +105,7 @@ export default {
       if (this.layer.type !== 'art') {
         return null;
       }
+      const isVector = /\.(ai|pdf|svg|eps)$/.test((this.layer.url || '').toLowerCase());
       let quality;
       switch (true) {
         case this.layer.dpi < 75:
@@ -113,13 +114,13 @@ export default {
         case this.layer.dpi >= 75 && this.layer.dpi < 100:
           quality = 'low quality';
           break;
-        case this.layer.dpi >= 100:
+        case this.layer.dpi >= 100 || isVector:
           quality = 'good quality';
           break;
       }
       return {
         class: quality ? quality.replace(' ', '_') : null,
-        value: `${quality} / ${this.layer.dpi} DPI`
+        value: isVector ? null : `${quality} / ${this.layer.dpi} DPI`
       };
     }
   },

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_print_area_options/editor_print_area_option/editor-print-area-option.scss

@@ -18,6 +18,14 @@
       background-color: $green;
     }
   }
+  &__info {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-width: 50px;
+  }
   &__suboptions {
     position: absolute;
     bottom: 100%;

package/components/editor/editor_print_area_options/editor_print_area_option/editor-print-area-option.vue

@@ -15,14 +15,14 @@
           [productType]: true
         }">
       </div>
-      <div>
+      <div class="EditorPrintAreaOption__info">
         <div class="lc_caption">
           {{ option.label }}
         </div>
         <div class="lc_regular10">
-          <span v-if="option.printArea && calcPrintPrice(option) > 0">
-            {{ calcPrintPrice(option) | priceWithTax(pricingSettings, currency) }}
-          </span>
+          <price
+            :price="calcPrintPrice(option)"
+            :with-gst="priceIncludeGST" />
         </div>
       </div>
     </div>
@@ -58,9 +58,13 @@
 import { mapGetters } from 'vuex';
 import { priceWithTax, priceInRange } from '@lancom/shared/assets/js/utils/filters';
 import { getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'EditorPrintAreaOption',
+  components: {
+    Price
+  },
   filters: {
     priceWithTax
   },
@@ -92,7 +96,8 @@ export default {
     ]),
     ...mapGetters('product', [
       'usedSimpleProducts',
-      'selectedPrintType'
+      'selectedPrintType',
+      'priceIncludeGST'
     ]),
     printsPricing() {
       return getProductPrintsAreasPrices(this.product, this.selectedPrintType);

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

@@ -1,4 +1,5 @@
 @import "@/assets/scss/variables";
+
 .EditorProductDetails {
   &__wrapper {
     padding-top: 36px;
@@ -7,6 +8,11 @@
     display: flex;
     align-items: center;
     margin-top: 5px;
+    @media (max-width: $bp-extra-small-max) {
+      flex-direction: column;
+      align-items: start;
+      margin-top: 10px;
+    }
     &-logo {
       img {
         max-width: 75px;
@@ -16,6 +22,9 @@
     &-info {
       margin-left: 10px;
       flex-grow: 1;
+      @media (max-width: $bp-extra-small-max) {
+        margin-left: 0px;
+      }
     }
     &-row {
       display: flex;
@@ -59,4 +68,13 @@
     padding: 10px;
     margin-top: 10px;
   }
+  &__product-image {
+    width: 100%;
+    text-align: center;
+    margin: 15px 0;
+    img {
+      width: 100%;
+      max-width: 330px;
+    }
+  }
 }

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

@@ -21,11 +21,14 @@
               :delay="{ show: 200, hide: 400 }"
               popover-class="tooltip popover white"
               class="EditorProductDetails__discounts-table">
-              <span class="lc_semibold22 lc_black EditorProductDetails__dashed-underline">
-                {{ defaultSimpleProductPricing[0].price | priceWithTax(pricingSettings, currency) }}
-              </span>
+              <price
+                class="lc_semibold22 lc_black EditorProductDetails__dashed-underline"
+                :price="defaultSimpleProductPricing[0].price"
+                :with-gst="inclGST" />
               <template slot="popover">
-                <pricing-discounts-table :prices="defaultSimpleProductPricing" />
+                <pricing-discounts-table
+                  :prices="defaultSimpleProductPricing"
+                  :with-gst="inclGST" />
               </template>
             </v-popover>
           </span>
@@ -45,10 +48,18 @@
                   :items="printTypePrices"
                   :bordered="true"
                   :striped="false"
+                  :with-gst="inclGST"
                   class="EditorProductDetails__prints-table" />
               </template>
             </v-popover>
           </span>
+          <span class="ml-10">
+            <checkbox
+              v-model="inclGST"
+              :dark="true">
+              <div class="ml-5">Inc. {{ taxName }}</div>
+            </checkbox>
+          </span>
         </div>
         <div class="EditorProductDetails__header-row">
           <span class="EditorProductDetails__product-link">
@@ -68,20 +79,27 @@
       class="EditorProductDetails__available-warning">
       Product Not Available in {{ country.name }}
     </div>
-    <fragment
+    <div
+      v-if="mainProductImageSrc"
+      class="EditorProductDetails__product-image">
+      <img :src="mainProductImageSrc" />
+    </div>
+    <div
       v-if="productDetailsLoaded && productAvailableInCurrentCountry">
       <div class="EditorProductDetails__section">
-        <product-colors-selector :has-another-print-btn="false" />
+        <product-colors-selector
+          :has-another-print-btn="false"
+          :has-toggle-gst="false" />
       </div>
       <div class="EditorProductDetails__section">
         <editor-pricing :has-cart-btn="false" />
       </div>
-    </fragment>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
 import ProductColorsSelector from '@lancom/shared/components/product/product_colors_selector/product-colors-selector';
 import EditorPricing from '@lancom/shared/components/product/editor_pricing/editor-pricing';
 import PricingDiscountsTable from '@lancom/shared/components/common/pricing_discounts_table/pricing-discounts-table';
@@ -89,6 +107,7 @@ import modals from '@lancom/shared/mixins/modals';
 import { staticLink, priceWithTax } from '@lancom/shared/assets/js/utils/filters';
 import PricingTable from '@lancom/shared/components/common/pricing_table/pricing-table';
 import { generateProductLink } from '@lancom/shared/assets/js/utils/product';
+import Price from '@lancom/shared/components/common/price';
 
 export default {
   name: 'EditorProductDetails',
@@ -96,7 +115,8 @@ export default {
     ProductColorsSelector,
     PricingDiscountsTable,
     EditorPricing,
-    PricingTable
+    PricingTable,
+    Price
   },
   filters: {
     priceWithTax,
@@ -104,8 +124,12 @@ export default {
   },
   mixins: [modals],
   computed: {
+    ...mapGetters(['taxName']),
     ...mapGetters('product', [
       'product',
+      'editableColor',
+      'images',
+      'priceIncludeGST',
       'productDetailsLoaded',
       'defaultSimpleProduct',
       'selectedPrintType',
@@ -118,6 +142,14 @@ export default {
       'pricingSettings',
       'country'
     ]),
+    inclGST: {
+      get() {
+        return this.priceIncludeGST;
+      },
+      set(value) {
+        this.setPriceIncludeGST(value);
+      }
+    },
     defaultSimpleProductPricing() {
       return (this.isPrintPricing ? this.defaultSimpleProduct?.pricing : this.defaultSimpleProduct?.unprintedPricing);
     },
@@ -138,7 +170,16 @@ export default {
         });
         return sizes;
       }, new Map()).values()];
+    },
+    mainProductImage() {
+      return this.images.find(i => i.color === this.editableColor?._id) || this.images[0];
+    },
+    mainProductImageSrc() {
+      return this.mainProductImage && this.mainProductImage.large;
     }
+  },
+  methods: {
+    ...mapMutations('product', ['setPriceIncludeGST']),
   }
 };
 </script>

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

@@ -9,8 +9,8 @@
     &-container {
       position: relative;
       margin: 0 auto;
-      width: 296px;
-      height: 296px;
+      width: 310px;
+      height: 370px;
       max-width: 100%;
       @media (min-width: $bp-small-min) {
         width: 580px;
@@ -35,7 +35,7 @@
         top: -90px;
         left: calc((-720px + 100vw) / 2);
         max-width: none;
-        z-index: 104;
+        z-index: 1003;
       }
     }
     &-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/editor_workspace/editor-workspace.vue

@@ -100,11 +100,6 @@
         @option-mouseleave="toogleBoundBox(false, $event)">
       </editor-print-area-options>
     </div>
-    <breakpoint
-      name="md"
-      mode="down">
-      <editor-pricing v-if="productDetailsLoaded" />
-    </breakpoint>
   </div>
 </template>