@lancom/shared 0.0.467 → 0.0.469

package/assets/js/api/admin.js

@@ -152,8 +152,8 @@ export default {
   returnShipments(body) {
     return _post('admin/shipments/return', body);
   },
-  markShipmentAsDispatched(order, shipment) {
-    return _post(`admin/shop/${order.shop?._id || order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/dispatched`, shipment);
+  markShipmentAsDispatched(order, shipment, options) {
+    return _post(`admin/shop/${order.shop?._id || order.shop}/order/${order._id}/shipment/${shipment._id || shipment.guid}/dispatched`, { ...shipment, ...(options || {}) });
   },
   markLabelsPrinted(order) {
     return _post(`admin/order/${order._id}/mark-labels-printed`);

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

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

package/assets/js/utils/fabric/object-factory.js

@@ -20,7 +20,7 @@ export function createText(layer) {
     .then(() => {
       const params = { ...layer, layer };
       delete params.copy;
-      const copy = layer.copy.length ? layer.copy : '';
+      const copy = layer.copy?.length ? layer.copy : '';
       if (!layer.enableOutline) {
         params.strokeWidth = 0;
       }

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

@@ -201,7 +201,7 @@ export default class FabricHelper {
     });
   }
 
-  createObject({ layer, active }) {
+  createObject({ layer, active, selectable = true }) {
     const initial = !layer.modifiedAt;
     return new Promise(resolve => {
       const methods = {
@@ -211,6 +211,16 @@ export default class FabricHelper {
       this[methods[layer.type]]({ layer, initial }).then(obj => {
         // obj.clipPath = this.boundingBox;
         // console.log('obj: ', obj.top, obj.left);
+        if (!selectable) {
+          obj.set({
+            selectable: false,
+            evented: false,
+            hasControls: false,
+            hasBorders: false,
+            lockMovementX: true,
+            lockMovementY: true
+          });
+        }
         this.handleListeners(obj, layer.type);
         this.editor.add(obj);
         if (active) {

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

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

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

@@ -30,6 +30,7 @@
                   ref="editor"
                   :key="side"
                   :is-edit-mode="isEditMode"
+                  :is-selectable="isSelectable"
                   :side="side"
                   :print-area="editablePrintArea"
                   :zoom-size="sideZoomSize"
@@ -160,6 +161,10 @@ export default {
     isEditMode: {
       type: Boolean,
       default: true
+    },
+    isSelectable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

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

@@ -171,6 +171,10 @@ export default {
     isEditMode: {
       type: Boolean,
       default: true
+    },
+    isSelectable: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -435,7 +439,8 @@ export default {
       for (const layer of this.sideEditableLayers) {
         const params = {
           layer,
-          active: this.isLayerSelected(layer)
+          active: this.isLayerSelected(layer),
+          selectable: this.isSelectable
         };
         await this.fabricHelper.createObject(params);
       }
@@ -493,9 +498,10 @@ export default {
         });
       }
     },
-    async handleUploaded({ url, size, fileName }) {
+    async handleUploaded(file) {
       window.scrollTo(0, 0);
-      await this.createLayer({ type: 'art', url, size, fileName });
+      const { url, size, fileName } = file;
+      await this.createLayer({ type: 'art', url, size, fileName, file });
       this.visibleWireframe = true;
     },
     setOffsetWarningVisibility(visible) {

package/components/product/related_products/related-products.vue

@@ -7,6 +7,7 @@
     </div>
     <product-list
       :products="products"
+      :visible-quick-view="false"
       :lazy="false" />
   </div>
 </template>

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

@@ -4,8 +4,8 @@
     font-weight: 800;
     font-size: 28px;
     line-height: 38px;
-    color: $black;  
-    margin-bottom: 26px; 
+    color: $black;
+    margin-bottom: 26px;
   }
   &__types {
     display: flex;
@@ -135,4 +135,4 @@
       outline: none;
     }
   }
-}
+}

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

@@ -6,12 +6,19 @@
         :class="{
           'WizardTextOrLogoForm__type--selected': layerType === 'text'
         }"
+        style="width: 45%"
         @click="selectLayerType('text')">
         <div class="WizardTextOrLogoForm__type-name">
           Add text
         </div>
         <div class="WizardTextOrLogoForm__type-input">
+          <wizard-print-template-select
+            v-if="hasPrintTemplateOptions"
+            v-model="layer.printTemplate"
+            :options="layer.printTemplates"
+            @input="onPrintTemplateChange" />
           <input
+            v-else
             v-model="layer.copy"
             placeholder="Enter your text"
             type="text"
@@ -83,6 +90,7 @@
           </a>
         </div>
       </div>
+
     </div>
     <div class="WizardTextOrLogoForm__description">
       <textarea
@@ -95,13 +103,18 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapMutations } from 'vuex';
+import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { fitLayerToEditorSize } from '@lancom/shared/assets/js/utils/layers';
+import { getPrintAreaByName } from '@lancom/shared/assets/js/models/print-area';
 import FileUploader from '@lancom/shared/components/common/file_uploader';
+import WizardPrintTemplateSelect from './wizard_print_template_select/wizard-print-template-select';
 
 export default {
   name: 'WizardTextOrLogoForm',
   components: {
-    FileUploader
+    FileUploader,
+    WizardPrintTemplateSelect
   },
   props: {
     layer: {
@@ -117,9 +130,52 @@ export default {
   },
   computed: {
     ...mapGetters(['shop']),
-    ...mapGetters('product', ['product'])
+    ...mapGetters('product', ['product', 'editorSize', 'editableColor']),
+    hasPrintTemplateOptions() {
+      return (this.layer.printTemplates || []).length > 1;
+    }
   },
   methods: {
+    ...mapMutations('product', ['addTemplateLayer', 'removeTemplateLayer']),
+    async onPrintTemplateChange(template) {
+      if (!template) return;
+
+      this.removeTemplateLayer(this.layer);
+
+      const layers = template.layers || [{ type: 'text' }];
+      for (const templateLayer of layers) {
+        const properties = {
+          ...templateLayer,
+          printArea: this.layer.printArea,
+          printSize: this.layer.printSize,
+          printType: this.layer.printType,
+          printTemplates: this.layer.printTemplates,
+          printTemplate: template,
+          copy: templateLayer.copy || templateLayer.text || '',
+          required: true
+        };
+        delete properties.guid;
+
+        const printArea = getPrintAreaByName({
+          printArea: this.layer.printArea,
+          printSize: this.layer.printSize,
+          editorWidth: this.editorSize.width,
+          editorHeight: this.editorSize.height
+        }, this.product, true);
+        fitLayerToEditorSize(properties, template, printArea);
+        properties.sideId = printArea?.sideId;
+
+        const data = {
+          colorId: this.editableColor._id,
+          type: templateLayer.type || 'text',
+          sideId: properties.sideId || 'front',
+          properties
+        };
+        const model = await getLayerModel(data);
+        model.createdAt = Date.now();
+        this.addTemplateLayer(model);
+      }
+    },
     selectLayerType(type) {
       if (this.layerType !== type) {
         this.layerType = type;

package/components/product/wizard/wizard_print_text_or_logo/wizard_text_or_logo_form/wizard_print_template_select/wizard-print-template-select.vue

@@ -0,0 +1,33 @@
+<template>
+  <multiselect
+    class="WizardPrintTemplateSelect"
+    :value="value"
+    :options="options"
+    label="name"
+    track-by="_id"
+    :searchable="false"
+    :show-labels="false"
+    placeholder="Select template"
+    @input="$emit('input', $event)" />
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+
+export default {
+  name: 'WizardPrintTemplateSelect',
+  components: {
+    Multiselect
+  },
+  props: {
+    value: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  }
+};
+</script>

package/mixins/product-view.js

@@ -153,12 +153,16 @@ export default (IS_PRODUCT_PRESET_PRINT_PRICING, isEditor = false) => ({
       if (this.preSetPrints?.length) {
         for (const preSetPrint of this.preSetPrints) {
           const layers = preSetPrint.printTemplate?.layers || [{ type: 'text' }];
+          const printTemplates = [preSetPrint.printTemplate, ...(preSetPrint.additionalPrintTemplates || [])]
           for (const layer of layers) {
             const properties = {
               ...layer,
               printArea: preSetPrint.printArea,
               printSize: preSetPrint.printSize,
               printType: preSetPrint.printType,
+              printTemplates,
+              printTemplate: preSetPrint.printTemplate,
+              minimumOrderQuantity: preSetPrint.minimumOrderQuantity,
               required: true
             };
             delete properties.guid;

package/package.json

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

package/store/cart.js

@@ -65,12 +65,13 @@ const getInvalidStockQuantities = entities => {
 };
 
 const getPrintsQuantities = entities => {
-  const printTypes = entities.reduce((types, e) => [...types, ...e.prints.map(({ printType }) => ({ ...printType, guid: `${e.guid}-${printType?._id}` }))], []);
+  const printTypes = entities.reduce((types, e) => [...types, ...e.prints.map(({ printType, layers }) => ({ ...printType, layers, guid: `${e.guid}-${printType?._id}` }))], []);
   const grouped = groupBy(printTypes, 'guid');
   const quantities = Object.keys(grouped).map(guid => {
-    const [{ name, minQuantity }] = grouped[guid];
+    const [{ name, minQuantity, layers }] = grouped[guid];
     const printTypeEntities = entities.filter(e => (e.prints || []).some(({ printType }) => `${e.guid}-${printType?._id}` === guid));
-    return { name, minQuantity, quantity: getEntitiesQuantity(printTypeEntities) };
+    const layersMinOrderQty = Math.max(0, ...(layers?.map(l => l?.params?.minimumOrderQuantity || 0) || []));
+    return { name, minQuantity: layersMinOrderQty || minQuantity, quantity: getEntitiesQuantity(printTypeEntities), layers };
   });
   return quantities;
 };
@@ -147,7 +148,10 @@ export const getters = {
     return (quantities?.stock || []).filter(({ maxQuantity, quantity }) => quantity > maxQuantity);
   },
   notValidPrintsQuantities(state, { quantities }) {
-    return (quantities?.prints || []).filter(({ minQuantity, quantity }) => quantity < minQuantity);
+    return (quantities?.prints || []).filter(({ minQuantity, quantity, layers }) => {
+      const printMinQty = quantity || 0;
+      return printMinQty < minQuantity;
+    });
   },
   cartPricingError: ({ cartPricingError }) => cartPricingError
 };

package/store/product.js

@@ -17,7 +17,7 @@ export const state = () => ({
   loadingProductDetails: false,
   productDetailsKey: Date.now(),
   images: [],
-  priceIncludeGST: true,
+  priceIncludeGST: false,
   product: null,
   preSetPrints: null,
   loadError: null,
@@ -117,7 +117,7 @@ export const getters = {
   editModeSelectedLayer: ({ editModeSelectedLayer }) => editModeSelectedLayer,
   selectedPrintAreas: ({ selectedPrintAreas }) => selectedPrintAreas,
   selectedPrintArea: ({ selectedPrintAreas, editablePrintArea }) =>
-    (!!editablePrintArea && selectedPrintAreas[editablePrintArea._id]),
+    (editablePrintArea ? selectedPrintAreas[editablePrintArea._id] : null),
   productPricing: ({ productPricing }) => productPricing,
   mainProductPricing: ({ productPricing, product }) => (productPricing?.products || {})[product._id],
   selectedColors: ({ template: { colors = [] }, availableColors }) => {
@@ -148,13 +148,16 @@ export const getters = {
   availablePrintTypes: ({ availablePrintTypes }) => availablePrintTypes,
   isPrintPricing: ({ isPrintPricing }) => isPrintPricing,
   minimumOrderQuantity: ({ product, template }) => {
-    const layersPrintTypes = (template.layers || []).map(({ printType }) => printType);
+    const layersPrintTypes = (template.layers || []).map(({ printType, minimumOrderQuantity }) => minimumOrderQuantity > 0 ? null : printType);
     const printTypesMinQuantity = (product.printTypes || [])
       .filter(printType => layersPrintTypes.includes(printType._id || printType))
       .map(printType => printType.minQuantity);
+    const layersWithTemplate = (template.layers || []).map(({ minimumOrderQuantity }) => minimumOrderQuantity).filter(mo => mo > 0);
+
     return Math.max(
-      layersPrintTypes?.length > 0 ? product.minimumPrintOrderQuantity : product.minimumOrderQuantity,
-      ...printTypesMinQuantity
+      template.layers?.length > 0 ? product.minimumPrintOrderQuantity : product.minimumOrderQuantity,
+      ...printTypesMinQuantity,
+      ...layersWithTemplate
     );
   },
   images: ({ images, product }) => {
@@ -332,6 +335,7 @@ export const actions = {
       preselect = true,
       isEditMode,
       size,
+      file,
       properties,
       fileName
     }
@@ -344,6 +348,7 @@ export const actions = {
       left,
       isEditMode,
       fileName,
+      file,
       url,
       originalSize: size,
       sideId: getters.editableSide?.id,
@@ -410,8 +415,8 @@ export const mutations = {
   },
   setProductDetails(state, simpleProducts) {
     const { preSetPrints } = state;
-    const [preSetPrint] = preSetPrints || [];
-    simpleProducts = simpleProducts.filter(sp => !preSetPrint || (preSetPrint.colors || []).includes(sp.color._id));
+    const allPreSetColors = (preSetPrints || []).reduce((colors, print) => [...colors, ...(print.colors || [])], []);
+    simpleProducts = simpleProducts.filter(sp => !allPreSetColors.length || allPreSetColors.includes(sp.color._id));
     state.productDetails = { simpleProducts };
     const availableSizes = [];
     const sizesPerColor = simpleProducts.reduce((map, { color, size }) => {