contentoh-components-library 21.4.124 → 21.4.126

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

@@ -0,0 +1,993 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnsBase = void 0;
+exports.dataReducer = dataReducer;
+exports.initData = initData;
+exports.modalReducer = modalReducer;
+exports.optionsSelect = void 0;
+exports.setDataColumns = setDataColumns;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _ImageVisor = require("../../organisms/ImageVisor");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _saveData = require("./saveData");
+
+var _material = require("@mui/material");
+
+var _ValidationPanel = require("../../atoms/ValidationPanel");
+
+var _TagAndInput = require("../../molecules/TagAndInput");
+
+var _acceptIcon = _interopRequireDefault(require("../../../assets/images/generalButton/acceptIcon.svg"));
+
+var _rejectIcon = _interopRequireDefault(require("../../../assets/images/generalButton/rejectIcon.svg"));
+
+var _info = _interopRequireDefault(require("../../../assets/images/Icons/info.svg"));
+
+var _saveWhite = _interopRequireDefault(require("../../../assets/images/Icons/save-white.svg"));
+
+var _saveWhiteGray = _interopRequireDefault(require("../../../assets/images/Icons/save-white-gray.svg"));
+
+var _iconsMaterial = require("@mui/icons-material");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+// variables
+var optionsSelect = [{
+  label: "item 1",
+  value: 1
+}, {
+  label: "item 2",
+  value: 2
+}, {
+  label: "item 3",
+  value: 3
+}, {
+  label: "item 4",
+  value: 4
+}];
+exports.optionsSelect = optionsSelect;
+var 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
+
+exports.columnsBase = columnsBase;
+
+function getData(_x, _x2, _x3, _x4) {
+  return _getData.apply(this, arguments);
+} // functions
+
+
+function _getData() {
+  _getData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(service, articles, versions, token) {
+    var encodedArticles, encodedVersion, params, res;
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            encodedArticles = encodeURIComponent(articles.join(","));
+            encodedVersion = encodeURIComponent(versions.join(","));
+            params = "?articles=".concat(encodedArticles, "&versions=").concat(encodedVersion);
+            _context3.next = 5;
+            return _axios.default.get("".concat(process.env.REACT_APP_BASE_MULTIPLE_EDITION_ENDPOINT, "/").concat(service).concat(params), {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 5:
+            res = _context3.sent;
+            return _context3.abrupt("return", JSON.parse(res.data.body));
+
+          case 7:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+  return _getData.apply(this, arguments);
+}
+
+function dataReducer(state, action) {
+  if (action.type === "init") {
+    return action.payload;
+  }
+
+  if (action.type === "updateImage") {
+    var _newImageData$article, _newImageData$article2, _newImageData$article3;
+
+    var _action$payload = action.payload,
+        articleId = _action$payload.articleId,
+        imageId = _action$payload.imageId;
+    var newImageData = state.images.data.slice();
+    var articleIndex = newImageData.findIndex(function (f) {
+      return f.id === articleId;
+    });
+    var id = (_newImageData$article = newImageData[articleIndex]) === null || _newImageData$article === void 0 ? void 0 : (_newImageData$article2 = _newImageData$article.images[imageId]) === null || _newImageData$article2 === void 0 ? void 0 : (_newImageData$article3 = _newImageData$article2.value) === null || _newImageData$article3 === void 0 ? void 0 : _newImageData$article3.id;
+    newImageData[articleIndex].images[imageId].value = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, action.payload), {}, {
+      id: id
+    });
+    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+      images: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.images), {}, {
+        data: newImageData
+      })
+    });
+  }
+
+  if (action.type === "deleteImage") {
+    var _newImageData$_articl, _newImageData$_articl2, _newImageData$_articl3, _newImageData$_articl4, _newImageData$_articl5;
+
+    var _action$payload2 = action.payload,
+        _articleId = _action$payload2.articleId,
+        _imageId = _action$payload2.imageId,
+        token = _action$payload2.token;
+
+    var _newImageData = state.images.data.slice();
+
+    var _articleIndex = _newImageData.findIndex(function (f) {
+      return f.id === _articleId;
+    });
+
+    var _id = (_newImageData$_articl = _newImageData[_articleIndex]) === null || _newImageData$_articl === void 0 ? void 0 : (_newImageData$_articl2 = _newImageData$_articl.images[_imageId]) === null || _newImageData$_articl2 === void 0 ? void 0 : (_newImageData$_articl3 = _newImageData$_articl2.value) === null || _newImageData$_articl3 === void 0 ? void 0 : _newImageData$_articl3.id;
+
+    (_newImageData$_articl4 = _newImageData[_articleIndex]) === null || _newImageData$_articl4 === void 0 ? true : (_newImageData$_articl5 = _newImageData$_articl4.images[_imageId]) === null || _newImageData$_articl5 === void 0 ? true : delete _newImageData$_articl5.value;
+    console.log(_newImageData[_articleIndex]);
+    var data = {
+      articleId: _articleId,
+      deleteImages: [{
+        id: _id
+      }]
+    };
+    (0, _saveData.deleteImage)(data, _newImageData[_articleIndex].version, token);
+    return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
+      images: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.images), {}, {
+        data: _newImageData
+      })
+    });
+  }
+
+  return state;
+}
+
+function initData(_x5, _x6, _x7, _x8) {
+  return _initData.apply(this, arguments);
+}
+
+function _initData() {
+  _initData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(setDataServices, articles, versions, token) {
+    var _yield$Promise$all, _yield$Promise$all2, description, datasheet, images, dataDescription, rulesDescription, dataDatasheet, rulesDatasheet, dataImage, rulesImage, payload;
+
+    return _regenerator.default.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return Promise.all([getData("description", articles, versions, token), getData("datasheet", articles, versions, token), getData("images", articles, versions, token)]);
+
+          case 2:
+            _yield$Promise$all = _context4.sent;
+            _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 3);
+            description = _yield$Promise$all2[0];
+            datasheet = _yield$Promise$all2[1];
+            images = _yield$Promise$all2[2];
+            dataDescription = description.data, rulesDescription = description.attributes;
+            dataDatasheet = datasheet.data, rulesDatasheet = datasheet.attributes;
+            dataImage = images.data, rulesImage = images.typesShot;
+            payload = {
+              description: {
+                data: Object.values(dataDescription),
+                rules: rulesDescription
+              },
+              datasheet: {
+                data: Object.values(dataDatasheet),
+                rules: rulesDatasheet
+              },
+              images: {
+                data: Object.values(dataImage),
+                rules: rulesImage.reduce(function (prev, curr) {
+                  return prev = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, (0, _defineProperty2.default)({}, curr.id, curr.name));
+                }, {})
+              }
+            };
+            setDataServices({
+              type: "init",
+              payload: payload
+            });
+
+          case 12:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  }));
+  return _initData.apply(this, arguments);
+}
+
+function setDataColumns(section, dataService, token, setModalFromTable, setDataServices, setModal, setShowValidationPanel, setAttributeSelected, setShowRejectModal, setAttributesReviewed, setMessage, showValidationPanel, attributeSelected, attributesReviewed, descriptionsReviewed, imagesReviewed) {
+  var data = dataService.data,
+      rules = dataService.rules;
+  var columns = [].concat(columnsBase);
+  var values = [];
+  var styleRetailer = {
+    borderRight: "1px solid #f0f0f0",
+    borderLeft: "1px solid #f0f0f0"
+  };
+  var styleSaveButtonCol = {
+    borderRight: "1px solid #f0f0f0" //borderLeft: "1px solid #f0f0f0",
+
+  };
+  var styleData = {
+    textAlign: "center",
+    display: "flex",
+    justifyContent: "center"
+  };
+  var retailersAdded = {
+    id: [],
+    attr: []
+  };
+  data.forEach(function (item) {
+    var currentData = {};
+    ["upc", "name", "accessor", "category", "status", "version"].forEach(function (key) {
+      currentData[key] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        className: "content",
+        children: [" ", item[key], " "]
+      });
+    });
+    if (item.status) currentData["status"] = /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusTag, {
+      statusType: item.status,
+      ovalForm: true
+    });
+
+    if (section === "images") {
+      var images = item.images;
+      item.retailer.forEach(function (ret) {
+        if (!retailersAdded.id.includes(ret.id)) {
+          retailersAdded.id.push(ret.id);
+          columns.push({
+            Header: "Cadena",
+            accessor: "retailer".concat(ret.id),
+            width: "100px"
+          });
+          columns.push({
+            Header: "",
+            accessor: "retailer".concat(ret.id, "-save"),
+            width: "60px",
+            style: styleSaveButtonCol
+          });
+        }
+
+        currentData["retailer".concat(ret.id)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: [" ", ret.name, " "]
+        });
+        ret.images.forEach(function (imgId) {
+          if (!retailersAdded.attr.includes("img".concat(imgId))) {
+            retailersAdded.attr.push("img".concat(imgId));
+            columns.push({
+              Header: rules[imgId],
+              accessor: "img".concat(imgId),
+              width: "170px",
+              style: styleData
+            });
+          }
+        });
+        var saveAvailable = imagesReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).every(function (e) {
+          return e.isReviewed === true;
+        });
+
+        if (imagesReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).length == 0) {
+          saveAvailable = false;
+        }
+
+        currentData["retailer".concat(ret.id, "-save")] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          onClick: function onClick() {
+            var articlesImagesUpdateBody = [];
+            var articleImages = imagesReviewed.filter(function (e) {
+              return e.articleId === item.id && e.versionId === item.version;
+            });
+            articleImages.forEach(function (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,
+          children: [saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhite.default,
+            alt: "guardar"
+          }), " ", !saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhiteGray.default,
+            alt: "guardar"
+          }), " "]
+        });
+        Object.values(images).forEach(function (_ref) {
+          var value = _ref.value,
+              isApproved = _ref.isApproved,
+              imageId = _ref.imageId,
+              comment = _ref.comment;
+          var props = {
+            name: rules[imageId],
+            value: value,
+            setModalFromTable: setModalFromTable,
+            articleId: item.id,
+            setDataServices: setDataServices,
+            imageId: imageId,
+            setModal: setModal,
+            token: token
+          };
+          if (!imagesReviewed.find(function (e) {
+            return 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(function (e) {
+            return e.articleId === item.id && e.imageId === imageId && e.versionId === item.version;
+          });
+          currentData["img".concat(imageId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              onClick: function onClick() {
+                setShowValidationPanel(true);
+                setAttributeSelected({
+                  articleId: item.id,
+                  attributeId: imageId,
+                  versionId: item.version
+                });
+              },
+              className: "validation-button",
+              children: [imagesReviewed[index].isReviewed && imagesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + imageId + "_" + item.version,
+                src: _acceptIcon.default,
+                alt: "accept button"
+              }), " ", imagesReviewed[index].isReviewed && !imagesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + imageId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              }), " ", !imagesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + imageId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              })]
+            }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === imageId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "buttons-container",
+              style: {
+                left: "70px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function 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",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _acceptIcon.default,
+                  alt: "accept button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Validar "
+                }), " "]
+              }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  setShowValidationPanel(false);
+                  setShowRejectModal(true);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _rejectIcon.default,
+                  alt: "reject button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Rechazar "
+                }), " "]
+              }), " "]
+            }), " ", comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              class: "tooltip",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageVisor.ImageVisor, (0, _objectSpread3.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                class: "tooltiptext",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+                    children: "Comentarios del rechazo"
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: des.comment
+                })]
+              })]
+            }), !comment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageVisor.ImageVisor, (0, _objectSpread3.default)({}, props))
+            })]
+          });
+        });
+      });
+    }
+
+    if (section === "datasheet") {
+      item.retailer.forEach(function (ret) {
+        if (!retailersAdded.id.includes(ret.id)) {
+          retailersAdded.id.push(ret.id);
+          columns.push({
+            Header: "Cadena",
+            accessor: "retailer".concat(ret.id),
+            width: "100px"
+          });
+          columns.push({
+            Header: "",
+            accessor: "retailer".concat(ret.id, "-save"),
+            width: "60px",
+            style: styleSaveButtonCol
+          });
+        }
+
+        currentData["retailer".concat(ret.id)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: [" ", ret.name, " "]
+        });
+        var saveAvailable = attributesReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).every(function (e) {
+          return e.isReviewed === true;
+        });
+
+        if (attributesReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).length == 0) {
+          saveAvailable = false;
+        }
+
+        currentData["retailer".concat(ret.id, "-save")] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          onClick: function onClick() {
+            var articlesAtributesUpdateBody = [];
+            var articleAttributes = attributesReviewed.filter(function (e) {
+              return e.articleId === item.id && e.versionId === item.version;
+            });
+            articleAttributes.forEach(function (articleAttribute) {
+              var 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,
+          children: [saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhite.default,
+            alt: "guardar"
+          }), " ", !saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhiteGray.default,
+            alt: "guardar"
+          }), " "]
+        });
+        ret.attributes.forEach(function (attributeId) {
+          if (!retailersAdded.attr.includes("".concat(attributeId + "-" + ret.id))) {
+            retailersAdded.attr.push("".concat(attributeId + "-" + ret.id));
+            columns.push({
+              Header: rules[attributeId].name,
+              accessor: "".concat(attributeId + "-" + ret.id),
+              width: "200px",
+              style: styleData
+            });
+          }
+        });
+        Object.values(item.attributes).forEach(function (des) {
+          var props = {
+            inputId: item.id + "_" + rules[des.attributeId].attributeId + "_" + item.version,
+            name: item.id + "-" + rules[des.attributeId].attributeId + "-" + item.version,
+            value: des.value
+          };
+          if (!attributesReviewed.find(function (e) {
+            return 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(function (e) {
+            return e.articleId === item.id && e.attributeId === des.attributeId && e.versionId === item.version;
+          });
+          currentData["".concat(des.attributeId + "-" + ret.id)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              onClick: function onClick() {
+                setShowValidationPanel(true);
+                setAttributeSelected({
+                  articleId: item.id,
+                  attributeId: des.attributeId,
+                  versionId: item.version
+                });
+              },
+              className: "validation-button",
+              children: [attributesReviewed[index].isReviewed && attributesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _acceptIcon.default,
+                alt: "accept button"
+              }), " ", attributesReviewed[index].isReviewed && !attributesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              }), " ", typeof des.isApproved === "undefined" && !attributesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              })]
+            }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "buttons-container",
+              style: {
+                left: "35px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function 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",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _acceptIcon.default,
+                  alt: "accept button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Validar "
+                }), " "]
+              }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  setShowValidationPanel(false);
+                  setShowRejectModal(true);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _rejectIcon.default,
+                  alt: "reject button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Rechazar "
+                }), " "]
+              }), " "]
+            }), " ", des.comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              class: "tooltip",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                class: "tooltiptext",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+                    children: "Comentarios del rechazo"
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: des.comment
+                })]
+              })]
+            }), !des.comment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props))
+            })]
+          });
+        });
+      });
+    }
+
+    if (section === "description") {
+      item.retailer.forEach(function (ret) {
+        if (!retailersAdded.id.includes(ret.id)) {
+          retailersAdded.id.push(ret.id);
+          columns.push({
+            Header: "Cadena",
+            accessor: "retailer".concat(ret.id),
+            width: "100px"
+          });
+          columns.push({
+            Header: "",
+            accessor: "retailer".concat(ret.id, "-save"),
+            width: "60px",
+            style: styleSaveButtonCol
+          });
+        }
+
+        var saveAvailable = descriptionsReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).every(function (e) {
+          return e.isReviewed === true;
+        });
+
+        if (descriptionsReviewed.filter(function (e) {
+          return e.articleId === item.id;
+        }).length == 0) {
+          saveAvailable = false;
+        }
+
+        currentData["retailer".concat(ret.id)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: [" ", ret.name, " "]
+        });
+        ret.descriptions.forEach(function (descriptionId) {
+          if (!retailersAdded.attr.includes("".concat(descriptionId))) {
+            retailersAdded.attr.push("".concat(descriptionId));
+            columns.push({
+              Header: rules[ret.id][descriptionId].name,
+              accessor: "".concat(descriptionId),
+              width: "250px",
+              style: styleData
+            });
+          }
+        });
+        currentData["retailer".concat(ret.id, "-save")] = /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+          onClick: function onClick() {
+            var articlesDescriptionsUpdateBody = [];
+            var articleDescriptions = descriptionsReviewed.filter(function (e) {
+              return e.articleId === item.id && e.versionId === item.version;
+            });
+            articleDescriptions.forEach(function (articleDescription) {
+              var 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,
+          children: [saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhite.default,
+            alt: "guardar"
+          }), " ", !saveAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: _saveWhiteGray.default,
+            alt: "guardar"
+          }), " "]
+        });
+        Object.values(item.descriptions).forEach(function (des) {
+          var props = {
+            name: rules[des.attributeId],
+            id: item.id + "_" + des.attributeId + "_" + item.version,
+            cols: 30,
+            rows: 2,
+            defaultValue: des.value
+          };
+          if (!descriptionsReviewed.find(function (e) {
+            return 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(function (e) {
+            return e.articleId === item.id && e.attributeId === des.attributeId && e.versionId === item.version;
+          });
+          currentData["".concat(des.attributeId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              onClick: function onClick() {
+                setShowValidationPanel(true);
+                setAttributeSelected({
+                  articleId: item.id,
+                  attributeId: des.attributeId,
+                  versionId: item.version
+                });
+              },
+              className: "validation-button",
+              children: [descriptionsReviewed[index].isReviewed && descriptionsReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _acceptIcon.default,
+                alt: "accept button"
+              }), " ", descriptionsReviewed[index].isReviewed && !descriptionsReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              }), " ", typeof des.isApproved === "undefined" && !descriptionsReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
+                src: _rejectIcon.default,
+                alt: "reject button"
+              })]
+            }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "buttons-container",
+              style: {
+                left: "35px"
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  descriptionsReviewed[index].isApproved = true;
+                  descriptionsReviewed[index].isReviewed = true;
+                  setShowValidationPanel(false);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _acceptIcon.default,
+                  alt: "accept button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Validar "
+                }), " "]
+              }), " ", /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                onClick: function onClick() {
+                  setShowValidationPanel(false);
+                  setShowRejectModal(true);
+                },
+                className: "validation-option",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                  src: _rejectIcon.default,
+                  alt: "reject button"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: " Rechazar "
+                }), " "]
+              }), " "]
+            }), " ", des.comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              class: "tooltip",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread3.default)({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                class: "tooltiptext",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+                    children: "Comentarios del rechazo"
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: des.comment
+                })]
+              })]
+            }), !des.comment && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", (0, _objectSpread3.default)({}, props))
+            })]
+          });
+        });
+      });
+    }
+
+    values.push(currentData);
+  });
+  return [columns, values];
+}
+
+function modalReducer(state, action) {
+  if (action.type === "close") {
+    return {
+      show: false
+    };
+  }
+
+  var _action$functions = action === null || action === void 0 ? void 0 : action.functions,
+      setModal = _action$functions.setModal,
+      setDataServices = _action$functions.setDataServices;
+
+  var buttons = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+    type: "white",
+    label: "Cancelar",
+    onClick: function onClick() {
+      return setModal({
+        type: "close"
+      });
+    }
+  }, "btn-Cancelar")];
+
+  if (action.type === "saved successfully") {
+    var _action$payload3;
+
+    buttons[0] = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+      type: "pink",
+      label: "Aceptar",
+      onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", setModal({
+                  type: "close"
+                }));
+
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }))
+    }, "btn-Aceptar");
+    return {
+      show: true,
+      title: "Servicio guardado con éxito",
+      message: "El servicio de ".concat((_action$payload3 = action.payload) === null || _action$payload3 === void 0 ? void 0 : _action$payload3.service, " se ha guardado con \xE9xito."),
+      icon: "success",
+      buttons: buttons
+    };
+  }
+
+  if (action.type === "delete") {
+    buttons.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+      type: "pink",
+      label: "Aceptar",
+      onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                setDataServices({
+                  type: "deleteImage",
+                  payload: action.payload
+                });
+                setModal({
+                  type: "close"
+                });
+
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }))
+    }, "btn-Aceptar"));
+    return {
+      show: true,
+      title: "Eliminar imagen",
+      message: "¿Está seguro de eliminar la imagen seleccionada?",
+      icon: "warning",
+      buttons: buttons
+    };
+  }
+
+  return state;
+}
+
+function updateArticleData(_x9, _x10, _x11, _x12, _x13, _x14) {
+  return _updateArticleData.apply(this, arguments);
+}
+/**
+             * 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);
+                        }}
+                      />
+             */
+
+
+function _updateArticleData() {
+  _updateArticleData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(version, articleId, attributes, token, setMessage, section) {
+    var body, params, res;
+    return _regenerator.default.wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            body = {};
+            params = "";
+
+            if (section != "images") {
+              body = {
+                articleId: articleId,
+                articleData: attributes
+              };
+              params = "?".concat(section, "=true&version=").concat(version);
+            } else {
+              body = {
+                articleId: articleId,
+                onboardingImagesData: attributes
+              };
+              params = "?image=true&version=".concat(version);
+            }
+
+            _context5.prev = 3;
+            _context5.next = 6;
+            return _axios.default.put("".concat(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT) + params, body, {
+              headers: {
+                Authorization: token
+              }
+            });
+
+          case 6:
+            res = _context5.sent;
+
+            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");
+            }
+
+            _context5.next = 15;
+            break;
+
+          case 12:
+            _context5.prev = 12;
+            _context5.t0 = _context5["catch"](3);
+            console.log(_context5.t0);
+
+          case 15:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5, null, [[3, 12]]);
+  }));
+  return _updateArticleData.apply(this, arguments);
+}