contentoh-components-library 21.4.97 → 21.4.98

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 || ""),
@@ -69,26 +71,16 @@ var ObservationFlag = function ObservationFlag(_ref) {
       modalData = _useState8[0],
       setModalData = _useState8[1];
 
-  var textareaRef = (0, _react.useRef)(null); // const toggleObservation = () => {
-  //   setObservationVisible(!isObservationVisible);
-  // };
-
+  var textareaRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    var handleClickOutside = function handleClickOutside(event) {
-      if (isObservationVisible && !event.target.closest(".Observation") && !event.target.closest(".Container")) {
-        setObservationVisible(false);
-      }
-    };
-
     document.addEventListener("click", handleClickOutside);
     return function () {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, [isObservationVisible]);
+  }, [isObservationVisible, handleClickOutside]);
   (0, _react.useEffect)(function () {
-    setMaterial(contentObservation || ""); // Establecer material después de montar el componente
-  }, [contentObservation]); // Volver a establecer material cuando contentObservation cambia
-
+    setMaterial(contentObservation || "");
+  }, [contentObservation]);
   (0, _react.useEffect)(function () {
     setCurrentObservation(observation);
   }, [observation]);
@@ -126,7 +118,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/styles.js

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n\n    header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 6px;\n\n      .label-title {\n        width: 100%;\n        text-align: center;\n        font-family: ", ", sans-serif;\n        font-size: 17px;\n        line-height: 1.2;\n        color: #262626;\n        white-space: pre-wrap;\n      }\n\n      & + * {\n        margin-top: 20px;\n      }\n    }\n\n    .iconModal {\n      width: 50px;\n      height: 50px;\n      font-size: 30px;\n      border-width: 4px;\n      margin-bottom: 20px;\n      overflow: hidden;\n\n      &.iconModal-error {\n        background-color: #953737;\n        border-color: #953737;\n        color: white;\n      }\n      &.iconModal-warning {\n        font-size: 27px;\n        padding-bottom: 8px;\n        color: #af9647;\n        border-color: #af9647;\n      }\n      &.iconModal-info {\n        border-color: #9e3e26;\n        color: #9e3e26;\n      }\n      &.iconModal-success {\n      }\n      &.iconModal-successv2{\n        border-color: #85BC5B;\n        color: #85BC5B;\n      }\n    }\n\n    .label-message {\n      width: 100%;\n      text-align: center;\n      font-family: ", ", sans-serif;\n      font-size: 13px;\n      color: #707070;\n      white-space: pre-wrap;\n    }\n\n    .container-customComponent {\n      width: 100%;\n      max-height: 50vh;\n      display: flex;\n      flex-direction: column;\n      margin-top: 20px;\n      padding: 0px 0px;\n      //border: 1px solid red;\n    }\n\n    .container-buttons {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 12px;\n      margin-top: 20px;\n      //border: 1px solid red;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
+var ContainerModal = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  display: grid;\n  place-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n  z-index: 10100;\n\n  .contentModal {\n    width: fit-content;\n    max-width: 80%;\n    min-width: 80px;\n    height: fit-content;\n    max-height: 90%;\n    min-height: 120px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: white;\n    border-radius: 10px;\n    padding: 25px 25px 20px 25px;\n    box-shadow: 0px 2px 4px 0px #00000040;\n\n    header {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: flex-start;\n      gap: 6px;\n\n      .label-title {\n        width: 100%;\n        text-align: center;\n        font-family: ", ", sans-serif;\n        font-size: 17px;\n        line-height: 1.2;\n        color: #262626;\n        white-space: pre-wrap;\n      }\n\n      & + * {\n        margin-top: 20px;\n      }\n    }\n\n    .iconModal {\n      width: 50px;\n      height: 50px;\n      font-size: 30px;\n      border-width: 4px;\n      margin-bottom: 20px;\n      overflow: hidden;\n\n      &.iconModal-error {\n        background-color: #953737;\n        border-color: #953737;\n        color: white;\n      }\n      &.iconModal-warning {\n        font-size: 27px;\n        padding-bottom: 8px;\n        color: #af9647;\n        border-color: #af9647;\n      }\n      &.iconModal-info {\n        border-color: #9e3e26;\n        color: #9e3e26;\n      }\n      &.iconModal-success {\n      }\n      &.iconModal-successv2{\n        border-color: #85BC5B;\n        color: #85BC5B;\n      }\n    }\n\n    .label-message {\n      width: 100%;\n      text-align: center;\n      font-family: ", ", sans-serif;\n      font-size: 13px;\n      color: #707070;\n      white-space: pre-wrap;\n    }\n\n    .container-customComponent {\n      width: 100%;\n      max-height: 50vh;\n      display: flex;\n      flex-direction: column;\n      margin-top: 20px;\n      padding: 0px 0px;\n      //border: 1px solid red;\n    }\n\n    .container-buttons {\n      width: 100%;\n      display: flex;\n      flex-direction: row;\n      justify-content: center;\n      gap: 12px;\n      margin-top: 20px;\n      //border: 1px solid red;\n    }\n  }\n"])), _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular);
 
 exports.ContainerModal = ContainerModal;

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")) {
+      setObservationVisible(false);
+    }
+  };
+
+  (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.98",
   "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,
@@ -30,28 +30,17 @@ export const ObservationFlag = ({
   const [modalData, setModalData] = useState({});
 
   const textareaRef = useRef(null);
-  // const toggleObservation = () => {
-  //   setObservationVisible(!isObservationVisible);
-  // };
+
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (
-        isObservationVisible &&
-        !event.target.closest(".Observation") &&
-        !event.target.closest(".Container")
-      ) {
-        setObservationVisible(false);
-      }
-    };
     document.addEventListener("click", handleClickOutside);
     return () => {
       document.removeEventListener("click", handleClickOutside);
     };
-  }, [isObservationVisible]);
-
+  }, [isObservationVisible, handleClickOutside]);
+  
   useEffect(() => {
-    setMaterial(contentObservation || ""); // Establecer material después de montar el componente
-  }, [contentObservation]); // Volver a establecer material cuando contentObservation cambia
+    setMaterial(contentObservation || "");
+  }, [contentObservation]); 
 
   useEffect(() => {
     setCurrentObservation(observation);
@@ -88,7 +77,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/styles.js

@@ -8,6 +8,7 @@ export const ContainerModal = styled.div`
   display: grid;
   place-items: center;
   background-color: rgba(0, 0, 0, 0.4);
+  z-index: 10100;
 
   .contentModal {
     width: fit-content;

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")
+    ) {
+      setObservationVisible(false);
+    }
+  };
 
+  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}