contentoh-components-library 21.5.94 → 21.5.96

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

@@ -9,457 +9,247 @@ exports.RetailerProductEdition = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _styles = require("./styles");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _HeaderTop = require("../../molecules/HeaderTop");
-
-var _ImagePreviewer = require("../../organisms/ImagePreviewer");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
 
-var _ImageDataTable = require("../../organisms/ImageDataTable");
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
-var _FullProductNameHeader = require("../../organisms/FullProductNameHeader");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
-var _FullTabsMenu = require("../../organisms/FullTabsMenu");
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
-var _InputGroup = require("../../organisms/InputGroup");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = require("react");
 
-var _GalleryElement = require("../../molecules/GalleryElement");
-
-var _fileSaver = require("file-saver");
-
-var _Commentary = require("../../atoms/Commentary");
-
-var _data2 = require("../../../global-files/data");
-
-var _GalleryHeader = require("../../molecules/GalleryHeader");
-
-var _ProductImageModal = require("../../organisms/ProductImageModal");
-
-var _reactDropzone = require("react-dropzone");
-
 var _axios = _interopRequireDefault(require("axios"));
 
-var _uuid = require("uuid");
+var _reactDropzone = require("react-dropzone");
 
-var _awsSdk = _interopRequireDefault(require("aws-sdk"));
+var _fileSaver = require("file-saver");
 
-var _attributesSent = _interopRequireDefault(require("../../../assets/images/modalsSVGs/attributesSent.svg"));
+var _providerProductEdition = require("./context/provider-product-edition.context");
 
-var _descriptionSent = _interopRequireDefault(require("../../../assets/images/modalsSVGs/descriptionSent.svg"));
+var _utils = require("./utils");
 
-var _uploadingImages = _interopRequireDefault(require("../../../assets/images/modalsSVGs/uploadingImages.svg"));
+var _data = require("../../../global-files/data");
 
-var _index = require("../../molecules/TagAndInput/index");
+var _customHooks = require("../../../global-files/customHooks");
 
 var _GeneralButton = require("../../atoms/GeneralButton");
 
 var _GenericModal = require("../../atoms/GenericModal");
 
-var _ScreenHeader = require("../../atoms/ScreenHeader");
-
 var _Loading = require("../../atoms/Loading");
 
-var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
-
-var _VersionSelector = require("../../organisms/VersionSelector");
-
-var _customHooks = require("../../../global-files/customHooks");
-
-var _utils = require("./utils");
-
-var _Modal = require("../../organisms/Modal");
+var _ScreenHeader = require("../../atoms/ScreenHeader");
 
 var _ButtonV = require("../../atoms/ButtonV2");
 
-var _generateThumnail = _interopRequireDefault(require("./generateThumnail"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var reducerImages = function reducerImages(state, action) {
-  var _action$init, _action$init$inputsBy;
-
-  var values = state.values,
-      attrForImgs = state.attrForImgs,
-      inputsByRetailer = state.inputsByRetailer;
-
-  switch (action.action) {
-    case "init":
-      var newInputsByRetailer = {};
-      action === null || action === void 0 ? void 0 : (_action$init = action.init) === null || _action$init === void 0 ? void 0 : (_action$init$inputsBy = _action$init.inputsByRetailer) === null || _action$init$inputsBy === void 0 ? void 0 : _action$init$inputsBy.forEach(function (inputs) {
-        inputs === null || inputs === void 0 ? void 0 : inputs.forEach(function (input) {
-          if (!newInputsByRetailer["".concat(input.id_retailer)]) newInputsByRetailer["".concat(input.id_retailer)] = [];
-          newInputsByRetailer["".concat(input.id_retailer)].push(input);
-        });
-      });
-      inputsByRetailer = newInputsByRetailer;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, action.init), {}, {
-        inputsByRetailer: inputsByRetailer,
-        valuesInitial: action.init.values,
-        inputsInitial: action.init.inputs
-      });
+var _GalleryElement = require("../../molecules/GalleryElement");
 
-    case "addImg":
-      values = [].concat((0, _toConsumableArray2.default)(values), [action.img]);
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        values: values
-      });
+var _GalleryHeader = require("../../molecules/GalleryHeader");
 
-    case "changeImageInfo":
-      values[action.index][action.attribute] = action.value;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        values: values
-      });
+var _HeaderTop = require("../../molecules/HeaderTop");
 
-    case "changeShotType":
-      values[action.index][action.attribute] = action.value;
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        values: values
-      });
+var _index = require("../../molecules/TagAndInput/index");
 
-    case "changeAttrValue":
-      var index = attrForImgs.general.findIndex(function (f) {
-        return f.id === action.id;
-      });
+var _FullProductNameHeader = require("../../organisms/FullProductNameHeader");
 
-      if (index !== -1) {
-        attrForImgs.general[index].value = action.value;
-      }
+var _FullTabsMenu = require("../../organisms/FullTabsMenu");
 
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        attrForImgs: attrForImgs,
-        values: values
-      });
+var _ImageDataTable = require("../../organisms/ImageDataTable");
 
-    case "deleteImage":
-      values = values.filter(function (value) {
-        return action.selectedImages.indexOf(value) === -1;
-      });
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-        values: values
-      });
+var _ImagePreviewer = require("../../organisms/ImagePreviewer");
 
-    case "orderImages":
-      {
-        var _inputsByRetailer = state.inputsByRetailer,
-            valuesInitial = state.valuesInitial,
-            inputsInitial = state.inputsInitial,
-            inputs = state.inputs;
+var _InputGroup = require("../../organisms/InputGroup");
 
-        try {
-          var _inputsByRetailer$act;
+var _ProductImageModal = require("../../organisms/ProductImageModal");
 
-          var orderedImages = [];
-          var imageIdArray = [];
+var _VersionSelector = require("../../organisms/VersionSelector");
 
-          if (action !== null && action !== void 0 && action.retailerId && !_inputsByRetailer[action.retailerId]) {
-            _inputsByRetailer[action.retailerId] = [];
-          }
+var _Modal = require("../../organisms/Modal");
 
-          action.retailerId && ((_inputsByRetailer$act = _inputsByRetailer[action.retailerId]) === null || _inputsByRetailer$act === void 0 ? void 0 : _inputsByRetailer$act.filter(function (input) {
-            imageIdArray.push(input.id_image);
-            valuesInitial.forEach( /*#__PURE__*/function () {
-              var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(value) {
-                return _regenerator.default.wrap(function _callee2$(_context2) {
-                  while (1) {
-                    switch (_context2.prev = _context2.next) {
-                      case 0:
-                        if (value.ext == "mp4") {
-                          convertirVideoABase64("https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + value.srcDB).then( /*#__PURE__*/function () {
-                            var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(base64) {
-                              var videoSrc;
-                              return _regenerator.default.wrap(function _callee$(_context) {
-                                while (1) {
-                                  switch (_context.prev = _context.next) {
-                                    case 0:
-                                      videoSrc = "data:video/mp4;base64," + base64.split(",")[1]; // Añade el tipo MIME adecuado
-
-                                      _context.next = 3;
-                                      return (0, _generateThumnail.default)(videoSrc, 2);
-
-                                    case 3:
-                                      value.src = _context.sent;
-
-                                    case 4:
-                                    case "end":
-                                      return _context.stop();
-                                  }
-                                }
-                              }, _callee);
-                            }));
-
-                            return function (_x2) {
-                              return _ref2.apply(this, arguments);
-                            };
-                          }()).catch(function (error) {
-                            console.error("Error:", error);
-                          });
-                        }
-
-                        if (value.image_id === input.id_image) orderedImages.push(value);
-
-                      case 2:
-                      case "end":
-                        return _context2.stop();
-                    }
-                  }
-                }, _callee2);
-              }));
+var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
 
-              return function (_x) {
-                return _ref.apply(this, arguments);
-              };
-            }());
-          }));
-          inputs = inputsInitial === null || inputsInitial === void 0 ? void 0 : inputsInitial.filter(function (input) {
-            return imageIdArray.includes(input.id);
-          });
-          values = orderedImages.length > 0 ? orderedImages : [];
-        } catch (error) {
-          console.log(error);
-        }
+var _errorModal = _interopRequireDefault(require("../../../assets/images/genericModal/errorModal.svg"));
 
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
-          values: values,
-          inputs: inputs
-        });
-      }
+var _genericModalWarning = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalWarning.svg"));
 
-    default:
-      return state;
-  }
-};
+var _attributesSent = _interopRequireDefault(require("../../../assets/images/modalsSVGs/attributesSent.svg"));
 
-var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
-var REGION = "us-east-1";
+var _descriptionSent = _interopRequireDefault(require("../../../assets/images/modalsSVGs/descriptionSent.svg"));
 
-function convertirVideoABase64(url) {
-  return new Promise(function (resolve, reject) {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", url, true);
-    xhr.responseType = "blob";
+var _uploadingImages = _interopRequireDefault(require("../../../assets/images/modalsSVGs/uploadingImages.svg"));
 
-    xhr.onload = function () {
-      if (xhr.status === 200) {
-        var blob = xhr.response;
-        var reader = new FileReader();
+var _styles = require("./styles");
 
-        reader.onloadend = function () {
-          resolve(reader.result);
-        };
+var _Commentary = require("../../atoms/Commentary");
 
-        reader.readAsDataURL(blob);
-      } else {
-        reject(new Error("Error al cargar el video"));
-      }
-    };
+var _AiProductEdition = require("../../../contexts/AiProductEdition");
 
-    xhr.onerror = function () {
-      reject(new Error("Error de red al cargar el video"));
-    };
+var _ChangeStatusModal = _interopRequireDefault(require("../../organisms/ChangeStatusModal"));
 
-    xhr.send();
-  });
-}
-
-function obtenerDuracionVideoBase64(base64Data) {
-  return new Promise(function (resolve, reject) {
-    var video = document.createElement("video");
-    video.src = base64Data;
-    video.addEventListener("loadedmetadata", function () {
-      resolve(video.duration);
-    });
-    video.addEventListener("error", reject);
-  });
-}
+var _material = require("@mui/material");
 
-_awsSdk.default.config.update({
-  accessKeyId: process.env.REACT_APP_KUTS3,
-  secretAccessKey: process.env.REACT_APP_AKUTS3
-});
+var _jsxRuntime = require("react/jsx-runtime");
 
-var myBucket = new _awsSdk.default.S3({
-  params: {
-    Bucket: S3_BUCKET
-  },
-  region: REGION
-});
+var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
+  var _location$state, _location$state2, _state$active_retaile4, _state$active_retaile5, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product8, _state$active_retaile6, _state$active_retaile7, _state$active_retaile8, _state$active_retaile9, _state$product9, _state$product10, _state$product11, _state$datasheets_inp, _state$datasheets_inp2, _state$product12, _state$images_values12, _state$comment;
+
+  var tabsSections = _ref.tabsSections,
+      _ref$productSelected = _ref.productSelected,
+      productSelected = _ref$productSelected === void 0 ? {} : _ref$productSelected,
+      _ref$user = _ref.user,
+      user = _ref$user === void 0 ? {} : _ref$user,
+      token = _ref.token,
+      location = _ref.location;
+
+  var _useProviderProductEd = (0, _providerProductEdition.useProviderProductEdition)(),
+      state = _useProviderProductEd.state,
+      dispatch = _useProviderProductEd.dispatch,
+      saveDatasheets = _useProviderProductEd.saveDatasheets,
+      saveDescriptions = _useProviderProductEd.saveDescriptions,
+      updateImages = _useProviderProductEd.updateImages,
+      saveImageAttrs = _useProviderProductEd.saveImageAttrs,
+      deleteImages = _useProviderProductEd.deleteImages,
+      handleOnDownloadImages = _useProviderProductEd.handleOnDownloadImages,
+      createComment = _useProviderProductEd.createComment;
 
-var RetailerProductEdition = function RetailerProductEdition(_ref3) {
-  var _product$retailers, _location$state, _location$state2, _product$services2, _datasheets$, _datasheets$$data, _product$article22;
+  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
 
-  var tabsSections = _ref3.tabsSections,
-      _ref3$productSelected = _ref3.productSelected,
-      productSelected = _ref3$productSelected === void 0 ? {} : _ref3$productSelected,
-      _ref3$user = _ref3.user,
-      user = _ref3$user === void 0 ? {} : _ref3$user,
-      token = _ref3.token,
-      location = _ref3.location;
+  var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
+      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
+      showVersionSelector = _useCloseModal2[0],
+      setShowVersionSelector = _useCloseModal2[1];
 
-  var _useState = (0, _react.useState)("Descripción"),
+  var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      activeTab = _useState2[0],
-      setActiveTab = _useState2[1];
+      auditableVersion = _useState2[0],
+      setAuditableVersion = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(0),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      activeImage = _useState4[0],
-      setActiveImage = _useState4[1];
+      headerTop = _useState4[0],
+      setHeaderTop = _useState4[1];
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      imageLayout = _useState6[0],
-      setImageLayout = _useState6[1];
+      shotThd = _useState6[0],
+      setShotThd = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(0),
+  var _useState7 = (0, _react.useState)(),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      headerTop = _useState8[0],
-      setHeaderTop = _useState8[1];
+      observation = _useState8[0],
+      setObservation = _useState8[1];
 
-  var _useState9 = (0, _react.useState)([]),
+  var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      descriptions = _useState10[0],
-      setDescriptions = _useState10[1];
+      showRejectModal = _useState10[0],
+      setShowRejectModal = _useState10[1];
 
-  var _useState11 = (0, _react.useState)([]),
+  var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      datasheets = _useState12[0],
-      setDatasheets = _useState12[1];
-
-  var _useReducer = (0, _react.useReducer)(reducerImages, {}),
-      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
-      images = _useReducer2[0],
-      setImages = _useReducer2[1];
+      isObservationVisible = _useState12[0],
+      setObservationVisible = _useState12[1];
 
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      showModal = _useState14[0],
-      setShowModal = _useState14[1];
+      imageLayout = _useState14[0],
+      setImageLayout = _useState14[1];
 
   var _useState15 = (0, _react.useState)(false),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      showRejectModal = _useState16[0],
-      setShowRejectModal = _useState16[1];
+      crossComment = _useState16[0],
+      setCrossComment = _useState16[1];
+
+  var _useState17 = (0, _react.useState)([]),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      statusArray = _useState18[0],
+      setStatusArray = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      rejectAll = _useState20[0],
+      setRejectAll = _useState20[1];
+
+  var _useState21 = (0, _react.useState)([]),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      auditServices = _useState22[0],
+      setAuditServices = _useState22[1];
+
+  var _useState23 = (0, _react.useState)([]),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      auditDatasheets = _useState24[0],
+      setAuditDatasheets = _useState24[1];
+
+  var _useState25 = (0, _react.useState)([]),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      auditDescriptions = _useState26[0],
+      setAuditDescriptions = _useState26[1];
+
+  var _useState27 = (0, _react.useState)(false),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      showModal = _useState28[0],
+      setShowModal = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(false),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      compare = _useState30[0],
+      setCompare = _useState30[1];
 
   var _useDropzone = (0, _reactDropzone.useDropzone)({
-    accept: "image/*, video/mp4",
+    accept: "image/*",
     noKeyboard: true,
     multiple: true,
     noClick: true,
     onDrop: function onDrop(acceptedFiles) {
-      var newImages = [];
       acceptedFiles.map(function (file) {
         var reader = new FileReader();
         reader.fileName = file.name;
 
         reader.onload = /*#__PURE__*/function () {
-          var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(e) {
-            var ext, img;
-            return _regenerator.default.wrap(function _callee4$(_context4) {
+          var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+            var fileName, fileExtension, fileDataURL, img;
+            return _regenerator.default.wrap(function _callee$(_context) {
               while (1) {
-                switch (_context4.prev = _context4.next) {
+                switch (_context.prev = _context.next) {
                   case 0:
-                    ext = e.srcElement.fileName.split(".");
+                    fileName = e.target.fileName;
+                    fileExtension = fileName.split(".").pop();
+                    fileDataURL = e.target.result;
                     img = new Image();
-
-                    if (ext[ext.length - 1] == "mp4") {
-                      obtenerDuracionVideoBase64(e.target.result).then( /*#__PURE__*/function () {
-                        var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(duracion) {
-                          return _regenerator.default.wrap(function _callee3$(_context3) {
-                            while (1) {
-                              switch (_context3.prev = _context3.next) {
-                                case 0:
-                                  if (!(duracion > 15 && duracion < 600)) {
-                                    _context3.next = 7;
-                                    break;
-                                  }
-
-                                  _context3.next = 3;
-                                  return (0, _generateThumnail.default)(e.target.result, 2);
-
-                                case 3:
-                                  img.src = _context3.sent;
-                                  setTimeout(function () {
-                                    var width = img.width;
-                                    var height = img.height;
-                                    var newImg = {
-                                      action: "addImg",
-                                      img: {
-                                        src: img.src,
-                                        //e.target.result,
-                                        name: e.target.fileName,
-                                        ext: ext[ext.length - 1],
-                                        width: width,
-                                        height: height,
-                                        video_src: ext[ext.length - 1] == "mp4" ? e.target.result : ""
-                                      }
-                                    };
-                                    setImages(newImg);
-                                  }, 500);
-                                  _context3.next = 8;
-                                  break;
-
-                                case 7:
-                                  setModalAlert({
-                                    show: true,
-                                    title: "Hubo un error al subir el video",
-                                    message: "Los videos deben durar entre 15 segundos y 10 minutos"
-                                  });
-
-                                case 8:
-                                case "end":
-                                  return _context3.stop();
-                              }
-                            }
-                          }, _callee3);
-                        }));
-
-                        return function (_x4) {
-                          return _ref5.apply(this, arguments);
-                        };
-                      }()).catch(function (error) {
-                        console.error("Error al obtener la duración del video:", error);
+                    img.src = fileDataURL;
+
+                    img.onload = function () {
+                      var width = img.width;
+                      var height = img.height;
+                      var newImg = {
+                        src: fileDataURL,
+                        name: fileName,
+                        ext: fileExtension,
+                        width: width,
+                        height: height,
+                        isApproved: true // VALIDAR QUE SOLO SEA PARA RADIOSHACK
+
+                      };
+                      dispatch({
+                        type: "ADD_IMAGE_VALUE",
+                        payload: newImg
                       });
-                    } else {
-                      img.src = e.target.result;
-                      setTimeout(function () {
-                        var width = img.width;
-                        var height = img.height;
-                        var newImg = {
-                          action: "addImg",
-                          img: {
-                            src: img.src,
-                            //e.target.result,
-                            name: e.target.fileName,
-                            ext: ext[ext.length - 1],
-                            width: width,
-                            height: height,
-                            video_src: ext[ext.length - 1] == "mp4" ? e.target.result : ""
-                          }
-                        };
-                        setImages(newImg);
-                      }, 500);
-                    }
+                    };
 
-                  case 3:
+                  case 6:
                   case "end":
-                    return _context4.stop();
+                    return _context.stop();
                 }
               }
-            }, _callee4);
+            }, _callee);
           }));
 
-          return function (_x3) {
-            return _ref4.apply(this, arguments);
+          return function (_x) {
+            return _ref2.apply(this, arguments);
           };
         }();
 
@@ -473,315 +263,200 @@ var RetailerProductEdition = function RetailerProductEdition(_ref3) {
     }
   }),
       getRootProps = _useDropzone.getRootProps,
-      getInputProps = _useDropzone.getInputProps;
-
-  var _useState17 = (0, _react.useState)([]),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      updatedDatasheets = _useState18[0],
-      setUpdatedDatasheets = _useState18[1];
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive,
+      open = _useDropzone.open;
 
-  var _useState19 = (0, _react.useState)([]),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      updatedDescriptions = _useState20[0],
-      setUpdatedDescriptions = _useState20[1];
-
-  var _useState21 = (0, _react.useState)(false),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      imagesUploaded = _useState22[0],
-      setImagesUploaded = _useState22[1];
+  var _useState31 = (0, _react.useState)(false),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      openChangeStatusModal = _useState32[0],
+      setOpenChangeStatusModal = _useState32[1];
 
-  var _useState23 = (0, _react.useState)(),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      dataImages = _useState24[0],
-      setDataImages = _useState24[1];
+  var thumbs = function thumbs() {
+    var _state$images_values, _state$images_values$, _state$images_values4, _state$images_values5, _state$images_values6, _state$images_values7, _state$images_values8, _state$images_values9;
 
-  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),
-      percentages = _useState26[0],
-      setPercentages = _useState26[1]; // const [percentages, setPercentages] = useState([{ retailers: {} }]);
+    var imageInputs = (_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : (_state$images_values$ = _state$images_values.inputs) === null || _state$images_values$ === void 0 ? void 0 : _state$images_values$.map(function (e) {
+      var _state$images_values2, _state$images_values3;
 
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name,
+        required: e === null || e === void 0 ? void 0 : e.required,
+        active: (_state$images_values2 = state.images_values) === null || _state$images_values2 === void 0 ? void 0 : (_state$images_values3 = _state$images_values2.values) === null || _state$images_values3 === void 0 ? void 0 : _state$images_values3.some(function (value) {
+          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
+        })
+      };
+    });
+    var imageType = (_state$images_values4 = state.images_values) === null || _state$images_values4 === void 0 ? void 0 : (_state$images_values5 = _state$images_values4.imageType) === null || _state$images_values5 === void 0 ? void 0 : _state$images_values5.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name
+      };
+    });
+    var imagePackagingType = (_state$images_values6 = state.images_values) === null || _state$images_values6 === void 0 ? void 0 : (_state$images_values7 = _state$images_values6.imagePackagingType) === null || _state$images_values7 === void 0 ? void 0 : _state$images_values7.map(function (e) {
+      return {
+        value: e === null || e === void 0 ? void 0 : e.id,
+        name: e === null || e === void 0 ? void 0 : e.name
+      };
+    });
+    return (_state$images_values8 = state.images_values) === null || _state$images_values8 === void 0 ? void 0 : (_state$images_values9 = _state$images_values8.values) === null || _state$images_values9 === void 0 ? void 0 : _state$images_values9.map(function (image, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryElement.GalleryElement, {
+        id: "gallery-element-" + index,
+        index: index + "-" + image.name,
+        image: image,
+        number: index,
+        gridLayout: imageLayout,
+        imageType: imageType,
+        imagePackagingType: imagePackagingType,
+        imageInputs: imageInputs,
+        selectedImages: state.selected_images,
+        setCheckAll: handleOnSetCheckAll,
+        changeImage: function changeImage(item) {
+          dispatch({
+            type: "UPDATE_IMAGE_VALUE",
+            payload: item
+          });
+        },
+        setSelectedImages: function setSelectedImages(item) {
+          return dispatch({
+            type: "SET_SELECTED_IMAGE",
+            payload: item
+          });
+        },
+        updateApprovedInputsImages: function updateApprovedInputsImages(item) {
+          return console.log("updateApprovedInputsImages", item);
+        }
+      }, index);
+    });
+  };
 
-  var _useState27 = (0, _react.useState)(0),
-      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      activePercentage = _useState28[0],
-      setActivePercentage = _useState28[1];
+  var initializeProduct = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var product, productNormalized, users, id_article, response, parseData;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              product = productSelected ? productSelected : JSON.parse(sessionStorage.getItem("productSelected"));
+              productNormalized = (0, _utils.normalizeProduct)(product);
+              console.log({
+                productNormalized: productNormalized
+              });
+              dispatch({
+                type: "SET_PRODUCT",
+                payload: productNormalized
+              });
+              dispatch({
+                type: "SET_ACTIVE_RETAILER",
+                payload: productNormalized.categoryRetailerInOrder[0]
+              });
+              setShotThd([58, 59, 60, 61].includes(productNormalized.categoryRetailerInOrder[0].id_retailer)); // Configurar statusArray según el rol del usuario
 
-  var _useState29 = (0, _react.useState)({}),
-      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      activeRetailer = _useState30[0],
-      setActiveRetailer = _useState30[1];
+              setStatusArray((0, _utils.getStatusArrayByRole)(user.id_role)); // Cargar usuarios y asignaciones
 
-  var _useState31 = (0, _react.useState)([]),
-      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      services = _useState32[0],
-      setServices = _useState32[1];
-
-  var _useState33 = (0, _react.useState)([]),
-      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      servicesData = _useState34[0],
-      setServicesData = _useState34[1];
-
-  var _useState35 = (0, _react.useState)(""),
-      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      message = _useState36[0],
-      setMessage = _useState36[1];
-
-  var _useState37 = (0, _react.useState)(JSON.parse(sessionStorage.getItem("productSelected")) ? JSON.parse(sessionStorage.getItem("productSelected")) : productSelected),
-      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      product = _useState38[0],
-      setProduct = _useState38[1];
-
-  var _useState39 = (0, _react.useState)(null),
-      _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      icon = _useState40[0],
-      setIcon = _useState40[1];
-
-  var _useState41 = (0, _react.useState)(product === null || product === void 0 ? void 0 : product.version),
-      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
-      version = _useState42[0],
-      setVersion = _useState42[1];
-
-  var _useState43 = (0, _react.useState)({}),
-      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
-      comments = _useState44[0],
-      setComments = _useState44[1];
-
-  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
-  }),
-      _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
-      requiredNull = _useState48[0],
-      setRequiredNull = _useState48[1];
-
-  var _useState49 = (0, _react.useState)(false),
-      _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
-      crossComment = _useState50[0],
-      setCrossComment = _useState50[1];
-
-  var _useState51 = (0, _react.useState)([]),
-      _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
-      userGroups = _useState52[0],
-      setUserGroups = _useState52[1];
-
-  var _useState53 = (0, _react.useState)({}),
-      _useState54 = (0, _slicedToArray2.default)(_useState53, 2),
-      assig = _useState54[0],
-      setAssig = _useState54[1];
-
-  var _useState55 = (0, _react.useState)([]),
-      _useState56 = (0, _slicedToArray2.default)(_useState55, 2),
-      selectedImages = _useState56[0],
-      setSelectedImages = _useState56[1];
-
-  var _useState57 = (0, _react.useState)([]),
-      _useState58 = (0, _slicedToArray2.default)(_useState57, 2),
-      componentsArray = _useState58[0],
-      setComponentsArray = _useState58[1];
-
-  var _useState59 = (0, _react.useState)(false),
-      _useState60 = (0, _slicedToArray2.default)(_useState59, 2),
-      checkAll = _useState60[0],
-      setCheckAll = _useState60[1];
+              _context2.next = 10;
+              return (0, _data.fetchUsers)(token);
 
-  var isRetailer = user === null || user === void 0 ? void 0 : user.is_retailer;
+            case 10:
+              users = _context2.sent;
 
-  var _useState61 = (0, _react.useState)(true),
-      _useState62 = (0, _slicedToArray2.default)(_useState61, 2),
-      loading = _useState62[0],
-      setLoading = _useState62[1];
+              if (users.length > 0) {
+                dispatch({
+                  type: "SET_COLLABORATOR_ASSIGNATIONS",
+                  payload: (0, _utils.buildCollaboratorAssignations)(productNormalized, users)
+                });
+              }
 
-  var _useState63 = (0, _react.useState)("-"),
-      _useState64 = (0, _slicedToArray2.default)(_useState63, 2),
-      retailerStatus = _useState64[0],
-      setRetailerStatus = _useState64[1];
+              id_article = productNormalized.id_article;
 
-  var _useState65 = (0, _react.useState)([]),
-      _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
-      statusArray = _useState66[0],
-      setStatusArray = _useState66[1];
+              if (!id_article) {
+                _context2.next = 16;
+                break;
+              }
 
-  var _useState67 = (0, _react.useState)(null),
-      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
-      socketType = _useState68[0],
-      setSocketType = _useState68[1];
+              _context2.next = 16;
+              return (0, _utils.getAuditVersion)(id_article, setAuditableVersion, token);
 
-  var _useState69 = (0, _react.useState)(loading),
-      _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
-      saving = _useState70[0],
-      setSaving = _useState70[1];
+            case 16:
+              if (!(id_article && productNormalized.id_order)) {
+                _context2.next = 22;
+                break;
+              }
 
-  var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
-      _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
-      showVersionSelector = _useCloseModal2[0],
-      setShowVersionSelector = _useCloseModal2[1];
+              _context2.next = 19;
+              return _axios.default.get(process.env.REACT_APP_READ_OBSERVATION, {
+                params: {
+                  articleId: id_article,
+                  orderId: productNormalized.id_order
+                },
+                headers: {
+                  Authorization: sessionStorage.getItem("jwt")
+                }
+              });
 
-  var shotThd = [58, 59, 60, 61].includes(activeRetailer.id);
-
-  var _useState71 = (0, _react.useState)(null),
-      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
-      auditableVersion = _useState72[0],
-      setAuditableVersion = _useState72[1];
-
-  var _useState73 = (0, _react.useState)([]),
-      _useState74 = (0, _slicedToArray2.default)(_useState73, 2),
-      auditServices = _useState74[0],
-      setAuditServices = _useState74[1];
-
-  var _useState75 = (0, _react.useState)([]),
-      _useState76 = (0, _slicedToArray2.default)(_useState75, 2),
-      auditDatasheets = _useState76[0],
-      setAuditDatasheets = _useState76[1];
-
-  var _useState77 = (0, _react.useState)([]),
-      _useState78 = (0, _slicedToArray2.default)(_useState77, 2),
-      auditDescriptions = _useState78[0],
-      setAuditDescriptions = _useState78[1];
-
-  var _useState79 = (0, _react.useState)([]),
-      _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
-      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)({
-    show: false,
-    title: "",
-    message: "",
-    errorInputMessage: false
-  }),
-      _useState88 = (0, _slicedToArray2.default)(_useState87, 2),
-      modalAlert = _useState88[0],
-      setModalAlert = _useState88[1];
-
-  var _useState89 = (0, _react.useState)([]),
-      _useState90 = (0, _slicedToArray2.default)(_useState89, 2),
-      desc = _useState90[0],
-      setDesc = _useState90[1];
-
-  var _useState91 = (0, _react.useState)([]),
-      _useState92 = (0, _slicedToArray2.default)(_useState91, 2),
-      fich = _useState92[0],
-      setFich = _useState92[1];
-
-  var _useState93 = (0, _react.useState)([]),
-      _useState94 = (0, _slicedToArray2.default)(_useState93, 2),
-      imag = _useState94[0],
-      setImag = _useState94[1];
-
-  var _useState95 = (0, _react.useState)(false),
-      _useState96 = (0, _slicedToArray2.default)(_useState95, 2),
-      isObservationVisible = _useState96[0],
-      setObservationVisible = _useState96[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);
-  };
+            case 19:
+              response = _context2.sent;
+              parseData = JSON.parse(response.data.body).data[0];
+              setObservation(parseData.observations);
 
-  var handleCommentSubmit = function handleCommentSubmit(e) {
-    e.preventDefault();
-    var commentText = document.querySelector("#commentary-box .ql-container .ql-editor > p").innerHTML;
-    createComment(e, commentText, activeTab);
-  };
+            case 22:
+              _context2.next = 27;
+              break;
 
-  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-    var _ref7, id_article;
+            case 24:
+              _context2.prev = 24;
+              _context2.t0 = _context2["catch"](0);
+              console.log("Error setting product data: ", _context2.t0);
 
-    return _regenerator.default.wrap(function _callee5$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            _ref7 = (product === null || product === void 0 ? void 0 : product.article) || {}, id_article = _ref7.id_article;
+            case 27:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 24]]);
+    }));
 
-            if (!id_article) {
-              _context5.next = 4;
-              break;
-            }
+    return function initializeProduct() {
+      return _ref3.apply(this, arguments);
+    };
+  }(); // Setter del producto y carga inicial (optimizado para evitar cascada)
 
-            _context5.next = 4;
-            return (0, _utils.getAuditVersion)(id_article, setAuditableVersion, token);
 
-          case 4:
-          case "end":
-            return _context5.stop();
-        }
-      }
-    }, _callee5);
-  })), []);
+  (0, _react.useEffect)(function () {
+    initializeProduct();
+  }, []);
 
   var loadAuditableData = /*#__PURE__*/function () {
-    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
-      var _product$article, _product$article2, _product$article3, _auditServices;
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _state$product, _state$product2, _state$product3;
 
-      return _regenerator.default.wrap(function _callee6$(_context6) {
+      var auditServices;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              if (!auditableVersion) {
-                _context6.next = 7;
-                break;
-              }
+              _context3.next = 2;
+              return (0, _data.getRetailerServices)((_state$product = state.product) === null || _state$product === void 0 ? void 0 : _state$product.id_article, (_state$product2 = state.product) === null || _state$product2 === void 0 ? void 0 : _state$product2.categoryName, parseInt((_state$product3 = state.product) === null || _state$product3 === void 0 ? void 0 : _state$product3.id_category), auditableVersion.version, token);
 
-              _context6.next = 3;
-              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 = _context6.sent;
-              (0, _utils.getInputsData)(_auditServices, activeRetailer, setAuditDatasheets, setAuditDescriptions);
-              setAuditServices(_auditServices);
-              setAuditImages(_auditServices[2]);
+            case 2:
+              auditServices = _context3.sent;
+              (0, _utils.getInputsData)(auditServices, {
+                id: state.active_retailer.id_retailer
+              }, setAuditDatasheets, setAuditDescriptions);
+              setAuditServices(auditServices);
+              setAuditImages(auditServices[2]);
 
-            case 7:
+            case 6:
             case "end":
-              return _context6.stop();
+              return _context3.stop();
           }
         }
-      }, _callee6);
+      }, _callee3);
     }));
 
     return function loadAuditableData() {
-      return _ref8.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
@@ -790,1225 +465,926 @@ var RetailerProductEdition = function RetailerProductEdition(_ref3) {
       loadAuditableData();
     }
   }, [auditableVersion]);
-  (0, _react.useEffect)(function () {
-    checkAll && setSelectedImages(images.values);
-  }, [checkAll]);
 
   var loadData = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
-      var _ref10, _product$statusByReta, _product$statusByReta2, _product$statusByReta3, _ref11, _product$article$cate, _product$article5, _product$article5$cat, _product$article6, _product$article6$cat, _categoryRetailer$, _categoryRetailer$2, _product$article7, _product$article8, _activeRetailerId, _product$article9, _services$, _services$$values, _product$article10, ids, uniqueIds, activeRetailerId, _product$article4, _product$article4$cat, firstValid, categoryRetailer, categoryName, categoryId, category_name, category_id, retailer_id, _services, generalServices, data, headers;
-
-      return _regenerator.default.wrap(function _callee7$(_context7) {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var enableLoading,
+          versionSelected,
+          _JSON$parse$0$relatio,
+          _JSON$parse,
+          _JSON$parse$,
+          _percentagesRes$,
+          _state$product4,
+          id_article,
+          version,
+          id_order,
+          _state$active_retaile,
+          category,
+          id_category,
+          id_retailer,
+          data,
+          headers,
+          _yield$Promise$all,
+          _yield$Promise$all2,
+          services,
+          percentagesRes,
+          servicesDataRes,
+          commentsResponse,
+          percentages,
+          commentsMap,
+          orderMap,
+          orderedValues,
+          retailerDatasheets,
+          datasheetsActiveRetailer,
+          descriptionsActiveRetailer,
+          filteredValues,
+          _args4 = arguments;
+
+      return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context7.prev = _context7.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              _context7.prev = 0;
-              setLoading(true);
-              ids = (_ref10 = (_product$statusByReta = product === null || product === void 0 ? void 0 : (_product$statusByReta2 = product.statusByRetailer) === null || _product$statusByReta2 === void 0 ? void 0 : _product$statusByReta2.map(function (item) {
-                return item.retailer_id;
-              })) !== null && _product$statusByReta !== void 0 ? _product$statusByReta : product === null || product === void 0 ? void 0 : (_product$statusByReta3 = product.statusByRetailer) === null || _product$statusByReta3 === void 0 ? void 0 : _product$statusByReta3.map(function (item) {
-                return item.id_retailer;
-              })) !== null && _ref10 !== void 0 ? _ref10 : [];
-              uniqueIds = (0, _toConsumableArray2.default)(new Set(ids));
-              activeRetailerId = activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id;
-
-              if (!activeRetailerId) {
-                firstValid = product === null || product === void 0 ? void 0 : (_product$article4 = product.article) === null || _product$article4 === void 0 ? void 0 : (_product$article4$cat = _product$article4.categoryRetailer) === null || _product$article4$cat === void 0 ? void 0 : _product$article4$cat.find(function (item) {
-                  return uniqueIds.includes(item.id_retailer || item.retailer_id);
-                });
-
-                if (firstValid) {
-                  activeRetailerId = firstValid.id_retailer || firstValid.retailer_id;
-                }
-              }
-
-              categoryRetailer = (_ref11 = (_product$article$cate = product === null || product === void 0 ? void 0 : (_product$article5 = product.article) === null || _product$article5 === void 0 ? void 0 : (_product$article5$cat = _product$article5.categoryRetailer) === null || _product$article5$cat === void 0 ? void 0 : _product$article5$cat.filter(function (item) {
-                return uniqueIds.includes(item.id_retailer) && item.id_retailer === activeRetailerId;
-              })) !== null && _product$article$cate !== void 0 ? _product$article$cate : product === null || product === void 0 ? void 0 : (_product$article6 = product.article) === null || _product$article6 === void 0 ? void 0 : (_product$article6$cat = _product$article6.categoryRetailer) === null || _product$article6$cat === void 0 ? void 0 : _product$article6$cat.filter(function (item) {
-                return uniqueIds.includes(item.retailer_id) && item.retailer_id === activeRetailerId;
-              })) !== null && _ref11 !== void 0 ? _ref11 : [];
-              categoryName = (_categoryRetailer$ = categoryRetailer[0]) === null || _categoryRetailer$ === void 0 ? void 0 : _categoryRetailer$.category_name;
-              categoryId = (_categoryRetailer$2 = categoryRetailer[0]) === null || _categoryRetailer$2 === void 0 ? void 0 : _categoryRetailer$2.id_category;
-              category_name = categoryName !== null && categoryName !== void 0 ? categoryName : (product === null || product === void 0 ? void 0 : (_product$article7 = product.article) === null || _product$article7 === void 0 ? void 0 : _product$article7.company_name) || (product === null || product === void 0 ? void 0 : product.categoryName);
-              category_id = categoryId !== null && categoryId !== void 0 ? categoryId : parseInt((product === null || product === void 0 ? void 0 : (_product$article8 = product.article) === null || _product$article8 === void 0 ? void 0 : _product$article8.id_category) || (product === null || product === void 0 ? void 0 : product.id_category));
-              retailer_id = (_activeRetailerId = activeRetailerId) !== null && _activeRetailerId !== void 0 ? _activeRetailerId : categoryRetailer === null || categoryRetailer === void 0 ? void 0 : categoryRetailer.id_retailer;
-              _context7.next = 14;
-              return (0, _data2.getRetailerServices)((product === null || product === void 0 ? void 0 : product.id_article) || (product === null || product === void 0 ? void 0 : (_product$article9 = product.article) === null || _product$article9 === void 0 ? void 0 : _product$article9.id_article), category_name, category_id, version, token, retailer_id);
-
-            case 14:
-              _services = _context7.sent;
-
-              if (auditableVersion && retailer_id) {
-                loadAuditableData();
-              }
-
-              setServices(_services);
-              _context7.next = 19;
-              return getServices();
-
-            case 19:
-              generalServices = _context7.sent;
-              setImages({
-                action: "init",
-                init: _services[2]
+              enableLoading = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : true;
+              versionSelected = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : null;
+              _context4.prev = 2;
+              if (enableLoading) dispatch({
+                type: "SET_LOADING",
+                payload: true
               });
-              if (((_services$ = _services[2]) === null || _services$ === void 0 ? void 0 : (_services$$values = _services$.values) === null || _services$$values === void 0 ? void 0 : _services$$values.length) > 0) setActiveImage(0);
+              _state$product4 = state.product, id_article = _state$product4.id_article, version = _state$product4.version, id_order = _state$product4.id_order;
+              _state$active_retaile = state.active_retailer, category = _state$active_retaile.category, id_category = _state$active_retaile.id_category, id_retailer = _state$active_retaile.id_retailer; // Payloads y headers
+
               data = [{
-                id_article: product === null || product === void 0 ? void 0 : (_product$article10 = product.article) === null || _product$article10 === void 0 ? void 0 : _product$article10.id_article,
+                id_article: id_article,
+                version: versionSelected ? versionSelected : version,
                 relations: [{
-                  id_retailer: retailer_id,
-                  id_category: category_id
-                }],
-                version: product.version
+                  id_retailer: id_retailer,
+                  id_category: id_category
+                }]
               }];
               headers = {
                 Authorization: token
               };
-              (0, _data2.getPercentage)({
+              _context4.next = 10;
+              return Promise.all([(0, _data.getRetailerServices)(id_article, category, id_category, versionSelected !== null && versionSelected !== void 0 ? versionSelected : version, token, id_retailer), (0, _data.getPercentage)({
                 data: data,
                 headers: headers
-              }).then(function (res) {
-                var _res$;
+              }), (0, _data.getServicesData)({
+                articleId: id_article,
+                orderId: id_order,
+                end: true,
+                token: token
+              }), // Obtener comentarios en paralelo
+              Promise.all([_axios.default.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+                params: {
+                  articleId: id_article,
+                  concept: "description",
+                  orderIdColab: id_order,
+                  version: versionSelected !== null && versionSelected !== void 0 ? versionSelected : version
+                }
+              }), _axios.default.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+                params: {
+                  articleId: id_article,
+                  concept: "datasheet",
+                  orderIdColab: id_order,
+                  version: versionSelected !== null && versionSelected !== void 0 ? versionSelected : version
+                }
+              }), _axios.default.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+                params: {
+                  articleId: id_article,
+                  concept: "images",
+                  orderIdColab: id_order,
+                  version: versionSelected !== null && versionSelected !== void 0 ? versionSelected : version
+                }
+              })])]);
 
-                setPercentages(JSON.parse(res === null || res === void 0 ? void 0 : (_res$ = res[0]) === null || _res$ === void 0 ? void 0 : _res$.body));
-              });
-              setImages({
-                action: "orderImages",
-                retailerId: activeRetailer.id
-              });
-              setLoading(false);
-              _context7.next = 33;
-              break;
-
-            case 29:
-              _context7.prev = 29;
-              _context7.t0 = _context7["catch"](0);
-              setLoading(false);
-              console.log(_context7.t0);
-
-            case 33:
-            case "end":
-              return _context7.stop();
-          }
-        }
-      }, _callee7, null, [[0, 29]]);
-    }));
-
-    return function loadData() {
-      return _ref9.apply(this, arguments);
-    };
-  }();
+            case 10:
+              _yield$Promise$all = _context4.sent;
+              _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 4);
+              services = _yield$Promise$all2[0];
+              percentagesRes = _yield$Promise$all2[1];
+              servicesDataRes = _yield$Promise$all2[2];
+              commentsResponse = _yield$Promise$all2[3];
+              dispatch({
+                type: "SET_RETAILER_STATUS",
+                payload: servicesDataRes.map(function (service) {
+                  return {
+                    retailer_id: service === null || service === void 0 ? void 0 : service.id_retailer,
+                    service: service === null || service === void 0 ? void 0 : service.service,
+                    status: service === null || service === void 0 ? void 0 : service.status,
+                    task_user_group_id: service === null || service === void 0 ? void 0 : service.task_user_group_id
+                  };
+                })
+              }); // Extraer relaciones del response
 
-  (0, _react.useEffect)(function () {
-    setLoading(true);
-    loadData();
-  }, [activeRetailer]);
+              percentages = (_JSON$parse$0$relatio = (_JSON$parse = JSON.parse(percentagesRes === null || percentagesRes === void 0 ? void 0 : (_percentagesRes$ = percentagesRes[0]) === null || _percentagesRes$ === void 0 ? void 0 : _percentagesRes$.body)) === null || _JSON$parse === void 0 ? void 0 : (_JSON$parse$ = _JSON$parse[0]) === null || _JSON$parse$ === void 0 ? void 0 : _JSON$parse$.relations) !== null && _JSON$parse$0$relatio !== void 0 ? _JSON$parse$0$relatio : []; // Procesar comentarios
 
-  var getServices = /*#__PURE__*/function () {
-    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
-      var _product$article11, _product$article12, _servicesResponse$dat;
+              commentsMap = {};
+              commentsResponse.forEach(function (commentRes) {
+                var _commentRes$data;
 
-      var servicesResponse, parsedResponse, retailers, retailerResponse, active;
-      return _regenerator.default.wrap(function _callee8$(_context8) {
-        while (1) {
-          switch (_context8.prev = _context8.next) {
-            case 0:
-              _context8.next = 2;
-              return _axios.default.get("".concat(process.env.REACT_APP_SERVICES_ENDPOINT, "?articleId=").concat(product === null || product === void 0 ? void 0 : (_product$article11 = product.article) === null || _product$article11 === void 0 ? void 0 : _product$article11.id_article, "&orderId=").concat((product === null || product === void 0 ? void 0 : (_product$article12 = product.article) === null || _product$article12 === void 0 ? void 0 : _product$article12.id_order) || product.orderId, "&end=true"));
+                var commentData = JSON.parse(commentRes === null || commentRes === void 0 ? void 0 : (_commentRes$data = commentRes.data) === null || _commentRes$data === void 0 ? void 0 : _commentRes$data.body).data[0];
 
-            case 2:
-              servicesResponse = _context8.sent;
-              parsedResponse = JSON.parse(servicesResponse === null || servicesResponse === void 0 ? void 0 : (_servicesResponse$dat = servicesResponse.data) === null || _servicesResponse$dat === void 0 ? void 0 : _servicesResponse$dat.body).data;
-              retailers = product.retailers || product.retailersAvailable;
-              retailerResponse = parsedResponse === null || parsedResponse === void 0 ? void 0 : parsedResponse.map(function (srv) {
-                return srv.id_retailer;
+                if (commentData) {
+                  var tab = (0, _utils.translateConcept)(commentData.concept);
+                  commentsMap[tab] = commentData;
+                }
               });
-              active = retailers === null || retailers === void 0 ? void 0 : retailers.find(function (retailer) {
-                return retailerResponse.includes(retailer.id);
+              dispatch({
+                type: "SET_COMMENTS",
+                payload: commentsMap
+              }); // Ordenamiento de imágenes
+
+              orderMap = services[2].inputsByRetailer.flat().reduce(function (acc, item) {
+                acc[item.id_image] = item.order;
+                return acc;
+              }, {});
+              orderedValues = (0, _toConsumableArray2.default)(services[2].values).sort(function (a, b) {
+                var _orderMap$a$image_id, _orderMap$b$image_id;
+
+                var orderA = (_orderMap$a$image_id = orderMap[a.image_id]) !== null && _orderMap$a$image_id !== void 0 ? _orderMap$a$image_id : Number.MAX_SAFE_INTEGER;
+                var orderB = (_orderMap$b$image_id = orderMap[b.image_id]) !== null && _orderMap$b$image_id !== void 0 ? _orderMap$b$image_id : Number.MAX_SAFE_INTEGER;
+                return orderA - orderB;
+              }); // Procesamiento de inputs del retailer activo (evita cascada con state.services)
+
+              retailerDatasheets = services[0][id_retailer];
+              datasheetsActiveRetailer = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, retailerDatasheets), {}, {
+                data: Object.values(retailerDatasheets.data)
               });
-              !activeRetailer.id && setActiveRetailer(active ? active : retailers[0]);
-              setServicesData(parsedResponse);
-
-            case 9:
-            case "end":
-              return _context8.stop();
-          }
-        }
-      }, _callee8);
-    }));
-
-    return function getServices() {
-      return _ref12.apply(this, arguments);
-    };
-  }();
-
-  var translateConcept = function translateConcept(concept) {
-    var translation = {
-      datasheet: "Ficha técnica",
-      description: "Descripción",
-      images: "Imágenes"
-    };
-    return translation[concept];
-  };
-
-  var getComments = /*#__PURE__*/function () {
-    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
-      var _product$article13, _product$article14, _product$article15;
+              descriptionsActiveRetailer = services[1].filter(function (item) {
+                return item.id === id_retailer;
+              });
+              filteredValues = services[2].values.filter(function (value) {
+                return services[2].inputsByRetailer.some(function (retailerInput) {
+                  return retailerInput.some(function (input) {
+                    return input.id_retailer === id_retailer && input.id_image === value.image_id;
+                  });
+                });
+              }); // Dispatch consolidado
+
+              dispatch({
+                type: "SET_SERVICES",
+                payload: {
+                  datasheets: services[0],
+                  descriptions: services[1],
+                  images: (0, _objectSpread5.default)((0, _objectSpread5.default)({}, services[2]), {}, {
+                    values: orderedValues
+                  })
+                }
+              });
+              dispatch({
+                type: "SET_PERCENTAGES",
+                payload: percentages
+              });
+              dispatch({
+                type: "SET_ACTIVE_PERCENTAGES",
+                payload: percentages.find(function (_ref6) {
+                  var rId = _ref6.id_retailer;
+                  return rId === id_retailer;
+                })
+              });
+              dispatch({
+                type: "SET_SERVICES_DATA",
+                payload: servicesDataRes
+              }); // Setear inputs del retailer activo directamente (evita cascada)
+
+              dispatch({
+                type: "SET_DATASHEETS_INPUTS",
+                payload: [datasheetsActiveRetailer, services[0].inputs]
+              });
+              dispatch({
+                type: "SET_DESCRIPTIONS_INPUTS",
+                payload: descriptionsActiveRetailer
+              });
+              dispatch({
+                type: "SET_IMAGES_VALUES",
+                payload: (0, _objectSpread5.default)((0, _objectSpread5.default)({}, services[2]), {}, {
+                  values: filteredValues
+                })
+              }); // Calcular campos requeridos sin valor
+
+              dispatch({
+                type: "SET_MISSING_REQUIRED_FIELDS",
+                payload: (0, _utils.calculateRequiredNull)(services, servicesDataRes, id_retailer)
+              }); // Auditable
+
+              if (auditableVersion && id_retailer) {
+                loadAuditableData();
+              }
 
-      var tab,
-          commentsResponse,
-          comments,
-          _args9 = arguments;
-      return _regenerator.default.wrap(function _callee9$(_context9) {
-        while (1) {
-          switch (_context9.prev = _context9.next) {
-            case 0:
-              tab = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : "Descripción";
-              _context9.next = 3;
-              return Promise.all([_axios.default.get("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT, "?articleId=").concat(product === null || product === void 0 ? void 0 : (_product$article13 = product.article) === null || _product$article13 === void 0 ? void 0 : _product$article13.id_article, "&concept=description&orderIdColab=").concat(product === null || product === void 0 ? void 0 : product.orderId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT, "?articleId=").concat(product === null || product === void 0 ? void 0 : (_product$article14 = product.article) === null || _product$article14 === void 0 ? void 0 : _product$article14.id_article, "&concept=datasheet&orderIdColab=").concat(product === null || product === void 0 ? void 0 : product.orderId, "&version=").concat(version)), _axios.default.get("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT, "?articleId=").concat(product === null || product === void 0 ? void 0 : (_product$article15 = product.article) === null || _product$article15 === void 0 ? void 0 : _product$article15.id_article, "&concept=images&orderIdColab=").concat(product === null || product === void 0 ? void 0 : product.orderId, "&version=").concat(version))]);
+              _context4.next = 42;
+              break;
 
-            case 3:
-              commentsResponse = _context9.sent;
-              comments = {};
-              commentsResponse.forEach(function (comment) {
-                var _comment$data, _JSON$parse, _JSON$parse$data$, _comment$data2, _comment$data3;
+            case 38:
+              _context4.prev = 38;
+              _context4.t0 = _context4["catch"](2);
+              console.log("Error loading data: ", _context4.t0);
+              dispatch({
+                type: "SET_ERRORS",
+                payload: [_context4.t0.message]
+              });
 
-                return JSON.parse(comment === null || comment === void 0 ? void 0 : (_comment$data = comment.data) === null || _comment$data === void 0 ? void 0 : _comment$data.body).data[0] && (comments[translateConcept((_JSON$parse = JSON.parse(comment === null || comment === void 0 ? void 0 : (_comment$data2 = comment.data) === null || _comment$data2 === void 0 ? void 0 : _comment$data2.body)) === null || _JSON$parse === void 0 ? void 0 : (_JSON$parse$data$ = _JSON$parse.data[0]) === null || _JSON$parse$data$ === void 0 ? void 0 : _JSON$parse$data$.concept)] = JSON.parse(comment === null || comment === void 0 ? void 0 : (_comment$data3 = comment.data) === null || _comment$data3 === void 0 ? void 0 : _comment$data3.body).data[0]);
+            case 42:
+              _context4.prev = 42;
+              dispatch({
+                type: "SET_LOADING",
+                payload: false
               });
-              setComment(comments[tab]);
-              setComments(comments);
+              return _context4.finish(42);
 
-            case 8:
+            case 45:
             case "end":
-              return _context9.stop();
+              return _context4.stop();
           }
         }
-      }, _callee9);
+      }, _callee4, null, [[2, 38, 42, 45]]);
     }));
 
-    return function getComments() {
-      return _ref13.apply(this, arguments);
+    return function loadData() {
+      return _ref5.apply(this, arguments);
     };
   }();
 
-  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10() {
-    var arr;
-    return _regenerator.default.wrap(function _callee10$(_context10) {
-      while (1) {
-        switch (_context10.prev = _context10.next) {
-          case 0:
-            setLoading(true); // loadData();
-
-            getComments();
-            _context10.t0 = setUserGroups;
-            _context10.next = 5;
-            return (0, _data2.fetchUsers)(token);
-
-          case 5:
-            _context10.t1 = _context10.sent;
-            (0, _context10.t0)(_context10.t1);
-            arr = [];
-            _context10.t2 = user.id_role;
-            _context10.next = _context10.t2 === 7 ? 11 : _context10.t2 === 8 ? 11 : _context10.t2 === 4 ? 13 : _context10.t2 === 5 ? 13 : _context10.t2 === 6 ? 15 : 17;
-            break;
-
-          case 11:
-            arr = ["PA", "AS", "CA", "RC", "RA", "RP", "RCA"];
-            return _context10.abrupt("break", 19);
-
-          case 13:
-            arr = ["RC", "AC", "AA", "AP", "ACA"];
-            return _context10.abrupt("break", 19);
-
-          case 15:
-            arr = ["RP", "RCA", "AC", "RA"];
-            return _context10.abrupt("break", 19);
-
-          case 17:
-            arr = [];
-            return _context10.abrupt("break", 19);
-
-          case 19:
-            setStatusArray(arr);
-            setLoading(false);
-
-          case 21:
-          case "end":
-            return _context10.stop();
-        }
-      }
-    }, _callee10);
-  })), [product, version]);
+  (0, _react.useEffect)(function () {
+    if (state.active_retailer) {
+      loadData();
+    }
+  }, [state.active_retailer]);
 
-  var loadAssignations = function loadAssignations(currentProduct) {
-    var _currentProduct$artic, _currentProduct$artic2, _currentProduct$artic3, _currentProduct$artic4, _currentProduct$artic5, _currentProduct$artic6;
+  var handleOnChangeCurrentImage = function handleOnChangeCurrentImage(index) {
+    if (typeof index === "number") {
+      dispatch({
+        type: "SET_CURRENT_IMAGE",
+        payload: index
+      });
+    } else if ((0, _typeof2.default)(index) === "object") {
+      dispatch({
+        type: "CHANGE_ATTR_VALUE",
+        payload: index
+      });
+    }
+  };
 
-    setAssig({
-      Descripción: {
-        assignations: [{
-          collaboratorType: "especialist",
-          id: currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$artic = currentProduct.article) === null || _currentProduct$artic === void 0 ? void 0 : _currentProduct$artic.id_description_especialist
-        }, {
-          collaboratorType: "facilitator",
-          id: currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$artic2 = currentProduct.article) === null || _currentProduct$artic2 === void 0 ? void 0 : _currentProduct$artic2.id_description_facilitator
-        }],
-        collaborators: {
-          especialist: userGroups[0] || [],
-          facilitator: userGroups[2] || []
-        }
-      },
-      "Ficha técnica": {
-        assignations: [{
-          collaboratorType: "especialist",
-          id: currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$artic3 = currentProduct.article) === null || _currentProduct$artic3 === void 0 ? void 0 : _currentProduct$artic3.id_datasheet_especialist
-        }, {
-          collaboratorType: "facilitator",
-          id: currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$artic4 = currentProduct.article) === null || _currentProduct$artic4 === void 0 ? void 0 : _currentProduct$artic4.id_datasheet_facilitator
-        }],
-        collaborators: {
-          especialist: userGroups[0] || [],
-          facilitator: userGroups[2] || []
-        }
-      },
-      Imágenes: {
-        assignations: [{
-          collaboratorType: "especialist",
-          id: currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$artic5 = currentProduct.article) === null || _currentProduct$artic5 === void 0 ? void 0 : _currentProduct$artic5.id_images_especialist
-        }, {
-          collaboratorType: "facilitator",
-          id: currentProduct === null || currentProduct === void 0 ? void 0 : (_currentProduct$artic6 = currentProduct.article) === null || _currentProduct$artic6 === void 0 ? void 0 : _currentProduct$artic6.id_images_facilitator
-        }],
-        collaborators: {
-          especialist: userGroups[1] || [],
-          facilitator: userGroups[3] || []
-        }
-      }
+  var handleOnShowModalGallery = function handleOnShowModalGallery() {
+    dispatch({
+      type: "SET_ACTIVE_TAB",
+      payload: "Imágenes"
     });
+    setShowModal(true);
   };
 
-  (0, _react.useEffect)(function () {
-    loadAssignations(product);
-  }, [userGroups]);
-  (0, _react.useEffect)(function () {
-    var _percentages$, _percentages$$relatio, _percentages$$relatio2;
-
-    var retailerPercentages = percentages === null || percentages === void 0 ? void 0 : (_percentages$ = percentages[0]) === null || _percentages$ === void 0 ? void 0 : (_percentages$$relatio = _percentages$.relations) === null || _percentages$$relatio === void 0 ? void 0 : (_percentages$$relatio2 = _percentages$$relatio[0]) === null || _percentages$$relatio2 === void 0 ? void 0 : _percentages$$relatio2.percentagesGeneral;
-    var requiredPercentage = retailerPercentages === null || retailerPercentages === void 0 ? void 0 : retailerPercentages.required;
-    setActivePercentage(requiredPercentage); // const retailers = product?.retailersAvailable || product?.retailers;
-    // if (
-    //   Object.keys(percentages[product.article.id_article] ?? {})?.length > 0
-    // ) {
-    //   retailers?.forEach((retailer, index) => {
-    //     retailer["percentage"] = Number(
-    //       percentages[product.article.id_article][retailer.id]
-    //         ?.percentageRequired
-    //     );
-    //   });
-    // }
-    // setActivePercentage(retailers[0]?.percentage);
-  }, [percentages]);
-  (0, _react.useEffect)(function () {
-    (0, _utils.getInputsData)(services, activeRetailer, setDatasheets, setDescriptions);
-    auditableVersion && loadAuditableData();
-    setActivePercentage(Math.round(activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.percentage, 0));
-    (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && setImages({
-      action: "orderImages",
-      retailerId: activeRetailer.id
+  var handleOnChangeActiveRetailer = function handleOnChangeActiveRetailer(retailer) {
+    dispatch({
+      type: "SET_ACTIVE_RETAILER",
+      payload: retailer
     });
-  }, [activeRetailer, services]);
-
-  var thumbs = function thumbs() {
-    var _images$imageType, _images$imagePackagin, _images$imageShotType, _images$values;
+  };
 
-    var imageInputs = socketType === null || socketType === void 0 ? void 0 : socketType.slice();
-    var imageType = images === null || images === void 0 ? void 0 : (_images$imageType = images.imageType) === null || _images$imageType === void 0 ? void 0 : _images$imageType.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name
-      };
-    });
-    var imagePackagingType = images === null || images === void 0 ? void 0 : (_images$imagePackagin = images.imagePackagingType) === null || _images$imagePackagin === void 0 ? void 0 : _images$imagePackagin.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name
-      };
-    });
-    var imageShotType = images === null || images === void 0 ? void 0 : (_images$imageShotType = images.imageShotType) === null || _images$imageShotType === void 0 ? void 0 : _images$imageShotType.map(function (e) {
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.type_shot
-      };
-    });
-    return images === null || images === void 0 ? void 0 : (_images$values = images.values) === null || _images$values === void 0 ? void 0 : _images$values.map(function (image, index) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryElement.GalleryElement, {
-        setCheckAll: setCheckAll,
-        image: image,
-        gridLayout: imageLayout,
-        id: "gallery-element-" + index,
-        index: index + "-" + image.name + "-" + compare,
-        number: index,
-        imageType: imageType,
-        imagePackagingType: imagePackagingType,
-        imageInputs: imageInputs,
-        imageShotType: imageShotType,
-        setSocketType: setSocketType,
-        changeImage: setImages,
-        selectedImages: selectedImages,
-        setSelectedImages: setSelectedImages,
-        auditImages: auditImages,
-        compare: compare
-      }, index + "-" + image.name);
+  var handleOnChangeActiveTab = function handleOnChangeActiveTab(tab) {
+    dispatch({
+      type: "SET_ACTIVE_TAB",
+      payload: tab
     });
   };
 
-  var saveDescriptions = /*#__PURE__*/function () {
-    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11() {
-      var dataClean, _product$article16, productTemp, articleId, dataObject, res, _JSON$parse2, newStatus, newArticleStatus;
+  var handleOnToggleImageLayout = function handleOnToggleImageLayout() {
+    setImageLayout(!imageLayout);
+  };
 
-      return _regenerator.default.wrap(function _callee11$(_context11) {
-        while (1) {
-          switch (_context11.prev = _context11.next) {
-            case 0:
-              dataClean = updatedDescriptions.filter(function (f) {
-                return f.value !== "";
-              });
+  var handleOnToggleObservation = function handleOnToggleObservation() {
+    setObservationVisible(!isObservationVisible);
+  };
 
-              if (!(dataClean.length > 0)) {
-                _context11.next = 29;
-                break;
-              }
+  var handleOnHideObservation = function handleOnHideObservation() {
+    setObservationVisible(false);
+  };
 
-              setLoading(true);
-              productTemp = product;
-              articleId = product === null || product === void 0 ? void 0 : (_product$article16 = product.article) === null || _product$article16 === void 0 ? void 0 : _product$article16.id_article;
-              dataObject = {
-                articleId: articleId,
-                articleData: dataClean
-              };
-              if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-              _context11.prev = 7;
-              _context11.next = 10;
-              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?description=true&version=").concat(version), dataObject, {
-                headers: {
-                  Authorization: token
-                }
-              });
+  var isAuditorAssigned = function isAuditorAssigned() {
+    var _state$product5;
 
-            case 10:
-              res = _context11.sent;
+    return ((_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : _state$product5.id_auditor) === (user === null || user === void 0 ? void 0 : user.id_user);
+  };
 
-              if (!(res.data.statusCode === 200)) {
-                _context11.next = 21;
-                break;
-              }
+  var isUserAssignedToService = function isUserAssignedToService(tab, rol) {
+    var _state$product6;
 
-              _JSON$parse2 = JSON.parse(res.data.body), newStatus = _JSON$parse2.newStatus, newArticleStatus = _JSON$parse2.newArticleStatus;
-              if (newArticleStatus) productTemp.status = newArticleStatus[articleId];
-              if (newStatus) productTemp.description_status = newStatus;
-              setProduct(productTemp);
-              sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-              setUpdatedDescriptions([]);
-              setMessage("Descripciones guardadas con éxito");
-              _context11.next = 21;
-              return loadData();
-
-            case 21:
-              _context11.next = 26;
-              break;
+    var concept = (0, _utils.getConceptByTab)(state.active_tab);
+    var allowedRoles = [1, 4, 5, 6, 7, 8];
+    var validUser = allowedRoles.includes(user === null || user === void 0 ? void 0 : user.id_role); // Determinar rol por defecto si no se pasa
 
-            case 23:
-              _context11.prev = 23;
-              _context11.t0 = _context11["catch"](7);
-              console.log(_context11.t0);
+    if (!rol) {
+      if (user.id_role === 4 || user.id_role === 5) {
+        rol = "facilitator";
+      } else if (user.id_role === 7 || user.id_role === 8) {
+        rol = "especialist";
+      }
+    }
 
-            case 26:
-              _context11.prev = 26;
-              setLoading(false);
-              return _context11.finish(26);
+    var isAdmin = user.id_role === 1;
+    var idUserAssigned = (_state$product6 = state.product) === null || _state$product6 === void 0 ? void 0 : _state$product6["id_".concat(concept, "_").concat(rol)];
+    var isAssigned = idUserAssigned === user.id_user;
+    return isAdmin || isAssigned && validUser;
+  };
 
-            case 29:
-            case "end":
-              return _context11.stop();
-          }
-        }
-      }, _callee11, null, [[7, 23, 26, 29]]);
-    }));
+  var canShowSingleEvaluationButtons = function canShowSingleEvaluationButtons(action) {
+    var _state$services_data, _state$services_data$, _state$services_data$2;
 
-    return function saveDescriptions() {
-      return _ref15.apply(this, arguments);
-    };
-  }();
+    var concept = (0, _utils.getConceptByTab)(action || state.active_tab);
+    var retailerStatus = (_state$services_data = state.services_data) === null || _state$services_data === void 0 ? void 0 : (_state$services_data$ = _state$services_data.find(function (srv) {
+      var _state$active_retaile2;
+
+      return srv.id_retailer === ((_state$active_retaile2 = state.active_retailer) === null || _state$active_retaile2 === void 0 ? void 0 : _state$active_retaile2.id_retailer) && srv.service === concept;
+    })) === null || _state$services_data$ === void 0 ? void 0 : (_state$services_data$2 = _state$services_data$.status) === null || _state$services_data$2 === void 0 ? void 0 : _state$services_data$2.replace(/.*\//, "");
+    var adminFacilitatorCanEvaluate = retailerStatus === "IE" && [1, 4, 5].includes(user.id_role);
+    var adminAuditorCanEvaluate = ["AC", "RP", "RCA", "SAC"].includes(retailerStatus) && [1, 6].includes(user.id_role);
+    return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
+  };
+
+  var canShowBulkEvaluationButtons = function canShowBulkEvaluationButtons() {
+    var concepts = (0, _utils.getConceptsByRole)(user.id_role);
+    var services = state.services_data.filter(function (_ref7) {
+      var service = _ref7.service;
+      return concepts.includes(service);
+    });
+    var adminFacilitatorCanEvaluate = services.every(function (srv) {
+      var _srv$status;
+
+      return (srv === null || srv === void 0 ? void 0 : (_srv$status = srv.status) === null || _srv$status === void 0 ? void 0 : _srv$status.replace(/.*\//, "")) === "IE";
+    }) && [1, 4, 5].includes(user.id_role);
+    var adminAuditorCanEvaluate = state.services_data.every(function (srv) {
+      var _srv$status2;
+
+      return ["AC", "RP", "RCA"].includes(srv === null || srv === void 0 ? void 0 : (_srv$status2 = srv.status) === null || _srv$status2 === void 0 ? void 0 : _srv$status2.replace(/.*\//, ""));
+    }) && [1, 6].includes(user.id_role);
+    return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
+  };
+
+  var getStatusByCurrentServiceAndRetailer = function getStatusByCurrentServiceAndRetailer() {
+    var _statusByRetailer$fil;
+
+    var statusByRetailer = state.product.statusByRetailer;
+    if (!statusByRetailer) return "-";
+    var currentService = (0, _utils.getConceptByTab)(state.active_tab);
+    var currentRetailer = state.active_retailer.id_retailer;
+    var currentStatus = ((_statusByRetailer$fil = statusByRetailer.filter(function (item) {
+      return item.retailer_id === currentRetailer && item.service === currentService;
+    })[0]) === null || _statusByRetailer$fil === void 0 ? void 0 : _statusByRetailer$fil.status) || "-";
+    return currentStatus;
+  };
 
-  var saveDatasheets = /*#__PURE__*/function () {
-    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
-      var dataClean, _product$article17, productTemp, articleId, dataObject, res, _JSON$parse3, newStatus, newArticleStatus;
+  var handleOnClickSaveImages = function handleOnClickSaveImages() {
+    var _state$product7, _state$product7$servi;
 
-      return _regenerator.default.wrap(function _callee12$(_context12) {
+    if (((_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : (_state$product7$servi = _state$product7.services) === null || _state$product7$servi === void 0 ? void 0 : _state$product7$servi.images) === 1) {
+      saveImageAttrs(token);
+    }
+  };
+
+  var handleOnClickSave = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
-              dataClean = updatedDatasheets.filter(function (f) {
-                return f.value !== "";
-              });
-
-              if (!(dataClean.length > 0)) {
-                _context12.next = 29;
+              if (!state.saving) {
+                _context5.next = 2;
                 break;
               }
 
-              setLoading(true);
-              productTemp = product;
-              articleId = product === null || product === void 0 ? void 0 : (_product$article17 = product.article) === null || _product$article17 === void 0 ? void 0 : _product$article17.id_article;
-              dataObject = {
-                articleId: articleId,
-                articleData: dataClean
-              };
-              if (product !== null && product !== void 0 && product.orderId) dataObject["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-              _context12.prev = 7;
-              _context12.next = 10;
-              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?datasheet=true&version=").concat(version), dataObject, {
-                headers: {
-                  Authorization: token
-                }
-              });
+              return _context5.abrupt("return");
+
+            case 2:
+              _context5.t0 = state.active_tab;
+              _context5.next = _context5.t0 === "Descripción" ? 5 : _context5.t0 === "Ficha técnica" ? 8 : _context5.t0 === "Imágenes" ? 11 : 14;
+              break;
+
+            case 5:
+              _context5.next = 7;
+              return saveDescriptions(token);
+
+            case 7:
+              return _context5.abrupt("break", 15);
+
+            case 8:
+              _context5.next = 10;
+              return saveDatasheets(token);
 
             case 10:
-              res = _context12.sent;
+              return _context5.abrupt("break", 15);
 
-              if (!(res.data.statusCode === 200)) {
-                _context12.next = 21;
-                break;
-              }
+            case 11:
+              _context5.next = 13;
+              return updateImages(token);
 
-              _JSON$parse3 = JSON.parse(res.data.body), newStatus = _JSON$parse3.newStatus, newArticleStatus = _JSON$parse3.newArticleStatus;
-              if (newArticleStatus) productTemp.status = newArticleStatus[articleId];
-              if (newStatus) productTemp.datasheet_status = newStatus;
-              setProduct(productTemp);
-              sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-              setUpdatedDatasheets([]);
-              setMessage("Fichas técnicas guardadas");
-              _context12.next = 21;
-              return loadData();
-
-            case 21:
-              _context12.next = 26;
-              break;
+            case 13:
+              return _context5.abrupt("break", 15);
 
-            case 23:
-              _context12.prev = 23;
-              _context12.t0 = _context12["catch"](7);
-              console.log(_context12.t0);
+            case 14:
+              return _context5.abrupt("break", 15);
 
-            case 26:
-              _context12.prev = 26;
-              setLoading(false);
-              return _context12.finish(26);
+            case 15:
+              _context5.next = 17;
+              return loadData(false);
 
-            case 29:
+            case 17:
             case "end":
-              return _context12.stop();
+              return _context5.stop();
           }
         }
-      }, _callee12, null, [[7, 23, 26, 29]]);
+      }, _callee5);
     }));
 
-    return function saveDatasheets() {
-      return _ref16.apply(this, arguments);
+    return function handleOnClickSave() {
+      return _ref8.apply(this, arguments);
     };
   }();
 
-  (0, _react.useEffect)(function () {
-    var _images$inputs;
-
-    var imageInputs = images === null || images === void 0 ? void 0 : (_images$inputs = images.inputs) === null || _images$inputs === void 0 ? void 0 : _images$inputs.map(function (e) {
-      var _images$values2;
-
-      return {
-        value: e === null || e === void 0 ? void 0 : e.id,
-        name: e === null || e === void 0 ? void 0 : e.name,
-        required: e === null || e === void 0 ? void 0 : e.required,
-        active: images === null || images === void 0 ? void 0 : (_images$values2 = images.values) === null || _images$values2 === void 0 ? void 0 : _images$values2.some(function (value) {
-          return (value === null || value === void 0 ? void 0 : value.image_id) === (e === null || e === void 0 ? void 0 : e.id);
-        })
-      };
+  var handleOnSetUpdatedDescriptions = function handleOnSetUpdatedDescriptions(items) {
+    dispatch({
+      type: "SET_UPDATED_DESCRIPTIONS_INPUTS",
+      payload: items
     });
-    setSocketType(imageInputs);
-  }, [images]);
-  var updateImages = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13() {
-    var _images$values3, _images$attrForImgs, _product$article18, _data$articleData, _data$articleData2, _data$updateImages;
-
-    var imagesList, imagesListTemp, duplicated, attrForImgs, data, valid, _data$updateImages2, _data$articleData3, _data$articleData4, _data$articleData5, promiseArray;
-
-    return _regenerator.default.wrap(function _callee13$(_context13) {
-      while (1) {
-        switch (_context13.prev = _context13.next) {
-          case 0:
-            imagesList = images === null || images === void 0 ? void 0 : (_images$values3 = images.values) === null || _images$values3 === void 0 ? void 0 : _images$values3.slice();
-            imagesListTemp = imagesList === null || imagesList === void 0 ? void 0 : imagesList.reduce(function (acc, image) {
-              acc[image === null || image === void 0 ? void 0 : image.image_id] = ++acc[image === null || image === void 0 ? void 0 : image.image_id] || 0;
-              return acc;
-            }, {});
-            duplicated = imagesList === null || imagesList === void 0 ? void 0 : imagesList.filter(function (image) {
-              return imagesListTemp[image === null || image === void 0 ? void 0 : image.image_id];
-            });
-            attrForImgs = Object.values((_images$attrForImgs = images === null || images === void 0 ? void 0 : images.attrForImgs) !== null && _images$attrForImgs !== void 0 ? _images$attrForImgs : {}).pop();
-            data = {
-              articleId: product === null || product === void 0 ? void 0 : (_product$article18 = product.article) === null || _product$article18 === void 0 ? void 0 : _product$article18.id_article,
-              attrReqImgs: attrForImgs === null || attrForImgs === void 0 ? void 0 : attrForImgs.map(function (e) {
-                var _e$value;
-
-                return {
-                  attrId: e.id,
-                  value: (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : "-"
-                };
-              }),
-              articleData: imagesList === null || imagesList === void 0 ? void 0 : imagesList.filter(function (e) {
-                return !e.id;
-              }),
-              updateImages: imagesList === null || imagesList === void 0 ? void 0 : imagesList.filter(function (e) {
-                return e.id;
-              })
-            };
-            if (product !== null && product !== void 0 && product.orderId) data["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-            valid = (data === null || data === void 0 ? void 0 : (_data$articleData = data.articleData) === null || _data$articleData === void 0 ? void 0 : _data$articleData.length) === 0 ? true : data === null || data === void 0 ? void 0 : (_data$articleData2 = data.articleData) === null || _data$articleData2 === void 0 ? void 0 : _data$articleData2.every(function (e, i) {
-              // if (e?.image_id && e?.packing_type && e?.image_type) {
-              if (e !== null && e !== void 0 && e.image_id) {
-                return true;
-              }
-
-              return false;
-            });
-
-            if (valid && (data === null || data === void 0 ? void 0 : (_data$updateImages = data.updateImages) === null || _data$updateImages === void 0 ? void 0 : _data$updateImages.length) > 0 && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0) {
-              valid = data === null || data === void 0 ? void 0 : (_data$updateImages2 = data.updateImages) === null || _data$updateImages2 === void 0 ? void 0 : _data$updateImages2.every(function (e, i) {
-                // if (e?.image_id && e?.packing_type && e?.image_type) {
-                if (e !== null && e !== void 0 && e.image_id) {
-                  return true;
-                }
-
-                return false;
-              });
-            }
-
-            if (!(valid && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0)) {
-              _context13.next = 33;
-              break;
-            }
-
-            setLoading(true);
-            _context13.prev = 10;
-            data === null || data === void 0 ? void 0 : (_data$articleData3 = data.articleData) === null || _data$articleData3 === void 0 ? void 0 : _data$articleData3.forEach(function (e) {
-              e.uuid = (0, _uuid.v4)();
-            });
-            setDataImages(data);
-
-            if (!((data === null || data === void 0 ? void 0 : (_data$articleData4 = data.articleData) === null || _data$articleData4 === void 0 ? void 0 : _data$articleData4.length) > 0)) {
-              _context13.next = 22;
-              break;
-            }
-
-            setImagesUploaded(false);
-            promiseArray = [];
-            data === null || data === void 0 ? void 0 : (_data$articleData5 = data.articleData) === null || _data$articleData5 === void 0 ? void 0 : _data$articleData5.forEach(function (e) {
-              var file;
+  };
 
-              if (e.ext == "mp4") {
-                file = Buffer.from(e.video_src.replace(/^data:video\/\w+;base64,/, ""), "base64");
-                e.video_src = "";
-              } else {
-                file = Buffer.from(e.src.replace(/^data:image\/\w+;base64,/, ""), "base64");
-              }
+  var handleOnSetUpdatedDatasheets = function handleOnSetUpdatedDatasheets(items) {
+    dispatch({
+      type: "SET_UPDATED_DATASHEETS_INPUTS",
+      payload: items
+    });
+  };
 
-              var params = {
-                ACL: "public-read",
-                Body: file,
-                Bucket: S3_BUCKET,
-                Key: "id-".concat(data.articleId, "/").concat(version, "/").concat(e === null || e === void 0 ? void 0 : e.image_id, "-").concat(e === null || e === void 0 ? void 0 : e.uuid, ".").concat(e === null || e === void 0 ? void 0 : e.ext)
-              };
-              promiseArray.push(myBucket.putObject(params).promise());
-            });
-            _context13.next = 19;
-            return Promise.all(promiseArray);
-
-          case 19:
-            setImagesUploaded(true);
-            _context13.next = 23;
-            break;
-
-          case 22:
-            setImagesUploaded(true);
-
-          case 23:
-            _context13.next = 28;
-            break;
-
-          case 25:
-            _context13.prev = 25;
-            _context13.t0 = _context13["catch"](10);
-            console.log(_context13.t0); // setMainLoading(false);
-
-          case 28:
-            _context13.prev = 28;
-            setLoading(false);
-            return _context13.finish(28);
-
-          case 31:
-            _context13.next = 34;
-            break;
-
-          case 33:
-            // setMainLoading(false);
-            setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
-
-          case 34:
-          case "end":
-            return _context13.stop();
+  var handleOnAskToDeleteImages = function handleOnAskToDeleteImages() {
+    if (state.selected_images.length === 0) {
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Eliminar imágenes",
+          message: "No has seleccionado ninguna imagen para eliminar.",
+          image: _genericModalWarning.default
         }
-      }
-    }, _callee13, null, [[10, 25, 28, 31]]);
-  })), [images, imagesUploaded]);
-  (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14() {
-    var res, _product$article19, productTemp, _JSON$parse4, newStatus, newArticleStatus;
-
-    return _regenerator.default.wrap(function _callee14$(_context14) {
-      while (1) {
-        switch (_context14.prev = _context14.next) {
-          case 0:
-            if (!imagesUploaded) {
-              _context14.next = 14;
-              break;
-            }
-
-            dataImages.articleData = dataImages === null || dataImages === void 0 ? void 0 : dataImages.articleData.map(function (e) {
-              delete e.src;
-              e.imageID = e.image_id; // e.packingType = e.packing_type;
-              // e.imageType = e.image_type;
+      });
+      return;
+    }
 
-              if (product !== null && product !== void 0 && product.orderId) e["orderId"] = product === null || product === void 0 ? void 0 : product.orderId;
-              return e;
+    dispatch({
+      type: "SET_MODAL",
+      payload: {
+        show: true,
+        title: "Eliminar imágenes",
+        message: "¿Estás seguro de que deseas eliminar las imágenes seleccionadas?",
+        image: _genericModalWarning.default,
+        buttons: [{
+          text: "Cancelar",
+          buttonType: "general-white-button",
+          action: function action() {
+            return dispatch({
+              type: "SET_MODAL",
+              payload: {
+                show: false
+              }
             });
-            _context14.prev = 2;
-            _context14.next = 5;
-            return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), dataImages, {
-              headers: {
-                Authorization: token
+          }
+        }, {
+          text: "Eliminar",
+          buttonType: "general-button-default",
+          action: function action() {
+            dispatch({
+              type: "SET_MODAL",
+              payload: {
+                show: false
               }
             });
-
-          case 5:
-            res = _context14.sent;
-
-            if (res.data.statusCode === 200) {
-              productTemp = product;
-              _JSON$parse4 = JSON.parse(res.data.body), newStatus = _JSON$parse4.newStatus, newArticleStatus = _JSON$parse4.newArticleStatus;
-              if (newArticleStatus) productTemp.status = newArticleStatus[product === null || product === void 0 ? void 0 : (_product$article19 = product.article) === null || _product$article19 === void 0 ? void 0 : _product$article19.id_article];
-              if (newStatus) productTemp.images_status = newStatus;
-              setProduct(productTemp);
-              sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-              setImages({});
-              setMessage("Imágenes guardadas con éxito");
-              sessionStorage.removeItem("imagesList");
-            }
-
-            _context14.next = 9;
-            return loadData();
-
-          case 9:
-            _context14.next = 14;
-            break;
-
-          case 11:
-            _context14.prev = 11;
-            _context14.t0 = _context14["catch"](2);
-            console.log(_context14.t0);
-
-          case 14:
-          case "end":
-            return _context14.stop();
-        }
+            deleteImages(token);
+          }
+        }]
       }
-    }, _callee14, null, [[2, 11]]);
-  })), [dataImages, imagesUploaded]);
-
-  var evaluationFinished = function evaluationFinished(userId, tab, statusArray) {
-    var _srv$find, _srv$find$status, _product$;
-
-    var srv = servicesData.filter(function (serv) {
-      return serv.service === getConcept(tab);
     });
-    var srvActive = (_srv$find = srv.find(function (serv) {
-      return serv.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id);
-    })) === null || _srv$find === void 0 ? void 0 : (_srv$find$status = _srv$find.status) === null || _srv$find$status === void 0 ? void 0 : _srv$find$status.replace(/.*\//, "");
-    var currStatus = (_product$ = product["".concat(getConcept(tab), "_status")]) === null || _product$ === void 0 ? void 0 : _product$.replace(/.*\//, "");
-    var unvalidated = ["IE", "CA"].includes(currStatus);
-    var auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(currStatus);
-
-    switch (userId) {
-      case 7:
-      case 8:
-        return statusArray.includes(srvActive) && statusArray.includes(product === null || product === void 0 ? void 0 : product.status) || srv.filter(function (serv) {
-          var _serv$status;
-
-          return statusArray.includes((_serv$status = serv.status) === null || _serv$status === void 0 ? void 0 : _serv$status.replace(/.*\//, ""));
-        }).length === srv.length;
-
-      case 4:
-      case 5:
-        return unvalidated && ["CA", "IE"].includes(product.status) && // "RC", "AC", "AA", "AP", "ACA"
-        srv.filter(function (serv) {
-          return statusArray.includes(serv.status);
-        }).length === srv.length;
-
-      case 6:
-        return statusArray.includes(product.status) && // RP, RCA, AC, RA true
-        srv.every(function (serv) {
-          return ["RA", "AA", "AP", "ACA"].includes(serv.status);
-        }) && auditorUnvalidated;
-
-      default:
-        break;
-    }
   };
 
-  var getConcept = function getConcept(tab) {
-    switch (tab) {
-      case "Descripción":
-        return "description";
-
-      case "Ficha técnica":
-        return "datasheet";
-
-      case "Imágenes":
-        return "images";
-    }
-  };
-
-  var approveRejectButtons = function approveRejectButtons(action) {
-    var _servicesData$find, _servicesData$find$st;
-
-    var concept = getConcept(action || activeTab);
-    var retailerStatus = (_servicesData$find = servicesData.find(function (srv) {
-      return srv.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && srv.service === concept;
-    })) === null || _servicesData$find === void 0 ? void 0 : (_servicesData$find$st = _servicesData$find.status) === null || _servicesData$find$st === void 0 ? void 0 : _servicesData$find$st.replace(/.*\//, ""); //sessionStorage product
-
-    var adminFacilitatorCanEvaluate = retailerStatus === "IE" && [1, 4, 5].includes(user.id_role);
-    var adminAuditorCanEvaluate = ["AC", "RP", "RCA", "SAC"].includes(retailerStatus) && [1, 6].includes(user.id_role);
-    return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
-  };
-
-  var approveRejectAllButtons = function approveRejectAllButtons() {
-    var concepts = [];
-
-    switch (user.id_role) {
-      case 4:
-        concepts = ["description", "datasheet"];
-        break;
-
-      case 5:
-        concepts = ["images"];
-        break;
-
-      default:
-        concepts = ["description", "datasheet", "images"];
-        break;
-    }
-
-    var services = servicesData.filter(function (_ref19) {
-      var service = _ref19.service;
-      return concepts.includes(service);
-    });
-    var adminFacilitatorCanEvaluate = services.every(function (srv) {
-      var _srv$status;
+  var handleOnApproveSingleService = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+      return _regenerator.default.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              _context6.next = 2;
+              return sendSingleEvaluation("A");
 
-      return (srv === null || srv === void 0 ? void 0 : (_srv$status = srv.status) === null || _srv$status === void 0 ? void 0 : _srv$status.replace(/.*\//, "")) === "IE";
-    }) && [1, 4, 5].includes(user.id_role); //sessionStorage product
+            case 2:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    }));
 
-    var adminAuditorCanEvaluate = servicesData.every(function (srv) {
-      var _srv$status2;
+    return function handleOnApproveSingleService() {
+      return _ref9.apply(this, arguments);
+    };
+  }();
 
-      return ["AC", "RP", "RCA"].includes(srv === null || srv === void 0 ? void 0 : (_srv$status2 = srv.status) === null || _srv$status2 === void 0 ? void 0 : _srv$status2.replace(/.*\//, ""));
-    }) && [1, 6].includes(user.id_role);
-    return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
+  var handleOnRejectSingleService = function handleOnRejectSingleService() {
+    setShowRejectModal(true);
   };
 
-  var getSectionIcon = function getSectionIcon() {
-    switch (activeTab) {
-      case "Ficha técnica":
-        setIcon(_attributesSent.default);
-        break;
-
-      case "Descripción":
-        setIcon(_descriptionSent.default);
-        break;
-
-      case "Imágenes":
-        setIcon(_uploadingImages.default);
-        break;
-
-      default:
-        break;
-    }
-  };
+  var sendSingleEvaluation = /*#__PURE__*/function () {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(result) {
+      var _state$product$id_ord, _state$active_retaile3;
 
-  var sendToFacilitator = /*#__PURE__*/function () {
-    var _ref20 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(result) {
-      var concept, productTemp, evalStatus, articleId, orderId, data, res, _message, specialistDone, _JSON$parse5, newStatus, newOrderStatus, newArticleStatus, messageToChat, _data;
+      var concept, articleId, orderId, sectionStatusKey, evalStatus, retailerId, data, res, message, icon, activeTab, newStatuses, serviceStatus, articleStatus, updatedStatusByRetailer, updatedProduct, specialistDone, _objectSpread2, _state$services_data2, _JSON$parse2, newStatus, newOrderStatus, newArticleStatus, _articleStatus, _updatedProduct, updatedServicesData, sessionProduct, _objectSpread3, productInSession, updatedProductInSession;
 
-      return _regenerator.default.wrap(function _callee15$(_context15) {
+      return _regenerator.default.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context15.prev = _context15.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
-              if (!loading) setLoading(true);
-              _context15.prev = 1;
-              concept = getConcept(activeTab);
-              productTemp = (0, _objectSpread2.default)({}, product);
-              evalStatus = retailerStatus;
-              articleId = product.article.id_article;
-              orderId = product.orderId;
+              if (!state.saving) {
+                _context7.next = 2;
+                break;
+              }
+
+              return _context7.abrupt("return");
+
+            case 2:
+              dispatch({
+                type: "SET_SAVING",
+                payload: true
+              });
+              concept = (0, _utils.getConceptByTab)(state.active_tab);
+              articleId = state.product.id_article;
+              orderId = (_state$product$id_ord = state.product.id_order) !== null && _state$product$id_ord !== void 0 ? _state$product$id_ord : state.product.orderId;
+              sectionStatusKey = "".concat(concept, "_status");
+              evalStatus = state.product[sectionStatusKey];
+              retailerId = (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer;
               data = {
                 articleId: articleId,
                 orderId: orderId,
                 concept: concept,
                 evalStatus: evalStatus,
-                retailerId: activeRetailer.id
+                retailerId: retailerId
               };
+              activeTab = state.active_tab;
+              _context7.prev = 11;
 
               if (!result) {
-                _context15.next = 16;
+                _context7.next = 28;
                 break;
               }
 
               data.result = result;
-              _context15.next = 12;
+              data.retailerId = retailerId;
+              _context7.next = 17;
               return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 12:
-              res = _context15.sent;
-              getServices();
-              _context15.next = 21;
+            case 17:
+              res = _context7.sent;
+              newStatuses = JSON.parse(res.data.body);
+              serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")];
+              articleStatus = newStatuses.newArticleStatus[articleId];
+              console.log({
+                newStatuses: newStatuses
+              }); // Actualizar el producto con los nuevos estados
+
+              updatedStatusByRetailer = state.product.statusByRetailer.map(function (item) {
+                return item.retailer_id === retailerId && item.service === concept ? (0, _objectSpread5.default)((0, _objectSpread5.default)({}, item), {}, {
+                  status: serviceStatus
+                }) : item;
+              });
+              updatedProduct = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
+                statusByRetailer: updatedStatusByRetailer // version_status: articleStatus,
+                // status: articleStatus,
+                // article_status: articleStatus
+
+              });
+              dispatch({
+                type: "SET_PRODUCT",
+                payload: updatedProduct
+              }); // Mostrar modal de éxito
+
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "",
+                  message: result === "A" ? "Aprobado con éxito" : "Rechazado con éxito",
+                  image: _genericModalCheck.default
+                }
+              });
+              _context7.next = 33;
               break;
 
-            case 16:
+            case 28:
+              //Caso del botón "Enviar evaluación"
+              //Se construye el mensaje y se actualiza el estatus
               specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
 
               if (specialistDone) {
-                _message = "".concat(activeTab, " enviada a facilitador");
-                getSectionIcon();
+                message = "".concat(activeTab, " enviada a facilitador");
+                icon = activeTab === "Descripción" ? _descriptionSent.default : activeTab === "Ficha técnica" ? _attributesSent.default : _uploadingImages.default;
               } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
-                _message = "Evaluación enviada";
-                getSectionIcon();
+                message = "Evaluación enviada";
+                icon = _genericModalCheck.default;
               }
 
-              _context15.next = 20;
+              _context7.next = 32;
               return _axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
                 headers: {
                   Authorization: token
                 }
               });
 
-            case 20:
-              res = _context15.sent;
-
-            case 21:
-              if (!(res.data.statusCode === 200)) {
-                _context15.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
-                }
-              };
-              _context15.next = 27;
-              return (0, _utils.sendMessage)(_data);
-
-            case 27:
-              if (newOrderStatus) productTemp.status = newArticleStatus[articleId];
-              productTemp["".concat(concept, "_status")] = newStatus;
-              _context15.next = 31;
-              return loadData();
-
-            case 31:
-              if (_message) setMessage(_message);
-              sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-              setProduct(productTemp);
-
-            case 34:
-              _context15.next = 40;
-              break;
-
-            case 36:
-              _context15.prev = 36;
-              _context15.t0 = _context15["catch"](1);
-              setLoading(false);
-              console.log(_context15.t0);
-
-            case 40:
-            case "end":
-              return _context15.stop();
-          }
-        }
-      }, _callee15, null, [[1, 36]]);
-    }));
+            case 32:
+              res = _context7.sent;
 
-    return function sendToFacilitator(_x5) {
-      return _ref20.apply(this, arguments);
-    };
-  }();
+            case 33:
+              if (res.data.statusCode === 200) {
+                _JSON$parse2 = JSON.parse(res.data.body), newStatus = _JSON$parse2.newStatus, newOrderStatus = _JSON$parse2.newOrderStatus, newArticleStatus = _JSON$parse2.newArticleStatus;
+                _articleStatus = newArticleStatus[articleId];
+                console.log({
+                  newArticleStatus: newArticleStatus
+                }); // const retailers = state.product.categoryRetailer.map((r) => ({
+                //   id: r.id_retailer,
+                //   name: r.retailerName,
+                // }));
+                // const messageToChat = createMessage(
+                //   retailers,
+                //   retailerId,
+                //   evalStatus,
+                //   newStatus,
+                //   activeTab,
+                // );
+                // const messageData = {
+                //   paramsBody: {
+                //     id: articleId,
+                //     version: state.product.version,
+                //     items: [{ type: "status", value: messageToChat }],
+                //     retailerId: retailerId,
+                //     status: state.product.status,
+                //   },
+                //   paramsHeader: { Authorization: token },
+                // };
+                // await sendMessage(messageData);
+
+                _updatedProduct = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, (_objectSpread2 = {}, (0, _defineProperty2.default)(_objectSpread2, "".concat(concept, "_status"), newStatus), (0, _defineProperty2.default)(_objectSpread2, "statusByRetailer", state.product.statusByRetailer.map(function (item) {
+                  if (item.retailer_id === retailerId && item.service === concept) {
+                    return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, item), {}, {
+                      status: newStatus
+                    });
+                  }
 
-  var userAssigned = function userAssigned(tab, rol) {
-    var concept = getConcept(activeTab);
-    var allowedRoles = [1, 4, 5, 6, 7, 8];
-    var validUser = allowedRoles.includes(user === null || user === void 0 ? void 0 : user.id_role);
+                  return item;
+                })), _objectSpread2)); //Actualizamos el services_data en el servicio específico del retailer actual
 
-    if (!rol) {
-      switch (user.id_role) {
-        case 4:
-        case 5:
-          rol = "facilitator";
-          break;
-
-        case 7:
-        case 8:
-          rol = "especialist";
-          break;
-      }
-    }
+                updatedServicesData = (_state$services_data2 = state.services_data) === null || _state$services_data2 === void 0 ? void 0 : _state$services_data2.map(function (service) {
+                  return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, service), {}, {
+                    status: (service === null || service === void 0 ? void 0 : service.id_retailer) === retailerId && (service === null || service === void 0 ? void 0 : service.service) === concept ? newStatus : service === null || service === void 0 ? void 0 : service.status
+                  });
+                });
+                sessionProduct = sessionStorage.getItem("productSelected");
+
+                if (sessionProduct) {
+                  productInSession = JSON.parse(sessionProduct);
+                  updatedProductInSession = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, productInSession), {}, (_objectSpread3 = {}, (0, _defineProperty2.default)(_objectSpread3, "".concat(concept, "_status"), newStatus), (0, _defineProperty2.default)(_objectSpread3, "statusByRetailer", state.product.statusByRetailer.map(function (item) {
+                    if (item.retailer_id === retailerId && item.service === concept) {
+                      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, item), {}, {
+                        status: newStatus
+                      });
+                    }
 
-    return user.id_role === 1 || product.article["id_".concat(concept, "_").concat(rol)] === user.id_user && validUser;
-  };
+                    return item;
+                  })), _objectSpread3));
+                  sessionStorage.setItem("productSelected", JSON.stringify(updatedProductInSession));
+                }
 
-  var auditorAssigned = function auditorAssigned() {
-    return (product === null || product === void 0 ? void 0 : product.article["id_auditor"]) === user.id_user;
-  };
+                if (message) {
+                  dispatch({
+                    type: "SET_MODAL",
+                    payload: {
+                      show: true,
+                      title: "",
+                      message: message,
+                      image: _genericModalCheck.default
+                    }
+                  });
+                }
 
-  var createComment = /*#__PURE__*/function () {
-    var _ref21 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16(e, body, tab) {
-      var _product$article20;
+                dispatch({
+                  type: "SET_PRODUCT",
+                  payload: _updatedProduct
+                });
+                dispatch({
+                  type: "SET_SERVICES_DATA",
+                  payload: updatedServicesData
+                });
+              }
 
-      var concept, data;
-      return _regenerator.default.wrap(function _callee16$(_context16) {
-        while (1) {
-          switch (_context16.prev = _context16.next) {
-            case 0:
-              concept = "";
-              _context16.t0 = activeTab;
-              _context16.next = _context16.t0 === "Ficha técnica" ? 4 : _context16.t0 === "Imágenes" ? 6 : 8;
+              _context7.next = 40;
               break;
 
-            case 4:
-              concept = "datasheet";
-              return _context16.abrupt("break", 10);
-
-            case 6:
-              concept = "images";
-              return _context16.abrupt("break", 10);
-
-            case 8:
-              concept = "description";
-              return _context16.abrupt("break", 10);
-
-            case 10:
-              data = {
-                articleId: product === null || product === void 0 ? void 0 : (_product$article20 = product.article) === null || _product$article20 === void 0 ? void 0 : _product$article20.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
-              };
-              _context16.next = 13;
-              return _axios.default.post("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
-                headers: {
-                  Authorization: token
+            case 36:
+              _context7.prev = 36;
+              _context7.t0 = _context7["catch"](11);
+              console.error("Error sending evaluation:", _context7.t0);
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "Error",
+                  message: "Hubo un error al procesar la evaluación",
+                  image: _errorModal.default
                 }
               });
 
-            case 13:
-              _context16.next = 15;
-              return getComments(tab);
-
-            case 15:
-              setMessage("");
-              setComponentsArray([]);
+            case 40:
+              _context7.prev = 40;
+              dispatch({
+                type: "SET_SAVING",
+                payload: false
+              });
+              return _context7.finish(40);
 
-            case 17:
+            case 43:
             case "end":
-              return _context16.stop();
+              return _context7.stop();
           }
         }
-      }, _callee16);
+      }, _callee7, null, [[11, 36, 40, 43]]);
     }));
 
-    return function createComment(_x6, _x7, _x8) {
-      return _ref21.apply(this, arguments);
+    return function sendSingleEvaluation(_x2) {
+      return _ref10.apply(this, arguments);
     };
   }();
 
-  var getRequired = function getRequired(services) {
-    try {
-      var _services$2, _services$2$retailerM, _services$3, _services$3$inputs;
-
-      var objetcTemp = {};
-      var datasheetServicesArray = Object.values(services[0]);
-      var allDatasheetInputs = datasheetServicesArray.pop();
-      var descriptionsServicesArray = services[1];
-      var dsInputsRequired = [];
-      var desInputsRequired = 0;
-      datasheetServicesArray === null || datasheetServicesArray === void 0 ? void 0 : datasheetServicesArray.forEach(function (datasheet) {
-        var _servicesData$filter = servicesData === null || servicesData === void 0 ? void 0 : servicesData.filter(function (srv) {
-          return srv.id_retailer === datasheet.retailer.id && srv.service === getConcept(activeTab);
-        }),
-            _servicesData$filter2 = (0, _slicedToArray2.default)(_servicesData$filter, 1),
-            requested = _servicesData$filter2[0];
-
-        requested && (datasheet === null || datasheet === void 0 ? void 0 : datasheet.data) && Object.values(datasheet === null || datasheet === void 0 ? void 0 : datasheet.data).forEach(function (dataGroup) {
-          dsInputsRequired.push.apply(dsInputsRequired, (0, _toConsumableArray2.default)(dataGroup.inputs.filter(function (input) {
-            return allDatasheetInputs[input].required && allDatasheetInputs[input].id_retailer === activeRetailer.id && (allDatasheetInputs[input].value === undefined || !allDatasheetInputs[input].value);
-          })));
-        });
-      });
-      objetcTemp["Ficha técnica"] = dsInputsRequired.length;
-      var regex = /(<\/?p>)|(<\/?strong>)|(<br>)/gm;
-      descriptionsServicesArray.forEach(function (description) {
-        if (description.id != activeRetailer.id) return;
+  var handleOnApproveAllServices = /*#__PURE__*/function () {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+      return _regenerator.default.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.next = 2;
+              return sendBulkEvaluation("A");
 
-        var _servicesData$filter3 = servicesData.filter(function (srv) {
-          return srv.id_retailer === description.id && srv.service === getConcept(activeTab);
-        }),
-            _servicesData$filter4 = (0, _slicedToArray2.default)(_servicesData$filter3, 1),
-            requested = _servicesData$filter4[0];
+            case 2:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee8);
+    }));
 
-        if (requested) {
-          description.inputs.forEach(function (input) {
-            var _input$value;
+    return function handleOnApproveAllServices() {
+      return _ref11.apply(this, arguments);
+    };
+  }();
 
-            if (input.required && (!input.value || ((_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.replace(regex, "")) === "")) {
-              desInputsRequired++;
-            }
-          });
-        }
-      });
-      objetcTemp["Descripción"] = desInputsRequired;
-      var retailersRequested = [];
-      (_services$2 = services[2]) === null || _services$2 === void 0 ? void 0 : (_services$2$retailerM = _services$2.retailerMandatories) === null || _services$2$retailerM === void 0 ? void 0 : _services$2$retailerM.forEach(function (retMan) {
-        return retMan.forEach(function (rm) {
-          return retailersRequested.push(rm);
-        });
-      });
-      var requiredImages = (_services$3 = services[2]) === null || _services$3 === void 0 ? void 0 : (_services$3$inputs = _services$3.inputs) === null || _services$3$inputs === void 0 ? void 0 : _services$3$inputs.filter(function (e) {
-        return e.required === 1 && retailersRequested.filter(function (ret) {
-          return ret.id_image === e.id && servicesData.filter(function (srv) {
-            return srv.id_retailer === ret.id_retailer;
-          }).length > 0;
-        }).length > 0;
-      });
-      var requiredCounter = 0;
-      requiredImages === null || requiredImages === void 0 ? void 0 : requiredImages.forEach(function (req) {
-        return services[2].values.filter(function (img) {
-          return img.image_id === req.id;
-        }).length === 0 && requiredCounter++;
-      });
-      objetcTemp["Imágenes"] = requiredCounter;
-      setRequiredNull(objetcTemp);
-    } catch (error) {
-      console.log(error);
-    }
+  var handleOnRejectAllServices = function handleOnRejectAllServices() {
+    setRejectAll(true);
+    setShowRejectModal(true);
   };
 
-  (0, _react.useEffect)(function () {
-    setComment(comments[activeTab]);
-  }, [activeTab]);
+  var sendBulkEvaluation = /*#__PURE__*/function () {
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(result) {
+      var _state$services_data3, evaluationArray, conceptArray, status, updatedStatusByRetailer, updatedProduct, updatedServicesData;
 
-  var commentRevised = /*#__PURE__*/function () {
-    var _ref22 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17() {
-      var data;
-      return _regenerator.default.wrap(function _callee17$(_context17) {
+      return _regenerator.default.wrap(function _callee9$(_context9) {
         while (1) {
-          switch (_context17.prev = _context17.next) {
+          switch (_context9.prev = _context9.next) {
             case 0:
-              data = {
-                commentId: comment.id
-              };
-              _context17.next = 3;
-              return _axios.default.put("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
-                headers: {
-                  Authorization: sessionStorage.getItem("jwt")
+              dispatch({
+                type: "SET_SAVING",
+                payload: true
+              });
+              _context9.prev = 1;
+              evaluationArray = [];
+              conceptArray = (0, _utils.getConceptsByRole)(user.id_role);
+              (_state$services_data3 = state.services_data) === null || _state$services_data3 === void 0 ? void 0 : _state$services_data3.forEach(function (ret, idx) {
+                var retailer_service = ret.service,
+                    id_retailer = ret.id_retailer,
+                    status_retailer_service = ret.status;
+                var lastStatusLevel = status_retailer_service.replace(/.*\//, "");
+
+                if (conceptArray.includes(retailer_service) && statusArray !== null && statusArray !== void 0 && statusArray.includes(lastStatusLevel)) {
+                  var data = {
+                    articleId: state.product.id_article,
+                    orderId: state.product.id_order,
+                    concept: retailer_service,
+                    result: result,
+                    evalStatus: status_retailer_service,
+                    retailerId: id_retailer
+                  };
+                  evaluationArray.push(_axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
+                    headers: {
+                      Authorization: token
+                    }
+                  }));
+                }
+              });
+              _context9.next = 7;
+              return Promise.all(evaluationArray);
+
+            case 7:
+              status = "".concat(result, "A"); // Actualizar el statusByRetailer para todos los retailers y conceptos
+
+              updatedStatusByRetailer = state.product.statusByRetailer.map(function (item) {
+                return conceptArray.includes(item.service) ? (0, _objectSpread5.default)((0, _objectSpread5.default)({}, item), {}, {
+                  status: status
+                }) : item;
+              }); // Actualizar el producto con los nuevos estados
+
+              updatedProduct = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
+                article_status: status,
+                status: status,
+                datasheet_status: state.product.datasheet_status === "NA" ? "NA" : status,
+                description_status: state.product.description_status === "NA" ? "NA" : status,
+                images_status: state.product.images_status === "NA" ? "NA" : status,
+                statusByRetailer: updatedStatusByRetailer
+              });
+              dispatch({
+                type: "SET_PRODUCT",
+                payload: updatedProduct
+              });
+              updatedServicesData = state.services_data.map(function (service) {
+                return conceptArray.includes(service.service) ? (0, _objectSpread5.default)((0, _objectSpread5.default)({}, service), {}, {
+                  status: status
+                }) : service;
+              });
+              dispatch({
+                type: "SET_SERVICES_DATA",
+                payload: updatedServicesData
+              }); // sessionStorage.setItem(
+              //   "productSelected",
+              //   JSON.stringify(updatedProduct),
+              // );
+              // sessionStorage.setItem(
+              //   "productEdit",
+              //   JSON.stringify({
+              //     ArticleId: updatedProduct.id_article,
+              //     idCategory: updatedProduct.id_category,
+              //     product: updatedProduct,
+              //   }),
+              // );
+              // Mostrar modal de éxito
+
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "",
+                  message: result === "A" ? "Todos los servicios aprobados con éxito" : "Todos los servicios rechazados con éxito",
+                  image: _genericModalCheck.default
                 }
               });
+              _context9.next = 19;
+              break;
 
-            case 3:
-              setCrossComment(false);
-              _context17.next = 6;
-              return getComments();
+            case 16:
+              _context9.prev = 16;
+              _context9.t0 = _context9["catch"](1);
+              console.error("Error in bulk evaluation:", _context9.t0);
 
-            case 6:
+            case 19:
+              _context9.prev = 19;
+              dispatch({
+                type: "SET_SAVING",
+                payload: false
+              });
+              return _context9.finish(19);
+
+            case 22:
             case "end":
-              return _context17.stop();
+              return _context9.stop();
           }
         }
-      }, _callee17);
+      }, _callee9, null, [[1, 16, 19, 22]]);
     }));
 
-    return function commentRevised() {
-      return _ref22.apply(this, arguments);
+    return function sendBulkEvaluation(_x3) {
+      return _ref12.apply(this, arguments);
     };
   }();
 
-  var setAssignation = /*#__PURE__*/function () {
-    var _ref23 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee18(assignationType, assignationId) {
-      var _product$article21;
-
-      var concept, productTemp, data;
-      return _regenerator.default.wrap(function _callee18$(_context18) {
+  var handleOnChangeAssignations = /*#__PURE__*/function () {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10(assignationType, assignationId) {
+      var concept, data, updatedProduct;
+      return _regenerator.default.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context18.prev = _context18.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
-              concept = "";
-              _context18.t0 = activeTab;
-              _context18.next = _context18.t0 === "Ficha técnica" ? 4 : _context18.t0 === "Imágenes" ? 6 : 8;
-              break;
-
-            case 4:
-              concept = "datasheet";
-              return _context18.abrupt("break", 10);
-
-            case 6:
-              concept = "images";
-              return _context18.abrupt("break", 10);
-
-            case 8:
-              concept = "description";
-              return _context18.abrupt("break", 10);
-
-            case 10:
-              productTemp = product;
-              productTemp.article["id_".concat(concept, "_").concat(assignationType)] = assignationId;
+              concept = (0, _utils.getConceptByTab)(state.active_tab);
               data = {
                 articleList: [{
-                  orderId: product.orderId,
-                  articleId: product === null || product === void 0 ? void 0 : (_product$article21 = product.article) === null || _product$article21 === void 0 ? void 0 : _product$article21.id_article
+                  orderId: state.product.id_order,
+                  articleId: state.product.id_article
                 }],
                 concept: concept,
                 userId: assignationId
               };
-              _context18.next = 15;
+              _context10.next = 4;
               return (0, _axios.default)({
                 method: "post",
                 url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
@@ -2018,583 +1394,420 @@ var RetailerProductEdition = function RetailerProductEdition(_ref3) {
                 }
               });
 
-            case 15:
-              loadAssignations(productTemp);
-              sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+            case 4:
+              updatedProduct = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, (0, _defineProperty2.default)({}, "id_".concat(concept, "_").concat(assignationType), assignationId));
+              dispatch({
+                type: "SET_PRODUCT",
+                payload: updatedProduct
+              });
 
-            case 17:
+            case 6:
             case "end":
-              return _context18.stop();
+              return _context10.stop();
           }
         }
-      }, _callee18);
+      }, _callee10);
     }));
 
-    return function setAssignation(_x9, _x10) {
-      return _ref23.apply(this, arguments);
+    return function handleOnChangeAssignations(_x4, _x5) {
+      return _ref13.apply(this, arguments);
     };
   }();
 
-  var downloadImages = function downloadImages() {
-    var _images$values4;
+  var handleOnSetAssignation = function handleOnSetAssignation() {
+    console.log("handleOnSetAssignation - pendiente de implementar");
+  };
 
-    selectedImages.length > 0 ? selectedImages.forEach(function (e) {
-      if (e.id) {
-        (0, _fileSaver.saveAs)("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(product.article.upc, "_").concat(e.name, ".").concat(e.ext));
-      }
-    }) : images === null || images === void 0 ? void 0 : (_images$values4 = images.values) === null || _images$values4 === void 0 ? void 0 : _images$values4.forEach(function (e) {
-      if (e.id) {
-        (0, _fileSaver.saveAs)("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(product.article.upc, "_").concat(e.name, ".").concat(e.ext));
-      }
+  var handleOnSetImages = function handleOnSetImages() {
+    console.log("handleOnSetImages - pendiente de implementar");
+  };
+
+  var handleOnSetCheckAll = function handleOnSetCheckAll(isChecked) {
+    dispatch({
+      type: "TOGGLE_CHECK_ALL_IMAGES",
+      payload: isChecked
     });
   };
 
-  var deleteImages = /*#__PURE__*/function () {
-    var _ref24 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee19() {
-      var values, imgsInBack, imgsLeft, data;
-      return _regenerator.default.wrap(function _callee19$(_context19) {
+  var handleOnSetSelectedImages = function handleOnSetSelectedImages() {
+    /*
+    Esta función no se utiliza actualmente.
+     En la versión anterior se usaban dos funciones distintas para el checkbox
+    "Seleccionar todo":
+    - Una para cambiar el valor booleano del checkbox.
+    - Otra para actualizar el array de imágenes seleccionadas.
+     En la versión actual se unificó la lógica en una sola función,
+    `handleOnSetCheckAll`, que recibe el valor `true` o `false` del checkbox
+    "Seleccionar todo" y, a partir de este, agrega o elimina todas las imágenes
+    del array de imágenes seleccionadas.
+    */
+    console.log("setSelectedImages");
+  };
+
+  var handleOnSubmitComment = /*#__PURE__*/function () {
+    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(e) {
+      var commentText;
+      return _regenerator.default.wrap(function _callee11$(_context11) {
         while (1) {
-          switch (_context19.prev = _context19.next) {
+          switch (_context11.prev = _context11.next) {
             case 0:
-              setLoading(true);
-              values = images.values;
-              imgsInBack = [];
-              selectedImages.forEach(function (selectedImg) {
-                if (selectedImg.id) imgsInBack.push(selectedImg);
-              });
-              imgsLeft = values.filter(function (value) {
-                return selectedImages.indexOf(value) === -1;
-              });
+              e.preventDefault();
+              commentText = document.querySelector("#commentary-box .ql-container .ql-editor > p").innerHTML;
+              _context11.prev = 2;
+              _context11.next = 5;
+              return createComment(commentText, token);
 
-              if (!(imgsInBack.length > 0)) {
-                _context19.next = 15;
-                break;
-              }
-
-              data = {
-                articleId: product.article.id_article,
-                deleteImages: imgsInBack,
-                orderId: product.orderId
-              };
-              _context19.prev = 7;
-              _context19.next = 10;
-              return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, "?image=true&version=").concat(version), data, {
-                headers: {
-                  Authorization: token
+            case 5:
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "",
+                  message: "Comentario guardado con éxito",
+                  image: _genericModalCheck.default
                 }
               });
-
-            case 10:
-              _context19.next = 15;
+              _context11.next = 12;
               break;
 
-            case 12:
-              _context19.prev = 12;
-              _context19.t0 = _context19["catch"](7);
-              console.log(_context19.t0);
-
-            case 15:
-              setImages({
-                action: "deleteImage",
-                selectedImages: selectedImages
+            case 8:
+              _context11.prev = 8;
+              _context11.t0 = _context11["catch"](2);
+              console.error("Error saving comment:", _context11.t0);
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "Error",
+                  message: "Hubo un error al guardar el comentario",
+                  image: _errorModal.default
+                }
               });
-              getRequired([services[0], services[1], (0, _objectSpread2.default)((0, _objectSpread2.default)({}, services[2]), {}, {
-                values: imgsLeft
-              })]);
-              setLoading(false);
-              setMessage("");
-              setComponentsArray([]);
-
-            case 20:
+
+            case 12:
             case "end":
-              return _context19.stop();
+              return _context11.stop();
           }
         }
-      }, _callee19, null, [[7, 12]]);
+      }, _callee11, null, [[2, 8]]);
     }));
 
-    return function deleteImages() {
-      return _ref24.apply(this, arguments);
+    return function handleOnSubmitComment(_x6) {
+      return _ref14.apply(this, arguments);
     };
   }();
 
-  var askToDeleteImages = function askToDeleteImages() {
-    if (selectedImages.length > 0) {
-      setMessage("¿Está seguro de eliminar las imágenes seleccionadas?");
-      setComponentsArray([/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        text: "¿Está seguro de eliminar las imágenes seleccionadas?",
-        headerType: "retailer-name-header",
-        color: "white"
-      }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-        buttonType: "general-white-button",
-        label: "Cancelar",
-        onClick: function onClick() {
-          return setMessage("");
-        }
-      }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-        buttonType: "general-button-default",
-        label: "Aceptar",
-        onClick: function onClick() {
-          setMessage("");
-          deleteImages();
-        }
-      }, "3")]);
-    }
+  var handleOnSendEvaluationToFacilitator = function handleOnSendEvaluationToFacilitator() {
+    sendSingleEvaluation();
   };
 
-  var getRetailerStatus = function getRetailerStatus(servicesData, tab) {
-    var arr = servicesData === null || servicesData === void 0 ? void 0 : servicesData.slice();
-    var concept = getConcept(tab);
-    var retailerService = {};
+  var isEvaluationFinished = function isEvaluationFinished(id_rol, tab, statusArray) {
+    var _servicesByTab$find, _servicesByTab$find$s, _product$, _srv;
 
-    var _arr$filter = arr === null || arr === void 0 ? void 0 : arr.filter(function (service) {
-      return service.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) && service.service === concept;
+    var servicesData = state.services_data;
+    var activeRetailer = state.active_retailer;
+    var product = state.product;
+    var concept = (0, _utils.getConceptByTab)(tab);
+    var servicesByTab = servicesData === null || servicesData === void 0 ? void 0 : servicesData.filter(function (serv) {
+      return serv.service === concept;
     });
+    var statusBySelectedRetailerService = servicesByTab === null || servicesByTab === void 0 ? void 0 : (_servicesByTab$find = servicesByTab.find(function (serv) {
+      return serv.id_retailer === (activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id_retailer);
+    })) === null || _servicesByTab$find === void 0 ? void 0 : (_servicesByTab$find$s = _servicesByTab$find.status) === null || _servicesByTab$find$s === void 0 ? void 0 : _servicesByTab$find$s.replace(/.*\//, "");
+    var currentProducStatus = product === null || product === void 0 ? void 0 : (_product$ = product["".concat(concept, "_status")]) === null || _product$ === void 0 ? void 0 : _product$.replace(/.*\//, "");
+    var unvalidated = ["IE", "CA"].includes(currentProducStatus);
+    var auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(currentProducStatus);
+    var result;
+
+    switch (id_rol) {
+      case 7:
+      case 8:
+        var canSendEvaluation = statusArray.includes(statusBySelectedRetailerService); // const conditionTwo = statusArray.includes(product?.status);
+        // const conditionThree =
+        //   servicesByTab.filter((service) =>
+        //     statusArray.includes(service.status?.replace(/.*\//, "")),
+        //   ).length === servicesByTab.length;
+        // return (canSendEvaluation && conditionTwo) || conditionThree;
 
-    var _arr$filter2 = (0, _slicedToArray2.default)(_arr$filter, 1);
-
-    retailerService = _arr$filter2[0];
-    return retailerService ? retailerService.status : "NS";
-  };
-
-  (0, _react.useEffect)(function () {
-    var status = getRetailerStatus(servicesData, activeTab);
-    setRetailerStatus(status);
-  }, [activeTab, servicesData, activeRetailer]);
-  (0, _react.useEffect)(function () {
-    services.length > 0 && getRequired(services);
-  }, [services, servicesData, activeTab]);
-  (0, _react.useEffect)(function () {
-    setSaving(loading);
-  }, [loading]);
-
-  var validateAll = /*#__PURE__*/function () {
-    var _ref25 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee20(result) {
-      var evaluationArray, conceptArray, messages, productTemp, messagesResponse;
-      return _regenerator.default.wrap(function _callee20$(_context20) {
-        while (1) {
-          switch (_context20.prev = _context20.next) {
-            case 0:
-              _context20.prev = 0;
-              setLoading(true);
-              evaluationArray = [];
-              conceptArray = [];
-              _context20.t0 = user.id_role;
-              _context20.next = _context20.t0 === 4 ? 7 : _context20.t0 === 5 ? 9 : 11;
-              break;
-
-            case 7:
-              conceptArray = ["description", "datasheet"];
-              return _context20.abrupt("break", 13);
-
-            case 9:
-              conceptArray = ["images"];
-              return _context20.abrupt("break", 13);
-
-            case 11:
-              conceptArray = ["description", "datasheet", "images"];
-              return _context20.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;
-
-                  var data = {
-                    articleId: product.article.id_article,
-                    orderId: (_product$id_order = product.id_order) !== null && _product$id_order !== void 0 ? _product$id_order : product.orderId,
-                    concept: ret.service,
-                    result: result,
-                    evalStatus: ret.status,
-                    retailerId: ret.id_retailer
-                  };
-                  evaluationArray.push(_axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
-                    headers: {
-                      Authorization: token
-                    }
-                  }));
-                }
-              });
-              _context20.next = 17;
-              return Promise.all(evaluationArray);
-
-            case 17:
-              productTemp = product;
-              productTemp.status = "".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);
-              _context20.next = 26;
-              return Promise.all(messages);
-
-            case 26:
-              messagesResponse = _context20.sent;
-              _context20.next = 29;
-              return loadData();
-
-            case 29:
-              _context20.next = 34;
-              break;
-
-            case 31:
-              _context20.prev = 31;
-              _context20.t1 = _context20["catch"](0);
-              console.log(_context20.t1);
-
-            case 34:
-              _context20.prev = 34;
-              setLoading(false);
-              return _context20.finish(34);
-
-            case 37:
-            case "end":
-              return _context20.stop();
-          }
-        }
-      }, _callee20, null, [[0, 31, 34, 37]]);
-    }));
-
-    return function validateAll(_x11) {
-      return _ref25.apply(this, arguments);
-    };
-  }();
+        return canSendEvaluation;
 
-  var getObservation = /*#__PURE__*/function () {
-    var _ref26 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee21() {
-      var response, parseData;
-      return _regenerator.default.wrap(function _callee21$(_context21) {
-        while (1) {
-          switch (_context21.prev = _context21.next) {
-            case 0:
-              _context21.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 4:
+      case 5:
+        var filteredSrv45 = servicesByTab === null || servicesByTab === void 0 ? void 0 : servicesByTab.filter(function (serv) {
+          return statusArray.includes(serv === null || serv === void 0 ? void 0 : serv.status);
+        });
+        var condition45 = unvalidated && ["CA", "IE"].includes(product === null || product === void 0 ? void 0 : product.status) && (filteredSrv45 === null || filteredSrv45 === void 0 ? void 0 : filteredSrv45.length) === (servicesByTab === null || servicesByTab === void 0 ? void 0 : servicesByTab.length);
+        return condition45;
 
-            case 2:
-              response = _context21.sent;
-              parseData = JSON.parse(response.data.body).data[0];
-              setObservation(parseData.observations);
+      case 6:
+        var statusInArray = statusArray.includes(product === null || product === void 0 ? void 0 : product.status);
+        var allSrvValid = (_srv = srv) === null || _srv === void 0 ? void 0 : _srv.every(function (serv) {
+          return ["RA", "AA", "AP", "ACA"].includes(serv === null || serv === void 0 ? void 0 : serv.status);
+        });
+        var condition6 = statusInArray && allSrvValid && auditorUnvalidated;
+        return condition6;
 
-            case 5:
-            case "end":
-              return _context21.stop();
-          }
-        }
-      }, _callee21);
-    }));
+      default:
+        console.log("Default case - returning false");
+        return false;
+    }
+  };
 
-    return function getObservation() {
-      return _ref26.apply(this, arguments);
-    };
-  }();
+  var handleOnChangeProductVersion = function handleOnChangeProductVersion(version) {
+    console.log('se cambia la version');
+    dispatch({
+      type: "SET_PRODUCT_VERSION",
+      payload: version
+    });
+    loadData(true, version);
+  };
 
-  (0, _react.useEffect)(function () {
-    getObservation();
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
-    headerTop: headerTop,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
-      setHeaderTop: setHeaderTop,
-      auditableVersion: auditableVersion,
-      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,
-      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", {
-        className: "image-data-panel",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewer.ImagePreviewer, {
-          activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
-          imagesArray: images,
-          setActiveImage: setActiveImage,
-          setShowModal: setShowModal
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-          lists: images,
-          activeImage: images !== null && images !== void 0 && images.values ? images === null || images === void 0 ? void 0 : images.values[activeImage] : {},
-          retailerSelected: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id,
-          setImages: setImages,
-          assignationsImages: assig["Imágenes"],
-          imagesStatus: product === null || product === void 0 ? void 0 : product.images_status,
-          setAssignation: setAssignation,
-          isRetailer: isRetailer,
-          onClickSave: function onClickSave() {
-            var _product$services;
-
-            return (product === null || product === void 0 ? void 0 : (_product$services = product.services) === null || _product$services === void 0 ? void 0 : _product$services.images) === 1 && updateImages();
-          },
-          showSaveButton: auditorAssigned() || userAssigned(),
-          setShowVersionSelector: setShowVersionSelector,
-          version: version,
-          shotThd: shotThd
+  var ProductEditionSkeleton = function ProductEditionSkeleton() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      headerTop: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        px: 1.5,
+        py: 1,
+        pb: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "text",
+          width: 300,
+          height: 40
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
+          spacing: 2,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "circular",
+            width: 32,
+            height: 32
+          })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "product-information",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
-          headerData: product,
-          productObservation: observation,
-          percent: activePercentage,
-          activeRetailer: activeRetailer,
-          servicesData: servicesData,
-          setActiveRetailer: setActiveRetailer,
-          sendToFacilitator: sendToFacilitator,
-          approve: function approve() {
-            sendToFacilitator("A");
-          },
-          reject: function reject() {
-            setShowRejectModal(true);
-          },
-          showApproveRejectAll: approveRejectAllButtons() && (auditorAssigned() || userAssigned()),
-          showValidationButtons: approveRejectButtons() && (auditorAssigned() || userAssigned()),
-          approveAll: function approveAll() {
-            return validateAll("A");
+        className: "data-container",
+        style: {
+          display: "flex",
+          gap: "8px",
+          padding: "0 12px 12px"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "image-data-panel",
+          style: {
+            flex: "0 0 320px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px"
           },
-          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,
-          activeTab: activeTab,
-          setActiveTab: setActiveTab,
-          setImageLayout: setImageLayout,
-          downloadImages: downloadImages,
-          askToDeleteImages: askToDeleteImages,
-          assig: assig[activeTab],
-          setAssignation: setAssignation,
-          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,
-          setUpdatedDatasheets: setUpdatedDatasheets,
-          images: images,
-          setImages: setImages,
-          selectedImages: selectedImages,
-          setSelectedImages: setSelectedImages,
-          setShowVersionSelector: setShowVersionSelector,
-          onClickSave: function onClickSave() {
-            switch (activeTab) {
-              case "Descripción":
-                !saving && (product === null || product === void 0 ? void 0 : product.description_status) !== "NS" && saveDescriptions();
-                break;
-
-              case "Ficha técnica":
-                !saving && (product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" && saveDatasheets();
-                break;
-
-              case "Imágenes":
-                !saving && (product === null || product === void 0 ? void 0 : product.images_status) !== "NS" && updateImages();
-                break;
-
-              default:
-                break;
-            }
-          },
-          canAssign: ![7, 8].includes(user.id_role)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "services-information-container " + (imageLayout && activeTab === "Imágenes" ? "image-services" : ""),
-          children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [!imageLayout && activeTab === "Imágenes" && (product === null || product === void 0 ? void 0 : (_product$services2 = product.services) === null || _product$services2 === void 0 ? void 0 : _product$services2.images) === 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
-              setSelectedImages: setSelectedImages,
-              checkAll: checkAll,
-              setCheckAll: setCheckAll,
-              shotThd: shotThd
-            }), activeTab === "Ficha técnica" && ((product === null || product === void 0 ? void 0 : product.datasheet_status) !== "NS" ? (_datasheets$ = datasheets[0]) === null || _datasheets$ === void 0 ? void 0 : (_datasheets$$data = _datasheets$.data) === null || _datasheets$$data === void 0 ? void 0 : _datasheets$$data.map(function (dataGroup, index) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-                articleId: product.article.id_article,
-                version: version,
-                activeSection: activeTab,
-                inputGroup: dataGroup,
-                dataInputs: datasheets[1],
-                auditInputs: auditDatasheets[1],
-                updatedDatasheets: updatedDatasheets,
-                setUpdatedDatasheets: setUpdatedDatasheets,
-                compare: compare
-              }, index + "-" + activeRetailer.name);
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-              text: "No cuentas con este servicio",
-              headerType: "input-name-header"
-            })), activeTab === "Descripción" && ((product === null || product === void 0 ? void 0 : product.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
-              activeSection: activeTab,
-              inputGroup: descriptions[0],
-              auditInputGroup: auditDescriptions[0],
-              updatedDescriptions: updatedDescriptions,
-              setUpdatedDescriptions: setUpdatedDescriptions,
-              articleId: product === null || product === void 0 ? void 0 : (_product$article22 = product.article) === null || _product$article22 === void 0 ? void 0 : _product$article22.id_article,
-              version: version,
-              dinamicHeight: true,
-              compare: compare
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-              text: "No cuentas con este servicio",
-              headerType: "input-name-header"
-            })), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : product.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
-              className: "container",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
-                className: "dropzone"
-              })), {}, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
-                  children: thumbs()
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+            variant: "rounded",
+            width: "100%",
+            height: 400
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+            direction: "row",
+            spacing: 2,
+            justifyContent: "center",
+            children: [1, 2, 3, 4].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 60,
+                height: 80
+              }, item);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            mt: 2,
+            children: [1, 2, 3, 4].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                display: "flex",
+                justifyContent: "space-between",
+                py: 1,
+                borderBottom: "1px solid #f0f0f0",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "text",
+                  width: "40%"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "text",
+                  width: "20%"
                 })]
-              }))
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-              text: "No cuentas con este servicio",
-              headerType: "input-name-header"
-            }))]
-          })
-        }), (userAssigned(activeTab) || auditorAssigned()) && product["".concat(getConcept(activeTab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("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: handleCommentSubmit
-              })
+              }, item);
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "product-information",
+          style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px"
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: "80%",
+              height: 50
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              spacing: 2,
+              alignItems: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 180,
+                height: 24
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 300,
+                height: 24
+              })]
             })]
-          }) : /*#__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,
-              reviewed: crossComment
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
-              buttonType: "circular-button accept-button",
-              onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee22() {
-                return _regenerator.default.wrap(function _callee22$(_context22) {
-                  while (1) {
-                    switch (_context22.prev = _context22.next) {
-                      case 0:
-                        setCrossComment(true);
-                        commentRevised();
-
-                      case 2:
-                      case "end":
-                        return _context22.stop();
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            display: "flex",
+            gap: 4,
+            pb: 1,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: 140,
+              height: 45
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: 140,
+              height: 45
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "text",
+              width: 140,
+              height: 45
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            children: [1, 2, 3].map(function (item) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 1,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "text",
+                    width: "30%",
+                    height: 24
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "rounded",
+                    width: 175,
+                    height: 25,
+                    sx: {
+                      borderRadius: "7.5px"
                     }
-                  }
-                }, _callee22);
-              }))
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                  variant: "rounded",
+                  width: "100%",
+                  height: 70
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  mt: 0.5,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                    variant: "text",
+                    width: 60
+                  })
+                })]
+              }, item);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+            mt: "auto",
+            pt: 4,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+              variant: "rounded",
+              width: "100%",
+              height: 120
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 2,
+              mt: 2,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 180,
+                height: 45,
+                sx: {
+                  borderRadius: "24px"
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Skeleton, {
+                variant: "rounded",
+                width: 180,
+                height: 45,
+                sx: {
+                  borderRadius: "24px"
+                }
+              })]
             })]
-          }), [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, {
-      images: images,
-      setShowModal: setShowModal,
-      sendToFacilitator: sendToFacilitator,
-      approveRejectButtons: approveRejectButtons()
-    }), message.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
-      buttonType: componentsArray.length > 0 && "delete-product",
-      componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: _genericModalCheck.default,
-        alt: "success icon"
-      }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
-        headerType: "retailer-name-header",
-        text: message,
-        color: "white"
-      }, "2")],
-      onClick: function onClick() {
-        return setMessage("");
-      }
-    }), showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
-      modalId: "version-selector",
-      articleId: product.article.id_article,
-      setVersion: setVersion,
-      companyName: product.article.company_name,
-      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__*/function () {
-          var _ref28 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee23(e) {
-            var elements, brCounter, container, existingAlert, alert, fullMessage;
-            return _regenerator.default.wrap(function _callee23$(_context23) {
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    console.log({
+      stateProduct: state.product
+    });
+  }, [state.product]);
+  if (state.loading || !state.services || !state.product) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ProductEditionSkeleton, {})
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AiProductEdition.AiProductEditionProvider, {
+    isCreatorsEdition: true,
+    user: user,
+    token: token,
+    state: state,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+      headerTop: headerTop,
+      children: [showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+        title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
+        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 _callee12() {
+            var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
+            return _regenerator.default.wrap(function _callee12$(_context12) {
               while (1) {
-                switch (_context23.prev = _context23.next) {
+                switch (_context12.prev = _context12.next) {
                   case 0:
                     elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
 
                     if (!(!elements || elements.length === 0)) {
-                      _context23.next = 4;
+                      _context12.next = 4;
                       break;
                     }
 
                     console.error("Elemento no encontrado");
-                    return _context23.abrupt("return");
+                    return _context12.abrupt("return");
 
                   case 4:
-                    brCounter = 0;
-                    elements.forEach(function (el) {
+                    isMessageEmpty = Array.from(elements).every(function (el) {
                       var body = el.innerHTML;
-
-                      if (typeof body !== "string") {
-                        console.log("El contenido de body no es una cadena", body);
-                        isMessageEmpty = true;
-                        return;
-                      }
-
-                      if (!body || body.replace(/<.*?\/?>/gm, "").trim() === "") {
-                        brCounter++;
-                      }
+                      return !body || body.replace(/<.*?\/?>/gm, "").trim() === "";
                     });
 
-                    if (!(brCounter === elements.length)) {
-                      _context23.next = 17;
+                    if (!isMessageEmpty) {
+                      _context12.next = 10;
                       break;
                     }
 
@@ -2602,65 +1815,354 @@ var RetailerProductEdition = function RetailerProductEdition(_ref3) {
                     existingAlert = container.querySelector(".alert-error");
 
                     if (!existingAlert) {
-                      _context23.next = 11;
-                      break;
+                      alert = document.createElement("div");
+                      alert.className = "alert-error";
+                      alert.style.cssText = "\n                                color: #d32f2f;\n                                background-color: #ffebee;\n                                border: 1px solid #ef5350;\n                                border-radius: 4px;\n                                padding: 12px 16px;\n                                margin-top: 10px;\n                                font-size: 14px;\n                                display: flex;\n                                align-items: center;\n                                gap: 8px;\n                                font-family: 'Roboto', sans-serif;\n                                text-align: center;\n                              ";
+                      alert.innerHTML = "<span>El mensaje no puede estar vac\xEDo.</span>";
+                      container.appendChild(alert);
                     }
 
-                    return _context23.abrupt("return");
-
-                  case 11:
-                    // Crear alerta con estilos
-                    alert = document.createElement("div");
-                    alert.className = "alert-error";
-                    alert.style.cssText = "\n                    color: #d32f2f;\n                    background-color: #ffebee;\n                    border: 1px solid #ef5350;\n                    border-radius: 4px;\n                    padding: 12px 16px;\n                    margin-top: 10px;\n                    font-size: 14px;\n                    display: flex;\n                    align-items: center;\n                    gap: 8px;\n                    font-family: 'Roboto', sans-serif;\n                    text-align: center;\n                  ";
-                    alert.innerHTML = "\n                    <span>El mensaje no puede estar vac\xEDo.</span>\n                  ";
-                    container.appendChild(alert);
-                    return _context23.abrupt("return");
-
-                  case 17:
-                    fullMessage = "";
-                    elements.forEach(function (element) {
-                      var body = element.innerHTML;
-                      fullMessage += body;
-                    });
-                    fullMessage = fullMessage.replace(/<br\s*\/?>/gi, "\n");
-                    _context23.next = 22;
-                    return createComment(e, fullMessage, activeTab);
+                    return _context12.abrupt("return");
+
+                  case 10:
+                    fullMessage = Array.from(elements).map(function (element) {
+                      return element.innerHTML;
+                    }).join("").replace(/<br\s*\/?>/gi, "\n");
+                    _context12.next = 13;
+                    return createComment(fullMessage, token);
 
-                  case 22:
-                    valRejAll ? validateAll("R") : sendToFacilitator("R");
-                    setMessage("Rechazado");
+                  case 13:
+                    rejectAll ? sendBulkEvaluation("R") : sendSingleEvaluation("R");
                     setShowRejectModal(false);
 
-                  case 25:
+                  case 15:
                   case "end":
-                    return _context23.stop();
+                    return _context12.stop();
                 }
               }
-            }, _callee23);
-          }));
-
-          return function (_x12) {
-            return _ref28.apply(this, arguments);
-          };
-        }()
-      }, "btn-Aceptar")]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
-      className: "container-modalAlert",
-      show: modalAlert.show,
-      title: modalAlert.title,
-      message: modalAlert.message,
-      icon: "info",
-      onClickBtnDefault: function onClickBtnDefault(event) {
-        setModalAlert(function (prev) {
-          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), {}, {
-            show: false,
-            errorInputMessage: false
+            }, _callee12);
+          }))
+        }, "btn-Aceptar")]
+      }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
+        componentsArray: [state.modal.image && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: state.modal.image,
+          alt: "modal icon"
+        }, "1"), state.modal.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "retailer-name-header",
+          text: state.modal.title,
+          color: "white"
+        }, "2"), state.modal.message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+          headerType: "retailer-name-header",
+          text: state.modal.message,
+          color: "white"
+        }, "3"), state.modal.buttons && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            marginTop: "16px"
+          },
+          children: state.modal.buttons.map(function (button, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+              buttonType: button.buttonType,
+              label: button.text,
+              onClick: button.action
+            }, index);
+          })
+        }, "4")].filter(Boolean),
+        onClick: function onClick() {
+          return dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: false,
+              title: "",
+              message: "",
+              image: null
+            }
           });
-        });
-      }
+        }
+      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
+        images: state.images_values,
+        setShowModal: setShowModal,
+        approveRejectButtons: canShowSingleEvaluationButtons(),
+        sendToFacilitator: handleOnSendEvaluationToFacilitator
+      }), showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
+        modalId: "version-selector",
+        articleId: state.product.id_article,
+        setVersion: handleOnChangeProductVersion,
+        companyName: state.product.company,
+        currentVersion: state.product.version,
+        setShowVersionSelector: setShowVersionSelector,
+        jwt: token
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
+        setHeaderTop: setHeaderTop,
+        auditableVersion: auditableVersion,
+        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,
+        chatType: location === null || location === void 0 ? void 0 : (_location$state2 = location.state) === null || _location$state2 === void 0 ? void 0 : _location$state2.chatType,
+        productSelected: state.product,
+        token: token,
+        activeRetailer: {
+          id: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.id_retailer,
+          name: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.retailer
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "data-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "image-data-panel",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreviewer.ImagePreviewer, {
+            activeImage: (_state$images_values$2 = state.images_values.values[state.current_image]) !== null && _state$images_values$2 !== void 0 ? _state$images_values$2 : {},
+            imagesArray: state.images_values || [],
+            setActiveImage: handleOnChangeCurrentImage,
+            setShowModal: handleOnShowModalGallery
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable // states
+          , {
+            lists: state.images_values || [],
+            activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
+            assignationsImages: state.collaborator_assignations["Imágenes"],
+            imagesStatus: ((_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.images_status) || "-",
+            retailerSelected: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
+            isRetailer: isRetailer,
+            version: state.product.version,
+            shotThd: shotThd,
+            setShowVersionSelector: setShowVersionSelector // actions
+            ,
+            setImages: handleOnChangeCurrentImage,
+            setAssignation: handleOnChangeAssignations // No se usa?
+            ,
+            onClickSave: handleOnClickSaveImages,
+            showSaveButton: isAuditorAssigned() || isUserAssignedToService()
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "product-information",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader // states
+          , {
+            headerData: state.product,
+            productObservation: observation,
+            percent: state.active_percentage.percentagesGeneral.required,
+            activeRetailer: {
+              id: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.id_retailer,
+              name: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.retailer,
+              image: (_state$active_retaile9 = state.active_retailer) === null || _state$active_retaile9 === void 0 ? void 0 : _state$active_retaile9.image
+            },
+            servicesData: state.services_data ? state.services_data : null,
+            isObservationVisible: isObservationVisible // actions
+            ,
+            setActiveRetailer: handleOnChangeActiveRetailer,
+            approve: handleOnApproveSingleService,
+            approveAll: handleOnApproveAllServices,
+            reject: handleOnRejectSingleService,
+            rejectAll: handleOnRejectAllServices,
+            toggleObservation: handleOnToggleObservation,
+            hideObservation: handleOnHideObservation // sendToFacilitator={handleOnSendEvaluationToFacilitator} // No se usa?
+            // validations
+            ,
+            showApproveRejectAll: canShowBulkEvaluationButtons() || isAuditorAssigned() || isUserAssignedToService(),
+            showValidationButtons: canShowSingleEvaluationButtons() && (isAuditorAssigned() || isUserAssignedToService())
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullTabsMenu.FullTabsMenu, {
+            tabsSections: tabsSections,
+            status: getStatusByCurrentServiceAndRetailer(),
+            activeTab: state.active_tab,
+            isRetailer: isRetailer,
+            assig: state.collaborator_assignations[state.active_tab],
+            version: state.product.version,
+            updatedDescriptions: state.updated_descriptions_inputs,
+            updatedDatasheets: state.updated_datasheets_inputs,
+            updatedImages: state.updated_images_values,
+            images: state.services.images // selectedImages={selectedImages} prop pasada asi: FullTabsMenu -> TabsMenu Pero en TabsMenu no se espera ninguna prop setSelectedImages
+            // setters
+            ,
+            setActiveTab: handleOnChangeActiveTab,
+            setImageLayout: handleOnToggleImageLayout,
+            setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+            setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+            setAssignation: handleOnSetAssignation // No se usa?
+            ,
+            setImages: handleOnSetImages // No se usa?
+            ,
+            setShowVersionSelector: setShowVersionSelector // setSelectedImages={setSelectedImages} prop pasada asi: FullTabsMenu -> TabsMenu Pero en TabsMenu no se espera ninguna prop setSelectedImages
+            // actions
+            ,
+            downloadImages: handleOnDownloadImages,
+            askToDeleteImages: handleOnAskToDeleteImages,
+            showSaveButton: isAuditorAssigned() || isUserAssignedToService(),
+            onClickSave: handleOnClickSave // validations
+            ,
+            canAssign: ![7, 8].includes(user.id_role)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
+            id: "services-information-container",
+            children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [state.active_tab === "Descripción" && (((_state$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                activeSection: state.active_tab,
+                inputGroup: state.descriptions_inputs[0],
+                updatedDescriptions: state.updated_descriptions_inputs,
+                articleId: (_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.id_article,
+                version: state.product.version,
+                auditInputGroup: auditDescriptions[0],
+                setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
+                dinamicHeight: true,
+                compare: compare
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                text: "No cuentas con este servicio",
+                headerType: "input-name-header"
+              })), state.active_tab === "Ficha técnica" && (((_state$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : _state$product11.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                children: (_state$datasheets_inp = state.datasheets_inputs[0]) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp.data) === null || _state$datasheets_inp2 === void 0 ? void 0 : _state$datasheets_inp2.map(function (dataGroup, index) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                    articleId: state.product.id_article,
+                    version: state.version,
+                    activeSection: state.active_tab,
+                    inputGroup: dataGroup,
+                    dataInputs: state.datasheets_inputs[1],
+                    auditInputs: auditDatasheets[1],
+                    updatedDatasheets: state.updated_datasheets_inputs,
+                    setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
+                    compare: compare
+                  }, index + "-" + state.active_retailer.retailer);
+                })
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                text: "No cuentas con este servicio",
+                headerType: "input-name-header"
+              })), state.active_tab === "Imágenes" && (((_state$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+                  checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
+                  ,
+                  setCheckAll: handleOnSetCheckAll // Toggler de true o false para el checkbox "Seleccionar todo"
+                  ,
+                  setSelectedImages: handleOnSetSelectedImages // shotThd={shotThd} // No se usa?
+
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
+                  className: "container",
+                  style: {
+                    position: "relative"
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, getRootProps({
+                    className: "dropzone ".concat(isDragActive ? "drag-active" : "")
+                  })), {}, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread5.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                      className: "drag-overlay",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                        children: "Suelta las im\xE1genes aqu\xED"
+                      })
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                      children: thumbs()
+                    })]
+                  })), ((_state$images_values12 = state.images_values) === null || _state$images_values12 === void 0 ? void 0 : _state$images_values12.values.length) === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                    style: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      textAlign: "center",
+                      padding: "40px",
+                      width: "80%",
+                      maxWidth: "500px",
+                      fontFamily: "Arial, sans-serif"
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                      style: {
+                        fontSize: "18px",
+                        color: "#666",
+                        marginBottom: "16px"
+                      },
+                      children: "Este producto no tiene im\xE1genes"
+                    }), isAuditorAssigned() || isUserAssignedToService() ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+                      style: {
+                        fontSize: "14px",
+                        color: "#999",
+                        marginBottom: "20px"
+                      },
+                      children: ["Arrastra las im\xE1genes aqu\xED o", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        onClick: open,
+                        style: {
+                          color: "#007bff",
+                          cursor: "pointer",
+                          textDecoration: "underline"
+                        },
+                        children: "haz clic para abrir el explorador de archivos"
+                      })]
+                    }) : null]
+                  })]
+                })]
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+                text: "No cuentas con este servicio",
+                headerType: "input-name-header"
+              }))]
+            })
+          }), (isUserAssignedToService(state.active_tab) || isAuditorAssigned()) && state.product["".concat((0, _utils.getConceptByTab)(state.active_tab), "_status")] !== "NS" && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "commentary-box",
+            children: [!state.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: handleOnSubmitComment
+                })
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "feedback-box",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Commentary.Commentary, {
+                comment: (_state$comment = state.comment) === null || _state$comment === void 0 ? void 0 : _state$comment.message,
+                reviewed: crossComment
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: "circular-button accept-button",
+                onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13() {
+                  return _regenerator.default.wrap(function _callee13$(_context13) {
+                    while (1) {
+                      switch (_context13.prev = _context13.next) {
+                        case 0:
+                          setCrossComment(true);
+                          commentRevised();
+
+                        case 2:
+                        case "end":
+                          return _context13.stop();
+                      }
+                    }
+                  }, _callee13);
+                }))
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "action-buttons",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: "general-pink-button",
+                label: "Cambio de Estatus",
+                onClick: function onClick() {
+                  return setOpenChangeStatusModal(true);
+                },
+                id: "button-change-status"
+              }), [7, 8].includes(user.id_role) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+                buttonType: isEvaluationFinished(user.id_role, state.active_tab, statusArray) && state.missing_required_fields[state.active_tab] === 0 ? "general-green-button" : "general-button-disabled",
+                label: "Enviar evaluación",
+                onClick: handleOnSendEvaluationToFacilitator
+              })]
+            })]
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChangeStatusModal.default, {
+      state: state,
+      open: openChangeStatusModal,
+      onClose: function onClose() {
+        setOpenChangeStatusModal(false);
+      },
+      reloadData: loadData,
+      token: token
     })]
   });
 };
 
+var RetailerProductEdition = function RetailerProductEdition(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_providerProductEdition.ProviderProductEditionProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RetailerProductEditionView, (0, _objectSpread5.default)({}, props))
+  });
+};
+
 exports.RetailerProductEdition = RetailerProductEdition;