contentoh-components-library 10.0.0 → 13.0.0

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -19,10 +19,13 @@ export const StatusAsignationInfo = ({
   saveDescriptions,
   updateImages,
   assignationsImages,
+  setAssignation,
+  isRetailer,
   id = "default-id",
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
   const [layout, setLayout] = useState(true);
+  const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -77,14 +80,15 @@ export const StatusAsignationInfo = ({
       )}
       <StatusTag statusType={status} ovalForm={true} />
       <div className="assignations-container">
-        {assignationsImages?.map((assignation, index) => (
+        {assignationsImages?.assignations?.map((assignation, index) => (
           <Avatar
-            key={index + "-" + assignation}
+            key={index + "-" + assignation.id}
             imageType={"small-image"}
-            image={getProfilePicture(assignation, 20, 20)}
+            image={getProfilePicture(assignation.id, 20, 20)}
             altText="user profile image"
             onClick={() => {
               setShowAsignationPanel(true);
+              setAssignationType(assignation?.collaboratorType);
             }}
           />
         ))}
@@ -108,31 +112,41 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {asignationsList !== undefined ? (
-              asignationsList.map((asigantion, index) => (
-                <AsignationOption
-                  profileImage={asignation.image}
-                  asignationType={asignation.asignationType}
-                  name={asignation.name}
-                  team={asigantion.team}
-                />
-              ))
+            {assignationsImages?.collaborators !== undefined ? (
+              assignationsImages?.collaborators[assignationType]?.map(
+                (asignation, index) => (
+                  <AsignationOption
+                    key={index + "-" + asignation.name}
+                    profileImage={getProfilePicture(
+                      asignation?.id_user,
+                      40,
+                      40
+                    )}
+                    onClick={() => {
+                      setAssignation(assignationType, asignation?.id_user);
+                    }}
+                    name={asignation.name}
+                  />
+                )
+              )
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          <div className="default-asignations-list">
-            <AsignationOption
-              asignationType={"provider"}
-              name={"Solicitar a"}
-              team={"Proveedor"}
-            />
-            <AsignationOption
-              asignationType={"team"}
-              name={"Solicitar a"}
-              team={"Content-oh!"}
-            />
-          </div>
+          {isRetailer === 0 && (
+            <div className="default-asignations-list">
+              <AsignationOption
+                asignationType={"provider"}
+                name={"Solicitar a"}
+                team={"Proveedor"}
+              />
+              <AsignationOption
+                asignationType={"team"}
+                name={"Solicitar a"}
+                team={"Content-oh!"}
+              />
+            </div>
+          )}
         </div>
       )}
     </Container>

package/src/components/molecules/StatusAsignationInfo/styles.js

@@ -18,6 +18,7 @@ export const Container = styled.div`
 
   .assignations-container {
     display: flex;
+    cursor: pointer;
   }
 
   .asignation-panel {
@@ -26,10 +27,11 @@ export const Container = styled.div`
     box-sizing: border-box;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
-    padding: 10px;
+    padding: 10px 8px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
+    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -57,7 +59,6 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
-      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -70,7 +71,12 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
       }
     }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
   }
 `;

package/src/components/molecules/TableHeader/index.js

@@ -3,7 +3,13 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({ imagesStatus, activeImage, assignationsImages }) => {
+export const TableHeader = ({
+  imagesStatus,
+  activeImage,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+}) => {
   return (
     <Container>
       <ScreenHeader
@@ -14,6 +20,8 @@ export const TableHeader = ({ imagesStatus, activeImage, assignationsImages }) =
       <StatusAsignationInfo
         status={imagesStatus}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
       />
     </Container>
   );

package/src/components/organisms/FullTabsMenu/index.js

@@ -13,10 +13,11 @@ export const FullTabsMenu = ({
   saveDatasheets,
   saveDescriptions,
   updateImages,
-  assignations,
+  assig,
+  setAssignation,
+  isRetailer,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
-  //console.log(status);
 
   return (
     <Container>
@@ -34,7 +35,9 @@ export const FullTabsMenu = ({
         saveDatasheets={saveDatasheets}
         saveDescriptions={saveDescriptions}
         updateImages={updateImages}
-        assignationsImages={assignations[activeTab]}
+        assignationsImages={assig}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
       />
     </Container>
   );

package/src/components/organisms/ImageDataTable/index.js

@@ -12,6 +12,8 @@ export const ImageDataTable = ({
   setImages,
   assignationsImages,
   imagesStatus,
+  setAssignation,
+  isRetailer,
 }) => {
   return (
     <Container darkMode={darkMode}>
@@ -19,6 +21,8 @@ export const ImageDataTable = ({
         imagesStatus={imagesStatus}
         activeImage={activeImage}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
       />
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />

package/src/components/organisms/ProductImageModal/index.js

@@ -37,10 +37,6 @@ export const ProductImageModal = ({
     }
   }, [showValidationPanel]);
 
-  useEffect(() => {
-    console.log(images?.values[activeImage]);
-  }, [activeImage]);
-
   return (
     <Container>
       <div className="modal-container">

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

@@ -43,6 +43,8 @@ RetailerProductEditionDefault.args = {
     "Ficha técnica": false,
     Imágenes: false,
   },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjU2M2I0NTFlLTVhZDQtNGMzNy1iNjIzLTc3NjMwM2Y3YjJiNSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjQ4NzYwODcwLCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjQ4NzY0NDcwLCJpYXQiOjE2NDg3NjA4NzAsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.Y2gmN-9KDeYyvvSJOzKJUP-WL8O4AmZhdLnfHxSB_9lAXQFns6uJUbX1nzE75cuqeQ3NeiNZy4hu8y5Y7hckPuQFy01nY3OoY3SfD06W0SciNz0txNSR7oN6KH_c_9FOwQiQ0mnOs9udo9nDM4faFFUuu9UD6RMVfeLW1gfZmtyc3lfmy6YO6feJcS3opSSQpXH4Mgh415fXFjbyz344ssd5nl7Onyh8jq5i-LAex3OPXhKzjrBnDRpGg3BQPIfpsquGZNKBiWqyos--CuohFBeyevMLGoKOcU-Ga-zIdEfonTtDVRe6CQLgOZJ2xTPdswlzRPby1gFoZjNebeeRVw",
   articleId: 238,
   category: 846,
   version: 2,

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 {