contentoh-components-library 21.5.92 → 21.5.93

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

@@ -1,286 +1,392 @@
-import { useEffect, useState } from "react";
-
-import axios from "axios";
-import { useDropzone } from "react-dropzone";
+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 { saveAs } from "file-saver";
-
+import { Commentary } from "../../atoms/Commentary";
 import {
-  ProviderProductEditionProvider,
-  useProviderProductEdition,
-} from "./context/provider-product-edition.context";
+  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";
 import {
-  normalizeProduct,
-  getConceptByTab,
   getAuditVersion,
   getInputsData,
   createMessage,
   sendMessage,
-  translateConcept,
-  getStatusArrayByRole,
-  getConceptsByRole,
-  buildCollaboratorAssignations,
-  calculateRequiredNull,
 } from "./utils";
-
-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 { Modal } from "../../organisms/Modal";
 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;
+      }
 
-import { GalleryElement } from "../../molecules/GalleryElement";
-import { GalleryHeader } from "../../molecules/GalleryHeader";
-import { HeaderTop } from "../../molecules/HeaderTop";
-import { TagAndInput } from "../../molecules/TagAndInput/index";
-
-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";
+      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 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";
+        values = orderedImages.length > 0 ? orderedImages : [];
+      } catch (error) {
+        console.log(error);
+      }
+      return { ...state, values, inputs };
+    }
+    default:
+      return state;
+  }
+};
 
-import { Container } from "./styles";
-import { Commentary } from "../../atoms/Commentary";
+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 { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
-import ChangeStatusModal from "../../organisms/ChangeStatusModal";
+AWS.config.update({
+  accessKeyId: process.env.REACT_APP_KUTS3,
+  secretAccessKey: process.env.REACT_APP_AKUTS3,
+});
 
-import { Skeleton, Box, Stack } from "@mui/material";
+const myBucket = new AWS.S3({
+  params: { Bucket: S3_BUCKET },
+  region: REGION,
+});
 
-const RetailerProductEditionView = ({
+export const RetailerProductEdition = ({
   tabsSections,
   productSelected = {},
   user = {},
   token,
   location,
 }) => {
-  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 [shotThd, setShotThd] = useState(false);
-  const [observation, setObservation] = useState();
-  const [showRejectModal, setShowRejectModal] = useState(false);
-  const [isObservationVisible, setObservationVisible] = useState(false);
+  const [activeTab, setActiveTab] = useState("Descripción");
+  const [activeImage, setActiveImage] = useState();
   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 [headerTop, setHeaderTop] = useState(0);
+  const [descriptions, setDescriptions] = useState([]);
+  const [datasheets, setDatasheets] = useState([]);
+  const [images, setImages] = useReducer(reducerImages, {});
   const [showModal, setShowModal] = useState(false);
-
-  const [compare, setCompare] = useState(false);
-  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-    accept: "image/*",
+  const [showRejectModal, setShowRejectModal] = useState(false);
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: "image/*, video/mp4",
     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 fileName = e.target.fileName;
-          const fileExtension = fileName.split(".").pop();
-          const fileDataURL = e.target.result;
-
+          const ext = e.srcElement.fileName.split(".");
           const img = new Image();
-          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,
-            });
-          };
+          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);
+          }
         };
-
         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 [openChangeStatusModal, setOpenChangeStatusModal] = useState(false);
+  const [desc, setDesc] = useState([]);
+  const [fich, setFich] = useState([]);
+  const [imag, setImag] = useState([]);
 
-  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 [isObservationVisible, setObservationVisible] = useState(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 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);
   };
 
-  const initializeProduct = async () => {
-    try {
-      const product = JSON.parse(sessionStorage.getItem("productSelected"))
-        ? JSON.parse(sessionStorage.getItem("productSelected"))
-        : productSelected;
-
-      const productNormalized = normalizeProduct(product);
-
-      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);
-    }
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    const commentText = document.querySelector(
+      "#commentary-box .ql-container .ql-editor > p"
+    ).innerHTML;
+    createComment(e, commentText, activeTab);
   };
 
-  // Setter del producto y carga inicial (optimizado para evitar cascada)
-  useEffect(() => {
-    initializeProduct();
+  useEffect(async () => {
+    const { id_article } = product?.article || {};
+    if (id_article)
+      await getAuditVersion(id_article, setAuditableVersion, token);
   }, []);
 
   const loadAuditableData = async () => {
-    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]);
+    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]);
+    }
   };
 
   useEffect(() => {
@@ -289,438 +395,682 @@ const RetailerProductEditionView = ({
     }
   }, [auditableVersion]);
 
-  const loadData = async (enableLoading = true, versionSelected = null) => {
+  useEffect(() => {
+    checkAll && setSelectedImages(images.values);
+  }, [checkAll]);
+
+  const loadData = async () => {
     try {
-      if (enableLoading) dispatch({ type: "SET_LOADING", payload: true });
+      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] });
 
-      const { id_article, version, id_order } = state.product;
-      const { category, id_category, id_retailer } = state.active_retailer;
+      if (services[2]?.values?.length > 0) setActiveImage(0);
 
-      // Payloads y headers
       const data = [
         {
-          id_article,
-          version: versionSelected ? versionSelected : version,
+          id_article: product?.article?.id_article,
           relations: [
             {
-              id_retailer,
-              id_category,
+              id_retailer: retailer_id,
+              id_category: category_id,
             },
           ],
+          version: product.version,
         },
       ];
 
       const headers = { Authorization: token };
-
-      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,
-        })),
+      getPercentage({ data, headers }).then((res) => {
+        setPercentages(JSON.parse(res?.[0]?.body));
       });
 
-      // 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;
-      });
+      setImages({ action: "orderImages", retailerId: activeRetailer.id });
 
-      // 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,
-        },
-      });
-
-      // Calcular campos requeridos sin valor
-      dispatch({
-        type: "SET_MISSING_REQUIRED_FIELDS",
-        payload: calculateRequiredNull(services, servicesDataRes, id_retailer),
-      });
-
-      // Auditable
-      if (auditableVersion && id_retailer) {
-        loadAuditableData();
-      }
+      setLoading(false);
     } catch (error) {
-      console.log("Error loading data: ", error);
-      dispatch({ type: "SET_ERRORS", payload: [error.message] });
-    } finally {
-      dispatch({ type: "SET_LOADING", payload: false });
+      setLoading(false);
+      console.log(error);
     }
   };
 
   useEffect(() => {
-    if (state.active_retailer) {
-      loadData();
-    }
-  }, [state.active_retailer]);
+    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;
 
-  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 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 handleOnShowModalGallery = () => {
-    dispatch({
-      type: "SET_ACTIVE_TAB",
-      payload: "Imágenes",
-    });
-    setShowModal(true);
+  const translateConcept = (concept) => {
+    const translation = {
+      datasheet: "Ficha técnica",
+      description: "Descripción",
+      images: "Imágenes",
+    };
+    return translation[concept];
   };
 
-  const handleOnChangeActiveRetailer = (retailer) => {
-    dispatch({
-      type: "SET_ACTIVE_RETAILER",
-      payload: retailer,
-    });
+  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 handleOnChangeActiveTab = (tab) => {
-    dispatch({
-      type: "SET_ACTIVE_TAB",
-      payload: tab,
+  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 handleOnToggleImageLayout = () => {
-    setImageLayout(!imageLayout);
-  };
+  useEffect(() => {
+    loadAssignations(product);
+  }, [userGroups]);
 
-  const handleOnToggleObservation = () => {
-    setObservationVisible(!isObservationVisible);
-  };
+  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]);
 
-  const handleOnHideObservation = () => {
-    setObservationVisible(false);
+  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 isAuditorAssigned = () => {
-    return state.product?.id_auditor === user?.id_user;
+  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)
+          );
+
+          setUpdatedDescriptions([]);
+          setMessage("Descripciones guardadas con éxito");
+          await loadData();
+        }
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setLoading(false);
+      }
+    }
   };
 
-  const isUserAssignedToService = (tab, rol) => {
-    const concept = getConceptByTab(state.active_tab);
+  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 allowedRoles = [1, 4, 5, 6, 7, 8];
-    const validUser = allowedRoles.includes(user?.id_role);
+  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];
+    });
 
-    // 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";
+    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);
+      }
+    }
+  }, [dataImages, imagesUploaded]);
 
-    const isAdmin = user.id_role === 1;
-    const idUserAssigned = state.product?.[`id_${concept}_${rol}`];
-    const isAssigned = idUserAssigned === user.id_user;
+  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;
+    }
+  };
 
-    return isAdmin || (isAssigned && validUser);
+  const getConcept = (tab) => {
+    switch (tab) {
+      case "Descripción":
+        return "description";
+      case "Ficha técnica":
+        return "datasheet";
+      case "Imágenes":
+        return "images";
+    }
   };
 
-  const canShowSingleEvaluationButtons = (action) => {
-    let concept = getConceptByTab(action || state.active_tab);
+  const approveRejectButtons = (action) => {
+    let concept = getConcept(action || activeTab);
 
-    const retailerStatus = state.services_data
-      ?.find(
+    const retailerStatus = servicesData
+      .find(
         (srv) =>
-          srv.id_retailer === state.active_retailer?.id_retailer &&
-          srv.service === concept,
+          srv.id_retailer === activeRetailer?.id && 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 canShowBulkEvaluationButtons = () => {
-    const concepts = getConceptsByRole(user.id_role);
+  const approveRejectAllButtons = () => {
+    let concepts = [];
+    switch (user.id_role) {
+      case 4:
+        concepts = ["description", "datasheet"];
+        break;
+      case 5:
+        concepts = ["images"];
+        break;
 
-    const services = state.services_data.filter(({ service }) =>
-      concepts.includes(service),
+      default:
+        concepts = ["description", "datasheet", "images"];
+        break;
+    }
+
+    const services = servicesData.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 =
-      state.services_data.every((srv) =>
-        ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, "")),
+      servicesData.every((srv) =>
+        ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, ""))
       ) && [1, 6].includes(user.id_role);
     return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
   };
 
-  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":
-        await saveDescriptions(token);
-        break;
+  const getSectionIcon = () => {
+    switch (activeTab) {
       case "Ficha técnica":
-        await saveDatasheets(token);
+        setIcon(attributesSent);
+        break;
+      case "Descripción":
+        setIcon(descriptionSent);
         break;
       case "Imágenes":
-        await updateImages(token);
+        setIcon(imagesSent);
         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 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;
-
+  const sendToFacilitator = async (result) => {
+    if (!loading) setLoading(true);
     try {
-      //Esto solo se ejecutará cuando se aprueba o rechaza desde el modal superior derecho
+      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;
       if (result) {
         data.result = result;
-        data.retailerId = retailerId;
-
         res = await axios.put(
           `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
           data,
@@ -728,285 +1078,254 @@ const RetailerProductEditionView = ({
             headers: {
               Authorization: token,
             },
-          },
-        );
-
-        const newStatuses = JSON.parse(res.data.body);
-        const serviceStatus =
-          newStatuses.newServiceStatus[articleId][`${concept}Status`];
-
-        // 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,
-        };
-
-        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
-
+        getServices();
+      } else {
         const specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
 
         if (specialistDone) {
           message = `${activeTab} enviada a facilitador`;
-          icon =
-            activeTab === "Descripción"
-              ? descriptionSent
-              : activeTab === "Ficha técnica"
-              ? attributesSent
-              : imagesSent;
+          getSectionIcon();
         } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
           message = "Evaluación enviada";
-          icon = successIcon;
+          getSectionIcon();
         }
-
         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 { newStatus, newOrderStatus, newArticleStatus } = JSON.parse( res.data.body );
-
-        // 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;
-          }),
+        const data = {
+          paramsBody: {
+            id: product.article.id_article,
+            version: version,
+            items: [{ type: "status", value: messageToChat }],
+            retailerId: activeRetailer.id,
+            status: product.status,
+          },
+          paramsHeader: { Authorization: token },
         };
+        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);
+    }
+  };
 
-        //Actualizamos el services_data en el servicio específico del retailer actual
-
-        const updatedServicesData = state.services_data?.map(service => ({
-          ...service,
-          status: service?.id_retailer === retailerId && service?.service === concept ? newStatus : service?.status
-        }));
-
-        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),
-          );
-        }
+  const userAssigned = (tab, rol) => {
+    let concept = getConcept(activeTab);
 
-        if (message) {
-          dispatch({
-            type: "SET_MODAL",
-            payload: {
-              show: true,
-              title: "",
-              message: message,
-              image: successIcon,
-            },
-          });
-        }
+    const allowedRoles = [1, 4, 5, 6, 7, 8];
+    const validUser = allowedRoles.includes(user?.id_role);
 
-        dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
-        dispatch({ type: "SET_SERVICES_DATA", payload: updatedServicesData });
+    if (!rol) {
+      switch (user.id_role) {
+        case 4:
+        case 5:
+          rol = "facilitator";
+          break;
+        case 7:
+        case 8:
+          rol = "especialist";
+          break;
       }
-    } 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 handleOnApproveAllServices = async () => {
-    await sendBulkEvaluation("A");
+  const auditorAssigned = () => {
+    return product?.article[`id_auditor`] === user.id_user;
   };
 
-  const handleOnRejectAllServices = () => {
-    setRejectAll(true);
-    setShowRejectModal(true);
+  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 sendBulkEvaluation = async (result) => {
-    dispatch({ type: "SET_SAVING", payload: true });
+  const getRequired = (services) => {
     try {
-      const evaluationArray = [];
+      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 conceptArray = getConceptsByRole(user.id_role);
+        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)
+                );
+              })
+            );
+          });
+      });
 
-      state.services_data?.forEach((ret, idx) => {
-        const { service: retailer_service, id_retailer, status: status_retailer_service } = ret;
+      objetcTemp["Ficha técnica"] = dsInputsRequired.length;
 
-        const lastStatusLevel = status_retailer_service.replace(/.*\//, "");
+      const regex = /(<\/?p>)|(<\/?strong>)|(<br>)/gm;
+      descriptionsServicesArray.forEach((description) => {
+        if (description.id != activeRetailer.id) return;
 
-        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,
-          };
+        const [requested] = servicesData.filter(
+          (srv) =>
+            srv.id_retailer === description.id &&
+            srv.service === getConcept(activeTab)
+        );
 
-          evaluationArray.push(
-            axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
-              headers: {
-                Authorization: token,
-              },
-            }),
-          );
+        if (requested) {
+          description.inputs.forEach((input) => {
+            if (
+              input.required &&
+              (!input.value || input.value?.replace(regex, "") === "")
+            ) {
+              desInputsRequired++;
+            }
+          });
         }
       });
 
-      await Promise.all(evaluationArray);
+      objetcTemp["Descripción"] = desInputsRequired;
 
-      const status = `${result}A`;
+      const retailersRequested = [];
 
-      // Actualizar el statusByRetailer para todos los retailers y conceptos
-      const updatedStatusByRetailer = state.product.statusByRetailer.map(
-        (item) =>
-          conceptArray.includes(item.service) ? { ...item, status } : item,
+      services[2]?.retailerMandatories?.forEach((retMan) =>
+        retMan.forEach((rm) => retailersRequested.push(rm))
       );
 
-      // 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,
-      };
-
-      dispatch({
-        type: "SET_PRODUCT",
-        payload: updatedProduct,
-      });
-
-      const updatedServicesData = state.services_data.map(service => conceptArray.includes(service.service) ? { ...service, status: status } : service);
-
-      dispatch({
-        type: "SET_SERVICES_DATA",
-        payload: updatedServicesData,
-      });
+      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
+      );
 
-      // 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,
-        },
+      let requiredCounter = 0;
+      requiredImages?.forEach((req) => {
+        return (
+          services[2].values.filter((img) => img.image_id === req.id).length ===
+            0 && requiredCounter++
+        );
       });
+      objetcTemp["Imágenes"] = requiredCounter;
+      setRequiredNull(objetcTemp);
     } catch (error) {
-      console.error("Error in bulk evaluation:", error);
-    } finally {
-      dispatch({ type: "SET_SAVING", payload: false });
+      console.log(error);
     }
   };
 
-  const handleOnChangeAssignations = async (assignationType, assignationId) => {
-    const concept = getConceptByTab(state.active_tab);
+  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 setAssignation = async (assignationType, assignationId) => {
+    let concept = "";
+    switch (activeTab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+    const productTemp = product;
+    productTemp.article[`id_${concept}_${assignationType}`] = assignationId;
     const data = {
       articleList: [
         {
-          orderId: state.product.id_order,
-          articleId: state.product.id_article,
+          orderId: product.orderId,
+          articleId: product?.article?.id_article,
         },
       ],
       concept: concept,
       userId: assignationId,
     };
-
     await axios({
       method: "post",
       url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
@@ -1015,794 +1334,646 @@ const RetailerProductEditionView = ({
         Authorization: token,
       },
     });
-
-    const updatedProduct = {
-      ...state.product,
-      [`id_${concept}_${assignationType}`]: assignationId,
-    };
-
-    dispatch({ type: "SET_PRODUCT", payload: updatedProduct });
-  };
-
-  const handleOnSetAssignation = () => {
-    console.log("handleOnSetAssignation - pendiente de implementar");
-  };
-
-  const handleOnSetImages = () => {
-    console.log("handleOnSetImages - pendiente de implementar");
-  };
-
-  const handleOnSetCheckAll = (isChecked) => {
-    dispatch({ type: "TOGGLE_CHECK_ALL_IMAGES", payload: isChecked });
-  };
-
-  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,
-        },
-      });
-    }
+    loadAssignations(productTemp);
+    sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
   };
 
-  const handleOnSendEvaluationToFacilitator = () => {
-    sendSingleEvaluation();
+  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 isEvaluationFinished = (id_rol, tab, statusArray) => {
-    const servicesData = state.services_data;
-    const activeRetailer = state.active_retailer;
-    const product = state.product;
-    const concept = getConceptByTab(tab);
-
-    const servicesByTab = servicesData?.filter(
-      (serv) => serv.service === concept,
-    );
-
-    const statusBySelectedRetailerService = servicesByTab
-      ?.find((serv) => serv.id_retailer === activeRetailer?.id_retailer)
-      ?.status?.replace(/.*\//, "");
+  const deleteImages = async () => {
+    setLoading(true);
+    const { values } = images;
+    const imgsInBack = [];
 
-    const currentProducStatus = product?.[`${concept}_status`]?.replace(
-      /.*\//,
-      "",
-    );
+    selectedImages.forEach((selectedImg) => {
+      if (selectedImg.id) imgsInBack.push(selectedImg);
+    });
 
-    const unvalidated = ["IE", "CA"].includes(currentProducStatus);
-    const auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(
-      currentProducStatus,
+    const imgsLeft = values.filter(
+      (value) => selectedImages.indexOf(value) === -1
     );
 
-    let result;
-    switch (id_rol) {
-      case 7:
-      case 8:
-
-        const canSendEvaluation = statusArray.includes(statusBySelectedRetailerService);
-
-        // const conditionTwo = statusArray.includes(product?.status);
+    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 conditionThree =
-        //   servicesByTab.filter((service) =>
-        //     statusArray.includes(service.status?.replace(/.*\//, "")),
-        //   ).length === servicesByTab.length;
+    setImages({
+      action: "deleteImage",
+      selectedImages,
+    });
 
-        // return (canSendEvaluation && conditionTwo) || conditionThree;
+    getRequired([
+      services[0],
+      services[1],
+      { ...services[2], values: imgsLeft },
+    ]);
 
-        return canSendEvaluation;
+    setLoading(false);
 
-      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;
-    }
+    setMessage("");
+    setComponentsArray([]);
   };
 
-  const handleOnChangeProductVersion = (version) => {
-    dispatch({
-      type: "SET_PRODUCT_VERSION",
-      payload: version,
-    });
-
-    loadData(true, version);
+  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 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>
+  const getRetailerStatus = (servicesData, tab) => {
+    const arr = servicesData?.slice();
+    let concept = getConcept(tab);
 
-          <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>
+    let retailerService = {};
+    [retailerService] = arr?.filter(
+      (service) =>
+        service.id_retailer === activeRetailer?.id &&
+        service.service === concept
     );
+    return retailerService ? retailerService.status : "NS";
   };
 
-  if (state.loading || !state.services || !state.product)
-    return (
-      <>
-        <ProductEditionSkeleton />
-      </>
-    );
-
-  return (
-    <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"
-            }
-            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 () => {
-                  const elements = document.querySelectorAll(
-                    "#modal-message-box .ql-container .ql-editor > p",
-                  );
+  useEffect(() => {
+    let status = getRetailerStatus(servicesData, activeTab);
+    setRetailerStatus(status);
+  }, [activeTab, servicesData, activeRetailer]);
 
-                  if (!elements || elements.length === 0) {
-                    console.error("Elemento no encontrado");
-                    return;
-                  }
+  useEffect(() => {
+    services.length > 0 && getRequired(services);
+  }, [services, servicesData, activeTab]);
 
-                  const isMessageEmpty = Array.from(elements).every((el) => {
-                    const body = el.innerHTML;
-                    return (
-                      !body || body.replace(/<.*?\/?>/gm, "").trim() === ""
-                    );
-                  });
+  useEffect(() => {
+    setSaving(loading);
+  }, [loading]);
 
-                  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 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 fullMessage = Array.from(elements)
-                    .map((element) => element.innerHTML)
-                    .join("")
-                    .replace(/<br\s*\/?>/gi, "\n");
+      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);
 
-                  await createComment(fullMessage, token);
+      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);
+    }
+  };
 
-                  rejectAll
-                    ? sendBulkEvaluation("R")
-                    : sendSingleEvaluation("R");
-                  setShowRejectModal(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 parseData = JSON.parse(response.data.body).data[0];
+    setObservation(parseData.observations);
+  };
+  useEffect(() => {
+    getObservation();
+  }, []);
+  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}
           />
-        )}
-        {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 },
-              })
+          <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()
             }
+            showSaveButton={auditorAssigned() || userAssigned()}
+            setShowVersionSelector={setShowVersionSelector}
+            version={version}
+            shotThd={shotThd}
           />
-        )}
-        {showModal && (
-          <ProductImageModal
-            images={state.images_values}
-            setShowModal={setShowModal}
-            approveRejectButtons={canShowSingleEvaluationButtons()}
-            sendToFacilitator={handleOnSendEvaluationToFacilitator}
+        </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())
+            }
+            showValidationButtons={
+              approveRejectButtons() && (auditorAssigned() || userAssigned())
+            }
+            approveAll={() => validateAll("A")}
+            rejectAll={() => {
+              setShowRejectModal(true);
+              setValRejAll(true);
+            }}
+            isObservationVisible={isObservationVisible}
+            toggleObservation={toggleObservation}
+            // handleClickOutside={handleClickOutside}
+            hideObservation={hideObservation}
           />
-        )}
-        {showVersionSelector && (
-          <VersionSelector
-            modalId={"version-selector"}
-            articleId={state.product.id_article}
-            setVersion={handleOnChangeProductVersion}
-            companyName={state.product.company}
-            currentVersion={state.product.version}
+          <FullTabsMenu
+            tabsSections={tabsSections}
+            status={retailerStatus}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            setImageLayout={setImageLayout}
+            downloadImages={downloadImages}
+            askToDeleteImages={askToDeleteImages}
+            assig={assig[activeTab]}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
+            showSaveButton={auditorAssigned() || userAssigned()}
+            version={version}
+            desc={desc}
+            setDesc={setDesc}
+            fich={fich}
+            setFich={setFich}
+            imag={imag}
+            setImag={setImag}
+            updatedDescriptions={updatedDescriptions}
+            setUpdatedDescriptions={setUpdatedDescriptions}
+            updatedDatasheets={updatedDatasheets}
+            setUpdatedDatasheets={setUpdatedDatasheets}
+            images={images}
+            setImages={setImages}
+            selectedImages={selectedImages}
+            setSelectedImages={setSelectedImages}
             setShowVersionSelector={setShowVersionSelector}
-            jwt={token}
-          />
-        )}
-        <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] ?? {}
+            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;
               }
-              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>
+            }}
+            canAssign={![7, 8].includes(user.id_role)}
+          />
+          <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}
+                    />
+                  )}
 
-          <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" ? (
+                {activeTab === "Ficha técnica" &&
+                  (product?.datasheet_status !== "NS" ? (
+                    datasheets[0]?.data?.map((dataGroup, index) => (
                       <InputGroup
-                        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}
+                        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}
                         compare={compare}
                       />
-                    ) : (
-                      <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}
-                        />
+                    ))
+                  ) : (
+                    <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>
                       </div>
-                    </div>
+                    </section>
                   ) : (
-                    <div className="feedback-box">
-                      <Commentary
-                        comment={state.comment?.message}
-                        reviewed={crossComment}
-                      />
+                    <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">
                       <Button
-                        buttonType={"circular-button accept-button"}
-                        onClick={async () => {
-                          setCrossComment(true);
-                          commentRevised();
-                        }}
+                        buttonType={"general-transparent-button"}
+                        label={"Enviar comentario"}
+                        onClick={handleCommentSubmit}
                       />
                     </div>
-                  )}
-
-                  <div className="action-buttons">
+                  </div>
+                ) : (
+                  <div className="feedback-box">
+                    <Commentary
+                      comment={comment?.message}
+                      reviewed={crossComment}
+                    />
                     <Button
-                      buttonType={"general-pink-button"}
-                      label={"Cambio de Estatus"}
-                      onClick={() => setOpenChangeStatusModal(true)}
-                      id="button-change-status"
+                      buttonType={"circular-button accept-button"}
+                      onClick={async () => {
+                        setCrossComment(true);
+                        commentRevised();
+                      }}
                     />
-                    {[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>
+                )}
+                {[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>
+            )}
         </div>
-      </Container>
+      </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
+                  }
 
-      <ChangeStatusModal
-        state={state}
-        open={openChangeStatusModal}
-        onClose={() => {
-          setOpenChangeStatusModal(false);
+                  // 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,
+          }));
         }}
-        reloadData={loadData}
-        token={token}
       />
-    </AiProductEditionProvider>
-  );
-};
-
-export const RetailerProductEdition = (props) => {
-  return (
-    <ProviderProductEditionProvider>
-      <RetailerProductEditionView {...props} />
-    </ProviderProductEditionProvider>
+    </Container>
   );
 };