contentoh-components-library 21.6.12 → 21.6.14

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/global-files/data.js

@@ -297,9 +297,9 @@ exports.getNewStatus = getNewStatus;
 
 var getServicesData = /*#__PURE__*/function () {
   var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(_ref5) {
-    var _servicesResponse$dat;
+    var _servicesResponse$dat, _JSON$parse$data;
 
-    var articleId, orderId, end, token, servicesResponse;
+    var articleId, orderId, end, token, servicesResponse, body;
     return _regenerator.default.wrap(function _callee5$(_context5) {
       while (1) {
         switch (_context5.prev = _context5.next) {
@@ -319,9 +319,10 @@ var getServicesData = /*#__PURE__*/function () {
 
           case 3:
             servicesResponse = _context5.sent;
-            return _context5.abrupt("return", JSON.parse(servicesResponse === null || servicesResponse === void 0 ? void 0 : (_servicesResponse$dat = servicesResponse.data) === null || _servicesResponse$dat === void 0 ? void 0 : _servicesResponse$dat.body).data);
+            body = servicesResponse === null || servicesResponse === void 0 ? void 0 : (_servicesResponse$dat = servicesResponse.data) === null || _servicesResponse$dat === void 0 ? void 0 : _servicesResponse$dat.body;
+            return _context5.abrupt("return", body ? (_JSON$parse$data = JSON.parse(body).data) !== null && _JSON$parse$data !== void 0 ? _JSON$parse$data : [] : []);
 
-          case 5:
+          case 6:
           case "end":
             return _context5.stop();
         }

package/package.json

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

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

@@ -54,16 +54,6 @@ export const GeneralInput = ({
 
 }) => {
 
-  const parseOptionList = (list) => {
-    if (Array.isArray(list)) return list;
-    if (!list) return [];
-    try {
-      return JSON.parse(list);
-    } catch {
-      return String(list).split(",").map((s) => s.trim()).filter(Boolean);
-    }
-  };
-
   const {
     isCreators,
     suggestions,
@@ -221,7 +211,7 @@ export const GeneralInput = ({
           disabled={disabled}
         >
           <option value="">{description}</option>
-          {parseOptionList(optionList).map((element, index) => (
+          {JSON.parse(optionList || "[]").map((element, index) => (
             <option key={element + "-" + index} value={element}>
               {element}
             </option>

package/src/components/organisms/FullProductNameHeader/index.js

@@ -22,6 +22,7 @@ export const FullProductNameHeader = ({
   toggleObservation,
   // handleClickOutside,
   hideObservation,
+  showStatus = true,
 }) => {
   const [retailers, setRetailers] = useState([]);
   const [retailerIndex, setRetailerIndex] = useState(null);
@@ -45,13 +46,14 @@ export const FullProductNameHeader = ({
   };
 
   useEffect(() => {
-    const index =
-      headerData?.article?.categoryRetailer?.findIndex(
-        (retailer) => retailer?.id_retailer === activeRetailer?.id
-      ) ??
-      headerData?.categoryRetailer?.findIndex(
-        (retailer) => retailer?.retailer_id === activeRetailer?.id
-      );
+    const source =
+      headerData?.article?.categoryRetailer ||
+      headerData?.categoryRetailerInOrder ||
+      headerData?.categoryRetailer;
+
+    const index = source?.findIndex(
+      (retailer) => retailer?.id_retailer === activeRetailer?.id
+    ) ?? -1;
 
     setRetailerIndex(index);
   }, [activeRetailer]);
@@ -61,9 +63,11 @@ export const FullProductNameHeader = ({
       <ProductNameHeader
         productName={headerData?.article?.name || headerData?.name}
         statusType={
-          headerData?.version_status ||
-          headerData?.status ||
-          headerData?.article_status
+          showStatus
+            ? headerData?.version_status ||
+              headerData?.status ||
+              headerData?.article_status
+            : null
         }
         percentRequired={percent}
         percent={percent?.toFixed(0)}
@@ -89,11 +93,14 @@ export const FullProductNameHeader = ({
             },
             {
               feature: "Categoría",
-              value:
+              value: (
                 headerData?.article?.categoryRetailer?.[retailerIndex]
                   ?.category_name ||
-                headerData?.categoryRetailer?.[retailerIndex]?.categoryName ||
-                headerData.categoryName,
+                headerData?.categoryRetailerInOrder?.[retailerIndex]?.category ||
+                headerData?.categoryRetailer?.[retailerIndex]?.category ||
+                headerData.categoryName ||
+                ""
+              ).replace(/\|/g, " | "),
             },
             {
               feature: "Prov",