contentoh-components-library 21.4.99 → 21.4.101

package/dist/components/atoms/ObservationFlag/index.js

@@ -47,9 +47,8 @@ var ObservationFlag = function ObservationFlag(_ref) {
       dataProduct = _ref.dataProduct,
       isObservationVisible = _ref.isObservationVisible,
       toggleObservation = _ref.toggleObservation,
-      handleClickOutside = _ref.handleClickOutside,
       hideObservation = _ref.hideObservation;
-  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags); // const [isObservationVisible, setObservationVisible] = useState(false);
+  var PriorityFlags = (_PriorityFlags = {}, (0, _defineProperty2.default)(_PriorityFlags, "none", _noPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "low", _lowPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "medium", _mediumPriority.default), (0, _defineProperty2.default)(_PriorityFlags, "high", _highPriority.default), _PriorityFlags); //const [isObservationVisible, setObservationVisible] = useState(false);
 
   var _useState = (0, _react.useState)(contentObservation || ""),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -86,13 +85,13 @@ var ObservationFlag = function ObservationFlag(_ref) {
     return function () {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, [isObservationVisible]);
-  (0, _react.useEffect)(function () {
-    document.addEventListener("click", handleClickOutside);
-    return function () {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isObservationVisible, handleClickOutside]);
+  }, [isObservationVisible]); // useEffect(() => {
+  //   document.addEventListener("click", handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener("click", handleClickOutside);
+  //   };
+  // }, [isObservationVisible, handleClickOutside]);
+
   (0, _react.useEffect)(function () {
     setMaterial(contentObservation || "");
   }, [contentObservation]);

package/dist/components/molecules/Phase/index.js

@@ -58,7 +58,11 @@ var Phase = function Phase(_ref) {
       nextPhase = _ref.nextPhase,
       groups = _ref.groups,
       onDeletePhase = _ref.onDeletePhase,
-      token = _ref.token;
+      token = _ref.token,
+      _ref$showMenu = _ref.showMenu,
+      showMenu = _ref$showMenu === void 0 ? true : _ref$showMenu,
+      _ref$showButtonChip = _ref.showButtonChip,
+      showButtonChip = _ref$showButtonChip === void 0 ? true : _ref$showButtonChip;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -501,43 +505,45 @@ var Phase = function Phase(_ref) {
                 children: phase.phaseName
               }, phase.phaseId);
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            id: "basic-button",
-            "aria-controls": open ? "basic-menu" : undefined,
-            "aria-haspopup": "true",
-            "aria-expanded": open ? "true" : undefined,
-            onClick: function onClick(e) {
-              return handleClick(e);
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: _options.default,
-              alt: ""
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
-            id: "basic-menu",
-            anchorEl: anchorEl,
-            open: open,
-            onClose: handleClose,
-            MenuListProps: {
-              "aria-labelledby": "basic-button"
-            },
-            sx: {
-              ul: {
-                paddingTop: "0px",
-                paddingBottom: "0px"
-              }
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-              onClick: function onClick() {
-                return onDeletePhase(id);
+          }), showMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+              id: "basic-button",
+              "aria-controls": open ? "basic-menu" : undefined,
+              "aria-haspopup": "true",
+              "aria-expanded": open ? "true" : undefined,
+              onClick: function onClick(e) {
+                return handleClick(e);
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: _options.default,
+                alt: ""
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+              id: "basic-menu",
+              anchorEl: anchorEl,
+              open: open,
+              onClose: handleClose,
+              MenuListProps: {
+                "aria-labelledby": "basic-button"
               },
               sx: {
-                fontSize: "12px",
-                color: "#262626",
-                minHeight: "auto"
+                ul: {
+                  paddingTop: "0px",
+                  paddingBottom: "0px"
+                }
               },
-              children: "Eliminar Fase"
-            })
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+                onClick: function onClick() {
+                  return onDeletePhase(id);
+                },
+                sx: {
+                  fontSize: "12px",
+                  color: "#262626",
+                  minHeight: "auto"
+                },
+                children: "Eliminar Fase"
+              })
+            })]
           })]
         })
       })]
@@ -550,7 +556,7 @@ var Phase = function Phase(_ref) {
             return handleChipDelete(phaseId, chip);
           }
         }, chip.id);
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupSelect.GroupSelect, {
+      }), showButtonChip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupSelect.GroupSelect, {
         options: groups.filter(function (group) {
           return group.groupActive === 0;
         }).map(function (group) {

package/dist/components/molecules/ProductNameHeader/index.js

@@ -29,7 +29,6 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       dataProduct = _ref.dataProduct,
       isObservationVisible = _ref.isObservationVisible,
       toggleObservation = _ref.toggleObservation,
-      handleClickOutside = _ref.handleClickOutside,
       hideObservation = _ref.hideObservation;
   var typeFlag = productObservation !== null && productObservation !== "" ? "high" : "low";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
@@ -47,8 +46,8 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       contentObservation: productObservation,
       dataProduct: dataProduct,
       isObservationVisible: isObservationVisible,
-      toggleObservation: toggleObservation,
-      handleClickOutside: handleClickOutside,
+      toggleObservation: toggleObservation // handleClickOutside = {handleClickOutside}
+      ,
       hideObservation: hideObservation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       headerType: "date-header",

package/dist/components/organisms/DragAndDropPhases/index.js

@@ -176,41 +176,39 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              console.log("fase nueva", phaseName);
-              _context2.prev = 1;
+              _context2.prev = 0;
               body = {
                 name: phaseName,
                 retailerGroupsIds: [],
                 nextPhaseId: null
               };
-              _context2.next = 5;
+              _context2.next = 4;
               return _axios.default.post("".concat(process.env.REACT_APP_PHASES_ENDPOINT, "/create"), body, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 5:
+            case 4:
               response = _context2.sent;
-              console.log("body", body);
               createdPhase = response.data.body;
               console.log(createdPhase);
               setInputValue("");
               loadData();
-              _context2.next = 16;
+              _context2.next = 14;
               break;
 
-            case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](1);
+            case 11:
+              _context2.prev = 11;
+              _context2.t0 = _context2["catch"](0);
               console.error("Error al agregar fase:", _context2.t0);
 
-            case 16:
+            case 14:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[1, 13]]);
+      }, _callee2, null, [[0, 11]]);
     }));
 
     return function addPhase(_x) {
@@ -412,21 +410,38 @@ var DragAndDropPhases = function DragAndDropPhases(_ref) {
 
 
   var renderPhase = function renderPhase(phase, idx) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
-      id: idx,
-      phaseId: phase.phaseId,
-      phases: listPhases,
-      phaseName: phase.phaseName,
-      nextPhase: phase.nextPhaseIfApproved,
-      groups: phase.groupsAssigned,
-      onDeletePhase: function onDeletePhase() {
-        return handleDeletePhase(phase.phaseId);
-      } // onDragStart={(e) => onDragStart(e, idx)}
-      // onDragOver={() => onDragOver(idx)}
-      // onDragEnd={onDragEnd}
-      ,
-      token: token
-    }, phase.phaseId);
+    if (phase.isInitialPhase === 1) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+        id: idx,
+        phaseId: phase.phaseId,
+        phases: listPhases,
+        phaseName: phase.phaseName,
+        nextPhase: phase.nextPhaseIfApproved,
+        groups: phase.groupsAssigned,
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        },
+        token: token,
+        showMenu: false,
+        showButtonChip: false
+      }, phase.phaseId);
+    } else {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Phase.Phase, {
+        id: idx,
+        phaseId: phase.phaseId,
+        phases: listPhases,
+        phaseName: phase.phaseName,
+        nextPhase: phase.nextPhaseIfApproved,
+        groups: phase.groupsAssigned,
+        onDeletePhase: function onDeletePhase() {
+          return handleDeletePhase(phase.phaseId);
+        } // onDragStart={(e) => onDragStart(e, idx)}
+        // onDragOver={() => onDragOver(idx)}
+        // onDragEnd={onDragEnd}
+        ,
+        token: token
+      }, phase.phaseId);
+    }
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {

package/dist/components/organisms/FullProductNameHeader/index.js

@@ -38,7 +38,6 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       productObservation = _ref.productObservation,
       isObservationVisible = _ref.isObservationVisible,
       toggleObservation = _ref.toggleObservation,
-      handleClickOutside = _ref.handleClickOutside,
       hideObservation = _ref.hideObservation;
 
   var _useState = (0, _react.useState)([]),
@@ -77,8 +76,8 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       date: getTime((headerData === null || headerData === void 0 ? void 0 : (_headerData$article2 = headerData.article) === null || _headerData$article2 === void 0 ? void 0 : _headerData$article2.timestamp) || (headerData === null || headerData === void 0 ? void 0 : headerData.timestamp)),
       dataProduct: headerData,
       isObservationVisible: isObservationVisible,
-      toggleObservation: toggleObservation,
-      handleClickOutside: handleClickOutside,
+      toggleObservation: toggleObservation // handleClickOutside ={handleClickOutside}
+      ,
       hideObservation: hideObservation
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",

package/dist/components/pages/RetailerProductEdition/index.js

@@ -514,20 +514,22 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
   var toggleObservation = function toggleObservation() {
     setObservationVisible(!isObservationVisible);
-  };
-
-  var handleClickOutside = function handleClickOutside(event) {
-    if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
-      hideObservation();
-    }
-  };
+  }; // const handleClickOutside = (event) => {
+  //   if (
+  //     isObservationVisible &&
+  //     !event.target.closest(".Observation") &&
+  //     !event.target.closest(".Container")
+  //   ) {
+  //     hideObservation();
+  //   }
+  // };
+  // useEffect(() => {
+  //   document.addEventListener("click", handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener("click", handleClickOutside);
+  //   };
+  // }, [isObservationVisible]);
 
-  (0, _react.useEffect)(function () {
-    document.addEventListener("click", handleClickOutside);
-    return function () {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isObservationVisible]);
 
   var hideObservation = function hideObservation() {
     setObservationVisible(false);
@@ -2050,8 +2052,8 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             setValRejAll(true);
           },
           isObservationVisible: isObservationVisible,
-          toggleObservation: toggleObservation,
-          handleClickOutside: handleClickOutside,
+          toggleObservation: toggleObservation // handleClickOutside={handleClickOutside}
+          ,
           hideObservation: hideObservation
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
           tabsSections: tabsSections,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.99",
+  "version": "21.4.101",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/ObservationFlag/index.js

@@ -13,7 +13,9 @@ export const ObservationFlag = ({
   observation,
   contentObservation,
   dataProduct,
-  isObservationVisible, toggleObservation,handleClickOutside,hideObservation
+  isObservationVisible, toggleObservation,
+  // handleClickOutside,
+  hideObservation
 }) => {
   const PriorityFlags = {
     ["none"]: without,
@@ -22,7 +24,7 @@ export const ObservationFlag = ({
     ["high"]: high,
   };
 
- // const [isObservationVisible, setObservationVisible] = useState(false);
+  //const [isObservationVisible, setObservationVisible] = useState(false);
   const [material, setMaterial] = useState(contentObservation || "");
   const [currentObservation, setCurrentObservation] = useState(observation);
 
@@ -48,12 +50,12 @@ export const ObservationFlag = ({
       document.removeEventListener("click", handleClickOutside);
     };
   }, [isObservationVisible]);
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isObservationVisible, handleClickOutside]);
+  // useEffect(() => {
+  //   document.addEventListener("click", handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener("click", handleClickOutside);
+  //   };
+  // }, [isObservationVisible, handleClickOutside]);
   
   useEffect(() => {
     setMaterial(contentObservation || "");

package/src/components/molecules/Phase/index.js

@@ -26,6 +26,8 @@ export const Phase = ({
   groups,
   onDeletePhase,
   token,
+  showMenu=true,
+  showButtonChip=true,
 }) => {
   const [selectedValue, setSelectedValue] = useState([]);
   const [chips, setChips] = useState([]);
@@ -276,20 +278,20 @@ export const Phase = ({
           <div className="phase-sel">
             <p className="text-phase">Siguiente Fase </p>
             <Select
-                value={
-                  selectedValue.length > 0
-                    ? selectedValue[0]
-                    : nextPhaseState
-                    ? nextPhaseState
-                    : ""
-                }
-               placeholder={`Fase`}
-               onChange={(e) => {
-                 const selectedPhase = phases.find(
-                   (phase) => phase.phaseName === e.target.value
-                 );
-                 setSelectedValue(selectedPhase ? [selectedPhase.phaseId] : []);
-               }}
+              value={
+                selectedValue.length > 0
+                  ? selectedValue[0]
+                  : nextPhaseState
+                  ? nextPhaseState
+                  : ""
+              }
+              placeholder={`Fase`}
+              onChange={(e) => {
+                const selectedPhase = phases.find(
+                  (phase) => phase.phaseName === e.target.value
+                );
+                setSelectedValue(selectedPhase ? [selectedPhase.phaseId] : []);
+              }}
               sx={{
                 minWidth: "100px",
                 height: "24px",
@@ -319,37 +321,45 @@ export const Phase = ({
                 </MenuItem>
               ))}
             </Select>
-            <Button
-              id="basic-button"
-              aria-controls={open ? "basic-menu" : undefined}
-              aria-haspopup="true"
-              aria-expanded={open ? "true" : undefined}
-              onClick={(e) => handleClick(e)}
-            >
-              <img src={options} alt="" />
-            </Button>
-            <Menu
-              id="basic-menu"
-              anchorEl={anchorEl}
-              open={open}
-              onClose={handleClose}
-              MenuListProps={{
-                "aria-labelledby": "basic-button",
-              }}
-              sx={{
-                ul: {
-                  paddingTop: "0px",
-                  paddingBottom: "0px",
-                },
-              }}
-            >
-              <MenuItem
-                onClick={() => onDeletePhase(id)}
-                sx={{ fontSize: "12px", color: "#262626", minHeight: "auto" }}
-              >
-                Eliminar Fase
-              </MenuItem>
-            </Menu>
+            {showMenu && (
+              <>
+                <Button
+                  id="basic-button"
+                  aria-controls={open ? "basic-menu" : undefined}
+                  aria-haspopup="true"
+                  aria-expanded={open ? "true" : undefined}
+                  onClick={(e) => handleClick(e)}
+                >
+                  <img src={options} alt="" />
+                </Button>
+                <Menu
+                  id="basic-menu"
+                  anchorEl={anchorEl}
+                  open={open}
+                  onClose={handleClose}
+                  MenuListProps={{
+                    "aria-labelledby": "basic-button",
+                  }}
+                  sx={{
+                    ul: {
+                      paddingTop: "0px",
+                      paddingBottom: "0px",
+                    },
+                  }}
+                >
+                  <MenuItem
+                    onClick={() => onDeletePhase(id)}
+                    sx={{
+                      fontSize: "12px",
+                      color: "#262626",
+                      minHeight: "auto",
+                    }}
+                  >
+                    Eliminar Fase
+                  </MenuItem>
+                </Menu>
+              </>
+            )}
           </div>
         </div>
       </div>
@@ -361,8 +371,8 @@ export const Phase = ({
             onDelete={() => handleChipDelete(phaseId, chip)}
           />
         ))}
-      
-      <GroupSelect
+
+       {showButtonChip && <GroupSelect
           options={groups
             .filter((group) => group.groupActive === 0)
             .map((group) => ({
@@ -377,9 +387,10 @@ export const Phase = ({
           defaultOption={"Todos los grupos"}
           parameterArray={groupsSelected}
           setParameterArray={setGroupsSelected}
-          onClickItem={()=>{
-            handleGroupSelect()}}
-        />
+          onClickItem={() => {
+            handleGroupSelect();
+          }}
+        />}
       </div>
       <Modal
         {...modalData}

package/src/components/molecules/ProductNameHeader/index.js

@@ -15,8 +15,8 @@ export const ProductNameHeader = ({
   dataProduct,
   isObservationVisible,
   toggleObservation,
-  handleClickOutside,
-  hideObservation
+  // handleClickOutside,
+   hideObservation
 }) => {
   const typeFlag =
     productObservation !== null && productObservation !== "" ? "high" : "low";
@@ -36,8 +36,8 @@ export const ProductNameHeader = ({
         dataProduct={dataProduct}
         isObservationVisible ={isObservationVisible}
         toggleObservation = {toggleObservation}
-        handleClickOutside = {handleClickOutside}
-        hideObservation={hideObservation}
+        // handleClickOutside = {handleClickOutside}
+         hideObservation={hideObservation}
       />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

package/src/components/organisms/DragAndDropPhases/index.js

@@ -93,7 +93,6 @@ export const DragAndDropPhases = ({ token}) => {
   };
 
   const addPhase = async(phaseName) => {
-    console.log("fase nueva", phaseName);
     try {
       const body = {
         name: phaseName,
@@ -109,7 +108,6 @@ export const DragAndDropPhases = ({ token}) => {
           },
         }
       );
-      console.log("body", body)
       const createdPhase = response.data.body;
       console.log(createdPhase)
       setInputValue("");
@@ -258,22 +256,41 @@ const handleDeletePhase = (id) => {
 // }, [listPhases]); 
 
 const renderPhase = (phase, idx) => {
-  return (
-    <Phase
-      key={phase.phaseId}
-      id={idx}
-      phaseId={phase.phaseId}
-      phases={listPhases}
-      phaseName={phase.phaseName}
-      nextPhase={phase.nextPhaseIfApproved}
-      groups={phase.groupsAssigned}
-      onDeletePhase={() => handleDeletePhase(phase.phaseId)}
-      // onDragStart={(e) => onDragStart(e, idx)}
-      // onDragOver={() => onDragOver(idx)}
-      // onDragEnd={onDragEnd}
-      token={token}
-    />
-  );
+  if (phase.isInitialPhase===1){
+    return (
+      <Phase
+        key={phase.phaseId}
+        id={idx}
+        phaseId={phase.phaseId}
+        phases={listPhases}
+        phaseName={phase.phaseName}
+        nextPhase={phase.nextPhaseIfApproved}
+        groups={phase.groupsAssigned}
+        onDeletePhase={() => handleDeletePhase(phase.phaseId)}
+        token={token}
+        showMenu={false}
+        showButtonChip={false}
+      />
+    );
+  }else{
+    return (
+      <Phase
+        key={phase.phaseId}
+        id={idx}
+        phaseId={phase.phaseId}
+        phases={listPhases}
+        phaseName={phase.phaseName}
+        nextPhase={phase.nextPhaseIfApproved}
+        groups={phase.groupsAssigned}
+        onDeletePhase={() => handleDeletePhase(phase.phaseId)}
+        // onDragStart={(e) => onDragStart(e, idx)}
+        // onDragOver={() => onDragOver(idx)}
+        // onDragEnd={onDragEnd}
+        token={token}
+      />
+    );
+  }
+  
 };
 
 

package/src/components/organisms/FullProductNameHeader/index.js

@@ -20,8 +20,8 @@ export const FullProductNameHeader = ({
   productObservation,
   isObservationVisible,
   toggleObservation,
-  handleClickOutside,
-  hideObservation
+  // handleClickOutside,
+   hideObservation
 }) => {
   const [retailers, setRetailers] = useState([]);
 
@@ -62,8 +62,8 @@ export const FullProductNameHeader = ({
         dataProduct={headerData}
         isObservationVisible ={isObservationVisible}
         toggleObservation = {toggleObservation}
-        handleClickOutside ={handleClickOutside}
-        hideObservation={hideObservation}
+        // handleClickOutside ={handleClickOutside}
+         hideObservation={hideObservation}
 
       />
       <div className="features-bar-container">

package/src/components/pages/RetailerProductEdition/index.js

@@ -236,22 +236,22 @@ export const RetailerProductEdition = ({
   const toggleObservation = () => {
     setObservationVisible(!isObservationVisible);
   };
-  const handleClickOutside = (event) => {
-    if (
-      isObservationVisible &&
-      !event.target.closest(".Observation") &&
-      !event.target.closest(".Container")
-    ) {
-      hideObservation();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("click", handleClickOutside);
-    return () => {
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [isObservationVisible]);
+  // const handleClickOutside = (event) => {
+  //   if (
+  //     isObservationVisible &&
+  //     !event.target.closest(".Observation") &&
+  //     !event.target.closest(".Container")
+  //   ) {
+  //     hideObservation();
+  //   }
+  // };
+
+  // useEffect(() => {
+  //   document.addEventListener("click", handleClickOutside);
+  //   return () => {
+  //     document.removeEventListener("click", handleClickOutside);
+  //   };
+  // }, [isObservationVisible]);
 
   const hideObservation = () => {
     setObservationVisible(false);
@@ -1390,8 +1390,8 @@ export const RetailerProductEdition = ({
             }}
             isObservationVisible={isObservationVisible}
             toggleObservation={toggleObservation}
-            handleClickOutside={handleClickOutside}
-            hideObservation={hideObservation}
+            // handleClickOutside={handleClickOutside}
+             hideObservation={hideObservation}
           />
           <FullTabsMenu
             tabsSections={tabsSections}