contentoh-components-library 21.4.124 → 21.4.126

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

@@ -37,7 +37,7 @@ var _GalleryElement = require("../../molecules/GalleryElement");
 
 var _fileSaver = require("file-saver");
 
-var _data = require("../../../global-files/data");
+var _data2 = require("../../../global-files/data");
 
 var _GalleryHeader = require("../../molecules/GalleryHeader");
 
@@ -61,8 +61,6 @@ var _index = require("../../molecules/TagAndInput/index");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
-var _Commentary = require("../../atoms/Commentary");
-
 var _GenericModal = require("../../atoms/GenericModal");
 
 var _ScreenHeader = require("../../atoms/ScreenHeader");
@@ -71,14 +69,16 @@ var _Loading = require("../../atoms/Loading");
 
 var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
 
-var _errorModal = _interopRequireDefault(require("../../../assets/images/genericModal/errorModal.svg"));
-
 var _VersionSelector = require("../../organisms/VersionSelector");
 
 var _customHooks = require("../../../global-files/customHooks");
 
 var _utils = require("./utils");
 
+var _Modal = require("../../organisms/Modal");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var reducerImages = function reducerImages(state, action) {
@@ -202,7 +202,7 @@ var myBucket = new _awsSdk.default.S3({
 });
 
 var RetailerProductEdition = function RetailerProductEdition(_ref) {
-  var _product$retailers, _location$state, _product$services2, _datasheets$, _datasheets$$data, _product$article18, _comment$message;
+  var _product$retailers, _location$state, _location$state2, _product$services2, _datasheets$, _datasheets$$data, _product$article17;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -252,6 +252,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       showModal = _useState14[0],
       setShowModal = _useState14[1];
 
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      showRejectModal = _useState16[0],
+      setShowRejectModal = _useState16[1];
+
   var _useDropzone = (0, _reactDropzone.useDropzone)({
     accept: "image/*",
     noKeyboard: true,
@@ -296,149 +301,149 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       getRootProps = _useDropzone.getRootProps,
       getInputProps = _useDropzone.getInputProps;
 
-  var _useState15 = (0, _react.useState)([]),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      updatedDatasheets = _useState16[0],
-      setUpdatedDatasheets = _useState16[1];
-
   var _useState17 = (0, _react.useState)([]),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      updatedDescriptions = _useState18[0],
-      setUpdatedDescriptions = _useState18[1];
+      updatedDatasheets = _useState18[0],
+      setUpdatedDatasheets = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(false),
+  var _useState19 = (0, _react.useState)([]),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      imagesUploaded = _useState20[0],
-      setImagesUploaded = _useState20[1];
+      updatedDescriptions = _useState20[0],
+      setUpdatedDescriptions = _useState20[1];
 
-  var _useState21 = (0, _react.useState)(),
+  var _useState21 = (0, _react.useState)(false),
       _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      dataImages = _useState22[0],
-      setDataImages = _useState22[1];
+      imagesUploaded = _useState22[0],
+      setImagesUploaded = _useState22[1];
 
-  var _useState23 = (0, _react.useState)(new Array(product === null || product === void 0 ? void 0 : (_product$retailers = product.retailers) === null || _product$retailers === void 0 ? void 0 : _product$retailers.length).fill({
-    percentage: 0
-  })),
+  var _useState23 = (0, _react.useState)(),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      percentages = _useState24[0],
-      setPercentages = _useState24[1]; // const [percentages, setPercentages] = useState([{ retailers: {} }]);
-
+      dataImages = _useState24[0],
+      setDataImages = _useState24[1];
 
-  var _useState25 = (0, _react.useState)(0),
+  var _useState25 = (0, _react.useState)(new Array(product === null || product === void 0 ? void 0 : (_product$retailers = product.retailers) === null || _product$retailers === void 0 ? void 0 : _product$retailers.length).fill({
+    percentage: 0
+  })),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      activePercentage = _useState26[0],
-      setActivePercentage = _useState26[1];
+      percentages = _useState26[0],
+      setPercentages = _useState26[1]; // const [percentages, setPercentages] = useState([{ retailers: {} }]);
+
 
-  var _useState27 = (0, _react.useState)({}),
+  var _useState27 = (0, _react.useState)(0),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      activeRetailer = _useState28[0],
-      setActiveRetailer = _useState28[1];
+      activePercentage = _useState28[0],
+      setActivePercentage = _useState28[1];
 
-  var _useState29 = (0, _react.useState)([]),
+  var _useState29 = (0, _react.useState)({}),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      services = _useState30[0],
-      setServices = _useState30[1];
+      activeRetailer = _useState30[0],
+      setActiveRetailer = _useState30[1];
 
   var _useState31 = (0, _react.useState)([]),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      servicesData = _useState32[0],
-      setServicesData = _useState32[1];
+      services = _useState32[0],
+      setServices = _useState32[1];
 
-  var _useState33 = (0, _react.useState)(""),
+  var _useState33 = (0, _react.useState)([]),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      message = _useState34[0],
-      setMessage = _useState34[1];
+      servicesData = _useState34[0],
+      setServicesData = _useState34[1];
 
-  var _useState35 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected),
+  var _useState35 = (0, _react.useState)(""),
       _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      product = _useState36[0],
-      setProduct = _useState36[1];
+      message = _useState36[0],
+      setMessage = _useState36[1];
 
-  var _useState37 = (0, _react.useState)(null),
+  var _useState37 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected),
       _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      icon = _useState38[0],
-      setIcon = _useState38[1];
+      product = _useState38[0],
+      setProduct = _useState38[1];
 
-  var _useState39 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
+  var _useState39 = (0, _react.useState)(null),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      version = _useState40[0],
-      setVersion = _useState40[1];
+      icon = _useState40[0],
+      setIcon = _useState40[1];
 
-  var _useState41 = (0, _react.useState)({}),
+  var _useState41 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
       _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
-      comments = _useState42[0],
-      setComments = _useState42[1];
+      version = _useState42[0],
+      setVersion = _useState42[1];
 
-  var _useState43 = (0, _react.useState)(""),
+  var _useState43 = (0, _react.useState)({}),
       _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
-      comment = _useState44[0],
-      setComment = _useState44[1];
+      comments = _useState44[0],
+      setComments = _useState44[1];
 
-  var _useState45 = (0, _react.useState)({
+  var _useState45 = (0, _react.useState)(""),
+      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
+      comment = _useState46[0],
+      setComment = _useState46[1];
+
+  var _useState47 = (0, _react.useState)({
     "Ficha técnica": 0,
     Descripción: 0,
     Imágenes: 0
   }),
-      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
-      requiredNull = _useState46[0],
-      setRequiredNull = _useState46[1];
-
-  var _useState47 = (0, _react.useState)(false),
       _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
-      crossComment = _useState48[0],
-      setCrossComment = _useState48[1];
+      requiredNull = _useState48[0],
+      setRequiredNull = _useState48[1];
 
-  var _useState49 = (0, _react.useState)([]),
+  var _useState49 = (0, _react.useState)(false),
       _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
-      userGroups = _useState50[0],
-      setUserGroups = _useState50[1];
+      crossComment = _useState50[0],
+      setCrossComment = _useState50[1];
 
-  var _useState51 = (0, _react.useState)({}),
+  var _useState51 = (0, _react.useState)([]),
       _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
-      assig = _useState52[0],
-      setAssig = _useState52[1];
+      userGroups = _useState52[0],
+      setUserGroups = _useState52[1];
 
-  var _useState53 = (0, _react.useState)([]),
+  var _useState53 = (0, _react.useState)({}),
       _useState54 = (0, _slicedToArray2.default)(_useState53, 2),
-      selectedImages = _useState54[0],
-      setSelectedImages = _useState54[1];
+      assig = _useState54[0],
+      setAssig = _useState54[1];
 
   var _useState55 = (0, _react.useState)([]),
       _useState56 = (0, _slicedToArray2.default)(_useState55, 2),
-      componentsArray = _useState56[0],
-      setComponentsArray = _useState56[1];
+      selectedImages = _useState56[0],
+      setSelectedImages = _useState56[1];
 
-  var _useState57 = (0, _react.useState)(false),
+  var _useState57 = (0, _react.useState)([]),
       _useState58 = (0, _slicedToArray2.default)(_useState57, 2),
-      checkAll = _useState58[0],
-      setCheckAll = _useState58[1];
+      componentsArray = _useState58[0],
+      setComponentsArray = _useState58[1];
 
-  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
-
-  var _useState59 = (0, _react.useState)(true),
+  var _useState59 = (0, _react.useState)(false),
       _useState60 = (0, _slicedToArray2.default)(_useState59, 2),
-      loading = _useState60[0],
-      setLoading = _useState60[1];
+      checkAll = _useState60[0],
+      setCheckAll = _useState60[1];
+
+  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
 
-  var _useState61 = (0, _react.useState)("-"),
+  var _useState61 = (0, _react.useState)(true),
       _useState62 = (0, _slicedToArray2.default)(_useState61, 2),
-      retailerStatus = _useState62[0],
-      setRetailerStatus = _useState62[1];
+      loading = _useState62[0],
+      setLoading = _useState62[1];
 
-  var _useState63 = (0, _react.useState)([]),
+  var _useState63 = (0, _react.useState)("-"),
       _useState64 = (0, _slicedToArray2.default)(_useState63, 2),
-      statusArray = _useState64[0],
-      setStatusArray = _useState64[1];
+      retailerStatus = _useState64[0],
+      setRetailerStatus = _useState64[1];
 
-  var _useState65 = (0, _react.useState)(null),
+  var _useState65 = (0, _react.useState)([]),
       _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
-      socketType = _useState66[0],
-      setSocketType = _useState66[1];
+      statusArray = _useState66[0],
+      setStatusArray = _useState66[1];
 
-  var _useState67 = (0, _react.useState)(loading),
+  var _useState67 = (0, _react.useState)(null),
       _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
-      saving = _useState68[0],
-      setSaving = _useState68[1];
+      socketType = _useState68[0],
+      setSocketType = _useState68[1];
+
+  var _useState69 = (0, _react.useState)(loading),
+      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
+      saving = _useState70[0],
+      setSaving = _useState70[1];
 
   var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
@@ -447,35 +452,88 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
   var shotThd = [58, 59, 60, 61].includes(activeRetailer.id);
 
-  var _useState69 = (0, _react.useState)(null),
-      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
-      auditableVersion = _useState70[0],
-      setAuditableVersion = _useState70[1];
-
-  var _useState71 = (0, _react.useState)([]),
+  var _useState71 = (0, _react.useState)(null),
       _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
-      auditServices = _useState72[0],
-      setAuditServices = _useState72[1];
+      auditableVersion = _useState72[0],
+      setAuditableVersion = _useState72[1];
 
   var _useState73 = (0, _react.useState)([]),
       _useState74 = (0, _slicedToArray2.default)(_useState73, 2),
-      auditDatasheets = _useState74[0],
-      setAuditDatasheets = _useState74[1];
+      auditServices = _useState74[0],
+      setAuditServices = _useState74[1];
 
   var _useState75 = (0, _react.useState)([]),
       _useState76 = (0, _slicedToArray2.default)(_useState75, 2),
-      auditDescriptions = _useState76[0],
-      setAuditDescriptions = _useState76[1];
+      auditDatasheets = _useState76[0],
+      setAuditDatasheets = _useState76[1];
 
   var _useState77 = (0, _react.useState)([]),
       _useState78 = (0, _slicedToArray2.default)(_useState77, 2),
-      auditImages = _useState78[0],
-      setAuditImages = _useState78[1];
+      auditDescriptions = _useState78[0],
+      setAuditDescriptions = _useState78[1];
 
-  var _useState79 = (0, _react.useState)(false),
+  var _useState79 = (0, _react.useState)([]),
       _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
-      compare = _useState80[0],
-      setCompare = _useState80[1];
+      auditImages = _useState80[0],
+      setAuditImages = _useState80[1];
+
+  var _useState81 = (0, _react.useState)(false),
+      _useState82 = (0, _slicedToArray2.default)(_useState81, 2),
+      compare = _useState82[0],
+      setCompare = _useState82[1];
+
+  var _useState83 = (0, _react.useState)(),
+      _useState84 = (0, _slicedToArray2.default)(_useState83, 2),
+      observation = _useState84[0],
+      setObservation = _useState84[1];
+
+  var _useState85 = (0, _react.useState)(false),
+      _useState86 = (0, _slicedToArray2.default)(_useState85, 2),
+      valRejAll = _useState86[0],
+      setValRejAll = _useState86[1];
+
+  var _useState87 = (0, _react.useState)([]),
+      _useState88 = (0, _slicedToArray2.default)(_useState87, 2),
+      desc = _useState88[0],
+      setDesc = _useState88[1];
+
+  var _useState89 = (0, _react.useState)([]),
+      _useState90 = (0, _slicedToArray2.default)(_useState89, 2),
+      fich = _useState90[0],
+      setFich = _useState90[1];
+
+  var _useState91 = (0, _react.useState)([]),
+      _useState92 = (0, _slicedToArray2.default)(_useState91, 2),
+      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);
+  }; // 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]);
+
+
+  var hideObservation = function hideObservation() {
+    setObservationVisible(false);
+  };
 
   (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
     var _ref3, id_article;
@@ -516,7 +574,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               }
 
               _context2.next = 3;
-              return (0, _data.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article, product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category), auditableVersion.version, token);
+              return (0, _data2.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article = product.article) === null || _product$article === void 0 ? void 0 : _product$article.id_article, product === null || product === void 0 ? void 0 : (_product$article2 = product.article) === null || _product$article2 === void 0 ? void 0 : _product$article2.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article3 = product.article) === null || _product$article3 === void 0 ? void 0 : _product$article3.id_category), auditableVersion.version, token);
 
             case 3:
               _auditServices = _context2.sent;
@@ -556,7 +614,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             case 0:
               _context3.prev = 0;
               _context3.next = 3;
-              return (0, _data.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article, product === null || product === void 0 ? void 0 : (_product$article5 = product.article) === null || _product$article5 === void 0 ? void 0 : _product$article5.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article6 = product.article) === null || _product$article6 === void 0 ? void 0 : _product$article6.id_category), version, token);
+              return (0, _data2.getRetailerServices)(product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : _product$article4.id_article, product === null || product === void 0 ? void 0 : (_product$article5 = product.article) === null || _product$article5 === void 0 ? void 0 : _product$article5.category, parseInt(product === null || product === void 0 ? void 0 : (_product$article6 = product.article) === null || _product$article6 === void 0 ? void 0 : _product$article6.id_category), version, token);
 
             case 3:
               _services = _context3.sent;
@@ -585,7 +643,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               headers = {
                 Authorization: token
               };
-              (0, _data.getPercentage)({
+              (0, _data2.getPercentage)({
                 data: data,
                 headers: headers
               }).then(function (res) {
@@ -711,7 +769,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             getComments();
             _context6.t0 = setUserGroups;
             _context6.next = 6;
-            return (0, _data.fetchUsers)(token);
+            return (0, _data2.fetchUsers)(token);
 
           case 6:
             _context6.t1 = _context6.sent;
@@ -1028,6 +1086,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       };
     });
     setSocketType(imageInputs);
+    console.log(images);
   }, [images]);
   var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
     var _images$values3, _images$attrForImgs, _product$article14, _data$articleData, _data$articleData2, _data$updateImages;
@@ -1330,84 +1389,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       default:
         break;
     }
-  }; // const sendToFacilitator = async (result) => {
-  //   setLoading(true);
-  //   try {
-  //     let concept = getConcept(activeTab);
-  //     const productTemp = { ...product };
-  //     const evalStatus = retailerStatus;
-  //     const articleId = product.article.id_article;
-  //     const orderId = product.orderId;
-  //     // const body = {
-  //     //   orderArticleRetailers: [
-  //     //     { orderId, articleId, retailersIds: [activeRetailer.id] },
-  //     //   ],
-  //     //   isAproved: false,
-  //     //   service: concept,
-  //     // };
-  //     const body = {
-  //       articleId: product.article.id_article,
-  //       orderId: product.orderId,
-  //       concept: concept,
-  //       result: result,
-  //       evalStatus: evalStatus,
-  //       retailerId: activeRetailer.id,
-  //     };
-  //     let res;
-  //     let message;
-  //     if (result) {
-  //       body.isAproved = result === "A";
-  //       res = await axios.put(
-  //         `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
-  //         body,
-  //         {
-  //           headers: {
-  //             Authorization: token,
-  //           },
-  //         }
-  //       );
-  //       console.log(JSON.parse(res.data.body), "res");
-  //       getServices();
-  //     } else {
-  //       const specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
-  //       if (specialistDone) {
-  //         message = `${activeTab} enviada a facilitador`;
-  //         getSectionIcon();
-  //       } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
-  //         message = "Evaluación enviada";
-  //         getSectionIcon();
-  //       }
-  //       res = await axios.put(
-  //         `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
-  //         body,
-  //         {
-  //           headers: {
-  //             Authorization: token,
-  //           },
-  //         }
-  //       );
-  //     }
-  //     if (res.data.statusCode === 200) {
-  //       const response = JSON.parse(res.data.body)?.successfulData;
-  //       const statusObject =
-  //         response[`${orderId}-${articleId}-${activeRetailer.id}`];
-  //       productTemp.status = statusObject["generalStatus"];
-  //       productTemp[`${concept}_status`] = statusObject[`${concept}Status`];
-  //       await loadData();
-  //       if (message) setMessage(message);
-  //       sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-  //       setProduct(productTemp);
-  //     }
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  //   setLoading(false);
-  // };
-
+  };
 
   var sendToFacilitator = /*#__PURE__*/function () {
     var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
-      var concept, productTemp, evalStatus, articleId, orderId, data, res, _message, specialistDone, _JSON$parse5, newStatus, newOrderStatus, newArticleStatus;
+      var concept, productTemp, evalStatus, articleId, orderId, data, res, _message, specialistDone, _JSON$parse5, newStatus, newOrderStatus, newArticleStatus, messageToChat, _data;
 
       return _regenerator.default.wrap(function _callee11$(_context11) {
         while (1) {
@@ -1470,39 +1456,59 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
             case 21:
               if (!(res.data.statusCode === 200)) {
-                _context11.next = 30;
+                _context11.next = 34;
                 break;
               }
 
               _JSON$parse5 = JSON.parse(res.data.body), newStatus = _JSON$parse5.newStatus, newOrderStatus = _JSON$parse5.newOrderStatus, newArticleStatus = _JSON$parse5.newArticleStatus;
+              messageToChat = (0, _utils.createMessage)(product.retailers, activeRetailer.id, evalStatus, newStatus, activeTab);
+              _data = {
+                paramsBody: {
+                  id: product.article.id_article,
+                  version: version,
+                  items: [{
+                    type: "status",
+                    value: messageToChat
+                  }],
+                  retailerId: activeRetailer.id,
+                  status: product.status
+                },
+                paramsHeader: {
+                  Authorization: token
+                }
+              };
+              _context11.next = 27;
+              return (0, _utils.sendMessage)(_data);
+
+            case 27:
               if (newOrderStatus) productTemp.status = newArticleStatus[articleId];
               productTemp["".concat(concept, "_status")] = newStatus;
-              _context11.next = 27;
+              _context11.next = 31;
               return loadData();
 
-            case 27:
+            case 31:
               if (_message) setMessage(_message);
               sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
               setProduct(productTemp);
 
-            case 30:
-              _context11.next = 35;
+            case 34:
+              _context11.next = 39;
               break;
 
-            case 32:
-              _context11.prev = 32;
+            case 36:
+              _context11.prev = 36;
               _context11.t0 = _context11["catch"](1);
               console.log(_context11.t0);
 
-            case 35:
+            case 39:
               setLoading(false);
 
-            case 36:
+            case 40:
             case "end":
               return _context11.stop();
           }
         }
-      }, _callee11, null, [[1, 32]]);
+      }, _callee11, null, [[1, 36]]);
     }));
 
     return function sendToFacilitator(_x) {
@@ -1537,55 +1543,33 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   var createComment = /*#__PURE__*/function () {
-    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12(e, body, tab) {
-      var _product$article16;
-
-      var concept, data;
+    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
+      var messages,
+          retailerId,
+          data,
+          _args12 = arguments;
       return _regenerator.default.wrap(function _callee12$(_context12) {
         while (1) {
           switch (_context12.prev = _context12.next) {
             case 0:
-              concept = "";
-              _context12.t0 = activeTab;
-              _context12.next = _context12.t0 === "Ficha técnica" ? 4 : _context12.t0 === "Imágenes" ? 6 : 8;
-              break;
-
-            case 4:
-              concept = "datasheet";
-              return _context12.abrupt("break", 10);
-
-            case 6:
-              concept = "images";
-              return _context12.abrupt("break", 10);
-
-            case 8:
-              concept = "description";
-              return _context12.abrupt("break", 10);
-
-            case 10:
+              messages = _args12.length > 0 && _args12[0] !== undefined ? _args12[0] : [];
+              retailerId = _args12.length > 1 ? _args12[1] : undefined;
               data = {
-                articleId: product === null || product === void 0 ? void 0 : (_product$article16 = product.article) === null || _product$article16 === void 0 ? void 0 : _product$article16.id_article,
-                orderId: product === null || product === void 0 ? void 0 : product.orderId,
-                message: body === null || body === void 0 ? void 0 : body.replace(/<.*?\/?>/gm, ""),
-                concept: concept,
-                version: version
-              };
-              _context12.next = 13;
-              return _axios.default.post("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
-                headers: {
+                paramsBody: {
+                  id: product.article.id_article,
+                  version: version,
+                  items: messages,
+                  retailerId: retailerId,
+                  status: product.status
+                },
+                paramsHeader: {
                   Authorization: token
                 }
-              });
-
-            case 13:
-              _context12.next = 15;
-              return getComments(tab);
-
-            case 15:
+              };
               setMessage("");
-              setComponentsArray([]);
+              return _context12.abrupt("return", (0, _utils.sendMessage)(data));
 
-            case 17:
+            case 5:
             case "end":
               return _context12.stop();
           }
@@ -1593,7 +1577,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       }, _callee12);
     }));
 
-    return function createComment(_x2, _x3, _x4) {
+    return function createComment() {
       return _ref16.apply(this, arguments);
     };
   }();
@@ -1708,7 +1692,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
 
   var setAssignation = /*#__PURE__*/function () {
     var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(assignationType, assignationId) {
-      var _product$article17;
+      var _product$article16;
 
       var concept, productTemp, data;
       return _regenerator.default.wrap(function _callee14$(_context14) {
@@ -1738,7 +1722,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               data = {
                 articleList: [{
                   orderId: product.orderId,
-                  articleId: product === null || product === void 0 ? void 0 : (_product$article17 = product.article) === null || _product$article17 === void 0 ? void 0 : _product$article17.id_article
+                  articleId: product === null || product === void 0 ? void 0 : (_product$article16 = product.article) === null || _product$article16 === void 0 ? void 0 : _product$article16.id_article
                 }],
                 concept: concept,
                 userId: assignationId
@@ -1765,7 +1749,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       }, _callee14);
     }));
 
-    return function setAssignation(_x5, _x6) {
+    return function setAssignation(_x2, _x3) {
       return _ref18.apply(this, arguments);
     };
   }();
@@ -1867,6 +1851,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   };
 
   (0, _react.useEffect)(function () {
+    console.log(servicesData, "servicesData");
     var status = getRetailerStatus(servicesData, activeTab);
     setRetailerStatus(status);
   }, [activeTab, servicesData, activeRetailer]);
@@ -1875,68 +1860,11 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
   }, [services, servicesData, activeTab]);
   (0, _react.useEffect)(function () {
     setSaving(loading);
-  }, [loading]); // const validateAll = async (result) => {
-  //   try {
-  //     setLoading(true);
-  //     const evaluationArray = [];
-  //     let conceptArray = ["description", "datasheet", "images"];
-  //     switch (user.id_role) {
-  //       case 4:
-  //         conceptArray = ["description", "datasheet"];
-  //         break;
-  //       case 5:
-  //         conceptArray = ["images"];
-  //         break;
-  //       default:
-  //         conceptArray = ["description", "datasheet", "images"];
-  //         break;
-  //     }
-  //     const isAproved = result === "A";
-  //     const retailersIds = [];
-  //     servicesData?.forEach((ret) => {
-  //       if (!retailersIds.includes(ret.id_retailer))
-  //         retailersIds.push(ret.id_retailer);
-  //     });
-  //     const body = {
-  //       orderArticleRetailers: [
-  //         {
-  //           orderId: product.id_order ?? product.orderId,
-  //           articleId: product.article.id_article,
-  //           retailersIds,
-  //         },
-  //       ],
-  //       isAproved,
-  //     };
-  //     conceptArray.forEach((concept) => {
-  //       body.service = concept;
-  //       evaluationArray.push(
-  //         axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, body, {
-  //           headers: {
-  //             Authorization: token,
-  //           },
-  //         })
-  //       );
-  //     });
-  //     await Promise.all(evaluationArray);
-  //     const productTemp = product;
-  //     productTemp.status = `${result}A`;
-  //     productTemp.datasheet_status =
-  //       productTemp.datasheet_status === "NA" ? "NA" : `${result}A`;
-  //     productTemp.description_status =
-  //       productTemp.description_status === "NA" ? "NA" : `${result}A`;
-  //     productTemp.images_status =
-  //       productTemp.images_status === "NA" ? "NA" : `${result}A`;
-  //     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-  //     setProduct(productTemp);
-  //     await loadData();
-  //   } catch (error) {
-  //     console.log(error);
-  //   }
-  // };
+  }, [loading]);
 
   var validateAll = /*#__PURE__*/function () {
     var _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(result) {
-      var evaluationArray, conceptArray, productTemp;
+      var evaluationArray, conceptArray, messages, productTemp, messagesResponse;
       return _regenerator.default.wrap(function _callee15$(_context15) {
         while (1) {
           switch (_context15.prev = _context15.next) {
@@ -1962,6 +1890,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               return _context15.abrupt("break", 13);
 
             case 13:
+              messages = [];
               servicesData === null || servicesData === void 0 ? void 0 : servicesData.forEach(function (ret) {
                 if (conceptArray.includes(ret.service)) {
                   var _product$id_order;
@@ -1981,42 +1910,82 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
                   }));
                 }
               });
-              _context15.next = 16;
+              _context15.next = 17;
               return Promise.all(evaluationArray);
 
-            case 16:
+            case 17:
               productTemp = product;
               productTemp.status = "".concat(result, "A");
-              productTemp.datasheet_status = productTemp.datasheet_status === "NA" ? "NA" : "".concat(result, "A");
-              productTemp.description_status = productTemp.description_status === "NA" ? "NA" : "".concat(result, "A");
-              productTemp.images_status = productTemp.images_status === "NA" ? "NA" : "".concat(result, "A");
+              productTemp.datasheet_status = productTemp.datasheet_status === "NS" ? "NS" : "".concat(result, "A");
+              productTemp.description_status = productTemp.description_status === "NS" ? "NS" : "".concat(result, "A");
+              productTemp.images_status = productTemp.images_status === "NS" ? "NS" : "".concat(result, "A");
               sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
               setProduct(productTemp);
-              _context15.next = 25;
+              _context15.next = 26;
+              return Promise.all(messages);
+
+            case 26:
+              messagesResponse = _context15.sent;
+              _context15.next = 29;
               return loadData();
 
-            case 25:
-              _context15.next = 30;
+            case 29:
+              _context15.next = 34;
               break;
 
-            case 27:
-              _context15.prev = 27;
+            case 31:
+              _context15.prev = 31;
               _context15.t1 = _context15["catch"](0);
               console.log(_context15.t1);
 
-            case 30:
+            case 34:
             case "end":
               return _context15.stop();
           }
         }
-      }, _callee15, null, [[0, 27]]);
+      }, _callee15, null, [[0, 31]]);
     }));
 
-    return function validateAll(_x7) {
+    return function validateAll(_x4) {
       return _ref19.apply(this, arguments);
     };
   }();
 
+  var getObservation = /*#__PURE__*/function () {
+    var _ref20 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16() {
+      var response, parseData;
+      return _regenerator.default.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              _context16.next = 2;
+              return _axios.default.get("".concat(process.env.REACT_APP_READ_OBSERVATION, "?articleId=").concat(product.article.id_article, "&orderId=").concat(product === null || product === void 0 ? void 0 : product.orderId), {
+                headers: {
+                  Authorization: sessionStorage.getItem("jwt")
+                }
+              });
+
+            case 2:
+              response = _context16.sent;
+              parseData = JSON.parse(response.data.body).data[0];
+              setObservation(parseData.observations);
+
+            case 5:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    }));
+
+    return function getObservation() {
+      return _ref20.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    getObservation();
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     headerTop: headerTop,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
@@ -2025,8 +1994,10 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       setCompare: setCompare,
       isAuditor: [1, 6].includes(user.id_role),
       withChat: location === null || location === void 0 ? void 0 : (_location$state = location.state) === null || _location$state === void 0 ? void 0 : _location$state.withChat,
-      productSelected: productSelected,
-      token: token
+      chatType: location === null || location === void 0 ? void 0 : (_location$state2 = location.state) === null || _location$state2 === void 0 ? void 0 : _location$state2.chatType,
+      productSelected: product,
+      token: token,
+      activeRetailer: activeRetailer
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "data-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -2059,6 +2030,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
         className: "product-information",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
           headerData: product,
+          productObservation: observation,
           percent: activePercentage,
           activeRetailer: activeRetailer,
           servicesData: servicesData,
@@ -2068,27 +2040,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             sendToFacilitator("A");
           },
           reject: function reject() {
-            sendToFacilitator("R");
-            setMessage("Rechazado");
-            setComponentsArray([/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: _errorModal.default
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-              text: "Agrega tu comentarios para enviar el rechazo",
-              headerType: "input-name-header",
-              color: "white"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
-              label: "Caja de Comentario",
-              inputType: "textarea",
-              inputId: "modal-commentary-box",
-              index: 0,
-              color: "white"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: "general-default-button",
-              label: "Enviar comentario",
-              onClick: function onClick(e) {
-                return createComment(e, document.querySelector("#modal-commentary-box .ql-container .ql-editor > p").innerHTML, activeTab);
-              }
-            })]);
+            setShowRejectModal(true);
           },
           showApproveRejectAll: approveRejectAllButtons() && (auditorAssigned() || userAssigned()),
           showValidationButtons: approveRejectButtons() && (auditorAssigned() || userAssigned()),
@@ -2096,28 +2048,13 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
             return validateAll("A");
           },
           rejectAll: function rejectAll() {
-            validateAll("R");
-            setMessage("Rechazado");
-            setComponentsArray([/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              src: _errorModal.default
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-              text: "Agrega tu comentarios para enviar el rechazo",
-              headerType: "input-name-header",
-              color: "white"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
-              label: "Caja de Comentario",
-              inputType: "textarea",
-              inputId: "modal-commentary-box",
-              index: 0,
-              color: "white"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: "general-default-button",
-              label: "Enviar comentario",
-              onClick: function onClick(e) {
-                return createComment(e, document.querySelector("#modal-commentary-box .ql-container .ql-editor > p").innerHTML, activeTab);
-              }
-            })]);
-          }
+            setShowRejectModal(true);
+            setValRejAll(true);
+          },
+          isObservationVisible: isObservationVisible,
+          toggleObservation: toggleObservation // handleClickOutside={handleClickOutside}
+          ,
+          hideObservation: hideObservation
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
           tabsSections: tabsSections,
           status: retailerStatus,
@@ -2131,6 +2068,12 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
           isRetailer: isRetailer,
           showSaveButton: auditorAssigned() || userAssigned(),
           version: version,
+          desc: desc,
+          setDesc: setDesc,
+          fich: fich,
+          setFich: setFich,
+          imag: imag,
+          setImag: setImag,
           updatedDescriptions: updatedDescriptions,
           setUpdatedDescriptions: setUpdatedDescriptions,
           updatedDatasheets: updatedDatasheets,
@@ -2188,7 +2131,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               auditInputGroup: auditDescriptions[0],
               updatedDescriptions: updatedDescriptions,
               setUpdatedDescriptions: setUpdatedDescriptions,
-              articleId: product === null || product === void 0 ? void 0 : (_product$article18 = product.article) === null || _product$article18 === void 0 ? void 0 : _product$article18.id_article,
+              articleId: product === null || product === void 0 ? void 0 : (_product$article17 = product.article) === null || _product$article17 === void 0 ? void 0 : _product$article17.id_article,
               version: version,
               dinamicHeight: true,
               compare: compare
@@ -2209,57 +2152,15 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
               headerType: "input-name-header"
             }))]
           })
-        }), (userAssigned(activeTab) || auditorAssigned()) && product["".concat(getConcept(activeTab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        }), (userAssigned(activeTab) || auditorAssigned()) && product["".concat(getConcept(activeTab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "commentary-box",
-          children: [!comment ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "commentary",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
-              label: "Caja de Comentario",
-              inputType: "textarea",
-              inputCols: 80,
-              inputRows: 4,
-              inputId: "commentary-box",
-              index: 0
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "buttons-box",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-                buttonType: "general-transparent-button",
-                label: "Enviar comentario",
-                onClick: function onClick(e) {
-                  return createComment(e, document.querySelector("#commentary-box .ql-container .ql-editor > p").innerHTML, activeTab);
-                }
-              })
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "feedback-box",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Commentary.Commentary, {
-              comment: comment === null || comment === void 0 ? void 0 : (_comment$message = comment.message) === null || _comment$message === void 0 ? void 0 : _comment$message.replace(/<.*?\/?>/gm, ""),
-              reviewed: crossComment
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: "circular-button accept-button",
-              onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16() {
-                return _regenerator.default.wrap(function _callee16$(_context16) {
-                  while (1) {
-                    switch (_context16.prev = _context16.next) {
-                      case 0:
-                        setCrossComment(true);
-                        commentRevised();
-
-                      case 2:
-                      case "end":
-                        return _context16.stop();
-                    }
-                  }
-                }, _callee16);
-              }))
-            })]
-          }), [7, 8].includes(user.id_role) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+          children: [7, 8].includes(user.id_role) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
             buttonType: evaluationFinished(user.id_role, activeTab, statusArray) && requiredNull[activeTab] === 0 ? "general-green-button" : "general-button-disabled",
             label: "Enviar evaluación",
             onClick: function onClick() {
               return sendToFacilitator();
             }
-          })]
+          })
         })]
       })]
     }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
@@ -2288,6 +2189,53 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
       currentVersion: version,
       setShowVersionSelector: setShowVersionSelector,
       jwt: token
+    }), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      title: "Agregar mensaje de rechazo para ".concat(activeTab === null || activeTab === void 0 ? void 0 : activeTab.toLowerCase()),
+      show: showRejectModal,
+      customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
+        inputType: "textarea",
+        inputId: "modal-message-box",
+        index: 0,
+        color: "white"
+      }),
+      buttons: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "white",
+        label: "Cancelar",
+        size: 12,
+        onClick: function onClick() {
+          setShowRejectModal(false);
+        }
+      }, "btn-Cancelar"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        type: "pink",
+        label: "Aceptar",
+        size: 12,
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17() {
+          var body, messages;
+          return _regenerator.default.wrap(function _callee17$(_context17) {
+            while (1) {
+              switch (_context17.prev = _context17.next) {
+                case 0:
+                  body = document.querySelector("#modal-message-box .ql-container .ql-editor > p").innerHTML;
+                  messages = [{
+                    type: "message",
+                    value: body === null || body === void 0 ? void 0 : body.replace(/<.*?\/?>/gm, "")
+                  }];
+                  _context17.next = 4;
+                  return createComment(messages, activeRetailer.id);
+
+                case 4:
+                  valRejAll ? validateAll("R") : sendToFacilitator("R");
+                  setMessage("Rechazado");
+                  setShowRejectModal(false);
+
+                case 7:
+                case "end":
+                  return _context17.stop();
+              }
+            }
+          }, _callee17);
+        }))
+      }, "btn-Aceptar")]
     })]
   });
 };