contentoh-components-library 21.5.99 → 21.6.1

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

@@ -1,392 +1,297 @@
-import { Container } from "./styles";
-import { HeaderTop } from "../../molecules/HeaderTop";
-import { ImagePreviewer } from "../../organisms/ImagePreviewer";
-import { ImageDataTable } from "../../organisms/ImageDataTable";
-import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
-import { FullTabsMenu } from "../../organisms/FullTabsMenu";
-import { InputGroup } from "../../organisms/InputGroup";
-import { useEffect, useReducer, useState, useCallback } from "react";
-import { GalleryElement } from "../../molecules/GalleryElement";
+import { useEffect, useState } from "react";
+
+import axios from "axios";
+import { useDropzone } from "react-dropzone";
 import { saveAs } from "file-saver";
-import { Commentary } from "../../atoms/Commentary";
+
 import {
-  getRetailerServices,
-  getPercentage,
-  fetchUsers,
-} from "../../../global-files/data";
-import { GalleryHeader } from "../../molecules/GalleryHeader";
-import { ProductImageModal } from "../../organisms/ProductImageModal";
-import { useDropzone } from "react-dropzone";
-import axios from "axios";
-import { v4 as uuidv4 } from "uuid";
-import AWS from "aws-sdk";
-import attributesSent from "../../../assets/images/modalsSVGs/attributesSent.svg";
-import descriptionSent from "../../../assets/images/modalsSVGs/descriptionSent.svg";
-import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
-import { TagAndInput } from "../../molecules/TagAndInput/index";
-import { Button } from "../../atoms/GeneralButton";
-import { GenericModal } from "../../atoms/GenericModal";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { Loading } from "../../atoms/Loading";
-import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
-import { VersionSelector } from "../../organisms/VersionSelector";
-import { useCloseModal } from "../../../global-files/customHooks";
+  ProviderProductEditionProvider,
+  useProviderProductEdition,
+} from "./context/provider-product-edition.context";
 import {
+  normalizeProduct,
+  getConceptByTab,
   getAuditVersion,
   getInputsData,
   createMessage,
   sendMessage,
+  translateConcept,
+  getStatusArrayByRole,
+  getConceptsByRole,
+  buildCollaboratorAssignations,
+  calculateRequiredNull,
 } from "./utils";
-import { Modal } from "../../organisms/Modal";
+
+import {
+  fetchUsers,
+  getPercentage,
+  getRetailerServices,
+  getServicesData,
+} from "../../../global-files/data";
+import { useCloseModal } from "../../../global-files/customHooks";
+
+import { Button } from "../../atoms/GeneralButton";
+import { GenericModal } from "../../atoms/GenericModal";
+import { Loading } from "../../atoms/Loading";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { ButtonV2 } from "../../atoms/ButtonV2";
-import generateThumbnail from "./generateThumnail";
-
-const reducerImages = (state, action) => {
-  let { values, attrForImgs, inputsByRetailer } = state;
-  switch (action.action) {
-    case "init":
-      const newInputsByRetailer = {};
-      action?.init?.inputsByRetailer?.forEach((inputs) => {
-        inputs?.forEach((input) => {
-          if (!newInputsByRetailer[`${input.id_retailer}`])
-            newInputsByRetailer[`${input.id_retailer}`] = [];
-          newInputsByRetailer[`${input.id_retailer}`].push(input);
-        });
-      });
-      inputsByRetailer = newInputsByRetailer;
-      return {
-        ...action.init,
-        inputsByRetailer,
-        valuesInitial: action.init.values,
-        inputsInitial: action.init.inputs,
-      };
-    case "addImg":
-      values = [...values, action.img];
-      return { ...state, values };
-    case "changeImageInfo":
-      values[action.index][action.attribute] = action.value;
-      return { ...state, values };
-    case "changeShotType":
-      values[action.index][action.attribute] = action.value;
-      return { ...state, values };
-
-    case "changeAttrValue":
-      const index = attrForImgs.general.findIndex((f) => f.id === action.id);
-      if (index !== -1) {
-        attrForImgs.general[index].value = action.value;
-      }
 
-      return { ...state, attrForImgs, values };
-    case "deleteImage":
-      values = values.filter(
-        (value) => action.selectedImages.indexOf(value) === -1
-      );
-      return { ...state, values };
-    case "orderImages": {
-      let { inputsByRetailer, valuesInitial, inputsInitial, inputs } = state;
-      try {
-        const orderedImages = [];
-        const imageIdArray = [];
-        if (action?.retailerId && !inputsByRetailer[action.retailerId]) {
-          inputsByRetailer[action.retailerId] = [];
-        }
-        action.retailerId &&
-          inputsByRetailer[action.retailerId]?.filter((input) => {
-            imageIdArray.push(input.id_image);
-            valuesInitial.forEach(async (value) => {
-              if (value.ext == "mp4") {
-                convertirVideoABase64(
-                  "https://" +
-                    process.env.REACT_APP_IMAGES_BUCKET +
-                    ".s3.amazonaws.com/" +
-                    value.srcDB
-                )
-                  .then(async (base64) => {
-                    const videoSrc =
-                      "data:video/mp4;base64," + base64.split(",")[1]; // Añade el tipo MIME adecuado
-                    value.src = await generateThumbnail(videoSrc, 2);
-                  })
-                  .catch((error) => {
-                    console.error("Error:", error);
-                  });
-              }
-              if (value.image_id === input.id_image) orderedImages.push(value);
-            });
-          });
-        inputs = inputsInitial?.filter((input) =>
-          imageIdArray.includes(input.id)
-        );
+import { GalleryElement } from "../../molecules/GalleryElement";
+import { GalleryHeader } from "../../molecules/GalleryHeader";
+import { HeaderTop } from "../../molecules/HeaderTop";
+import { TagAndInput } from "../../molecules/TagAndInput/index";
 
-        values = orderedImages.length > 0 ? orderedImages : [];
-      } catch (error) {
-        console.log(error);
-      }
-      return { ...state, values, inputs };
-    }
-    default:
-      return state;
-  }
-};
+import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
+import { FullTabsMenu } from "../../organisms/FullTabsMenu";
+import { ImageDataTable } from "../../organisms/ImageDataTable";
+import { ImagePreviewer } from "../../organisms/ImagePreviewer";
+import { InputGroup } from "../../organisms/InputGroup";
+import { ProductImageModal } from "../../organisms/ProductImageModal";
+import { VersionSelector } from "../../organisms/VersionSelector";
+import { Modal } from "../../organisms/Modal";
 
-const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
-const REGION = "us-east-1";
-
-function convertirVideoABase64(url) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", url, true);
-    xhr.responseType = "blob";
-    xhr.onload = function () {
-      if (xhr.status === 200) {
-        const blob = xhr.response;
-        const reader = new FileReader();
-        reader.onloadend = function () {
-          resolve(reader.result);
-        };
-        reader.readAsDataURL(blob);
-      } else {
-        reject(new Error("Error al cargar el video"));
-      }
-    };
-    xhr.onerror = function () {
-      reject(new Error("Error de red al cargar el video"));
-    };
-    xhr.send();
-  });
-}
-
-function obtenerDuracionVideoBase64(base64Data) {
-  return new Promise((resolve, reject) => {
-    const video = document.createElement("video");
-    video.src = base64Data;
-    video.addEventListener("loadedmetadata", () => {
-      resolve(video.duration);
-    });
-    video.addEventListener("error", reject);
-  });
-}
+import successIcon from "../../../assets/images/genericModal/genericModalCheck.svg";
+import errorIcon from "../../../assets/images/genericModal/errorModal.svg";
+import warningIcon from "../../../assets/images/genericModal/genericModalWarning.svg";
+import attributesSent from "../../../assets/images/modalsSVGs/attributesSent.svg";
+import descriptionSent from "../../../assets/images/modalsSVGs/descriptionSent.svg";
+import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
+
+import { Container } from "./styles";
+import { Commentary } from "../../atoms/Commentary";
 
-AWS.config.update({
-  accessKeyId: process.env.REACT_APP_KUTS3,
-  secretAccessKey: process.env.REACT_APP_AKUTS3,
-});
+import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
+import ChangeStatusModal from "../../organisms/ChangeStatusModal";
 
-const myBucket = new AWS.S3({
-  params: { Bucket: S3_BUCKET },
-  region: REGION,
-});
+import { Skeleton, Box, Stack } from "@mui/material";
 
-export const RetailerProductEdition = ({
+const allowedAccountsToViewChangeStatus = [
+  "mperez@contentoh.com",
+  "gmorales@contentoh.com",
+  "rvega@contentoh.com",
+  "amora@contentoh.com",
+  "oparra@contentoh.com",
+  "zsegura@contentoh.com",
+  "oserna@contentoh.com",
+  "jalvarado@contentoh.com"
+];
+
+const RetailerProductEditionView = ({
   tabsSections,
   productSelected = {},
   user = {},
   token,
   location,
 }) => {
-  const [activeTab, setActiveTab] = useState("Descripción");
-  const [activeImage, setActiveImage] = useState();
-  const [imageLayout, setImageLayout] = useState(false);
+  const {
+    state,
+    dispatch,
+    saveDatasheets,
+    saveDescriptions,
+    updateImages,
+    saveImageAttrs,
+    deleteImages,
+    handleOnDownloadImages,
+    createComment,
+  } = useProviderProductEdition();
+
+  const isRetailer = user?.is_retailer;
+
+  const [showVersionSelector, setShowVersionSelector] =
+    useCloseModal("version-selector");
+  const [auditableVersion, setAuditableVersion] = useState(null);
   const [headerTop, setHeaderTop] = useState(0);
-  const [descriptions, setDescriptions] = useState([]);
-  const [datasheets, setDatasheets] = useState([]);
-  const [images, setImages] = useReducer(reducerImages, {});
-  const [showModal, setShowModal] = useState(false);
+  const [shotThd, setShotThd] = useState(false);
+  const [observation, setObservation] = useState();
   const [showRejectModal, setShowRejectModal] = useState(false);
-  const { getRootProps, getInputProps } = useDropzone({
-    accept: "image/*, video/mp4",
+  const [isObservationVisible, setObservationVisible] = useState(false);
+  const [imageLayout, setImageLayout] = useState(false);
+  const [crossComment, setCrossComment] = useState(false);
+  const [statusArray, setStatusArray] = useState([]);
+  const [rejectAll, setRejectAll] = useState(false);
+
+  const [auditServices, setAuditServices] = useState([]);
+  const [auditDatasheets, setAuditDatasheets] = useState([]);
+  const [auditDescriptions, setAuditDescriptions] = useState([]);
+  const [showModal, setShowModal] = useState(false);
+
+  const [compare, setCompare] = useState(false);
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
+    accept: "image/*",
     noKeyboard: true,
     multiple: true,
     noClick: true,
     onDrop: (acceptedFiles) => {
-      const newImages = [];
       acceptedFiles.map((file) => {
         const reader = new FileReader();
         reader.fileName = file.name;
+
         reader.onload = async function (e) {
-          const ext = e.srcElement.fileName.split(".");
+          const fileName = e.target.fileName;
+          const fileExtension = fileName.split(".").pop();
+          const fileDataURL = e.target.result;
+
           const img = new Image();
-          if (ext[ext.length - 1] == "mp4") {
-            obtenerDuracionVideoBase64(e.target.result)
-              .then(async (duracion) => {
-                if (duracion > 15 && duracion < 600) {
-                  img.src = await generateThumbnail(e.target.result, 2);
-                  setTimeout(() => {
-                    const width = img.width;
-                    const height = img.height;
-                    const 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);
-                } else {
-                  setModalAlert({
-                    show: true,
-                    title: "Hubo un error al subir el video",
-                    message:
-                      "Los videos deben durar entre 15 segundos y 10 minutos",
-                  });
-                }
-              })
-              .catch((error) => {
-                console.error("Error al obtener la duración del video:", error);
-              });
-          } else {
-            img.src = e.target.result;
-            setTimeout(() => {
-              const width = img.width;
-              const height = img.height;
-              const 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);
-          }
+          img.src = fileDataURL;
+
+          img.onload = function () {
+            const width = img.width;
+            const height = img.height;
+            const 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,
+            });
+          };
         };
+
         reader.onerror = function (error) {
           console.log("dropzoneError: ", error);
         };
+
         reader.readAsDataURL(file);
         return file;
       });
     },
   });
-  const [updatedDatasheets, setUpdatedDatasheets] = useState([]);
-  const [updatedDescriptions, setUpdatedDescriptions] = useState([]);
-  const [imagesUploaded, setImagesUploaded] = useState(false);
-  const [dataImages, setDataImages] = useState();
-  const [percentages, setPercentages] = useState(
-    new Array(product?.retailers?.length).fill({ percentage: 0 })
-  );
-  // const [percentages, setPercentages] = useState([{ retailers: {} }]);
-  const [activePercentage, setActivePercentage] = useState(0);
-  const [activeRetailer, setActiveRetailer] = useState({});
-  const [services, setServices] = useState([]);
-  const [servicesData, setServicesData] = useState([]);
-  const [message, setMessage] = useState("");
-  const [product, setProduct] = useState(
-    JSON.parse(sessionStorage.getItem("productSelected"))
-      ? JSON.parse(sessionStorage.getItem("productSelected"))
-      : productSelected
-  );
-  const [icon, setIcon] = useState(null);
-  const [version, setVersion] = useState(product?.version);
-  const [comments, setComments] = useState({});
-  const [comment, setComment] = useState("");
-  const [requiredNull, setRequiredNull] = useState({
-    "Ficha técnica": 0,
-    Descripción: 0,
-    Imágenes: 0,
-  });
-  const [crossComment, setCrossComment] = useState(false);
-  const [userGroups, setUserGroups] = useState([]);
-  const [assig, setAssig] = useState({});
-  const [selectedImages, setSelectedImages] = useState([]);
-  const [componentsArray, setComponentsArray] = useState([]);
-  const [checkAll, setCheckAll] = useState(false);
-  const isRetailer = user?.is_retailer;
-  const [loading, setLoading] = useState(true);
-  const [retailerStatus, setRetailerStatus] = useState("-");
-  const [statusArray, setStatusArray] = useState([]);
-  const [socketType, setSocketType] = useState(null);
-  const [saving, setSaving] = useState(loading);
-  const [showVersionSelector, setShowVersionSelector] =
-    useCloseModal("version-selector");
-  const shotThd = [58, 59, 60, 61].includes(activeRetailer.id);
-  const [auditableVersion, setAuditableVersion] = useState(null);
-  const [auditServices, setAuditServices] = useState([]);
-  const [auditDatasheets, setAuditDatasheets] = useState([]);
-  const [auditDescriptions, setAuditDescriptions] = useState([]);
-  const [auditImages, setAuditImages] = useState([]);
-  const [compare, setCompare] = useState(false);
-  const [observation, setObservation] = useState();
-  const [valRejAll, setValRejAll] = useState(false);
-  const [modalAlert, setModalAlert] = useState({
-    show: false,
-    title: "",
-    message: "",
-    errorInputMessage: false,
-  });
 
-  const [desc, setDesc] = useState([]);
-  const [fich, setFich] = useState([]);
-  const [imag, setImag] = useState([]);
+  const [openChangeStatusModal, setOpenChangeStatusModal] = useState(false);
 
-  const [isObservationVisible, setObservationVisible] = useState(false);
+  const thumbs = () => {
+    const imageInputs = state.images_values?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+      required: e?.required,
+      active: state.images_values?.values?.some(
+        (value) => value?.image_id === e?.id,
+      ),
+    }));
+    const imageType = state.images_values?.imageType?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+    }));
+    const imagePackagingType = state.images_values?.imagePackagingType?.map(
+      (e) => ({
+        value: e?.id,
+        name: e?.name,
+      }),
+    );
 
-  const toggleObservation = () => {
-    setObservationVisible(!isObservationVisible);
-  };
-  // const handleClickOutside = (event) => {
-  //   if (
-  //     isObservationVisible &&
-  //     !event.target.closest(".Observation") &&
-  //     !event.target.closest(".Container")
-  //   ) {
-  //     hideObservation();
-  //   }
-  // };
-
-  // useEffect(() => {
-  //   document.addEventListener("click", handleClickOutside);
-  //   return () => {
-  //     document.removeEventListener("click", handleClickOutside);
-  //   };
-  // }, [isObservationVisible]);
-
-  const hideObservation = () => {
-    setObservationVisible(false);
+    return state.images_values?.values?.map((image, index) => (
+      <GalleryElement
+        id={"gallery-element-" + index}
+        index={index + "-" + image.name}
+        key={index}
+        image={image}
+        number={index}
+        gridLayout={imageLayout}
+        imageType={imageType}
+        imagePackagingType={imagePackagingType}
+        imageInputs={imageInputs}
+        selectedImages={state.selected_images}
+        setCheckAll={handleOnSetCheckAll}
+        changeImage={(item) => {
+          dispatch({ type: "UPDATE_IMAGE_VALUE", payload: item });
+        }}
+        setSelectedImages={(item) =>
+          dispatch({ type: "SET_SELECTED_IMAGE", payload: item })
+        }
+        updateApprovedInputsImages={(item) =>
+          console.log("updateApprovedInputsImages", item)
+        }
+      />
+    ));
   };
 
-  const handleCommentSubmit = (e) => {
-    e.preventDefault();
-    const commentText = document.querySelector(
-      "#commentary-box .ql-container .ql-editor > p"
-    ).innerHTML;
-    createComment(e, commentText, activeTab);
+  const initializeProduct = async () => {
+    try {
+      const product = productSelected ? productSelected : JSON.parse(sessionStorage.getItem("productSelected"));
+
+      const productNormalized = normalizeProduct(product);
+
+      console.log({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
+      setStatusArray(getStatusArrayByRole(user.id_role));
+
+      // Cargar usuarios y asignaciones
+      const users = await fetchUsers(token);
+      if (users.length > 0) {
+        dispatch({
+          type: "SET_COLLABORATOR_ASSIGNATIONS",
+          payload: buildCollaboratorAssignations(productNormalized, users),
+        });
+      }
+
+      const { id_article } = productNormalized;
+      if (id_article) {
+        await getAuditVersion(id_article, setAuditableVersion, token);
+      }
+
+      if (id_article && productNormalized.id_order) {
+        const response = await axios.get(
+          process.env.REACT_APP_READ_OBSERVATION,
+          {
+            params: {
+              articleId: id_article,
+              orderId: productNormalized.id_order,
+            },
+            headers: {
+              Authorization: sessionStorage.getItem("jwt"),
+            },
+          },
+        );
+        const parseData = JSON.parse(response.data.body).data[0];
+        setObservation(parseData.observations);
+      }
+    } catch (error) {
+      console.log("Error setting product data: ", error);
+    }
   };
 
-  useEffect(async () => {
-    const { id_article } = product?.article || {};
-    if (id_article)
-      await getAuditVersion(id_article, setAuditableVersion, token);
+  // Setter del producto y carga inicial (optimizado para evitar cascada)
+  useEffect(() => {
+    initializeProduct();
   }, []);
 
   const loadAuditableData = async () => {
-    if (auditableVersion) {
-      const auditServices = await getRetailerServices(
-        product?.article?.id_article,
-        product?.article?.category,
-        parseInt(product?.article?.id_category),
-        auditableVersion.version,
-        token
-      );
-      getInputsData(
-        auditServices,
-        activeRetailer,
-        setAuditDatasheets,
-        setAuditDescriptions
-      );
-      setAuditServices(auditServices);
-      setAuditImages(auditServices[2]);
-    }
+    const auditServices = await getRetailerServices(
+      state.product?.id_article,
+      state.product?.categoryName,
+      parseInt(state.product?.id_category),
+      auditableVersion.version,
+      token,
+    );
+    getInputsData(
+      auditServices,
+      { id: state.active_retailer.id_retailer },
+      setAuditDatasheets,
+      setAuditDescriptions,
+    );
+    setAuditServices(auditServices);
+    setAuditImages(auditServices[2]);
   };
 
   useEffect(() => {
@@ -395,682 +300,438 @@ export const RetailerProductEdition = ({
     }
   }, [auditableVersion]);
 
-  useEffect(() => {
-    checkAll && setSelectedImages(images.values);
-  }, [checkAll]);
-
-  const loadData = async () => {
+  const loadData = async (enableLoading = true, versionSelected = null) => {
     try {
-      setLoading(true);
-
-      const ids =
-        product?.statusByRetailer?.map((item) => item.retailer_id) ??
-        product?.statusByRetailer?.map((item) => item.id_retailer) ??
-        [];
-      const uniqueIds = [...new Set(ids)];
-
-      let activeRetailerId = activeRetailer?.id;
-      if (!activeRetailerId) {
-        const firstValid = product?.article?.categoryRetailer?.find((item) =>
-          uniqueIds.includes(item.id_retailer || item.retailer_id)
-        );
-        if (firstValid) {
-          activeRetailerId = firstValid.id_retailer || firstValid.retailer_id;
-        }
-      }
-
-      const categoryRetailer =
-        product?.article?.categoryRetailer?.filter(
-          (item) =>
-            uniqueIds.includes(item.id_retailer) &&
-            item.id_retailer === activeRetailerId
-        ) ??
-        product?.article?.categoryRetailer?.filter(
-          (item) =>
-            uniqueIds.includes(item.retailer_id) &&
-            item.retailer_id === activeRetailerId
-        ) ??
-        [];
-
-      const categoryName = categoryRetailer[0]?.category_name;
-      const categoryId = categoryRetailer[0]?.id_category;
-
-      const category_name =
-        categoryName ??
-        (product?.article?.company_name || product?.categoryName);
-      const category_id =
-        categoryId ??
-        parseInt(product?.article?.id_category || product?.id_category);
-
-      const retailer_id = activeRetailerId ?? categoryRetailer?.id_retailer;
-
-      const services = await getRetailerServices(
-        product?.id_article || product?.article?.id_article,
-        category_name,
-        category_id,
-        version,
-        token,
-        retailer_id
-      );
-
-      if (auditableVersion && retailer_id) {
-        loadAuditableData();
-      }
-
-      setServices(services);
-      const generalServices = await getServices();
-
-      setImages({ action: "init", init: services[2] });
+      if (enableLoading) dispatch({ type: "SET_LOADING", payload: true });
 
-      if (services[2]?.values?.length > 0) setActiveImage(0);
+      const { id_article, version, id_order } = state.product;
+      const { category, id_category, id_retailer } = state.active_retailer;
 
+      // Payloads y headers
       const data = [
         {
-          id_article: product?.article?.id_article,
+          id_article,
+          version: versionSelected ? versionSelected : version,
           relations: [
             {
-              id_retailer: retailer_id,
-              id_category: category_id,
+              id_retailer,
+              id_category,
             },
           ],
-          version: product.version,
         },
       ];
 
       const headers = { Authorization: token };
-      getPercentage({ data, headers }).then((res) => {
-        setPercentages(JSON.parse(res?.[0]?.body));
+
+      const [services, percentagesRes, servicesDataRes, commentsResponse] =
+        await Promise.all([
+          getRetailerServices(
+            id_article,
+            category,
+            id_category,
+            versionSelected ?? version,
+            token,
+            id_retailer,
+          ),
+          getPercentage({ data, headers }),
+          getServicesData({
+            articleId: id_article,
+            orderId: id_order,
+            end: true,
+            token,
+          }),
+          // Obtener comentarios en paralelo
+          Promise.all([
+            axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+              params: {
+                articleId: id_article,
+                concept: "description",
+                orderIdColab: id_order,
+                version: versionSelected ?? version,
+              },
+            }),
+            axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+              params: {
+                articleId: id_article,
+                concept: "datasheet",
+                orderIdColab: id_order,
+                version: versionSelected ?? version,
+              },
+            }),
+            axios.get(process.env.REACT_APP_COMMENTS_ENDPOINT, {
+              params: {
+                articleId: id_article,
+                concept: "images",
+                orderIdColab: id_order,
+                version: versionSelected ?? version,
+              },
+            }),
+          ]),
+        ]);
+
+      dispatch({
+        type: "SET_RETAILER_STATUS",
+        payload: servicesDataRes.map((service) => ({
+          retailer_id: service?.id_retailer,
+          service: service?.service,
+          status: service?.status,
+          task_user_group_id: service?.task_user_group_id,
+        })),
+      });
+
+      // Extraer relaciones del response
+      const percentages =
+        JSON.parse(percentagesRes?.[0]?.body)?.[0]?.relations ?? [];
+
+      // Procesar comentarios
+      let commentsMap = {};
+      commentsResponse.forEach((commentRes) => {
+        const commentData = JSON.parse(commentRes?.data?.body).data[0];
+        if (commentData) {
+          const tab = translateConcept(commentData.concept);
+          commentsMap[tab] = commentData;
+        }
+      });
+      dispatch({ type: "SET_COMMENTS", payload: commentsMap });
+
+      // Ordenamiento de imágenes
+      const orderMap = services[2].inputsByRetailer
+        .flat()
+        .reduce((acc, item) => {
+          acc[item.id_image] = item.order;
+          return acc;
+        }, {});
+
+      const orderedValues = [...services[2].values].sort((a, b) => {
+        const orderA = orderMap[a.image_id] ?? Number.MAX_SAFE_INTEGER;
+        const orderB = orderMap[b.image_id] ?? Number.MAX_SAFE_INTEGER;
+        return orderA - orderB;
+      });
+
+      // Procesamiento de inputs del retailer activo (evita cascada con state.services)
+      const retailerDatasheets = services[0][id_retailer];
+      const datasheetsActiveRetailer = {
+        ...retailerDatasheets,
+        data: Object.values(retailerDatasheets.data),
+      };
+
+      const descriptionsActiveRetailer = services[1].filter(
+        (item) => item.id === id_retailer,
+      );
+
+      const filteredValues = services[2].values.filter((value) => {
+        return services[2].inputsByRetailer.some((retailerInput) =>
+          retailerInput.some(
+            (input) =>
+              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: {
+            ...services[2],
+            values: orderedValues,
+          },
+        },
+      });
+
+      dispatch({ type: "SET_PERCENTAGES", payload: percentages });
+      dispatch({
+        type: "SET_ACTIVE_PERCENTAGES",
+        payload: percentages.find(
+          ({ id_retailer: rId }) => 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: {
+          ...services[2],
+          values: filteredValues,
+        },
       });
 
-      setImages({ action: "orderImages", retailerId: activeRetailer.id });
+      // Calcular campos requeridos sin valor
+      dispatch({
+        type: "SET_MISSING_REQUIRED_FIELDS",
+        payload: calculateRequiredNull(services, servicesDataRes, id_retailer),
+      });
 
-      setLoading(false);
+      // Auditable
+      if (auditableVersion && id_retailer) {
+        loadAuditableData();
+      }
     } catch (error) {
-      setLoading(false);
-      console.log(error);
+      console.log("Error loading data: ", error);
+      dispatch({ type: "SET_ERRORS", payload: [error.message] });
+    } finally {
+      dispatch({ type: "SET_LOADING", payload: false });
     }
   };
 
   useEffect(() => {
-    setLoading(true);
-    loadData();
-  }, [activeRetailer]);
-
-  const getServices = async () => {
-    const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${
-        product?.article?.id_article
-      }&orderId=${product?.article?.id_order || product.orderId}&end=true`
-    );
-    const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
+    if (state.active_retailer) {
+      loadData();
+    }
+  }, [state.active_retailer]);
 
-    const retailers = product.retailers || product.retailersAvailable;
-    const retailerResponse = parsedResponse?.map((srv) => srv.id_retailer);
-    const active = retailers?.find((retailer) =>
-      retailerResponse.includes(retailer.id)
-    );
-    !activeRetailer.id && setActiveRetailer(active ? active : retailers[0]);
-    setServicesData(parsedResponse);
+  const handleOnChangeCurrentImage = (index) => {
+    if (typeof index === "number") {
+      dispatch({ type: "SET_CURRENT_IMAGE", payload: index });
+    } else if (typeof index === "object") {
+      dispatch({ type: "CHANGE_ATTR_VALUE", payload: index });
+    }
   };
 
-  const translateConcept = (concept) => {
-    const translation = {
-      datasheet: "Ficha técnica",
-      description: "Descripción",
-      images: "Imágenes",
-    };
-    return translation[concept];
+  const handleOnShowModalGallery = () => {
+    dispatch({
+      type: "SET_ACTIVE_TAB",
+      payload: "Imágenes",
+    });
+    setShowModal(true);
   };
 
-  const getComments = async (tab = "Descripción") => {
-    const commentsResponse = await Promise.all([
-      axios.get(
-        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${product?.article?.id_article}&concept=description&orderIdColab=${product?.orderId}&version=${version}`
-      ),
-      axios.get(
-        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${product?.article?.id_article}&concept=datasheet&orderIdColab=${product?.orderId}&version=${version}`
-      ),
-      axios.get(
-        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${product?.article?.id_article}&concept=images&orderIdColab=${product?.orderId}&version=${version}`
-      ),
-    ]);
-
-    let comments = {};
-    commentsResponse.forEach(
-      (comment) =>
-        JSON.parse(comment?.data?.body).data[0] &&
-        (comments[
-          translateConcept(JSON.parse(comment?.data?.body)?.data[0]?.concept)
-        ] = JSON.parse(comment?.data?.body).data[0])
-    );
-    setComment(comments[tab]);
-    setComments(comments);
+  const handleOnChangeActiveRetailer = (retailer) => {
+    dispatch({
+      type: "SET_ACTIVE_RETAILER",
+      payload: retailer,
+    });
   };
 
-  useEffect(async () => {
-    setLoading(true);
-    // loadData();
-    getComments();
-    setUserGroups(await fetchUsers(token));
-    let arr = [];
-    switch (user.id_role) {
-      case 7:
-      case 8:
-        arr = ["PA", "AS", "CA", "RC", "RA", "RP", "RCA"];
-        break;
-      case 4:
-      case 5:
-        arr = ["RC", "AC", "AA", "AP", "ACA"];
-        break;
-      case 6:
-        arr = ["RP", "RCA", "AC", "RA"];
-        break;
-      default:
-        arr = [];
-        break;
-    }
-    setStatusArray(arr);
-    setLoading(false);
-  }, [product, version]);
-
-  const loadAssignations = (currentProduct) => {
-    setAssig({
-      Descripción: {
-        assignations: [
-          {
-            collaboratorType: "especialist",
-            id: currentProduct?.article?.id_description_especialist,
-          },
-          {
-            collaboratorType: "facilitator",
-            id: currentProduct?.article?.id_description_facilitator,
-          },
-        ],
-        collaborators: {
-          especialist: userGroups[0] || [],
-          facilitator: userGroups[2] || [],
-        },
-      },
-      "Ficha técnica": {
-        assignations: [
-          {
-            collaboratorType: "especialist",
-            id: currentProduct?.article?.id_datasheet_especialist,
-          },
-          {
-            collaboratorType: "facilitator",
-            id: currentProduct?.article?.id_datasheet_facilitator,
-          },
-        ],
-        collaborators: {
-          especialist: userGroups[0] || [],
-          facilitator: userGroups[2] || [],
-        },
-      },
-      Imágenes: {
-        assignations: [
-          {
-            collaboratorType: "especialist",
-            id: currentProduct?.article?.id_images_especialist,
-          },
-          {
-            collaboratorType: "facilitator",
-            id: currentProduct?.article?.id_images_facilitator,
-          },
-        ],
-        collaborators: {
-          especialist: userGroups[1] || [],
-          facilitator: userGroups[3] || [],
-        },
-      },
+  const handleOnChangeActiveTab = (tab) => {
+    dispatch({
+      type: "SET_ACTIVE_TAB",
+      payload: tab,
     });
   };
 
-  useEffect(() => {
-    loadAssignations(product);
-  }, [userGroups]);
-
-  useEffect(() => {
-    const retailerPercentages =
-      percentages?.[0]?.relations?.[0]?.percentagesGeneral;
-
-    const requiredPercentage = 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]);
-
-  useEffect(() => {
-    getInputsData(services, activeRetailer, setDatasheets, setDescriptions);
-    auditableVersion && loadAuditableData();
-    setActivePercentage(Math.round(activeRetailer?.percentage, 0));
-    activeRetailer?.id &&
-      setImages({ action: "orderImages", retailerId: activeRetailer.id });
-  }, [activeRetailer, services]);
-
-  const thumbs = () => {
-    const imageInputs = socketType?.slice();
-    const imageType = images?.imageType?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-    }));
-    const imagePackagingType = images?.imagePackagingType?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-    }));
-    const imageShotType = images?.imageShotType?.map((e) => ({
-      value: e?.id,
-      name: e?.type_shot,
-    }));
-    return images?.values?.map((image, index) => (
-      <GalleryElement
-        setCheckAll={setCheckAll}
-        key={index + "-" + image.name}
-        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}
-      />
-    ));
+  const handleOnToggleImageLayout = () => {
+    setImageLayout(!imageLayout);
   };
 
-  const saveDescriptions = async () => {
-    const dataClean = updatedDescriptions.filter((f) => f.value !== "");
-    if (dataClean.length > 0) {
-      setLoading(true);
-      const productTemp = product;
-      const articleId = product?.article?.id_article;
-      const dataObject = {
-        articleId,
-        articleData: dataClean,
-      };
-      if (product?.orderId) dataObject["orderId"] = product?.orderId;
-      try {
-        const res = await axios.put(
-          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?description=true&version=${version}`,
-          dataObject,
-          {
-            headers: {
-              Authorization: token,
-            },
-          }
-        );
-        if (res.data.statusCode === 200) {
-          const { newStatus, newArticleStatus } = JSON.parse(res.data.body);
-          if (newArticleStatus)
-            productTemp.status = newArticleStatus[articleId];
-          if (newStatus) productTemp.description_status = newStatus;
-          setProduct(productTemp);
-          sessionStorage.setItem(
-            "productSelected",
-            JSON.stringify(productTemp)
-          );
+  const handleOnToggleObservation = () => {
+    setObservationVisible(!isObservationVisible);
+  };
 
-          setUpdatedDescriptions([]);
-          setMessage("Descripciones guardadas con éxito");
-          await loadData();
-        }
-      } catch (error) {
-        console.log(error);
-      } finally {
-        setLoading(false);
-      }
-    }
+  const handleOnHideObservation = () => {
+    setObservationVisible(false);
   };
 
-  const saveDatasheets = async () => {
-    const dataClean = updatedDatasheets.filter((f) => f.value !== "");
-    if (dataClean.length > 0) {
-      setLoading(true);
-      const productTemp = product;
-      const articleId = product?.article?.id_article;
-      const dataObject = {
-        articleId,
-        articleData: dataClean,
-      };
-      if (product?.orderId) dataObject["orderId"] = product?.orderId;
-      try {
-        const res = await axios.put(
-          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?datasheet=true&version=${version}`,
-          dataObject,
-          {
-            headers: {
-              Authorization: token,
-            },
-          }
-        );
-        if (res.data.statusCode === 200) {
-          const { newStatus, newArticleStatus } = JSON.parse(res.data.body);
-          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");
-          await loadData();
-        }
-      } catch (error) {
-        console.log(error);
-      } finally {
-        setLoading(false);
-      }
-    }
+  const isAuditorAssigned = () => {
+    return state.product?.id_auditor === user?.id_user;
   };
 
-  useEffect(() => {
-    const imageInputs = images?.inputs?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-      required: e?.required,
-      active: images?.values?.some((value) => value?.image_id === e?.id),
-    }));
-    setSocketType(imageInputs);
-  }, [images]);
-
-  const updateImages = useCallback(async () => {
-    const imagesList = images?.values?.slice();
-    const imagesListTemp = imagesList?.reduce((acc, image) => {
-      acc[image?.image_id] = ++acc[image?.image_id] || 0;
-      return acc;
-    }, {});
-
-    const duplicated = imagesList?.filter((image) => {
-      return imagesListTemp[image?.image_id];
-    });
+  const isUserAssignedToService = (tab, rol) => {
+    const concept = getConceptByTab(state.active_tab);
 
-    const attrForImgs = Object.values(images?.attrForImgs ?? {}).pop();
-    const data = {
-      articleId: product?.article?.id_article,
-      attrReqImgs: attrForImgs?.map((e) => ({
-        attrId: e.id,
-        value: e.value ?? "-",
-      })),
-      articleData: imagesList?.filter((e) => !e.id),
-      updateImages: imagesList?.filter((e) => e.id),
-    };
-    if (product?.orderId) data["orderId"] = product?.orderId;
-    let valid =
-      data?.articleData?.length === 0
-        ? true
-        : data?.articleData?.every((e, i) => {
-            // if (e?.image_id && e?.packing_type && e?.image_type) {
-            if (e?.image_id) {
-              return true;
-            }
-            return false;
-          });
-    if (valid && data?.updateImages?.length > 0 && duplicated?.length === 0) {
-      valid = data?.updateImages?.every((e, i) => {
-        // if (e?.image_id && e?.packing_type && e?.image_type) {
-        if (e?.image_id) {
-          return true;
-        }
-        return false;
-      });
-    }
-    if (valid && duplicated?.length === 0) {
-      setLoading(true);
-      try {
-        data?.articleData?.forEach((e) => {
-          e.uuid = uuidv4();
-        });
-        setDataImages(data);
-        if (data?.articleData?.length > 0) {
-          setImagesUploaded(false);
-          const promiseArray = [];
-          data?.articleData?.forEach((e) => {
-            let 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"
-              );
-            }
-            const params = {
-              ACL: "public-read",
-              Body: file,
-              Bucket: S3_BUCKET,
-              Key: `id-${data.articleId}/${version}/${e?.image_id}-${e?.uuid}.${e?.ext}`,
-            };
-            promiseArray.push(myBucket.putObject(params).promise());
-          });
-          await Promise.all(promiseArray);
-          setImagesUploaded(true);
-        } else {
-          setImagesUploaded(true);
-        }
-      } catch (err) {
-        console.log(err);
-        // setMainLoading(false);
-      } finally {
-        setLoading(false);
-      }
-    } else {
-      // 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."
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [images, imagesUploaded]);
-
-  useEffect(async () => {
-    if (imagesUploaded) {
-      dataImages.articleData = dataImages?.articleData.map((e) => {
-        delete e.src;
-        e.imageID = e.image_id;
-        // e.packingType = e.packing_type;
-        // e.imageType = e.image_type;
-        if (product?.orderId) e["orderId"] = product?.orderId;
-        return e;
-      });
-      try {
-        const res = await axios.put(
-          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-          dataImages,
-          {
-            headers: {
-              Authorization: token,
-            },
-          }
-        );
-        if (res.data.statusCode === 200) {
-          let productTemp = product;
-          const { newStatus, newArticleStatus } = JSON.parse(res.data.body);
-          if (newArticleStatus)
-            productTemp.status = newArticleStatus[product?.article?.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");
-        }
-        await loadData();
-      } catch (error) {
-        console.log(error);
+    const allowedRoles = [1, 4, 5, 6, 7, 8];
+    const validUser = allowedRoles.includes(user?.id_role);
+
+    // Determinar rol por defecto si no se pasa
+    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";
       }
     }
-  }, [dataImages, imagesUploaded]);
 
-  const evaluationFinished = (userId, tab, statusArray) => {
-    const srv = servicesData.filter((serv) => serv.service === getConcept(tab));
-    const srvActive = srv
-      .find((serv) => serv.id_retailer === activeRetailer?.id)
-      ?.status?.replace(/.*\//, "");
-    const currStatus = product[`${getConcept(tab)}_status`]?.replace(
-      /.*\//,
-      ""
-    );
-    const unvalidated = ["IE", "CA"].includes(currStatus);
-
-    const auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(currStatus);
-
-    switch (userId) {
-      case 7:
-      case 8:
-        return (
-          (statusArray.includes(srvActive) &&
-            statusArray.includes(product?.status)) ||
-          srv.filter((serv) =>
-            statusArray.includes(serv.status?.replace(/.*\//, ""))
-          ).length === srv.length
-        );
-      case 4:
-      case 5:
-        return (
-          unvalidated &&
-          ["CA", "IE"].includes(product.status) && // "RC", "AC", "AA", "AP", "ACA"
-          srv.filter((serv) => statusArray.includes(serv.status)).length ===
-            srv.length
-        );
-      case 6:
-        return (
-          statusArray.includes(product.status) && // RP, RCA, AC, RA true
-          srv.every((serv) =>
-            ["RA", "AA", "AP", "ACA"].includes(serv.status)
-          ) &&
-          auditorUnvalidated
-        );
-      default:
-        break;
-    }
-  };
+    const isAdmin = user.id_role === 1;
+    const idUserAssigned = state.product?.[`id_${concept}_${rol}`];
+    const isAssigned = idUserAssigned === user.id_user;
 
-  const getConcept = (tab) => {
-    switch (tab) {
-      case "Descripción":
-        return "description";
-      case "Ficha técnica":
-        return "datasheet";
-      case "Imágenes":
-        return "images";
-    }
+    return isAdmin || (isAssigned && validUser);
   };
 
-  const approveRejectButtons = (action) => {
-    let concept = getConcept(action || activeTab);
+  const canShowSingleEvaluationButtons = (action) => {
+    let concept = getConceptByTab(action || state.active_tab);
 
-    const retailerStatus = servicesData
-      .find(
+    const retailerStatus = state.services_data
+      ?.find(
         (srv) =>
-          srv.id_retailer === activeRetailer?.id && srv.service === concept
+          srv.id_retailer === state.active_retailer?.id_retailer &&
+          srv.service === concept,
       )
       ?.status?.replace(/.*\//, "");
 
-    //sessionStorage product
     const adminFacilitatorCanEvaluate =
       retailerStatus === "IE" && [1, 4, 5].includes(user.id_role);
     const adminAuditorCanEvaluate =
       ["AC", "RP", "RCA", "SAC"].includes(retailerStatus) &&
       [1, 6].includes(user.id_role);
+
     return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
   };
 
-  const approveRejectAllButtons = () => {
-    let concepts = [];
-    switch (user.id_role) {
-      case 4:
-        concepts = ["description", "datasheet"];
-        break;
-      case 5:
-        concepts = ["images"];
-        break;
-
-      default:
-        concepts = ["description", "datasheet", "images"];
-        break;
-    }
+  const canShowBulkEvaluationButtons = () => {
+    const concepts = getConceptsByRole(user.id_role);
 
-    const services = servicesData.filter(({ service }) =>
-      concepts.includes(service)
+    const services = state.services_data.filter(({ service }) =>
+      concepts.includes(service),
     );
 
     const adminFacilitatorCanEvaluate =
       services.every((srv) => srv?.status?.replace(/.*\//, "") === "IE") &&
       [1, 4, 5].includes(user.id_role);
 
-    //sessionStorage product
     const adminAuditorCanEvaluate =
-      servicesData.every((srv) =>
-        ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, ""))
+      state.services_data.every((srv) =>
+        ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, "")),
       ) && [1, 6].includes(user.id_role);
     return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
   };
 
-  const getSectionIcon = () => {
-    switch (activeTab) {
-      case "Ficha técnica":
-        setIcon(attributesSent);
-        break;
+  const getStatusByCurrentServiceAndRetailer = () => {
+    const { statusByRetailer } = state.product;
+    if (!statusByRetailer) return "-";
+
+    const currentService = getConceptByTab(state.active_tab);
+    const currentRetailer = state.active_retailer.id_retailer;
+    const currentStatus =
+      statusByRetailer.filter(
+        (item) =>
+          item.retailer_id === currentRetailer &&
+          item.service === currentService,
+      )[0]?.status || "-";
+
+    return currentStatus;
+  };
+
+  const handleOnClickSaveImages = () => {
+    if (state.product?.services?.images === 1) {
+      saveImageAttrs(token);
+    }
+  };
+
+  const handleOnClickSave = async () => {
+    if (state.saving) return;
+
+    switch (state.active_tab) {
       case "Descripción":
-        setIcon(descriptionSent);
+        await saveDescriptions(token);
+        break;
+      case "Ficha técnica":
+        await saveDatasheets(token);
         break;
       case "Imágenes":
-        setIcon(imagesSent);
+        await updateImages(token);
         break;
       default:
         break;
     }
+
+    await loadData(false);
+  };
+
+  const handleOnSetUpdatedDescriptions = (items) => {
+    dispatch({
+      type: "SET_UPDATED_DESCRIPTIONS_INPUTS",
+      payload: items,
+    });
+  };
+
+  const handleOnSetUpdatedDatasheets = (items) => {
+    dispatch({
+      type: "SET_UPDATED_DATASHEETS_INPUTS",
+      payload: items,
+    });
+  };
+
+  const 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: warningIcon,
+        },
+      });
+      return;
+    }
+
+    dispatch({
+      type: "SET_MODAL",
+      payload: {
+        show: true,
+        title: "Eliminar imágenes",
+        message:
+          "¿Estás seguro de que deseas eliminar las imágenes seleccionadas?",
+        image: warningIcon,
+        buttons: [
+          {
+            text: "Cancelar",
+            buttonType: "general-white-button",
+            action: () =>
+              dispatch({ type: "SET_MODAL", payload: { show: false } }),
+          },
+          {
+            text: "Eliminar",
+            buttonType: "general-button-default",
+            action: () => {
+              dispatch({ type: "SET_MODAL", payload: { show: false } });
+              deleteImages(token);
+            },
+          },
+        ],
+      },
+    });
+  };
+
+  const handleOnApproveSingleService = async () => {
+    await sendSingleEvaluation("A");
   };
 
-  const sendToFacilitator = async (result) => {
-    if (!loading) setLoading(true);
+  const handleOnRejectSingleService = () => {
+    setShowRejectModal(true);
+  };
+
+  const sendSingleEvaluation = async (result) => {
+    if (state.saving) return;
+
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    const concept = getConceptByTab(state.active_tab);
+
+    const articleId = state.product.id_article;
+    const orderId = state.product.id_order ?? state.product.orderId;
+    const sectionStatusKey = `${concept}_status`;
+    const evalStatus = state.product[sectionStatusKey];
+    const retailerId = state.active_retailer?.id_retailer;
+
+    let data = { articleId, orderId, concept, evalStatus, retailerId };
+    let res;
+    let message;
+    let icon;
+
+    const activeTab = state.active_tab;
+
     try {
-      let concept = getConcept(activeTab);
-
-      const productTemp = { ...product };
-      const evalStatus = retailerStatus;
-      const articleId = product.article.id_article;
-      const orderId = product.orderId;
-
-      let data = {
-        articleId,
-        orderId,
-        concept,
-        evalStatus,
-        retailerId: activeRetailer.id,
-      };
-      let res;
-      let message;
+      //Esto solo se ejecutará cuando se aprueba o rechaza desde el modal superior derecho
       if (result) {
         data.result = result;
+        data.retailerId = retailerId;
+
         res = await axios.put(
           `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
           data,
@@ -1078,254 +739,297 @@ export const RetailerProductEdition = ({
             headers: {
               Authorization: token,
             },
-          }
+          },
         );
-        getServices();
-      } else {
+
+        const newStatuses = JSON.parse(res.data.body);
+        const serviceStatus = newStatuses.newServiceStatus[articleId][`${concept}Status`];
+        const articleStatus = newStatuses.newArticleStatus[articleId];
+
+        console.log({newStatuses});
+
+        // Actualizar el producto con los nuevos estados
+        const updatedStatusByRetailer = state.product.statusByRetailer.map(
+          (item) =>
+            item.retailer_id === retailerId && item.service === concept
+              ? { ...item, status: serviceStatus }
+              : item,
+        );
+
+        const updatedProduct = {
+          ...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: successIcon,
+          },
+        });
+      } else { //Caso del botón "Enviar evaluación"
+
+        //Se construye el mensaje y se actualiza el estatus
+
         const specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
 
         if (specialistDone) {
           message = `${activeTab} enviada a facilitador`;
-          getSectionIcon();
+          icon =
+            activeTab === "Descripción"
+              ? descriptionSent
+              : activeTab === "Ficha técnica"
+              ? attributesSent
+              : imagesSent;
         } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
           message = "Evaluación enviada";
-          getSectionIcon();
+          icon = successIcon;
         }
+
         res = await axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
           headers: {
             Authorization: token,
           },
         });
       }
+
       if (res.data.statusCode === 200) {
-        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse(
-          res.data.body
-        );
-        const messageToChat = createMessage(
-          product.retailers,
-          activeRetailer.id,
-          evalStatus,
-          newStatus,
-          activeTab
-        );
 
-        const data = {
-          paramsBody: {
-            id: product.article.id_article,
-            version: version,
-            items: [{ type: "status", value: messageToChat }],
-            retailerId: activeRetailer.id,
-            status: product.status,
-          },
-          paramsHeader: { Authorization: token },
+        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse( res.data.body );
+
+        const articleStatus = newArticleStatus[articleId];
+
+        console.log({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);
+
+        const updatedProduct = {
+          ...state.product,
+          [`${concept}_status`]: newStatus,
+          // actualizar el status es statusByRetailer
+          statusByRetailer: state.product.statusByRetailer.map((item) => {
+            if (item.retailer_id === retailerId && item.service === concept) {
+              return { ...item, status: newStatus };
+            }
+            return item;
+          }),
+          // version_status: articleStatus,
+          // status: articleStatus,
+          // article_status: articleStatus
         };
-        await sendMessage(data);
-        if (newOrderStatus) productTemp.status = newArticleStatus[articleId];
-        productTemp[`${concept}_status`] = newStatus;
-        await loadData();
-        if (message) setMessage(message);
-        sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-        setProduct(productTemp);
-      }
-    } catch (error) {
-      setLoading(false);
-      console.log(error);
-    }
-  };
 
-  const userAssigned = (tab, rol) => {
-    let concept = getConcept(activeTab);
+        //Actualizamos el services_data en el servicio específico del retailer actual
 
-    const allowedRoles = [1, 4, 5, 6, 7, 8];
-    const validUser = allowedRoles.includes(user?.id_role);
+        const updatedServicesData = state.services_data?.map(service => ({
+          ...service,
+          status: service?.id_retailer === retailerId && service?.service === concept ? newStatus : service?.status
+        }));
 
-    if (!rol) {
-      switch (user.id_role) {
-        case 4:
-        case 5:
-          rol = "facilitator";
-          break;
-        case 7:
-        case 8:
-          rol = "especialist";
-          break;
+        const sessionProduct = sessionStorage.getItem("productSelected");
+
+        if (sessionProduct) {
+          const productInSession = JSON.parse(sessionProduct);
+          const updatedProductInSession = {
+            ...productInSession,
+            [`${concept}_status`]: newStatus,
+            statusByRetailer: state.product.statusByRetailer.map((item) => {
+              if (item.retailer_id === retailerId && item.service === concept) {
+                return { ...item, status: newStatus };
+              }
+              return item;
+            }),
+          };
+          sessionStorage.setItem(
+            "productSelected",
+            JSON.stringify(updatedProductInSession),
+          );
+        }
+
+        if (message) {
+          dispatch({
+            type: "SET_MODAL",
+            payload: {
+              show: true,
+              title: "",
+              message: message,
+              image: successIcon,
+            },
+          });
+        }
+
+        dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
+        dispatch({ type: "SET_SERVICES_DATA", payload: updatedServicesData });
       }
+    } catch (error) {
+      console.error("Error sending evaluation:", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al procesar la evaluación",
+          image: errorIcon,
+        },
+      });
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
     }
-
-    return (
-      user.id_role === 1 ||
-      (product.article[`id_${concept}_${rol}`] === user.id_user && validUser)
-    );
   };
 
-  const auditorAssigned = () => {
-    return product?.article[`id_auditor`] === user.id_user;
+  const handleOnApproveAllServices = async () => {
+    await sendBulkEvaluation("A");
   };
 
-  const createComment = async (e, body, tab) => {
-    let concept = "";
-    switch (activeTab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-    const data = {
-      articleId: product?.article?.id_article,
-      orderId: product?.orderId,
-      message: body?.replace(/<.*?\/?>/gm, ""),
-      concept: concept,
-      version: version,
-    };
-    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
-      headers: {
-        Authorization: token,
-      },
-    });
-    await getComments(tab);
-    setMessage("");
-    setComponentsArray([]);
+  const handleOnRejectAllServices = () => {
+    setRejectAll(true);
+    setShowRejectModal(true);
   };
 
-  const getRequired = (services) => {
+  const sendBulkEvaluation = async (result) => {
+    dispatch({ type: "SET_SAVING", payload: true });
     try {
-      const objetcTemp = {};
-      const datasheetServicesArray = Object.values(services[0]);
-      const allDatasheetInputs = datasheetServicesArray.pop();
-      const descriptionsServicesArray = services[1];
-
-      let dsInputsRequired = [];
-
-      let desInputsRequired = 0;
-      datasheetServicesArray?.forEach((datasheet) => {
-        const [requested] = servicesData?.filter(
-          (srv) =>
-            srv.id_retailer === datasheet.retailer.id &&
-            srv.service === getConcept(activeTab)
-        );
+      const evaluationArray = [];
 
-        requested &&
-          datasheet?.data &&
-          Object.values(datasheet?.data).forEach((dataGroup) => {
-            dsInputsRequired.push(
-              ...dataGroup.inputs.filter((input) => {
-                return (
-                  allDatasheetInputs[input].required &&
-                  allDatasheetInputs[input].id_retailer === activeRetailer.id &&
-                  (allDatasheetInputs[input].value === undefined ||
-                    !allDatasheetInputs[input].value)
-                );
-              })
-            );
-          });
-      });
+      const conceptArray = getConceptsByRole(user.id_role);
 
-      objetcTemp["Ficha técnica"] = dsInputsRequired.length;
+      state.services_data?.forEach((ret, idx) => {
+        const { service: retailer_service, id_retailer, status: status_retailer_service } = ret;
 
-      const regex = /(<\/?p>)|(<\/?strong>)|(<br>)/gm;
-      descriptionsServicesArray.forEach((description) => {
-        if (description.id != activeRetailer.id) return;
+        const lastStatusLevel = status_retailer_service.replace(/.*\//, "");
 
-        const [requested] = servicesData.filter(
-          (srv) =>
-            srv.id_retailer === description.id &&
-            srv.service === getConcept(activeTab)
-        );
+        if (conceptArray.includes(retailer_service) && statusArray?.includes(lastStatusLevel)) {
+          const data = {
+            articleId: state.product.id_article,
+            orderId: state.product.id_order,
+            concept: retailer_service,
+            result,
+            evalStatus: status_retailer_service,
+            retailerId: id_retailer,
+          };
 
-        if (requested) {
-          description.inputs.forEach((input) => {
-            if (
-              input.required &&
-              (!input.value || input.value?.replace(regex, "") === "")
-            ) {
-              desInputsRequired++;
-            }
-          });
+          evaluationArray.push(
+            axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
+              headers: {
+                Authorization: token,
+              },
+            }),
+          );
         }
       });
 
-      objetcTemp["Descripción"] = desInputsRequired;
+      await Promise.all(evaluationArray);
 
-      const retailersRequested = [];
+      const status = `${result}A`;
 
-      services[2]?.retailerMandatories?.forEach((retMan) =>
-        retMan.forEach((rm) => retailersRequested.push(rm))
+      // Actualizar el statusByRetailer para todos los retailers y conceptos
+      const updatedStatusByRetailer = state.product.statusByRetailer.map(
+        (item) =>
+          conceptArray.includes(item.service) ? { ...item, status } : item,
       );
 
-      const requiredImages = services[2]?.inputs?.filter(
-        (e) =>
-          e.required === 1 &&
-          retailersRequested.filter(
-            (ret) =>
-              ret.id_image === e.id &&
-              servicesData.filter((srv) => srv.id_retailer === ret.id_retailer)
-                .length > 0
-          ).length > 0
-      );
+      // Actualizar el producto con los nuevos estados
+      const updatedProduct = {
+        ...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,
+      };
 
-      let requiredCounter = 0;
-      requiredImages?.forEach((req) => {
-        return (
-          services[2].values.filter((img) => img.image_id === req.id).length ===
-            0 && requiredCounter++
-        );
+      dispatch({
+        type: "SET_PRODUCT",
+        payload: updatedProduct,
       });
-      objetcTemp["Imágenes"] = requiredCounter;
-      setRequiredNull(objetcTemp);
-    } catch (error) {
-      console.log(error);
-    }
-  };
 
-  useEffect(() => {
-    setComment(comments[activeTab]);
-  }, [activeTab]);
-
-  const commentRevised = async () => {
-    const data = {
-      commentId: comment.id,
-    };
-    await axios.put(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
-      headers: {
-        Authorization: sessionStorage.getItem("jwt"),
-      },
-    });
-    setCrossComment(false);
-    await getComments();
-  };
+      const updatedServicesData = state.services_data.map(service => conceptArray.includes(service.service) ? { ...service, status: status } : service);
 
-  const setAssignation = async (assignationType, assignationId) => {
-    let concept = "";
-    switch (activeTab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
+      dispatch({
+        type: "SET_SERVICES_DATA",
+        payload: updatedServicesData,
+      });
 
-      default:
-        concept = "description";
-        break;
+      // 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: successIcon,
+        },
+      });
+    } catch (error) {
+      console.error("Error in bulk evaluation:", error);
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
     }
-    const productTemp = product;
-    productTemp.article[`id_${concept}_${assignationType}`] = assignationId;
+  };
+
+  const handleOnChangeAssignations = async (assignationType, assignationId) => {
+    const concept = getConceptByTab(state.active_tab);
     const data = {
       articleList: [
         {
-          orderId: product.orderId,
-          articleId: product?.article?.id_article,
+          orderId: state.product.id_order,
+          articleId: state.product.id_article,
         },
       ],
       concept: concept,
       userId: assignationId,
     };
+
     await axios({
       method: "post",
       url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
@@ -1334,646 +1038,803 @@ export const RetailerProductEdition = ({
         Authorization: token,
       },
     });
-    loadAssignations(productTemp);
-    sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-  };
 
-  const downloadImages = () => {
-    selectedImages.length > 0
-      ? selectedImages.forEach((e) => {
-          if (e.id) {
-            saveAs(
-              `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
-              `${product.article.upc}_${e.name}.${e.ext}`
-            );
-          }
-        })
-      : images?.values?.forEach((e) => {
-          if (e.id) {
-            saveAs(
-              `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
-              `${product.article.upc}_${e.name}.${e.ext}`
-            );
-          }
-        });
+    const updatedProduct = {
+      ...state.product,
+      [`id_${concept}_${assignationType}`]: assignationId,
+    };
+
+    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
   };
 
-  const deleteImages = async () => {
-    setLoading(true);
-    const { values } = images;
-    const imgsInBack = [];
+  const handleOnSetAssignation = () => {
+    console.log("handleOnSetAssignation - pendiente de implementar");
+  };
 
-    selectedImages.forEach((selectedImg) => {
-      if (selectedImg.id) imgsInBack.push(selectedImg);
-    });
+  const handleOnSetImages = () => {
+    console.log("handleOnSetImages - pendiente de implementar");
+  };
 
-    const imgsLeft = values.filter(
-      (value) => selectedImages.indexOf(value) === -1
-    );
+  const handleOnSetCheckAll = (isChecked) => {
+    dispatch({ type: "TOGGLE_CHECK_ALL_IMAGES", payload: isChecked });
+  };
 
-    if (imgsInBack.length > 0) {
-      const data = {
-        articleId: product.article.id_article,
-        deleteImages: imgsInBack,
-        orderId: product.orderId,
-      };
-      try {
-        await axios.put(
-          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
-          data,
-          {
-            headers: { Authorization: token },
-          }
-        );
-      } catch (err) {
-        console.log(err);
-      }
+  const 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");
+  };
+  const handleOnSubmitComment = async (e) => {
+    e.preventDefault();
+    const commentText = document.querySelector(
+      "#commentary-box .ql-container .ql-editor > p",
+    ).innerHTML;
+    try {
+      await createComment(commentText, token);
+
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "",
+          message: "Comentario guardado con éxito",
+          image: successIcon,
+        },
+      });
+    } catch (error) {
+      console.error("Error saving comment:", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al guardar el comentario",
+          image: errorIcon,
+        },
+      });
     }
+  };
 
-    setImages({
-      action: "deleteImage",
-      selectedImages,
-    });
-
-    getRequired([
-      services[0],
-      services[1],
-      { ...services[2], values: imgsLeft },
-    ]);
+  const handleOnSendEvaluationToFacilitator = () => {
+    sendSingleEvaluation();
+  };
 
-    setLoading(false);
+  const isEvaluationFinished = (id_rol, tab, statusArray) => {
+    const servicesData = state.services_data;
+    const activeRetailer = state.active_retailer;
+    const product = state.product;
+    const concept = getConceptByTab(tab);
 
-    setMessage("");
-    setComponentsArray([]);
-  };
+    const servicesByTab = servicesData?.filter(
+      (serv) => serv.service === concept,
+    );
 
-  const askToDeleteImages = () => {
-    if (selectedImages.length > 0) {
-      setMessage("¿Está seguro de eliminar las imágenes seleccionadas?");
-      setComponentsArray([
-        <ScreenHeader
-          key={"1"}
-          text={"¿Está seguro de eliminar las imágenes seleccionadas?"}
-          headerType="retailer-name-header"
-          color={"white"}
-        />,
-        <Button
-          key={"2"}
-          buttonType="general-white-button"
-          label={"Cancelar"}
-          onClick={() => setMessage("")}
-        />,
-        <Button
-          key={"3"}
-          buttonType="general-button-default"
-          label={"Aceptar"}
-          onClick={() => {
-            setMessage("");
-            deleteImages();
-          }}
-        />,
-      ]);
-    }
-  };
+    const statusBySelectedRetailerService = servicesByTab
+      ?.find((serv) => serv.id_retailer === activeRetailer?.id_retailer)
+      ?.status?.replace(/.*\//, "");
 
-  const getRetailerStatus = (servicesData, tab) => {
-    const arr = servicesData?.slice();
-    let concept = getConcept(tab);
+    const currentProducStatus = product?.[`${concept}_status`]?.replace(
+      /.*\//,
+      "",
+    );
 
-    let retailerService = {};
-    [retailerService] = arr?.filter(
-      (service) =>
-        service.id_retailer === activeRetailer?.id &&
-        service.service === concept
+    const unvalidated = ["IE", "CA"].includes(currentProducStatus);
+    const auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(
+      currentProducStatus,
     );
-    return retailerService ? retailerService.status : "NS";
-  };
 
-  useEffect(() => {
-    let status = getRetailerStatus(servicesData, activeTab);
-    setRetailerStatus(status);
-  }, [activeTab, servicesData, activeRetailer]);
+    let result;
+    switch (id_rol) {
+      case 7:
+      case 8:
 
-  useEffect(() => {
-    services.length > 0 && getRequired(services);
-  }, [services, servicesData, activeTab]);
+        const canSendEvaluation = statusArray.includes(statusBySelectedRetailerService);
 
-  useEffect(() => {
-    setSaving(loading);
-  }, [loading]);
+        // const conditionTwo = statusArray.includes(product?.status);
 
-  const validateAll = async (result) => {
-    try {
-      setLoading(true);
-      const evaluationArray = [];
-      let conceptArray = [];
-      switch (user.id_role) {
-        case 4:
-          conceptArray = ["description", "datasheet"];
-          break;
-        case 5:
-          conceptArray = ["images"];
-          break;
-
-        default:
-          conceptArray = ["description", "datasheet", "images"];
-          break;
-      }
+        // const conditionThree =
+        //   servicesByTab.filter((service) =>
+        //     statusArray.includes(service.status?.replace(/.*\//, "")),
+        //   ).length === servicesByTab.length;
 
-      const messages = [];
-
-      servicesData?.forEach((ret) => {
-        if (conceptArray.includes(ret.service)) {
-          let data = {
-            articleId: product.article.id_article,
-            orderId: product.id_order ?? product.orderId,
-            concept: ret.service,
-            result: result,
-            evalStatus: ret.status,
-            retailerId: ret.id_retailer,
-          };
-          evaluationArray.push(
-            axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
-              headers: {
-                Authorization: token,
-              },
-            })
-          );
-        }
-      });
-      await Promise.all(evaluationArray);
+        // return (canSendEvaluation && conditionTwo) || conditionThree;
 
-      const productTemp = product;
-      productTemp.status = `${result}A`;
-      productTemp.datasheet_status =
-        productTemp.datasheet_status === "NS" ? "NS" : `${result}A`;
-      productTemp.description_status =
-        productTemp.description_status === "NS" ? "NS" : `${result}A`;
-      productTemp.images_status =
-        productTemp.images_status === "NS" ? "NS" : `${result}A`;
-      sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-      setProduct(productTemp);
-      const messagesResponse = await Promise.all(messages);
-
-      await loadData();
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
+        return canSendEvaluation;
+
+      case 4:
+      case 5:
+        const filteredSrv45 = servicesByTab?.filter((serv) =>
+          statusArray.includes(serv?.status),
+        );
+        const condition45 =
+          unvalidated &&
+          ["CA", "IE"].includes(product?.status) &&
+          filteredSrv45?.length === servicesByTab?.length;
+        return condition45;
+      case 6:
+        const statusInArray = statusArray.includes(product?.status);
+        const allSrvValid = srv?.every((serv) =>
+          ["RA", "AA", "AP", "ACA"].includes(serv?.status),
+        );
+        const condition6 = statusInArray && allSrvValid && auditorUnvalidated;
+        return condition6;
+      default:
+        console.log("Default case - returning false");
+        return false;
     }
   };
 
-  const getObservation = async () => {
-    const response = await axios.get(
-      `${process.env.REACT_APP_READ_OBSERVATION}?articleId=${product.article.id_article}&orderId=${product?.orderId}`,
-      {
-        headers: {
-          Authorization: sessionStorage.getItem("jwt"),
-        },
-      }
+  const handleOnChangeProductVersion = (version) => {
+    console.log('se cambia la version')
+    dispatch({
+      type: "SET_PRODUCT_VERSION",
+      payload: version,
+    });
+
+    loadData(true, version);
+  };
+
+  const ProductEditionSkeleton = () => {
+    return (
+      <Container headerTop={0}>
+        <Box
+          px={1.5}
+          py={1}
+          pb={0}
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Skeleton variant="text" width={300} height={40} />
+          <Stack direction="row" spacing={2}>
+            <Skeleton variant="circular" width={32} height={32} />
+          </Stack>
+        </Box>
+
+        <div
+          className="data-container"
+          style={{ display: "flex", gap: "8px", padding: "0 12px 12px" }}
+        >
+          <div
+            className="image-data-panel"
+            style={{
+              flex: "0 0 320px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "20px",
+            }}
+          >
+            <Skeleton variant="rounded" width="100%" height={400} />
+
+            <Stack direction="row" spacing={2} justifyContent="center">
+              {[1, 2, 3, 4].map((item) => (
+                <Skeleton key={item} variant="rounded" width={60} height={80} />
+              ))}
+            </Stack>
+
+            <Box mt={2}>
+              {[1, 2, 3, 4].map((item) => (
+                <Box
+                  key={item}
+                  display="flex"
+                  justifyContent="space-between"
+                  py={1}
+                  borderBottom="1px solid #f0f0f0"
+                >
+                  <Skeleton variant="text" width="40%" />
+                  <Skeleton variant="text" width="20%" />
+                </Box>
+              ))}
+            </Box>
+          </div>
+
+          <div
+            className="product-information"
+            style={{
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              gap: "14px",
+            }}
+          >
+            <Box>
+              <Skeleton variant="text" width="80%" height={50} />
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Skeleton variant="rounded" width={180} height={24} />
+                <Skeleton variant="rounded" width={300} height={24} />
+              </Stack>
+            </Box>
+
+            <Box display="flex" gap={4} pb={1}>
+              <Skeleton variant="text" width={140} height={45} />
+              <Skeleton variant="text" width={140} height={45} />
+              <Skeleton variant="text" width={140} height={45} />
+            </Box>
+
+            <Box display="flex" flexDirection="column" gap={4}>
+              {[1, 2, 3].map((item) => (
+                <Box key={item}>
+                  <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    mb={1}
+                  >
+                    <Skeleton variant="text" width="30%" height={24} />
+                    <Skeleton
+                      variant="rounded"
+                      width={175}
+                      height={25}
+                      sx={{ borderRadius: "7.5px" }}
+                    />
+                  </Box>
+                  <Skeleton variant="rounded" width="100%" height={70} />
+                  <Box display="flex" justifyContent="flex-end" mt={0.5}>
+                    <Skeleton variant="text" width={60} />
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+
+            <Box mt="auto" pt={4}>
+              <Skeleton variant="rounded" width="100%" height={120} />
+              <Box display="flex" justifyContent="flex-end" gap={2} mt={2}>
+                <Skeleton
+                  variant="rounded"
+                  width={180}
+                  height={45}
+                  sx={{ borderRadius: "24px" }}
+                />
+                <Skeleton
+                  variant="rounded"
+                  width={180}
+                  height={45}
+                  sx={{ borderRadius: "24px" }}
+                />
+              </Box>
+            </Box>
+          </div>
+        </div>
+      </Container> 
     );
-    const parseData = JSON.parse(response.data.body).data[0];
-    setObservation(parseData.observations);
   };
+
   useEffect(() => {
-    getObservation();
-  }, []);
+    console.log({stateProduct: state.product})
+  }, [state.product]);
+
+  if (state.loading || !state.services || !state.product)
+    return (
+      <>
+        <ProductEditionSkeleton />
+      </>
+    );
+
   return (
-    <Container headerTop={headerTop}>
-      <HeaderTop
-        setHeaderTop={setHeaderTop}
-        auditableVersion={auditableVersion}
-        setCompare={setCompare}
-        isAuditor={[1, 6].includes(user.id_role)}
-        withChat={location?.state?.withChat}
-        chatType={location?.state?.chatType}
-        productSelected={product}
-        token={token}
-        activeRetailer={activeRetailer}
-      />
-      <div className="data-container">
-        <div className="image-data-panel">
-          <ImagePreviewer
-            activeImage={images?.values ? images?.values[activeImage] : {}}
-            imagesArray={images}
-            setActiveImage={setActiveImage}
-            setShowModal={setShowModal}
-          />
-          <ImageDataTable
-            lists={images}
-            activeImage={images?.values ? images?.values[activeImage] : {}}
-            retailerSelected={activeRetailer?.id}
-            setImages={setImages}
-            assignationsImages={assig["Imágenes"]}
-            imagesStatus={product?.images_status}
-            setAssignation={setAssignation}
-            isRetailer={isRetailer}
-            onClickSave={() =>
-              product?.services?.images === 1 && updateImages()
+    <AiProductEditionProvider
+      isCreatorsEdition={true}
+      user={user}
+      token={token}
+      state={state}
+    >
+      <Container headerTop={headerTop}>
+        {showRejectModal && (
+          <Modal
+            title={
+              rejectAll
+                ? "Agregar mensaje para rechazar todo"
+                : "Agregar mensaje de rechazo"
             }
-            showSaveButton={auditorAssigned() || userAssigned()}
-            setShowVersionSelector={setShowVersionSelector}
-            version={version}
-            shotThd={shotThd}
-          />
-        </div>
-        <div className="product-information">
-          <FullProductNameHeader
-            headerData={product}
-            productObservation={observation}
-            percent={activePercentage}
-            activeRetailer={activeRetailer}
-            servicesData={servicesData}
-            setActiveRetailer={setActiveRetailer}
-            sendToFacilitator={sendToFacilitator}
-            approve={() => {
-              sendToFacilitator("A");
-            }}
-            reject={() => {
-              setShowRejectModal(true);
-            }}
-            showApproveRejectAll={
-              approveRejectAllButtons() && (auditorAssigned() || userAssigned())
+            show={showRejectModal}
+            customComponent={
+              <TagAndInput
+                inputType={"textarea"}
+                inputId={"modal-message-box"}
+                index={0}
+                color={"white"}
+              />
             }
-            showValidationButtons={
-              approveRejectButtons() && (auditorAssigned() || userAssigned())
+            buttons={[
+              <ButtonV2
+                key={"btn-Cancelar"}
+                type={"white"}
+                label={"Cancelar"}
+                size={12}
+                onClick={() => {
+                  setShowRejectModal(false);
+                }}
+              />,
+              <ButtonV2
+                key={"btn-Aceptar"}
+                type={"pink"}
+                label={"Aceptar"}
+                size={12}
+                onClick={async () => {
+                  const elements = document.querySelectorAll(
+                    "#modal-message-box .ql-container .ql-editor > p",
+                  );
+
+                  if (!elements || elements.length === 0) {
+                    console.error("Elemento no encontrado");
+                    return;
+                  }
+
+                  const isMessageEmpty = Array.from(elements).every((el) => {
+                    const body = el.innerHTML;
+                    return (
+                      !body || body.replace(/<.*?\/?>/gm, "").trim() === ""
+                    );
+                  });
+
+                  if (isMessageEmpty) {
+                    const container = document.querySelector(
+                      ".container-customComponent",
+                    );
+                    const existingAlert =
+                      container.querySelector(".alert-error");
+
+                    if (!existingAlert) {
+                      const alert = document.createElement("div");
+                      alert.className = "alert-error";
+                      alert.style.cssText = `
+                                color: #d32f2f;
+                                background-color: #ffebee;
+                                border: 1px solid #ef5350;
+                                border-radius: 4px;
+                                padding: 12px 16px;
+                                margin-top: 10px;
+                                font-size: 14px;
+                                display: flex;
+                                align-items: center;
+                                gap: 8px;
+                                font-family: 'Roboto', sans-serif;
+                                text-align: center;
+                              `;
+                      alert.innerHTML = `<span>El mensaje no puede estar vacío.</span>`;
+                      container.appendChild(alert);
+                    }
+                    return;
+                  }
+
+                  const fullMessage = Array.from(elements)
+                    .map((element) => element.innerHTML)
+                    .join("")
+                    .replace(/<br\s*\/?>/gi, "\n");
+
+                  await createComment(fullMessage, token);
+
+                  rejectAll
+                    ? sendBulkEvaluation("R")
+                    : sendSingleEvaluation("R");
+                  setShowRejectModal(false);
+                }}
+              />,
+            ]}
+          />
+        )}
+        {state.modal.show && (
+          <GenericModal
+            componentsArray={[
+              state.modal.image && (
+                <img key="1" src={state.modal.image} alt="modal icon" />
+              ),
+              state.modal.title && (
+                <ScreenHeader
+                  key="2"
+                  headerType={"retailer-name-header"}
+                  text={state.modal.title}
+                  color={"white"}
+                />
+              ),
+              state.modal.message && (
+                <ScreenHeader
+                  key="3"
+                  headerType={"retailer-name-header"}
+                  text={state.modal.message}
+                  color={"white"}
+                />
+              ),
+              state.modal.buttons && (
+                <div key="4" style={{ marginTop: "16px" }}>
+                  {state.modal.buttons.map((button, index) => (
+                    <Button
+                      key={index}
+                      buttonType={button.buttonType}
+                      label={button.text}
+                      onClick={button.action}
+                    />
+                  ))}
+                </div>
+              ),
+            ].filter(Boolean)}
+            onClick={() =>
+              dispatch({
+                type: "SET_MODAL",
+                payload: { show: false, title: "", message: "", image: null },
+              })
             }
-            approveAll={() => validateAll("A")}
-            rejectAll={() => {
-              setShowRejectModal(true);
-              setValRejAll(true);
-            }}
-            isObservationVisible={isObservationVisible}
-            toggleObservation={toggleObservation}
-            // handleClickOutside={handleClickOutside}
-            hideObservation={hideObservation}
           />
-          <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}
+        )}
+        {showModal && (
+          <ProductImageModal
+            images={state.images_values}
+            setShowModal={setShowModal}
+            approveRejectButtons={canShowSingleEvaluationButtons()}
+            sendToFacilitator={handleOnSendEvaluationToFacilitator}
+          />
+        )}
+        {showVersionSelector && (
+          <VersionSelector
+            modalId={"version-selector"}
+            articleId={state.product.id_article}
+            setVersion={handleOnChangeProductVersion}
+            companyName={state.product.company}
+            currentVersion={state.product.version}
             setShowVersionSelector={setShowVersionSelector}
-            onClickSave={() => {
-              switch (activeTab) {
-                case "Descripción":
-                  !saving &&
-                    product?.description_status !== "NS" &&
-                    saveDescriptions();
-                  break;
-                case "Ficha técnica":
-                  !saving &&
-                    product?.datasheet_status !== "NS" &&
-                    saveDatasheets();
-                  break;
-                case "Imágenes":
-                  !saving && product?.images_status !== "NS" && updateImages();
-                  break;
-
-                default:
-                  break;
-              }
-            }}
-            canAssign={![7, 8].includes(user.id_role)}
+            jwt={token}
           />
-          <div
-            className={
-              "services-information-container " +
-              (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
-            }
-          >
-            {loading ? (
-              <Loading />
-            ) : (
-              <>
-                {!imageLayout &&
-                  activeTab === "Imágenes" &&
-                  product?.services?.images === 1 && (
-                    <GalleryHeader
-                      setSelectedImages={setSelectedImages}
-                      checkAll={checkAll}
-                      setCheckAll={setCheckAll}
-                      shotThd={shotThd}
-                    />
-                  )}
+        )}
+        <HeaderTop
+          setHeaderTop={setHeaderTop}
+          auditableVersion={auditableVersion}
+          setCompare={setCompare}
+          isAuditor={[1, 6].includes(user.id_role)}
+          withChat={location?.state?.withChat}
+          chatType={location?.state?.chatType}
+          productSelected={state.product}
+          token={token}
+          activeRetailer={{
+            id: state.active_retailer?.id_retailer,
+            name: state.active_retailer?.retailer,
+          }}
+        />
+        <div className="data-container">
+          <div className="image-data-panel">
+            <ImagePreviewer
+              activeImage={
+                state.images_values.values[state.current_image] ?? {}
+              }
+              imagesArray={state.images_values || []}
+              setActiveImage={handleOnChangeCurrentImage}
+              setShowModal={handleOnShowModalGallery}
+            />
+            <ImageDataTable
+              // states
+              lists={state.images_values || []}
+              activeImage={
+                state.images_values?.values
+                  ? state.images_values?.values[state.current_image]
+                  : {}
+              }
+              assignationsImages={state.collaborator_assignations["Imágenes"]}
+              imagesStatus={state.product?.images_status || "-"}
+              retailerSelected={state.active_retailer?.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()}
+            />
+          </div>
 
-                {activeTab === "Ficha técnica" &&
-                  (product?.datasheet_status !== "NS" ? (
-                    datasheets[0]?.data?.map((dataGroup, index) => (
+          <div className="product-information">
+            <FullProductNameHeader
+              // states
+              headerData={state.product}
+              productObservation={observation}
+              percent={state.active_percentage.percentagesGeneral.required}
+              activeRetailer={{
+                id: state.active_retailer?.id_retailer,
+                name: state.active_retailer?.retailer,
+                image: state.active_retailer?.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())
+              }
+            />
+            <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)}
+            />
+            <div
+              className={
+                "services-information-container " +
+                (imageLayout && state.active_tab === "Imágenes"
+                  ? "image-services"
+                  : "")
+              }
+              id="services-information-container"
+            >
+              {state.saving ? (
+                <Loading />
+              ) : (
+                <>
+                  {state.active_tab === "Descripción" &&
+                    (state.product?.description_status !== "NS" ? (
                       <InputGroup
-                        key={index + "-" + activeRetailer.name}
-                        articleId={product.article.id_article}
-                        version={version}
-                        activeSection={activeTab}
-                        inputGroup={dataGroup}
-                        dataInputs={datasheets[1]}
-                        auditInputs={auditDatasheets[1]}
-                        updatedDatasheets={updatedDatasheets}
-                        setUpdatedDatasheets={setUpdatedDatasheets}
+                        activeSection={state.active_tab}
+                        inputGroup={state.descriptions_inputs[0]}
+                        updatedDescriptions={state.updated_descriptions_inputs}
+                        articleId={state.product?.id_article}
+                        version={state.product.version}
+                        auditInputGroup={auditDescriptions[0]}
+                        setUpdatedDescriptions={handleOnSetUpdatedDescriptions}
+                        dinamicHeight={true}
                         compare={compare}
                       />
-                    ))
-                  ) : (
-                    <ScreenHeader
-                      text={"No cuentas con este servicio"}
-                      headerType={"input-name-header"}
-                    />
-                  ))}
-                {activeTab === "Descripción" &&
-                  (product?.description_status !== "NS" ? (
-                    <InputGroup
-                      activeSection={activeTab}
-                      inputGroup={descriptions[0]}
-                      auditInputGroup={auditDescriptions[0]}
-                      updatedDescriptions={updatedDescriptions}
-                      setUpdatedDescriptions={setUpdatedDescriptions}
-                      articleId={product?.article?.id_article}
-                      version={version}
-                      dinamicHeight={true}
-                      compare={compare}
-                    />
-                  ) : (
-                    <ScreenHeader
-                      text={"No cuentas con este servicio"}
-                      headerType={"input-name-header"}
-                    />
-                  ))}
-
-                {activeTab === "Imágenes" &&
-                  (product?.images_status !== "NS" ? (
-                    <section className="container">
-                      <div {...getRootProps({ className: "dropzone" })}>
-                        <input {...getInputProps()} />
-                        <aside>{thumbs()}</aside>
+                    ) : (
+                      <ScreenHeader
+                        text={"No cuentas con este servicio"}
+                        headerType={"input-name-header"}
+                      />
+                    ))}
+                  {state.active_tab === "Ficha técnica" &&
+                    (state.product?.datasheet_status !== "NS" ? (
+                      <>
+                        {state.datasheets_inputs[0]?.data?.map(
+                          (dataGroup, index) => (
+                            <InputGroup
+                              key={index + "-" + state.active_retailer.retailer}
+                              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}
+                            />
+                          ),
+                        )}
+                      </>
+                    ) : (
+                      <ScreenHeader
+                        text={"No cuentas con este servicio"}
+                        headerType={"input-name-header"}
+                      />
+                    ))}
+                  {state.active_tab === "Imágenes" &&
+                    (state.product?.images_status !== "NS" ? (
+                      <>
+                        {!imageLayout && (
+                          <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?
+                          />
+                        )}
+                        <section
+                          className="container"
+                          style={{ position: "relative" }}
+                        >
+                          <div
+                            {...getRootProps({
+                              className: `dropzone ${
+                                isDragActive ? "drag-active" : ""
+                              }`,
+                            })}
+                          >
+                            <input {...getInputProps()} />
+                            {isDragActive && (
+                              <div className="drag-overlay">
+                                <p>Suelta las imágenes aquí</p>
+                              </div>
+                            )}
+                            <aside>{thumbs()}</aside>
+                          </div>
+                          {state.images_values?.values.length === 0 && (
+                            <div
+                              style={{
+                                position: "absolute",
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%)",
+                                textAlign: "center",
+                                padding: "40px",
+                                width: "80%",
+                                maxWidth: "500px",
+                                fontFamily: "Arial, sans-serif",
+                              }}
+                            >
+                              <p
+                                style={{
+                                  fontSize: "18px",
+                                  color: "#666",
+                                  marginBottom: "16px",
+                                }}
+                              >
+                                Este producto no tiene imágenes
+                              </p>
+                              {isAuditorAssigned() ||
+                              isUserAssignedToService() ? (
+                                <p
+                                  style={{
+                                    fontSize: "14px",
+                                    color: "#999",
+                                    marginBottom: "20px",
+                                  }}
+                                >
+                                  Arrastra las imágenes aquí o{" "}
+                                  <span
+                                    onClick={open}
+                                    style={{
+                                      color: "#007bff",
+                                      cursor: "pointer",
+                                      textDecoration: "underline",
+                                    }}
+                                  >
+                                    haz clic para abrir el explorador de
+                                    archivos
+                                  </span>
+                                </p>
+                              ) : null}
+                            </div>
+                          )}
+                        </section>
+                      </>
+                    ) : (
+                      <ScreenHeader
+                        text={"No cuentas con este servicio"}
+                        headerType={"input-name-header"}
+                      />
+                    ))}
+                </>
+              )}
+            </div>
+            {(isUserAssignedToService(state.active_tab) ||
+              isAuditorAssigned()) &&
+              state.product[`${getConceptByTab(state.active_tab)}_status`] !==
+                "NS" && (
+                <div className="commentary-box">
+                  {!state.comment ? (
+                    <div className="commentary">
+                      <TagAndInput
+                        label={"Caja de Comentario"}
+                        inputType={"textarea"}
+                        inputCols={80}
+                        inputRows={4}
+                        inputId={"commentary-box"}
+                        index={0}
+                      />
+                      <div className="buttons-box">
+                        <Button
+                          buttonType={"general-transparent-button"}
+                          label={"Enviar comentario"}
+                          onClick={handleOnSubmitComment}
+                        />
                       </div>
-                    </section>
+                    </div>
                   ) : (
-                    <ScreenHeader
-                      text={"No cuentas con este servicio"}
-                      headerType={"input-name-header"}
-                    />
-                  ))}
-              </>
-            )}
-          </div>
-          {/* {(userAssigned(activeTab) || auditorAssigned()) &&
-            product[`${getConcept(activeTab)}_status`] !== "NS" && (
-              <div className="commentary-box">
-                {[7, 8].includes(user.id_role) && (
-                  <Button
-                    buttonType={
-                      evaluationFinished(
-                        user.id_role,
-                        activeTab,
-                        statusArray
-                      ) && requiredNull[activeTab] === 0
-                        ? "general-green-button"
-                        : "general-button-disabled"
-                    }
-                    label={"Enviar evaluación"}
-                    onClick={() => sendToFacilitator()}
-                  />
-                )}
-              </div>
-            )} */}
-
-          {(userAssigned(activeTab) || auditorAssigned()) &&
-            product[`${getConcept(activeTab)}_status`] !== "NS" && (
-              <div className="commentary-box">
-                {!comment ? (
-                  <div className="commentary">
-                    <TagAndInput
-                      label={"Caja de Comentario"}
-                      inputType={"textarea"}
-                      inputCols={80}
-                      inputRows={4}
-                      inputId={"commentary-box"}
-                      index={0}
-                    />
-                    <div className="buttons-box">
+                    <div className="feedback-box">
+                      <Commentary
+                        comment={state.comment?.message}
+                        reviewed={crossComment}
+                      />
                       <Button
-                        buttonType={"general-transparent-button"}
-                        label={"Enviar comentario"}
-                        onClick={handleCommentSubmit}
+                        buttonType={"circular-button accept-button"}
+                        onClick={async () => {
+                          setCrossComment(true);
+                          commentRevised();
+                        }}
                       />
                     </div>
-                  </div>
-                ) : (
-                  <div className="feedback-box">
-                    <Commentary
-                      comment={comment?.message}
-                      reviewed={crossComment}
-                    />
-                    <Button
-                      buttonType={"circular-button accept-button"}
-                      onClick={async () => {
-                        setCrossComment(true);
-                        commentRevised();
-                      }}
-                    />
-                  </div>
-                )}
-                {[7, 8].includes(user.id_role) && (
-                  <Button
-                    buttonType={
-                      evaluationFinished(
-                        user.id_role,
-                        activeTab,
-                        statusArray
-                      ) && requiredNull[activeTab] === 0
-                        ? "general-green-button"
-                        : "general-button-disabled"
+                  )}
+
+                  <div className="action-buttons">
+                    {
+                      allowedAccountsToViewChangeStatus.includes(user?.email) && (
+                        <Button
+                          buttonType={"general-pink-button"}
+                          label={"Cambio de Estatus"}
+                          onClick={() => setOpenChangeStatusModal(true)}
+                          id="button-change-status"
+                        />
+                      )
                     }
-                    label={"Enviar evaluación"}
-                    onClick={() => sendToFacilitator()}
-                  />
-                )}
-              </div>
-            )}
+                    {[7, 8].includes(user.id_role) && (
+                      <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}
+                      />
+                    )}
+                  </div>
+                </div>
+              )}
+          </div>
         </div>
-      </div>
-      {showModal && (
-        <ProductImageModal
-          images={images}
-          setShowModal={setShowModal}
-          sendToFacilitator={sendToFacilitator}
-          approveRejectButtons={approveRejectButtons()}
-        />
-      )}
-      {message.length > 0 && (
-        <GenericModal
-          buttonType={componentsArray.length > 0 && "delete-product"}
-          componentsArray={
-            componentsArray.length > 0
-              ? componentsArray
-              : [
-                  <img key="1" src={succes} alt="success icon" />,
-                  <ScreenHeader
-                    key="2"
-                    headerType={"retailer-name-header"}
-                    text={message}
-                    color={"white"}
-                  />,
-                ]
-          }
-          onClick={() => setMessage("")}
-        />
-      )}
-      {showVersionSelector && (
-        <VersionSelector
-          modalId={"version-selector"}
-          articleId={product.article.id_article}
-          setVersion={setVersion}
-          companyName={product.article.company_name}
-          currentVersion={version}
-          setShowVersionSelector={setShowVersionSelector}
-          jwt={token}
-        />
-      )}
-      {showRejectModal && (
-        <Modal
-          title={`Agregar mensaje de rechazo para ${activeTab?.toLowerCase()}`}
-          show={showRejectModal}
-          customComponent={
-            <TagAndInput
-              inputType={"textarea"}
-              inputId={"modal-message-box"}
-              index={0}
-              color={"white"}
-            />
-          }
-          buttons={[
-            <ButtonV2
-              key={"btn-Cancelar"}
-              type={"white"}
-              label={"Cancelar"}
-              size={12}
-              onClick={() => {
-                setShowRejectModal(false);
-              }}
-            />,
-            <ButtonV2
-              key={"btn-Aceptar"}
-              type={"pink"}
-              label={"Aceptar"}
-              size={12}
-              onClick={async (e) => {
-                const elements = document.querySelectorAll(
-                  "#modal-message-box .ql-container .ql-editor > p"
-                );
-
-                if (!elements || elements.length === 0) {
-                  console.error("Elemento no encontrado");
-                  return;
-                }
-
-                let brCounter = 0;
-
-                elements.forEach((el) => {
-                  const 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++;
-                  }
-                });
-
-                if (brCounter === elements.length) {
-                  const container = document.querySelector(
-                    ".container-customComponent"
-                  );
-
-                  const existingAlert = container.querySelector(".alert-error");
-                  if (existingAlert) {
-                    return; // Si ya existe, no crear otra
-                  }
+      </Container>
 
-                  // Crear alerta con estilos
-                  const alert = document.createElement("div");
-                  alert.className = "alert-error";
-                  alert.style.cssText = `
-                    color: #d32f2f;
-                    background-color: #ffebee;
-                    border: 1px solid #ef5350;
-                    border-radius: 4px;
-                    padding: 12px 16px;
-                    margin-top: 10px;
-                    font-size: 14px;
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                    font-family: 'Roboto', sans-serif;
-                    text-align: center;
-                  `;
-
-                  alert.innerHTML = `
-                    <span>El mensaje no puede estar vacío.</span>
-                  `;
-
-                  container.appendChild(alert);
-                  return;
-                }
-
-                let fullMessage = "";
-
-                elements.forEach((element) => {
-                  const body = element.innerHTML;
-
-                  fullMessage += body;
-                });
-
-                fullMessage = fullMessage.replace(/<br\s*\/?>/gi, "\n");
-
-                await createComment(e, fullMessage, activeTab);
-                valRejAll ? validateAll("R") : sendToFacilitator("R");
-                setMessage("Rechazado");
-                setShowRejectModal(false);
-              }}
-            />,
-          ]}
-        />
-      )}
-      <Modal
-        className="container-modalAlert"
-        show={modalAlert.show}
-        title={modalAlert.title}
-        message={modalAlert.message}
-        icon={"info"}
-        onClickBtnDefault={(event) => {
-          setModalAlert((prev) => ({
-            ...prev,
-            show: false,
-            errorInputMessage: false,
-          }));
+      <ChangeStatusModal
+        state={state}
+        open={openChangeStatusModal}
+        onClose={() => {
+          setOpenChangeStatusModal(false);
         }}
+        reloadData={loadData}
+        token={token}
       />
-    </Container>
+    </AiProductEditionProvider>
+  );
+};
+
+export const RetailerProductEdition = (props) => {
+  return (
+    <ProviderProductEditionProvider>
+      <RetailerProductEditionView {...props} />
+    </ProviderProductEditionProvider>
   );
 };