@lancom/shared 0.0.384 → 0.0.386

package/store/productsKit.js

@@ -0,0 +1,175 @@
+import api from '@lancom/shared/assets/js/api';
+import { getProductsForCalculatePricing } from '@lancom/shared/assets/js/utils/product';
+import { generateCartProducts } from '@lancom/shared/assets/js/utils/product';
+import { generateGUID } from '@lancom/shared/assets/js/utils/guid';
+import Vue from 'vue';
+
+export const state = () => ({
+  amount: 1,
+  productsKit: null,
+  loadError: null,
+  selectedOptionsProducts: {},
+  selectedOptionsSimpleProducts: {},
+  selectedOptionsColors: {},
+  selectedOptionsSizes: {},
+  calculatingPrice: false,
+  productsKitPricing: null
+});
+
+function getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes, optionId) {
+  const simpleProducts = Object
+    .keys(selectedOptionsSizes)
+    .filter(key => !optionId || key === optionId)
+    .map(key => {
+      const simpleProducts = selectedOptionsSimpleProducts[key] || [];
+      const color = selectedOptionsColors[key];
+      const size = selectedOptionsSizes[key];
+      return simpleProducts.find(sp => sp.color?._id === color?._id && sp.size?._id === size?._id)
+    })
+    .filter(sp => !!sp);
+  return simpleProducts;
+}
+
+export const getters = {
+  productsKit: ({ productsKit }) => productsKit,
+  loadError: ({ loadError }) => loadError,
+  amount: ({ amount }) => amount,
+  productsKitPricing: ({ productsKitPricing }) => productsKitPricing,
+  selectedOptionsProducts: ({ selectedOptionsProducts }) => selectedOptionsProducts,
+  selectedOptionsSimpleProducts: ({ selectedOptionsSimpleProducts }) => selectedOptionsSimpleProducts,
+  selectedOptionsColors: ({ selectedOptionsColors }) => selectedOptionsColors,
+  selectedOptionsSizes: ({ selectedOptionsSizes }) => selectedOptionsSizes,
+  isAllOptionsSelected: ({ productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
+    const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes);
+    return productsKit.options?.length === selectedSimpleProducts?.length;
+  },
+  selectedSimpleProducts: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes),
+  maxOrderQty: ({ selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
+    const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes);
+    const qtyStocks = selectedSimpleProducts
+      .map(sp => sp.quantityStock || 0)
+      .filter(qty => !!qty);
+    return qtyStocks.length ? Math.min(...qtyStocks) : 0;
+  },
+  cartEntities: ({ amount, productsKit, selectedOptionsProducts, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes }) => {
+    const productsKitGuid = generateGUID();
+    const entities = productsKit.options
+      .map(option => {
+        const product = selectedOptionsProducts[option._id];
+        if (product) {
+          const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes, option._id);
+          const simpleProducts = selectedSimpleProducts.map(sp => ({ ...sp, amount }));
+          const [entity] = generateCartProducts(product, simpleProducts, [], false, {}, null, productsKit);
+          entity.productsKitGuid = productsKitGuid;
+          entity.productsKit = productsKit._id;
+          return entity;
+        }
+      })
+      .filter(entity => !!entity);
+    return entities;
+  }
+};
+
+export const actions = {
+  async fetchProductsKit({ commit }, { shop, alias, country, currency }) {
+    try {
+      commit('setLoadError', null);
+      const query = { country, currency };
+      const productsKit = await api.fetchProductsKit(shop, alias, query);
+      commit('setProductsKit', productsKit);
+    } catch (e) {
+      const { status, data } = e?.response || {};
+      const statusCode = status || 500;
+      commit('setLoadError', {
+        statusCode,
+        message: data?.error || 'Products Kit not found',
+        redirectLink: data?.redirectLink || null
+      });
+    }
+  },
+  async selectOptionProduct({ commit }, { option, product, country, currency, stockCountry }) {
+    const params = { country, currency, stockCountry };
+    const simpleProducts = await api.fetchProductDetails(null, product.alias, params);
+
+    commit('setSelectedOptionProduct', { option, product });
+    commit('setSelectedOptionSimpleProducts', { option, simpleProducts });
+    commit('setSelectedOptionColor', { option, color: null });
+    commit('setSelectedOptionSize', { option, size: null });
+  },
+  selectOptionColor({ commit }, { option, color }) {
+    commit('setSelectedOptionColor', { option, color });
+  },
+  selectOptionSize({ commit }, { option, size }) {
+    commit('setSelectedOptionSize', { option, size });
+  },
+  clearOptions({ commit, state }) {
+    const { productsKit } = state;
+    productsKit.options?.forEach(option => {
+      commit('clearOption', option);
+    });
+  },
+  clearOption({ commit }, { option }) {
+    commit('clearOption', option);
+  },
+  clearProductsKitPricing({ commit }) {
+    commit('setProductsKitPricing', null);
+  },
+  async calculateProductsKitPrice({ state, commit }, { shop, country, currency }) {
+    commit('setCalculatingPrice', true);
+    const { amount, selectedOptionsProducts, productsKit, selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes } = state;
+    const entities = productsKit.options
+      .map(option => {
+        const product = selectedOptionsProducts[option._id];
+        if (product) {
+          const selectedSimpleProducts = getSelectedSimpleProducts(selectedOptionsSimpleProducts, selectedOptionsColors, selectedOptionsSizes, option._id);
+          const simpleProducts = selectedSimpleProducts.map(sp => ({ ...sp, amount }));
+          const [entity] = getProductsForCalculatePricing(product, simpleProducts);
+          return entity;
+        }
+      })
+      .filter(entity => !!entity);
+    const response = await api.calculateProductPrice({ entities, country: country?._id, currency: currency?._id }, shop._id);
+    commit('setProductsKitPricing', response);
+    commit('setCalculatingPrice', false);
+  },
+  updateAmount({ getters, commit }, amount) {
+    const value = Math.min(getters.maxOrderQty, Math.max(amount, 1));
+    commit('setAmount', value);
+  }
+};
+
+export const mutations = {
+  setProductsKit(state, productsKit) {
+    state.productsKit = productsKit;
+  },
+  clearOption(state, option) {
+    Vue.set(state.selectedOptionsProducts, option._id, null);
+    Vue.set(state.selectedOptionsColors, option._id, null);
+    Vue.set(state.selectedOptionsSizes, option._id, null);
+    Vue.set(state.selectedOptionsSimpleProducts, option._id, []);
+  },
+  setSelectedOptionProduct(state, { option, product }) {
+    Vue.set(state.selectedOptionsProducts, option._id, product);
+  },
+  setSelectedOptionColor(state, { option, color }) {
+    Vue.set(state.selectedOptionsColors, option._id, color);
+  },
+  setSelectedOptionSize(state, { option, size }) {
+    Vue.set(state.selectedOptionsSizes, option._id, size);
+  },
+  setSelectedOptionSimpleProducts(state, { option, simpleProducts }) {
+    Vue.set(state.selectedOptionsSimpleProducts, option._id, simpleProducts);
+  },
+  setLoadError(state, error) {
+    state.loadError = error;
+  },
+  setProductsKitPricing(state, price) {
+    state.productsKitPricing = price;
+  },
+  setCalculatingPrice(state, calculatingPrice) {
+    state.calculatingPrice = calculatingPrice;
+  },
+  setAmount(state, amount) {
+    state.amount = amount;
+  }
+};