contentoh-components-library 21.5.1 → 21.5.3

package/dist/components/organisms/Table/styles.js

@@ -15,7 +15,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: #fff;\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: auto;\n  width: 100%;\n  margin-right: 30px;\n  .checkbox_fixed {\n    left: 0px;\n    position: sticky;\n    z-index: 5;\n  }\n\n  .custom-table {\n    border-collapse: collapse;\n    box-sizing: border-box;\n    width: 100%;\n    & > thead {\n      top: 0;\n      height: 45px;\n      position: sticky;\n      z-index: 2;\n      & > tr {\n        background-color: #f7f7fc;\n        border-radius: 5px 5px 0px 0px;\n        height: 45px;\n      }\n    }\n    & > tbody > tr {\n      height: 70px;\n      &:last-child {\n        border-radius: 0px 0px 5px 5px;\n      }\n    }\n  }\n\n  .custom-table th,\n  .custom-table td {\n    padding: 8px;\n    border: 0;\n  }\n\n  .custom-table th {\n    border-radius: 5px 0 0 5px;\n    border: 0;\n    color: var(--black-main, #262626);\n    font-family: Roboto;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: normal;\n    text-align: left;\n  }\n\n  .custom-table tr {\n    background: var(--white-main, #fff);\n    border-bottom: 1px solid var(--grey-light, #f0f0f0);\n    border-left: 1px solid var(--grey-light, #f0f0f0);\n    border-right: 1px solid var(--grey-light, #f0f0f0);\n    & > td {\n      color: var(--grey-main, #707070);\n      font-family: Roboto;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: normal;\n      gap:5px;\n    }\n    display: flex;\n    align-items: center;\n    ", "\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: #fff;\n  box-sizing: border-box;\n  height: 100%;\n  overflow-x: auto;\n  width: 100%;\n  margin-right: 30px;\n  .checkbox_fixed {\n    left: 0px;\n    position: sticky;\n    z-index: 5;\n  }\n\n  .custom-table {\n    border-collapse: collapse;\n    box-sizing: border-box;\n    width: 100%;\n    & > thead {\n      top: 0;\n      height: 45px;\n      position: sticky;\n      z-index: 10;\n      & > tr {\n        background-color: #f7f7fc;\n        border-radius: 5px 5px 0px 0px;\n        height: 45px;\n      }\n    }\n    & > tbody > tr {\n      height: 70px;\n      &:last-child {\n        border-radius: 0px 0px 5px 5px;\n      }\n    }\n  }\n\n  .custom-table th,\n  .custom-table td {\n    padding: 8px;\n    border: 0;\n  }\n\n  .custom-table th {\n    border-radius: 5px 0 0 5px;\n    border: 0;\n    color: var(--black-main, #262626);\n    font-family: Roboto;\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: normal;\n    text-align: left;\n  }\n\n  .custom-table tr {\n    background: var(--white-main, #fff);\n    border-bottom: 1px solid var(--grey-light, #f0f0f0);\n    border-left: 1px solid var(--grey-light, #f0f0f0);\n    border-right: 1px solid var(--grey-light, #f0f0f0);\n    & > td {\n      color: var(--grey-main, #707070);\n      font-family: Roboto;\n      font-size: 12px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: normal;\n      gap:5px;\n    }\n    display: flex;\n    align-items: center;\n    ", "\n  }\n"])), function (_ref) {
   var withCheckbox = _ref.withCheckbox;
   return withCheckbox && "padding-left: 10px;";
 });

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

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = saveData;
 exports.deleteImage = deleteImage;
-exports.saveData = saveData;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -43,15 +43,15 @@ function saveData(_x) {
 
 function _saveData() {
   _saveData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(params) {
-    var section, data, token;
+    var section, data, token, callbackToInitData, setModal;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            section = params.section, data = params.data, token = params.token;
+            section = params.section, data = params.data, token = params.token, callbackToInitData = params.callbackToInitData, setModal = params.setModal;
 
             if (!(section === "images")) {
-              _context.next = 5;
+              _context.next = 7;
               break;
             }
 
@@ -60,14 +60,25 @@ function _saveData() {
 
           case 4:
             if (!_context.sent) {
-              _context.next = 5;
+              _context.next = 7;
               break;
             }
 
-          case 5:
-            return _context.abrupt("return", true);
+            callbackToInitData();
+            setModal({
+              type: "saved successfully",
+              functions: {
+                setModal: setModal
+              },
+              payload: {
+                service: "imágenes"
+              }
+            }); // aquí va modal de que todo salío bien y actualiza la data
 
-          case 6:
+          case 7:
+            return _context.abrupt("return", false);
+
+          case 8:
           case "end":
             return _context.stop();
         }
@@ -92,7 +103,6 @@ function _saveImagesData() {
             articles.data.forEach(function (article) {
               var images = article.images,
                   version = article.version;
-              console.log(images);
               var imagesToAdd = Object.values(images).filter(function (f) {
                 return f.value && !f.value.src.startsWith("id-");
               });

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

@@ -15,7 +15,7 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n  body{\n    font-family: Roboto;\n  }\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    display: flex;\n    flex-direction: column;\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: 0;\n    left: 50px;\n    z-index: 100;\n  }\n\n  .validation-button{\n    width: 30px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n    margin-right:5px;\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n  }\n\n  .validation-option {\n    display: flex;\n    width: 82px;\n    height: 20px;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n    left: 7px;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n    background: #ffffff !important;\n  }\n\n  th{\n    border-radius: 0 0 0 0 !important;\n    padding: 15px !important;\n  }\n  \n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 5px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  .general-input {\n    width: 100%;\n    height:27px;\n    max-height:100px;\n  }\n\n  .select-edition-multiple {\n    padding: 5px 10px;\n    border-radius: 5px;\n    gap: 10px;\n    border:1px solid ", ";\n    border-width: 1px 2px 1px 1px;\n    outline: none;\n    border-image: initial;\n    width: 100%;\n    min-height:27px;\n    cursor: pointer;\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    overflow:hidden; \n    white-space:nowrap; \n    text-overflow:ellipsis;\n    :focus{\n      border:1px solid ", ";\n    }\n  }\n\n  .tooltip {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .tooltiptext {\n    visibility: hidden;\n    width: 200px;\n    background-color: #ffffff;\n    color: #000000;\n    text-align: center;\n    border-radius: 6px;\n    position: absolute;\n    z-index: 6 important!;\n    bottom: 100%;\n    left: 20%;\n    margin-left: -80px;\n    opacity: 0;\n    transition: opacity 0.3s;\n    box-shadow: 0px 2px 4px 0px #00000040;\n    font-family: Roboto;\n    font-size: 12px;\n    padding: 10px;\n    text-align: justify;\n  }\n  \n\n  \n  .tooltip:hover .tooltiptext {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), _variables.GlobalColors.s3, function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 75% 25%;\n  grid-template-rows: 75px 1fr;\n  grid-template-areas:\n    \"tabs action_buttons\"\n    \"table table\";\n  margin: 0 30px;\n  body{\n    font-family: Roboto;\n  }\n\n  .tabs {\n    grid-area: tabs;\n    display: flex;\n    align-items: center;\n    gap: 0 10px;\n  }\n  .action_buttons {\n    grid-area: action_buttons;\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0 10px;\n    & > * {\n      cursor: pointer;\n    }\n  }\n  .table {\n    grid-area: table;\n    background: red;\n    height: 100%;\n    font-family: Raleway;\n  }\n  \n  .buttons-container{\n    display: flex;\n    flex-direction: column;\n    background: white;\n    width: max-content;\n    padding: 8px;\n    border: 1px solid ", ";\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);\n    border-radius: 3px;\n    position: absolute;\n    top: 0;\n    left: 50px;\n    z-index: 100;\n  }\n\n  .validation-button{\n    width: 30px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n  }\n\n  .validation-option {\n    display: flex;\n    width: 82px;\n    height: 20px;\n    align-items: center;\n    border: none;\n    cursor: pointer;\n    color: black;\n    font-weight: 400;\n    font-size: 13px;\n    line-height: 18px;\n    background-color: white;\n    left: 7px;\n\n    img {\n      & + p {\n        margin-left: 7px;\n      }\n    }\n\n    &:hover {\n      border-radius: 10px;\n    }\n\n    & + * {\n      margin-top: 8px;\n    }\n  }\n\n  td{\n    margin:0;\n  }\n  \n  textarea {\n    width: 100%;\n    border: 1px solid\n      ", ";\n\n    font-family: ", ";\n    color: ", ";\n    font-weight: normal;\n    font-size: 12px;\n    line-height: 15px;\n    padding: 10px;\n    outline: none;\n    border-radius: 5px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  .general-input {\n    width: 100%;\n    height:27px;\n    max-height:100px;\n  }\n\n  .select-edition-multiple {\n    padding: 5px 10px;\n    border-radius: 5px;\n    gap: 10px;\n    border:1px solid ", ";\n    border-width: 1px 2px 1px 1px;\n    outline: none;\n    border-image: initial;\n    width: 100%;\n    min-height:27px;\n    cursor: pointer;\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    overflow:hidden; \n    white-space:nowrap; \n    text-overflow:ellipsis;\n    :focus{\n      border:1px solid ", ";\n    }\n  }\n\n  .tooltip {\n    position: relative;\n    display: inline-block;\n  }\n  \n  .tooltiptext {\n    visibility: hidden;\n    width: 200px;\n    background-color: #ffffff;\n    color: #000000;\n    text-align: center;\n    border-radius: 6px;\n    position: absolute;\n    z-index: 6 important!;\n    bottom: 100%;\n    left: 20%;\n    margin-left: -80px;\n    opacity: 0;\n    transition: opacity 0.3s;\n    box-shadow: 0px 2px 4px 0px #00000040;\n    font-family: Roboto;\n    font-size: 12px;\n    padding: 10px;\n    text-align: justify;\n  }\n  \n\n  \n  .tooltip:hover .tooltiptext {\n    visibility: visible;\n    opacity: 1;\n  }\n"])), _variables.GlobalColors.s3, function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "".concat(_variables.GlobalColors.s2);
 }, _variables.FontFamily.AvenirNext, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.gray_light, _variables.GlobalColors.deep_gray, _variables.GlobalColors.magenta_s2);

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

@@ -52,10 +52,6 @@ var _iconsMaterial = require("@mui/icons-material");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _nullIcon = _interopRequireDefault(require("../../../assets/images/generalButton/nullIcon.svg"));
-
-var _Tooltip = require("../../atoms/Tooltip");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 // variables
@@ -154,8 +150,7 @@ function dataReducer(state, action) {
 
     var _action$payload = action.payload,
         articleId = _action$payload.articleId,
-        imageId = _action$payload.imageId,
-        token = _action$payload.token;
+        imageId = _action$payload.imageId;
     var newImageData = state.images.data.slice();
     var articleIndex = newImageData.findIndex(function (f) {
       return f.id === articleId;
@@ -164,14 +159,6 @@ function dataReducer(state, action) {
     newImageData[articleIndex].images[imageId].value = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, action.payload), {}, {
       id: id
     });
-    var data = newImageData;
-    (0, _saveData.saveData)({
-      section: "images",
-      data: {
-        data: data
-      },
-      token: token
-    });
     return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state), {}, {
       images: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.images), {}, {
         data: newImageData
@@ -185,7 +172,7 @@ function dataReducer(state, action) {
     var _action$payload2 = action.payload,
         _articleId = _action$payload2.articleId,
         _imageId = _action$payload2.imageId,
-        _token = _action$payload2.token;
+        token = _action$payload2.token;
 
     var _newImageData = state.images.data.slice();
 
@@ -196,13 +183,14 @@ function dataReducer(state, action) {
     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;
-    var _data = {
+    console.log(_newImageData[_articleIndex]);
+    var data = {
       articleId: _articleId,
       deleteImages: [{
         id: _id
       }]
     };
-    (0, _saveData.deleteImage)(_data, _newImageData[_articleIndex].version, _token);
+    (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
@@ -286,13 +274,6 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
     display: "flex",
     justifyContent: "center"
   };
-  var styleApprovalAttributes = {
-    textAlign: "center",
-    display: "flex",
-    justifyContent: "center",
-    border: "1px solid #ECDD1D",
-    background: "#ECDD1D"
-  };
   var retailersAdded = {
     id: [],
     attr: []
@@ -342,15 +323,17 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             });
           }
         });
-        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;
-        }**/
+        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() {
@@ -410,7 +393,62 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             return e.articleId === item.id && e.imageId === imageId && e.versionId === item.version;
           });
           currentData["img".concat(imageId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            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",
@@ -468,19 +506,13 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             var articleAttributes = attributesReviewed.filter(function (e) {
               return e.articleId === item.id && e.versionId === item.version;
             });
-            var value;
             articleAttributes.forEach(function (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;
-              }
-
+              var 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 : "",
+                value: value ? value : "",
                 isApproved: articleAttribute.isApproved,
                 comment: articleAttribute.comment
               });
@@ -504,7 +536,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
               Header: rules[attributeId].name,
               accessor: "".concat(attributeId + "-" + ret.id),
               width: "200px",
-              style: attributeId == 6700 || attributeId == 6701 ? styleApprovalAttributes : styleData,
+              style: styleData,
               description: rules[attributeId].description
             });
           }
@@ -550,7 +582,7 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
           var inputComponent;
 
           if (des.option_list.length > 0) {
-            inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+            inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)("select", {
               id: item.id + "_" + rules[des.attributeId].attributeId + "_" + item.version,
               name: item.id + "-" + rules[des.attributeId].attributeId + "-" + item.version,
               className: "select-edition-multiple",
@@ -558,17 +590,12 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
               onChange: function onChange(e) {
                 handleChangeOptions(des.attributeId, e.target.value);
               },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                value: "",
-                selected: true,
-                disabled: true,
-                children: "Selecciona una opci\xF3n"
-              }), des.option_list.map(function (option, index) {
+              children: des.option_list.map(function (option, index) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
                   value: option,
                   children: option
                 }, index);
-              })]
+              })
             });
           } else {
             inputComponent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, (0, _objectSpread3.default)({}, props));
@@ -602,32 +629,16 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
                 id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
                 src: _acceptIcon.default,
                 alt: "accept button"
-              }), attributesReviewed[index].isReviewed && !attributesReviewed[index].isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-                position: "topCenter",
-                componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: "Debes aprobar o rechazar para continuar"
-                }),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                    id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
-                    src: _nullIcon.default,
-                    alt: "null button"
-                  })
-                })
-              }), typeof des.isApproved === "undefined" && !attributesReviewed[index].isReviewed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
-                position: "topCenter",
-                componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                  children: "Debes aprobar o rechazar para continuar"
-                }),
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                    id: "button_" + item.id + "_" + des.attributeId + "_" + item.version,
-                    src: _nullIcon.default,
-                    alt: "null 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", {
+            }), " ", showValidationPanel && attributeSelected.articleId === item.id && attributeSelected.attributeId === des.attributeId && attributeSelected.versionId === item.version && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "buttons-container",
               style: {
                 left: "35px"
@@ -696,15 +707,17 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
           });
         }
 
-        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;
-        }**/
+        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, " "]
@@ -772,7 +785,61 @@ function setDataColumns(section, dataService, token, setModalFromTable, setDataS
             return e.articleId === item.id && e.attributeId === des.attributeId && e.versionId === item.version;
           });
           currentData["".concat(des.attributeId)] = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [des.comment && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.5.1",
+  "version": "21.5.3",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -27,12 +27,9 @@
     "babel-preset-react-app": "^10.0.1",
     "caniuse-lite": "^1.0.30001472",
     "chart.js": "^3.7.1",
-    "contentoh-components-library": "^21.4.75",
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
-    "infinite-react-carousel": "^1.2.11",
     "js-base64": "^3.7.2",
-    "mapbox-gl": "^1.13.3",
     "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

package/src/components/atoms/Avatar/index.js

@@ -2,18 +2,12 @@ import { Container } from "./styles";
 import ReactImageFallback from "react-image-fallback";
 import defaultProfile from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 
-export const Avatar = ({
-  image,
-  altText,
-  imageType,
-  onClick,
-  fallbackImage,
-}) => {
+export const Avatar = ({ image, altText, imageType, onClick }) => {
   return (
     <Container className={imageType}>
       <ReactImageFallback
         src={image}
-        fallbackImage={fallbackImage || defaultProfile}
+        fallbackImage={defaultProfile}
         alt={altText}
         onClick={onClick}
       />

package/src/components/atoms/ButtonV2/ButtonV2.stories.js

@@ -17,7 +17,6 @@ export default {
         "purple",
         "purpleS2",
         "black",
-        "red"
       ],
       control: { type: "select" },
     },

package/src/components/atoms/ButtonV2/index.js

@@ -53,7 +53,6 @@ export const ButtonV2 = (props) => {
             "purple",
             "purpleS2",
             "black",
-            "red"
           ].includes(type)
             ? type
             : "white") +

package/src/components/atoms/ButtonV2/styles.js

@@ -128,14 +128,6 @@ export const Container = styled.div`
           background-color: #61467e;
         }
       }
-      &.red {
-        background-color: #B64545;
-        color: white;
-        border-color: #B64545;
-        &:hover {
-          background-color: 9C4646;
-        }
-      }
     }
 
     // tipos de botones transparent
@@ -187,14 +179,6 @@ export const Container = styled.div`
           color: #7b7979;
         }
       }
-      &.red {
-        background-color: #B64545;
-        color: white;
-        border-color: #B64545;
-        &:hover {
-          background-color: 9C4646;
-        }
-      }
     }
 
     .icon,

package/src/components/atoms/CheckBox/CheckBox.stories.js

@@ -8,10 +8,6 @@ export default {
       options: [true, false],
       type: "boolean",
     },
-    typeColor: {
-        options: ["purple", "green", "pink"],
-        control: { type: "select" },
-      },
   },
 };
 
@@ -21,5 +17,4 @@ export const CheckBoxDefault = Template.bind({});
 CheckBoxDefault.args = {
   id: "chk-default",
   label: "chk-default",
-  typeColor: "purple",
 };

package/src/components/atoms/CheckBox/index.js

@@ -1,5 +1,3 @@
-import React from 'react';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { Container } from "./styles";
 
 export const CheckBox = ({
@@ -10,11 +8,10 @@ export const CheckBox = ({
   defaultChecked,
   disabled = false,
   checked,
-  typeColor,
   className = "",
 }) => {
   return (
-    <Container key={`check-${id}`} className={className} typeColor={typeColor}>
+    <Container key={`check-${id}`} className={className}>
       <input
         type="checkbox"
         name={id}
@@ -26,7 +23,6 @@ export const CheckBox = ({
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
-        
       </label>
     </Container>
   );

package/src/components/atoms/CheckBox/styles.js

@@ -1,7 +1,5 @@
 import styled from "styled-components";
-import checkedPurple from "../../../assets/images/checkBox/checked.svg";
-import checkedGreen from "../../../assets/images/checkBox/checkverde.svg";
-import checkedPink from "../../../assets/images/checkBox/checkrosa.svg";
+import checked from "../../../assets/images/checkBox/checked.svg";
 import unchecked from "../../../assets/images/checkBox/unchecked.svg";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
@@ -11,10 +9,8 @@ export const Container = styled.div`
     &:checked + label {
       &:before {
         background-color: ${GlobalColors.white};
-        background-image: ${({ typeColor }) => ( typeColor === "purple" ? 
-        `url(${checkedPurple})` : typeColor === "green" 
-        ? `url(${checkedGreen})` : `url(${checkedPink})` )}
-      } 
+        background-image: url(${checked});
+      }
     }
   }
 
@@ -50,8 +46,6 @@ export const Container = styled.div`
       top: 50%;
       transform: translateY(-50%);
       background-image: url(${unchecked});
-      z-index: 5;
-      cursor: pointer;
     }
   }
 `;