contentoh-components-library 21.0.72 → 21.0.75

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

@@ -0,0 +1,1493 @@
+import { Container } from "./styles";
+import { HeaderTop } from "../../molecules/HeaderTop";
+import { ImagePreviewer } from "../../organisms/ImagePreviewer";
+import { ImageDataTable } from "../../organisms/ImageDataTable";
+import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
+import { FullTabsMenu } from "../../organisms/FullTabsMenu";
+import { InputGroup } from "../../organisms/InputGroup";
+import { useEffect, useReducer, useState, useCallback } from "react";
+import { GalleryElement } from "../../molecules/GalleryElement";
+import { saveAs } from "file-saver";
+import {
+  getRetailerServices,
+  getPercentage,
+  fetchUsers,
+} from "../../../global-files/data";
+import { GalleryHeader } from "../../molecules/GalleryHeader";
+import { ProductImageModal } from "../../organisms/ProductImageModal";
+import { useDropzone } from "react-dropzone";
+import axios from "axios";
+import { v4 as uuidv4 } from "uuid";
+import AWS from "aws-sdk";
+import attributesSent from "../../../assets/images/modalsSVGs/attributesSent.svg";
+import descriptionSent from "../../../assets/images/modalsSVGs/descriptionSent.svg";
+import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
+import { TagAndInput } from "../../molecules/TagAndInput/index";
+import { Button } from "../../atoms/GeneralButton";
+import { 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 { Link } from "react-router-dom";
+import face from "../../../assets/images/defaultImages/defaultProfileImage.svg";
+import errorModal from "../../../assets/images/genericModal/errorModal.svg";
+import { GlobalModal } from "../../organisms/GlobalModal/index";
+
+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 ProviderProductEdition = ({
+  tabsSections,
+  productSelected = {},
+  productToEdit,
+  user = {},
+  location = {},
+  token,
+  revision = false,
+  setShowContentohRequestModal,
+  showSurvey,
+}) => {
+  const [activeTab, setActiveTab] = useState("Descripción");
+  const [activeImage, setActiveImage] = useState();
+  const [imageLayout, setImageLayout] = useState(false);
+  const [headerTop, setHeaderTop] = useState(0);
+  const [descriptions, setDescriptions] = useState([]);
+  const [datasheets, setDatasheets] = useState([]);
+  const [images, setImages] = useReducer(reducerImages, {});
+  const [showModal, setShowModal] = useState(false);
+  const { 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(
+    product?.retailers
+      ? new Array(product?.retailers?.length).fill({ percentage: 0 })
+      : new Array(product?.retailersAvailable?.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(
+    JSON.parse(sessionStorage.getItem("productSelected"))
+      ? JSON.parse(sessionStorage.getItem("productSelected"))
+      : productSelected
+  );
+  const [productEdit, setProductEdit] = useState(
+    JSON.parse(sessionStorage.getItem("productEdit"))
+      ? JSON.parse(sessionStorage.getItem("productEdit"))
+      : productToEdit
+  );
+  const [icon, setIcon] = useState(null);
+  const [version, setVersion] = useState(product?.version);
+  const [comments, setComments] = useState({});
+  const [comment, setComment] = useState("");
+  const [requiredNull, setRequiredNull] = useState({
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0,
+  });
+  const [crossComment, setCrossComment] = useState(false);
+  const [userGroups, setUserGroups] = useState([]);
+  const [assig, setAssig] = useState({});
+  const [selectedImages, setSelectedImages] = useState([]);
+  const [componentsArray, setComponentsArray] = useState([]);
+  const [checkAll, setCheckAll] = useState(false);
+  const isRetailer = user?.is_retailer;
+  const [loading, setLoading] = useState(true);
+  const [statusArray, setStatusArray] = useState([]);
+
+  const originProp = location?.state?.origin;
+  const [origin, setOrigin] = useState({
+    "Ficha técnica": originProp,
+    Descripción: originProp,
+    Imágenes: originProp,
+  });
+  const [inCart, setInCart] = useState(false);
+  const [modalSent, setModalSent] = useState(false);
+  const [modalViewError, setModalViewError] = useState(false);
+  const [showGenericModal, setShowGenericModal] = useState(false);
+  const [dataGenericModal, setDataGenericModal] = useState({
+    message: "¿Estás seguro de continuar?",
+    detail: ` ${
+      user.is_retailer
+        ? "Asegurate de haber revisado las tres secciones"
+        : "Envíar el producto a la cadena"
+    }`,
+    button1: {
+      name: "Cerrar",
+      action: () => setModalViewTextArea(false),
+    },
+    button2: {
+      name: "Continuar",
+      action: () => evaluationToRetailer(false),
+    },
+    img: face,
+  });
+  const [modalViewTextArea, setModalViewTextArea] = useState(false);
+
+  useEffect(() => {
+    checkAll && setSelectedImages(images.values);
+  }, [checkAll]);
+
+  const loadData = async () => {
+    const services = await getRetailerServices(
+      product?.id_article || product?.article?.id_article,
+      parseInt(product?.article?.id_category || product?.id_category),
+      product?.version
+    );
+
+    //Converts the data inside the datasheets object to array
+    setServices(services);
+
+    //setActiveRetailer(product?.retailers[0]);
+    setImages({
+      action: "init",
+      init: services[2],
+    });
+    if (services[2]?.values?.length > 0) setActiveImage(0);
+
+    setActiveRetailer(
+      product.retailers ? product.retailers[0] : product.retailersAvailable[0]
+    );
+
+    getPercentage({ data: [product] }).then((res) => setPercentages(res));
+    setLoading(false);
+  };
+
+  const getServices = async () => {
+    const productInOrder = product.id_order || product.orderId;
+    if (isRevision() || productInOrder) {
+      const servicesResponse = await axios.get(
+        `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${
+          product?.id_article
+        }&orderId=${product?.id_order ?? product.orderId}&end=true`
+      );
+      const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
+      setServicesData(parsedResponse);
+    }
+  };
+
+  const translateConcept = (concept) => {
+    let translation = "";
+    if (concept === "datasheet") {
+      translation = "Ficha técnica";
+    } else if (concept === "description") {
+      translation = "Descripción";
+    } else if (concept === "images") {
+      translation = "Imágenes";
+    }
+    return translation;
+  };
+
+  const isRevision = () => {
+    if (productEdit) {
+      const concept = getConcept(activeTab);
+      const isRetailer = user.is_retailer;
+      const currentService = productEdit?.product[`${concept}_status`];
+      const orgn = origin[activeTab];
+      const revision = [
+        "RequestWithContentoh",
+        "RequestWithoutContentoh",
+        "Contentoh",
+      ].includes(orgn);
+      if (isRetailer) {
+        if (revision && currentService === "AP") return true;
+      } else {
+        const { product } = productEdit;
+        if (
+          orgn === "Contentoh" ||
+          (["RECEIVED", "IN_PROGRESS"].includes(currentService) &&
+            orgn === "RequestWithoutContentoh") ||
+          (currentService === "AA" && orgn === "RequestWithContentoh") ||
+          (currentService === "RC" &&
+            orgn === "RequestWithoutContentoh" &&
+            (!product.id_order || !product.orderId))
+        )
+          return true;
+      }
+    }
+    return false;
+  };
+
+  const getCart = async () => {
+    const res = await axios.get(process.env.REACT_APP_CART, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    const arr = JSON.parse(res.data.body).data.map((e) => e.article_id);
+    setInCart(arr.some((e) => e.articleId === product.id_article));
+  };
+
+  useEffect(async () => {
+    loadData();
+    // getPercentage({ data: [product] }).then((res) =>
+    //   setPercentages(res)
+    // );
+    getCart();
+    getServices();
+    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"];
+        break;
+      default:
+        arr = [];
+        break;
+    }
+    setStatusArray(arr);
+  }, [product]);
+
+  const loadAssignations = (currentProduct) => {
+    setAssig(product?.asignations);
+  };
+
+  useEffect(() => {
+    loadAssignations(product);
+  }, [userGroups]);
+
+  useEffect(() => {
+    const productTemp = product;
+    const retailers = productTemp?.retailersAvailable || productTemp?.retailers;
+    retailers?.forEach((retailer) => {
+      retailer["percentage"] = percentages?.filter(
+        (percent) => retailer?.id === percent?.id_retailer
+      )[0]?.percentage;
+    });
+
+    setProduct(productTemp);
+    setActivePercentage(retailers[0]?.percentage);
+  }, [percentages]);
+
+  useEffect(() => {
+    if (services.length > 0) {
+      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, services]);
+
+  const thumbs = () => {
+    const imageInputs = images?.inputs?.map((e) => ({
+      value: e?.id,
+      name: e?.name,
+      required: e?.required,
+    }));
+    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
+        setCheckAll={setCheckAll}
+        key={index}
+        image={image}
+        gridLayout={imageLayout}
+        id={"gallery-element-" + index}
+        index={index}
+        imageType={imageType}
+        imagePackagingType={imagePackagingType}
+        imageInputs={imageInputs}
+        changeImage={setImages}
+        selectedImages={selectedImages}
+        setSelectedImages={setSelectedImages}
+      />
+    ));
+  };
+
+  const saveDescriptions = async () => {
+    setLoading(true);
+    const productTemp = product;
+    const dataObject = {
+      articleId: product?.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: 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 dataObject = {
+      articleId: product?.id_article,
+      articleData: 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: token,
+          },
+        }
+      );
+      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);
+    }
+  };
+
+  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: product?.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),
+    };
+    if (product?.orderId) data["orderId"] = product?.orderId;
+    let valid =
+      data?.articleData?.length === 0
+        ? true
+        : data?.articleData?.every((e, i) => {
+            if (e?.image_id && e?.packing_type && e?.image_type) {
+              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);
+      setMessage(
+        "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos."
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [images, imagesUploaded]);
+
+  useEffect(async () => {
+    if (imagesUploaded) {
+      setLoading(true);
+      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 {
+        await axios.put(
+          `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+          dataImages,
+          {
+            headers: {
+              Authorization: token,
+            },
+          }
+        );
+        setMessage("Imágenes guardadas con éxito");
+        loadData();
+      } catch (error) {
+        console.log(error);
+      }
+    }
+  }, [dataImages, imagesUploaded]);
+
+  const evaluationFinished = (userId, tab, statusArray) => {
+    // const srv = servicesData.filter((serv) => serv.service === getConcept(tab));
+    // const [srvActive] = srv.filter(
+    //   (serv) => serv.id_retailer === activeRetailer?.id
+    // );
+    // const unvalidated =
+    //   product[`${getConcept(tab)}_status`] === "QF" ||
+    //   product[`${getConcept(tab)}_status`] === "IN_PROGRESS";
+    // switch (userId) {
+    //   case 7:
+    //   case 8:
+    //     return (
+    //       (["RA", "RF"].includes(product?.status) &&
+    //         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) &&
+    //       srv.filter((serv) => statusArray.includes(serv.status)).length ===
+    //         srv.length
+    //     );
+    //   case 6:
+    //     return (
+    //       statusArray.includes(product.status) &&
+    //       servicesData.every((serv) => ["RA", "AA"].includes(serv.status))
+    //     );
+    //   default:
+    //     break;
+    // }
+  };
+
+  const getConcept = (tab) => {
+    switch (tab) {
+      case "Descripción":
+        return "description";
+      case "Ficha técnica":
+        return "datasheet";
+      case "Imágenes":
+        return "images";
+    }
+  };
+
+  // const approveRejectButtons = (action) => {
+  //   let concept = getConcept(activeTab);
+  //   concept = action ? action : concept;
+
+  //   const [retailerStatus] = servicesData.filter(
+  //     (srv) => srv.id_retailer === activeRetailer?.id && srv.service === concept
+  //   );
+
+  //   return (
+  //     (retailerStatus?.status === "QF" &&
+  //       (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
+  //     (retailerStatus?.status === "AF" && //sessionStorage product
+  //       (user.id_role === 1 || user.id_role === 6)) ||
+  //     (retailerStatus?.status === "RP" &&
+  //       (user.id_role === 1 || user.id_role === 6)) ||
+  //     (retailerStatus?.status === "RC" &&
+  //       (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 sendToFacilitator = async (result) => {
+  //   setLoading(true);
+  //   try {
+  //     let concept = getConcept(activeTab);
+
+  //     let productTemp = { ...product };
+  //     let evalStatus = product[`${concept}_status`];
+
+  //     let data = {};
+  //     if (result) {
+  //       //updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
+  //       data = {
+  //         articleId: product.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 {
+  //       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();
+  //       }
+  //       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.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,
+  //         },
+  //       });
+  //       getServices();
+  //     }
+  //     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
+  //     setProduct(productTemp);
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+  //   setLoading(false);
+  // };
+
+  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;
+
+    if (!rol) {
+      switch (user.id_role) {
+        case 4:
+        case 5:
+          rol = "facilitator";
+          break;
+        case 7:
+        case 8:
+          rol = "especialist";
+          break;
+      }
+    }
+
+    return true;
+  };
+
+  const createComment = async (e, body, tab) => {
+    let concept = "";
+    switch (activeTab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+    const data = {
+      articleId: product?.id_article,
+      orderId: product?.orderId,
+      message: body,
+      concept: concept,
+      version: version,
+    };
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
+  };
+
+  const getRequired = (services) => {
+    const objetcTemp = {};
+    const datasheetServicesArray = Object.values(services[0]);
+    const dsInputs = datasheetServicesArray.pop();
+    const descriptionsServicesArray = services[1];
+
+    let dsInputsRequired = [];
+    let desInputsRequired = 0;
+    datasheetServicesArray.forEach((datasheet) => {
+      const [requested] = servicesData.filter(
+        (srv) =>
+          srv.id_retailer === datasheet.retailer.id &&
+          srv.service === getConcept(activeTab)
+      );
+      requested &&
+        Object.values(datasheet?.data).forEach((dataGroup) =>
+          dsInputsRequired.push(
+            ...dataGroup.inputs.filter(
+              (input) =>
+                dsInputs[input].required &&
+                (dsInputs[input].value === undefined || !dsInputs[input].value)
+            )
+          )
+        );
+    });
+
+    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 requiredImages = services[2]?.inputs?.filter((e) => e.required);
+    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);
+  };
+
+  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: token,
+      },
+    });
+    setCrossComment(false);
+  };
+
+  const setAssignation = async (assignationType, assignationId) => {
+    let concept = "";
+    switch (activeTab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
+    const productTemp = product;
+    productTemp.article[`id_${concept}_${assignationType}`] = assignationId;
+    const data = {
+      articleList: [
+        {
+          orderId: product.orderId,
+          articleId: product?.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 evaluationComplete = () => {
+    const concept = getConcept(activeTab);
+    let serv = servicesData.filter((item) => item.service === concept);
+    if (
+      ["RequestWithContentoh", "RequestWithoutContentoh"].includes(
+        origin[concept]
+      )
+    ) {
+      serv = serv.filter((f) => f.id_retailer === product.retailer_id);
+    }
+    const approved = user.is_retailer ? "AC" : "AP";
+    const rejected = user.is_retailer ? "RC" : "RP";
+    return (
+      serv.filter(
+        (item) => item.status === approved || item.status === rejected
+      ).length === serv.length
+    );
+  };
+
+  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 = () => {
+    const data = {
+      articleId: product.id_article,
+      deleteImages: selectedImages,
+    };
+    try {
+      axios.put(
+        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?image=true&version=${version}`,
+        data,
+        {
+          headers: { Authorization: token },
+        }
+      );
+      loadData();
+    } catch (err) {
+      console.log(err);
+    }
+    setMessage("");
+  };
+
+  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={() => deleteImages()}
+        />,
+      ]);
+    }
+  };
+
+  const specialistValid = (tab) => {
+    let concept = "";
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+      case "Descripción":
+        concept = "description";
+        break;
+    }
+    return (
+      product[`${concept}_status`] === "IN_PROGRESS" ||
+      product[`${concept}_status`] === "RF" ||
+      product[`${concept}_status`] === "RA"
+    );
+  };
+
+  // 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 : "NA";
+  // };
+
+  // useEffect(() => {
+  //   let status = getRetailerStatus(servicesData, activeTab);
+  //   setRetailerStatus(status);
+  // }, [activeTab, servicesData, activeRetailer]);
+
+  // useEffect(() => {
+  //   services.length > 0 && getRequired(services);
+  // }, [services, servicesData, activeTab]);
+  const confirmStatusComplete = () => {
+    const { datasheet_status, description_status, images_status } = product;
+    const completionStates = ["AP", "Evaluated", "NS"];
+    const dsEvaluated = completionStates.includes(datasheet_status);
+    const descsEvaluated = completionStates.includes(description_status);
+    const imgsEvaluated = completionStates.includes(images_status);
+
+    const AllEvaluated = dsEvaluated && descsEvaluated && imgsEvaluated;
+
+    return AllEvaluated;
+  };
+
+  const sendEvaluation = async (result) => {
+    let data = {};
+    const retailerId = activeRetailer?.id;
+    if (result) {
+      data = {
+        articleId: product.id_article,
+        orderId: product.id_order ?? product.orderId,
+        concept: getConcept(activeTab),
+        result: result,
+        retailerId,
+      };
+      await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
+        headers: {
+          Authorization: token,
+        },
+      });
+    } else {
+      const concept = getConcept(activeTab);
+      const productTemp = product;
+      productTemp[`${concept}_status`] = "Evaluated";
+      data = {
+        articleId: product.id_article,
+        orderId: product.id_order ?? product.orderId,
+        concept,
+        retailerId,
+      };
+      axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
+        headers: {
+          Authorization: token,
+        },
+      });
+      setProduct(productTemp);
+      setProductEdit({
+        ArticleId: productTemp.id_article,
+        idCategory: productTemp.article.id_category,
+        product: productTemp,
+      });
+      sessionStorage.setItem(
+        "productEdit",
+        JSON.stringify({
+          ArticleId: productTemp.id_article,
+          idCategory: productTemp.article.id_category,
+          product: productTemp,
+        })
+      );
+      setOrigin((prev) => ({ ...prev, [concept]: "Evaluated" }));
+    }
+    loadData();
+    showSurvey && showSurvey(confirmStatusComplete());
+  };
+
+  const evaluationToRetailer = async (result) => {
+    const data = {
+      articleId: product.id_article,
+      companyId: user.is_retailer
+        ? product.provider_company_id
+        : product.retailer_company_id,
+      versionId: product.version,
+      status: result,
+    };
+    await axios.put(`${process.env.REACT_APP_RETAILER_REQUEST}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    const prod = productEdit;
+    const statusComplete = user.is_retailer ? `${result}C` : `${result}P`;
+    prod.product.datasheet_status = statusComplete;
+    prod.product.description_status = statusComplete;
+    prod.product.images_status = statusComplete;
+    prod.product.article_status = statusComplete;
+    prod.product.services_status = `["${statusComplete}","${statusComplete}","${statusComplete}"]`;
+    sessionStorage.setItem("productEdit", JSON.stringify(prod));
+    setProduct(prod);
+    setShowGenericModal && setShowGenericModal(false);
+  };
+
+  const getSectionStatus = () => {
+    const concept = getConcept(activeTab);
+    return ["AA", "AP", "RECEIVED", "IN_PROGRESS", "RC"].includes(
+      productEdit.product[`${concept}_status`]
+    );
+  };
+
+  const enableActions = (versionStatus) => {
+    if (versionStatus) {
+      return ["AP", "AC", "RC"].includes(versionStatus);
+    }
+    return true;
+  };
+
+  return (
+    <Container headerTop={headerTop}>
+      <HeaderTop setHeaderTop={setHeaderTop} />
+      <div className="data-container">
+        <div className="image-data-panel">
+          <ImagePreviewer
+            activeImage={images?.values ? images?.values[activeImage] : {}}
+            imagesArray={images}
+            setActiveImage={setActiveImage}
+            setShowModal={setShowModal}
+          />
+          <ImageDataTable
+            lists={images}
+            activeImage={images?.values ? images?.values[activeImage] : {}}
+            retailerSelected={activeRetailer?.id}
+            setImages={setImages}
+            assignationsImages={assig}
+            imagesStatus={product?.images_status}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
+            onClickSave={() =>
+              product?.services?.images === 1 && updateImages()
+            }
+          />
+        </div>
+        <div className="product-information">
+          <FullProductNameHeader
+            headerData={product}
+            percent={activePercentage}
+            activeRetailer={activeRetailer}
+            setActiveRetailer={setActiveRetailer}
+            showValidationButtons={isRevision() && getSectionStatus()}
+            approve={() => {
+              if (
+                origin[getConcept(activeTab)] === "RequestWithoutContentoh" &&
+                !user.is_retailer &&
+                (!product.id_order || !product.orderId)
+              ) {
+                setDataGenericModal((prev) => ({
+                  ...prev,
+                  button2: {
+                    name: "Continuar",
+                    action: () => evaluationToRetailer("A"),
+                  },
+                }));
+                setShowGenericModal(true);
+              } else {
+                if (user.is_retailer) {
+                  if (product.id_order || product.orderId) {
+                    sendEvaluation("A");
+                  } else {
+                    setDataGenericModal((prev) => ({
+                      ...prev,
+                      button2: {
+                        name: "Continuar",
+                        action: () => evaluationToRetailer("A"),
+                      },
+                    }));
+                    setShowGenericModal(true);
+                  }
+                } else {
+                  sendEvaluation("A");
+                }
+              }
+            }}
+            reject={() => {
+              if (
+                origin[getConcept(activeTab)] === "RequestWithoutContentoh" &&
+                !user.is_retailer &&
+                (!product.id_order || !product.orderId)
+              ) {
+                return;
+              } else {
+                if (user.is_retailer) {
+                  if (product.id_order || product.orderId) {
+                    sendEvaluation("R");
+                    setModalViewError(true);
+                  } else {
+                    setDataGenericModal((prev) => ({
+                      ...prev,
+                      button2: {
+                        name: "Continuar",
+                        action: () => evaluationToRetailer("R"),
+                      },
+                    }));
+                    setShowGenericModal(true);
+                  }
+                } else {
+                  sendEvaluation("R");
+                  setModalViewError(true);
+                }
+              }
+            }}
+          />
+          <FullTabsMenu
+            tabsSections={tabsSections}
+            status={product?.version_status}
+            activeTab={activeTab}
+            setActiveTab={setActiveTab}
+            setImageLayout={setImageLayout}
+            downloadImages={downloadImages}
+            askToDeleteImages={askToDeleteImages}
+            assig={assig}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
+            onClickSave={() => {
+              switch (activeTab) {
+                case "Descripción":
+                  saveDescriptions();
+                  break;
+                case "Ficha técnica":
+                  saveDatasheets();
+                  break;
+                case "Imágenes":
+                  updateImages();
+                  break;
+                default:
+                  break;
+              }
+            }}
+          />
+          <div
+            className={
+              "services-information-container " +
+              (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
+            }
+          >
+            {loading ? (
+              <Loading />
+            ) : (
+              <>
+                {!imageLayout &&
+                  activeTab === "Imágenes" &&
+                  product?.services?.images === 1 && (
+                    <GalleryHeader
+                      setSelectedImages={setSelectedImages}
+                      checkAll={checkAll}
+                      setCheckAll={setCheckAll}
+                    />
+                  )}
+                {activeTab === "Ficha técnica" &&
+                  (product?.datasheet_status !== "NS" ? (
+                    datasheets[0]?.data?.map((dataGroup, index) => (
+                      <InputGroup
+                        key={index + "-" + activeRetailer.name}
+                        articleId={product.id_article}
+                        version={version}
+                        activeSection={activeTab}
+                        inputGroup={dataGroup}
+                        dataInputs={datasheets[1]}
+                        updatedDatasheets={updatedDatasheets}
+                        setUpdatedDatasheets={setUpdatedDatasheets}
+                        //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
+                      />
+                    ))
+                  ) : (
+                    <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?.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>
+          {isRevision() && getSectionStatus() ? (
+            <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(
+                            "#description-commentary-box-0 .ql-container .ql-editor > p"
+                          ).innerHTML,
+                          activeTab
+                        )
+                      }
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="feedback-box">
+                  <Commentary
+                    comment={comment.message}
+                    reviewed={crossComment}
+                  />
+                  <Button
+                    buttonType={"circular-button accept-button"}
+                    onClick={async () => {
+                      setCrossComment(true);
+                      commentRevised();
+                    }}
+                  />
+                </div>
+              )}
+              <Button
+                buttonType={
+                  evaluationComplete() &&
+                  (productEdit.product.id_order || productEdit.product.orderId)
+                    ? "general-green-button"
+                    : "general-button-disabled"
+                }
+                label={"Enviar evaluación"}
+                onClick={() => {
+                  setModalSent(true);
+                  sendEvaluation();
+                  setMessage(
+                    `¡Evaluación de ${translateConcept()} completada!`
+                  );
+                }}
+              />
+            </div>
+          ) : revision ? null : (
+            <div className="required-inputs-message">
+              <div>
+                <p>
+                  Los atributos son requeridos por las plataformas de las
+                  cadenas, es muy importante completar los campos requeridos ya
+                  que pueden rechazar el producto por falta de información.
+                </p>
+              </div>
+              {inCart ? (
+                <button type="button">
+                  <Link to="/checkout">
+                    <p>Articulo en carrito</p>
+                    <p>Ir a checkout</p>
+                  </Link>
+                </button>
+              ) : (
+                <Button
+                  onClick={() => {
+                    setShowContentohRequestModal &&
+                      setShowContentohRequestModal(true);
+                  }}
+                  buttonType="general-default-button"
+                  label="Enviar a Content-oh!"
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      {showModal && (
+        <ProductImageModal images={images} setShowModal={setShowModal} />
+      )}
+      {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("")}
+        />
+      )}
+      {modalSent && (
+        <GlobalModal
+          close={() => setModalSent(false)}
+          message={message}
+          detail={detail}
+          bold={!evaluationComplete() && "Aprueba / Rechaza"}
+          widthImg={!evaluationComplete() ? "160px" : "354px"}
+          heightImg={!evaluationComplete() ? "84px" : "354px"}
+          img={getSectionIcon()}
+        />
+      )}
+      {modalViewError && (
+        <GlobalModal
+          close={() => setModalViewError(false)}
+          message={`${activeTab} rechazada`}
+          detail={"Agrega tu comentarios para enviar el rechazo"}
+          button1={{
+            name: "Enviar",
+            action: (e) => {
+              createComment(e, document.querySelector("#area").value);
+              setModalViewError(false);
+              setModalViewTextArea(true);
+            },
+          }}
+          img={errorModal}
+          textArea={true}
+        />
+      )}
+      {showGenericModal && (
+        <GlobalModal
+          close={() => setShowGenericModal(false)}
+          message={dataGenericModal.message}
+          detail={dataGenericModal.detail}
+          button1={dataGenericModal.button1}
+          button2={dataGenericModal.button2}
+          img={dataGenericModal.img}
+        />
+      )}
+      {modalViewTextArea && (
+        <GlobalModal
+          close={() => setModalViewTextArea(false)}
+          message={`Gracias, tus comentarios fueron entregados.`}
+          detail={"Trabajaremos en conjunto para resolverlo."}
+          button1={{
+            name: "Cerrar",
+            action: () => setModalViewTextArea(false),
+          }}
+          img={face}
+          textArea={false}
+        />
+      )}
+    </Container>
+  );
+};