contentoh-components-library 0.1.1 → 8.0.0

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

@@ -5,81 +5,856 @@ import { ImageDataTable } from "../../organisms/ImageDataTable";
 import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
 import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { InputGroup } from "../../organisms/InputGroup";
-import { useEffect, useState } from "react";
+import { useEffect, useReducer, useState, useCallback } from "react";
 import { GalleryElement } from "../../molecules/GalleryElement";
+import { getRetailerServices, getPercentage } 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 { Commentary } from "../../atoms/Commentary";
 
-export const RetailerProductEdition = ({ productData, tabsSections }) => {
+const reducerImages = (state, action) => {
+  let { values, attrForImgs } = state;
+  switch (action.action) {
+    case "init":
+      return action.init;
+    case "addImg":
+      values = [...values, action.img];
+      return { ...state, values };
+    case "changeImageInfo":
+      values[action.index][action.attribute] = action.value;
+      return { ...state, values };
+    case "changeAttrValue":
+      attrForImgs[action.retailer][action.index].value = action.value;
+      return { ...state, attrForImgs, values };
+    default:
+      return state;
+  }
+};
+
+const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
+const REGION = "us-east-1";
+
+AWS.config.update({
+  accessKeyId: process.env.REACT_APP_KEY_UPLOAD_TO_S3,
+  secretAccessKey: process.env.REACT_APP_ACCESS_KEY_UPLOAD_TO_S3,
+});
+
+const myBucket = new AWS.S3({
+  params: { Bucket: S3_BUCKET },
+  region: REGION,
+});
+
+export const RetailerProductEdition = ({
+  productData,
+  tabsSections,
+  articleId,
+  productSelected = {},
+  user = {},
+}) => {
   const [activeTab, setActiveTab] = useState("Descripción");
-  const [activeImage, setActiveImage] = useState(
-    productData?.services?.Imágenes[0]
-  );
+  const [activeImage, setActiveImage] = useState();
   const [imageLayout, setImageLayout] = useState(true);
   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,
+    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();
+          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);
+        };
+        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(productSelected.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 [icon, setIcon] = useState(null);
+  const [version, setVersion] = useState(productSelected?.version);
+  const [comments, setComments] = useState({});
+  const [requiredNull, setRequiredNull] = useState(0);
 
-  const getData = async () => {
-    const response = await axios.post(
-      `${process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT}?idCategory=846&articleId=238&version=2`
+  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);
+  };
 
-    console.log(JSON.parse(response.data.body).data);
+  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;
+    }
+    const selected = productSelected;
+    const servicesResponse = await axios.get(
+      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${selected.article.id_article}&orderId=${selected.article.id_order}&end=true`
+    );
+    const parsedResponse = JSON.parse(servicesResponse.data.body).data;
+
+    setServicesData(parsedResponse);
+  };
+
+  const translateConcept = (concept) => {
+    let translation = "";
+    if (concept === "datasheet") {
+      translation = "Ficha ténica";
+    } else if (concept === "description") {
+      translation = "Descripción";
+    } else if (concept === "images") {
+      translation = "Imágenes";
+    }
+    return translation;
+  };
+
+  const getComments = async (tab) => {
+    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}`
+      ),
+      axios.get(
+        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${productSelected?.article?.id_article}&concept=datasheet&orderIdColab=${productSelected?.orderId}&version=${version}`
+      ),
+      axios.get(
+        `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${productSelected?.article?.id_article}&concept=images&orderIdColab=${productSelected?.orderId}&version=${version}`
+      ),
+    ]);
+
+    let comments = {};
+    commentsResponse.map(
+      (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])
+    );
+    setComments(comments);
+    //const comment = JSON.parse(commentsResponse.data.body).data;
+    //setComment(comment[0]);
   };
 
   useEffect(() => {
-    getData();
+    loadData();
+    getPercentage({ data: [productSelected] }).then((res) =>
+      setPercentages(res)
+    );
+    getServices();
+    getComments();
   }, []);
 
+  useEffect(() => {
+    productSelected.retailers.forEach((retailer) => {
+      retailer["percentage"] = percentages.filter(
+        (percent) => retailer.id === percent.id_retailer
+      )[0]?.percentage;
+    });
+    setActivePercentage(productSelected?.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)
+      );
+    }
+  }, [activeRetailer]);
+
+  const thumbs = () => {
+    const imageInputs = images.inputs.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,
+    }));
+    return images?.values?.map((image, index) => (
+      <GalleryElement
+        key={index}
+        image={image}
+        gridLayout={imageLayout}
+        id={"gallery-element-" + index}
+        index={index}
+        imageType={imageType}
+        imagePackagingType={imagePackagingType}
+        imageInputs={imageInputs}
+        changeImage={setImages}
+      />
+    ));
+  };
+
+  const saveDescriptions = async () => {
+    const dataObject = {
+      articleId: productSelected?.article?.id_article,
+      articleData: updatedDescriptions,
+    };
+    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",
+          },
+        }
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const saveDatasheets = async () => {
+    const dataObject = {
+      articleId: productSelected?.article?.id_article,
+      articleData: updatedDatasheets,
+    };
+    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",
+          },
+        }
+      );
+      console.log("saved");
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  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);
+    attrForImgs.pop();
+    const data = {
+      articleId,
+      attrReqImgs: attrForImgs.map((e) => ({
+        attrId: e[0].id,
+        value: e[0].value,
+      })),
+      articleData: imagesList.filter((e) => !e.id),
+      updateImages: imagesList.filter((e) => e.id),
+    };
+    let valid =
+      data.articleData.length === 0
+        ? true
+        : 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) {
+          return true;
+        }
+        return false;
+      });
+    }
+    if (valid && duplicated.length === 0) {
+      try {
+        data.articleData.forEach((e) => {
+          e.uuid = uuidv4();
+        });
+        setDataImages(data);
+        if (data.articleData.length > 0) {
+          setImagesUploaded(false);
+          const promiseArray = [];
+          data.articleData.forEach((e) => {
+            const 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);
+      }
+    } 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."
+      );
+      // 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) => {
+        delete e.src;
+        e.imageID = e.image_id;
+        e.packingType = e.packing_type;
+        e.imageType = e.image_type;
+        return e;
+      });
+      try {
+        await axios.put(
+          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+          dataImages,
+          {
+            headers: {
+              Authorization:
+                "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+            },
+          }
+        );
+        console.log("imágenes guardadas con éxito");
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }, [dataImages, imagesUploaded]);
+
+  const approveRejectButtons = (action) => {
+    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;
+    }
+    concept = action ? action : concept;
+    return (
+      (productSelected[`${concept}_status`] === "QF" &&
+        (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
+      (productSelected[`${concept}_status`] === "AF" &&
+        (user.id_role === 1 || user.id_role === 6)) ||
+      (productSelected[`${concept}_status`] === "RP" &&
+        (user.id_role === 1 || user.id_role === 6))
+    );
+  };
+
+  const getSectionIcon = () => {
+    switch (activeTab) {
+      case "Ficha técnica":
+        setIcon(attributesSent);
+        break;
+      case "Descripción":
+        setIcon(descriptionSent);
+        break;
+      case "Imágenes0,,":
+        setIcon(imagesSent);
+        break;
+      default:
+        break;
+    }
+  };
+
+  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";
+        }
+      } 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";
+        }
+      } else {
+        if (activeTab === "Imágenes") {
+          serv.map((item) => {
+            item.status = "RA";
+          });
+        } else {
+          serv[index].status = "RA";
+        }
+      }
+    }
+    //console.log(serv, "serv");
+    setServicesData(serv);
+  };
+
+  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,
+      };
+
+      switch (user.id_role) {
+        case 7:
+        case 8:
+          data.especialist = true;
+          break;
+        case 4:
+        case 5:
+          data.facilitator = true;
+          break;
+        default:
+          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);
+    }
+  };
+
+  const userAssigned = (tab, rol) => {
+    let concept = "";
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+
+    const allowedRoles = [1, 4, 5, 6, 7, 8];
+
+    const validUser = allowedRoles.indexOf(user?.id_role) !== -1;
+
+    return (
+      productSelected.article[`id_${concept}_${rol}`] === user.id_user &&
+      validUser
+    );
+  };
+
+  const auditorAssigned = () => {
+    return productSelected?.article[`id_auditor`] === user.id_user;
+  };
+
+  function specialistValid(tab) {
+    let concept = "";
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+    return (
+      product[`${concept}_status`] === "IN_PROGRESS" ||
+      product[`${concept}_status`] === "RF" ||
+      product[`${concept}_status`] === "RA"
+    );
+  }
+
+  function versionMatch() {
+    return productSelected?.version === version;
+  }
+
+  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]);
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
       <div className="data-container">
         <div className="image-data-panel">
           <ImagePreviewer
-            activeImage={activeImage}
-            imagesArray={productData?.services?.Imágenes}
+            activeImage={images?.values ? images?.values[activeImage] : {}}
+            imagesArray={images}
             setActiveImage={setActiveImage}
+            setShowModal={setShowModal}
           />
           <ImageDataTable
-            imageData={activeImage?.data}
-            activeImage={activeImage}
+            lists={images}
+            activeImage={images?.values ? images?.values[activeImage] : {}}
+            retailerSelected={activeRetailer.id}
+            setImages={setImages}
+            assignationsImages={[
+              productSelected.article.id_images_especialist,
+              productSelected.article.id_images_facilitator,
+            ]}
+            imagesStatus={productSelected?.images_status}
           />
         </div>
         <div className="product-information">
-          <FullProductNameHeader headerData={productData.headerData} />
+          <FullProductNameHeader
+            headerData={product}
+            percent={activePercentage}
+            activeRetailer={activeRetailer}
+            setActiveRetailer={setActiveRetailer}
+            approveRejectButtons={approveRejectButtons}
+            sendToFacilitator={sendToFacilitator}
+            auditorAssigned={auditorAssigned}
+            userAssigned={userAssigned(activeTab, "facilitator")}
+          />
           <FullTabsMenu
             tabsSections={tabsSections}
-            status={productData.status}
+            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}
+            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,
+              ],
+            }}
           />
           <div
             className={
               "services-information-container " +
-              (imageLayout && activeTab === "Imágenes" && "image-services")
+              (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
             }
           >
-            {activeTab !== "Imágenes"
-              ? productData?.services[activeTab]?.map(
-                  ({ inputGroup }, index) => (
-                    <InputGroup
-                      key={index}
-                      inputGroup={inputGroup}
-                      activeSection={activeTab}
-                    />
-                  )
-                )
-              : productData?.services["Imágenes"]?.map((image, index) => (
-                  <GalleryElement
-                    key={index}
-                    image={image}
-                    gridLayout={imageLayout}
-                    id={"gallery-element-" + index}
+            {!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>
+              ))}
           </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"}
+                    />
+                    <Button
+                      buttonType={
+                        requiredNull !== 0 ||
+                        !specialistValid(activeTab) ||
+                        !versionMatch()
+                          ? "general-button-disabled"
+                          : "general-green-button"
+                      }
+                      label={"Enviar evaluación"}
+                      onClick={() => sendToFacilitator()}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <Commentary comment={comments[activeTab].message} />
+              )}
+            </div>
+          )}
         </div>
       </div>
+      {showModal && (
+        <ProductImageModal
+          images={images}
+          setShowModal={setShowModal}
+          sendToFacilitator={sendToFacilitator}
+          approveRejectButtons={approveRejectButtons}
+        />
+      )}
     </Container>
   );
 };