contentoh-components-library 21.0.9 → 21.0.13

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

@@ -5,1291 +5,102 @@ 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 { useEffect, useState } from "react";
 import { GalleryElement } from "../../molecules/GalleryElement";
-import { saveAs } from "file-saver";
-import {
-  getRetailerServices,
-  getPercentage,
-  fetchUsers,
-} from "../../../global-files/data";
+import { getRetailerServices, getImage } 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";
 
-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 = ({
-  tabsSections,
-  productSelected = {},
-  user = {},
-  token,
-}) => {
+export const RetailerProductEdition = ({ productData, tabsSections }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
-  const [imageLayout, setImageLayout] = useState(false);
+  const [imageLayout, setImageLayout] = useState(true);
   const [headerTop, setHeaderTop] = useState(0);
   const [descriptions, setDescriptions] = useState([]);
-  const [datasheets, setDatasheets] = useState([]);
-  const [images, setImages] = useReducer(reducerImages, {});
+  const [datasheets, setDatasheets] = useState({});
+  const [images, setImages] = useState({});
   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(
-    new Array(productSelected?.retailers?.length).fill({ percentage: 0 })
-  );
-  const [activePercentage, setActivePercentage] = useState(0);
-  const [activeRetailer, setActiveRetailer] = useState(
-    productSelected?.retailers[0]
-  );
-  const [services, setServices] = useState([]);
-  const [servicesData, setServicesData] = useState([]);
-  const [message, setMessage] = useState("");
-  const [product, setProduct] = useState(
-    JSON.parse(sessionStorage.getItem("productSelected"))
-      ? JSON.parse(sessionStorage.getItem("productSelected"))
-      : productSelected
-  );
-  const [icon, setIcon] = useState(null);
-  const [version, setVersion] = useState(productSelected?.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);
-  useEffect(() => {
-    checkAll && setSelectedImages(images.values);
-  }, [checkAll]);
 
   const loadData = async () => {
-    const services = await getRetailerServices(
-      productSelected?.article?.id_article,
-      parseInt(productSelected?.article?.id_category),
-      productSelected?.version
-    );
+    const services = await getRetailerServices();
 
     //Converts the data inside the datasheets object to array
-    setServices(services);
-    getRequired(services);
-    //setActiveRetailer(productSelected?.retailers[0]);
-    setImages({
-      action: "init",
-      init: services[2],
-    });
-    if (services[2]?.values?.length > 0) setActiveImage(0);
-
-    getPercentage({ data: [productSelected] }).then((res) =>
-      setPercentages(res)
-    );
-    setLoading(false);
-  };
-
-  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=${product?.article?.id_article}&orderId=${product?.article?.id_order}&end=true`
+    Object.values(services[0])[0].data = Object.values(
+      Object.values(services[0])[0].data
     );
-    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 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}`
-      ),
-      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.forEach(
-      (comment) =>
-        JSON.parse(comment?.data?.body).data[0] &&
-        (comments[
-          translateConcept(JSON.parse(comment?.data?.body)?.data[0]?.concept)
-        ] = JSON.parse(comment?.data?.body).data[0])
-    );
-    setComment(comments[tab]);
-    setComments(comments);
+    setDatasheets(Object.values(services[0]));
+    setDescriptions(services[1]);
+    setImages(services[2]);
+    setActiveImage(getImage(services[2]?.values[0], 340, 295));
   };
 
   useEffect(async () => {
     loadData();
-    // getPercentage({ data: [productSelected] }).then((res) =>
-    //   setPercentages(res)
-    // );
-    getServices();
-    getComments();
-    setUserGroups(await fetchUsers(token));
   }, []);
 
-  const loadAssignations = (currentProduct) => {
-    setAssig({
-      Descripción: {
-        assignations: [
-          {
-            collaboratorType: "especialist",
-            id: currentProduct?.article?.id_description_especialist,
-          },
-          {
-            collaboratorType: "facilitator",
-            id: currentProduct?.article?.id_description_facilitator,
-          },
-        ],
-        collaborators: {
-          especialist: userGroups[0] || [],
-          facilitator: userGroups[2] || [],
-        },
-      },
-      "Ficha técnica": {
-        assignations: [
-          {
-            collaboratorType: "especialist",
-            id: currentProduct?.article?.id_datasheet_especialist,
-          },
-          {
-            collaboratorType: "facilitator",
-            id: currentProduct?.article?.id_datasheet_facilitator,
-          },
-        ],
-        collaborators: {
-          especialist: userGroups[0] || [],
-          facilitator: userGroups[2] || [],
-        },
-      },
-      Imágenes: {
-        assignations: [
-          {
-            collaboratorType: "especialist",
-            id: currentProduct?.article?.id_images_especialist,
-          },
-          {
-            collaboratorType: "facilitator",
-            id: currentProduct?.article?.id_images_facilitator,
-          },
-        ],
-        collaborators: {
-          especialist: userGroups[1] || [],
-          facilitator: userGroups[3] || [],
-        },
-      },
-    });
-  };
-
-  useEffect(() => {
-    loadAssignations(productSelected);
-  }, [userGroups]);
-
-  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) {
-      if (services[0][activeRetailer.id])
-        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 dataObject = {
-      articleId: productSelected?.article?.id_article,
-      articleData: updatedDescriptions,
-    };
-    if (productSelected?.orderId)
-      dataObject["orderId"] = productSelected?.orderId;
-    try {
-      await axios.put(
-        `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?description=true&version=${version}`,
-        dataObject,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-      setMessage("Descripciones guardadas con éxito");
-      loadData();
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const saveDatasheets = async () => {
-    setLoading(true);
-    const dataObject = {
-      articleId: productSelected?.article?.id_article,
-      articleData: updatedDatasheets,
-    };
-    if (productSelected?.orderId)
-      dataObject["orderId"] = productSelected?.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");
-      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?.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),
-    };
-    if (productSelected?.orderId) data["orderId"] = productSelected?.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 (productSelected?.orderId) e["orderId"] = productSelected?.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 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 (
-      (product[`${concept}_status`] === "QF" &&
-        (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
-      (product[`${concept}_status`] === "AF" && //sessionStorage productSelected
-        (user.id_role === 1 || user.id_role === 6)) ||
-      (product[`${concept}_status`] === "RP" &&
-        (user.id_role === 1 || user.id_role === 6)) ||
-      (product[`${concept}_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 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";
-        }
-      }
-    }
-    setServicesData(serv);
-  };
-
-  const sendToFacilitator = async (result) => {
-    let concept = "";
-    switch (activeTab) {
-      case "Descripción":
-        concept = "description";
-        break;
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-    }
-    let productTemp = { ...product };
-    let evalStatus = product[`${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";
-    } else if (evalStatus === "RC") {
-      setMessage("Evaluación enviada");
-      getSectionIcon();
-      productTemp[`${concept}_status`] = "AP";
-    }
-
-    let data = {};
-    if (result) {
-      updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
-      data = {
-        articleId: product.article.id_article,
-        orderId: product.orderId,
-        concept: concept,
-        result: result,
-        evalStatus: evalStatus,
-        retailerId: activeRetailer.id,
-      };
-      try {
-        await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
-          headers: {
-            Authorization: token,
-          },
-        });
-      } catch (error) {
-        console.log(error);
-      }
-    } else {
-      if (specialistDone) {
-        updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
-      }
-      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;
-      }
-
-      console.log(data);
-
-      axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
-        headers: {
-          Authorization: token,
-        },
-      });
-      sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
-      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;
-
-    if (!rol) {
-      switch (user.id_role) {
-        case 4:
-        case 5:
-          rol = "facilitator";
-          break;
-        case 7:
-        case 8:
-          rol = "especialist";
-          break;
-      }
-    }
-
-    return (
-      productSelected.article[`id_${concept}_${rol}`] === user.id_user &&
-      validUser
-    );
-  };
-
-  const auditorAssigned = () => {
-    return productSelected?.article[`id_auditor`] === user.id_user;
-  };
-
-  const createComment = async (e, body, tab) => {
-    let concept = "";
-    switch (activeTab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-    const data = {
-      articleId: product?.article?.id_article,
-      orderId: product?.orderId,
-      message: body,
-      concept: concept,
-      version: version,
-    };
-    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
-      headers: {
-        Authorization: token,
-      },
-    });
-    await getComments(tab);
-  };
-
-  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) =>
-      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) =>
-      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: sessionStorage.getItem("jwt"),
-      },
-    });
-    setCrossComment(false);
-    await getComments();
-  };
-
-  const setAssignation = async (assignationType, assignationId) => {
-    let concept = "";
-    switch (activeTab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-    const productTemp = productSelected;
-    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 evaluationComplete = () => {
-    let concept = "";
-    switch (activeTab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-      case "Descripción":
-        concept = "description";
-        break;
-    }
-
-    let serv = servicesData.filter((item) => item.service === concept);
-    let approved = "";
-    let rejected = "";
-    if (
-      product.status === "IN_PROGRESS" ||
-      product.status === "QF" ||
-      product.status === "RF"
-    ) {
-      approved = "AF";
-      rejected = "RF";
-      if (product.status === "QF") {
-        return (
-          serv.filter(
-            (item) =>
-              item.status === approved ||
-              item.status === rejected ||
-              item.status === "AA" ||
-              item.status === "AP"
-          ).length === serv.length
-        );
-      }
-    } else if (
-      product.status === "AF" ||
-      product.status === "RA" ||
-      product.status === "RP"
-    ) {
-      approved = "AA";
-      rejected = "RA";
-
-      if (product.status === "RP" || product.status === "AF") {
-        return (
-          serv.filter(
-            (item) =>
-              item.status === approved ||
-              item.status === rejected ||
-              item.status === "AP"
-          ).length === serv.length
-        );
-      }
-    } else if (product.status === "RC") {
-      approved = "AP";
-      rejected = "RA";
-      return (
-        serv.filter(
-          (item) => item.status === approved || item.status === rejected
-        ).length === serv.length
-      );
-    }
-    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.article.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"
-    );
-  };
-
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
       <div className="data-container">
         <div className="image-data-panel">
           <ImagePreviewer
-            activeImage={images?.values ? images?.values[activeImage] : {}}
+            activeImage={activeImage}
             imagesArray={images}
             setActiveImage={setActiveImage}
             setShowModal={setShowModal}
           />
           <ImageDataTable
-            lists={images}
-            activeImage={images?.values ? images?.values[activeImage] : {}}
-            retailerSelected={activeRetailer.id}
-            setImages={setImages}
-            assignationsImages={assig["Imágenes"]}
-            imagesStatus={productSelected?.images_status}
-            setAssignation={setAssignation}
-            isRetailer={isRetailer}
-            onClickSave={() =>
-              product?.services?.images === 1 && updateImages()
-            }
+            imageData={activeImage?.data}
+            activeImage={activeImage}
           />
         </div>
         <div className="product-information">
-          <FullProductNameHeader
-            headerData={product}
-            percent={activePercentage}
-            activeRetailer={activeRetailer}
-            setActiveRetailer={setActiveRetailer}
-            approveRejectButtons={approveRejectButtons}
-            sendToFacilitator={sendToFacilitator}
-            auditorAssigned={auditorAssigned}
-            userAssigned={() => userAssigned(activeTab)}
-          />
+          <FullProductNameHeader headerData={productData.headerData} />
           <FullTabsMenu
             tabsSections={tabsSections}
-            status={
-              //   {
-              //   Descripción: product?.description_status,
-              //   "Ficha técnica": product?.datasheet_status,
-              //   Imágenes: product?.images_status,
-              // }
-              () => {
-                let concept = "";
-                switch (activeTab) {
-                  case "Ficha técnica":
-                    concept = "datasheet";
-                    break;
-                  case "Imágenes":
-                    concept = "images";
-                    break;
-                  case "Descripción":
-                    concept = "description";
-                    break;
-                }
-                let retailerService = {};
-                [retailerService] = servicesData.filter(
-                  (service) =>
-                    service.id_retailer === activeRetailer.id &&
-                    service.service === concept
-                );
-                return retailerService?.status;
-              }
-            }
-            activeTab={activeTab}
+            status={productData.status}
+            profileImage={productData.asigned}
             setActiveTab={setActiveTab}
             setImageLayout={setImageLayout}
-            downloadImages={downloadImages}
-            askToDeleteImages={askToDeleteImages}
-            assig={assig[activeTab]}
-            setAssignation={setAssignation}
-            isRetailer={isRetailer}
-            onClickSave={() => {
-              switch (activeTab) {
-                case "Descripción":
-                  product?.services?.descriptions === 1 && saveDescriptions();
-                  break;
-                case "Ficha técnica":
-                  product?.services?.datasheets === 1 && saveDatasheets();
-                  break;
-                case "Imágenes":
-                  product?.services?.images === 1 && updateImages();
-                  break;
-
-                default:
-                  break;
-              }
-            }}
           />
           <div
             className={
               "services-information-container " +
-              (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
+              (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?.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}
-                      />
-                    ))
-                  ) : (
-                    <ScreenHeader
-                      text={"No cuentas con este servicio"}
-                      headerType={"input-name-header"}
-                    />
-                  ))}
-                {activeTab === "Descripción" &&
-                  (product?.services?.descriptions === 1 ? (
-                    <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?.services?.images === 1 ? (
-                    <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"}
-                    />
-                  ))}
-              </>
+            {!imageLayout && <GalleryHeader />}
+            {activeTab === "Ficha técnica" &&
+              datasheets[0]?.data?.map((dataGroup, index) => (
+                <InputGroup
+                  key={index}
+                  activeSection={activeTab}
+                  inputGroup={dataGroup}
+                  dataInputs={datasheets[1]}
+                />
+              ))}
+            {activeTab === "Descripción" && (
+              <InputGroup
+                activeSection={activeTab}
+                inputGroup={descriptions[0]}
+              />
             )}
+
+            {activeTab === "Imágenes" &&
+              images?.values?.map((image, index) => (
+                <GalleryElement
+                  key={index}
+                  image={getImage(image, 179, 179)}
+                  gridLayout={imageLayout}
+                  id={"gallery-element-" + index}
+                />
+              ))}
           </div>
-          {(userAssigned(activeTab) || auditorAssigned()) && (
-            <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() &&
-                  requiredNull[activeTab] === 0 &&
-                  approveRejectButtons()
-                    ? "general-green-button"
-                    : "general-button-disabled"
-                }
-                label={"Enviar evaluación"}
-                onClick={() => sendToFacilitator()}
-              />
-            </div>
-          )}
         </div>
       </div>
       {showModal && (
-        <ProductImageModal
-          images={images}
-          setShowModal={setShowModal}
-          sendToFacilitator={sendToFacilitator}
-          approveRejectButtons={approveRejectButtons}
-        />
-      )}
-      {message.length > 0 && (
-        <GenericModal
-          buttonType={componentsArray.length > 0 && "delete-product"}
-          componentsArray={
-            componentsArray.length > 0
-              ? componentsArray
-              : [
-                  <img key="1" src={succes} alt="success icon" />,
-                  <ScreenHeader
-                    key="2"
-                    headerType={"retailer-name-header"}
-                    text={message}
-                    color={"white"}
-                  />,
-                ]
-          }
-          onClick={() => setMessage("")}
-        />
+        <ProductImageModal images={images} setShowModal={setShowModal} />
       )}
     </Container>
   );