@orderingstack/front-components-product-configurator 1.4.2-beta.2 → 1.4.2-beta.21

package/dist/index.es.js

@@ -6686,6 +6686,7 @@ function useProductConfigurator(product) {
   return {
     encodedProduct,
     initSelected,
+    initFilter,
     filter,
     setCurrency,
     setIsOnSubmittedOnTrue,
@@ -6851,16 +6852,25 @@ var ENotificationType;
   ENotificationType2["ORDER_UPSELL"] = "OrderUpsell";
 })(ENotificationType || (ENotificationType = {}));
 const validateProductFilter = (product, stateFilter) => {
+  var _a;
   const { filter: productFilters = {}, fltCtx = "" } = product;
-  const stateFiltersWithFltCtx = stateFilter[fltCtx];
-  const hasProductFilters = !!Object.keys(productFilters).length;
-  if (hasProductFilters && stateFiltersWithFltCtx) {
-    const commonFilters = Object.keys(stateFiltersWithFltCtx).filter(
-      (filterName) => Object.keys(productFilters).includes(filterName) && productFilters[filterName].includes(stateFiltersWithFltCtx[filterName])
-    );
-    return commonFilters.length > 0;
+  const stateFiltersWithFltCtx = (stateFilter == null ? void 0 : stateFilter[fltCtx]) || {};
+  if (!productFilters || !Object.keys(productFilters).length || !stateFiltersWithFltCtx) {
+    return true;
   }
-  return true;
+  const commonFilters = (_a = Object.keys(stateFiltersWithFltCtx)) == null ? void 0 : _a.filter(
+    (filterName) => {
+      var _a2;
+      const matchingFilters = (_a2 = Object.keys((productFilters == null ? void 0 : productFilters[filterName]) || {})) == null ? void 0 : _a2.filter((x2) => {
+        var _a3;
+        if (((_a3 = productFilters == null ? void 0 : productFilters[filterName]) == null ? void 0 : _a3[x2]) === (stateFiltersWithFltCtx == null ? void 0 : stateFiltersWithFltCtx[filterName])) {
+          return true;
+        }
+      });
+      return (matchingFilters == null ? void 0 : matchingFilters.length) > 0;
+    }
+  );
+  return (commonFilters == null ? void 0 : commonFilters.length) > 0;
 };
 const getProductToChangeInForm = (product, isFilterValidated) => {
   const { items, filter } = product;
@@ -6885,12 +6895,14 @@ const getProductToChangeInForm = (product, isFilterValidated) => {
   return { productsToSelect, productsToUnselect };
 };
 const unselectProductsInForm = (productsToUnselect, setValueInForm) => {
+  console.log("LOG1 productsToUnselect", productsToUnselect);
   productsToUnselect.map(({ selCtx, id }) => {
     setValueInForm(`selected.${selCtx}.${id}`, false);
   });
 };
-const selectProductsInForm = (productToUnselect, setValueInForm, initialSelectedState) => {
-  productToUnselect.map(({ selCtx, id }) => {
+const selectProductsInForm = (productToSelect, setValueInForm, initialSelectedState) => {
+  console.log("LOG1 productToSelect", productToSelect);
+  productToSelect.map(({ selCtx, id }) => {
     var _a;
     const productInInitialState = (_a = initialSelectedState[selCtx]) == null ? void 0 : _a[id];
     if (productInInitialState) {
@@ -6903,12 +6915,12 @@ const selectProductsInForm = (productToUnselect, setValueInForm, initialSelected
 };
 function useMenuOptions(product, nestedLvl, parentKind, parentSelCtx) {
   const { selCtx, attrs = {} } = product;
-  const stateFilter = useStore((state) => state.filter);
+  useStore((state) => state.filter);
   const initialSelected = useStore((state) => state.initialSelected);
   const currency = useStore((state) => state.currency);
   const { setValue, getValues } = useFormContext();
-  const { selected = {} } = getValues();
-  const isFilterValidated = validateProductFilter(product, stateFilter);
+  const { selected = {}, filter = {} } = getValues();
+  const isFilterValidated = validateProductFilter(product, filter);
   const isOnSubmitted = useStore((state) => state.isOnSubmitted);
   const setValidationMap = useStore((state) => state.setValidationMap);
   const [selCnt, qtyCnt] = getSelCtxCntFromSelectedState(
@@ -6931,9 +6943,11 @@ function useMenuOptions(product, nestedLvl, parentKind, parentSelCtx) {
       product,
       isFilterValidated
     );
+    console.log("LOG1 useMenuOptions useEffect productsToUnselect", productsToUnselect);
+    console.log("LOG1 useMenuOptions useEffect productsToSelect", productsToSelect);
     unselectProductsInForm(productsToUnselect, setValue);
     selectProductsInForm(productsToSelect, setValue, initialSelected);
-  }, [stateFilter]);
+  }, [isFilterValidated, selected]);
   return {
     isFilterValidated,
     selected,
@@ -8794,14 +8808,63 @@ function Counter(props) {
     })]
   });
 }
-function useEmitFilter(product) {
-  const { watch } = useFormContext();
-  const setFilter = useStore((state) => state.setFilter);
+function useEmitFilter(product, isRadio, nestedLvl) {
+  const { watch, setValue, getValues, unregister } = useFormContext();
   const { id, selCtx, emit = {}, fltCtx } = product;
   const value = watch(`selected.${selCtx}.${id}`);
   useEffect(() => {
+    var _a, _b, _c;
+    if (!nestedLvl || nestedLvl > 1) {
+      return;
+    }
+    const groupsPath = `filterWithCnt.${fltCtx}`;
+    const groupCntPath = `filterWithCnt.${fltCtx}.${selCtx}`;
+    const fltCtxPath = `filter.${fltCtx}`;
+    if (isRadio && value && fltCtx) {
+      if (isEmpty(emit)) {
+        const groupValues = getValues(groupCntPath);
+        (_a = Object.keys(groupValues || {})) == null ? void 0 : _a.forEach((x2) => {
+          unregister(`${groupCntPath}.${x2}`);
+          const groupsKeys = Object.keys(getValues(groupsPath) || {});
+          if (isEmpty(groupsKeys)) {
+            unregister(`${fltCtxPath}.${x2}`);
+          } else {
+            groupsKeys.forEach((groupSelCtx) => {
+              if (groupSelCtx !== selCtx && !getValues(`${groupsPath}.${groupSelCtx}.${x2}`)) {
+                unregister(`${fltCtxPath}.${x2}`);
+              }
+            });
+          }
+        });
+        return;
+      } else {
+        const productGroupCntKeys = getValues(groupCntPath);
+        const groupsCntKeys = getValues(groupsPath);
+        (_b = Object.keys(emit)) == null ? void 0 : _b.forEach((x2) => {
+          var _a2;
+          (_a2 = Object.keys(productGroupCntKeys || {})) == null ? void 0 : _a2.forEach((productGroupCntKey) => {
+            if (!emit[productGroupCntKey]) {
+              unregister(`${fltCtxPath}.${productGroupCntKey}`);
+              unregister(`${groupCntPath}.${productGroupCntKey}`);
+            }
+          });
+          Object.keys(groupsCntKeys || {}).forEach((groupSelCtx) => {
+            if (groupSelCtx !== selCtx && x2 in getValues(groupsPath == null ? void 0 : groupsPath[groupSelCtx])) {
+              unregister(`${groupsPath}.${groupSelCtx}.${x2}`);
+            }
+          });
+          setValue(`${fltCtxPath}.${x2}`, emit[x2]);
+          setValue(`${groupCntPath}.${x2}`, { cnt: 1, value: emit[x2] });
+        });
+        return;
+      }
+    }
     if (value && fltCtx && !isEmpty(emit)) {
-      setFilter(fltCtx, emit);
+      (_c = Object.keys(emit)) == null ? void 0 : _c.forEach((x2) => {
+        setValue(`filter.${fltCtx}.${x2}`, emit[x2]);
+        const groupKeyCnt = getValues(`${groupCntPath}.${x2}.cnt`) || 0;
+        setValue(`${groupCntPath}.${x2}`, { cnt: groupKeyCnt + 1, value: emit[x2] });
+      });
     }
   }, [value]);
   return {};
@@ -8833,62 +8896,105 @@ const removeProductFromState = (selCtx, getValues, setValue) => {
     }, {})
   );
 };
-const selectUnselectProduct = (setValue, getValues, items, isChecked, state) => {
+const selectUnselectProduct = (setValue, getValues, product, isChecked, unregister, nestedLvl) => {
+  var _a, _b;
+  const { items, state, emit, fltCtx, selCtx } = product;
   const { selected = {} } = state || {};
+  console.log("selected/unselected product", product, isChecked);
   if (isChecked) {
     addProductToState(selected, setValue);
     const checkSubProducts = (items2) => {
-      var _a;
+      var _a2;
       if (!Array.isArray(items2) || isEmpty(state == null ? void 0 : state.selected))
         return;
-      (_a = items2 == null ? void 0 : items2.filter((x2) => {
-        var _a2, _b;
-        return !!((_b = (_a2 = state.selected) == null ? void 0 : _a2[`${x2.selCtx}`]) == null ? void 0 : _b[`${x2.id}`]);
-      })) == null ? void 0 : _a.map((product) => {
-        if (product.state && "selected" in product.state) {
+      (_a2 = items2 == null ? void 0 : items2.filter((x2) => {
+        var _a3, _b2;
+        return !!((_b2 = (_a3 = state.selected) == null ? void 0 : _a3[`${x2.selCtx}`]) == null ? void 0 : _b2[`${x2.id}`]);
+      })) == null ? void 0 : _a2.map((product2) => {
+        if (product2.state && "selected" in product2.state) {
           const {
             state: { selected: selected2 }
-          } = product;
+          } = product2;
           addProductToState(selected2, setValue);
         }
-        if (Array.isArray(product.items)) {
-          checkSubProducts(product.items);
+        if (Array.isArray(product2.items)) {
+          checkSubProducts(product2.items);
         }
       });
     };
     checkSubProducts(items);
   } else {
-    Object.keys(selected).forEach((selCtx) => {
-      removeProductFromState(selCtx, getValues, setValue);
+    Object.keys(selected).forEach((selCtx2) => {
+      removeProductFromState(selCtx2, getValues, setValue);
     });
     const checkSubProducts = (items2) => {
       if (!Array.isArray(items2))
         return;
-      items2.map((product) => {
-        const { selCtx } = product;
-        const changedSelCtx = getValues(`selected.${selCtx}`);
+      items2.map((product2) => {
+        const { selCtx: selCtx2 } = product2;
+        const changedSelCtx = getValues(`selected.${selCtx2}`);
         if (changedSelCtx) {
-          removeProductFromState(selCtx, getValues, setValue);
+          removeProductFromState(selCtx2, getValues, setValue);
         }
-        checkSubProducts(product.items);
+        checkSubProducts(product2.items);
       });
     };
     checkSubProducts(items);
+    (_a = Object.keys(emit)) == null ? void 0 : _a.forEach((x2) => {
+      const formPath = `filterWithCnt.${fltCtx}.${x2}.${emit[x2]}`;
+      const cnt = getValues(formPath) || 0;
+      if (cnt < 2) {
+        unregister(formPath);
+      } else {
+        setValue(formPath, cnt - 1);
+      }
+    });
+    if (nestedLvl && nestedLvl < 2 && !isEmpty(emit)) {
+      const groupsPath = `filterWithCnt.${fltCtx}`;
+      const groupCntPath = `filterWithCnt.${fltCtx}.${selCtx}`;
+      const fltCtxPath = `filter.${fltCtx}`;
+      (_b = Object.keys(product.emit)) == null ? void 0 : _b.forEach((emitKey) => {
+        var _a2, _b2, _c;
+        const groupValue = getValues(`${groupCntPath}.${emitKey}`) || 0;
+        if (groupValue) {
+          if (groupValue > 1) {
+            setValue(`${groupCntPath}.${emitKey}`, groupValue - 1);
+          } else {
+            unregister(`${groupCntPath}.${emitKey}`);
+            const groupKeysObj = getValues(groupsPath) || {};
+            const otherGroupsCntKeys = (_a2 = Object.keys(groupKeysObj)) == null ? void 0 : _a2.filter((x2) => x2 !== selCtx);
+            if (!otherGroupsCntKeys) {
+              unregister(`${fltCtxPath}.${emitKey}`);
+            } else {
+              const sameKeyOtherGroup = otherGroupsCntKeys == null ? void 0 : otherGroupsCntKeys.find((groupSelCtx) => {
+                var _a3;
+                return !!((_a3 = groupKeysObj == null ? void 0 : groupKeysObj[`${groupSelCtx}`]) == null ? void 0 : _a3[`${emitKey}`]);
+              });
+              if (!sameKeyOtherGroup) {
+                unregister(`${fltCtxPath}.${emitKey}`);
+              } else {
+                const newValue = (_c = (_b2 = groupKeysObj == null ? void 0 : groupKeysObj[`${sameKeyOtherGroup}`]) == null ? void 0 : _b2[`${emitKey}`]) == null ? void 0 : _c.value;
+                setValue(`${fltCtxPath}.${emitKey}`, newValue);
+              }
+            }
+          }
+        }
+      });
+    }
   }
 };
-function useMenuProduct(product, parentAttrs) {
+function useMenuProduct(product, parentAttrs, nestedLvl) {
   var _a;
-  const { id, selCtx } = product;
+  const { id, selCtx, emit = {}, fltCtx } = product;
   const {
     allowMultiple: parentAllowMultiple,
     selMin: parentSelMin,
     selMax: parentSelMax
   } = parentAttrs;
-  useEmitFilter(product);
   const { isInputEnabled: isInputEnabled2, isInputCounterIncrementEnabled: isInputCounterIncrementEnabled2 } = useValidate();
   const refreshForm = useStore((state) => state.refreshForm);
   const currency = useStore((state) => state.currency);
-  const { watch, getValues, setValue, register } = useFormContext();
+  const { watch, getValues, setValue, register, unregister } = useFormContext();
   const value = watch(`selected.${selCtx}.${id}`);
   const { selected = {} } = getValues();
   const valueNumber = Number(value || 0);
@@ -8896,7 +9002,8 @@ function useMenuProduct(product, parentAttrs) {
   const isCheckbox = !isRadio;
   const isCounter = isApiBooleanTrue(parentAllowMultiple);
   const isDecrementEnabled = valueNumber > (isRadio ? 1 : 0);
-  const isIncrementEnabled = isInputCounterIncrementEnabled2(product, selected) && (isInputEnabled2(product) || valueNumber);
+  const isIncrementEnabled = useEmitFilter(product, isRadio, nestedLvl);
+  isInputCounterIncrementEnabled2(product, selected) && (isInputEnabled2(product) || valueNumber);
   const isChecked = Number(((_a = selected == null ? void 0 : selected[selCtx]) == null ? void 0 : _a[id]) || 0) > 0;
   const isCheckboxEnabled = isInputEnabled2(product) || valueNumber;
   const registerId = `${isRadio ? "radio" : "selected"}.${selCtx}.${id}`;
@@ -8909,10 +9016,20 @@ function useMenuProduct(product, parentAttrs) {
     setValue(`selected.${selCtx}.${id}`, `${valueNumber + 1}`);
   };
   const handleCounterDecrementQty = () => {
+    var _a2, _b;
     const decrementedValue = valueNumber - 1;
     setValue(`selected.${selCtx}.${id}`, `${decrementedValue}`);
     if (isCheckbox && decrementedValue === 0) {
       setValue(`selected.${selCtx}.${id}`, false);
+      (_a2 = Object.keys(emit)) == null ? void 0 : _a2.forEach((x2) => {
+        const formPath = `filterWithCnt.${fltCtx}.${x2}.${emit[x2]}`;
+        const cnt = getValues(formPath) || 0;
+        if (cnt < 2) {
+          unregister(formPath);
+        } else {
+          setValue(formPath, cnt - 1);
+        }
+      });
       const checkSubProducts = (items) => {
         if (!Array.isArray(items))
           return;
@@ -8926,18 +9043,45 @@ function useMenuProduct(product, parentAttrs) {
         });
       };
       checkSubProducts(product.items);
+      if (nestedLvl && nestedLvl < 2 && !isEmpty(emit)) {
+        const groupsPath = `filterWithCnt.${fltCtx}`;
+        const groupCntPath = `filterWithCnt.${fltCtx}.${selCtx}`;
+        const fltCtxPath = `filter.${fltCtx}`;
+        (_b = Object.keys(emit)) == null ? void 0 : _b.forEach((emitKey) => {
+          var _a3, _b2, _c;
+          const groupValue = getValues(`${groupCntPath}.${emitKey}`) || 0;
+          if (groupValue) {
+            if (groupValue > 1) {
+              setValue(`${groupCntPath}.${emitKey}`, groupValue - 1);
+            } else {
+              unregister(`${groupCntPath}.${emitKey}`);
+              const groupKeysObj = getValues(groupsPath) || {};
+              const otherGroupsCntKeys = (_a3 = Object.keys(groupKeysObj)) == null ? void 0 : _a3.filter((x2) => x2 !== selCtx);
+              if (!otherGroupsCntKeys) {
+                unregister(`${fltCtxPath}.${emitKey}`);
+              } else {
+                const sameKeyOtherGroup = otherGroupsCntKeys == null ? void 0 : otherGroupsCntKeys.find((groupSelCtx) => {
+                  var _a4;
+                  return !!((_a4 = groupKeysObj == null ? void 0 : groupKeysObj[`${groupSelCtx}`]) == null ? void 0 : _a4[`${emitKey}`]);
+                });
+                if (!sameKeyOtherGroup) {
+                  unregister(`${fltCtxPath}.${emitKey}`);
+                } else {
+                  const newValue = (_c = (_b2 = groupKeysObj == null ? void 0 : groupKeysObj[`${sameKeyOtherGroup}`]) == null ? void 0 : _b2[`${emitKey}`]) == null ? void 0 : _c.value;
+                  setValue(`${fltCtxPath}.${emitKey}`, newValue);
+                }
+              }
+            }
+          }
+        });
+      }
     }
   };
   const handleOnInputChange = (e2) => {
     const {
       target: { checked, name: selCtx2, defaultValue: productId }
     } = e2;
-    for (const key of Object.keys(selected || {})) {
-      if (key !== (product == null ? void 0 : product.selCtx) && (key == null ? void 0 : key.includes(product.selCtx)) && isRadio) {
-        setValue(`selected.${key}`, false);
-      }
-    }
-    selectUnselectProduct(setValue, getValues, product.items, checked, product.state);
+    selectUnselectProduct(setValue, getValues, product, checked, unregister, nestedLvl);
     if (isRadio) {
       console.log("handleOnInputChange radio", selCtx2, productId);
       const selectedContextName = "selected." + selCtx2.replace("radio.", "").split(".")[0];
@@ -8986,7 +9130,7 @@ const MenuProduct = (props) => {
     handleCounterIncrementQty,
     handleCounterDecrementQty,
     currency
-  } = useMenuProduct(product, parentAttrs);
+  } = useMenuProduct(product, parentAttrs, nestedLvl);
   const {
     MenuProductUI
   } = useComponents();
@@ -9222,10 +9366,14 @@ const DisplayState = () => {
     watch
   } = useFormContext();
   const selected = watch("selected");
+  const filter = watch("filter");
+  const filterWithCnt = watch("filterWithCnt");
   const validationMap = useStore((state) => state.validationMap);
   console.log({
     selected,
-    validationMap
+    validationMap,
+    filter,
+    filterWithCnt
   });
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col items-center py-4",
@@ -10964,5 +11112,5 @@ function ProductConfigurator(props) {
     })
   });
 }
-export { ContextType, MainView, ProductConfigurator, ProductKinds, ProductTypes, SelMinSelMaxStatus, index_esm as hookForm, useProductData };
+export { ContextType, MainView, ProductConfigurator, ProductKinds, ProductTypes, SelMinSelMaxStatus, getProductToChangeInForm, index_esm as hookForm, selectProductsInForm, unselectProductsInForm, useProductData, validateProductFilter };
 //# sourceMappingURL=index.es.js.map