contentoh-components-library 21.5.91 → 21.5.93

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

@@ -1,1979 +0,0 @@
-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 {
-  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 {
-  getAuditVersion,
-  getInputsData,
-  createMessage,
-  sendMessage,
-} from "./utils";
-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;
-      }
-
-      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)
-        );
-
-        values = orderedImages.length > 0 ? orderedImages : [];
-      } catch (error) {
-        console.log(error);
-      }
-      return { ...state, values, inputs };
-    }
-    default:
-      return state;
-  }
-};
-
-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);
-  });
-}
-
-AWS.config.update({
-  accessKeyId: process.env.REACT_APP_KUTS3,
-  secretAccessKey: process.env.REACT_APP_AKUTS3,
-});
-
-const myBucket = new AWS.S3({
-  params: { Bucket: S3_BUCKET },
-  region: REGION,
-});
-
-export const RetailerProductEdition = ({
-  tabsSections,
-  productSelected = {},
-  user = {},
-  token,
-  location,
-}) => {
-  const [activeTab, setActiveTab] = useState("Descripción");
-  const [activeImage, setActiveImage] = useState();
-  const [imageLayout, setImageLayout] = useState(false);
-  const [headerTop, setHeaderTop] = useState(0);
-  const [descriptions, setDescriptions] = useState([]);
-  const [datasheets, setDatasheets] = useState([]);
-  const [images, setImages] = useReducer(reducerImages, {});
-  const [showModal, setShowModal] = useState(false);
-  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 ext = e.srcElement.fileName.split(".");
-          const img = new Image();
-          if (ext[ext.length - 1] == "mp4") {
-            obtenerDuracionVideoBase64(e.target.result)
-              .then(async (duracion) => {
-                if (duracion > 15 && duracion < 600) {
-                  img.src = await generateThumbnail(e.target.result, 2);
-                  setTimeout(() => {
-                    const width = img.width;
-                    const height = img.height;
-                    const newImg = {
-                      action: "addImg",
-                      img: {
-                        src: img.src, //e.target.result,
-                        name: e.target.fileName,
-                        ext: ext[ext.length - 1],
-                        width: width,
-                        height: height,
-                        video_src:
-                          ext[ext.length - 1] == "mp4" ? e.target.result : "",
-                      },
-                    };
-                    setImages(newImg);
-                  }, 500);
-                } else {
-                  setModalAlert({
-                    show: true,
-                    title: "Hubo un error al subir el video",
-                    message:
-                      "Los videos deben durar entre 15 segundos y 10 minutos",
-                  });
-                }
-              })
-              .catch((error) => {
-                console.error("Error al obtener la duración del video:", error);
-              });
-          } else {
-            img.src = e.target.result;
-            setTimeout(() => {
-              const width = img.width;
-              const height = img.height;
-              const newImg = {
-                action: "addImg",
-                img: {
-                  src: img.src, //e.target.result,
-                  name: e.target.fileName,
-                  ext: ext[ext.length - 1],
-                  width: width,
-                  height: height,
-                  video_src:
-                    ext[ext.length - 1] == "mp4" ? e.target.result : "",
-                },
-              };
-              setImages(newImg);
-            }, 500);
-          }
-        };
-        reader.onerror = function (error) {
-          console.log("dropzoneError: ", error);
-        };
-        reader.readAsDataURL(file);
-        return file;
-      });
-    },
-  });
-  const [updatedDatasheets, setUpdatedDatasheets] = useState([]);
-  const [updatedDescriptions, setUpdatedDescriptions] = useState([]);
-  const [imagesUploaded, setImagesUploaded] = useState(false);
-  const [dataImages, setDataImages] = useState();
-  const [percentages, setPercentages] = useState(
-    new Array(product?.retailers?.length).fill({ percentage: 0 })
-  );
-  // const [percentages, setPercentages] = useState([{ retailers: {} }]);
-  const [activePercentage, setActivePercentage] = useState(0);
-  const [activeRetailer, setActiveRetailer] = useState({});
-  const [services, setServices] = useState([]);
-  const [servicesData, setServicesData] = useState([]);
-  const [message, setMessage] = useState("");
-  const [product, setProduct] = useState(
-    JSON.parse(sessionStorage.getItem("productSelected"))
-      ? JSON.parse(sessionStorage.getItem("productSelected"))
-      : productSelected
-  );
-  const [icon, setIcon] = useState(null);
-  const [version, setVersion] = useState(product?.version);
-  const [comments, setComments] = useState({});
-  const [comment, setComment] = useState("");
-  const [requiredNull, setRequiredNull] = useState({
-    "Ficha técnica": 0,
-    Descripción: 0,
-    Imágenes: 0,
-  });
-  const [crossComment, setCrossComment] = useState(false);
-  const [userGroups, setUserGroups] = useState([]);
-  const [assig, setAssig] = useState({});
-  const [selectedImages, setSelectedImages] = useState([]);
-  const [componentsArray, setComponentsArray] = useState([]);
-  const [checkAll, setCheckAll] = useState(false);
-  const isRetailer = user?.is_retailer;
-  const [loading, setLoading] = useState(true);
-  const [retailerStatus, setRetailerStatus] = useState("-");
-  const [statusArray, setStatusArray] = useState([]);
-  const [socketType, setSocketType] = useState(null);
-  const [saving, setSaving] = useState(loading);
-  const [showVersionSelector, setShowVersionSelector] =
-    useCloseModal("version-selector");
-  const shotThd = [58, 59, 60, 61].includes(activeRetailer.id);
-  const [auditableVersion, setAuditableVersion] = useState(null);
-  const [auditServices, setAuditServices] = useState([]);
-  const [auditDatasheets, setAuditDatasheets] = useState([]);
-  const [auditDescriptions, setAuditDescriptions] = useState([]);
-  const [auditImages, setAuditImages] = useState([]);
-  const [compare, setCompare] = useState(false);
-  const [observation, setObservation] = useState();
-  const [valRejAll, setValRejAll] = useState(false);
-  const [modalAlert, setModalAlert] = useState({
-    show: false,
-    title: "",
-    message: "",
-    errorInputMessage: false,
-  });
-
-  const [desc, setDesc] = useState([]);
-  const [fich, setFich] = useState([]);
-  const [imag, setImag] = useState([]);
-
-  const [isObservationVisible, setObservationVisible] = useState(false);
-
-  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 handleCommentSubmit = (e) => {
-    e.preventDefault();
-    const commentText = document.querySelector(
-      "#commentary-box .ql-container .ql-editor > p"
-    ).innerHTML;
-    createComment(e, commentText, activeTab);
-  };
-
-  useEffect(async () => {
-    const { id_article } = product?.article || {};
-    if (id_article)
-      await getAuditVersion(id_article, setAuditableVersion, token);
-  }, []);
-
-  const loadAuditableData = async () => {
-    if (auditableVersion) {
-      const auditServices = await getRetailerServices(
-        product?.article?.id_article,
-        product?.article?.category,
-        parseInt(product?.article?.id_category),
-        auditableVersion.version,
-        token
-      );
-      getInputsData(
-        auditServices,
-        activeRetailer,
-        setAuditDatasheets,
-        setAuditDescriptions
-      );
-      setAuditServices(auditServices);
-      setAuditImages(auditServices[2]);
-    }
-  };
-
-  useEffect(() => {
-    if (auditableVersion) {
-      loadAuditableData();
-    }
-  }, [auditableVersion]);
-
-  useEffect(() => {
-    checkAll && setSelectedImages(images.values);
-  }, [checkAll]);
-
-  const loadData = async () => {
-    try {
-      setLoading(true);
-
-      const ids =
-        product?.statusByRetailer?.map((item) => item.retailer_id) ??
-        product?.statusByRetailer?.map((item) => item.id_retailer) ??
-        [];
-      const uniqueIds = [...new Set(ids)];
-
-      let activeRetailerId = activeRetailer?.id;
-      if (!activeRetailerId) {
-        const firstValid = product?.article?.categoryRetailer?.find((item) =>
-          uniqueIds.includes(item.id_retailer || item.retailer_id)
-        );
-        if (firstValid) {
-          activeRetailerId = firstValid.id_retailer || firstValid.retailer_id;
-        }
-      }
-
-      const categoryRetailer =
-        product?.article?.categoryRetailer?.filter(
-          (item) =>
-            uniqueIds.includes(item.id_retailer) &&
-            item.id_retailer === activeRetailerId
-        ) ??
-        product?.article?.categoryRetailer?.filter(
-          (item) =>
-            uniqueIds.includes(item.retailer_id) &&
-            item.retailer_id === activeRetailerId
-        ) ??
-        [];
-
-      const categoryName = categoryRetailer[0]?.category_name;
-      const categoryId = categoryRetailer[0]?.id_category;
-
-      const category_name =
-        categoryName ??
-        (product?.article?.company_name || product?.categoryName);
-      const category_id =
-        categoryId ??
-        parseInt(product?.article?.id_category || product?.id_category);
-
-      const retailer_id = activeRetailerId ?? categoryRetailer?.id_retailer;
-
-      const services = await getRetailerServices(
-        product?.id_article || product?.article?.id_article,
-        category_name,
-        category_id,
-        version,
-        token,
-        retailer_id
-      );
-
-      if (auditableVersion && retailer_id) {
-        loadAuditableData();
-      }
-
-      setServices(services);
-      const generalServices = await getServices();
-
-      setImages({ action: "init", init: services[2] });
-
-      if (services[2]?.values?.length > 0) setActiveImage(0);
-
-      const data = [
-        {
-          id_article: product?.article?.id_article,
-          relations: [
-            {
-              id_retailer: retailer_id,
-              id_category: category_id,
-            },
-          ],
-          version: product.version,
-        },
-      ];
-
-      const headers = { Authorization: token };
-      getPercentage({ data, headers }).then((res) => {
-        setPercentages(JSON.parse(res?.[0]?.body));
-      });
-
-      setImages({ action: "orderImages", retailerId: activeRetailer.id });
-
-      setLoading(false);
-    } catch (error) {
-      setLoading(false);
-      console.log(error);
-    }
-  };
-
-  useEffect(() => {
-    setLoading(true);
-    loadData();
-  }, [activeRetailer]);
-
-  const getServices = async () => {
-    const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${
-        product?.article?.id_article
-      }&orderId=${product?.article?.id_order || product.orderId}&end=true`
-    );
-    const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
-
-    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 translateConcept = (concept) => {
-    const translation = {
-      datasheet: "Ficha técnica",
-      description: "Descripción",
-      images: "Imágenes",
-    };
-    return translation[concept];
-  };
-
-  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);
-  };
-
-  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] || [],
-        },
-      },
-    });
-  };
-
-  useEffect(() => {
-    loadAssignations(product);
-  }, [userGroups]);
-
-  useEffect(() => {
-    const retailerPercentages =
-      percentages?.[0]?.relations?.[0]?.percentagesGeneral;
-
-    const requiredPercentage = retailerPercentages?.required;
-
-    setActivePercentage(requiredPercentage);
-
-    // const retailers = product?.retailersAvailable || product?.retailers;
-    // if (
-    //   Object.keys(percentages[product.article.id_article] ?? {})?.length > 0
-    // ) {
-    //   retailers?.forEach((retailer, index) => {
-    //     retailer["percentage"] = Number(
-    //       percentages[product.article.id_article][retailer.id]
-    //         ?.percentageRequired
-    //     );
-    //   });
-    // }
-    // setActivePercentage(retailers[0]?.percentage);
-  }, [percentages]);
-
-  useEffect(() => {
-    getInputsData(services, activeRetailer, setDatasheets, setDescriptions);
-    auditableVersion && loadAuditableData();
-    setActivePercentage(Math.round(activeRetailer?.percentage, 0));
-    activeRetailer?.id &&
-      setImages({ action: "orderImages", retailerId: activeRetailer.id });
-  }, [activeRetailer, services]);
-
-  const thumbs = () => {
-    const imageInputs = socketType?.slice();
-    const imageType = images?.imageType?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-    }));
-    const imagePackagingType = images?.imagePackagingType?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-    }));
-    const imageShotType = images?.imageShotType?.map((e) => ({
-      value: e?.id,
-      name: e?.type_shot,
-    }));
-    return images?.values?.map((image, index) => (
-      <GalleryElement
-        setCheckAll={setCheckAll}
-        key={index + "-" + image.name}
-        image={image}
-        gridLayout={imageLayout}
-        id={"gallery-element-" + index}
-        index={index + "-" + image.name + "-" + compare}
-        number={index}
-        imageType={imageType}
-        imagePackagingType={imagePackagingType}
-        imageInputs={imageInputs}
-        imageShotType={imageShotType}
-        setSocketType={setSocketType}
-        changeImage={setImages}
-        selectedImages={selectedImages}
-        setSelectedImages={setSelectedImages}
-        auditImages={auditImages}
-        compare={compare}
-      />
-    ));
-  };
-
-  const 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 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);
-      }
-    }
-  };
-
-  useEffect(() => {
-    const imageInputs = images?.inputs?.map((e) => ({
-      value: e?.id,
-      name: e?.name,
-      required: e?.required,
-      active: images?.values?.some((value) => value?.image_id === e?.id),
-    }));
-    setSocketType(imageInputs);
-  }, [images]);
-
-  const updateImages = useCallback(async () => {
-    const imagesList = images?.values?.slice();
-    const imagesListTemp = imagesList?.reduce((acc, image) => {
-      acc[image?.image_id] = ++acc[image?.image_id] || 0;
-      return acc;
-    }, {});
-
-    const duplicated = imagesList?.filter((image) => {
-      return imagesListTemp[image?.image_id];
-    });
-
-    const 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 evaluationFinished = (userId, tab, statusArray) => {
-    const srv = servicesData.filter((serv) => serv.service === getConcept(tab));
-    const srvActive = srv
-      .find((serv) => serv.id_retailer === activeRetailer?.id)
-      ?.status?.replace(/.*\//, "");
-    const currStatus = product[`${getConcept(tab)}_status`]?.replace(
-      /.*\//,
-      ""
-    );
-    const unvalidated = ["IE", "CA"].includes(currStatus);
-
-    const auditorUnvalidated = !["RA", "AA", "ACA", "AP"].includes(currStatus);
-
-    switch (userId) {
-      case 7:
-      case 8:
-        return (
-          (statusArray.includes(srvActive) &&
-            statusArray.includes(product?.status)) ||
-          srv.filter((serv) =>
-            statusArray.includes(serv.status?.replace(/.*\//, ""))
-          ).length === srv.length
-        );
-      case 4:
-      case 5:
-        return (
-          unvalidated &&
-          ["CA", "IE"].includes(product.status) && // "RC", "AC", "AA", "AP", "ACA"
-          srv.filter((serv) => statusArray.includes(serv.status)).length ===
-            srv.length
-        );
-      case 6:
-        return (
-          statusArray.includes(product.status) && // RP, RCA, AC, RA true
-          srv.every((serv) =>
-            ["RA", "AA", "AP", "ACA"].includes(serv.status)
-          ) &&
-          auditorUnvalidated
-        );
-      default:
-        break;
-    }
-  };
-
-  const getConcept = (tab) => {
-    switch (tab) {
-      case "Descripción":
-        return "description";
-      case "Ficha técnica":
-        return "datasheet";
-      case "Imágenes":
-        return "images";
-    }
-  };
-
-  const approveRejectButtons = (action) => {
-    let concept = getConcept(action || activeTab);
-
-    const retailerStatus = servicesData
-      .find(
-        (srv) =>
-          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 approveRejectAllButtons = () => {
-    let concepts = [];
-    switch (user.id_role) {
-      case 4:
-        concepts = ["description", "datasheet"];
-        break;
-      case 5:
-        concepts = ["images"];
-        break;
-
-      default:
-        concepts = ["description", "datasheet", "images"];
-        break;
-    }
-
-    const 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 =
-      servicesData.every((srv) =>
-        ["AC", "RP", "RCA"].includes(srv?.status?.replace(/.*\//, ""))
-      ) && [1, 6].includes(user.id_role);
-    return adminFacilitatorCanEvaluate || adminAuditorCanEvaluate;
-  };
-
-  const getSectionIcon = () => {
-    switch (activeTab) {
-      case "Ficha técnica":
-        setIcon(attributesSent);
-        break;
-      case "Descripción":
-        setIcon(descriptionSent);
-        break;
-      case "Imágenes":
-        setIcon(imagesSent);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const sendToFacilitator = async (result) => {
-    if (!loading) setLoading(true);
-    try {
-      let concept = getConcept(activeTab);
-
-      const productTemp = { ...product };
-      const evalStatus = retailerStatus;
-      const articleId = product.article.id_article;
-      const orderId = product.orderId;
-
-      let data = {
-        articleId,
-        orderId,
-        concept,
-        evalStatus,
-        retailerId: activeRetailer.id,
-      };
-      let res;
-      let message;
-      if (result) {
-        data.result = result;
-        res = await axios.put(
-          `${process.env.REACT_APP_EVALUATION_ENDPOINT}`,
-          data,
-          {
-            headers: {
-              Authorization: token,
-            },
-          }
-        );
-        getServices();
-      } else {
-        const specialistDone = ["RC", "RA", "CA"].includes(evalStatus);
-
-        if (specialistDone) {
-          message = `${activeTab} enviada a facilitador`;
-          getSectionIcon();
-        } else if (["IE", "AC", "RP", "RCA"].includes(evalStatus)) {
-          message = "Evaluación enviada";
-          getSectionIcon();
-        }
-        res = await axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
-          headers: {
-            Authorization: token,
-          },
-        });
-      }
-      if (res.data.statusCode === 200) {
-        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse(
-          res.data.body
-        );
-        const messageToChat = createMessage(
-          product.retailers,
-          activeRetailer.id,
-          evalStatus,
-          newStatus,
-          activeTab
-        );
-
-        const data = {
-          paramsBody: {
-            id: product.article.id_article,
-            version: version,
-            items: [{ type: "status", value: messageToChat }],
-            retailerId: activeRetailer.id,
-            status: product.status,
-          },
-          paramsHeader: { Authorization: token },
-        };
-        await sendMessage(data);
-        if (newOrderStatus) productTemp.status = newArticleStatus[articleId];
-        productTemp[`${concept}_status`] = newStatus;
-        await loadData();
-        if (message) setMessage(message);
-        sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-        setProduct(productTemp);
-      }
-    } catch (error) {
-      setLoading(false);
-      console.log(error);
-    }
-  };
-
-  const userAssigned = (tab, rol) => {
-    let concept = getConcept(activeTab);
-
-    const allowedRoles = [1, 4, 5, 6, 7, 8];
-    const validUser = allowedRoles.includes(user?.id_role);
-
-    if (!rol) {
-      switch (user.id_role) {
-        case 4:
-        case 5:
-          rol = "facilitator";
-          break;
-        case 7:
-        case 8:
-          rol = "especialist";
-          break;
-      }
-    }
-
-    return (
-      user.id_role === 1 ||
-      (product.article[`id_${concept}_${rol}`] === user.id_user && validUser)
-    );
-  };
-
-  const auditorAssigned = () => {
-    return product?.article[`id_auditor`] === user.id_user;
-  };
-
-  const 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 getRequired = (services) => {
-    try {
-      const objetcTemp = {};
-      const datasheetServicesArray = Object.values(services[0]);
-      const allDatasheetInputs = datasheetServicesArray.pop();
-      const descriptionsServicesArray = services[1];
-
-      let dsInputsRequired = [];
-
-      let desInputsRequired = 0;
-      datasheetServicesArray?.forEach((datasheet) => {
-        const [requested] = servicesData?.filter(
-          (srv) =>
-            srv.id_retailer === datasheet.retailer.id &&
-            srv.service === getConcept(activeTab)
-        );
-
-        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)
-                );
-              })
-            );
-          });
-      });
-
-      objetcTemp["Ficha técnica"] = dsInputsRequired.length;
-
-      const regex = /(<\/?p>)|(<\/?strong>)|(<br>)/gm;
-      descriptionsServicesArray.forEach((description) => {
-        if (description.id != activeRetailer.id) return;
-
-        const [requested] = servicesData.filter(
-          (srv) =>
-            srv.id_retailer === description.id &&
-            srv.service === getConcept(activeTab)
-        );
-
-        if (requested) {
-          description.inputs.forEach((input) => {
-            if (
-              input.required &&
-              (!input.value || input.value?.replace(regex, "") === "")
-            ) {
-              desInputsRequired++;
-            }
-          });
-        }
-      });
-
-      objetcTemp["Descripción"] = desInputsRequired;
-
-      const retailersRequested = [];
-
-      services[2]?.retailerMandatories?.forEach((retMan) =>
-        retMan.forEach((rm) => retailersRequested.push(rm))
-      );
-
-      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
-      );
-
-      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.log(error);
-    }
-  };
-
-  useEffect(() => {
-    setComment(comments[activeTab]);
-  }, [activeTab]);
-
-  const commentRevised = async () => {
-    const data = {
-      commentId: comment.id,
-    };
-    await axios.put(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
-      headers: {
-        Authorization: sessionStorage.getItem("jwt"),
-      },
-    });
-    setCrossComment(false);
-    await getComments();
-  };
-
-  const 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: product.orderId,
-          articleId: product?.article?.id_article,
-        },
-      ],
-      concept: concept,
-      userId: assignationId,
-    };
-    await axios({
-      method: "post",
-      url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
-      data,
-      headers: {
-        Authorization: token,
-      },
-    });
-    loadAssignations(productTemp);
-    sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-  };
-
-  const downloadImages = () => {
-    selectedImages.length > 0
-      ? selectedImages.forEach((e) => {
-          if (e.id) {
-            saveAs(
-              `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
-              `${product.article.upc}_${e.name}.${e.ext}`
-            );
-          }
-        })
-      : images?.values?.forEach((e) => {
-          if (e.id) {
-            saveAs(
-              `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${e.srcDB}`,
-              `${product.article.upc}_${e.name}.${e.ext}`
-            );
-          }
-        });
-  };
-
-  const deleteImages = async () => {
-    setLoading(true);
-    const { values } = images;
-    const imgsInBack = [];
-
-    selectedImages.forEach((selectedImg) => {
-      if (selectedImg.id) imgsInBack.push(selectedImg);
-    });
-
-    const imgsLeft = values.filter(
-      (value) => selectedImages.indexOf(value) === -1
-    );
-
-    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);
-      }
-    }
-
-    setImages({
-      action: "deleteImage",
-      selectedImages,
-    });
-
-    getRequired([
-      services[0],
-      services[1],
-      { ...services[2], values: imgsLeft },
-    ]);
-
-    setLoading(false);
-
-    setMessage("");
-    setComponentsArray([]);
-  };
-
-  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 getRetailerStatus = (servicesData, tab) => {
-    const arr = servicesData?.slice();
-    let concept = getConcept(tab);
-
-    let retailerService = {};
-    [retailerService] = arr?.filter(
-      (service) =>
-        service.id_retailer === activeRetailer?.id &&
-        service.service === concept
-    );
-    return retailerService ? retailerService.status : "NS";
-  };
-
-  useEffect(() => {
-    let status = getRetailerStatus(servicesData, activeTab);
-    setRetailerStatus(status);
-  }, [activeTab, servicesData, activeRetailer]);
-
-  useEffect(() => {
-    services.length > 0 && getRequired(services);
-  }, [services, servicesData, activeTab]);
-
-  useEffect(() => {
-    setSaving(loading);
-  }, [loading]);
-
-  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 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);
-
-      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);
-    }
-  };
-
-  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}
-          />
-          <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}
-          />
-        </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}
-          />
-          <FullTabsMenu
-            tabsSections={tabsSections}
-            status={retailerStatus}
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-            setImageLayout={setImageLayout}
-            downloadImages={downloadImages}
-            askToDeleteImages={askToDeleteImages}
-            assig={assig[activeTab]}
-            setAssignation={setAssignation}
-            isRetailer={isRetailer}
-            showSaveButton={auditorAssigned() || userAssigned()}
-            version={version}
-            desc={desc}
-            setDesc={setDesc}
-            fich={fich}
-            setFich={setFich}
-            imag={imag}
-            setImag={setImag}
-            updatedDescriptions={updatedDescriptions}
-            setUpdatedDescriptions={setUpdatedDescriptions}
-            updatedDatasheets={updatedDatasheets}
-            setUpdatedDatasheets={setUpdatedDatasheets}
-            images={images}
-            setImages={setImages}
-            selectedImages={selectedImages}
-            setSelectedImages={setSelectedImages}
-            setShowVersionSelector={setShowVersionSelector}
-            onClickSave={() => {
-              switch (activeTab) {
-                case "Descripción":
-                  !saving &&
-                    product?.description_status !== "NS" &&
-                    saveDescriptions();
-                  break;
-                case "Ficha técnica":
-                  !saving &&
-                    product?.datasheet_status !== "NS" &&
-                    saveDatasheets();
-                  break;
-                case "Imágenes":
-                  !saving && product?.images_status !== "NS" && updateImages();
-                  break;
-
-                default:
-                  break;
-              }
-            }}
-            canAssign={![7, 8].includes(user.id_role)}
-          />
-          <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}
-                    />
-                  )}
-
-                {activeTab === "Ficha técnica" &&
-                  (product?.datasheet_status !== "NS" ? (
-                    datasheets[0]?.data?.map((dataGroup, index) => (
-                      <InputGroup
-                        key={index + "-" + activeRetailer.name}
-                        articleId={product.article.id_article}
-                        version={version}
-                        activeSection={activeTab}
-                        inputGroup={dataGroup}
-                        dataInputs={datasheets[1]}
-                        auditInputs={auditDatasheets[1]}
-                        updatedDatasheets={updatedDatasheets}
-                        setUpdatedDatasheets={setUpdatedDatasheets}
-                        compare={compare}
-                      />
-                    ))
-                  ) : (
-                    <ScreenHeader
-                      text={"No cuentas con este servicio"}
-                      headerType={"input-name-header"}
-                    />
-                  ))}
-                {activeTab === "Descripción" &&
-                  (product?.description_status !== "NS" ? (
-                    <InputGroup
-                      activeSection={activeTab}
-                      inputGroup={descriptions[0]}
-                      auditInputGroup={auditDescriptions[0]}
-                      updatedDescriptions={updatedDescriptions}
-                      setUpdatedDescriptions={setUpdatedDescriptions}
-                      articleId={product?.article?.id_article}
-                      version={version}
-                      dinamicHeight={true}
-                      compare={compare}
-                    />
-                  ) : (
-                    <ScreenHeader
-                      text={"No cuentas con este servicio"}
-                      headerType={"input-name-header"}
-                    />
-                  ))}
-
-                {activeTab === "Imágenes" &&
-                  (product?.images_status !== "NS" ? (
-                    <section className="container">
-                      <div {...getRootProps({ className: "dropzone" })}>
-                        <input {...getInputProps()} />
-                        <aside>{thumbs()}</aside>
-                      </div>
-                    </section>
-                  ) : (
-                    <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={"general-transparent-button"}
-                        label={"Enviar comentario"}
-                        onClick={handleCommentSubmit}
-                      />
-                    </div>
-                  </div>
-                ) : (
-                  <div className="feedback-box">
-                    <Commentary
-                      comment={comment?.message}
-                      reviewed={crossComment}
-                    />
-                    <Button
-                      buttonType={"circular-button accept-button"}
-                      onClick={async () => {
-                        setCrossComment(true);
-                        commentRevised();
-                      }}
-                    />
-                  </div>
-                )}
-                {[7, 8].includes(user.id_role) && (
-                  <Button
-                    buttonType={
-                      evaluationFinished(
-                        user.id_role,
-                        activeTab,
-                        statusArray
-                      ) && requiredNull[activeTab] === 0
-                        ? "general-green-button"
-                        : "general-button-disabled"
-                    }
-                    label={"Enviar evaluación"}
-                    onClick={() => sendToFacilitator()}
-                  />
-                )}
-              </div>
-            )}
-        </div>
-      </div>
-      {showModal && (
-        <ProductImageModal
-          images={images}
-          setShowModal={setShowModal}
-          sendToFacilitator={sendToFacilitator}
-          approveRejectButtons={approveRejectButtons()}
-        />
-      )}
-      {message.length > 0 && (
-        <GenericModal
-          buttonType={componentsArray.length > 0 && "delete-product"}
-          componentsArray={
-            componentsArray.length > 0
-              ? componentsArray
-              : [
-                  <img key="1" src={succes} alt="success icon" />,
-                  <ScreenHeader
-                    key="2"
-                    headerType={"retailer-name-header"}
-                    text={message}
-                    color={"white"}
-                  />,
-                ]
-          }
-          onClick={() => setMessage("")}
-        />
-      )}
-      {showVersionSelector && (
-        <VersionSelector
-          modalId={"version-selector"}
-          articleId={product.article.id_article}
-          setVersion={setVersion}
-          companyName={product.article.company_name}
-          currentVersion={version}
-          setShowVersionSelector={setShowVersionSelector}
-          jwt={token}
-        />
-      )}
-      {showRejectModal && (
-        <Modal
-          title={`Agregar mensaje de rechazo para ${activeTab?.toLowerCase()}`}
-          show={showRejectModal}
-          customComponent={
-            <TagAndInput
-              inputType={"textarea"}
-              inputId={"modal-message-box"}
-              index={0}
-              color={"white"}
-            />
-          }
-          buttons={[
-            <ButtonV2
-              key={"btn-Cancelar"}
-              type={"white"}
-              label={"Cancelar"}
-              size={12}
-              onClick={() => {
-                setShowRejectModal(false);
-              }}
-            />,
-            <ButtonV2
-              key={"btn-Aceptar"}
-              type={"pink"}
-              label={"Aceptar"}
-              size={12}
-              onClick={async (e) => {
-                const elements = document.querySelectorAll(
-                  "#modal-message-box .ql-container .ql-editor > p"
-                );
-
-                if (!elements || elements.length === 0) {
-                  console.error("Elemento no encontrado");
-                  return;
-                }
-
-                let brCounter = 0;
-
-                elements.forEach((el) => {
-                  const body = el.innerHTML;
-
-                  if (typeof body !== "string") {
-                    console.log("El contenido de body no es una cadena", body);
-                    isMessageEmpty = true;
-                    return;
-                  }
-
-                  if (!body || body.replace(/<.*?\/?>/gm, "").trim() === "") {
-                    brCounter++;
-                  }
-                });
-
-                if (brCounter === elements.length) {
-                  const container = document.querySelector(
-                    ".container-customComponent"
-                  );
-
-                  const existingAlert = container.querySelector(".alert-error");
-                  if (existingAlert) {
-                    return; // Si ya existe, no crear otra
-                  }
-
-                  // 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,
-          }));
-        }}
-      />
-    </Container>
-  );
-};