contentoh-components-library 21.5.70 → 21.5.72

package/dist/components/atoms/RetailerSelector/RetailerSelector.stories.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+
+var _ = require(".");
+
+var _default = {
+  component: _.RetailerSelector,
+  parameters: {
+    layout: "centered"
+  }
+};
+exports.default = _default;
+var Default = {};
+exports.Default = Default;

package/dist/components/atoms/RetailerSelector/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RetailerSelector = void 0;
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var RetailerSelector = function RetailerSelector() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: "RetailerSelector Component"
+  });
+};
+
+exports.RetailerSelector = RetailerSelector;

package/dist/components/atoms/RetailerSelector/styles.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/pages/RetailerProductEdition/context/provider-product-edition.context.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useProviderProductEdition = exports.ProviderProductEditionProvider = void 0;
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
@@ -35,6 +37,8 @@ var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["src"],
+    _excluded2 = ["src"];
 var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
 var REGION = "us-east-1";
 
@@ -306,9 +310,9 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
 
   var updateImages = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(token) {
-      var _state$product7, _state$images_values, _state$product8, _state$product9, _data$articleData, _data$updateImages;
+      var _state$images_values, _state$product7, _state$product8, _state$product9, _data$articleData, _data$updateImages;
 
-      var updatedImages, data, valid, promiseArray, res;
+      var updatedImages, attrForImgs, generalAttrs, retailerKey, retailerAttrs, mergedAttrs, data, valid, promiseArray, res;
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
@@ -322,14 +326,33 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
 
             case 2:
               updatedImages = state.updated_images_values;
+              attrForImgs = ((_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : _state$images_values.attrForImgs) || {};
+              generalAttrs = attrForImgs.general || [];
+              retailerKey = Object.keys(attrForImgs).find(function (key) {
+                return key !== "general";
+              });
+              retailerAttrs = retailerKey ? attrForImgs[retailerKey] : [];
+              mergedAttrs = retailerAttrs.map(function (retailerAttr) {
+                var generalAttr = generalAttrs.find(function (g) {
+                  return g.id === retailerAttr.id;
+                });
+
+                if (generalAttr && generalAttr.value !== retailerAttr.value) {
+                  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, retailerAttr), {}, {
+                    value: generalAttr.value
+                  });
+                }
+
+                return retailerAttr;
+              });
               data = {
                 articleId: (_state$product7 = state.product) === null || _state$product7 === void 0 ? void 0 : _state$product7.id_article,
-                attrReqImgs: Object.values((_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : _state$images_values.attrForImgs).slice(0, -1).map(function (e) {
-                  var _e$, _e$0$value, _e$2;
+                attrReqImgs: mergedAttrs.map(function (e) {
+                  var _e$value;
 
                   return {
-                    attrId: (_e$ = e[0]) === null || _e$ === void 0 ? void 0 : _e$.id,
-                    value: (_e$0$value = (_e$2 = e[0]) === null || _e$2 === void 0 ? void 0 : _e$2.value) !== null && _e$0$value !== void 0 ? _e$0$value : ""
+                    attrId: e.id,
+                    value: (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : ""
                   };
                 }),
                 articleData: state.images_values.values.filter(function (e) {
@@ -350,7 +373,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
               });
 
               if (!valid) {
-                _context3.next = 31;
+                _context3.next = 38;
                 break;
               }
 
@@ -369,7 +392,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                   isApproved: true
                 });
               });
-              _context3.prev = 11;
+              _context3.prev = 16;
               promiseArray = data.articleData.map(function (e) {
                 var file = Buffer.from(e.src.replace(/^data:image\/\w+;base64,/, ""), "base64");
                 var params = {
@@ -380,11 +403,22 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 };
                 return myBucket.putObject(params).promise();
               });
-              _context3.next = 15;
+              _context3.next = 20;
               return Promise.all(promiseArray);
 
-            case 15:
-              _context3.next = 17;
+            case 20:
+              // Eliminar el buffer base64 antes de enviar al endpoint para evitar error 413
+              data.articleData = data.articleData.map(function (_ref5) {
+                var src = _ref5.src,
+                    rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+                return rest;
+              });
+              data.updateImages = data.updateImages.map(function (_ref6) {
+                var src = _ref6.src,
+                    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
+                return rest;
+              });
+              _context3.next = 24;
               return _axios.default.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
                 params: {
                   image: true,
@@ -395,7 +429,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 }
               });
 
-            case 17:
+            case 24:
               res = _context3.sent;
 
               if (res.data.statusCode === 200) {
@@ -416,12 +450,12 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 });
               }
 
-              _context3.next = 26;
+              _context3.next = 33;
               break;
 
-            case 21:
-              _context3.prev = 21;
-              _context3.t0 = _context3["catch"](11);
+            case 28:
+              _context3.prev = 28;
+              _context3.t0 = _context3["catch"](16);
               console.log(_context3.t0);
               dispatch({
                 type: "SET_ERRORS",
@@ -437,19 +471,19 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 }
               });
 
-            case 26:
-              _context3.prev = 26;
+            case 33:
+              _context3.prev = 33;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context3.finish(26);
+              return _context3.finish(33);
 
-            case 29:
-              _context3.next = 32;
+            case 36:
+              _context3.next = 39;
               break;
 
-            case 31:
+            case 38:
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -460,12 +494,12 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 }
               });
 
-            case 32:
+            case 39:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[11, 21, 26, 29]]);
+      }, _callee3, null, [[16, 28, 33, 36]]);
     }));
 
     return function updateImages(_x3) {
@@ -473,15 +507,130 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
     };
   }();
 
+  var saveImageAttrs = /*#__PURE__*/function () {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(token) {
+      var _state$images_values$, _state$images_values2, _state$images_values3, _state$product10, _state$product11, _state$product12;
+
+      var activeImage, attrForImgs, data, _state$product13, _state$product14, res;
+
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!(state.updated_attr_for_imgs.length === 0)) {
+                _context4.next = 2;
+                break;
+              }
+
+              return _context4.abrupt("return");
+
+            case 2:
+              dispatch({
+                type: "SET_SAVING",
+                payload: true
+              });
+              activeImage = state.images_values.values[state.current_image];
+              attrForImgs = (_state$images_values$ = (_state$images_values2 = state.images_values) === null || _state$images_values2 === void 0 ? void 0 : (_state$images_values3 = _state$images_values2.attrForImgs) === null || _state$images_values3 === void 0 ? void 0 : _state$images_values3.general) !== null && _state$images_values$ !== void 0 ? _state$images_values$ : [];
+              data = {
+                articleId: (_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.id_article,
+                attrReqImgs: attrForImgs.map(function (e) {
+                  var _e$value2;
+
+                  return {
+                    attrId: e.id,
+                    value: (_e$value2 = e.value) !== null && _e$value2 !== void 0 ? _e$value2 : "-"
+                  };
+                }),
+                articleData: [],
+                updateImages: activeImage ? [activeImage] : []
+              };
+
+              if ((_state$product11 = state.product) !== null && _state$product11 !== void 0 && _state$product11.orderId || (_state$product12 = state.product) !== null && _state$product12 !== void 0 && _state$product12.id_order) {
+                data.orderId = ((_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.orderId) || ((_state$product14 = state.product) === null || _state$product14 === void 0 ? void 0 : _state$product14.id_order);
+              }
+
+              _context4.prev = 7;
+              _context4.next = 10;
+              return _axios.default.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
+                params: {
+                  image: true,
+                  version: state.product.version
+                },
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 10:
+              res = _context4.sent;
+
+              if (res.data.statusCode === 200) {
+                dispatch({
+                  type: "SET_UPDATED_ATTR_FOR_IMGS",
+                  payload: []
+                });
+                dispatch({
+                  type: "SET_MODAL",
+                  payload: {
+                    show: true,
+                    title: "",
+                    message: "Atributos de imagen guardados con éxito",
+                    image: _genericModalCheck.default
+                  }
+                });
+              }
+
+              _context4.next = 19;
+              break;
+
+            case 14:
+              _context4.prev = 14;
+              _context4.t0 = _context4["catch"](7);
+              console.log(_context4.t0);
+              dispatch({
+                type: "SET_ERRORS",
+                payload: [].concat((0, _toConsumableArray2.default)(state.errors), [_context4.t0])
+              });
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "Error",
+                  message: "Hubo un error al guardar los atributos de imagen",
+                  image: _errorModal.default
+                }
+              });
+
+            case 19:
+              _context4.prev = 19;
+              dispatch({
+                type: "SET_SAVING",
+                payload: false
+              });
+              return _context4.finish(19);
+
+            case 22:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[7, 14, 19, 22]]);
+    }));
+
+    return function saveImageAttrs(_x4) {
+      return _ref7.apply(this, arguments);
+    };
+  }();
+
   var handleOnDownloadImages = function handleOnDownloadImages() {
-    var _state$product10, _state$product11, _state$product11$arti, _state$images_values2, _state$images_values3;
+    var _state$product15, _state$product16, _state$product16$arti, _state$images_values4, _state$images_values5;
 
-    var upc = ((_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.upc) || ((_state$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : (_state$product11$arti = _state$product11.article) === null || _state$product11$arti === void 0 ? void 0 : _state$product11$arti.upc);
+    var upc = ((_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.upc) || ((_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : (_state$product16$arti = _state$product16.article) === null || _state$product16$arti === void 0 ? void 0 : _state$product16$arti.upc);
     state.selected_images.length > 0 ? state.selected_images.forEach(function (e) {
       if (e.id) {
         saveAs("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(upc, "_").concat(e.name, ".").concat(e.ext));
       }
-    }) : (_state$images_values2 = state.images_values) === null || _state$images_values2 === void 0 ? void 0 : (_state$images_values3 = _state$images_values2.values) === null || _state$images_values3 === void 0 ? void 0 : _state$images_values3.forEach(function (e) {
+    }) : (_state$images_values4 = state.images_values) === null || _state$images_values4 === void 0 ? void 0 : (_state$images_values5 = _state$images_values4.values) === null || _state$images_values5 === void 0 ? void 0 : _state$images_values5.forEach(function (e) {
       if (e.id) {
         saveAs("https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(e.srcDB), "".concat(upc, "_").concat(e.name, ".").concat(e.ext));
       }
@@ -489,12 +638,12 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
   };
 
   var deleteImages = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(token) {
-      var imgsInBack, _state$product12, data;
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(token) {
+      var imgsInBack, _state$product17, data;
 
-      return _regenerator.default.wrap(function _callee4$(_context4) {
+      return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
               dispatch({
                 type: "SET_SAVING",
@@ -506,16 +655,16 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
               }); // Hacer el request al backend si hay imágenes que eliminar
 
               if (!(imgsInBack.length > 0)) {
-                _context4.next = 18;
+                _context5.next = 18;
                 break;
               }
 
               data = {
-                articleId: (_state$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.id_article,
+                articleId: (_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.id_article,
                 deleteImages: imgsInBack
               };
-              _context4.prev = 4;
-              _context4.next = 7;
+              _context5.prev = 4;
+              _context5.next = 7;
               return _axios.default.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
                 params: {
                   image: true,
@@ -537,13 +686,13 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                   image: _genericModalCheck.default
                 }
               });
-              _context4.next = 15;
+              _context5.next = 15;
               break;
 
             case 10:
-              _context4.prev = 10;
-              _context4.t0 = _context4["catch"](4);
-              console.log(_context4.t0);
+              _context5.prev = 10;
+              _context5.t0 = _context5["catch"](4);
+              console.log(_context5.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -553,15 +702,15 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                   image: _errorModal.default
                 }
               });
-              return _context4.abrupt("return");
+              return _context5.abrupt("return");
 
             case 15:
-              _context4.prev = 15;
+              _context5.prev = 15;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context4.finish(15);
+              return _context5.finish(15);
 
             case 18:
               // Actualizar el estado eliminando las imágenes seleccionadas
@@ -578,36 +727,36 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
 
             case 20:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4, null, [[4, 10, 15, 18]]);
+      }, _callee5, null, [[4, 10, 15, 18]]);
     }));
 
-    return function deleteImages(_x4) {
-      return _ref5.apply(this, arguments);
+    return function deleteImages(_x5) {
+      return _ref8.apply(this, arguments);
     };
   }();
 
   var createComment = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(body, token) {
-      var _state$product13, _state$product14, _state$product15;
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(body, token) {
+      var _state$product18, _state$product19, _state$product20;
 
       var concept, data;
-      return _regenerator.default.wrap(function _callee5$(_context5) {
+      return _regenerator.default.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               concept = (0, _utils.getConceptByTab)(state.active_tab);
               data = {
-                articleId: (_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.id_article,
-                orderId: ((_state$product14 = state.product) === null || _state$product14 === void 0 ? void 0 : _state$product14.orderId) || ((_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.id_order),
+                articleId: (_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.id_article,
+                orderId: ((_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.orderId) || ((_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.id_order),
                 message: body,
                 concept: concept,
                 version: state.product.version
               };
-              _context5.prev = 2;
-              _context5.next = 5;
+              _context6.prev = 2;
+              _context6.next = 5;
               return _axios.default.post("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
                 headers: {
                   Authorization: token
@@ -615,24 +764,24 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
               });
 
             case 5:
-              _context5.next = 10;
+              _context6.next = 10;
               break;
 
             case 7:
-              _context5.prev = 7;
-              _context5.t0 = _context5["catch"](2);
-              console.log("Error creating comment:", _context5.t0);
+              _context6.prev = 7;
+              _context6.t0 = _context6["catch"](2);
+              console.log("Error creating comment:", _context6.t0);
 
             case 10:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5, null, [[2, 7]]);
+      }, _callee6, null, [[2, 7]]);
     }));
 
-    return function createComment(_x5, _x6) {
-      return _ref6.apply(this, arguments);
+    return function createComment(_x6, _x7) {
+      return _ref9.apply(this, arguments);
     };
   }();
 
@@ -642,6 +791,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
     saveDatasheets: saveDatasheets,
     saveDescriptions: saveDescriptions,
     updateImages: updateImages,
+    saveImageAttrs: saveImageAttrs,
     deleteImages: deleteImages,
     handleOnDownloadImages: handleOnDownloadImages,
     createComment: createComment

package/dist/components/pages/RetailerProductEdition/context/reducers/active-state.js

@@ -54,7 +54,8 @@ var ACTIVE_STATE_ACTIONS = {
   DELETE_IMAGES: "DELETE_IMAGES",
   TOGGLE_CHECK_ALL_IMAGES: "TOGGLE_CHECK_ALL_IMAGES",
   TOGGLE_CHECKBOX_IMAGE: "TOGGLE_CHECKBOX_IMAGE",
-  SET_MISSING_REQUIRED_FIELDS: "SET_MISSING_REQUIRED_FIELDS"
+  SET_MISSING_REQUIRED_FIELDS: "SET_MISSING_REQUIRED_FIELDS",
+  CHANGE_ATTR_VALUE: "CHANGE_ATTR_VALUE"
 };
 exports.ACTIVE_STATE_ACTIONS = ACTIVE_STATE_ACTIONS;
 
@@ -268,6 +269,67 @@ var activeStateReducer = function activeStateReducer(state, action) {
         });
       }
 
+    case ACTIVE_STATE_ACTIONS.CHANGE_ATTR_VALUE:
+      {
+        var _state$images_values;
+
+        var _action$payload2 = action.payload,
+            id = _action$payload2.id,
+            _value = _action$payload2.value;
+        var attrForImgs = (_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : _state$images_values.attrForImgs;
+        if (!(attrForImgs !== null && attrForImgs !== void 0 && attrForImgs.general)) return state;
+        var attrIndex = attrForImgs.general.findIndex(function (f) {
+          return f.id === id;
+        });
+        if (attrIndex === -1) return state;
+        var originalAttr = attrForImgs.general[attrIndex];
+        var updatedGeneral = attrForImgs.general.map(function (attr, i) {
+          return i === attrIndex ? (0, _objectSpread4.default)((0, _objectSpread4.default)({}, attr), {}, {
+            value: _value
+          }) : attr;
+        }); // Tracking de cambios en updated_attr_for_imgs
+
+        var existingIndex = state.updated_attr_for_imgs.findIndex(function (attr) {
+          return attr.attrId === id;
+        });
+        var newUpdatedAttrForImgs;
+
+        if (existingIndex === -1) {
+          // Agregar nuevo cambio con valor original
+          newUpdatedAttrForImgs = [].concat((0, _toConsumableArray2.default)(state.updated_attr_for_imgs), [{
+            attrId: id,
+            value: _value,
+            originalValue: originalAttr.value
+          }]);
+        } else {
+          // Actualizar valor existente
+          var updated = state.updated_attr_for_imgs.map(function (attr, i) {
+            return i === existingIndex ? (0, _objectSpread4.default)((0, _objectSpread4.default)({}, attr), {}, {
+              value: _value
+            }) : attr;
+          }); // Si el valor vuelve al original, eliminarlo del tracking
+
+          var _originalValue = updated[existingIndex].originalValue;
+
+          if (String(_value) === String(_originalValue)) {
+            newUpdatedAttrForImgs = updated.filter(function (_, i) {
+              return i !== existingIndex;
+            });
+          } else {
+            newUpdatedAttrForImgs = updated;
+          }
+        }
+
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state), {}, {
+          images_values: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.images_values), {}, {
+            attrForImgs: (0, _objectSpread4.default)((0, _objectSpread4.default)({}, attrForImgs), {}, {
+              general: updatedGeneral
+            })
+          }),
+          updated_attr_for_imgs: newUpdatedAttrForImgs
+        });
+      }
+
     default:
       {
         return null;

package/dist/components/pages/RetailerProductEdition/context/reducers/inputs.js

@@ -12,13 +12,15 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 var inputsInitialState = {
   updated_datasheets_inputs: [],
   updated_descriptions_inputs: [],
-  updated_images_values: []
+  updated_images_values: [],
+  updated_attr_for_imgs: []
 };
 exports.inputsInitialState = inputsInitialState;
 var INPUTS_ACTIONS = {
   SET_UPDATED_DATASHEETS_INPUTS: "SET_UPDATED_DATASHEETS_INPUTS",
   SET_UPDATED_DESCRIPTIONS_INPUTS: "SET_UPDATED_DESCRIPTIONS_INPUTS",
   SET_UPDATED_IMAGES_VALUES: "SET_UPDATED_IMAGES_VALUES",
+  SET_UPDATED_ATTR_FOR_IMGS: "SET_UPDATED_ATTR_FOR_IMGS",
   UPDATE_DESCRIPTIONS_INPUTS: "UPDATE_DESCRIPTIONS_INPUTS",
   UPDATE_DATASHEETS_INPUTS: "UPDATE_DATASHEETS_INPUTS"
 };
@@ -47,6 +49,13 @@ var inputsReducer = function inputsReducer(state, action) {
         });
       }
 
+    case INPUTS_ACTIONS.SET_UPDATED_ATTR_FOR_IMGS:
+      {
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+          updated_attr_for_imgs: action.payload
+        });
+      }
+
     case INPUTS_ACTIONS.UPDATE_DESCRIPTIONS_INPUTS:
       {
         var _state$descriptions_i;

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

@@ -11,6 +11,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+
 var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
@@ -106,6 +108,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       saveDatasheets = _useProviderProductEd.saveDatasheets,
       saveDescriptions = _useProviderProductEd.saveDescriptions,
       updateImages = _useProviderProductEd.updateImages,
+      saveImageAttrs = _useProviderProductEd.saveImageAttrs,
       deleteImages = _useProviderProductEd.deleteImages,
       handleOnDownloadImages = _useProviderProductEd.handleOnDownloadImages,
       createComment = _useProviderProductEd.createComment;
@@ -654,10 +657,17 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   }, [state.active_retailer, state.product]);
 
   var handleOnChangeCurrentImage = function handleOnChangeCurrentImage(index) {
-    dispatch({
-      type: "SET_CURRENT_IMAGE",
-      payload: index
-    });
+    if (typeof index === "number") {
+      dispatch({
+        type: "SET_CURRENT_IMAGE",
+        payload: index
+      });
+    } else if ((0, _typeof2.default)(index) === "object") {
+      dispatch({
+        type: "CHANGE_ATTR_VALUE",
+        payload: index
+      });
+    }
   };
 
   var handleOnShowModalGallery = function handleOnShowModalGallery() {
@@ -767,7 +777,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
     var _state$product5, _state$product5$servi;
 
     if (((_state$product5 = state.product) === null || _state$product5 === void 0 ? void 0 : (_state$product5$servi = _state$product5.services) === null || _state$product5$servi === void 0 ? void 0 : _state$product5$servi.images) === 1) {
-      updateImages();
+      saveImageAttrs(token);
     }
   };
 

package/package.json

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

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

@@ -0,0 +1,10 @@
+import { RetailerSelector } from ".";
+
+export default {
+  component: RetailerSelector,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const Default = {};

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

@@ -0,0 +1,3 @@
+export const RetailerSelector = () => {
+  return <div>RetailerSelector Component</div>;
+};

package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx

@@ -231,14 +231,27 @@ export const ProviderProductEditionProvider = ({ children }) => {
     if (state.updated_images_values.length === 0) return;
     const updatedImages = state.updated_images_values;
 
+    const attrForImgs = state.images_values?.attrForImgs || {};
+    const generalAttrs = attrForImgs.general || [];
+    const retailerKey = Object.keys(attrForImgs).find(
+      (key) => key !== "general",
+    );
+    const retailerAttrs = retailerKey ? attrForImgs[retailerKey] : [];
+
+    const mergedAttrs = retailerAttrs.map((retailerAttr) => {
+      const generalAttr = generalAttrs.find((g) => g.id === retailerAttr.id);
+      if (generalAttr && generalAttr.value !== retailerAttr.value) {
+        return { ...retailerAttr, value: generalAttr.value };
+      }
+      return retailerAttr;
+    });
+
     const data = {
       articleId: state.product?.id_article,
-      attrReqImgs: Object.values(state.images_values?.attrForImgs)
-        .slice(0, -1)
-        .map((e) => ({
-          attrId: e[0]?.id,
-          value: e[0]?.value ?? "",
-        })),
+      attrReqImgs: mergedAttrs.map((e) => ({
+        attrId: e.id,
+        value: e.value ?? "",
+      })),
       articleData: state.images_values.values.filter((e) => !e.id),
       updateImages: state.images_values.values.filter((e) => e.id),
     };
@@ -282,6 +295,10 @@ export const ProviderProductEditionProvider = ({ children }) => {
 
         await Promise.all(promiseArray);
 
+        // Eliminar el buffer base64 antes de enviar al endpoint para evitar error 413
+        data.articleData = data.articleData.map(({ src, ...rest }) => rest);
+        data.updateImages = data.updateImages.map(({ src, ...rest }) => rest);
+
         const res = await axios.put(
           process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
           data,
@@ -302,7 +319,6 @@ export const ProviderProductEditionProvider = ({ children }) => {
             type: "SET_UPDATED_IMAGES_VALUES",
             payload: [],
           });
-
           // Mostrar modal de éxito
           dispatch({
             type: "SET_MODAL",
@@ -346,6 +362,80 @@ export const ProviderProductEditionProvider = ({ children }) => {
     }
   };
 
+  const saveImageAttrs = async (token) => {
+    if (state.updated_attr_for_imgs.length === 0) return;
+
+    dispatch({ type: "SET_SAVING", payload: true });
+
+    const activeImage = state.images_values.values[state.current_image];
+
+    const attrForImgs = state.images_values?.attrForImgs?.general ?? [];
+
+    const data = {
+      articleId: state.product?.id_article,
+      attrReqImgs: attrForImgs.map((e) => ({
+        attrId: e.id,
+        value: e.value ?? "-",
+      })),
+      articleData: [],
+      updateImages: activeImage ? [activeImage] : [],
+    };
+
+    if (state.product?.orderId || state.product?.id_order) {
+      data.orderId = state.product?.orderId || state.product?.id_order;
+    }
+
+    try {
+      const res = await axios.put(
+        process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,
+        data,
+        {
+          params: {
+            image: true,
+            version: state.product.version,
+          },
+          headers: {
+            Authorization: token,
+          },
+        },
+      );
+
+      if (res.data.statusCode === 200) {
+        dispatch({
+          type: "SET_UPDATED_ATTR_FOR_IMGS",
+          payload: [],
+        });
+
+        dispatch({
+          type: "SET_MODAL",
+          payload: {
+            show: true,
+            title: "",
+            message: "Atributos de imagen guardados con éxito",
+            image: successIcon,
+          },
+        });
+      }
+    } catch (error) {
+      console.log(error);
+      dispatch({
+        type: "SET_ERRORS",
+        payload: [...state.errors, error],
+      });
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "Error",
+          message: "Hubo un error al guardar los atributos de imagen",
+          image: errorIcon,
+        },
+      });
+    } finally {
+      dispatch({ type: "SET_SAVING", payload: false });
+    }
+  };
+
   const handleOnDownloadImages = () => {
     const upc = state.product?.upc || state.product?.article?.upc;
     state.selected_images.length > 0
@@ -453,6 +543,7 @@ export const ProviderProductEditionProvider = ({ children }) => {
     saveDatasheets,
     saveDescriptions,
     updateImages,
+    saveImageAttrs,
     deleteImages,
     handleOnDownloadImages,
     createComment,

package/src/components/pages/RetailerProductEdition/context/reducers/active-state.js

@@ -37,6 +37,7 @@ export const ACTIVE_STATE_ACTIONS = {
   TOGGLE_CHECK_ALL_IMAGES: "TOGGLE_CHECK_ALL_IMAGES",
   TOGGLE_CHECKBOX_IMAGE: "TOGGLE_CHECKBOX_IMAGE",
   SET_MISSING_REQUIRED_FIELDS: "SET_MISSING_REQUIRED_FIELDS",
+  CHANGE_ATTR_VALUE: "CHANGE_ATTR_VALUE",
 };
 
 export const activeStateReducer = (state, action) => {
@@ -141,7 +142,7 @@ export const activeStateReducer = (state, action) => {
 
       // Paso 3. Buscar si ya existe dentro de updated_images_values
       const existingUpdatedIndex = state.updated_images_values.findIndex(
-        (img) => img.id === imageToUpdate.id
+        (img) => img.id === imageToUpdate.id,
       );
 
       // Paso 4. Actualizar el valor en images_values
@@ -152,7 +153,7 @@ export const activeStateReducer = (state, action) => {
               [attribute]: value,
               ...(attribute === "image_id" && { imageID: value }),
             }
-          : img
+          : img,
       );
 
       // Paso 5. Actualizar updated_images_values
@@ -180,7 +181,7 @@ export const activeStateReducer = (state, action) => {
       } else {
         // Si existe, actualizar su newValue
         newUpdatedImagesValues = state.updated_images_values.map((img, i) =>
-          i === existingUpdatedIndex ? { ...img, newValue: value } : img
+          i === existingUpdatedIndex ? { ...img, newValue: value } : img,
         );
 
         // Verificar si el nuevo valor es igual al valor original
@@ -202,7 +203,7 @@ export const activeStateReducer = (state, action) => {
         // Si el nuevo valor es igual al original, eliminar la imagen de updated_images_values
         if (isOriginalValue) {
           newUpdatedImagesValues = state.updated_images_values.filter(
-            (_, i) => i !== existingUpdatedIndex
+            (_, i) => i !== existingUpdatedIndex,
           );
         }
       }
@@ -238,7 +239,7 @@ export const activeStateReducer = (state, action) => {
             const selectedIdentifier = selected.image_id || selected.id;
             return imageIdentifier === selectedIdentifier;
           });
-        }
+        },
       );
 
       return {
@@ -282,6 +283,60 @@ export const activeStateReducer = (state, action) => {
       };
     }
 
+    case ACTIVE_STATE_ACTIONS.CHANGE_ATTR_VALUE: {
+      const { id, value } = action.payload;
+      const attrForImgs = state.images_values?.attrForImgs;
+
+      if (!attrForImgs?.general) return state;
+
+      const attrIndex = attrForImgs.general.findIndex((f) => f.id === id);
+      if (attrIndex === -1) return state;
+
+      const originalAttr = attrForImgs.general[attrIndex];
+
+      const updatedGeneral = attrForImgs.general.map((attr, i) =>
+        i === attrIndex ? { ...attr, value } : attr,
+      );
+
+      // Tracking de cambios en updated_attr_for_imgs
+      const existingIndex = state.updated_attr_for_imgs.findIndex(
+        (attr) => attr.attrId === id,
+      );
+
+      let newUpdatedAttrForImgs;
+      if (existingIndex === -1) {
+        // Agregar nuevo cambio con valor original
+        newUpdatedAttrForImgs = [
+          ...state.updated_attr_for_imgs,
+          { attrId: id, value, originalValue: originalAttr.value },
+        ];
+      } else {
+        // Actualizar valor existente
+        const updated = state.updated_attr_for_imgs.map((attr, i) =>
+          i === existingIndex ? { ...attr, value } : attr,
+        );
+        // Si el valor vuelve al original, eliminarlo del tracking
+        const originalValue = updated[existingIndex].originalValue;
+        if (String(value) === String(originalValue)) {
+          newUpdatedAttrForImgs = updated.filter((_, i) => i !== existingIndex);
+        } else {
+          newUpdatedAttrForImgs = updated;
+        }
+      }
+
+      return {
+        ...state,
+        images_values: {
+          ...state.images_values,
+          attrForImgs: {
+            ...attrForImgs,
+            general: updatedGeneral,
+          },
+        },
+        updated_attr_for_imgs: newUpdatedAttrForImgs,
+      };
+    }
+
     default: {
       return null;
     }

package/src/components/pages/RetailerProductEdition/context/reducers/inputs.js

@@ -2,12 +2,14 @@ export const inputsInitialState = {
   updated_datasheets_inputs: [],
   updated_descriptions_inputs: [],
   updated_images_values: [],
+  updated_attr_for_imgs: [],
 };
 
 export const INPUTS_ACTIONS = {
   SET_UPDATED_DATASHEETS_INPUTS: "SET_UPDATED_DATASHEETS_INPUTS",
   SET_UPDATED_DESCRIPTIONS_INPUTS: "SET_UPDATED_DESCRIPTIONS_INPUTS",
   SET_UPDATED_IMAGES_VALUES: "SET_UPDATED_IMAGES_VALUES",
+  SET_UPDATED_ATTR_FOR_IMGS: "SET_UPDATED_ATTR_FOR_IMGS",
   UPDATE_DESCRIPTIONS_INPUTS: "UPDATE_DESCRIPTIONS_INPUTS",
   UPDATE_DATASHEETS_INPUTS: "UPDATE_DATASHEETS_INPUTS",
 };
@@ -35,6 +37,13 @@ export const inputsReducer = (state, action) => {
       };
     }
 
+    case INPUTS_ACTIONS.SET_UPDATED_ATTR_FOR_IMGS: {
+      return {
+        ...state,
+        updated_attr_for_imgs: action.payload,
+      };
+    }
+
     case INPUTS_ACTIONS.UPDATE_DESCRIPTIONS_INPUTS: {
       // Validar que la posicion [0] de descriptions_inputs corresponda al retailer actual
       const retailerId = state.active_retailer.id_retailer;

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

@@ -75,6 +75,7 @@ const RetailerProductEditionView = ({
     saveDatasheets,
     saveDescriptions,
     updateImages,
+    saveImageAttrs,
     deleteImages,
     handleOnDownloadImages,
     createComment,
@@ -468,7 +469,11 @@ const RetailerProductEditionView = ({
   }, [state.active_retailer, state.product]);
 
   const handleOnChangeCurrentImage = (index) => {
-    dispatch({ type: "SET_CURRENT_IMAGE", payload: index });
+    if (typeof index === "number") {
+      dispatch({ type: "SET_CURRENT_IMAGE", payload: index });
+    } else if (typeof index === "object") {
+      dispatch({ type: "CHANGE_ATTR_VALUE", payload: index });
+    }
   };
 
   const handleOnShowModalGallery = () => {
@@ -586,7 +591,7 @@ const RetailerProductEditionView = ({
 
   const handleOnClickSaveImages = () => {
     if (state.product?.services?.images === 1) {
-      updateImages();
+      saveImageAttrs(token);
     }
   };