contentoh-components-library 21.6.13 → 21.6.15

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

@@ -33,12 +33,14 @@ var _genericModalCheck = _interopRequireDefault(require("../../../../assets/imag
 
 var _errorModal = _interopRequireDefault(require("../../../../assets/images/genericModal/errorModal.svg"));
 
+var _genericModalWarning = _interopRequireDefault(require("../../../../assets/images/genericModal/genericModalWarning.svg"));
+
 var _utils = require("../utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["src"],
-    _excluded2 = ["src"];
+var _excluded = ["src", "video_src"],
+    _excluded2 = ["src", "video_src"];
 var S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
 var REGION = "us-east-1";
 
@@ -310,23 +312,28 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
 
   var updateImages = /*#__PURE__*/function () {
     var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(token) {
-      var _state$images_values, _state$product7, _state$product8, _state$product9, _data$articleData, _data$updateImages;
+      var _state$images_values, _state$images_values$, _state$images_values2, _state$product7, _state$product8, _state$product9, _data$articleData, _data$updateImages;
 
-      var updatedImages, attrForImgs, generalAttrs, retailerKey, retailerAttrs, mergedAttrs, data, valid, promiseArray, res;
+      var newImages, updatedImages, attrForImgs, generalAttrs, retailerKey, retailerAttrs, mergedAttrs, data, valid, promiseArray, res;
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              if (!(state.updated_images_values.length === 0)) {
-                _context3.next = 2;
+              // Imágenes/videos recién agregados a la galería (aún sin id en BD).
+              newImages = ((_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : (_state$images_values$ = _state$images_values.values) === null || _state$images_values$ === void 0 ? void 0 : _state$images_values$.filter(function (e) {
+                return !e.id;
+              })) || []; // Salir solo si no hay nada que crear ni que actualizar.
+
+              if (!(state.updated_images_values.length === 0 && newImages.length === 0)) {
+                _context3.next = 3;
                 break;
               }
 
               return _context3.abrupt("return");
 
-            case 2:
+            case 3:
               updatedImages = state.updated_images_values;
-              attrForImgs = ((_state$images_values = state.images_values) === null || _state$images_values === void 0 ? void 0 : _state$images_values.attrForImgs) || {};
+              attrForImgs = ((_state$images_values2 = state.images_values) === null || _state$images_values2 === void 0 ? void 0 : _state$images_values2.attrForImgs) || {};
               generalAttrs = attrForImgs.general || [];
               retailerKey = Object.keys(attrForImgs).find(function (key) {
                 return key !== "general";
@@ -370,7 +377,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
               })); // console.log({ data });
 
               if (!valid) {
-                _context3.next = 37;
+                _context3.next = 38;
                 break;
               }
 
@@ -389,9 +396,9 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                   isApproved: true
                 });
               });
-              _context3.prev = 15;
+              _context3.prev = 16;
               promiseArray = data.articleData.map(function (e) {
-                var file = Buffer.from(e.src.replace(/^data:image\/\w+;base64,/, ""), "base64");
+                var file = e.ext === "mp4" ? Buffer.from((e.video_src || "").replace(/^data:video\/\w+;base64,/, ""), "base64") : Buffer.from(e.src.replace(/^data:image\/\w+;base64,/, ""), "base64");
                 var params = {
                   ACL: "public-read",
                   Body: file,
@@ -400,22 +407,24 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 };
                 return myBucket.putObject(params).promise();
               });
-              _context3.next = 19;
+              _context3.next = 20;
               return Promise.all(promiseArray);
 
-            case 19:
+            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,
+                    video_src = _ref5.video_src,
                     rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
                 return rest;
               });
               data.updateImages = data.updateImages.map(function (_ref6) {
                 var src = _ref6.src,
+                    video_src = _ref6.video_src,
                     rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
                 return rest;
               });
-              _context3.next = 23;
+              _context3.next = 24;
               return _axios.default.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
                 params: {
                   image: true,
@@ -426,7 +435,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 }
               });
 
-            case 23:
+            case 24:
               res = _context3.sent;
 
               if (res.data.statusCode === 200) {
@@ -447,12 +456,12 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 });
               }
 
-              _context3.next = 32;
+              _context3.next = 33;
               break;
 
-            case 27:
-              _context3.prev = 27;
-              _context3.t0 = _context3["catch"](15);
+            case 28:
+              _context3.prev = 28;
+              _context3.t0 = _context3["catch"](16);
               console.log(_context3.t0);
               dispatch({
                 type: "SET_ERRORS",
@@ -468,35 +477,35 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 }
               });
 
-            case 32:
-              _context3.prev = 32;
+            case 33:
+              _context3.prev = 33;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context3.finish(32);
+              return _context3.finish(33);
 
-            case 35:
-              _context3.next = 38;
+            case 36:
+              _context3.next = 39;
               break;
 
-            case 37:
+            case 38:
               dispatch({
                 type: "SET_MODAL",
                 payload: {
                   show: true,
                   title: "Campos incompletos o duplicados",
                   message: "Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma. Recuerda hay campos obligatorios y no podras avanzar si no estan completos.",
-                  image: warningIcon
+                  image: _genericModalWarning.default
                 }
               });
 
-            case 38:
+            case 39:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[15, 27, 32, 35]]);
+      }, _callee3, null, [[16, 28, 33, 36]]);
     }));
 
     return function updateImages(_x3) {
@@ -506,7 +515,7 @@ 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 _state$images_values$2, _state$images_values3, _state$images_values4, _state$product10, _state$product11, _state$product12;
 
       var activeImage, attrForImgs, data, _state$product13, _state$product14, res;
 
@@ -527,7 +536,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 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$ : [];
+              attrForImgs = (_state$images_values$2 = (_state$images_values3 = state.images_values) === null || _state$images_values3 === void 0 ? void 0 : (_state$images_values4 = _state$images_values3.attrForImgs) === null || _state$images_values4 === void 0 ? void 0 : _state$images_values4.general) !== null && _state$images_values$2 !== void 0 ? _state$images_values$2 : [];
               data = {
                 articleId: (_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.id_article,
                 attrReqImgs: attrForImgs.map(function (e) {
@@ -620,14 +629,14 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
   }();
 
   var handleOnDownloadImages = function handleOnDownloadImages() {
-    var _state$product15, _state$product16, _state$product16$arti, _state$images_values4, _state$images_values5;
+    var _state$product15, _state$product16, _state$product16$arti, _state$images_values5, _state$images_values6;
 
     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_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) {
+    }) : (_state$images_values5 = state.images_values) === null || _state$images_values5 === void 0 ? void 0 : (_state$images_values6 = _state$images_values5.values) === null || _state$images_values6 === void 0 ? void 0 : _state$images_values6.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));
       }

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

@@ -17,10 +17,10 @@ var _objectSpread5 = _interopRequireDefault(require("@babel/runtime/helpers/esm/
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
 var _react = require("react");
 
 var _axios = _interopRequireDefault(require("axios"));
@@ -89,6 +89,8 @@ var _styles = require("./styles");
 
 var _Commentary = require("../../atoms/Commentary");
 
+var _generateThumnail = _interopRequireDefault(require("./generateThumnail"));
+
 var _AiProductEdition = require("../../../contexts/AiProductEdition");
 
 var _ChangeStatusModal = _interopRequireDefault(require("../../organisms/ChangeStatusModal"));
@@ -104,6 +106,127 @@ var allowedAccountsToViewChangeStatus = ["mperez@contentoh.com", "gmorales@conte
 "ladiboh785@mi166.com" //QA
 ];
 
+function obtenerDuracionVideoBase64(base64Data) {
+  return new Promise(function (resolve, reject) {
+    var video = document.createElement("video");
+    video.src = base64Data;
+    video.addEventListener("loadedmetadata", function () {
+      resolve(video.duration);
+    });
+    video.addEventListener("error", reject);
+  });
+}
+
+function convertirVideoABase64(url) {
+  return new Promise(function (resolve, reject) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", url, true);
+    xhr.responseType = "blob";
+
+    xhr.onload = function () {
+      if (xhr.status === 200) {
+        var blob = xhr.response;
+        var reader = new FileReader();
+
+        reader.onloadend = function () {
+          resolve(reader.result);
+        };
+
+        reader.readAsDataURL(blob);
+      } else {
+        reject(new Error("Error al cargar el video"));
+      }
+    };
+
+    xhr.onerror = function () {
+      reject(new Error("Error de red al cargar el video"));
+    };
+
+    xhr.send();
+  });
+} // Para videos ya guardados, `getImage` deja en `src` una URL del
+// redimensionador de imágenes que no sirve para mp4. Descargamos el video
+// desde S3 (srcDB) y generamos un thumbnail JPEG para mostrarlo en la galería.
+
+
+function regenerateVideoThumbnails(_x) {
+  return _regenerateVideoThumbnails.apply(this, arguments);
+}
+
+function _regenerateVideoThumbnails() {
+  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(values) {
+    return _regenerator.default.wrap(function _callee15$(_context15) {
+      while (1) {
+        switch (_context15.prev = _context15.next) {
+          case 0:
+            if (Array.isArray(values)) {
+              _context15.next = 2;
+              break;
+            }
+
+            return _context15.abrupt("return", values);
+
+          case 2:
+            return _context15.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
+              var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(value) {
+                var base64, videoSrc, thumbnail;
+                return _regenerator.default.wrap(function _callee14$(_context14) {
+                  while (1) {
+                    switch (_context14.prev = _context14.next) {
+                      case 0:
+                        if (!((value === null || value === void 0 ? void 0 : value.ext) !== "mp4" || !(value !== null && value !== void 0 && value.srcDB))) {
+                          _context14.next = 2;
+                          break;
+                        }
+
+                        return _context14.abrupt("return", value);
+
+                      case 2:
+                        _context14.prev = 2;
+                        _context14.next = 5;
+                        return convertirVideoABase64("https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + value.srcDB);
+
+                      case 5:
+                        base64 = _context14.sent;
+                        videoSrc = "data:video/mp4;base64," + base64.split(",")[1];
+                        _context14.next = 9;
+                        return (0, _generateThumnail.default)(videoSrc, 2);
+
+                      case 9:
+                        thumbnail = _context14.sent;
+                        return _context14.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
+                          src: thumbnail
+                        }));
+
+                      case 13:
+                        _context14.prev = 13;
+                        _context14.t0 = _context14["catch"](2);
+                        console.error("Error al generar thumbnail del video:", _context14.t0);
+                        return _context14.abrupt("return", value);
+
+                      case 17:
+                      case "end":
+                        return _context14.stop();
+                    }
+                  }
+                }, _callee14, null, [[2, 13]]);
+              }));
+
+              return function (_x8) {
+                return _ref17.apply(this, arguments);
+              };
+            }())));
+
+          case 3:
+          case "end":
+            return _context15.stop();
+        }
+      }
+    }, _callee15);
+  }));
+  return _regenerateVideoThumbnails.apply(this, arguments);
+}
+
 var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   var _location$state, _location$state2, _state$active_retaile4, _state$active_retaile5, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product8, _state$active_retaile6, _state$active_retaile7, _state$active_retaile8, _state$active_retaile9, _state$product9, _state$product10, _state$product11, _state$datasheets_inp, _state$datasheets_inp2, _state$product12, _state$images_values12, _state$comment;
 
@@ -209,7 +332,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       setCompare = _useState30[1];
 
   var _useDropzone = (0, _reactDropzone.useDropzone)({
-    accept: "image/*",
+    accept: "image/*, video/mp4",
     noKeyboard: true,
     multiple: true,
     noClick: true,
@@ -220,7 +343,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
         reader.onload = /*#__PURE__*/function () {
           var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-            var fileName, fileExtension, fileDataURL, img;
+            var fileName, fileExtension, fileDataURL, img, duracion;
             return _regenerator.default.wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
@@ -229,6 +352,71 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                     fileExtension = fileName.split(".").pop();
                     fileDataURL = e.target.result;
                     img = new Image();
+
+                    if (!(fileExtension === "mp4")) {
+                      _context.next = 22;
+                      break;
+                    }
+
+                    _context.prev = 5;
+                    _context.next = 8;
+                    return obtenerDuracionVideoBase64(fileDataURL);
+
+                  case 8:
+                    duracion = _context.sent;
+
+                    if (!(duracion <= 10 || duracion >= 600)) {
+                      _context.next = 12;
+                      break;
+                    }
+
+                    dispatch({
+                      type: "SET_MODAL",
+                      payload: {
+                        show: true,
+                        title: "Hubo un error al subir el video",
+                        message: "Los videos deben durar entre 15 segundos y 10 minutos",
+                        image: _errorModal.default
+                      }
+                    });
+                    return _context.abrupt("return");
+
+                  case 12:
+                    _context.next = 14;
+                    return (0, _generateThumnail.default)(fileDataURL, 2);
+
+                  case 14:
+                    img.src = _context.sent;
+
+                    img.onload = function () {
+                      var newImg = {
+                        src: img.src,
+                        name: fileName,
+                        ext: fileExtension,
+                        width: img.width,
+                        height: img.height,
+                        video_src: fileDataURL,
+                        isApproved: true // VALIDAR QUE SOLO SEA PARA RADIOSHACK
+
+                      };
+                      dispatch({
+                        type: "ADD_IMAGE_VALUE",
+                        payload: newImg
+                      });
+                    };
+
+                    _context.next = 21;
+                    break;
+
+                  case 18:
+                    _context.prev = 18;
+                    _context.t0 = _context["catch"](5);
+                    console.error("Error al obtener la duración del video:", _context.t0);
+
+                  case 21:
+                    return _context.abrupt("return");
+
+                  case 22:
                     img.src = fileDataURL;
 
                     img.onload = function () {
@@ -240,6 +428,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                         ext: fileExtension,
                         width: width,
                         height: height,
+                        video_src: "",
                         isApproved: true // VALIDAR QUE SOLO SEA PARA RADIOSHACK
 
                       };
@@ -249,15 +438,15 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                       });
                     };
 
-                  case 6:
+                  case 24:
                   case "end":
                     return _context.stop();
                 }
               }
-            }, _callee);
+            }, _callee, null, [[5, 18]]);
           }));
 
-          return function (_x) {
+          return function (_x2) {
             return _ref2.apply(this, arguments);
           };
         }();
@@ -507,6 +696,8 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           datasheetsActiveRetailer,
           descriptionsActiveRetailer,
           filteredValues,
+          orderedValuesWithThumbs,
+          filteredValuesWithThumbs,
           _args4 = arguments;
 
       return _regenerator.default.wrap(function _callee4$(_context4) {
@@ -602,7 +793,8 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               dispatch({
                 type: "SET_COMMENTS",
                 payload: commentsMap
-              }); // Ordenamiento de imágenes
+              });
+              console.log("services", services); // Ordenamiento de imágenes
 
               orderMap = services[2].inputsByRetailer.flat().reduce(function (acc, item) {
                 acc[item.id_image] = item.order;
@@ -629,15 +821,26 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                     return input.id_retailer === id_retailer && input.id_image === value.image_id;
                   });
                 });
-              }); // Dispatch consolidado
+              }); // Regenerar thumbnails de videos guardados para que se muestren.
+
+              _context4.next = 30;
+              return regenerateVideoThumbnails(orderedValues);
 
+            case 30:
+              orderedValuesWithThumbs = _context4.sent;
+              _context4.next = 33;
+              return regenerateVideoThumbnails(filteredValues);
+
+            case 33:
+              filteredValuesWithThumbs = _context4.sent;
+              // Dispatch consolidado
               dispatch({
                 type: "SET_SERVICES",
                 payload: {
                   datasheets: services[0],
                   descriptions: services[1],
                   images: (0, _objectSpread5.default)((0, _objectSpread5.default)({}, services[2]), {}, {
-                    values: orderedValues
+                    values: orderedValuesWithThumbs
                   })
                 }
               });
@@ -668,7 +871,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               dispatch({
                 type: "SET_IMAGES_VALUES",
                 payload: (0, _objectSpread5.default)((0, _objectSpread5.default)({}, services[2]), {}, {
-                  values: filteredValues
+                  values: filteredValuesWithThumbs
                 })
               }); // Calcular campos requeridos sin valor
 
@@ -681,11 +884,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 loadAuditableData();
               }
 
-              _context4.next = 42;
+              _context4.next = 49;
               break;
 
-            case 38:
-              _context4.prev = 38;
+            case 45:
+              _context4.prev = 45;
               _context4.t0 = _context4["catch"](2);
               console.log("Error loading data: ", _context4.t0);
               dispatch({
@@ -693,20 +896,20 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 payload: [_context4.t0.message]
               });
 
-            case 42:
-              _context4.prev = 42;
+            case 49:
+              _context4.prev = 49;
               dispatch({
                 type: "SET_LOADING",
                 payload: false
               });
-              return _context4.finish(42);
+              return _context4.finish(49);
 
-            case 45:
+            case 52:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[2, 38, 42, 45]]);
+      }, _callee4, null, [[2, 45, 49, 52]]);
     }));
 
     return function loadData() {
@@ -1223,7 +1426,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       }, _callee7, null, [[11, 36, 40, 43]]);
     }));
 
-    return function sendSingleEvaluation(_x2) {
+    return function sendSingleEvaluation(_x3) {
       return _ref10.apply(this, arguments);
     };
   }();
@@ -1371,7 +1574,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       }, _callee9, null, [[1, 16, 19, 22]]);
     }));
 
-    return function sendBulkEvaluation(_x3) {
+    return function sendBulkEvaluation(_x4) {
       return _ref12.apply(this, arguments);
     };
   }();
@@ -1417,7 +1620,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       }, _callee10);
     }));
 
-    return function handleOnChangeAssignations(_x4, _x5) {
+    return function handleOnChangeAssignations(_x5, _x6) {
       return _ref13.apply(this, arguments);
     };
   }();
@@ -1500,7 +1703,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       }, _callee11, null, [[2, 8]]);
     }));
 
-    return function handleOnSubmitComment(_x6) {
+    return function handleOnSubmitComment(_x7) {
       return _ref14.apply(this, arguments);
     };
   }();
@@ -1562,7 +1765,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnChangeProductVersion = function handleOnChangeProductVersion(version) {
-    console.log('se cambia la version');
+    console.log("se cambia la version");
     dispatch({
       type: "SET_PRODUCT_VERSION",
       payload: version

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

@@ -209,6 +209,10 @@ exports.translateConcept = translateConcept;
 
 var getStatusArrayByRole = function getStatusArrayByRole(idRole) {
   switch (idRole) {
+    // Admin: puede validar/rechazar en cualquier estado operable (unión de todos los roles).
+    case 1:
+      return ["PA", "AS", "CA", "RC", "RA", "RP", "RCA", "AC", "AA", "AP", "ACA"];
+
     case 7:
     case 8:
       return ["PA", "AS", "CA", "RC", "RA", "RP", "RCA"];

package/package.json

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

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

@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from "uuid";
 
 import successIcon from "../../../../assets/images/genericModal/genericModalCheck.svg";
 import errorIcon from "../../../../assets/images/genericModal/errorModal.svg";
+import warningIcon from "../../../../assets/images/genericModal/genericModalWarning.svg";
 import { getConceptByTab } from "../utils";
 
 const S3_BUCKET = process.env.REACT_APP_IMAGES_BUCKET;
@@ -230,7 +231,11 @@ export const ProviderProductEditionProvider = ({ children }) => {
   };
 
   const updateImages = async (token) => {
-    if (state.updated_images_values.length === 0) return;
+    // Imágenes/videos recién agregados a la galería (aún sin id en BD).
+    const newImages = state.images_values?.values?.filter((e) => !e.id) || [];
+    // Salir solo si no hay nada que crear ni que actualizar.
+    if (state.updated_images_values.length === 0 && newImages.length === 0)
+      return;
     const updatedImages = state.updated_images_values;
 
     const attrForImgs = state.images_values?.attrForImgs || {};
@@ -282,10 +287,16 @@ export const ProviderProductEditionProvider = ({ children }) => {
 
       try {
         const promiseArray = data.articleData.map((e) => {
-          const file = Buffer.from(
-            e.src.replace(/^data:image\/\w+;base64,/, ""),
-            "base64",
-          );
+          const file =
+            e.ext === "mp4"
+              ? Buffer.from(
+                  (e.video_src || "").replace(/^data:video\/\w+;base64,/, ""),
+                  "base64",
+                )
+              : Buffer.from(
+                  e.src.replace(/^data:image\/\w+;base64,/, ""),
+                  "base64",
+                );
           const params = {
             ACL: "public-read",
             Body: file,
@@ -298,8 +309,12 @@ 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);
+        data.articleData = data.articleData.map(
+          ({ src, video_src, ...rest }) => rest,
+        );
+        data.updateImages = data.updateImages.map(
+          ({ src, video_src, ...rest }) => rest,
+        );
 
         const res = await axios.put(
           process.env.REACT_APP_ARTICLE_DATA_ENDPOINT,

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

@@ -60,6 +60,7 @@ import imagesSent from "../../../assets/images/modalsSVGs/uploadingImages.svg";
 
 import { Container } from "./styles";
 import { Commentary } from "../../atoms/Commentary";
+import generateThumbnail from "./generateThumnail";
 
 import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
 import ChangeStatusModal from "../../organisms/ChangeStatusModal";
@@ -80,9 +81,69 @@ const allowedAccountsToViewChangeStatus = [
   "kikije1467@mtlcz.com", //IMÁGENES
   "karafe3218@mom2kid.com", //TEXTOS
   "ladiboh785@mi166.com", //QA
-
 ];
 
+function obtenerDuracionVideoBase64(base64Data) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.src = base64Data;
+    video.addEventListener("loadedmetadata", () => {
+      resolve(video.duration);
+    });
+    video.addEventListener("error", reject);
+  });
+}
+
+function convertirVideoABase64(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", url, true);
+    xhr.responseType = "blob";
+    xhr.onload = function () {
+      if (xhr.status === 200) {
+        const blob = xhr.response;
+        const reader = new FileReader();
+        reader.onloadend = function () {
+          resolve(reader.result);
+        };
+        reader.readAsDataURL(blob);
+      } else {
+        reject(new Error("Error al cargar el video"));
+      }
+    };
+    xhr.onerror = function () {
+      reject(new Error("Error de red al cargar el video"));
+    };
+    xhr.send();
+  });
+}
+
+// Para videos ya guardados, `getImage` deja en `src` una URL del
+// redimensionador de imágenes que no sirve para mp4. Descargamos el video
+// desde S3 (srcDB) y generamos un thumbnail JPEG para mostrarlo en la galería.
+async function regenerateVideoThumbnails(values) {
+  if (!Array.isArray(values)) return values;
+  return Promise.all(
+    values.map(async (value) => {
+      if (value?.ext !== "mp4" || !value?.srcDB) return value;
+      try {
+        const base64 = await convertirVideoABase64(
+          "https://" +
+            process.env.REACT_APP_IMAGES_BUCKET +
+            ".s3.amazonaws.com/" +
+            value.srcDB,
+        );
+        const videoSrc = "data:video/mp4;base64," + base64.split(",")[1];
+        const thumbnail = await generateThumbnail(videoSrc, 2);
+        return { ...value, src: thumbnail };
+      } catch (error) {
+        console.error("Error al generar thumbnail del video:", error);
+        return value;
+      }
+    }),
+  );
+}
+
 const RetailerProductEditionView = ({
   tabsSections,
   productSelected = {},
@@ -124,7 +185,7 @@ const RetailerProductEditionView = ({
 
   const [compare, setCompare] = useState(false);
   const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-    accept: "image/*",
+    accept: "image/*, video/mp4",
     noKeyboard: true,
     multiple: true,
     noClick: true,
@@ -139,8 +200,48 @@ const RetailerProductEditionView = ({
           const fileDataURL = e.target.result;
 
           const img = new Image();
-          img.src = fileDataURL;
 
+          if (fileExtension === "mp4") {
+            try {
+              const duracion = await obtenerDuracionVideoBase64(fileDataURL);
+              if (duracion <= 10 || duracion >= 600) {
+                dispatch({
+                  type: "SET_MODAL",
+                  payload: {
+                    show: true,
+                    title: "Hubo un error al subir el video",
+                    message:
+                      "Los videos deben durar entre 15 segundos y 10 minutos",
+                    image: errorIcon,
+                  },
+                });
+                return;
+              }
+
+              img.src = await generateThumbnail(fileDataURL, 2);
+              img.onload = function () {
+                const newImg = {
+                  src: img.src,
+                  name: fileName,
+                  ext: fileExtension,
+                  width: img.width,
+                  height: img.height,
+                  video_src: fileDataURL,
+                  isApproved: true, // VALIDAR QUE SOLO SEA PARA RADIOSHACK
+                };
+
+                dispatch({
+                  type: "ADD_IMAGE_VALUE",
+                  payload: newImg,
+                });
+              };
+            } catch (error) {
+              console.error("Error al obtener la duración del video:", error);
+            }
+            return;
+          }
+
+          img.src = fileDataURL;
           img.onload = function () {
             const width = img.width;
             const height = img.height;
@@ -150,6 +251,7 @@ const RetailerProductEditionView = ({
               ext: fileExtension,
               width: width,
               height: height,
+              video_src: "",
               isApproved: true, // VALIDAR QUE SOLO SEA PARA RADIOSHACK
             };
 
@@ -220,11 +322,13 @@ const RetailerProductEditionView = ({
 
   const initializeProduct = async () => {
     try {
-      const product = productSelected ? productSelected : JSON.parse(sessionStorage.getItem("productSelected"));
+      const product = productSelected
+        ? productSelected
+        : JSON.parse(sessionStorage.getItem("productSelected"));
 
       const productNormalized = normalizeProduct(product);
 
-      console.log({productNormalized});
+      console.log({ productNormalized });
 
       dispatch({
         type: "SET_PRODUCT",
@@ -401,6 +505,8 @@ const RetailerProductEditionView = ({
       });
       dispatch({ type: "SET_COMMENTS", payload: commentsMap });
 
+      console.log("services", services);
+
       // Ordenamiento de imágenes
       const orderMap = services[2].inputsByRetailer
         .flat()
@@ -436,6 +542,12 @@ const RetailerProductEditionView = ({
         );
       });
 
+      // Regenerar thumbnails de videos guardados para que se muestren.
+      const orderedValuesWithThumbs =
+        await regenerateVideoThumbnails(orderedValues);
+      const filteredValuesWithThumbs =
+        await regenerateVideoThumbnails(filteredValues);
+
       // Dispatch consolidado
       dispatch({
         type: "SET_SERVICES",
@@ -444,7 +556,7 @@ const RetailerProductEditionView = ({
           descriptions: services[1],
           images: {
             ...services[2],
-            values: orderedValues,
+            values: orderedValuesWithThumbs,
           },
         },
       });
@@ -473,7 +585,7 @@ const RetailerProductEditionView = ({
         type: "SET_IMAGES_VALUES",
         payload: {
           ...services[2],
-          values: filteredValues,
+          values: filteredValuesWithThumbs,
         },
       });
 
@@ -750,10 +862,11 @@ const RetailerProductEditionView = ({
         );
 
         const newStatuses = JSON.parse(res.data.body);
-        const serviceStatus = newStatuses.newServiceStatus[articleId][`${concept}Status`];
+        const serviceStatus =
+          newStatuses.newServiceStatus[articleId][`${concept}Status`];
         const articleStatus = newStatuses.newArticleStatus[articleId];
 
-        console.log({newStatuses});
+        console.log({ newStatuses });
 
         // Actualizar el producto con los nuevos estados
         const updatedStatusByRetailer = state.product.statusByRetailer.map(
@@ -782,7 +895,8 @@ const RetailerProductEditionView = ({
             image: successIcon,
           },
         });
-      } else { //Caso del botón "Enviar evaluación"
+      } else {
+        //Caso del botón "Enviar evaluación"
 
         //Se construye el mensaje y se actualiza el estatus
 
@@ -809,12 +923,13 @@ const RetailerProductEditionView = ({
       }
 
       if (res.data.statusCode === 200) {
-
-        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse( res.data.body );
+        const { newStatus, newOrderStatus, newArticleStatus } = JSON.parse(
+          res.data.body,
+        );
 
         const articleStatus = newArticleStatus[articleId];
 
-        console.log({newArticleStatus});
+        console.log({ newArticleStatus });
 
         // const retailers = state.product.categoryRetailer.map((r) => ({
         //   id: r.id_retailer,
@@ -840,12 +955,13 @@ const RetailerProductEditionView = ({
         // };
         // await sendMessage(messageData);
 
-        const updatedStatusByRetailerForSend = state.product.statusByRetailer.map((item) => {
-          if (item.retailer_id === retailerId && item.service === concept) {
-            return { ...item, status: newStatus };
-          }
-          return item;
-        });
+        const updatedStatusByRetailerForSend =
+          state.product.statusByRetailer.map((item) => {
+            if (item.retailer_id === retailerId && item.service === concept) {
+              return { ...item, status: newStatus };
+            }
+            return item;
+          });
 
         const updatedProduct = {
           ...state.product,
@@ -856,9 +972,12 @@ const RetailerProductEditionView = ({
 
         //Actualizamos el services_data en el servicio específico del retailer actual
 
-        const updatedServicesData = state.services_data?.map(service => ({
+        const updatedServicesData = state.services_data?.map((service) => ({
           ...service,
-          status: service?.id_retailer === retailerId && service?.service === concept ? newStatus : service?.status
+          status:
+            service?.id_retailer === retailerId && service?.service === concept
+              ? newStatus
+              : service?.status,
         }));
 
         const sessionProduct = sessionStorage.getItem("productSelected");
@@ -929,11 +1048,18 @@ const RetailerProductEditionView = ({
       const conceptArray = getConceptsByRole(user.id_role);
 
       state.services_data?.forEach((ret, idx) => {
-        const { service: retailer_service, id_retailer, status: status_retailer_service } = ret;
+        const {
+          service: retailer_service,
+          id_retailer,
+          status: status_retailer_service,
+        } = ret;
 
         const lastStatusLevel = status_retailer_service?.replace(/.*\//, "");
 
-        if (conceptArray.includes(retailer_service) && statusArray?.includes(lastStatusLevel)) {
+        if (
+          conceptArray.includes(retailer_service) &&
+          statusArray?.includes(lastStatusLevel)
+        ) {
           const data = {
             articleId: state.product.id_article,
             orderId: state.product.id_order,
@@ -981,7 +1107,11 @@ const RetailerProductEditionView = ({
         payload: updatedProduct,
       });
 
-      const updatedServicesData = state.services_data.map(service => conceptArray.includes(service.service) ? { ...service, status: status } : service);
+      const updatedServicesData = state.services_data.map((service) =>
+        conceptArray.includes(service.service)
+          ? { ...service, status: status }
+          : service,
+      );
 
       dispatch({
         type: "SET_SERVICES_DATA",
@@ -1142,8 +1272,9 @@ const RetailerProductEditionView = ({
     switch (id_rol) {
       case 7:
       case 8:
-
-        const canSendEvaluation = statusArray.includes(statusBySelectedRetailerService);
+        const canSendEvaluation = statusArray.includes(
+          statusBySelectedRetailerService,
+        );
 
         // const conditionTwo = statusArray.includes(product?.status);
 
@@ -1180,7 +1311,7 @@ const RetailerProductEditionView = ({
   };
 
   const handleOnChangeProductVersion = (version) => {
-    console.log('se cambia la version')
+    console.log("se cambia la version");
     dispatch({
       type: "SET_PRODUCT_VERSION",
       payload: version,
@@ -1310,12 +1441,12 @@ const RetailerProductEditionView = ({
             </Box>
           </div>
         </div>
-      </Container> 
+      </Container>
     );
   };
 
   useEffect(() => {
-    console.log({stateProduct: state.product})
+    console.log({ stateProduct: state.product });
   }, [state.product]);
 
   if (state.loading || !state.services || !state.product)
@@ -1789,16 +1920,16 @@ const RetailerProductEditionView = ({
                   )}
 
                   <div className="action-buttons">
-                    {
-                      allowedAccountsToViewChangeStatus.includes(user?.email) && (
-                        <Button
-                          buttonType={"general-pink-button"}
-                          label={"Cambio de Estatus"}
-                          onClick={() => setOpenChangeStatusModal(true)}
-                          id="button-change-status"
-                        />
-                      )
-                    }
+                    {allowedAccountsToViewChangeStatus.includes(
+                      user?.email,
+                    ) && (
+                      <Button
+                        buttonType={"general-pink-button"}
+                        label={"Cambio de Estatus"}
+                        onClick={() => setOpenChangeStatusModal(true)}
+                        id="button-change-status"
+                      />
+                    )}
                     {[7, 8].includes(user.id_role) && (
                       <Button
                         buttonType={

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

@@ -154,6 +154,21 @@ export const translateConcept = (concept) => CONCEPT_TO_TAB[concept];
 
 export const getStatusArrayByRole = (idRole) => {
   switch (idRole) {
+    // Admin: puede validar/rechazar en cualquier estado operable (unión de todos los roles).
+    case 1:
+      return [
+        "PA",
+        "AS",
+        "CA",
+        "RC",
+        "RA",
+        "RP",
+        "RCA",
+        "AC",
+        "AA",
+        "AP",
+        "ACA",
+      ];
     case 7:
     case 8:
       return ["PA", "AS", "CA", "RC", "RA", "RP", "RCA"];