contentoh-components-library 21.4.97 → 21.4.99

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

@@ -46,7 +46,9 @@ var ObservationFlag = function ObservationFlag(_ref) {
       contentObservation = _ref.contentObservation,
       dataProduct = _ref.dataProduct,
       isObservationVisible = _ref.isObservationVisible,
-      toggleObservation = _ref.toggleObservation;
+      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 _useState = (0, _react.useState)(contentObservation || ""),
@@ -86,9 +88,14 @@ var ObservationFlag = function ObservationFlag(_ref) {
     };
   }, [isObservationVisible]);
   (0, _react.useEffect)(function () {
-    setMaterial(contentObservation || ""); // Establecer material después de montar el componente
-  }, [contentObservation]); // Volver a establecer material cuando contentObservation cambia
-
+    document.addEventListener("click", handleClickOutside);
+    return function () {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible, handleClickOutside]);
+  (0, _react.useEffect)(function () {
+    setMaterial(contentObservation || "");
+  }, [contentObservation]);
   (0, _react.useEffect)(function () {
     setCurrentObservation(observation);
   }, [observation]);
@@ -126,7 +133,7 @@ var ObservationFlag = function ObservationFlag(_ref) {
               setShowModal(true);
               setModalData(response.data.statusCode === 200 ? succesResponse : errorResponse);
               setCurrentObservation(material !== "" ? "high" : "low");
-              setObservationVisible(false);
+              hideObservation();
               return _context.abrupt("return", response);
 
             case 14:

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

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

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

@@ -37,7 +37,9 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       showApproveRejectAll = _ref.showApproveRejectAll,
       productObservation = _ref.productObservation,
       isObservationVisible = _ref.isObservationVisible,
-      toggleObservation = _ref.toggleObservation;
+      toggleObservation = _ref.toggleObservation,
+      handleClickOutside = _ref.handleClickOutside,
+      hideObservation = _ref.hideObservation;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -75,7 +77,9 @@ 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
+      toggleObservation: toggleObservation,
+      handleClickOutside: handleClickOutside,
+      hideObservation: hideObservation
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "features-bar-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FeaturesBar.FeaturesBar, {

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

@@ -47,7 +47,7 @@ var Modal = function Modal(props) {
     timeout: 400,
     style: {
       backgroundColor: "transparent",
-      zIndex: 10
+      zIndex: 10100
     },
     onClick: function onClick(event) {
       return onClickModal && onClickModal(event);

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

@@ -516,6 +516,23 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
     setObservationVisible(!isObservationVisible);
   };
 
+  var handleClickOutside = function handleClickOutside(event) {
+    if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
+      hideObservation();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener("click", handleClickOutside);
+    return function () {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible]);
+
+  var hideObservation = function hideObservation() {
+    setObservationVisible(false);
+  };
+
   (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var _ref3, id_article;
 
@@ -2033,7 +2050,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             setValRejAll(true);
           },
           isObservationVisible: isObservationVisible,
-          toggleObservation: toggleObservation
+          toggleObservation: toggleObservation,
+          handleClickOutside: handleClickOutside,
+          hideObservation: hideObservation
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
           tabsSections: tabsSections,
           status: retailerStatus,

package/package.json

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

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

@@ -13,7 +13,7 @@ export const ObservationFlag = ({
   observation,
   contentObservation,
   dataProduct,
-  isObservationVisible, toggleObservation,
+  isObservationVisible, toggleObservation,handleClickOutside,hideObservation
 }) => {
   const PriorityFlags = {
     ["none"]: without,
@@ -48,10 +48,16 @@ export const ObservationFlag = ({
       document.removeEventListener("click", handleClickOutside);
     };
   }, [isObservationVisible]);
-
   useEffect(() => {
-    setMaterial(contentObservation || ""); // Establecer material después de montar el componente
-  }, [contentObservation]); // Volver a establecer material cuando contentObservation cambia
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [isObservationVisible, handleClickOutside]);
+  
+  useEffect(() => {
+    setMaterial(contentObservation || "");
+  }, [contentObservation]); 
 
   useEffect(() => {
     setCurrentObservation(observation);
@@ -88,7 +94,7 @@ export const ObservationFlag = ({
         response.data.statusCode === 200 ? succesResponse : errorResponse
       );
       setCurrentObservation(material !== "" ? "high" : "low");
-      setObservationVisible(false);
+      hideObservation(); 
       return response;
     } catch (err) {
       console.log(err);

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

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

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

@@ -19,7 +19,9 @@ export const FullProductNameHeader = ({
   showApproveRejectAll,
   productObservation,
   isObservationVisible,
-  toggleObservation
+  toggleObservation,
+  handleClickOutside,
+  hideObservation
 }) => {
   const [retailers, setRetailers] = useState([]);
 
@@ -60,6 +62,9 @@ export const FullProductNameHeader = ({
         dataProduct={headerData}
         isObservationVisible ={isObservationVisible}
         toggleObservation = {toggleObservation}
+        handleClickOutside ={handleClickOutside}
+        hideObservation={hideObservation}
+
       />
       <div className="features-bar-container">
         <FeaturesBar

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

@@ -40,7 +40,7 @@ export const Modal = (props) => {
       timeout={400}
       style={{
         backgroundColor: "transparent",
-        zIndex: 10,
+        zIndex: 10100,
       }}
       onClick={(event) => onClickModal && onClickModal(event)}
     >

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

@@ -236,7 +236,26 @@ 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 hideObservation = () => {
+    setObservationVisible(false);
+  };
 
   useEffect(async () => {
     const { id_article } = product?.article || {};
@@ -1371,6 +1390,8 @@ export const RetailerProductEdition = ({
             }}
             isObservationVisible={isObservationVisible}
             toggleObservation={toggleObservation}
+            handleClickOutside={handleClickOutside}
+            hideObservation={hideObservation}
           />
           <FullTabsMenu
             tabsSections={tabsSections}