contentoh-components-library 21.4.127 → 21.4.128

package/dist/components/atoms/GeneralInput/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  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\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: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  &.audit-class {\n    input,\n    .quill {\n      border: 1px solid #8a6caa;\n      background-color: #ededfc;\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n\n  > div {\n    label {\n      &:before {\n        outline: 1px solid ", ";\n      }\n    }\n  }\n\n  input,\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: 2px;\n    resize: none;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  select {\n    background: #fafafa;\n    outline: none;\n    border: 1px solid\n      ", ";\n    width: 100%;\n    cursor: pointer;\n    font-family: ", ";\n    color: ", ";\n    font-size: 12px;\n    line-height: 21px;\n    padding: 10px;\n    border-right: 2px solid #e33aa9;\n\n    &:focus {\n      border: 1px solid ", ";\n    }\n  }\n\n  p {\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  &.audit-class {\n    input,\n    .quill {\n      border: 1px solid #8a6caa;\n      background-color: #ededfc;\n    }\n  }\n\n  .btnReviewState {\n    display: \"flex\";\n    flex-direction: \"column\";\n    border: 1px solid lightgray;\n    border-radius: 3px;\n    z-index: 1000;\n    /* position: absolute; */\n  }\n\n  .btnReviewState button {\n    border: none;\n    background: white;\n    border-radius: 3px;\n  }\n  .btnReviewState button:hover {\n    background: lightgray;\n  }\n"])), function (_ref) {
   var isRequired = _ref.isRequired;
   return isRequired ? "red" : "none";
 }, function (_ref2) {

package/dist/components/molecules/GalleryElement/index.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GalleryElement = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _styles = require("./styles");
@@ -27,6 +31,8 @@ var _rejectIcon = _interopRequireDefault(require("../../../assets/images/general
 
 var _acceptIcon = _interopRequireDefault(require("../../../assets/images/generalButton/acceptIcon.svg"));
 
+var _Tooltip = require("../../atoms/Tooltip");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var GalleryElement = function GalleryElement(_ref) {
@@ -47,13 +53,37 @@ var GalleryElement = function GalleryElement(_ref) {
       setSelectedImages = _ref.setSelectedImages,
       setCheckAll = _ref.setCheckAll,
       auditImages = _ref.auditImages,
-      compare = _ref.compare;
+      compare = _ref.compare,
+      updateApprovedInputsImages = _ref.updateApprovedInputsImages;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       showValidationPanel = _useState2[0],
       setShowValidationPanel = _useState2[1];
 
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showDivStates = _useState4[0],
+      setShowDivStates = _useState4[1];
+
+  var _useState5 = (0, _react.useState)({}),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      imageStates = _useState6[0],
+      setImageStates = _useState6[1];
+
+  var handleImgClick = function handleImgClick(inputId) {
+    setShowDivStates(function (prevStates) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevStates), {}, (0, _defineProperty2.default)({}, inputId, !prevStates[inputId]));
+    });
+  };
+
+  var changeImageBtn = function changeImageBtn(inputId, action) {
+    setImageStates(function (prevStates) {
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevStates), {}, (0, _defineProperty2.default)({}, inputId, action === "validate"));
+    });
+    updateApprovedInputsImages(inputId);
+  };
+
   var closeValidationPanel = function closeValidationPanel(e) {
     if (!e.target.closest("#validation-panel") || e.target.closest(".validation-option") && showValidationPanel) {
       document.removeEventListener("click", closeValidationPanel, false);
@@ -85,7 +115,8 @@ var GalleryElement = function GalleryElement(_ref) {
 
   var isEquals = function isEquals(value, auditValue) {
     return value === auditValue;
-  };
+  }; //TOMAR EL image_id
+
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     className: "".concat(gridLayout ? "grid-gallery" : "row-gallery", " ").concat(compare && !isEquals(image === null || image === void 0 ? void 0 : image.uuid, auditImages === null || auditImages === void 0 ? void 0 : (_auditImages$values$n = auditImages.values[number]) === null || _auditImages$values$n === void 0 ? void 0 : _auditImages$values$n.uuid) ? "audit-class" : ""),
@@ -166,19 +197,51 @@ var GalleryElement = function GalleryElement(_ref) {
                 index: number
               });
             }
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             style: {
-              width: "10px"
+              display: "flex",
+              "justify-content": "center",
+              "align-items": "center"
             },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-              style: {
-                height: 15,
-                width: 15,
-                objectFit: "scale-down"
-              },
-              src: _rejectIcon.default,
-              alt: ""
-            })
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
+              componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+                    children: "Comentarios:"
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+                  children: image.comment
+                })]
+              }),
+              children: !image.isApproved && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                src: imageStates[image.image_id] ? _acceptIcon.default : _rejectIcon.default,
+                alt: "botón rechazar",
+                style: {
+                  cursor: "pointer"
+                },
+                onClick: function onClick() {
+                  return handleImgClick(image.image_id);
+                }
+              }),
+              classNameTooltip: "container-tooltip"
+            }), showDivStates[image.image_id] && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "btnReviewState",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                  id: "aceptbtn",
+                  onClick: function onClick() {
+                    return changeImageBtn(image.image_id, "validate");
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                    src: _acceptIcon.default,
+                    alt: "acept button",
+                    style: {
+                      cursor: "pointer"
+                    }
+                  }), "Validar"]
+                })
+              })
+            })]
           })]
         })]
       })]

package/dist/components/pages/ProviderProductEdition/index.js

@@ -17,7 +17,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
-var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _styles = require("./styles");
 
@@ -120,7 +120,7 @@ var reducerImages = function reducerImages(state, action) {
         });
       });
       inputsByRetailer = newInputsByRetailer;
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, action.init), {}, {
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, action.init), {}, {
         inputsByRetailer: inputsByRetailer,
         valuesInitial: action.init.values,
         inputsInitial: action.init.inputs
@@ -128,13 +128,13 @@ var reducerImages = function reducerImages(state, action) {
 
     case "addImg":
       values = [].concat((0, _toConsumableArray2.default)(values), [action.img]);
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state), {}, {
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state), {}, {
         values: values
       });
 
     case "changeImageInfo":
       values[action.index][action.attribute] = action.value;
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state), {}, {
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state), {}, {
         values: values
       });
 
@@ -147,7 +147,7 @@ var reducerImages = function reducerImages(state, action) {
         attrForImgs.general[index].value = action.value;
       }
 
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state), {}, {
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state), {}, {
         attrForImgs: attrForImgs,
         values: values
       });
@@ -156,7 +156,7 @@ var reducerImages = function reducerImages(state, action) {
       values = values.filter(function (value) {
         return action.selectedImages.indexOf(value) === -1;
       });
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state), {}, {
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state), {}, {
         values: values
       });
 
@@ -195,7 +195,7 @@ var reducerImages = function reducerImages(state, action) {
           console.log(action.action, error);
         }
 
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state), {}, {
+        return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state), {}, {
           values: values,
           inputs: inputs
         });
@@ -316,7 +316,9 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                           name: e.target.fileName,
                           ext: ext[ext.length - 1],
                           width: width,
-                          height: height
+                          height: height,
+                          isApproved: true //VALIDAR QUE SOLO SEA PARA RADIOSHACK
+
                         }
                       };
                       setImages(newImg);
@@ -475,31 +477,40 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
   var _useState65 = (0, _react.useState)({}),
       _useState66 = (0, _slicedToArray2.default)(_useState65, 2),
       approvedInputs = _useState66[0],
-      setApprovedInputs = _useState66[1]; // La función que se pasará al componente hijo
+      setApprovedInputs = _useState66[1];
 
+  var _useState67 = (0, _react.useState)({}),
+      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
+      approvedInputsImages = _useState68[0],
+      setApprovedInputsImages = _useState68[1];
 
   var updateApprovedInputs = function updateApprovedInputs(inputId) {
     setApprovedInputs(function (prevInputs) {
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prevInputs), {}, (0, _defineProperty2.default)({}, inputId, true));
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevInputs), {}, (0, _defineProperty2.default)({}, inputId, true));
+    });
+  };
+
+  var updateApprovedInputsImages = function updateApprovedInputsImages(inputId) {
+    setApprovedInputsImages(function (prevInputs) {
+      return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prevInputs), {}, (0, _defineProperty2.default)({}, inputId, true));
     });
-    console.log(approvedInputs);
   };
 
-  var _useState67 = (0, _react.useState)({
+  var _useState69 = (0, _react.useState)({
     "Ficha técnica": null,
     Descripción: null,
     Imágenes: null
   }),
-      _useState68 = (0, _slicedToArray2.default)(_useState67, 2),
-      origin = _useState68[0],
-      setOrigin = _useState68[1];
-
-  var _useState69 = (0, _react.useState)(false),
       _useState70 = (0, _slicedToArray2.default)(_useState69, 2),
-      inCart = _useState70[0],
-      setInCart = _useState70[1];
+      origin = _useState70[0],
+      setOrigin = _useState70[1];
+
+  var _useState71 = (0, _react.useState)(false),
+      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
+      inCart = _useState72[0],
+      setInCart = _useState72[1];
 
-  var _useState71 = (0, _react.useState)({
+  var _useState73 = (0, _react.useState)({
     message: "¿Estás seguro de continuar?",
     detail: " ".concat(user.is_retailer ? "Asegurate de haber revisado las tres secciones" : "Envíar el producto a la cadena"),
     button1: {
@@ -514,34 +525,34 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     },
     img: _defaultProfileImage.default
   }),
-      _useState72 = (0, _slicedToArray2.default)(_useState71, 2),
-      dataGenericModal = _useState72[0],
-      setDataGenericModal = _useState72[1];
-
-  var _useState73 = (0, _react.useState)(null),
       _useState74 = (0, _slicedToArray2.default)(_useState73, 2),
-      socketType = _useState74[0],
-      setSocketType = _useState74[1];
+      dataGenericModal = _useState74[0],
+      setDataGenericModal = _useState74[1];
 
-  var _useState75 = (0, _react.useState)(loading),
+  var _useState75 = (0, _react.useState)(null),
       _useState76 = (0, _slicedToArray2.default)(_useState75, 2),
-      saving = _useState76[0],
-      setSaving = _useState76[1];
+      socketType = _useState76[0],
+      setSocketType = _useState76[1];
 
-  var _useState77 = (0, _react.useState)(product.statusByRetailer),
+  var _useState77 = (0, _react.useState)(loading),
       _useState78 = (0, _slicedToArray2.default)(_useState77, 2),
-      retailerStatus = _useState78[0],
-      setRetailerStatus = _useState78[1];
+      saving = _useState78[0],
+      setSaving = _useState78[1];
+
+  var _useState79 = (0, _react.useState)(product.statusByRetailer),
+      _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
+      retailerStatus = _useState80[0],
+      setRetailerStatus = _useState80[1];
 
   var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
       showVersionSelector = _useCloseModal2[0],
       setShowVersionSelector = _useCloseModal2[1];
 
-  var _useState79 = (0, _react.useState)(),
-      _useState80 = (0, _slicedToArray2.default)(_useState79, 2),
-      globalModal = _useState80[0],
-      setGlobalModal = _useState80[1];
+  var _useState81 = (0, _react.useState)(),
+      _useState82 = (0, _slicedToArray2.default)(_useState81, 2),
+      globalModal = _useState82[0],
+      setGlobalModal = _useState82[1];
 
   var updateAuditStatus = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(status) {
@@ -555,7 +566,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               productTemp.datasheet_status = status;
               productTemp.description_status = status;
               productTemp.images_status = status;
-              retailerStatusCopy = (0, _objectSpread4.default)({}, retailerStatus);
+              retailerStatusCopy = (0, _objectSpread5.default)({}, retailerStatus);
               conceptArray = ["description", "datasheet", "images"];
               Object.keys(retailerStatusCopy).forEach(function (key) {
                 conceptArray.forEach(function (concept) {
@@ -1175,7 +1186,8 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
         imageInputs: imageInputs,
         changeImage: setImages,
         selectedImages: selectedImages,
-        setSelectedImages: setSelectedImages
+        setSelectedImages: setSelectedImages,
+        updateApprovedInputsImages: updateApprovedInputsImages
       }, index);
     });
   };
@@ -1289,7 +1301,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                   });
                 });
               });
-              dataObject = (0, _objectSpread4.default)({
+              dataObject = (0, _objectSpread5.default)({
                 articleId: product === null || product === void 0 ? void 0 : product.id_article,
                 articleData: updatedDatasheets
               }, parseBoxData.length > 0 && {
@@ -1403,20 +1415,31 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               });
             }
 
+            console.log("DATA NEW", data);
+
             if (!(valid && (duplicated === null || duplicated === void 0 ? void 0 : duplicated.length) === 0)) {
-              _context13.next = 31;
+              _context13.next = 33;
               break;
             }
 
             setLoading(true);
-            _context13.prev = 11;
+            _context13.prev = 12;
             data === null || data === void 0 ? void 0 : (_data$articleData3 = data.articleData) === null || _data$articleData3 === void 0 ? void 0 : _data$articleData3.forEach(function (e) {
               e.uuid = (0, _uuid.v4)();
             });
+            data.updateImages = data.updateImages.map(function (image) {
+              if (approvedInputsImages[image.image_id] !== undefined) {
+                return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, image), {}, {
+                  isApproved: approvedInputsImages[image.image_id]
+                });
+              }
+
+              return image;
+            });
             setDataImages(data);
 
             if (!((data === null || data === void 0 ? void 0 : (_data$articleData4 = data.articleData) === null || _data$articleData4 === void 0 ? void 0 : _data$articleData4.length) > 0)) {
-              _context13.next = 23;
+              _context13.next = 25;
               break;
             }
 
@@ -1432,41 +1455,41 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               };
               promiseArray.push(myBucket.putObject(params).promise());
             });
-            _context13.next = 20;
+            _context13.next = 22;
             return Promise.all(promiseArray);
 
-          case 20:
+          case 22:
             setImagesUploaded(true);
-            _context13.next = 24;
+            _context13.next = 26;
             break;
 
-          case 23:
+          case 25:
             setImagesUploaded(true);
 
-          case 24:
-            _context13.next = 29;
+          case 26:
+            _context13.next = 31;
             break;
 
-          case 26:
-            _context13.prev = 26;
-            _context13.t0 = _context13["catch"](11);
+          case 28:
+            _context13.prev = 28;
+            _context13.t0 = _context13["catch"](12);
             console.log(_context13.t0); // setMainLoading(false);
 
-          case 29:
-            _context13.next = 32;
+          case 31:
+            _context13.next = 34;
             break;
 
-          case 31:
+          case 33:
             // setMainLoading(false);
             setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
 
-          case 32:
+          case 34:
           case "end":
             return _context13.stop();
         }
       }
-    }, _callee13, null, [[11, 26]]);
-  })), [images, imagesUploaded]);
+    }, _callee13, null, [[12, 28]]);
+  })), [approvedInputsImages, images, imagesUploaded]);
   (0, _react.useEffect)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14() {
     var res;
     return _regenerator.default.wrap(function _callee14$(_context14) {
@@ -1825,7 +1848,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               if (res.data.statusCode === 200) {
                 _JSON$parse = JSON.parse(res.data.body), newArticleStatus = _JSON$parse.newArticleStatus, newServiceStatus = _JSON$parse.newServiceStatus, newStatus = _JSON$parse.newStatus;
                 if (newArticleStatus) productTemp.status = newArticleStatus[articleId];
-                retailerStatusCopy = (0, _objectSpread4.default)({}, retailerStatus);
+                retailerStatusCopy = (0, _objectSpread5.default)({}, retailerStatus);
                 retailerStatusCopy[activeRetailer.id][concept] = newStatus;
                 setRetailerStatus(retailerStatusCopy);
                 productTemp.statusByRetailer = retailerStatusCopy;
@@ -1838,7 +1861,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                 setProduct(productTemp);
                 sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
                 setOrigin(function (prev) {
-                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, (0, _defineProperty2.default)({}, concept, status));
+                  return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, (0, _defineProperty2.default)({}, concept, status));
                 });
               }
 
@@ -1888,7 +1911,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                 var service = ret.service,
                     id_retailer = ret.id_retailer;
                 var data = {};
-                data = (0, _objectSpread4.default)((0, _objectSpread4.default)({}, dataGeneral), {}, {
+                data = (0, _objectSpread5.default)((0, _objectSpread5.default)({}, dataGeneral), {}, {
                   concept: service,
                   retailerId: id_retailer,
                   evalStatus: retailerStatus[id_retailer][service]
@@ -1910,7 +1933,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               productTemp.datasheet_status = productTemp.datasheet_status === "NA" ? "NA" : status;
               productTemp.description_status = productTemp.description_status === "NA" ? "NA" : status;
               productTemp.images_status = productTemp.images_status === "NA" ? "NA" : status;
-              retailerStatusCopy = (0, _objectSpread4.default)({}, retailerStatus);
+              retailerStatusCopy = (0, _objectSpread5.default)({}, retailerStatus);
               Object.keys(retailerStatusCopy).forEach(function (key) {
                 conceptArray.forEach(function (concept) {
                   if (retailerStatusCopy[key][concept]) {
@@ -2047,7 +2070,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
     if (result === "A") {
       if (origin[activeTab] === "RequestWithoutContentoh" && !user.is_retailer && (!product.id_order || !product.orderId)) {
         setDataGenericModal(function (prev) {
-          return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, {
+          return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
             button2: {
               name: "Continuar",
               action: function action() {
@@ -2062,7 +2085,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
           sendEvaluation("A");
         } else {
           setDataGenericModal(function (prev) {
-            return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, {
+            return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
               button2: {
                 name: "Continuar",
                 action: function action() {
@@ -2084,7 +2107,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
           sendEvaluation("R");
         } else {
           setDataGenericModal(function (prev) {
-            return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, {
+            return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
               button2: {
                 name: "Continuar",
                 action: function action() {
@@ -2149,7 +2172,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
           approveAll: function approveAll() {
             if (origin === "RequestWithoutContentoh" && !user.is_retailer && (!product.id_order || !product.orderId)) {
               setDataGenericModal(function (prev) {
-                return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, {
+                return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
                   button2: {
                     name: "Continuar",
                     action: function action() {
@@ -2164,7 +2187,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                 validateAll("A");
               } else {
                 setDataGenericModal(function (prev) {
-                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, {
+                  return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
                     button2: {
                       name: "Continuar",
                       action: function action() {
@@ -2188,7 +2211,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
                 setShowRejectModal(true);
               } else {
                 setDataGenericModal(function (prev) {
-                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, prev), {}, {
+                  return (0, _objectSpread5.default)((0, _objectSpread5.default)({}, prev), {}, {
                     button2: {
                       name: "Continuar",
                       action: function action() {
@@ -2297,10 +2320,10 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
               headerType: "input-name-header"
             })), activeTab === "Imágenes" && ((product === null || product === void 0 ? void 0 : product.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("section", {
               className: "container",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread4.default)((0, _objectSpread4.default)({}, getRootProps({
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, getRootProps({
                 className: "dropzone"
               })), {}, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread4.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread5.default)({}, getInputProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
                   children: thumbs()
                 })]
               }))
@@ -2359,7 +2382,7 @@ var ProviderProductEdition = function ProviderProductEdition(_ref) {
       onClick: function onClick() {
         return setMessage("");
       }
-    }), globalModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalModal, (0, _objectSpread4.default)({
+    }), globalModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlobalModal, (0, _objectSpread5.default)({
       close: closeGlobalModal
     }, globalModal)), showVersionSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VersionSelector.VersionSelector, {
       modalId: "version-selector",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.127",
+  "version": "21.4.128",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -65,14 +65,22 @@ export const Container = styled.div`
       background-color: #ededfc;
     }
   }
-`;
-
-
-
-
-
-
-
-
 
+  .btnReviewState {
+    display: "flex";
+    flex-direction: "column";
+    border: 1px solid lightgray;
+    border-radius: 3px;
+    z-index: 1000;
+    /* position: absolute; */
+  }
 
+  .btnReviewState button {
+    border: none;
+    background: white;
+    border-radius: 3px;
+  }
+  .btnReviewState button:hover {
+    background: lightgray;
+  }
+`;

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

@@ -7,6 +7,8 @@ import { useState, useEffect } from "react";
 import Select from "../../atoms/Select";
 import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
 import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
+import { Tooltip } from "../../atoms/Tooltip";
+
 export const GalleryElement = ({
   image,
   gridLayout = false,
@@ -22,8 +24,25 @@ export const GalleryElement = ({
   setCheckAll,
   auditImages,
   compare,
+  updateApprovedInputsImages,
 }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
+  const [showDivStates, setShowDivStates] = useState({});
+  const [imageStates, setImageStates] = useState({});
+
+  const handleImgClick = (inputId) => {
+    setShowDivStates((prevStates) => ({
+      ...prevStates,
+      [inputId]: !prevStates[inputId],
+    }));
+  };
+  const changeImageBtn = (inputId, action) => {
+    setImageStates((prevStates) => ({
+      ...prevStates,
+      [inputId]: action === "validate",
+    }));
+    updateApprovedInputsImages(inputId);
+  };
 
   const closeValidationPanel = (e) => {
     if (
@@ -58,7 +77,7 @@ export const GalleryElement = ({
   const isEquals = (value, auditValue) => {
     return value === auditValue;
   };
-
+  //TOMAR EL image_id
   return (
     <Container
       className={`${gridLayout ? "grid-gallery" : "row-gallery"} ${
@@ -142,17 +161,57 @@ export const GalleryElement = ({
                   });
                 }}
               />
-              <p style={{ width: "10px" }}>
-                <img
-                  style={{
-                    height: 15,
-                    width: 15,
-                    objectFit: "scale-down",
-                  }}
-                  src={rejectIcon}
-                  alt={""}
+
+              <div
+                style={{
+                  display: "flex",
+                  "justify-content": "center",
+                  "align-items": "center",
+                }}
+              >
+                <Tooltip
+                  componentTooltip={
+                    <>
+                      <p>
+                        <b>Comentarios:</b>
+                      </p>
+                      <p>{image.comment}</p>
+                    </>
+                  }
+                  children={
+                    !image.isApproved && (
+                      <img
+                        src={
+                          imageStates[image.image_id] ? acceptIcon : rejectIcon
+                        }
+                        alt={"botón rechazar"}
+                        style={{ cursor: "pointer" }}
+                        onClick={() => handleImgClick(image.image_id)}
+                      />
+                    )
+                  }
+                  classNameTooltip={"container-tooltip"}
                 />
-              </p>
+                {showDivStates[image.image_id] && (
+                  <div className="btnReviewState">
+                    <div>
+                      <button
+                        id="aceptbtn"
+                        onClick={() =>
+                          changeImageBtn(image.image_id, "validate")
+                        }
+                      >
+                        <img
+                          src={acceptIcon}
+                          alt="acept button"
+                          style={{ cursor: "pointer" }}
+                        />
+                        Validar
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
             </>
           )}
         </div>

package/src/components/pages/ProviderProductEdition/index.js

@@ -177,6 +177,7 @@ export const ProviderProductEdition = ({
                 ext: ext[ext.length - 1],
                 width: width,
                 height: height,
+                isApproved: true, //VALIDAR QUE SOLO SEA PARA RADIOSHACK
               },
             };
             setImages(newImg);
@@ -228,14 +229,19 @@ export const ProviderProductEdition = ({
   const [validatedAll, setValidatedAll] = useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [approvedInputs, setApprovedInputs] = useState({});
+  const [approvedInputsImages, setApprovedInputsImages] = useState({});
 
-  // La función que se pasará al componente hijo
   const updateApprovedInputs = (inputId) => {
     setApprovedInputs((prevInputs) => ({
       ...prevInputs,
       [inputId]: true,
     }));
-    console.log(approvedInputs);
+  };
+  const updateApprovedInputsImages = (inputId) => {
+    setApprovedInputsImages((prevInputs) => ({
+      ...prevInputs,
+      [inputId]: true,
+    }));
   };
 
   const [origin, setOrigin] = useState({
@@ -671,6 +677,7 @@ export const ProviderProductEdition = ({
         changeImage={setImages}
         selectedImages={selectedImages}
         setSelectedImages={setSelectedImages}
+        updateApprovedInputsImages={updateApprovedInputsImages}
       />
     ));
   };
@@ -812,12 +819,23 @@ export const ProviderProductEdition = ({
         return false;
       });
     }
+    console.log("DATA NEW", data);
+
     if (valid && duplicated?.length === 0) {
       setLoading(true);
       try {
         data?.articleData?.forEach((e) => {
           e.uuid = uuidv4();
         });
+        data.updateImages = data.updateImages.map((image) => {
+          if (approvedInputsImages[image.image_id] !== undefined) {
+            return {
+              ...image,
+              isApproved: approvedInputsImages[image.image_id],
+            };
+          }
+          return image;
+        });
         setDataImages(data);
         if (data?.articleData?.length > 0) {
           setImagesUploaded(false);
@@ -851,7 +869,7 @@ export const ProviderProductEdition = ({
       );
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [images, imagesUploaded]);
+  }, [approvedInputsImages, images, imagesUploaded]);
 
   useEffect(async () => {
     if (imagesUploaded) {