@orderingstack/front-components-product-configurator 1.6.0-beta.3 → 1.7.0-beta.0

package/dist/index.es.js

@@ -6295,6 +6295,53 @@ function findGroupInProductItemsBySelCtx(selCtx, parent) {
   return null;
 }
 const isAnyGroupOptionKind = (kind) => kind === EProductKind.OPTIONS || kind === EProductKind.CONFIG || kind === EProductKind.GROUP_UPSELL;
+const isGroupBucketCase = (group) => {
+  var _a, _b, _c, _d, _e2, _f, _g;
+  if (!group) {
+    return false;
+  }
+  if (isAnyGroupOptionKind(group == null ? void 0 : group.kind) && ((_a = group == null ? void 0 : group.attrs) == null ? void 0 : _a.selMin) === "1" && ((_b = group == null ? void 0 : group.attrs) == null ? void 0 : _b.selMax) === "2" && ((_c = group == null ? void 0 : group.attrs) == null ? void 0 : _c.qtyMin) && ((_d = group == null ? void 0 : group.attrs) == null ? void 0 : _d.qtyMin) === ((_e2 = group == null ? void 0 : group.attrs) == null ? void 0 : _e2.qtyMax) && ((_g = (_f = group == null ? void 0 : group.items) == null ? void 0 : _f.filter((x2) => {
+    var _a2;
+    return ((_a2 = x2 == null ? void 0 : x2._) == null ? void 0 : _a2.hidden) !== "true";
+  })) == null ? void 0 : _g.length) === 2) {
+    return true;
+  }
+  return false;
+};
+const getGroupBucketSecondChildrenValues = (group, fistProductId, fistProductValue) => {
+  var _a, _b;
+  const otherValue = ((_a = group == null ? void 0 : group.attrs) == null ? void 0 : _a.qtyMax) - fistProductValue;
+  const otherProduct = (_b = group == null ? void 0 : group.items) == null ? void 0 : _b.find((x2) => (x2 == null ? void 0 : x2.id) !== fistProductId);
+  return {
+    product: otherProduct,
+    value: otherValue
+  };
+};
+const getGroupBucketSecondChildrenValuesInputChange = (group, clickedProductId, checked, selected) => {
+  var _a, _b, _c, _d;
+  const secondProduct = (_a = group == null ? void 0 : group.items) == null ? void 0 : _a.find((x2) => (x2 == null ? void 0 : x2.id) !== clickedProductId);
+  const qtyMax = (_b = group == null ? void 0 : group.attrs) == null ? void 0 : _b.qtyMax;
+  if (!checked) {
+    return {
+      clickedProductValue: false,
+      secondProductValue: qtyMax,
+      secondProduct
+    };
+  }
+  const isSecondProductInState = !!((_c = selected == null ? void 0 : selected[secondProduct == null ? void 0 : secondProduct.selCtx]) == null ? void 0 : _c[secondProduct == null ? void 0 : secondProduct.id]) && ((_d = selected == null ? void 0 : selected[secondProduct == null ? void 0 : secondProduct.selCtx]) == null ? void 0 : _d[secondProduct == null ? void 0 : secondProduct.id]) !== false;
+  if (isSecondProductInState) {
+    return {
+      clickedProductValue: "1",
+      secondProductValue: `${Number(qtyMax) - 1}`,
+      secondProduct
+    };
+  }
+  return {
+    clickedProductValue: qtyMax,
+    secondProductValue: false,
+    secondProduct
+  };
+};
 function createStore(createState) {
   let state;
   const listeners = /* @__PURE__ */ new Set();
@@ -8519,13 +8566,15 @@ const MenuOptions = (props) => {
   });
 };
 const SimpleCheckbox = (props) => {
+  var _a;
   const {
     product,
     inputId,
     isDisabled,
     registerProps,
     size = "lg",
-    children
+    children,
+    parentProduct
   } = props;
   const {
     details: {
@@ -8538,6 +8587,25 @@ const SimpleCheckbox = (props) => {
   } = literals || {};
   const price = countComplexProductPrice(product);
   const imgSrc = getItemImage(product);
+  const {
+    watch
+  } = useFormContext();
+  const selected = watch(`selected`);
+  isGroupBucketCase(parentProduct);
+  const wasGroupEmpty = useRef(!((_a = parentProduct == null ? void 0 : parentProduct.items) == null ? void 0 : _a.some((x2) => {
+    var _a2;
+    return (_a2 = selected == null ? void 0 : selected[x2 == null ? void 0 : x2.selCtx]) == null ? void 0 : _a2[x2.id];
+  })));
+  useEffect(() => {
+    setTimeout(() => {
+      var _a2;
+      const isEmpty2 = !((_a2 = parentProduct == null ? void 0 : parentProduct.items) == null ? void 0 : _a2.some((x2) => {
+        var _a3;
+        return (_a3 = selected == null ? void 0 : selected[x2 == null ? void 0 : x2.selCtx]) == null ? void 0 : _a3[x2.id];
+      }));
+      wasGroupEmpty.current = isEmpty2;
+    }, 10);
+  }, [parentProduct == null ? void 0 : parentProduct.items, selected]);
   return /* @__PURE__ */ jsxs("div", {
     className: `flex items-center justify-center p-2 pl-3 my-1 rounded-lg bg-white border-2 border-gray-200  ${isDisabled && "opacity-50"}`,
     children: [/* @__PURE__ */ jsx("input", {
@@ -8545,8 +8613,8 @@ const SimpleCheckbox = (props) => {
       className: `simple-checkbox checkbox-${size} mr-4`,
       id: inputId,
       disabled: isDisabled,
-      value: "1",
-      ...registerProps
+      ...registerProps,
+      value: "1"
     }), imgSrc && /* @__PURE__ */ jsx("div", {
       className: "flex w-20 mr-2 max-h-24",
       children: /* @__PURE__ */ jsx("img", {
@@ -8914,7 +8982,7 @@ const findProductInParentProductBySelCtx = (parent, selCtx) => {
   return null;
 };
 function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
-  var _a;
+  var _a, _b;
   const { id, selCtx, emit = {}, fltCtx } = product;
   const {
     allowMultiple: parentAllowMultiple,
@@ -8931,11 +8999,12 @@ function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
   const isRadio = parentSelMin === "1" && parentSelMax === "1";
   useEmitFilter(product, isRadio, nestedLvl);
   const isCheckbox = !isRadio;
+  const isBucketCase = isGroupBucketCase(parentPriduct);
   const isCounter = isApiBooleanTrue(parentAllowMultiple);
-  const isDecrementEnabled = valueNumber > (isRadio ? 1 : 0);
-  const isIncrementEnabled = 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 isDecrementEnabled = isBucketCase && valueNumber > 0 || valueNumber > (isRadio ? 1 : 0);
+  const isIncrementEnabled = isBucketCase && valueNumber < ((_a = parentPriduct == null ? void 0 : parentPriduct.attrs) == null ? void 0 : _a.qtyMax) || isInputCounterIncrementEnabled2(product, selected) && (isInputEnabled2(product) || valueNumber);
+  const isChecked = Number(((_b = selected == null ? void 0 : selected[selCtx]) == null ? void 0 : _b[id]) || 0) > 0;
+  const isCheckboxEnabled = isBucketCase || isInputEnabled2(product) || valueNumber;
   const registerId = `${isRadio ? "radio" : "selected"}.${selCtx}.${id}`;
   const registerProps = register(registerId, {
     onChange: (e2) => {
@@ -8943,12 +9012,20 @@ function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
     }
   });
   const handleCounterIncrementQty = () => {
-    var _a2, _b;
+    var _a2, _b2;
     setValue(`selected.${selCtx}.${id}`, `${valueNumber + 1}`);
-    const importantSubProductsInState = (_b = (_a2 = Object.keys(selected)) == null ? void 0 : _a2.map((y2) => {
+    const isBucketCase2 = isGroupBucketCase(parentPriduct);
+    if (isBucketCase2) {
+      const { product: secondProduct, value: secondProductValue } = getGroupBucketSecondChildrenValues(parentPriduct, id, valueNumber + 1);
+      setValue(`selected.${secondProduct == null ? void 0 : secondProduct.selCtx}.${secondProduct == null ? void 0 : secondProduct.id}`, `${secondProductValue}`);
+      if (secondProductValue === 0) {
+        selectUnselectProduct(setValue, getValues, secondProduct, false, unregister, nestedLvl);
+      }
+    }
+    const importantSubProductsInState = (_b2 = (_a2 = Object.keys(selected)) == null ? void 0 : _a2.map((y2) => {
       var _a3;
       return { key: y2, subProductId: (_a3 = findProductInParentProductBySelCtx(product, y2)) == null ? void 0 : _a3.id };
-    })) == null ? void 0 : _b.filter((x2) => !!x2.subProductId);
+    })) == null ? void 0 : _b2.filter((x2) => !!x2.subProductId);
     if (valueNumber === 0) {
       importantSubProductsInState == null ? void 0 : importantSubProductsInState.forEach((x2) => {
         setValue(`selected.${x2.key}.${x2.subProductId}`, `${valueNumber + 1}`);
@@ -8956,13 +9033,20 @@ function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
     }
   };
   const handleCounterDecrementQty = () => {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     const decrementedValue = valueNumber - 1;
     setValue(`selected.${selCtx}.${id}`, `${decrementedValue}`);
-    const importantSubProductsInState = (_b = (_a2 = Object.keys(selected)) == null ? void 0 : _a2.map((y2) => {
+    if (isBucketCase) {
+      const { product: secondProduct, value: secondProductValue } = getGroupBucketSecondChildrenValues(parentPriduct, id, decrementedValue);
+      setValue(`selected.${secondProduct == null ? void 0 : secondProduct.selCtx}.${secondProduct == null ? void 0 : secondProduct.id}`, `${secondProductValue}`);
+      if (secondProductValue === 1) {
+        selectUnselectProduct(setValue, getValues, secondProduct, true, unregister, nestedLvl);
+      }
+    }
+    const importantSubProductsInState = (_b2 = (_a2 = Object.keys(selected)) == null ? void 0 : _a2.map((y2) => {
       var _a3;
       return { key: y2, subProductId: (_a3 = findProductInParentProductBySelCtx(product, y2)) == null ? void 0 : _a3.id };
-    })) == null ? void 0 : _b.filter((x2) => !!x2.subProductId);
+    })) == null ? void 0 : _b2.filter((x2) => !!x2.subProductId);
     if (decrementedValue === 0) {
       importantSubProductsInState == null ? void 0 : importantSubProductsInState.forEach((x2) => {
         setValue(`selected.${x2.key}.${x2.subProductId}`, `${decrementedValue}`);
@@ -8997,7 +9081,7 @@ function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
         const groupCntPath = `filterWithCnt.${fltCtx}.${selCtx}`;
         const fltCtxPath = `filter.${fltCtx}`;
         (_d = Object.keys(emit)) == null ? void 0 : _d.forEach((emitKey) => {
-          var _a3, _b2, _c2;
+          var _a3, _b3, _c2;
           const groupValue = getValues(`${groupCntPath}.${emitKey}`) || 0;
           if (groupValue) {
             if (groupValue > 1) {
@@ -9016,7 +9100,7 @@ function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
                 if (!sameKeyOtherGroup) {
                   unregister(`${fltCtxPath}.${emitKey}`);
                 } else {
-                  const newValue = (_c2 = (_b2 = groupKeysObj == null ? void 0 : groupKeysObj[`${sameKeyOtherGroup}`]) == null ? void 0 : _b2[`${emitKey}`]) == null ? void 0 : _c2.value;
+                  const newValue = (_c2 = (_b3 = groupKeysObj == null ? void 0 : groupKeysObj[`${sameKeyOtherGroup}`]) == null ? void 0 : _b3[`${emitKey}`]) == null ? void 0 : _c2.value;
                   setValue(`${fltCtxPath}.${emitKey}`, newValue);
                 }
               }
@@ -9031,9 +9115,17 @@ function useMenuProduct(product, parentAttrs, nestedLvl, parentPriduct) {
     const {
       target: { checked, name: selCtx2, defaultValue: productId }
     } = e2;
+    if (isBucketCase) {
+      const { clickedProductValue, secondProductValue, secondProduct } = getGroupBucketSecondChildrenValuesInputChange(parentPriduct, id, checked, selected);
+      console.log("handleOnInputChange clickedProductValue", clickedProductValue, secondProductValue);
+      setValue(`selected.${product == null ? void 0 : product.selCtx}.${product == null ? void 0 : product.id}`, clickedProductValue === false ? false : clickedProductValue);
+      setValue(`selected.${secondProduct == null ? void 0 : secondProduct.selCtx}.${secondProduct == null ? void 0 : secondProduct.id}`, secondProductValue === false ? false : secondProductValue);
+      selectUnselectProduct(setValue, getValues, product, checked, unregister, nestedLvl);
+      selectUnselectProduct(setValue, getValues, secondProduct, secondProductValue !== false, unregister, nestedLvl);
+      return;
+    }
     selectUnselectProduct(setValue, getValues, product, checked, unregister, nestedLvl);
     if (isRadio) {
-      console.log("handleOnInputChange radio", selCtx2, productId);
       const otherGroupItems = (_a2 = parentPriduct == null ? void 0 : parentPriduct.items) == null ? void 0 : _a2.filter((x2) => x2.id !== product.id);
       for (const key of Object.keys(selected || {})) {
         const isItemToClear = (otherGroupItems == null ? void 0 : otherGroupItems.some((x2) => !!findProductInParentProductBySelCtx(x2, key))) ? key : false;
@@ -9144,7 +9236,8 @@ const MenuProductDefaultUI = (props) => {
     counterValue,
     handleCounterIncrementQty,
     handleCounterDecrementQty,
-    children
+    children,
+    parentProduct
   } = props;
   const CounterComponent = /* @__PURE__ */ jsx(Counter, {
     value: counterValue,
@@ -9171,6 +9264,7 @@ const MenuProductDefaultUI = (props) => {
         inputId,
         registerProps,
         isDisabled: !isCheckboxEnabled,
+        parentProduct,
         children: /* @__PURE__ */ jsx(Fragment, {
           children: isCounter && CounterComponent
         })
@@ -9225,6 +9319,13 @@ function MenuItemsDispatcher(props) {
     MenuItemsUI
   } = useComponents();
   const renderMenuItem = (productItem) => {
+    var _a;
+    if (isAnyGroupOptionKind(productItem.kind) && !((_a = productItem == null ? void 0 : productItem.items) == null ? void 0 : _a.find((x2) => {
+      var _a2, _b;
+      return ((_a2 = x2 == null ? void 0 : x2.attrs) == null ? void 0 : _a2.hidden) !== true && ((_b = x2 == null ? void 0 : x2._) == null ? void 0 : _b.hidden) !== "true";
+    }))) {
+      return /* @__PURE__ */ jsx(Fragment, {});
+    }
     if (isMenuOptionsToShow(productItem))
       return /* @__PURE__ */ jsx(MenuOptions, {
         optionsItem: productItem,
@@ -10787,7 +10888,6 @@ function ProductConfigurator(props) {
     initFilter,
     productQuantity,
     setIsOnSubmittedOnTrue,
-    getInvalidSelCtxArray,
     increaseProductQuantity,
     decreaseProductQuantity,
     setCurrency