contentoh-components-library 21.4.134 → 21.4.136

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

@@ -0,0 +1,1035 @@
+import axios from "axios";
+import { ImageVisor } from "../../organisms/ImageVisor";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { deleteImage } 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';
+
+// 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 } = 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,
+    };
+    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;
+    console.log(newImageData[articleIndex]);
+    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 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 = 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
+              );
+              articleAttributes.forEach((articleAttribute) => {
+                const value = document.getElementById(
+                  articleAttribute.articleId +
+                    "_" +
+                    articleAttribute.attributeId +
+                    "_" +
+                    articleAttribute.versionId
+                ).value;
+                articlesAtributesUpdateBody.push({
+                  articleId: articleAttribute.articleId,
+                  versionId: articleAttribute.versionId,
+                  attributeId: articleAttribute.attributeId,
+                  value: value ? 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: styleData,
+              description:rules[attributeId].description,
+            });
+          }
+        });
+        
+        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"
+              >
+                {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 && (
+                    <img
+                      id={
+                        "button_" +
+                        item.id +
+                        "_" +
+                        des.attributeId +
+                        "_" +
+                        item.version
+                      }
+                      src={rejectIcon}
+                      alt="reject button"
+                    />
+                  )}{" "}
+                {typeof des.isApproved === "undefined" &&
+                  !attributesReviewed[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={() => {
+                        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 = 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);
+  }
+}
+
+/**
+             * Componentes para guardar y validación multiple
+             * <img
+                        src={saveWhite}
+                        alt="Guardar"
+                        onClick={() => {
+                          const params = {
+                            section, data: dataServices[section], token, callbackToInitData, setModal,
+                          };
+                          saveData(params);
+                        }}
+                      />
+
+                      <SelectV2
+                        items={optionsSelect}
+                        triggerType="click"
+                        selectButton={{
+                          type: "whiteS3",
+                          label: "Validación masiva",
+                          size: 12,
+                        }}
+                        typeSelectItems="labelOnly"
+                        borderType="oval"
+                        onChange={(selectedItems) => {
+                          console.log(selectedItems);
+                        }}
+                      />
+             */