contentoh-components-library 10.0.0 → 12.1.17

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

@@ -7,7 +7,12 @@ import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { InputGroup } from "../../organisms/InputGroup";
 import { useEffect, useReducer, useState, useCallback } from "react";
 import { GalleryElement } from "../../molecules/GalleryElement";
-import { getRetailerServices, getPercentage } from "../../../global-files/data";
+import { saveAs } from "file-saver";
+import {
+  getRetailerServices,
+  getPercentage,
+  fetchUsers,
+} from "../../../global-files/data";
 import { GalleryHeader } from "../../molecules/GalleryHeader";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { useDropzone } from "react-dropzone";
@@ -20,6 +25,12 @@ import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
 import { TagAndInput } from "../../molecules/TagAndInput/index";
 import { Button } from "../../atoms/GeneralButton";
 import { Commentary } from "../../atoms/Commentary";
+import { GenericModal } from "../../atoms/GenericModal";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Loading } from "../../atoms/Loading";
+import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
+import { getNewStatus } from "../../../global-files/data";
+import errorModal from "../../../assets/images/genericModal/errorModal.svg";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -33,8 +44,17 @@ const reducerImages = (state, action) => {
       values[action.index][action.attribute] = action.value;
       return { ...state, values };
     case "changeAttrValue":
-      attrForImgs[action.retailer][action.index].value = action.value;
+      action.retailersId.forEach((ret) => {
+        attrForImgs[ret][action.index].name === action.name &&
+          (attrForImgs[ret][action.index].value = action.value);
+      });
+
       return { ...state, attrForImgs, values };
+    case "deleteImage":
+      values = values.filter(
+        (value) => action.selectedImages.indexOf(value) === -1
+      );
+      return { ...state, values };
     default:
       return state;
   }
@@ -54,21 +74,20 @@ const myBucket = new AWS.S3({
 });
 
 export const RetailerProductEdition = ({
-  productData,
   tabsSections,
-  articleId,
   productSelected = {},
   user = {},
+  location = {},
+  token,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
-  const [imageLayout, setImageLayout] = useState(true);
+  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 [retailerSelected, setRetailerSelected] = useState(54); // revisar después como trabajar esto de mejor forma
   const { getRootProps, getInputProps } = useDropzone({
     accept: "image/*",
     noKeyboard: true,
@@ -79,23 +98,25 @@ export const RetailerProductEdition = ({
       acceptedFiles.map((file) => {
         const reader = new FileReader();
         reader.fileName = file.name;
-        reader.onload = async function (e) {
+        reader.onload = function (e) {
           const ext = e.srcElement.fileName.split(".");
           const img = new Image();
           img.src = e.target.result;
-          const width = img.width;
-          const height = img.height;
-          const newImg = {
-            action: "addImg",
-            img: {
-              src: e.target.result,
-              name: e.target.fileName,
-              ext: ext[ext.length - 1],
-              width: width,
-              height: width,
-            },
-          };
-          setImages(newImg);
+          setTimeout(() => {
+            const width = img.width;
+            const height = img.height;
+            const newImg = {
+              action: "addImg",
+              img: {
+                src: e.target.result,
+                name: e.target.fileName,
+                ext: ext[ext.length - 1],
+                width: width,
+                height: height,
+              },
+            };
+            setImages(newImg);
+          }, 500);
         };
         reader.onerror = function (error) {
           console.log("dropzoneError: ", error);
@@ -110,63 +131,90 @@ export const RetailerProductEdition = ({
   const [imagesUploaded, setImagesUploaded] = useState(false);
   const [dataImages, setDataImages] = useState();
   const [percentages, setPercentages] = useState(
-    new Array(productSelected.retailers.length).fill({ percentage: 0 })
+    new Array(product?.retailers?.length).fill({ percentage: 0 })
   );
   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({});
+  const [product, setProduct] = useState(
+    JSON.parse(sessionStorage.getItem("productSelected"))
+      ? JSON.parse(sessionStorage.getItem("productSelected"))
+      : productSelected
+  );
   const [icon, setIcon] = useState(null);
-  const [version, setVersion] = useState(productSelected?.version);
+  const [version, setVersion] = useState(product?.version);
   const [comments, setComments] = useState({});
-  const [requiredNull, setRequiredNull] = useState(0);
+  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 [servicesStatus, setServicesStatus] = useState([]);
+  const [saving, setSaving] = useState(loading);
+
+  useEffect(() => {
+    checkAll && setSelectedImages(images.values);
+  }, [checkAll]);
 
   const loadData = async () => {
-    const services = await getRetailerServices(
-      productSelected.article.id_article,
-      parseInt(productSelected.article.id_category),
-      productSelected.version
-    );
-    console.log(services, "parsedResponse");
-    //Converts the data inside the datasheets object to array
-    setServices(services);
-    setActiveRetailer(productSelected?.retailers[0]);
-    setImages({
-      action: "init",
-      init: services[2],
-    });
-    if (services[2]?.values?.length > 0) setActiveImage(0);
-    setProduct(productSelected);
-  };
+    try {
+      const services = await getRetailerServices(
+        product?.article?.id_article,
+        parseInt(product?.article?.id_category),
+        product?.version
+      );
+      //Converts the data inside the datasheets object to array
+      setServices(services);
+      getServices();
 
-  const getServices = async (tab) => {
-    let serviceActive = "";
-    switch (tab) {
-      case "Ficha técnica":
-        serviceActive = "datasheet";
-        break;
-      case "Imágenes":
-        serviceActive = "images";
-        break;
-      default:
-        serviceActive = "description";
-        break;
+      //setActiveRetailer(product?.retailers[0]);
+      setImages({
+        action: "init",
+        init: services[2],
+      });
+      if (services[2]?.values?.length > 0) setActiveImage(0);
+
+      getPercentage({ data: [product] }).then((res) => setPercentages(res));
+      setLoading(false);
+    } catch (error) {
+      console.log(error);
     }
-    const selected = productSelected;
+  };
+
+  const getServices = async () => {
     const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${selected.article.id_article}&orderId=${selected.article.id_order}&end=true`
+      `${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 parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
 
+    let retailers = product.retailers || product.retailersAvailable;
+    let active = retailers?.filter((retailer) =>
+      parsedResponse?.map((srv) => srv.id_retailer).includes(retailer.id)
+    )[0];
+    !activeRetailer.id && setActiveRetailer(active ? active : retailers[0]);
     setServicesData(parsedResponse);
   };
 
   const translateConcept = (concept) => {
     let translation = "";
     if (concept === "datasheet") {
-      translation = "Ficha ténica";
+      translation = "Ficha técnica";
     } else if (concept === "description") {
       translation = "Descripción";
     } else if (concept === "images") {
@@ -175,183 +223,292 @@ export const RetailerProductEdition = ({
     return translation;
   };
 
-  const getComments = async (tab) => {
+  const getComments = async (tab = "Descripción") => {
     const commentsResponse = await Promise.all([
       axios.get(
-        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${productSelected?.article?.id_article}&concept=description&orderIdColab=${productSelected?.orderId}&version=${version}`
+        `${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=${productSelected?.article?.id_article}&concept=datasheet&orderIdColab=${productSelected?.orderId}&version=${version}`
+        `${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=${productSelected?.article?.id_article}&concept=images&orderIdColab=${productSelected?.orderId}&version=${version}`
+        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${product?.article?.id_article}&concept=images&orderIdColab=${product?.orderId}&version=${version}`
       ),
     ]);
 
     let comments = {};
-    commentsResponse.map(
+    commentsResponse.forEach(
       (comment) =>
-        JSON.parse(comment.data.body).data[0] &&
+        JSON.parse(comment?.data?.body).data[0] &&
         (comments[
-          translateConcept(JSON.parse(comment.data.body).data[0]?.concept)
-        ] = JSON.parse(comment.data.body).data[0])
+          translateConcept(JSON.parse(comment?.data?.body)?.data[0]?.concept)
+        ] = JSON.parse(comment?.data?.body).data[0])
     );
+    setComment(comments[tab]);
     setComments(comments);
-    //const comment = JSON.parse(commentsResponse.data.body).data;
-    //setComment(comment[0]);
   };
 
-  useEffect(() => {
+  useEffect(async () => {
     loadData();
-    getPercentage({ data: [productSelected] }).then((res) =>
-      setPercentages(res)
-    );
-    getServices();
     getComments();
-  }, []);
+    setUserGroups(await fetchUsers(token));
+    let arr = [];
+    switch (user.id_role) {
+      case 7:
+      case 8:
+        arr = ["IN_PROGRESS", "RF", "RA"];
+        break;
+      case 4:
+      case 5:
+        arr = ["RF", "AF", "AA", "AP", "AC"];
+        break;
+      case 6:
+        arr = ["RP", "RC", "AF", "RA"];
+        break;
+      default:
+        arr = [];
+        break;
+    }
+    setStatusArray(arr);
+  }, [product]);
+
+  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(() => {
-    productSelected.retailers.forEach((retailer) => {
-      retailer["percentage"] = percentages.filter(
-        (percent) => retailer.id === percent.id_retailer
+    loadAssignations(product);
+  }, [userGroups]);
+
+  useEffect(() => {
+    product?.retailers?.forEach((retailer) => {
+      retailer["percentage"] = percentages?.filter(
+        (percent) => retailer?.id === percent?.id_retailer
       )[0]?.percentage;
     });
-    setActivePercentage(productSelected?.retailers[0]?.percentage);
+    setActivePercentage(product?.retailers[0]?.percentage);
   }, [percentages]);
 
   useEffect(() => {
     if (services.length > 0) {
-      services[0][activeRetailer?.id].data = Object.values(
-        services[0][activeRetailer?.id].data
-      );
-      setActivePercentage(Math.round(activeRetailer.percentage, 0));
-      setDatasheets([services[0][activeRetailer.id], services[0].inputs]);
-      setDescriptions(
-        services[1].filter((service) => service.id === activeRetailer.id)
+      if (services[0][activeRetailer.id]?.data)
+        services[0][activeRetailer.id].data = Object.values(
+          services[0][activeRetailer.id].data
+        );
+      setActivePercentage(Math.round(activeRetailer?.percentage, 0));
+
+      const datagroups = services[0][activeRetailer?.id];
+      const inputs = services[0]?.inputs;
+      const descriptions = services[1]?.filter(
+        (service) => service?.id === activeRetailer?.id
       );
+      setDatasheets([datagroups, inputs]);
+      setDescriptions(descriptions);
     }
-  }, [activeRetailer]);
+  }, [activeRetailer, services]);
 
   const thumbs = () => {
-    const imageInputs = images.inputs.map((e) => ({
-      value: e.id,
-      name: e.name,
+    const imageInputs = socketType?.slice();
+    const imageType = images?.imageType?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
     }));
-    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 imagePackagingType = images?.imagePackagingType?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
     }));
     return images?.values?.map((image, index) => (
       <GalleryElement
+        setCheckAll={setCheckAll}
         key={index}
         image={image}
         gridLayout={imageLayout}
         id={"gallery-element-" + index}
-        index={index}
+        index={index + "-" + image.name}
+        number={index}
         imageType={imageType}
         imagePackagingType={imagePackagingType}
         imageInputs={imageInputs}
+        setSocketType={setSocketType}
         changeImage={setImages}
+        selectedImages={selectedImages}
+        setSelectedImages={setSelectedImages}
       />
     ));
   };
 
   const saveDescriptions = async () => {
+    setLoading(true);
+    const productTemp = product;
     const dataObject = {
-      articleId: productSelected?.article?.id_article,
+      articleId: product?.article?.id_article,
       articleData: updatedDescriptions,
     };
+    if (product?.orderId) dataObject["orderId"] = product?.orderId;
     try {
       await axios.put(
         `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?description=true&version=${version}`,
         dataObject,
         {
           headers: {
-            Authorization:
-              "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+            Authorization: token,
           },
         }
       );
+      if (productTemp.status === "ASSIGNED") {
+        productTemp.status = "IN_PROGRESS";
+        setProduct(productTemp);
+        sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+      }
+
+      setMessage("Descripciones guardadas con éxito");
+      loadData();
     } catch (error) {
       console.log(error);
     }
   };
 
   const saveDatasheets = async () => {
+    setLoading(true);
+    const productTemp = product;
     const dataObject = {
-      articleId: productSelected?.article?.id_article,
+      articleId: product?.article?.id_article,
       articleData: updatedDatasheets,
     };
+    console.log(updatedDatasheets, "updatedDatasheets");
+    if (product?.orderId) dataObject["orderId"] = product?.orderId;
     try {
       await axios.put(
         `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?datasheet=true&version=${version}`,
         dataObject,
         {
           headers: {
-            Authorization:
-              "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+            Authorization: token,
           },
         }
       );
-      console.log("saved");
+      setMessage("Fichas técnicas guardadas");
+      if (productTemp.status === "ASSIGNED") {
+        productTemp.status = "IN_PROGRESS";
+        setProduct(productTemp);
+        sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+      }
+      loadData();
     } catch (error) {
       console.log(error);
     }
   };
 
+  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;
+    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 duplicated = imagesList?.filter((image) => {
+      return imagesListTemp[image?.image_id];
     });
 
     const attrForImgs = Object.values(images?.attrForImgs);
     attrForImgs.pop();
     const data = {
-      articleId,
-      attrReqImgs: attrForImgs.map((e) => ({
-        attrId: e[0].id,
-        value: e[0].value,
+      articleId: product?.article?.id_article,
+      attrReqImgs: attrForImgs?.map((e) => ({
+        attrId: e[0]?.id,
+        value: e[0]?.value,
       })),
-      articleData: imagesList.filter((e) => !e.id),
-      updateImages: imagesList.filter((e) => e.id),
+      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
+      data?.articleData?.length === 0
         ? true
-        : data.articleData.every((e, i) => {
-            if (e.image_id && e.packing_type && e.image_type) {
+        : data?.articleData?.every((e, i) => {
+            if (e?.image_id && e?.packing_type && e?.image_type) {
               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 (valid && data?.updateImages?.length > 0 && duplicated?.length === 0) {
+      valid = data?.updateImages?.every((e, i) => {
+        if (e?.image_id && e?.packing_type && e?.image_type) {
           return true;
         }
         return false;
       });
     }
-    if (valid && duplicated.length === 0) {
+    if (valid && duplicated?.length === 0) {
+      setLoading(true);
       try {
-        data.articleData.forEach((e) => {
+        data?.articleData?.forEach((e) => {
           e.uuid = uuidv4();
         });
         setDataImages(data);
-        if (data.articleData.length > 0) {
+        if (data?.articleData?.length > 0) {
           setImagesUploaded(false);
           const promiseArray = [];
-          data.articleData.forEach((e) => {
+          data?.articleData?.forEach((e) => {
             const file = Buffer.from(
               e.src.replace(/^data:image\/\w+;base64,/, ""),
               "base64"
@@ -360,7 +517,7 @@ export const RetailerProductEdition = ({
               ACL: "public-read",
               Body: file,
               Bucket: S3_BUCKET,
-              Key: `id-${data.articleId}/${version}/${e.image_id}-${e.uuid}.${e.ext}`,
+              Key: `id-${data.articleId}/${version}/${e?.image_id}-${e?.uuid}.${e?.ext}`,
             };
             promiseArray.push(myBucket.putObject(params).promise());
           });
@@ -369,35 +526,36 @@ export const RetailerProductEdition = ({
         } else {
           setImagesUploaded(true);
         }
+        let productTemp = product;
+        if (productTemp.status === "ASSIGNED") {
+          productTemp.status = "IN_PROGRESS";
+          setProduct(productTemp);
+          sessionStorage.setItem(
+            "productSelected",
+            JSON.stringify(productTemp)
+          );
+        }
       } catch (err) {
         console.log(err);
         // setMainLoading(false);
       }
     } else {
       // setMainLoading(false);
-      console.log(
-        "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.",
-        "Recuerda hay campos obligatorios y no podras avanzar si no estan completos."
+      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."
       );
-      // setAlertList((prev) => [
-      //   ...prev,
-      //   {
-      //     titleMsg: "Completa los campos que solicita cada una de la imágenes",
-      //     alertMsg:
-      //       "Recuerda 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) => {
+      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 {
@@ -406,40 +564,87 @@ export const RetailerProductEdition = ({
           dataImages,
           {
             headers: {
-              Authorization:
-                "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+              Authorization: token,
             },
           }
         );
-        console.log("imágenes guardadas con éxito");
+        setMessage("Imágenes guardadas con éxito");
+        sessionStorage.removeItem("imagesList");
+        loadData();
       } catch (error) {
         console.log(error);
       }
     }
   }, [dataImages, imagesUploaded]);
 
-  const approveRejectButtons = (action) => {
-    let concept = "";
-    switch (activeTab) {
-      case "Descripción":
-        concept = "description";
+  const evaluationFinished = (userId, tab, statusArray) => {
+    const srv = servicesData.filter((serv) => serv.service === getConcept(tab));
+    const [srvActive] = srv.filter(
+      (serv) => serv.id_retailer === activeRetailer?.id
+    );
+    const unvalidated =
+      product[`${getConcept(tab)}_status`] === "QF" ||
+      product[`${getConcept(tab)}_status`] === "IN_PROGRESS";
+
+    const auditorUnvalidated = !["RA", "AA", "AC", "AP"].includes(
+      product[`${getConcept(tab)}_status`]
+    );
+
+    switch (userId) {
+      case 7:
+      case 8:
+        return (
+          (["RA", "RF"].includes(product?.status) && //"IN_PROGRESS", "RF", "RA"
+            statusArray.includes(srvActive?.status)) ||
+          (statusArray.includes(product.status) &&
+            srv.filter((serv) => statusArray.includes(serv.status)).length ===
+              srv.length)
+        );
+      case 4:
+      case 5:
+        return (
+          unvalidated &&
+          ["IN_PROGRESS", "QF"].includes(product.status) && //"RF", "AF", "AA", "AP", "AC
+          srv.filter((serv) => statusArray.includes(serv.status)).length ===
+            srv.length
+        );
+      case 6:
+        return (
+          statusArray.includes(product.status) && //RP, RC, AF, RA true
+          srv.every((serv) => ["RA", "AA", "AP", "AC"].includes(serv.status)) &&
+          auditorUnvalidated
+        );
+      default:
         break;
+    }
+  };
+
+  const getConcept = (tab) => {
+    switch (tab) {
+      case "Descripción":
+        return "description";
       case "Ficha técnica":
-        concept = "datasheet";
-        break;
+        return "datasheet";
       case "Imágenes":
-        concept = "images";
-        break;
-      default:
-        break;
+        return "images";
     }
-    concept = action ? action : concept;
+  };
+
+  const approveRejectButtons = (action) => {
+    let concept = getConcept(action || activeTab);
+
+    const [retailerStatus] = servicesData.filter(
+      (srv) => srv.id_retailer === activeRetailer?.id && srv.service === concept
+    );
+
     return (
-      (productSelected[`${concept}_status`] === "QF" &&
+      (retailerStatus?.status === "QF" &&
         (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
-      (productSelected[`${concept}_status`] === "AF" &&
+      (retailerStatus?.status === "AF" && //sessionStorage product
+        (user.id_role === 1 || user.id_role === 6)) ||
+      (retailerStatus?.status === "RP" &&
         (user.id_role === 1 || user.id_role === 6)) ||
-      (productSelected[`${concept}_status`] === "RP" &&
+      (retailerStatus?.status === "RC" &&
         (user.id_role === 1 || user.id_role === 6))
     );
   };
@@ -460,168 +665,135 @@ export const RetailerProductEdition = ({
     }
   };
 
-  const updateCompaniesList = (status, result, retailerId, concept) => {
-    let serv = servicesData.slice();
-    let item = serv.find(
-      (item) => item.id_retailer === retailerId && item.service === concept
-    );
-    let index = serv.indexOf(item);
-    if (
-      status === "IN_PROGRESS" ||
-      status === "QF" ||
-      status === "RF" ||
-      status === "RA"
-    ) {
-      if (result === "A") {
-        if (activeTab === "Imágenes") {
-          serv.map((item) => {
-            item.status = "AF";
-          });
-        } else {
-          serv[index].status = "AF";
-        }
-      } else if (result === "R") {
-        if (activeTab === "Imágenes") {
-          serv.map((item) => {
-            item.status = "RF";
-          });
-        } else {
-          serv[index].status = "RF";
-        }
+  const sendToFacilitator = async (result) => {
+    setLoading(true);
+    try {
+      let concept = getConcept(activeTab);
+
+      let productTemp = { ...product };
+      let evalStatus = product[`${concept}_status`];
+
+      let data = {};
+      if (result) {
+        data = {
+          articleId: product.article.id_article,
+          orderId: product.orderId,
+          concept: concept,
+          result: result,
+          evalStatus: evalStatus,
+          retailerId: activeRetailer.id,
+        };
+
+        await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
+          headers: {
+            Authorization: token,
+          },
+        });
+        getServices();
       } else {
-        if (status === "IN_PROGRESS" || status === "ASSIGNED") {
-          serv.map((item) => {
-            item.status = "QF";
-          });
-        } else {
-          serv.map((item) => {
-            if (item.status === "RF" || item.status === "RA") {
-              item.status = "QF";
-            }
-            return item;
-          });
-        }
-      }
-    } else if (status === "AF" || status === "RP") {
-      if (result === "A") {
-        if (activeTab === "Imágenes") {
-          serv.map((item) => {
-            item.status = "AA";
-          });
-        } else {
-          serv[index].status = "AA";
+        const specialistDone =
+          evalStatus === "RF" ||
+          evalStatus === "RA" ||
+          evalStatus === "IN_PROGRESS";
+
+        if (specialistDone) {
+          setMessage(`${activeTab} enviada a facilitador`);
+          getSectionIcon();
+        } else if (evalStatus === "QF") {
+          setMessage("Evaluación enviada");
+          getSectionIcon();
+        } else if (evalStatus === "AF") {
+          setMessage("Evaluación enviada");
+          getSectionIcon();
+        } else if (evalStatus === "RP") {
+          setMessage("Evaluación enviada");
+          getSectionIcon();
+        } else if (evalStatus === "RC") {
+          setMessage("Evaluación enviada");
+          getSectionIcon();
         }
-      } else {
-        if (activeTab === "Imágenes") {
-          serv.map((item) => {
-            item.status = "RA";
-          });
-        } else {
-          serv[index].status = "RA";
+        let statusArr = [];
+        servicesData.forEach((srv) => {
+          srv.service === concept && statusArr.push(srv.status);
+        });
+
+        productTemp[`${concept}_status`] = getNewStatus(statusArr);
+
+        let newStatus = getNewStatus([
+          productTemp.datasheet_status,
+          productTemp.description_status,
+          productTemp.images_status,
+        ]);
+
+        productTemp.status = newStatus;
+
+        data = {
+          articleId: product.article.id_article,
+          orderId: product.orderId,
+          concept: concept,
+          evalStatus: evalStatus,
+          retailerId: activeRetailer.id,
+        };
+
+        switch (user.id_role) {
+          case 7:
+          case 8:
+            data.especialist = true;
+            break;
+          case 4:
+          case 5:
+            data.facilitator = true;
+            break;
+          default:
+            break;
         }
+        await axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
+          headers: {
+            Authorization: token,
+          },
+        });
       }
+      loadData();
+      sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+      setProduct(productTemp);
+    } catch (error) {
+      console.log(error);
     }
-    //console.log(serv, "serv");
-    setServicesData(serv);
+    setLoading(false);
   };
 
-  const sendToFacilitator = async (result) => {
-    console.log("exce");
-    let concept = "";
-    switch (activeTab) {
-      case "Descripción":
-        concept = "description";
-        break;
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-      default:
-        break;
-    }
-    let evalStatus = "";
-    let productTemp = { ...productSelected };
-    evalStatus = productSelected[`${concept}_status`];
-    const specialistDone =
-      evalStatus === "RF" ||
-      evalStatus === "RA" ||
-      evalStatus === "IN_PROGRESS";
-
-    if (specialistDone) {
-      setMessage(`${activeTab} enviada a facilitador`);
-      getSectionIcon();
-      productTemp[`${concept}_status`] = "QF";
-    } else if (evalStatus === "QF") {
-      setMessage("Evaluación enviada");
-      getSectionIcon();
-      productTemp[`${concept}_status`] = "AF";
-    } else if (evalStatus === "AF") {
-      setMessage("Evaluación enviada");
-      getSectionIcon();
-      productTemp[`${concept}_status`] = "AA";
-    } else if (evalStatus === "RP") {
-      setMessage("Evaluación enviada");
-      getSectionIcon();
-      productTemp[`${concept}_status`] = "AA";
-    }
-    let data = {};
-    if (result) {
-      updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
-      data = {
-        articleId: productSelected.article.id_article,
-        orderId: productSelected.orderId,
-        concept: concept,
-        result: result,
-        evalStatus: evalStatus,
-        retailerId: activeRetailer.id,
-      };
-      await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
-        headers: {
-          Authorization:
-            "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
-        },
-      });
-    } else {
-      if (specialistDone) {
-        updateCompaniesList(evalStatus, result, activeRetailer.id);
-      }
-      data = {
-        articleId: productSelected.article.id_article,
-        orderId: productSelected.orderId,
-        concept: concept,
-        evalStatus: evalStatus,
-        retailerId: activeRetailer.id,
-      };
+  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 7:
-        case 8:
-          data.especialist = true;
-          break;
         case 4:
         case 5:
-          data.facilitator = true;
+          rol = "facilitator";
           break;
-        default:
+        case 7:
+        case 8:
+          rol = "especialist";
           break;
       }
-
-      axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
-        headers: {
-          Authorization:
-            "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
-        },
-      });
-      setProduct(productTemp);
-      setModalSent(true);
     }
+
+    return (
+      user.id_role === 1 ||
+      (product.article[`id_${concept}_${rol}`] === user.id_user && validUser)
+    );
   };
 
-  const userAssigned = (tab, rol) => {
+  const auditorAssigned = () => {
+    return product?.article[`id_auditor`] === user.id_user;
+  };
+
+  const createComment = async (e, body, tab) => {
     let concept = "";
-    switch (tab) {
+    switch (activeTab) {
       case "Ficha técnica":
         concept = "datasheet";
         break;
@@ -633,24 +805,121 @@ export const RetailerProductEdition = ({
         concept = "description";
         break;
     }
+    const data = {
+      articleId: product?.article?.id_article,
+      orderId: product?.orderId,
+      message: body,
+      concept: concept,
+      version: version,
+    };
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    await getComments(tab);
+    setMessage("");
+    setComponentsArray([]);
+  };
 
-    const allowedRoles = [1, 4, 5, 6, 7, 8];
+  const getRequired = (services) => {
+    try {
+      const objetcTemp = {};
+      const datasheetServicesArray = Object.values(services[0]);
+      const dsInputs = datasheetServicesArray.pop();
+      const descriptionsServicesArray = services[1];
 
-    const validUser = allowedRoles.indexOf(user?.id_role) !== -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) =>
+                  dsInputs[input].required &&
+                  (dsInputs[input].value === undefined ||
+                    !dsInputs[input].value)
+              )
+            )
+          );
+      });
 
-    return (
-      productSelected.article[`id_${concept}_${rol}`] === user.id_user &&
-      validUser
-    );
+      objetcTemp["Ficha técnica"] = dsInputsRequired.length;
+
+      descriptionsServicesArray.forEach((description) => {
+        const [requested] = servicesData.filter(
+          (srv) =>
+            srv.id_retailer === description.id &&
+            srv.service === getConcept(activeTab)
+        );
+        requested &&
+          description.inputs.forEach(
+            (input) =>
+              input.required &&
+              (!input.value ||
+                input.value.replace(/(<\/?p>)|(<\/?strong>)|(<br>)/gm, "") ===
+                  "") &&
+              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) =>
+          services[2].values.filter((img) => img.image_id === req.id).length ===
+            0 && requiredCounter++
+      );
+      objetcTemp["Imágenes"] = requiredCounter;
+      setRequiredNull(objetcTemp);
+    } catch (error) {
+      console.log(error);
+    }
   };
 
-  const auditorAssigned = () => {
-    return productSelected?.article[`id_auditor`] === user.id_user;
+  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();
   };
 
-  function specialistValid(tab) {
+  const setAssignation = async (assignationType, assignationId) => {
     let concept = "";
-    switch (tab) {
+    switch (activeTab) {
       case "Ficha técnica":
         concept = "datasheet";
         break;
@@ -662,32 +931,146 @@ export const RetailerProductEdition = ({
         concept = "description";
         break;
     }
-    return (
-      product[`${concept}_status`] === "IN_PROGRESS" ||
-      product[`${concept}_status`] === "RF" ||
-      product[`${concept}_status`] === "RA"
+    const productTemp = product;
+    productTemp.article[`id_${concept}_${assignationType}`] = assignationId;
+    const data = {
+      articleList: [
+        {
+          orderId: product.orderId,
+          articleId: product?.article?.id_article,
+        },
+      ],
+      concept: concept,
+      [`${assignationType}Id`]: assignationId,
+    };
+    axios({
+      method: "post",
+      url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
+      data: data,
+      headers: {
+        Authorization: token,
+      },
+    });
+    loadAssignations(productTemp);
+    sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+  };
+
+  const downloadImages = () => {
+    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}`
+        );
+      }
+    });
+  };
+
+  const deleteImages = () => {
+    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
     );
-  }
 
-  function versionMatch() {
-    return productSelected?.version === version;
-  }
+    if (imgsInBack.length > 0) {
+      const data = {
+        articleId: product.article.id_article,
+        deleteImages: imgsInBack,
+        orderId: product.orderId,
+      };
+      try {
+        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 },
+    ]);
+
+    setTimeout(() => {
+      setLoading(false);
+    }, 500);
+
+    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 concept = "";
-    // switch (activeTab) {
-    //   case "Ficha técnica":
-    //     concept = "datasheet";
-    //     break;
-    //   case "Imágenes":
-    //     concept = "images";
-    //     break;
-    //   default:
-    //     concept = "description";
-    //     break;
-    // }
-    // getComments(concept);
-  }, [activeTab]);
+    let status = getRetailerStatus(servicesData, activeTab);
+    setRetailerStatus(status);
+  }, [activeTab, servicesData, activeRetailer]);
+
+  useEffect(() => {
+    services.length > 0 && getRequired(services);
+  }, [services, servicesData, activeTab]);
+
+  useEffect(() => {
+    setSaving(loading);
+  }, [loading]);
 
   return (
     <Container headerTop={headerTop}>
@@ -703,13 +1086,16 @@ export const RetailerProductEdition = ({
           <ImageDataTable
             lists={images}
             activeImage={images?.values ? images?.values[activeImage] : {}}
-            retailerSelected={activeRetailer.id}
+            retailerSelected={activeRetailer?.id}
             setImages={setImages}
-            assignationsImages={[
-              productSelected.article.id_images_especialist,
-              productSelected.article.id_images_facilitator,
-            ]}
-            imagesStatus={productSelected?.images_status}
+            assignationsImages={assig["Imágenes"]}
+            imagesStatus={product?.images_status}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
+            onClickSave={() =>
+              product?.services?.images === 1 && updateImages()
+            }
+            showSaveButton={userAssigned()}
           />
         </div>
         <div className="product-information">
@@ -717,47 +1103,79 @@ export const RetailerProductEdition = ({
             headerData={product}
             percent={activePercentage}
             activeRetailer={activeRetailer}
+            servicesData={servicesData}
             setActiveRetailer={setActiveRetailer}
-            approveRejectButtons={approveRejectButtons}
             sendToFacilitator={sendToFacilitator}
-            auditorAssigned={auditorAssigned}
-            userAssigned={userAssigned(activeTab, "facilitator")}
+            approve={() => {
+              sendToFacilitator("A");
+            }}
+            reject={() => {
+              sendToFacilitator("R");
+              setMessage("Rechazado");
+              setComponentsArray([
+                <img src={errorModal} />,
+                <ScreenHeader
+                  text={"Agrega tu comentarios para enviar el rechazo"}
+                  headerType={"input-name-header"}
+                  color={"white"}
+                />,
+                <TagAndInput
+                  label={"Caja de Comentario"}
+                  inputType={"textarea"}
+                  inputId={"modal-commentary-box"}
+                  index={0}
+                  color={"white"}
+                />,
+                <Button
+                  buttonType={"general-default-button"}
+                  label={"Enviar comentario"}
+                  onClick={(e) =>
+                    createComment(
+                      e,
+                      document.querySelector(
+                        "#modal-commentary-box .ql-container .ql-editor > p"
+                      ).innerHTML,
+                      activeTab
+                    )
+                  }
+                />,
+              ]);
+            }}
+            showValidationButtons={
+              approveRejectButtons() && (auditorAssigned() || userAssigned())
+            }
           />
           <FullTabsMenu
             tabsSections={tabsSections}
-            status={{
-              Descripción: servicesData.filter(
-                (service) =>
-                  service.id_retailer === activeRetailer?.id &&
-                  service.service === "description"
-              )[0]?.status,
-              "Ficha técnica": servicesData.filter(
-                (service) =>
-                  service.id_retailer === activeRetailer?.id &&
-                  service.service === "datasheet"
-              )[0]?.status,
-              Imágenes: product?.images_status,
-            }}
-            profileImage={productData.asigned}
+            status={retailerStatus}
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             setImageLayout={setImageLayout}
-            saveDescriptions={saveDescriptions}
-            saveDatasheets={saveDatasheets}
-            updateImages={updateImages}
-            assignations={{
-              Descripción: [
-                productSelected.article.id_description_especialist,
-                productSelected.article.id_description_facilitator,
-              ],
-              "Ficha técnica": [
-                productSelected.article.id_datasheet_especialist,
-                productSelected.article.id_datasheet_facilitator,
-              ],
-              Imágenes: [
-                productSelected.article.id_images_especialist,
-                productSelected.article.id_images_facilitator,
-              ],
+            downloadImages={downloadImages}
+            askToDeleteImages={askToDeleteImages}
+            assig={assig[activeTab]}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
+            showSaveButton={userAssigned()}
+            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;
+              }
             }}
           />
           <div
@@ -766,85 +1184,130 @@ export const RetailerProductEdition = ({
               (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
             }
           >
-            {!imageLayout && <GalleryHeader />}
-            {activeTab === "Ficha técnica" &&
-              (product?.services?.datasheets === 1 ? (
-                datasheets[0]?.data?.map((dataGroup, index) => (
-                  <InputGroup
-                    key={index + "-" + activeRetailer.name}
-                    articleId={productSelected.article.id_article}
-                    version={version}
-                    activeSection={activeTab}
-                    inputGroup={dataGroup}
-                    dataInputs={datasheets[1]}
-                    updatedDatasheets={updatedDatasheets}
-                    setUpdatedDatasheets={setUpdatedDatasheets}
-                  />
-                ))
-              ) : (
-                <p>no tienes este servicio</p>
-              ))}
-            {activeTab === "Descripción" &&
-              (product?.services?.descriptions === 1 ? (
-                <InputGroup
-                  activeSection={activeTab}
-                  inputGroup={descriptions[0]}
-                  updatedDescriptions={updatedDescriptions}
-                  setUpdatedDescriptions={setUpdatedDescriptions}
-                  articleId={articleId}
-                  version={version}
-                  dinamicHeight={true}
-                />
-              ) : (
-                <p>no tienes este servicio</p>
-              ))}
-
-            {activeTab === "Imágenes" &&
-              (product?.services?.images === 1 ? (
-                <section className="container">
-                  <div {...getRootProps({ className: "dropzone" })}>
-                    <input {...getInputProps()} />
-                    <aside>{thumbs()}</aside>
-                  </div>
-                </section>
-              ) : (
-                <p>no tienes este servicio</p>
-              ))}
+            {loading ? (
+              <Loading />
+            ) : (
+              <>
+                {!imageLayout &&
+                  activeTab === "Imágenes" &&
+                  product?.services?.images === 1 && (
+                    <GalleryHeader
+                      setSelectedImages={setSelectedImages}
+                      checkAll={checkAll}
+                      setCheckAll={setCheckAll}
+                    />
+                  )}
+                {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]}
+                        updatedDatasheets={updatedDatasheets}
+                        setUpdatedDatasheets={setUpdatedDatasheets}
+                      />
+                    ))
+                  ) : (
+                    <ScreenHeader
+                      text={"No cuentas con este servicio"}
+                      headerType={"input-name-header"}
+                    />
+                  ))}
+                {activeTab === "Descripción" &&
+                  (product?.description_status !== "NS" ? (
+                    <InputGroup
+                      activeSection={activeTab}
+                      inputGroup={descriptions[0]}
+                      updatedDescriptions={updatedDescriptions}
+                      setUpdatedDescriptions={setUpdatedDescriptions}
+                      articleId={product?.article?.id_article}
+                      version={version}
+                      dinamicHeight={true}
+                    />
+                  ) : (
+                    <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, "especialist" || "facilitator") ||
-            auditorAssigned()) && (
-            <div className="commentary-box">
-              {!comments[activeTab] ? (
-                <div className="commentary">
-                  <TagAndInput
-                    label={"Caja de Comentario"}
-                    inputType={"textarea"}
-                    inputCols={80}
-                    inputRows={4}
-                  />
-                  <div className="buttons-box">
-                    <Button
-                      buttonType={"general-transparent-button"}
-                      label={"Enviar comentario"}
+          {(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={(e) =>
+                          createComment(
+                            e,
+                            document.querySelector(
+                              "#commentary-box .ql-container .ql-editor > p"
+                            ).innerHTML,
+                            activeTab
+                          )
+                        }
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="feedback-box">
+                    <Commentary
+                      comment={comment.message}
+                      reviewed={crossComment}
                     />
                     <Button
-                      buttonType={
-                        requiredNull !== 0 ||
-                        !specialistValid(activeTab) ||
-                        !versionMatch()
-                          ? "general-button-disabled"
-                          : "general-green-button"
-                      }
-                      label={"Enviar evaluación"}
-                      onClick={() => sendToFacilitator()}
+                      buttonType={"circular-button accept-button"}
+                      onClick={async () => {
+                        setCrossComment(true);
+                        commentRevised();
+                      }}
                     />
                   </div>
-                </div>
-              ) : (
-                <Commentary comment={comments[activeTab].message} />
-              )}
-            </div>
-          )}
+                )}
+                <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 && (
@@ -855,6 +1318,25 @@ export const RetailerProductEdition = ({
           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("")}
+        />
+      )}
     </Container>
   );
 };