contentoh-components-library 21.5.35 → 21.5.37

package/src/components/pages/MultipleEdition/utils.js

@@ -1,1074 +1,1074 @@
-import axios from "axios";
-import { ImageVisor } from "../../organisms/ImageVisor";
-import { ButtonV2 } from "../../atoms/ButtonV2";
-import { deleteImage, saveData} from "./saveData";
-import { Container, Input, InputBase, TextField } from "@mui/material";
-import { ValidationPanel } from "../../atoms/ValidationPanel";
-import { TagAndInput } from "../../molecules/TagAndInput";
-import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
-import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
-import infoIcon from "../../../assets/images/Icons/info.svg";
-import saveWhite from "../../../assets/images/Icons/save-white.svg";
-import saveWhiteGray from "../../../assets/images/Icons/save-white-gray.svg";
-import { DockSharp } from "@mui/icons-material";
-import React, { useState } from 'react';
-import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
-import { Tooltip } from "../../atoms/Tooltip";
-
-// variables
-export const optionsSelect = [
-  {
-    label: "item 1",
-    value: 1,
-  },
-  {
-    label: "item 2",
-    value: 2,
-  },
-  {
-    label: "item 3",
-    value: 3,
-  },
-  {
-    label: "item 4",
-    value: 4,
-  },
-];
-
-export const columnsBase = [
-  {
-    Header: "UPC",
-    accessor: "upc",
-    width: "100px",
-    fixedToLeft: 0,
-    style: {
-      textAlign: "left",
-    },
-  },
-  {
-    Header: "Nombre",
-    accessor: "name",
-    width: "100px",
-    fixedToLeft: 100,
-  },
-  {
-    Header: "Categoría",
-    accessor: "category",
-    width: "100px",
-    fixedToLeft: 200,
-  },
-  {
-    Header: "Est.",
-    accessor: "status",
-    width: "30px",
-    fixedToLeft: 300,
-  },
-  {
-    Header: "Ver.",
-    accessor: "version",
-    width: "30px",
-    fixedToLeft: 330,
-    style: {
-      borderRight: "1px solid #f0f0f0",
-    },
-  },
-];
-
-// data
-async function getData(service, articles, versions, token) {
-  const encodedArticles = encodeURIComponent(articles.join(","));
-  const encodedVersion = encodeURIComponent(versions.join(","));
-  const params = `?articles=${encodedArticles}&versions=${encodedVersion}`;
-  const res = await axios.get(
-    `${process.env.REACT_APP_BASE_MULTIPLE_EDITION_ENDPOINT}/${service}${params}`,
-    {
-      headers: {
-        Authorization: token,
-      },
-    }
-  );
-  return JSON.parse(res.data.body);
-}
-
-// functions
-export function dataReducer(state, action) {
-  if (action.type === "init") {
-    return action.payload;
-  }
-  if (action.type === "updateImage") {
-    const { articleId, imageId ,token } = action.payload;
-    const newImageData = state.images.data.slice();
-    const articleIndex = newImageData.findIndex((f) => f.id === articleId);
-    const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
-    newImageData[articleIndex].images[imageId].value = {
-      ...action.payload,
-      id,
-    };
-    const data = newImageData;
-    saveData({section:"images", data: {data}, token: token});
-    return {
-      ...state,
-      images: {
-        ...state.images,
-        data: newImageData,
-      },
-    };
-  }
-  if (action.type === "deleteImage") {
-    const { articleId, imageId, token } = action.payload;
-    const newImageData = state.images.data.slice();
-    const articleIndex = newImageData.findIndex((f) => f.id === articleId);
-    const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
-    delete newImageData[articleIndex]?.images[imageId]?.value;
-    const data = {
-      articleId,
-      deleteImages: [
-        {
-          id,
-        },
-      ],
-    };
-    deleteImage(data, newImageData[articleIndex].version, token);
-    return {
-      ...state,
-      images: {
-        ...state.images,
-        data: newImageData,
-      },
-    };
-  }
-  return state;
-}
-
-export async function initData(setDataServices, articles, versions, token) {
-  const [description, datasheet, images] = await Promise.all([
-    getData("description", articles, versions, token),
-    getData("datasheet", articles, versions, token),
-    getData("images", articles, versions, token),
-  ]);
-  const { data: dataDescription, attributes: rulesDescription } = description;
-  const { data: dataDatasheet, attributes: rulesDatasheet } = datasheet;
-  const { data: dataImage, typesShot: rulesImage } = images;
-  const payload = {
-    description: {
-      data: Object.values(dataDescription),
-      rules: rulesDescription,
-    },
-    datasheet: {
-      data: Object.values(dataDatasheet),
-      rules: rulesDatasheet,
-    },
-    images: {
-      data: Object.values(dataImage),
-      rules: rulesImage.reduce(
-        (prev, curr) =>
-          (prev = {
-            ...prev,
-            [curr.id]: curr.name,
-          }),
-        {}
-      ),
-    },
-  };
-  setDataServices({
-    type: "init",
-    payload,
-  });
-}
-
-export function setDataColumns(
-  section,
-  dataService,
-  token,
-  setModalFromTable,
-  setDataServices,
-  setModal,
-  setShowValidationPanel,
-  setAttributeSelected,
-  setShowRejectModal,
-  setAttributesReviewed,
-  setMessage,
-  showValidationPanel,
-  attributeSelected,
-  attributesReviewed,
-  descriptionsReviewed,
-  imagesReviewed
-) {
-  const { data, rules } = dataService;
-  const columns = [...columnsBase];
-  const values = [];
-
-  const styleRetailer = {
-    borderRight: "1px solid #f0f0f0",
-    borderLeft: "1px solid #f0f0f0",
-  };
-  const styleSaveButtonCol = {
-    borderRight: "1px solid #f0f0f0",
-    //borderLeft: "1px solid #f0f0f0",
-  };
-
-  const styleApprovalAttributes = {
-    textAlign: "center",
-    display: "flex",
-    justifyContent: "center",
-    border: "1px solid #ECDD1D",
-    background: "#ECDD1D"
-  };
-  
-  const styleData = {
-    textAlign: "center",
-    display: "flex",
-    justifyContent: "center",
-  };
-
-  const retailersAdded = {
-    id: [],
-    attr: [],
-  };
-  data.forEach((item) => {
-    const currentData = {};
-    ["upc", "name", "accessor", "category", "status", "version"].forEach(
-      (key) => {
-        currentData[key] = <p className="content"> {item[key]} </p>;
-      }
-    );
-    if (item.status)
-      currentData["status"] = (
-        <StatusTag statusType={item.status} ovalForm={true} />
-      );
-    if (section === "images") {
-      const { images } = item;
-      item.retailer.forEach((ret) => {
-        if (!retailersAdded.id.includes(ret.id)) {
-          retailersAdded.id.push(ret.id);
-          columns.push({
-            Header: "Cadena",
-            accessor: `retailer${ret.id}`,
-            width: "100px"
-          });
-          columns.push({
-            Header: "",
-            accessor: `retailer${ret.id}-save`,
-            width: "60px",
-            style: styleSaveButtonCol,
-          });
-        }
-        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
-        ret.images.forEach((imgId) => {
-          if (!retailersAdded.attr.includes(`img${imgId}`)) {
-            retailersAdded.attr.push(`img${imgId}`);
-            columns.push({
-              Header: rules[imgId],
-              accessor: `img${imgId}`,
-              width: "170px",
-              style: styleData,
-            });
-          }
-        });
-        var saveAvailable=true;
-        /**var saveAvailable = imagesReviewed
-        .filter((e) => e.articleId === item.id)
-        .every((e) => e.isReviewed === true);
-      if (
-        imagesReviewed.filter((e) => e.articleId === item.id).length == 0
-      ) {
-        saveAvailable = false;
-      }**/
-        currentData[`retailer${ret.id}-save`] = (
-          <button
-            onClick={() => {
-              var articlesImagesUpdateBody = [];
-              var articleImages = imagesReviewed.filter(
-                (e) => e.articleId === item.id && e.versionId === item.version
-              );
-              articleImages.forEach((articleImage) => {
-                articlesImagesUpdateBody.push({
-                  articleId: articleImage.articleId,
-                  versionId: articleImage.versionId,
-                  attributeId: articleImage.imageId,
-                  value: articleImage.srcdb,
-                  isApproved: articleImage.isApproved,
-                  comment: articleImage.comment,
-                });
-              });
-              updateArticleData(
-                item.version,
-                item.id,
-                articlesImagesUpdateBody,
-                token,
-                setMessage,
-                section
-              );
-            }}
-            className="validation-option"
-            disabled={!saveAvailable}
-          >
-            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
-            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
-          </button>
-        );
-        
-        Object.values(images).forEach(({ value, isApproved, imageId, comment}) => {
-          const props = {
-            name: rules[imageId],
-            value: value,
-            setModalFromTable,
-            articleId: item.id,
-            setDataServices,
-            imageId,
-            setModal,
-            token,
-          };
-          if (
-            !imagesReviewed.find(
-              (e) =>
-                e.articleId == item.id &&
-                e.imageId == imageId &&
-                e.versionId == item.version
-            )
-          )
-            imagesReviewed.push({
-              articleId: item.id,
-              imageId: imageId,
-              versionId: item.version,
-              isApproved: isApproved? isApproved: false,
-              isReviewed: isApproved!=null? true: false,
-              comment: "",
-              srcdb: value? value.src: ""
-            });
-            var index = imagesReviewed.findIndex(
-              (e) =>
-                e.articleId === item.id &&
-                e.imageId=== imageId &&
-                e.versionId === item.version
-            );
-          currentData[`img${imageId}`] = 
-          <>
-            {/**<button
-                onClick={() => {
-                  setShowValidationPanel(true);
-                  setAttributeSelected({
-                    articleId: item.id,
-                    attributeId: imageId,
-                    versionId: item.version,
-                  });
-                }}
-                className="validation-button"
-              > 
-              {imagesReviewed[index].isReviewed &&
-                  imagesReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        imageId +
-                        "_" +
-                        item.version
-                      }
-                      src={acceptIcon}
-                      alt="accept button"
-                    />
-                  )}{" "}
-                {imagesReviewed[index].isReviewed &&
-                  !imagesReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        imageId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}{" "}
-                {
-                  !imagesReviewed[index].isReviewed && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        imageId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}
-              </button> */}
-          {showValidationPanel &&
-                attributeSelected.articleId === item.id &&
-                attributeSelected.attributeId === imageId &&
-                attributeSelected.versionId === item.version && (
-                  <div className="buttons-container" style={{left: "70px"}}>
-                    <button
-                      onClick={() => {
-                        imagesReviewed[index].isApproved = true;
-                        imagesReviewed[index].isReviewed = true;
-                        //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
-                        setShowValidationPanel(false);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={acceptIcon} alt="accept button" />
-                      <p> Validar </p>{" "}
-                    </button>{" "}
-                    <button
-                      onClick={() => {
-                        setShowValidationPanel(false);
-                        setShowRejectModal(true);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={rejectIcon} alt="reject button" />
-                      <p> Rechazar </p>{" "}
-                    </button>{" "}
-                  </div>
-                    )}{" "}
-          {comment && <div class="tooltip">
-            <ImageVisor {...props}/>
-            <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
-          </div>}
-          {!comment && <div>
-            <ImageVisor {...props} />
-          </div>} 
-        </>;
-        });
-      });
-    }
-    if (section === "datasheet") {
-      item.retailer.forEach((ret) => {
-        if (!retailersAdded.id.includes(ret.id)) {
-          retailersAdded.id.push(ret.id);
-          columns.push({
-            Header: "Cadena",
-            accessor: `retailer${ret.id}`,
-            width: "100px",
-          });
-          columns.push({
-            Header: "",
-            accessor: `retailer${ret.id}-save`,
-            width: "60px",
-            style: styleSaveButtonCol,
-          });
-        }
-        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
-        var saveAvailable = attributesReviewed
-          .filter((e) => e.articleId === item.id)
-          .every((e) => e.isReviewed === true);
-        if (
-          attributesReviewed.filter((e) => e.articleId === item.id).length == 0
-        ) {
-          saveAvailable = false;
-        }
-        currentData[`retailer${ret.id}-save`] = (
-          <button
-            onClick={() => {
-              var articlesAtributesUpdateBody = [];
-              var articleAttributes = attributesReviewed.filter(
-                (e) => e.articleId === item.id && e.versionId === item.version
-              );
-              var value;
-              articleAttributes.forEach((articleAttribute) => {
-                if(articleAttribute.attributeId==6700 || articleAttribute.attributeId==6701){
-                  value= document.getElementById(
-                    articleAttribute.articleId +
-                      "_" +
-                      articleAttribute.attributeId +
-                      "_" +
-                      articleAttribute.versionId
-                  ).checked;
-                }
-                else{
-                  value = document.getElementById(
-                    articleAttribute.articleId +
-                      "_" +
-                      articleAttribute.attributeId +
-                      "_" +
-                      articleAttribute.versionId
-                  ).value;
-                }
-                articlesAtributesUpdateBody.push({
-                  articleId: articleAttribute.articleId,
-                  versionId: articleAttribute.versionId,
-                  attributeId: articleAttribute.attributeId,
-                  value: value!=undefined ? value : "",
-                  isApproved: articleAttribute.isApproved,
-                  comment: articleAttribute.comment,
-                });
-              });
-              updateArticleData(
-                item.version,
-                item.id,
-                articlesAtributesUpdateBody,
-                token,
-                setMessage,
-                section
-              );
-            }}
-            className="validation-option"
-            disabled={!saveAvailable}
-          >
-            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
-            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
-          </button>
-        );
-        ret.attributes.forEach((attributeId) => {
-          if (!retailersAdded.attr.includes(`${attributeId + "-" + ret.id}`)) {
-            retailersAdded.attr.push(`${attributeId + "-" + ret.id}`);
-            columns.push({
-              Header: rules[attributeId].name,
-              accessor: `${attributeId + "-" + ret.id}`,
-              width: "200px",
-              style: (attributeId==6700 || attributeId==6701) ? styleApprovalAttributes : styleData,
-              description: rules[attributeId].description,
-            });
-          }
-        });
-
-        const handleChangeOptions = (attributeId, newValue) => {
-          const updatedAttributes = Object.values(item.attributes).map((attr) => {
-            if (attr.attributeId === attributeId) {
-              return { ...attr, value: newValue };
-            }
-            return attr;
-          });
-          const updatedAttributesObject = {};
-          updatedAttributes.forEach((attr) => {
-            updatedAttributesObject[attr.attributeId] = attr;
-          });
-          return updatedAttributesObject;
-        };
-
-
-        
-        const inputTypeValue = (type) => {
-          switch (type) {
-            case "Booleano":
-              return "checkbox";
-            case "Numérico":
-              return "number";
-            default:
-              return "text";
-          }
-        };
-        Object.values(item.attributes).forEach((des) => {
-          const props = {
-            inputId:
-              item.id +
-              "_" +
-              rules[des.attributeId].attributeId +
-              "_" +
-              item.version,
-            name:
-              item.id +
-              "-" +
-              rules[des.attributeId].attributeId +
-              "-" +
-              item.version,
-            value: des.value,
-            inputType:inputTypeValue(des.type),
-          };
-          let inputComponent;
-          if (des.option_list.length>0) {
-            inputComponent = (
-              <select
-                id={
-                  item.id +
-                  "_" +
-                  rules[des.attributeId].attributeId +
-                  "_" +
-                  item.version
-                }
-                name={
-                  item.id +
-                  "-" +
-                  rules[des.attributeId].attributeId +
-                  "-" +
-                  item.version
-                }
-                className="select-edition-multiple"
-                defaultValue={des.value}
-                onChange={(e) =>{
-                  handleChangeOptions(des.attributeId, e.target.value)}
-                }
-              >
-              <option value="" selected disabled>Selecciona una opción</option>
-                {des.option_list.map((option, index) => (
-                  <option key={index} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </select>
-            );
-            
-          } else {
-            inputComponent = <TagAndInput {...props} />;
-          }
-        
-          if (
-            !attributesReviewed.find(
-              (e) =>
-                e.articleId == item.id &&
-                e.attributeId == des.attributeId &&
-                e.versionId == item.version
-            )
-          )
-            attributesReviewed.push({
-              articleId: item.id,
-              attributeId: des.attributeId,
-              versionId: item.version,
-              isApproved: des.isApproved ? des.isApproved : false,
-              isReviewed: des.isApproved != null ? true : false,
-              comment: "",
-            });
-          var index = attributesReviewed.findIndex(
-            (e) =>
-              e.articleId === item.id &&
-              e.attributeId === des.attributeId &&
-              e.versionId === item.version
-          );
-          currentData[`${des.attributeId + "-" + ret.id}`] = (
-            <>
-              <button
-                onClick={() => {
-                  setShowValidationPanel(true);
-                  setAttributeSelected({
-                    articleId: item.id,
-                    attributeId: des.attributeId,
-                    versionId: item.version,
-                  });
-                }}
-                className="validation-button"
-              >
-                {attributesReviewed[index].isReviewed &&
-                  attributesReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={acceptIcon}
-                      alt="accept button"
-                    />
-                  )}
-                {attributesReviewed[index].isReviewed &&
-                  !attributesReviewed[index].isApproved && (
-                  <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
-                    <div>
-                      <img
-                        id={
-                          "button_" +
-                          item.id +
-                          "_" +
-                          des.attributeId +
-                          "_" +
-                          item.version
-                        }
-                        src={nullIcon}
-                        alt="null button"
-                      />
-                    </div>
-                  </Tooltip>
-                  )}
-                {typeof des.isApproved === "undefined" &&
-                  !attributesReviewed[index].isReviewed && (
-                    <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
-                    <div>
-                      <img
-                        id={
-                          "button_" +
-                          item.id +
-                          "_" +
-                          des.attributeId +
-                          "_" +
-                          item.version
-                        }
-                        src={nullIcon}
-                        alt="null button"
-                      />
-                    </div>
-                  </Tooltip>
-                   
-                  )}
-              </button>
-              {showValidationPanel &&
-                attributeSelected.articleId === item.id &&
-                attributeSelected.attributeId === des.attributeId &&
-                attributeSelected.versionId === item.version && (
-                  <div className="buttons-container" style={{left: "35px"}}>
-                    <button
-                      onClick={() => {
-                        attributesReviewed[index].isApproved = true;
-                        attributesReviewed[index].isReviewed = true;
-                        //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
-                        setShowValidationPanel(false);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={acceptIcon} alt="accept button" />
-                      <p> Validar </p>{" "}
-                    </button>{" "}
-                    <button
-                      onClick={() => {
-                        setShowValidationPanel(false);
-                        setShowRejectModal(true);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={rejectIcon} alt="reject button" />
-                      <p> Rechazar </p>{" "}
-                    </button>{" "}
-                  </div>
-                )}{" "}
-              {des.comment && <div class="tooltip">
-              {inputComponent}
-                <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
-              </div>}
-              {!des.comment && <div>
-                {inputComponent}
-               </div>}
-            </>
-          );
-        });
-      });
-    }
-    if (section === "description") {
-      item.retailer.forEach((ret) => {
-        if (!retailersAdded.id.includes(ret.id)) {
-          retailersAdded.id.push(ret.id);
-          columns.push({
-            Header: "Cadena",
-            accessor: `retailer${ret.id}`,
-            width: "100px"
-          });
-          columns.push({
-            Header: "",
-            accessor: `retailer${ret.id}-save`,
-            width: "60px",
-            style: styleSaveButtonCol,
-          });
-        }
-        var saveAvailable=true;
-        /**var saveAvailable = descriptionsReviewed
-        .filter((e) => e.articleId === item.id)
-        .every((e) => e.isReviewed === true);
-      if (
-        descriptionsReviewed.filter((e) => e.articleId === item.id).length == 0
-      ) {
-        saveAvailable = false;
-      }**/
-        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
-        ret.descriptions.forEach((descriptionId) => {
-          if (!retailersAdded.attr.includes(`${descriptionId}`)) {
-            retailersAdded.attr.push(`${descriptionId}`);
-            columns.push({
-              Header: rules[ret.id][descriptionId].name,
-              accessor: `${descriptionId}`,
-              width: "250px",
-              style: styleData,
-              description:rules[ret.id][descriptionId].description
-            });
-          }
-        });
-        
-        currentData[`retailer${ret.id}-save`] = (
-          <button
-            onClick={() => {
-              var articlesDescriptionsUpdateBody = [];
-              var articleDescriptions = descriptionsReviewed.filter(
-                (e) => e.articleId === item.id && e.versionId === item.version
-              );
-              articleDescriptions.forEach((articleDescription) => {
-                const value = document.getElementById(
-                    articleDescription.articleId +
-                    "_" +
-                    articleDescription.attributeId +
-                    "_" +
-                    articleDescription.versionId
-                ).value;
-                articlesDescriptionsUpdateBody.push({
-                  articleId: articleDescription.articleId,
-                  versionId: articleDescription.versionId,
-                  attributeId: articleDescription.attributeId,
-                  value: value ? value : "",
-                  isApproved: articleDescription.isApproved,
-                  comment: articleDescription.comment,
-                });
-              });
-              updateArticleData(
-                item.version,
-                item.id,
-                articlesDescriptionsUpdateBody,
-                token,
-                setMessage,
-                section
-              );
-            }}
-            className="validation-option"
-            disabled={!saveAvailable}
-          >
-            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
-            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
-          </button>
-        );
-        Object.values(item.descriptions).forEach((des) => {
-          const props = {
-            name: rules[des.attributeId],
-            id: item.id + "_" + des.attributeId + "_" + item.version,
-            cols: 30,
-            rows: 2,
-            defaultValue: des.value
-          };
-          if (
-            !descriptionsReviewed.find(
-              (e) =>
-                e.articleId == item.id &&
-                e.attributeId == des.attributeId &&
-                e.versionId == item.version
-            )
-          )
-            descriptionsReviewed.push({
-              articleId: item.id,
-              attributeId: des.attributeId,
-              versionId: item.version,
-              isApproved: des.isApproved ? des.isApproved : false,
-              isReviewed: des.isApproved != null ? true : false,
-              comment: "",
-            });
-          var index = descriptionsReviewed.findIndex(
-            (e) =>
-              e.articleId === item.id &&
-              e.attributeId === des.attributeId &&
-              e.versionId === item.version
-          );
-          currentData[`${des.attributeId}`] = (
-            <>
-            {/**<button
-                onClick={() => {
-                  setShowValidationPanel(true);
-                  setAttributeSelected({
-                    articleId: item.id,
-                    attributeId: des.attributeId,
-                    versionId: item.version,
-                  });
-                }}
-                className="validation-button"
-              >
-                {descriptionsReviewed[index].isReviewed &&
-                  descriptionsReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={acceptIcon}
-                      alt="accept button"
-                    />
-                  )}{" "}
-                {descriptionsReviewed[index].isReviewed &&
-                  !descriptionsReviewed[index].isApproved && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}{" "}
-                {typeof des.isApproved === "undefined" &&
-                  !descriptionsReviewed[index].isReviewed && (
-                    <img
-                      id={
-                        "button_" +
-                        item.id +
-                        "_" +
-                        des.attributeId +
-                        "_" +
-                        item.version
-                      }
-                      src={rejectIcon}
-                      alt="reject button"
-                    />
-                  )}
-              </button> */}
-              {showValidationPanel &&
-                attributeSelected.articleId === item.id &&
-                attributeSelected.attributeId === des.attributeId &&
-                attributeSelected.versionId === item.version && (
-                  <div className="buttons-container" style={{left: "35px"}}>
-                    <button
-                      onClick={() => {
-                        descriptionsReviewed[index].isApproved = true;
-                        descriptionsReviewed[index].isReviewed = true;
-                        setShowValidationPanel(false);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={acceptIcon} alt="accept button" />
-                      <p> Validar </p>
-                    </button>
-                    <button
-                      onClick={() => {
-                        setShowValidationPanel(false);
-                        setShowRejectModal(true);
-                      }}
-                      className="validation-option"
-                    >
-                      <img src={rejectIcon} alt="reject button" />
-                      <p> Rechazar </p>{" "}
-                    </button>{" "}
-                  </div>
-                    )}{" "}
-                {des.comment && <div class="tooltip">
-                  <textarea {...props}></textarea>
-                  <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
-                </div>}
-                {!des.comment && <div>
-                  <textarea {...props}></textarea>
-                </div>}
-            </>
-          );
-        });
-      });
-    }
-    values.push(currentData);
-  });
-  return [columns, values];
-}
-
-export function modalReducer(state, action) {
-  if (action.type === "close") {
-    return {
-      show: false,
-    };
-  }
-  const { setModal, setDataServices } = action?.functions;
-  const buttons = [
-    <ButtonV2
-      key="btn-Cancelar"
-      type="white"
-      label="Cancelar"
-      onClick={() =>
-        setModal({
-          type: "close",
-        })
-      }
-    />,
-  ];
-  if (action.type === "saved successfully") {
-    buttons[0] = (
-      <ButtonV2
-        key="btn-Aceptar"
-        type="pink"
-        label="Aceptar"
-        onClick={async () =>
-          setModal({
-            type: "close",
-          })
-        }
-      />
-    );
-    return {
-      show: true,
-      title: "Servicio guardado con éxito",
-      message: `El servicio de ${action.payload?.service} se ha guardado con éxito.`,
-      icon: "success",
-      buttons,
-    };
-  }
-  if (action.type === "delete") {
-    buttons.push(
-      <ButtonV2
-        key="btn-Aceptar"
-        type="pink"
-        label="Aceptar"
-        onClick={async () => {
-          setDataServices({
-            type: "deleteImage",
-            payload: action.payload,
-          });
-          setModal({
-            type: "close",
-          });
-        }}
-      />
-    );
-    return {
-      show: true,
-      title: "Eliminar imagen",
-      message: "¿Está seguro de eliminar la imagen seleccionada?",
-      icon: "warning",
-      buttons,
-    };
-  }
-  return state;
-}
-
-async function updateArticleData(
-  version,
-  articleId,
-  attributes,
-  token,
-  setMessage,
-  section
-) {
-  var body={} ;
-  var params=""
-  if(section!="images"){
-    body = {
-      articleId: articleId,
-      articleData: attributes,
-    };
-    params = `?${section}=true&version=${version}`;
-  }
-  else{
-    body = {
-      articleId: articleId,
-      onboardingImagesData: attributes,
-    };
-    params = `?image=true&version=${version}`;
-    
-  }
-  try {
-    const res = await axios.put(
-      `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}` + params,
-      body,
-      {
-        headers: {
-          Authorization: token,
-        },
-      }
-    );
-    if (res.data.statusCode === 200 && section=="description") {
-      setMessage("Descripciones de los productos guardados con éxito");
-    }
-    if (res.data.statusCode === 200 && section=="datasheet") {
-      setMessage("Atributos de los productos guardados con éxito");
-    }
-    if (res.data.statusCode === 200 && section=="images") {
-      setMessage("Imágenes de los productos guardados con éxito");
-    }
-  } catch (error) {
-    console.log(error);
-  }
-}
-
+import axios from "axios";
+import { ImageVisor } from "../../organisms/ImageVisor";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { deleteImage, saveData} from "./saveData";
+import { Container, Input, InputBase, TextField } from "@mui/material";
+import { ValidationPanel } from "../../atoms/ValidationPanel";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
+import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
+import infoIcon from "../../../assets/images/Icons/info.svg";
+import saveWhite from "../../../assets/images/Icons/save-white.svg";
+import saveWhiteGray from "../../../assets/images/Icons/save-white-gray.svg";
+import { DockSharp } from "@mui/icons-material";
+import React, { useState } from 'react';
+import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
+import { Tooltip } from "../../atoms/Tooltip";
+
+// variables
+export const optionsSelect = [
+  {
+    label: "item 1",
+    value: 1,
+  },
+  {
+    label: "item 2",
+    value: 2,
+  },
+  {
+    label: "item 3",
+    value: 3,
+  },
+  {
+    label: "item 4",
+    value: 4,
+  },
+];
+
+export const columnsBase = [
+  {
+    Header: "UPC",
+    accessor: "upc",
+    width: "100px",
+    fixedToLeft: 0,
+    style: {
+      textAlign: "left",
+    },
+  },
+  {
+    Header: "Nombre",
+    accessor: "name",
+    width: "100px",
+    fixedToLeft: 100,
+  },
+  {
+    Header: "Categoría",
+    accessor: "category",
+    width: "100px",
+    fixedToLeft: 200,
+  },
+  {
+    Header: "Est.",
+    accessor: "status",
+    width: "30px",
+    fixedToLeft: 300,
+  },
+  {
+    Header: "Ver.",
+    accessor: "version",
+    width: "30px",
+    fixedToLeft: 330,
+    style: {
+      borderRight: "1px solid #f0f0f0",
+    },
+  },
+];
+
+// data
+async function getData(service, articles, versions, token) {
+  const encodedArticles = encodeURIComponent(articles.join(","));
+  const encodedVersion = encodeURIComponent(versions.join(","));
+  const params = `?articles=${encodedArticles}&versions=${encodedVersion}`;
+  const res = await axios.get(
+    `${process.env.REACT_APP_BASE_MULTIPLE_EDITION_ENDPOINT}/${service}${params}`,
+    {
+      headers: {
+        Authorization: token,
+      },
+    }
+  );
+  return JSON.parse(res.data.body);
+}
+
+// functions
+export function dataReducer(state, action) {
+  if (action.type === "init") {
+    return action.payload;
+  }
+  if (action.type === "updateImage") {
+    const { articleId, imageId ,token } = action.payload;
+    const newImageData = state.images.data.slice();
+    const articleIndex = newImageData.findIndex((f) => f.id === articleId);
+    const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
+    newImageData[articleIndex].images[imageId].value = {
+      ...action.payload,
+      id,
+    };
+    const data = newImageData;
+    saveData({section:"images", data: {data}, token: token});
+    return {
+      ...state,
+      images: {
+        ...state.images,
+        data: newImageData,
+      },
+    };
+  }
+  if (action.type === "deleteImage") {
+    const { articleId, imageId, token } = action.payload;
+    const newImageData = state.images.data.slice();
+    const articleIndex = newImageData.findIndex((f) => f.id === articleId);
+    const id = newImageData[articleIndex]?.images[imageId]?.value?.id;
+    delete newImageData[articleIndex]?.images[imageId]?.value;
+    const data = {
+      articleId,
+      deleteImages: [
+        {
+          id,
+        },
+      ],
+    };
+    deleteImage(data, newImageData[articleIndex].version, token);
+    return {
+      ...state,
+      images: {
+        ...state.images,
+        data: newImageData,
+      },
+    };
+  }
+  return state;
+}
+
+export async function initData(setDataServices, articles, versions, token) {
+  const [description, datasheet, images] = await Promise.all([
+    getData("description", articles, versions, token),
+    getData("datasheet", articles, versions, token),
+    getData("images", articles, versions, token),
+  ]);
+  const { data: dataDescription, attributes: rulesDescription } = description;
+  const { data: dataDatasheet, attributes: rulesDatasheet } = datasheet;
+  const { data: dataImage, typesShot: rulesImage } = images;
+  const payload = {
+    description: {
+      data: Object.values(dataDescription),
+      rules: rulesDescription,
+    },
+    datasheet: {
+      data: Object.values(dataDatasheet),
+      rules: rulesDatasheet,
+    },
+    images: {
+      data: Object.values(dataImage),
+      rules: rulesImage.reduce(
+        (prev, curr) =>
+          (prev = {
+            ...prev,
+            [curr.id]: curr.name,
+          }),
+        {}
+      ),
+    },
+  };
+  setDataServices({
+    type: "init",
+    payload,
+  });
+}
+
+export function setDataColumns(
+  section,
+  dataService,
+  token,
+  setModalFromTable,
+  setDataServices,
+  setModal,
+  setShowValidationPanel,
+  setAttributeSelected,
+  setShowRejectModal,
+  setAttributesReviewed,
+  setMessage,
+  showValidationPanel,
+  attributeSelected,
+  attributesReviewed,
+  descriptionsReviewed,
+  imagesReviewed
+) {
+  const { data, rules } = dataService;
+  const columns = [...columnsBase];
+  const values = [];
+
+  const styleRetailer = {
+    borderRight: "1px solid #f0f0f0",
+    borderLeft: "1px solid #f0f0f0",
+  };
+  const styleSaveButtonCol = {
+    borderRight: "1px solid #f0f0f0",
+    //borderLeft: "1px solid #f0f0f0",
+  };
+
+  const styleApprovalAttributes = {
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+    border: "1px solid #ECDD1D",
+    background: "#ECDD1D"
+  };
+  
+  const styleData = {
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center",
+  };
+
+  const retailersAdded = {
+    id: [],
+    attr: [],
+  };
+  data.forEach((item) => {
+    const currentData = {};
+    ["upc", "name", "accessor", "category", "status", "version"].forEach(
+      (key) => {
+        currentData[key] = <p className="content"> {item[key]} </p>;
+      }
+    );
+    if (item.status)
+      currentData["status"] = (
+        <StatusTag statusType={item.status} ovalForm={true} />
+      );
+    if (section === "images") {
+      const { images } = item;
+      item.retailer.forEach((ret) => {
+        if (!retailersAdded.id.includes(ret.id)) {
+          retailersAdded.id.push(ret.id);
+          columns.push({
+            Header: "Cadena",
+            accessor: `retailer${ret.id}`,
+            width: "100px"
+          });
+          columns.push({
+            Header: "",
+            accessor: `retailer${ret.id}-save`,
+            width: "60px",
+            style: styleSaveButtonCol,
+          });
+        }
+        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
+        ret.images.forEach((imgId) => {
+          if (!retailersAdded.attr.includes(`img${imgId}`)) {
+            retailersAdded.attr.push(`img${imgId}`);
+            columns.push({
+              Header: rules[imgId],
+              accessor: `img${imgId}`,
+              width: "170px",
+              style: styleData,
+            });
+          }
+        });
+        var saveAvailable=true;
+        /**var saveAvailable = imagesReviewed
+        .filter((e) => e.articleId === item.id)
+        .every((e) => e.isReviewed === true);
+      if (
+        imagesReviewed.filter((e) => e.articleId === item.id).length == 0
+      ) {
+        saveAvailable = false;
+      }**/
+        currentData[`retailer${ret.id}-save`] = (
+          <button
+            onClick={() => {
+              var articlesImagesUpdateBody = [];
+              var articleImages = imagesReviewed.filter(
+                (e) => e.articleId === item.id && e.versionId === item.version
+              );
+              articleImages.forEach((articleImage) => {
+                articlesImagesUpdateBody.push({
+                  articleId: articleImage.articleId,
+                  versionId: articleImage.versionId,
+                  attributeId: articleImage.imageId,
+                  value: articleImage.srcdb,
+                  isApproved: articleImage.isApproved,
+                  comment: articleImage.comment,
+                });
+              });
+              updateArticleData(
+                item.version,
+                item.id,
+                articlesImagesUpdateBody,
+                token,
+                setMessage,
+                section
+              );
+            }}
+            className="validation-option"
+            disabled={!saveAvailable}
+          >
+            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
+            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
+          </button>
+        );
+        
+        Object.values(images).forEach(({ value, isApproved, imageId, comment}) => {
+          const props = {
+            name: rules[imageId],
+            value: value,
+            setModalFromTable,
+            articleId: item.id,
+            setDataServices,
+            imageId,
+            setModal,
+            token,
+          };
+          if (
+            !imagesReviewed.find(
+              (e) =>
+                e.articleId == item.id &&
+                e.imageId == imageId &&
+                e.versionId == item.version
+            )
+          )
+            imagesReviewed.push({
+              articleId: item.id,
+              imageId: imageId,
+              versionId: item.version,
+              isApproved: isApproved? isApproved: false,
+              isReviewed: isApproved!=null? true: false,
+              comment: "",
+              srcdb: value? value.src: ""
+            });
+            var index = imagesReviewed.findIndex(
+              (e) =>
+                e.articleId === item.id &&
+                e.imageId=== imageId &&
+                e.versionId === item.version
+            );
+          currentData[`img${imageId}`] = 
+          <>
+            {/**<button
+                onClick={() => {
+                  setShowValidationPanel(true);
+                  setAttributeSelected({
+                    articleId: item.id,
+                    attributeId: imageId,
+                    versionId: item.version,
+                  });
+                }}
+                className="validation-button"
+              > 
+              {imagesReviewed[index].isReviewed &&
+                  imagesReviewed[index].isApproved && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        imageId +
+                        "_" +
+                        item.version
+                      }
+                      src={acceptIcon}
+                      alt="accept button"
+                    />
+                  )}{" "}
+                {imagesReviewed[index].isReviewed &&
+                  !imagesReviewed[index].isApproved && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        imageId +
+                        "_" +
+                        item.version
+                      }
+                      src={rejectIcon}
+                      alt="reject button"
+                    />
+                  )}{" "}
+                {
+                  !imagesReviewed[index].isReviewed && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        imageId +
+                        "_" +
+                        item.version
+                      }
+                      src={rejectIcon}
+                      alt="reject button"
+                    />
+                  )}
+              </button> */}
+          {showValidationPanel &&
+                attributeSelected.articleId === item.id &&
+                attributeSelected.attributeId === imageId &&
+                attributeSelected.versionId === item.version && (
+                  <div className="buttons-container" style={{left: "70px"}}>
+                    <button
+                      onClick={() => {
+                        imagesReviewed[index].isApproved = true;
+                        imagesReviewed[index].isReviewed = true;
+                        //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
+                        setShowValidationPanel(false);
+                      }}
+                      className="validation-option"
+                    >
+                      <img src={acceptIcon} alt="accept button" />
+                      <p> Validar </p>{" "}
+                    </button>{" "}
+                    <button
+                      onClick={() => {
+                        setShowValidationPanel(false);
+                        setShowRejectModal(true);
+                      }}
+                      className="validation-option"
+                    >
+                      <img src={rejectIcon} alt="reject button" />
+                      <p> Rechazar </p>{" "}
+                    </button>{" "}
+                  </div>
+                    )}{" "}
+          {comment && <div class="tooltip">
+            <ImageVisor {...props}/>
+            <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
+          </div>}
+          {!comment && <div>
+            <ImageVisor {...props} />
+          </div>} 
+        </>;
+        });
+      });
+    }
+    if (section === "datasheet") {
+      item.retailer.forEach((ret) => {
+        if (!retailersAdded.id.includes(ret.id)) {
+          retailersAdded.id.push(ret.id);
+          columns.push({
+            Header: "Cadena",
+            accessor: `retailer${ret.id}`,
+            width: "100px",
+          });
+          columns.push({
+            Header: "",
+            accessor: `retailer${ret.id}-save`,
+            width: "60px",
+            style: styleSaveButtonCol,
+          });
+        }
+        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
+        var saveAvailable = attributesReviewed
+          .filter((e) => e.articleId === item.id)
+          .every((e) => e.isReviewed === true);
+        if (
+          attributesReviewed.filter((e) => e.articleId === item.id).length == 0
+        ) {
+          saveAvailable = false;
+        }
+        currentData[`retailer${ret.id}-save`] = (
+          <button
+            onClick={() => {
+              var articlesAtributesUpdateBody = [];
+              var articleAttributes = attributesReviewed.filter(
+                (e) => e.articleId === item.id && e.versionId === item.version
+              );
+              var value;
+              articleAttributes.forEach((articleAttribute) => {
+                if(articleAttribute.attributeId==6700 || articleAttribute.attributeId==6701){
+                  value= document.getElementById(
+                    articleAttribute.articleId +
+                      "_" +
+                      articleAttribute.attributeId +
+                      "_" +
+                      articleAttribute.versionId
+                  ).checked;
+                }
+                else{
+                  value = document.getElementById(
+                    articleAttribute.articleId +
+                      "_" +
+                      articleAttribute.attributeId +
+                      "_" +
+                      articleAttribute.versionId
+                  ).value;
+                }
+                articlesAtributesUpdateBody.push({
+                  articleId: articleAttribute.articleId,
+                  versionId: articleAttribute.versionId,
+                  attributeId: articleAttribute.attributeId,
+                  value: value!=undefined ? value : "",
+                  isApproved: articleAttribute.isApproved,
+                  comment: articleAttribute.comment,
+                });
+              });
+              updateArticleData(
+                item.version,
+                item.id,
+                articlesAtributesUpdateBody,
+                token,
+                setMessage,
+                section
+              );
+            }}
+            className="validation-option"
+            disabled={!saveAvailable}
+          >
+            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
+            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
+          </button>
+        );
+        ret.attributes.forEach((attributeId) => {
+          if (!retailersAdded.attr.includes(`${attributeId + "-" + ret.id}`)) {
+            retailersAdded.attr.push(`${attributeId + "-" + ret.id}`);
+            columns.push({
+              Header: rules[attributeId].name,
+              accessor: `${attributeId + "-" + ret.id}`,
+              width: "200px",
+              style: (attributeId==6700 || attributeId==6701) ? styleApprovalAttributes : styleData,
+              description: rules[attributeId].description,
+            });
+          }
+        });
+
+        const handleChangeOptions = (attributeId, newValue) => {
+          const updatedAttributes = Object.values(item.attributes).map((attr) => {
+            if (attr.attributeId === attributeId) {
+              return { ...attr, value: newValue };
+            }
+            return attr;
+          });
+          const updatedAttributesObject = {};
+          updatedAttributes.forEach((attr) => {
+            updatedAttributesObject[attr.attributeId] = attr;
+          });
+          return updatedAttributesObject;
+        };
+
+
+        
+        const inputTypeValue = (type) => {
+          switch (type) {
+            case "Booleano":
+              return "checkbox";
+            case "Numérico":
+              return "number";
+            default:
+              return "text";
+          }
+        };
+        Object.values(item.attributes).forEach((des) => {
+          const props = {
+            inputId:
+              item.id +
+              "_" +
+              rules[des.attributeId].attributeId +
+              "_" +
+              item.version,
+            name:
+              item.id +
+              "-" +
+              rules[des.attributeId].attributeId +
+              "-" +
+              item.version,
+            value: des.value,
+            inputType:inputTypeValue(des.type),
+          };
+          let inputComponent;
+          if (des.option_list.length>0) {
+            inputComponent = (
+              <select
+                id={
+                  item.id +
+                  "_" +
+                  rules[des.attributeId].attributeId +
+                  "_" +
+                  item.version
+                }
+                name={
+                  item.id +
+                  "-" +
+                  rules[des.attributeId].attributeId +
+                  "-" +
+                  item.version
+                }
+                className="select-edition-multiple"
+                defaultValue={des.value}
+                onChange={(e) =>{
+                  handleChangeOptions(des.attributeId, e.target.value)}
+                }
+              >
+              <option value="" selected disabled>Selecciona una opción</option>
+                {des.option_list.map((option, index) => (
+                  <option key={index} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            );
+            
+          } else {
+            inputComponent = <TagAndInput {...props} />;
+          }
+        
+          if (
+            !attributesReviewed.find(
+              (e) =>
+                e.articleId == item.id &&
+                e.attributeId == des.attributeId &&
+                e.versionId == item.version
+            )
+          )
+            attributesReviewed.push({
+              articleId: item.id,
+              attributeId: des.attributeId,
+              versionId: item.version,
+              isApproved: des.isApproved ? des.isApproved : false,
+              isReviewed: des.isApproved != null ? true : false,
+              comment: "",
+            });
+          var index = attributesReviewed.findIndex(
+            (e) =>
+              e.articleId === item.id &&
+              e.attributeId === des.attributeId &&
+              e.versionId === item.version
+          );
+          currentData[`${des.attributeId + "-" + ret.id}`] = (
+            <>
+              <button
+                onClick={() => {
+                  setShowValidationPanel(true);
+                  setAttributeSelected({
+                    articleId: item.id,
+                    attributeId: des.attributeId,
+                    versionId: item.version,
+                  });
+                }}
+                className="validation-button"
+              >
+                {attributesReviewed[index].isReviewed &&
+                  attributesReviewed[index].isApproved && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        des.attributeId +
+                        "_" +
+                        item.version
+                      }
+                      src={acceptIcon}
+                      alt="accept button"
+                    />
+                  )}
+                {attributesReviewed[index].isReviewed &&
+                  !attributesReviewed[index].isApproved && (
+                  <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
+                    <div>
+                      <img
+                        id={
+                          "button_" +
+                          item.id +
+                          "_" +
+                          des.attributeId +
+                          "_" +
+                          item.version
+                        }
+                        src={nullIcon}
+                        alt="null button"
+                      />
+                    </div>
+                  </Tooltip>
+                  )}
+                {typeof des.isApproved === "undefined" &&
+                  !attributesReviewed[index].isReviewed && (
+                    <Tooltip position="topCenter" componentTooltip={<span>Debes aprobar o rechazar para continuar</span>}>
+                    <div>
+                      <img
+                        id={
+                          "button_" +
+                          item.id +
+                          "_" +
+                          des.attributeId +
+                          "_" +
+                          item.version
+                        }
+                        src={nullIcon}
+                        alt="null button"
+                      />
+                    </div>
+                  </Tooltip>
+                   
+                  )}
+              </button>
+              {showValidationPanel &&
+                attributeSelected.articleId === item.id &&
+                attributeSelected.attributeId === des.attributeId &&
+                attributeSelected.versionId === item.version && (
+                  <div className="buttons-container" style={{left: "35px"}}>
+                    <button
+                      onClick={() => {
+                        attributesReviewed[index].isApproved = true;
+                        attributesReviewed[index].isReviewed = true;
+                        //document.getElementById(item.id+'_'+des.attributeId+'_'+item.version).style.borderColor="#71DE56";
+                        setShowValidationPanel(false);
+                      }}
+                      className="validation-option"
+                    >
+                      <img src={acceptIcon} alt="accept button" />
+                      <p> Validar </p>{" "}
+                    </button>{" "}
+                    <button
+                      onClick={() => {
+                        setShowValidationPanel(false);
+                        setShowRejectModal(true);
+                      }}
+                      className="validation-option"
+                    >
+                      <img src={rejectIcon} alt="reject button" />
+                      <p> Rechazar </p>{" "}
+                    </button>{" "}
+                  </div>
+                )}{" "}
+              {des.comment && <div class="tooltip">
+              {inputComponent}
+                <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
+              </div>}
+              {!des.comment && <div>
+                {inputComponent}
+               </div>}
+            </>
+          );
+        });
+      });
+    }
+    if (section === "description") {
+      item.retailer.forEach((ret) => {
+        if (!retailersAdded.id.includes(ret.id)) {
+          retailersAdded.id.push(ret.id);
+          columns.push({
+            Header: "Cadena",
+            accessor: `retailer${ret.id}`,
+            width: "100px"
+          });
+          columns.push({
+            Header: "",
+            accessor: `retailer${ret.id}-save`,
+            width: "60px",
+            style: styleSaveButtonCol,
+          });
+        }
+        var saveAvailable=true;
+        /**var saveAvailable = descriptionsReviewed
+        .filter((e) => e.articleId === item.id)
+        .every((e) => e.isReviewed === true);
+      if (
+        descriptionsReviewed.filter((e) => e.articleId === item.id).length == 0
+      ) {
+        saveAvailable = false;
+      }**/
+        currentData[`retailer${ret.id}`] = <p> {ret.name} </p>;
+        ret.descriptions.forEach((descriptionId) => {
+          if (!retailersAdded.attr.includes(`${descriptionId}`)) {
+            retailersAdded.attr.push(`${descriptionId}`);
+            columns.push({
+              Header: rules[ret.id][descriptionId].name,
+              accessor: `${descriptionId}`,
+              width: "250px",
+              style: styleData,
+              description:rules[ret.id][descriptionId].description
+            });
+          }
+        });
+        
+        currentData[`retailer${ret.id}-save`] = (
+          <button
+            onClick={() => {
+              var articlesDescriptionsUpdateBody = [];
+              var articleDescriptions = descriptionsReviewed.filter(
+                (e) => e.articleId === item.id && e.versionId === item.version
+              );
+              articleDescriptions.forEach((articleDescription) => {
+                const value = document.getElementById(
+                    articleDescription.articleId +
+                    "_" +
+                    articleDescription.attributeId +
+                    "_" +
+                    articleDescription.versionId
+                ).value;
+                articlesDescriptionsUpdateBody.push({
+                  articleId: articleDescription.articleId,
+                  versionId: articleDescription.versionId,
+                  attributeId: articleDescription.attributeId,
+                  value: value ? value : "",
+                  isApproved: articleDescription.isApproved,
+                  comment: articleDescription.comment,
+                });
+              });
+              updateArticleData(
+                item.version,
+                item.id,
+                articlesDescriptionsUpdateBody,
+                token,
+                setMessage,
+                section
+              );
+            }}
+            className="validation-option"
+            disabled={!saveAvailable}
+          >
+            {saveAvailable && <img src={saveWhite} alt="guardar" />}{" "}
+            {!saveAvailable && <img src={saveWhiteGray} alt="guardar" />}{" "}
+          </button>
+        );
+        Object.values(item.descriptions).forEach((des) => {
+          const props = {
+            name: rules[des.attributeId],
+            id: item.id + "_" + des.attributeId + "_" + item.version,
+            cols: 30,
+            rows: 2,
+            defaultValue: des.value
+          };
+          if (
+            !descriptionsReviewed.find(
+              (e) =>
+                e.articleId == item.id &&
+                e.attributeId == des.attributeId &&
+                e.versionId == item.version
+            )
+          )
+            descriptionsReviewed.push({
+              articleId: item.id,
+              attributeId: des.attributeId,
+              versionId: item.version,
+              isApproved: des.isApproved ? des.isApproved : false,
+              isReviewed: des.isApproved != null ? true : false,
+              comment: "",
+            });
+          var index = descriptionsReviewed.findIndex(
+            (e) =>
+              e.articleId === item.id &&
+              e.attributeId === des.attributeId &&
+              e.versionId === item.version
+          );
+          currentData[`${des.attributeId}`] = (
+            <>
+            {/**<button
+                onClick={() => {
+                  setShowValidationPanel(true);
+                  setAttributeSelected({
+                    articleId: item.id,
+                    attributeId: des.attributeId,
+                    versionId: item.version,
+                  });
+                }}
+                className="validation-button"
+              >
+                {descriptionsReviewed[index].isReviewed &&
+                  descriptionsReviewed[index].isApproved && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        des.attributeId +
+                        "_" +
+                        item.version
+                      }
+                      src={acceptIcon}
+                      alt="accept button"
+                    />
+                  )}{" "}
+                {descriptionsReviewed[index].isReviewed &&
+                  !descriptionsReviewed[index].isApproved && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        des.attributeId +
+                        "_" +
+                        item.version
+                      }
+                      src={rejectIcon}
+                      alt="reject button"
+                    />
+                  )}{" "}
+                {typeof des.isApproved === "undefined" &&
+                  !descriptionsReviewed[index].isReviewed && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        des.attributeId +
+                        "_" +
+                        item.version
+                      }
+                      src={rejectIcon}
+                      alt="reject button"
+                    />
+                  )}
+              </button> */}
+              {showValidationPanel &&
+                attributeSelected.articleId === item.id &&
+                attributeSelected.attributeId === des.attributeId &&
+                attributeSelected.versionId === item.version && (
+                  <div className="buttons-container" style={{left: "35px"}}>
+                    <button
+                      onClick={() => {
+                        descriptionsReviewed[index].isApproved = true;
+                        descriptionsReviewed[index].isReviewed = true;
+                        setShowValidationPanel(false);
+                      }}
+                      className="validation-option"
+                    >
+                      <img src={acceptIcon} alt="accept button" />
+                      <p> Validar </p>
+                    </button>
+                    <button
+                      onClick={() => {
+                        setShowValidationPanel(false);
+                        setShowRejectModal(true);
+                      }}
+                      className="validation-option"
+                    >
+                      <img src={rejectIcon} alt="reject button" />
+                      <p> Rechazar </p>{" "}
+                    </button>{" "}
+                  </div>
+                    )}{" "}
+                {des.comment && <div class="tooltip">
+                  <textarea {...props}></textarea>
+                  <span class="tooltiptext"><p><b>Comentarios del rechazo</b></p><p>{des.comment}</p></span>
+                </div>}
+                {!des.comment && <div>
+                  <textarea {...props}></textarea>
+                </div>}
+            </>
+          );
+        });
+      });
+    }
+    values.push(currentData);
+  });
+  return [columns, values];
+}
+
+export function modalReducer(state, action) {
+  if (action.type === "close") {
+    return {
+      show: false,
+    };
+  }
+  const { setModal, setDataServices } = action?.functions;
+  const buttons = [
+    <ButtonV2
+      key="btn-Cancelar"
+      type="white"
+      label="Cancelar"
+      onClick={() =>
+        setModal({
+          type: "close",
+        })
+      }
+    />,
+  ];
+  if (action.type === "saved successfully") {
+    buttons[0] = (
+      <ButtonV2
+        key="btn-Aceptar"
+        type="pink"
+        label="Aceptar"
+        onClick={async () =>
+          setModal({
+            type: "close",
+          })
+        }
+      />
+    );
+    return {
+      show: true,
+      title: "Servicio guardado con éxito",
+      message: `El servicio de ${action.payload?.service} se ha guardado con éxito.`,
+      icon: "success",
+      buttons,
+    };
+  }
+  if (action.type === "delete") {
+    buttons.push(
+      <ButtonV2
+        key="btn-Aceptar"
+        type="pink"
+        label="Aceptar"
+        onClick={async () => {
+          setDataServices({
+            type: "deleteImage",
+            payload: action.payload,
+          });
+          setModal({
+            type: "close",
+          });
+        }}
+      />
+    );
+    return {
+      show: true,
+      title: "Eliminar imagen",
+      message: "¿Está seguro de eliminar la imagen seleccionada?",
+      icon: "warning",
+      buttons,
+    };
+  }
+  return state;
+}
+
+async function updateArticleData(
+  version,
+  articleId,
+  attributes,
+  token,
+  setMessage,
+  section
+) {
+  var body={} ;
+  var params=""
+  if(section!="images"){
+    body = {
+      articleId: articleId,
+      articleData: attributes,
+    };
+    params = `?${section}=true&version=${version}`;
+  }
+  else{
+    body = {
+      articleId: articleId,
+      onboardingImagesData: attributes,
+    };
+    params = `?image=true&version=${version}`;
+    
+  }
+  try {
+    const res = await axios.put(
+      `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}` + params,
+      body,
+      {
+        headers: {
+          Authorization: token,
+        },
+      }
+    );
+    if (res.data.statusCode === 200 && section=="description") {
+      setMessage("Descripciones de los productos guardados con éxito");
+    }
+    if (res.data.statusCode === 200 && section=="datasheet") {
+      setMessage("Atributos de los productos guardados con éxito");
+    }
+    if (res.data.statusCode === 200 && section=="images") {
+      setMessage("Imágenes de los productos guardados con éxito");
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+