contentoh-components-library 11.0.0 → 12.0.0

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

@@ -7,7 +7,11 @@ import { FullTabsMenu } from "../../organisms/FullTabsMenu";
 import { InputGroup } from "../../organisms/InputGroup";
 import { useEffect, useReducer, useState, useCallback } from "react";
 import { GalleryElement } from "../../molecules/GalleryElement";
-import { getRetailerServices, getPercentage } from "../../../global-files/data";
+import {
+  getRetailerServices,
+  getPercentage,
+  fetchUsers,
+} from "../../../global-files/data";
 import { GalleryHeader } from "../../molecules/GalleryHeader";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { useDropzone } from "react-dropzone";
@@ -59,6 +63,7 @@ export const RetailerProductEdition = ({
   articleId,
   productSelected = {},
   user = {},
+  token,
 }) => {
   const [activeTab, setActiveTab] = useState("Descripción");
   const [activeImage, setActiveImage] = useState();
@@ -121,7 +126,12 @@ export const RetailerProductEdition = ({
   const [icon, setIcon] = useState(null);
   const [version, setVersion] = useState(productSelected?.version);
   const [comments, setComments] = useState({});
+  const [comment, setComment] = useState("");
   const [requiredNull, setRequiredNull] = useState(0);
+  const [crossComment, setCrossComment] = useState(false);
+  const [userGroups, setUserGroups] = useState([]);
+  const [assig, setAssig] = useState({});
+  const isRetailer = user?.is_retailer;
 
   const loadData = async () => {
     const services = await getRetailerServices(
@@ -129,7 +139,7 @@ export const RetailerProductEdition = ({
       parseInt(productSelected.article.id_category),
       productSelected.version
     );
-    console.log(services, "parsedResponse");
+
     //Converts the data inside the datasheets object to array
     setServices(services);
     setActiveRetailer(productSelected?.retailers[0]);
@@ -166,7 +176,7 @@ export const RetailerProductEdition = ({
   const translateConcept = (concept) => {
     let translation = "";
     if (concept === "datasheet") {
-      translation = "Ficha ténica";
+      translation = "Ficha técnica";
     } else if (concept === "description") {
       translation = "Descripción";
     } else if (concept === "images") {
@@ -175,7 +185,7 @@ export const RetailerProductEdition = ({
     return translation;
   };
 
-  const getComments = async (tab) => {
+  const getComments = async (tab = "Descripción") => {
     const commentsResponse = await Promise.all([
       axios.get(
         `${process.env.REACT_APP_COMMENTS_ENDPOINT}?articleId=${productSelected?.article?.id_article}&concept=description&orderIdColab=${productSelected?.orderId}&version=${version}`
@@ -189,27 +199,84 @@ export const RetailerProductEdition = ({
     ]);
 
     let comments = {};
-    commentsResponse.map(
+    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);
-    //const comment = JSON.parse(commentsResponse.data.body).data;
-    //setComment(comment[0]);
   };
 
-  useEffect(() => {
+  useEffect(async () => {
     loadData();
     getPercentage({ data: [productSelected] }).then((res) =>
       setPercentages(res)
     );
     getServices();
     getComments();
+    setUserGroups(await fetchUsers(token));
   }, []);
 
+  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(
@@ -271,8 +338,7 @@ export const RetailerProductEdition = ({
         dataObject,
         {
           headers: {
-            Authorization:
-              "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+            Authorization: token,
           },
         }
       );
@@ -292,8 +358,7 @@ export const RetailerProductEdition = ({
         dataObject,
         {
           headers: {
-            Authorization:
-              "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+            Authorization: token,
           },
         }
       );
@@ -406,8 +471,7 @@ export const RetailerProductEdition = ({
           dataImages,
           {
             headers: {
-              Authorization:
-                "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+              Authorization: token,
             },
           }
         );
@@ -521,12 +585,10 @@ export const RetailerProductEdition = ({
         }
       }
     }
-    //console.log(serv, "serv");
     setServicesData(serv);
   };
 
   const sendToFacilitator = async (result) => {
-    console.log("exce");
     let concept = "";
     switch (activeTab) {
       case "Descripción":
@@ -579,8 +641,7 @@ export const RetailerProductEdition = ({
       };
       await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
         headers: {
-          Authorization:
-            "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+          Authorization: token,
         },
       });
     } else {
@@ -610,8 +671,7 @@ export const RetailerProductEdition = ({
 
       axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
         headers: {
-          Authorization:
-            "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxYTk4MzZlNS1kMDYyLTQ4ZjQtYjY4Yi04NDZhZWEwMDFlMDIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY0NjM1MzAyMywibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NDYzNTY2MjMsImlhdCI6MTY0NjM1MzAyMywiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.LX6wMUK1eiE49heX3nVIMR4oRrWEaI-xyUErYx9_AWlxLn5jksbmmZmXujeaailxxcvaVQDYIbKSyrahwmqUohaDChM3TgDHCHTvAeiDGoVAFIjKyzk_wzttgVrKu5P_45bNrds7PVmLC981W8aVdQO32JklWhCpO_jEbtIgGeklQ6PF9yOd5TEWtq4kJTuYrbZpl21qnZ_wopbLSOz4Ty_OoIbvkFFcPV2jSBsMggQns3GqlHjlCLMtSN43IgQbuZ711BPWk6MMIFI48tl7HEC9rm1z1l0aejtn7ooiYKNsV2V__OL0Mi3ziDmoTDp3Ra02m0J176b99V17mFmj7A",
+          Authorization: token,
         },
       });
       setProduct(productTemp);
@@ -673,22 +733,91 @@ export const RetailerProductEdition = ({
     return productSelected?.version === version;
   }
 
-  useEffect(() => {
-    // let concept = "";
-    // switch (activeTab) {
-    //   case "Ficha técnica":
-    //     concept = "datasheet";
-    //     break;
-    //   case "Imágenes":
-    //     concept = "images";
-    //     break;
-    //   default:
-    //     concept = "description";
-    //     break;
-    // }
-    // getComments(concept);
+  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,
+    };
+    e.preventDefault();
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    await getComments(tab);
+  };
+
+  useEffect(async () => {
+    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));
+  };
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -705,11 +834,10 @@ export const RetailerProductEdition = ({
             activeImage={images?.values ? images?.values[activeImage] : {}}
             retailerSelected={activeRetailer.id}
             setImages={setImages}
-            assignationsImages={[
-              productSelected.article.id_images_especialist,
-              productSelected.article.id_images_facilitator,
-            ]}
+            assignationsImages={assig["Imágenes"]}
             imagesStatus={productSelected?.images_status}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
           />
         </div>
         <div className="product-information">
@@ -745,20 +873,9 @@ export const RetailerProductEdition = ({
             saveDescriptions={saveDescriptions}
             saveDatasheets={saveDatasheets}
             updateImages={updateImages}
-            assignations={{
-              Descripción: [
-                productSelected.article.id_description_especialist,
-                productSelected.article.id_description_facilitator,
-              ],
-              "Ficha técnica": [
-                productSelected.article.id_datasheet_especialist,
-                productSelected.article.id_datasheet_facilitator,
-              ],
-              Imágenes: [
-                productSelected.article.id_images_especialist,
-                productSelected.article.id_images_facilitator,
-              ],
-            }}
+            assig={assig[activeTab]}
+            setAssignation={setAssignation}
+            isRetailer={isRetailer}
           />
           <div
             className={
@@ -814,18 +931,29 @@ export const RetailerProductEdition = ({
           {(userAssigned(activeTab, "especialist" || "facilitator") ||
             auditorAssigned()) && (
             <div className="commentary-box">
-              {!comments[activeTab] ? (
+              {!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.getElementById(
+                            "description-commentary-box-0"
+                          ).value,
+                          activeTab
+                        )
+                      }
                     />
                     <Button
                       buttonType={
@@ -841,7 +969,19 @@ export const RetailerProductEdition = ({
                   </div>
                 </div>
               ) : (
-                <Commentary comment={comments[activeTab].message} />
+                <div className="feedback-box">
+                  <Commentary
+                    comment={comment.message}
+                    reviewed={crossComment}
+                  />
+                  <Button
+                    buttonType={"circular-button accept-button"}
+                    onClick={async () => {
+                      setCrossComment(true);
+                      commentRevised();
+                    }}
+                  />
+                </div>
               )}
             </div>
           )}

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

@@ -73,6 +73,10 @@ export const Container = styled.div`
           }
         }
       }
+
+      .feedback-box {
+        display: flex;
+      }
     }
   }
   .container {

package/src/global-files/data.js

@@ -15,8 +15,6 @@ export const getRetailerServices = async (articleId, category, version) => {
     ),
   ]);
 
-  console.log(JSON.parse(responseArray[0].data.body).data);
-
   const datasheets = JSON.parse(responseArray[0].data.body).data;
   const descriptions = JSON.parse(responseArray[1].data.body).data;
   const images = JSON.parse(responseArray[2].data.body).data;
@@ -150,3 +148,32 @@ export const getProfilePicture = (userId, width, height) => {
     return defaultUpdate;
   }
 };
+
+export const fetchUsers = async (auth) => {
+  const usersPromises = [];
+  let usersGroups = [];
+  const header = {
+    headers: {
+      Authorization: auth,
+    },
+  };
+  /**
+   * 7 will fetch all text specialists
+   * 8 will fetch all img specialists
+   * 4 will fetch all text facilitators
+   * 5 will fetch all img facilitators
+   * 6 will fetch all auditors
+   */
+  usersPromises.push(
+    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=7`, header),
+    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=8`, header),
+    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=4`, header),
+    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=5`, header),
+    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=6`, header)
+  );
+  const usersResponse = await Promise.all(usersPromises);
+  usersResponse.forEach((item, i) => {
+    usersGroups.push(item.data.data);
+  });
+  return usersGroups;
+};