@lancom/shared 0.0.62 → 0.0.66

package/store/product.js

@@ -0,0 +1,373 @@
+import Vue from 'vue';
+import debounce from 'lodash.debounce';
+import api from '@lancom/shared/assets/js/api';
+import { getLayerModel } from '@lancom/shared/assets/js/models/product-layers';
+import { getPrintAreaByName, getProductPrintsAreasPrices } from '@lancom/shared/assets/js/models/print-area';
+import { sortSizes } from '@lancom/shared/assets/js/utils/sizes';
+import { isValidImageTypes, getColorOfDefaultCatalogFrontImage } from '@lancom/shared/assets/js/utils/colors';
+import { getProductsForCalculatePricing } from '../assets/js/utils/product';
+import { sortByName } from '../assets/js/utils/filters';
+
+export const state = () => ({
+  product: null,
+  loadError: null,
+  productDetails: null,
+  editorSize: {
+    width: 500,
+    height: 500
+  },
+  template: {
+    visibleSteps: false,
+    layers: [],
+    colors: [],
+    simpleProducts: []
+  },
+  availableColors: [],
+  availableSizes: [],
+  availablePrintTypes: null,
+  isPrintPricing: false,
+  editableColor: null,
+  selectedLayer: null,
+  editablePrintArea: null,
+  selectedPrintType: null,
+  selectedPrintUnderbase: false,
+  editModeSelectedLayer: false,
+  selectedPrintAreas: {},
+  productPricing: null,
+  selectedTab: null,
+  layersUpdatesCount: 0
+});
+
+export const getters = {
+  product: ({ product }) => product,
+  loadError: ({ loadError }) => loadError,
+  productDetails: ({ productDetails }) => productDetails,
+  productDetailsLoaded: ({ productDetails }) => !!productDetails,
+  editorSize: ({ editorSize }) => editorSize,
+  template: ({ template }) => template,
+  layers: ({ template }) => template.layers || [],
+  templateColors: ({ template }) => template.colors || [],
+  hasLayers: ({ template }) => (template.layers || []).length > 0,
+  visibleSteps: ({ template }) => template.visibleSteps,
+  simpleProducts: ({ template }) => template.simpleProducts || [],
+  usedSimpleProducts: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0),
+  usedSimpleProductsQuantity: ({ template }) => (template.simpleProducts || []).filter(p => p.amount > 0).reduce((sum, { amount }) => sum + amount, 0),
+  defaultSimpleProduct: ({ productDetails, editableColor }) => {
+    return editableColor && productDetails.simpleProducts.find(({ color, size }) => color._id === editableColor._id && size.alias === 'small');
+  },
+  availableColors: ({ availableColors }) => availableColors,
+  availableSizes: ({ availableSizes }) => availableSizes,
+  editableColor: ({ editableColor }) => editableColor,
+  editableLayers: ({ template, editableColor, editablePrintArea }) => template.layers
+    .filter(({ printArea }) => (
+      // colorId === editableColor._id &&
+      printArea === editablePrintArea.id
+    )),
+  selectedLayer: ({ selectedLayer }) => selectedLayer,
+  editModeSelectedLayer: ({ editModeSelectedLayer }) => editModeSelectedLayer,
+  selectedPrintAreas: ({ selectedPrintAreas }) => selectedPrintAreas,
+  selectedPrintArea: ({ selectedPrintAreas, editablePrintArea }) =>
+    (!!editablePrintArea && selectedPrintAreas[editablePrintArea._id]),
+  productPricing: ({ productPricing }) => productPricing,
+  mainProductPricing: ({ productPricing, product }) => (productPricing?.products || {})[product._id],
+  selectedColors: ({ template: { colors = [] }, availableColors }) => {
+    const mapColors = availableColors.reduce((map, color) => {
+      map.set(color._id, color);
+      return map;
+    }, new Map());
+    return colors.map(colorId => mapColors.get(colorId));
+  },
+  selectedTab: ({ selectedTab }) => selectedTab,
+  layersUpdatesCount: ({ layersUpdatesCount }) => layersUpdatesCount,
+  printArea: ({ editablePrintArea, selectedPrintAreas, editorSize: { width, height }, product }) => {
+    const selectedPrintArea = (!!editablePrintArea && selectedPrintAreas[editablePrintArea._id]);
+    return getPrintAreaByName({
+      name: selectedPrintArea,
+      editorWidth: width,
+      editorHeight: height
+    }, product);
+  },
+  printsPricing: ({ product }) => getProductPrintsAreasPrices(product),
+  editablePrintArea: ({ editablePrintArea }) => editablePrintArea,
+  selectedPrintType: ({ selectedPrintType }) => selectedPrintType,
+  selectedPrintUnderbase: ({ selectedPrintUnderbase }) => selectedPrintUnderbase,
+  availablePrintTypes: ({ availablePrintTypes }) => availablePrintTypes,
+  isPrintPricing: ({ isPrintPricing }) => isPrintPricing,
+  minimumOrderQuantity: ({ product, template }) => {
+    const layersPrintTypes = (template.layers || []).map(({ printType }) => printType);
+    const printTypesMinQuantity = (product.printTypes || [])
+      .filter(printType => layersPrintTypes.includes(printType._id))
+      .map(printType => printType.minQuantity);
+    return Math.max(
+      product.minimumOrderQuantity,
+      ...printTypesMinQuantity
+    );
+  },
+  images: ({ product }) => {
+    const imagesGroups = new Map();
+    (product.images || [])
+      .filter(i => isValidImageTypes(i, ['front', 'back', 'model']))
+      .forEach(i => {
+        imagesGroups.set(i.color, [...(imagesGroups.get(i.color) || []), i]);
+      });
+    return [...imagesGroups.values()].reduce((images, group) => [...images, ...group], []);
+  }
+};
+
+export const actions = {
+  async fetchProduct({ commit }, { shop, slug }) {
+    try {
+      commit('setLoadError', null);
+      const response = await api.fetchProduct(shop, slug);
+      commit('setProduct', response);
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      commit('setLoadError', {
+        statusCode,
+        message: data?.error || 'Product not found'
+      });
+    }
+  },
+  async fetchProductDetails({ commit, state }, { shop, slug, defaultColor = 'white' }) {
+    const response = await api.fetchProductDetails(shop, slug);
+    commit('setProductDetails', response);
+
+    const catalogFrontColorId = getColorOfDefaultCatalogFrontImage(state.product);
+    const editableColor = state.availableColors.find(c => c.alias === defaultColor) ||
+      state.availableColors.find(c => c._id === catalogFrontColorId) ||
+      state.availableColors[0];
+    commit('setEditableColor', editableColor);
+  },
+  async fetchPrintTypes({ commit }, { shop }) {
+    const response = await api.fetchPrintTypes(shop);
+    commit('setPrintTypes', response);
+  },
+  async calculateProductPrice({ state: { template, product, isPrintPricing }, commit, getters }, shop) {
+    const entities = getProductsForCalculatePricing(product, getters.usedSimpleProducts, template.layers, isPrintPricing, true);
+    const response = await api.calculateProductPrice({ entities }, shop._id);
+    commit('setProductPricing', response);
+  },
+  async createLayer(
+    {
+      state: { editableColor, editablePrintArea, selectedPrintType },
+      commit,
+      getters
+    },
+    {
+      type,
+      url,
+      preselect = true,
+      isEditMode,
+      size,
+      properties
+    }
+  ) {
+    const { center: { top, left } } = getters.printArea;
+    const { selectedPrintArea } = getters;
+    const layer = await getLayerModel({
+      type,
+      colorId: editableColor._id,
+      top,
+      left,
+      isEditMode,
+      url,
+      originalSize: size,
+      properties: {
+        ...(properties || {}),
+        printArea: editablePrintArea._id,
+        printSize: selectedPrintArea._id,
+        printType: selectedPrintType._id
+      }
+    });
+    if (preselect) {
+      commit('setSelectedLayer', layer);
+    }
+    commit('addTemplateLayer', layer);
+    return layer;
+  },
+  increaseLayersUpdatesCount: debounce(({ commit }) => commit('increaseLayersUpdatesCount'), 1000),
+  selectColor({ commit, getters }, color) {
+    const selectedColors = getters.templateColors;
+    const colorSelected = selectedColors.includes(color);
+    if (colorSelected && selectedColors.length > 1) {
+      // this.removeTemplateColor(_id);
+    } else if (!colorSelected) {
+      commit('addTemplateColor', color);
+    }
+    const lastSelectedColorId = colorSelected ? color : getters.templateColors[0];
+    if (lastSelectedColorId) {
+      commit('setEditableColor', getters.availableColors.find(({ _id }) => lastSelectedColorId === _id));
+    }
+  }
+};
+
+export const mutations = {
+  setProduct(state, product) {
+    state.product = product;
+  },
+  setLoadError(state, error) {
+    state.loadError = error;
+  },
+  setProductDetails(state, simpleProducts) {
+    state.productDetails = { simpleProducts };
+    const availableSizes = [];
+    const sizesPerColor = simpleProducts.reduce((map, { color, size }) => {
+      if (!map[color.alias]) {
+        map[color.alias] = [size];
+      } else {
+        map[color.alias].push(size);
+      }
+      if (!availableSizes.find(({ _id }) => _id === size._id)) {
+        availableSizes.push(size);
+      }
+      return map;
+    }, {});
+    state.availableSizes = sortSizes(availableSizes);
+    const map = new Map();
+    const availableColors = [];
+    for (const color of simpleProducts.map(({ color }) => color)) {
+      if (!map.has(color._id) && sizesPerColor[color.alias]) {
+        map.set(color._id, true);
+        availableColors.push({ ...color, sizes: sizesPerColor[color.alias] });
+      }
+    }
+    state.availableColors = sortByName(availableColors);
+  },
+  clearProduct(state) {
+    state.product = null;
+    state.productDetails = null;
+    state.template = { layers: [], colors: [], simpleProducts: [], visibleSteps: false };
+    state.availableColors = [];
+    state.availablePrintTypes = null;
+    state.availableSizes = [];
+    state.editableColor = null;
+    state.selectedLayer = null;
+    state.editModeSelectedLayer = false;
+    state.selectedPrintAreas = {};
+    state.selectedPrintType = null;
+    state.editablePrintArea = null;
+    state.productPricing = null;
+    state.layersUpdatesCount = 0;
+  },
+  clearTemplate(state, keepLayers) {
+    const { _id: whiteColorId } = state.availableColors.find(color => color.alias === 'white') || {};
+    const colorId = whiteColorId || state.template.colors[0];
+    state.template = {
+      layers: keepLayers ? state.template.layers : [],
+      colors: [colorId],
+      simpleProducts: getSimpleProductsByColor(state, colorId)
+    };
+    state.editableColor = state.availableColors.find(color => color._id === colorId);
+  },
+  /*
+  ** MANAGE LAYERS
+  */
+  setSelectedLayer(state, layer) {
+    state.selectedLayer = layer;
+  },
+  setEditModeSelectedLayer(state, editMode) {
+    state.editModeSelectedLayer = editMode;
+  },
+  setSelectedPrintArea(state, { printArea, size }) {
+    state.selectedPrintAreas = {
+      ...state.selectedPrintAreas,
+      [printArea]: size
+    };
+  },
+  setSelectedLayerField(state, { field, value }) {
+    if (state.selectedLayer) {
+      Vue.set(state.selectedLayer, field, value);
+      Vue.set(state.selectedLayer, 'modifiedAt', Date.now());
+    }
+  },
+  addTemplateLayer(state, layer) {
+    const layers = [
+      ...(state.template.layers || []).filter(l => l.guid !== layer.guid),
+      layer
+    ];
+    Vue.set(state.template, 'layers', layers);
+  },
+  removeTemplateLayer(state, layer) {
+    const index = state.template.layers.findIndex(({ createdAt }) => createdAt === layer.createdAt);
+    Vue.delete(state.template.layers, index);
+    if (state.selectedLayer && state.selectedLayer.createdAt === layer.createdAt) {
+      state.selectedLayer = null;
+    }
+  },
+  updateTemplateLayer(state, layer) {
+    const index = state.template.layers.findIndex(({ createdAt, _id }) => createdAt === layer.createdAt || (_id && _id === layer._id));
+    Vue.set(state.template.layers, index, layer);
+  },
+  increaseLayersUpdatesCount(state) {
+    state.layersUpdatesCount++;
+  },
+  /*
+  ** MANAGE COLORS
+  */
+  setEditableColor(state, color) {
+    state.editableColor = color;
+  },
+  addTemplateColor(state, colorId) {
+    const hasSimpleProducts = color => !!(state.template.simpleProducts || []).find(product => product.color._id === color && product.amount > 0);
+    state.template.colors = state.template.colors.filter(color => hasSimpleProducts(color));
+    state.template.colors.unshift(colorId);
+
+    const simpleProducts = [
+      ...(state.template.simpleProducts || []).filter(p => state.template.colors.includes(p.color._id)),
+      ...getSimpleProductsByColor(state, colorId)
+    ];
+    Vue.set(state.template, 'simpleProducts', simpleProducts);
+  },
+  removeTemplateColor(state, colorId) {
+    const colors = state.template.colors.filter(id => id !== colorId);
+    Vue.set(state.template, 'colors', colors);
+
+    const simpleProducts = state.template.simpleProducts.filter(product => product.color._id !== colorId);
+    Vue.set(state.template, 'simpleProducts', simpleProducts);
+  },
+  /*
+  ** OTHER
+  */
+  setSimpleProductAmount(state, { colorId, sizeId, amount = 0 }) {
+    const index = state.template.simpleProducts.findIndex(
+      ({ color, size }) => color._id === colorId && size._id === sizeId
+    );
+    if (~index) {
+      const simpleProduct = state.template.simpleProducts[index];
+      Vue.set(simpleProduct, 'amount', amount);
+      Vue.set(state.template.simpleProducts, index, simpleProduct);
+    }
+  },
+  setProductPricing(state, price) {
+    state.productPricing = price;
+  },
+  setSelectedTab(state, tab) {
+    state.selectedTab = tab;
+  },
+  setEditablePrintArea(state, printArea) {
+    state.editablePrintArea = printArea;
+  },
+  setSelectedPrintType(state, printType) {
+    state.selectedPrintType = printType;
+  },
+  setSelectedPrintUnderbase(state, printUnderbase) {
+    state.selectedPrintUnderbase = printUnderbase;
+  },
+  setAvailablePrintTypes(state, availablePrintTypes) {
+    state.availablePrintTypes = availablePrintTypes;
+  },
+  setIsPrintPricing(state, isPrintPricing) {
+    state.isPrintPricing = isPrintPricing;
+  },
+  setVisibleSteps(state, visibleSteps) {
+    state.template.visibleSteps = visibleSteps;
+  }
+};
+
+// Helpers
+function getSimpleProductsByColor(state, colorId) {
+  return (state.productDetails?.simpleProducts || [])
+    .filter(product => product.color._id === colorId)
+    .map(product => ({ ...product }));
+}

package/store/products.js

@@ -0,0 +1,91 @@
+import api from '@lancom/shared/assets/js/api';
+
+export const state = () => ({
+  products: null,
+  page: 1,
+  count: 500,
+  perPage: 2,
+  types: [],
+  colors: [],
+  brands: [],
+  tags: [],
+  attributes: [],
+  loadError: null
+});
+
+export const getters = {
+  products: ({ products }) => products,
+  types: ({ types }) => types || [],
+  colors: ({ colors }) => colors || [],
+  brands: ({ brands }) => brands || [],
+  tags: ({ tags }) => tags || [],
+  attributes: ({ attributes }) => attributes || [],
+  page: ({ page }) => page,
+  count: ({ count }) => count,
+  perPage: ({ perPage }) => perPage,
+  loadError: ({ loadError }) => loadError
+};
+
+export const actions = {
+  async fetchProducts({ commit }, { shop, params }) {
+    try {
+      commit('setLoadError', null);
+      const {
+        products, count, page, perPage, productTypes, colors, brands, tags, attributes
+      } = await api.fetchProducts(shop, params);
+      commit('setProducts', products);
+      commit('setPage', page);
+      commit('setCount', count);
+      commit('setPerPage', perPage);
+      commit('setTypes', productTypes);
+      commit('setColors', colors);
+      commit('setBrands', brands);
+      commit('setTags', tags);
+      commit('setAttributes', attributes);
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      commit('setLoadError', {
+        statusCode,
+        error: data?.error || 'Post not found'
+      });
+      throw e;
+    }
+  }
+};
+
+export const mutations = {
+  setProducts(state, products) {
+    state.products = products;
+  },
+  setPage(state, page) {
+    state.page = page;
+  },
+  setCount(state, count) {
+    state.count = count;
+  },
+  setPerPage(state, perPage) {
+    state.perPage = perPage;
+  },
+  setTypes(state, types) {
+    state.types = types;
+  },
+  setColors(state, colors) {
+    state.colors = colors;
+  },
+  setBrands(state, brands) {
+    state.brands = brands;
+  },
+  setTags(state, tags) {
+    state.tags = tags;
+  },
+  setAttributes(state, attributes) {
+    state.attributes = attributes;
+  },
+  clearProducts(state) {
+    state.products = [];
+  },
+  setLoadError(state, error) {
+    state.loadError = error;
+  }
+};

package/store/quote.js

@@ -0,0 +1,72 @@
+import api from '@lancom/shared/assets/js/api';
+import { isExpiredQuote, getViewedOptions } from '@lancom/shared/assets/js/utils/quote';
+
+export const state = () => ({
+  quote: null,
+  option: null,
+  selectedOption: null,
+  viewedOptions: null
+});
+
+export const getters = {
+  quote: ({ quote }) => quote,
+  viewedOptions: ({ viewedOptions }) => viewedOptions,
+  viewedOptionsMap: ({ viewedOptions }) => viewedOptions?.reduce((data, option) => ({ ...data, [option]: true }), {}),
+  option: ({ option }) => option,
+  selectedOption: ({ selectedOption }) => selectedOption,
+  proceedOption: ({ option, selectedOption }) => option || selectedOption,
+  hasProceedOption: (state, { proceedOption }) => !!proceedOption,
+  options: ({ option, quote }) => (option ? quote.options.filter(o => o._id === option) : quote.options) || [],
+  quoteId: ({ quote }) => `${quote.code}`.replace('QUOTE', ''),
+  shopContacts: ({ quote }) => quote.shop.settings?.contacts || {},
+  depositInfo: ({ quote }) => quote.shop.settings?.depositInfo || {},
+  quoteAddress: ({ quote }) => [
+    quote.address.addressLine1,
+    quote.address.addressLine2,
+    quote.address.city,
+    quote.address.postcode,
+    quote.address.state,
+    quote.address.country
+  ].filter(i => !!i).join(', '),
+  gstTax: ({ quote }) => quote.shop.settings?.pricing?.gstTax || 0,
+  isExpiredQuote: ({ quote }) => isExpiredQuote(quote)
+};
+
+export const actions = {
+  async fetchQuote({ commit }, { id, shop, option }) {
+    const playload = {
+      populatePrints: true,
+      populateShop: true,
+      populateColors: true
+    };
+    const quote = await api.fetchQuoteById(id, playload);
+    commit('setQuote', quote);
+    commit('setOption', option);
+    commit('viewedOptions', null);
+  },
+  fetchViewedOptions({ commit }, { quote }) {
+    const options = getViewedOptions(quote) || [];
+    commit('setViewedOptions', options);
+  },
+  selectOption({ commit }, { option }) {
+    commit('setSelectedOption', option);
+  },
+  clear({ commit }) {
+    commit('setSelectedOption', null);
+  }
+};
+
+export const mutations = {
+  setQuote(state, quote) {
+    state.quote = quote;
+  },
+  setOption(state, option) {
+    state.option = option;
+  },
+  setSelectedOption(state, option) {
+    state.selectedOption = option;
+  },
+  setViewedOptions(state, options) {
+    state.viewedOptions = options;
+  }
+};

package/lib/module.js

@@ -1,57 +0,0 @@
-import * as convert from "xml-js";
-
-const defaults = {
-  path: '/feed.xml',
-  async get () {}
-}
-
-module.exports = async function (moduleOptions) {
-  const options = [
-    ...await parseOptions(this.options.feed),
-    ...await parseOptions(moduleOptions)
-  ].map(o => ({ ...defaults, ...o }))
-
-  options.forEach((feedOptions, index) => {
-    this.addServerMiddleware({
-      path: feedOptions.path,
-      async handler (req, res, next) {
-        try {
-          const data = await feedOptions.get() || {};
-          const xml = convert.js2xml(data, { compact: true, ignoreComment: true, spaces: 4 })
-          res.setHeader('Content-Type', 'application/rss+xml')
-          res.end(xml)
-        } catch (err) {
-          next(err)
-        }
-      }
-    })
-  })
-}
-
-async function parseOptions (options) {
-  // Factory function
-  if (typeof options === 'function') {
-    options = await options()
-  }
-
-  // Factory object
-  if (!Array.isArray(options)) {
-    if (options.factory) {
-      options = await options.factory(options.data)
-    }
-  }
-
-  // Check if is empty
-  if (Object.keys(options).length === 0) {
-    return []
-  }
-
-  // Single feed
-  if (!Array.isArray(options)) {
-    options = [options]
-  }
-
-  return options
-}
-
-module.exports.meta = require('../package.json')