@lancom/shared 0.0.295 → 0.0.297

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

@@ -6,6 +6,18 @@
     transition: background-color 0.5s ease;
     background-color: white;
   }
+  &__toggle-wireframe {
+    position: absolute;
+    z-index: 1001;
+    background: gainsboro;
+    padding: 6px;
+    top: 5px;
+    font-size: 14px;
+    cursor: pointer;
+    &--active {
+      background: rgb(196, 226, 236);
+    }
+  }
   &__delete-object {
     position: absolute;
     z-index: 2;

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

@@ -9,6 +9,15 @@
     }"
     @mouseover="toogleBoundBox(true)"
     @mouseleave="toogleBoundBox(false)">
+    <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="deleteButtonPos"
       :style="deleteButtonPosition"
@@ -98,6 +107,7 @@ export default {
   },
   data() {
     return {
+      visibleWireframe: false,
       fabricHelper: null,
       redrawWithThrottle: throttle(this.redraw, 100, { trailing: false }),
       saveLayersAsImageWithDebounce: debounce(this.saveLayersAsImage, 100),
@@ -115,12 +125,22 @@ export default {
     ...mapGetters('product', [
       'product',
       'layers',
+      'images',
       'editableColor',
       'editableLayers',
       'selectedLayer',
       'editorSize',
       'editModeSelectedLayer'
     ]),
+    hasWireframeImage() {
+      return !!this.wireframeImage;
+    },
+    wireframeImage() {
+      return this.images.find(i => i.types?.includes('designer') && i.types?.includes(this.side));
+    },
+    sideEditableLayers() {
+      return this.editableLayers.filter(l => l.sideId === this.side);
+    },
     printAreaLayers() {
       return this.editableLayers.filter(l => !this.printArea || l.printArea === this.printArea._id);
     },
@@ -171,6 +191,9 @@ export default {
     editableColor() {
       this.updateBackgroundImage();
     },
+    visibleWireframe() {
+      this.updateBackgroundImage();
+    },
     layers() {
       this.redrawWithThrottle();
     },
@@ -186,6 +209,7 @@ export default {
     }
   },
   mounted() {
+    this.checkVisibleWireframe();
     this.initEventsListeners();
     this.initCanvas();
     this.handleWorkspaceSize();
@@ -207,6 +231,12 @@ export default {
     ...mapMutations('layers', [
       'setLayersThumbnail'
     ]),
+    checkVisibleWireframe() {
+      this.visibleWireframe = this.sideEditableLayers.length > 0;
+    },
+    toggleWireframeImage() {
+      this.visibleWireframe = !this.visibleWireframe;
+    },
     adjustSelectedArtDPI() {
       const measure = this.fabricHelper.getEditorDPI();
       const scale = measure / 75;
@@ -217,7 +247,7 @@ export default {
     },
     calcWorkspaceSize() {
       const sizes = {
-        xs: 296,
+        xs: 330,
         sm: 580,
         md: 430,
         lg: 600,
@@ -287,8 +317,7 @@ export default {
       this.saveLayersAsImageWithDebounce();
     },
     async addLayersToCanvas() {
-      const layers = this.editableLayers.filter(l => l.sideId === this.side);
-      for (const layer of layers) {
+      for (const layer of this.sideEditableLayers) {
         const params = {
           layer,
           active: this.isLayerSelected(layer)
@@ -301,7 +330,8 @@ export default {
     },
     updateBackgroundImage() {
       const type = this.side === 'front' ? COLORS_IMAGES_TYPES.FRONT : COLORS_IMAGES_TYPES.BACK;
-      const imageUrl = getLargeColorImage(this.product, type, this.editableColor);
+      const wireframeImageUrl = this.visibleWireframe && this.wireframeImage?.large;
+      const imageUrl = wireframeImageUrl || getLargeColorImage(this.product, type, this.editableColor);
       if (this.backgroundImage && this.backgroundImageUrl === imageUrl) {
         return this.fabricHelper.setBackgroundImage(this.backgroundImage);
       }
@@ -325,6 +355,7 @@ export default {
     createTextLayer() {
       window.scrollTo(0, 0);
       this.createLayer({ type: 'text', isEditMode: true });
+      this.visibleWireframe = true;
     },
     setDeleteButtonPosition(pos) {
       this.deleteButtonPos = pos;

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

@@ -5,10 +5,10 @@
   &__menu {
     position: fixed;
     right: 0;
-    bottom: 0;
+    top: calc(100vh - 78px);
     left: 0;
     height: 78px;
-    z-index: 105;
+    z-index: 999999;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     background-color: $white_high_emphasis;

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

@@ -7,7 +7,7 @@
         @click="show('details')">
         <i class="icon-product MobileEditorProductDetails__menu-action-icon"></i>
         <span class="MobileEditorProductDetails__menu-action-label">
-          Product
+          Editor
         </span>
       </div>
       <div
@@ -60,7 +60,7 @@
             @click="hide"></i>
         </div>
         <div class="MobileEditorProductDetails__content custom-scrollbar-container">
-          <editor-product-details v-if="currentTab === 'details'" />
+          <editor-workspace v-if="currentTab === 'details'" />
           <editor-layers v-if="currentTab === 'layers'" />
         </div>
       </div>
@@ -71,19 +71,17 @@
 <script>
 import { createNamespacedHelpers } from 'vuex';
 import { EventBus } from '@lancom/shared/assets/js/utils/event-bus';
-import EditorProductDetails from '../editor_product_details/editor-product-details';
+import EditorWorkspace from '../editor_workspace/editor-workspace';
 import EditorLayers from '../editor_layers/editor-layers';
 
 const { mapMutations } = createNamespacedHelpers('product');
 
 export default {
   name: 'MobileEditorProductDetails',
-
   components: {
-    EditorProductDetails,
+    EditorWorkspace,
     EditorLayers
   },
-
   props: {
     addToCartDisabled: {
       type: Boolean,

package/components/order/order_product_prints_preview/order-product-prints-preview.scss

@@ -0,0 +1,9 @@
+.ProductPrintsPreview {
+  &__wrapper {
+    text-align: center;
+  }
+  &__preview {
+    height: 350px;
+    width: 350px;
+  }
+}

package/components/order/order_product_prints_preview/order-product-prints-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="ProductPrintsPreview__wrapper d-flex justify-content-center">
+    <div
+      v-for="(side, index) of sides"
+      :key="index">
+      <div class="ProductPrintsPreview__preview">
+        <product-side-with-print
+          :product="product"
+          :side="side"
+          size="medium" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProductSideWithPrint from '@lancom/shared/components/common/product_side_with_print/product-side-with-print';
+
+export default {
+  name: 'ProductPrintsPreview',
+  components: {
+    ProductSideWithPrint
+  },
+  props: {
+    order: {
+      type: Object,
+      required: true
+    },
+    product: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    sides() {
+      return Object.keys(this.product.printsThumbnails || {});
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'order-product-prints-preview.scss';
+</style>

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/order/order_view/order_product_color_simple_products/order-product-color-simple-products.mixin.js

@@ -17,6 +17,18 @@ export default {
     defaultPreview: {
       type: Boolean,
       default: true
+    },
+    withBigImage: {
+      type: Boolean,
+      default: false
+    },
+    withImage: {
+      type: Boolean,
+      default: true
+    },
+    withTotals: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.scss

@@ -8,17 +8,24 @@
       flex-direction: column; 
       align-items: center;
     }
+    &--column {
+      flex-direction: column;
+    }
   }
   &__image-wrapper {
     width: 70px;
+    margin-right: 20px;
     @media (max-width: $bp-extra-small-max) {
       width: 200px;
       margin-top: 20px;
     }
+    &--large {
+      width: 900px;
+      display: flex;
+    }
   }
   &__info {
     flex-grow: 1;
-    margin-left: 20px;
     @media (max-width: $bp-medium-max) {
       margin-left: 5px;
     }
@@ -35,6 +42,10 @@
       width: 200px;
       height: 200px;
     }
+    &--large {
+      width: 400px;
+      height: 400px;
+    }
   }
 
   &__features {

package/components/order/order_view/order_product_color_simple_products/order-product-color-simple-products.vue

@@ -1,8 +1,20 @@
 <template>
-  <div class="OrderProductColorSimpleProducts__wrapper">
-    <div class="OrderProductColorSimpleProducts__image-wrapper">
+  <div
+    class="OrderProductColorSimpleProducts__wrapper"
+    :class="{
+      'OrderProductColorSimpleProducts__wrapper--column': withBigImage
+    }">
+    <div
+      v-if="withImage"
+      class="OrderProductColorSimpleProducts__image-wrapper"
+      :class="{
+        'OrderProductColorSimpleProducts__image-wrapper--large': withBigImage
+      }">
       <div
         class="OrderProductColorSimpleProducts__image"
+        :class="{
+          'OrderProductColorSimpleProducts__image--large': withBigImage
+        }"
         @click="showImage(images, 0)">
         <product-side-with-print
           :product="group"
@@ -10,6 +22,19 @@
           side="front"
           size="medium" />
       </div>
+      <div
+        v-if="entity && entity.printsThumbnails && entity.printsThumbnails.back"
+        class="OrderProductColorSimpleProducts__image"
+        :class="{
+          'OrderProductColorSimpleProducts__image--large': withBigImage
+        }"
+        @click="showImage(images, 1)">
+        <product-side-with-print
+          :product="group"
+          :default-preview="defaultPreview"
+          side="back"
+          size="medium" />
+      </div>
     </div>
     <div class="OrderProductColorSimpleProducts__info">
       <div class="OrderProductColorSimpleProducts__features">
@@ -48,7 +73,9 @@
               {{ group.amount }}
             </div>
           </div>
-          <div class="OrderProductColorSimpleProducts__total mt-6">
+          <div
+            v-if="withTotals"
+            class="OrderProductColorSimpleProducts__total mt-6">
             <div class="lc_title-small">
               Total price:
             </div>

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

@@ -33,18 +33,23 @@
           :order="order"
           :entity="product"
           :group="group"
+          :with-image="withImage"
+          :with-big-image="withBigImage"
+          :with-totals="withTotals"
           :default-preview="groupedProducts.size === 1"
           class="OrderViewProduct__item" />
       </div>
       <div
-        v-if="hasPrints"
+        v-if="withPrints && hasPrints"
         class="OrderViewProduct__decorations">
         <order-product-prints
           :order="order"
           :entity="product"
           :responsive="responsive" />
       </div>
-      <div class="OrderViewProduct__subtotal lc_title">
+      <div
+        v-if="withTotals"
+        class="OrderViewProduct__subtotal lc_title">
         Subtotal: {{ totalPrice | price(order.currency) }}
       </div>
     </div>
@@ -87,6 +92,22 @@ export default {
     responsive: {
       type: Boolean,
       default: true
+    },
+    withImage: {
+      type: Boolean,
+      default: true
+    },
+    withBigImage: {
+      type: Boolean,
+      default: false
+    },
+    withPrints: {
+      type: Boolean,
+      default: true
+    },
+    withTotals: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

package/components/product/gallery/gallery.vue

@@ -148,8 +148,11 @@ export default {
     hasValidFilters() {
       return this.validFilters.length > 1;
     },
+    galleryImages() {
+      return this.images.filter(i => !(i.types || []).includes('designer'));
+    },
     validFilters() {
-      return this.filters.filter(filter => (this.images || []).some(i => this.isValidImageByFilter(filter, i)));
+      return this.filters.filter(filter => (this.galleryImages || []).some(i => this.isValidImageByFilter(filter, i)));
     },
     currentImage() {
       return this.filteredImages[this.activeIndex];
@@ -164,7 +167,7 @@ export default {
       return this.filteredImages.length > this.slidesPerRow;
     },
     filteredImages() {
-      const images = this.filterType ? this.images.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.images;
+      const images = this.filterType ? this.galleryImages.filter(i => this.isValidImageByFilter(this.filterType, i)) : this.galleryImages;
       return images.map(image => {
         const printType = this.product?.printTypes.find(({ _id }) => _id === image.printType);
         const printArea = printType?.printAreas.find(({ printSizes }) => (printSizes || []).some(({ _id }) => _id === image.printSize)) || printType?.printAreas[0] || { printCost: [] };

package/components/product/product_colors_selector/product-colors-selector.vue

@@ -62,7 +62,9 @@
               ref="colorsSelectorOptions"
               :display-products-count="true"
               class="ProductColorsSelector__section" />
-            <div class="ProductColorsSelector__toggle-gst">
+            <div
+              class="ProductColorsSelector__toggle-gst"
+              v-if="hasToggleGst">
               <checkbox
                 v-model="inclGST"
                 :dark="true"
@@ -112,6 +114,10 @@ export default {
     hasAnotherPrintBtn: {
       type: Boolean,
       default: true
+    },
+    hasToggleGst: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

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,