contentoh-components-library 21.4.96 → 21.4.98

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

@@ -44,58 +44,43 @@ var ObservationFlag = function ObservationFlag(_ref) {
 
   var observation = _ref.observation,
       contentObservation = _ref.contentObservation,
-      dataProduct = _ref.dataProduct;
-  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);
-
-  var _useState = (0, _react.useState)(false),
+      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 _useState = (0, _react.useState)(contentObservation || ""),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isObservationVisible = _useState2[0],
-      setObservationVisible = _useState2[1];
+      material = _useState2[0],
+      setMaterial = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(contentObservation || ""),
+  var _useState3 = (0, _react.useState)(observation),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      material = _useState4[0],
-      setMaterial = _useState4[1];
+      currentObservation = _useState4[0],
+      setCurrentObservation = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(observation),
+  var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      currentObservation = _useState6[0],
-      setCurrentObservation = _useState6[1];
+      showModal = _useState6[0],
+      setShowModal = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)({}),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      showModal = _useState8[0],
-      setShowModal = _useState8[1];
-
-  var _useState9 = (0, _react.useState)({}),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      modalData = _useState10[0],
-      setModalData = _useState10[1];
+      modalData = _useState8[0],
+      setModalData = _useState8[1];
 
   var textareaRef = (0, _react.useRef)(null);
-
-  var toggleObservation = function toggleObservation() {
-    console.log("VENTANA");
-    evt.stopPropagation();
-    setObservationVisible(!isObservationVisible);
-  };
-
   (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]);
@@ -133,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

@@ -26,7 +26,11 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
       date = _ref.date,
       percentRequired = _ref.percentRequired,
       productObservation = _ref.productObservation,
-      dataProduct = _ref.dataProduct;
+      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, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
@@ -41,7 +45,11 @@ var ProductNameHeader = function ProductNameHeader(_ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.ObservationFlag, {
       observation: typeFlag,
       contentObservation: productObservation,
-      dataProduct: dataProduct
+      dataProduct: dataProduct,
+      isObservationVisible: isObservationVisible,
+      toggleObservation: toggleObservation,
+      handleClickOutside: handleClickOutside,
+      hideObservation: hideObservation
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
       headerType: "date-header",
       text: date

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

@@ -35,7 +35,11 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       rejectAll = _ref.rejectAll,
       servicesData = _ref.servicesData,
       showApproveRejectAll = _ref.showApproveRejectAll,
-      productObservation = _ref.productObservation;
+      productObservation = _ref.productObservation,
+      isObservationVisible = _ref.isObservationVisible,
+      toggleObservation = _ref.toggleObservation,
+      handleClickOutside = _ref.handleClickOutside,
+      hideObservation = _ref.hideObservation;
 
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -71,7 +75,11 @@ var FullProductNameHeader = function FullProductNameHeader(_ref) {
       priority: headerData === null || headerData === void 0 ? void 0 : headerData.prio,
       productObservation: productObservation,
       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
+      dataProduct: headerData,
+      isObservationVisible: isObservationVisible,
+      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

@@ -507,6 +507,32 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       imag = _useState92[0],
       setImag = _useState92[1];
 
+  var _useState93 = (0, _react.useState)(false),
+      _useState94 = (0, _slicedToArray2.default)(_useState93, 2),
+      isObservationVisible = _useState94[0],
+      setObservationVisible = _useState94[1];
+
+  var toggleObservation = function toggleObservation() {
+    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;
 
@@ -2022,7 +2048,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           rejectAll: function rejectAll() {
             setShowRejectModal(true);
             setValRejAll(true);
-          }
+          },
+          isObservationVisible: isObservationVisible,
+          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.96",
+  "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,6 +13,7 @@ export const ObservationFlag = ({
   observation,
   contentObservation,
   dataProduct,
+  isObservationVisible, toggleObservation,handleClickOutside,hideObservation
 }) => {
   const PriorityFlags = {
     ["none"]: without,
@@ -21,7 +22,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);
 
@@ -29,30 +30,17 @@ export const ObservationFlag = ({
   const [modalData, setModalData] = useState({});
 
   const textareaRef = useRef(null);
-  const toggleObservation = () => {
-    console.log("VENTANA");
-    evt.stopPropagation();
-    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);
@@ -89,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

@@ -13,6 +13,10 @@ export const ProductNameHeader = ({
   percentRequired,
   productObservation,
   dataProduct,
+  isObservationVisible,
+  toggleObservation,
+  handleClickOutside,
+  hideObservation
 }) => {
   const typeFlag =
     productObservation !== null && productObservation !== "" ? "high" : "low";
@@ -30,6 +34,10 @@ export const ProductNameHeader = ({
         observation={typeFlag}
         contentObservation={productObservation}
         dataProduct={dataProduct}
+        isObservationVisible ={isObservationVisible}
+        toggleObservation = {toggleObservation}
+        handleClickOutside = {handleClickOutside}
+        hideObservation={hideObservation}
       />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

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

@@ -18,6 +18,10 @@ export const FullProductNameHeader = ({
   servicesData,
   showApproveRejectAll,
   productObservation,
+  isObservationVisible,
+  toggleObservation,
+  handleClickOutside,
+  hideObservation
 }) => {
   const [retailers, setRetailers] = useState([]);
 
@@ -56,6 +60,11 @@ export const FullProductNameHeader = ({
         productObservation={productObservation}
         date={getTime(headerData?.article?.timestamp || headerData?.timestamp)}
         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

@@ -231,6 +231,32 @@ export const RetailerProductEdition = ({
   const [fich, setFich] = useState([]);
   const [imag, setImag] = useState([]);
 
+  const [isObservationVisible, setObservationVisible] = useState(false);
+
+  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 || {};
     if (id_article)
@@ -1362,6 +1388,10 @@ export const RetailerProductEdition = ({
               setShowRejectModal(true);
               setValRejAll(true);
             }}
+            isObservationVisible={isObservationVisible}
+            toggleObservation={toggleObservation}
+            handleClickOutside={handleClickOutside}
+            hideObservation={hideObservation}
           />
           <FullTabsMenu
             tabsSections={tabsSections}