contentoh-components-library 21.6.55 → 21.6.56

package/dist/components/organisms/DigitalAssetsTray/index.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DigitalAssetsTray = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _reactDropzone = require("react-dropzone");
+
+var _styles = require("./styles");
+
+var _GalleryAssetElement = require("../../molecules/GalleryAssetElement");
+
+var _GalleryHeader = require("../../molecules/GalleryHeader");
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var CHECK_ALL_ID = "check-all-assets";
+var ITEM_SELECTOR = "[id^='gallery-asset-']";
+/**
+ * Bandeja de activos digitales: soltar archivos, verlos, reetiquetarlos y
+ * quitarlos.
+ *
+ * Tiene su propio dropzone en vez de compartir el de las imágenes porque los
+ * formatos aceptados son distintos: mezclarlos dejaría soltar un PDF sobre la
+ * bandeja de fotos y un JPG sobre la de activos.
+ *
+ * No guarda ni sube nada. Recibe el estado ya armado por `useDigitalAssets`,
+ * así que cuando se defina el contrato del backend solo hay que conectarle las
+ * llamadas; la interfaz no cambia.
+ */
+
+var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
+  var _ref$assets = _ref.assets,
+      assets = _ref$assets === void 0 ? [] : _ref$assets,
+      _ref$notices = _ref.notices,
+      notices = _ref$notices === void 0 ? [] : _ref$notices,
+      _ref$unsaved = _ref.unsaved,
+      unsaved = _ref$unsaved === void 0 ? {
+    nuevos: 0,
+    modificados: 0,
+    borrados: 0,
+    total: 0
+  } : _ref$unsaved,
+      _ref$remaining = _ref.remaining,
+      remaining = _ref$remaining === void 0 ? _assetTypes.MAX_ASSETS_PER_PRODUCT : _ref$remaining,
+      addFiles = _ref.addFiles,
+      removeAsset = _ref.removeAsset,
+      changeAssetType = _ref.changeAssetType,
+      clearNotices = _ref.clearNotices,
+      _ref$selectedAssets = _ref.selectedAssets,
+      selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
+      setSelectedAssets = _ref.setSelectedAssets,
+      setCheckAll = _ref.setCheckAll,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$emptyMessage = _ref.emptyMessage,
+      emptyMessage = _ref$emptyMessage === void 0 ? "Este producto no tiene activos digitales" : _ref$emptyMessage;
+
+  var _useDropzone = (0, _reactDropzone.useDropzone)({
+    accept: (0, _assetTypes.buildDropzoneAccept)(),
+    noKeyboard: true,
+    multiple: true,
+    noClick: true,
+    disabled: readOnly,
+    onDrop: function onDrop(acceptedFiles) {
+      return addFiles === null || addFiles === void 0 ? void 0 : addFiles(acceptedFiles);
+    }
+  }),
+      getRootProps = _useDropzone.getRootProps,
+      getInputProps = _useDropzone.getInputProps,
+      isDragActive = _useDropzone.isDragActive,
+      open = _useDropzone.open;
+
+  var noticesBy = function noticesBy(level) {
+    return notices.filter(function (item) {
+      return item.level === level;
+    });
+  };
+  /*
+    Se desglosa en vez de mostrar solo el número: "3 cambios sin guardar" no le
+    dice al usuario qué perdería si se va, y no es lo mismo dejar sin guardar un
+    borrado que un archivo nuevo.
+  */
+
+
+  var detalleSinGuardar = [unsaved.nuevos && "".concat(unsaved.nuevos, " nuevo").concat(unsaved.nuevos > 1 ? "s" : ""), unsaved.modificados && "".concat(unsaved.modificados, " modificado").concat(unsaved.modificados > 1 ? "s" : ""), unsaved.borrados && "".concat(unsaved.borrados, " por borrar")].filter(Boolean).join(" · ");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-toolbar",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        className: "tray-hint",
+        title: "Formatos permitidos: ".concat((0, _assetTypes.acceptedFormatsLabel)()),
+        children: ["Arrastra aqu\xED videos, 360, GIF, documentos, hojas de c\xE1lculo o archivos editables. Quedan ", remaining, " de ", _assetTypes.MAX_ASSETS_PER_PRODUCT, "."]
+      }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        label: "Agregar activos",
+        type: "pink",
+        size: 12,
+        onClick: open
+      })]
+    }), unsaved.total > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-unsaved",
+      role: "status",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "tray-unsaved-dot"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("strong", {
+          children: [unsaved.total, " cambio", unsaved.total > 1 ? "s" : "", " sin guardar"]
+        }), detalleSinGuardar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: "tray-unsaved-detail",
+          children: [" \u2014 ", detalleSinGuardar]
+        })]
+      })]
+    }), noticesBy("error").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-notice tray-notice-error",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tray-notice-head",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["No se pudieron agregar ", noticesBy("error").length, " archivo(s):"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: clearNotices,
+          title: "Cerrar",
+          children: "\xD7"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: noticesBy("error").map(function (item, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: item.message
+          }, "err-".concat(item.name, "-").concat(index));
+        })
+      })]
+    }), noticesBy("warning").length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "tray-notice tray-notice-warning",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tray-notice-head",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Se agregaron, pero ten en cuenta:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          onClick: clearNotices,
+          title: "Cerrar",
+          children: "\xD7"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        children: noticesBy("warning").map(function (item, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: item.message
+          }, "warn-".concat(item.name, "-").concat(index));
+        })
+      })]
+    }), !gridLayout && assets.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
+      variant: "asset",
+      checkAllId: CHECK_ALL_ID,
+      itemSelector: ITEM_SELECTOR,
+      setCheckAll: setCheckAll,
+      setSelectedImages: setSelectedAssets
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRootProps({
+      className: "dropzone ".concat(isDragActive ? "drag-active" : "").trim()
+    })), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2.default)({}, getInputProps())), isDragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "drag-overlay",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: "Suelta los activos aqu\xED"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("aside", {
+        className: gridLayout ? "tray-grid" : "tray-rows",
+        children: assets.map(function (asset, index) {
+          var _asset$id;
+
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryAssetElement.GalleryAssetElement, {
+            asset: asset,
+            index: index,
+            gridLayout: gridLayout,
+            checkAllId: CHECK_ALL_ID,
+            itemSelector: ITEM_SELECTOR,
+            selectedAssets: selectedAssets,
+            setSelectedAssets: setSelectedAssets,
+            setCheckAll: setCheckAll,
+            changeAsset: function changeAsset(_ref2) {
+              var value = _ref2.value;
+              return changeAssetType === null || changeAssetType === void 0 ? void 0 : changeAssetType(index, value);
+            },
+            onRemove: removeAsset,
+            readOnly: readOnly
+          }, (_asset$id = asset.id) !== null && _asset$id !== void 0 ? _asset$id : asset.tempId);
+        })
+      }), assets.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "tray-empty",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: emptyMessage
+        }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: "tray-empty-hint",
+          children: "Arr\xE1stralos aqu\xED o usa \xABAgregar activos\xBB."
+        })]
+      })]
+    }))]
+  });
+};
+
+exports.DigitalAssetsTray = DigitalAssetsTray;

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+/* El dropzone replica el de la bandeja de imágenes para que arrastrar se sienta
+   igual en las dos. */
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  .tray-toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n\n  .tray-hint {\n    margin: 0;\n    font-family: ", ";\n    font-size: 12px;\n    line-height: 18px;\n    color: ", ";\n  }\n\n  /*\n    Aviso de cambios sin guardar. Va arriba del listado y no junto al bot\xF3n de\n    guardar, que vive en otra barra: el usuario mira la bandeja, no el men\xFA.\n  */\n  .tray-unsaved {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 12px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    background: rgba(237, 154, 77, 0.08);\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 18px;\n      color: ", ";\n    }\n\n    strong {\n      font-family: ", ";\n      color: ", ";\n    }\n  }\n\n  .tray-unsaved-dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: ", ";\n    flex-shrink: 0;\n  }\n\n  .tray-unsaved-detail {\n    color: ", ";\n  }\n\n  .tray-notice {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid;\n\n    .tray-notice-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      p {\n        margin: 0;\n        font-family: ", ";\n        font-size: 12px;\n      }\n\n      button {\n        border: none;\n        background: none;\n        cursor: pointer;\n        font-size: 16px;\n        line-height: 1;\n        color: inherit;\n      }\n    }\n\n    ul {\n      margin: 4px 0 0;\n      padding-left: 18px;\n    }\n\n    li {\n      font-family: ", ";\n      font-size: 12px;\n      line-height: 18px;\n      color: ", ";\n    }\n  }\n\n  /* Rojo = no entr\xF3. \xC1mbar = entr\xF3, pero hay algo que saber. */\n  .tray-notice-error {\n    border-color: ", ";\n    background: rgba(", ", 0.05);\n    color: ", ";\n  }\n\n  .tray-notice-warning {\n    border-color: ", ";\n    background: rgba(237, 154, 77, 0.08);\n    color: ", ";\n  }\n\n  .dropzone {\n    position: relative;\n    width: 100%;\n    min-height: 160px;\n    transition: all 0.5s ease;\n\n    &.drag-active {\n      background-color: rgba(", ", 0.05);\n      border: 2px dashed ", ";\n      border-radius: 8px;\n\n      aside {\n        opacity: 0.3;\n        pointer-events: none;\n      }\n    }\n\n    .drag-overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n\n      p {\n        font-family: ", ";\n        font-size: 16px;\n        color: ", ";\n      }\n    }\n  }\n\n  .tray-rows {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .tray-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n  }\n\n  .tray-empty {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    text-align: center;\n    width: 80%;\n\n    p {\n      margin: 0;\n      font-family: ", ";\n      font-size: 16px;\n      color: ", ";\n    }\n\n    .tray-empty-hint {\n      margin-top: 6px;\n      font-size: 13px;\n      color: ", ";\n    }\n  }\n"])), _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.in_progress, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.FontFamily.Raleway_600, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.s4, _variables.FontFamily.Raleway_600, _variables.FontFamily.Lato, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.in_progress, _variables.GlobalColors.in_progress, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.FontFamily.Lato, _variables.GlobalColors.gray, _variables.GlobalColors.s4);
+
+exports.Container = Container;

package/dist/components/organisms/ImagePreviewer/index.js

@@ -23,6 +23,7 @@ var ImagePreviewer = function ImagePreviewer(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditionActiveImage.EditionActiveImage, {
       img: activeImage === null || activeImage === void 0 ? void 0 : activeImage.src,
       altText: activeImage === null || activeImage === void 0 ? void 0 : activeImage.name,
+      ext: activeImage === null || activeImage === void 0 ? void 0 : activeImage.ext,
       setShowModal: setShowModal
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageSelector.ImageSelector, {
       images: imagesArray,

package/dist/components/organisms/ProductImageModal/index.js

@@ -26,7 +26,7 @@ var _GeneralButton = require("../../atoms/GeneralButton");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProductImageModal = function ProductImageModal(_ref) {
-  var _images$values$active, _images$values$active2, _images$values$active3;
+  var _images$values$active, _images$values$active2, _images$values$active3, _images$values$active4;
 
   var _ref$images = _ref.images,
       images = _ref$images === void 0 ? [] : _ref$images,
@@ -72,6 +72,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImage.ProductImage, {
           img: "https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + (images === null || images === void 0 ? void 0 : (_images$values$active = images.values[activeImage]) === null || _images$values$active === void 0 ? void 0 : _images$values$active.srcDB),
           altText: images === null || images === void 0 ? void 0 : (_images$values$active2 = images.values[activeImage]) === null || _images$values$active2 === void 0 ? void 0 : _images$values$active2.name,
+          ext: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.ext,
           imageType: "expanded-modal-image"
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -102,7 +103,7 @@ var ProductImageModal = function ProductImageModal(_ref) {
               }
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageDataTable.ImageDataTable, {
-            imageData: images === null || images === void 0 ? void 0 : (_images$values$active3 = images.values[activeImage]) === null || _images$values$active3 === void 0 ? void 0 : _images$values$active3.data,
+            imageData: images === null || images === void 0 ? void 0 : (_images$values$active4 = images.values[activeImage]) === null || _images$values$active4 === void 0 ? void 0 : _images$values$active4.data,
             headerInfo: headerInfo,
             activeImage: images === null || images === void 0 ? void 0 : images.values[activeImage],
             darkMode: true,

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

@@ -37,6 +37,10 @@ var _genericModalWarning = _interopRequireDefault(require("../../../../assets/im
 
 var _utils = require("../utils");
 
+var _assets = require("../../../../global-files/digital-assets/assets.adapter");
+
+var _assets2 = require("../../../../global-files/digital-assets/assets.reducer");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _excluded = ["src", "video_src"],
@@ -763,26 +767,335 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
       return _ref8.apply(this, arguments);
     };
   }();
+  /*
+    Registra en la base los activos que ACABAN de subirse, sin esperar a que el
+    usuario guarde.
+     Es una corrección de expectativa, no una comodidad: al ver la barra de
+    progreso llegar al final, cualquiera da por hecho que el activo ya quedó
+    ligado al producto. Si entonces cierra la ficha, el archivo se queda en S3
+    sin fila en la base —invisible y sin forma de recuperarlo desde la
+    pantalla—.
+     Manda SOLO las altas recién subidas, con `updateAssets` y `deleteAssets`
+    vacíos. Un reetiquetado o un borrado que el usuario todavía no confirmó no
+    se aplica por haber soltado otro archivo: el botón de guardar sigue siendo
+    quien decide sobre esos.
+  */
 
-  var createComment = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(body, token) {
+
+  var registerUploadedAssets = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(token) {
       var _state$product19, _state$product20, _state$product21;
 
-      var concept, data;
+      var uploaded,
+          listos,
+          data,
+          _state$product22,
+          _state$product23,
+          _body$assets,
+          res,
+          body,
+          guardados,
+          _args6 = arguments;
+
       return _regenerator.default.wrap(function _callee6$(_context6) {
         while (1) {
           switch (_context6.prev = _context6.next) {
             case 0:
-              concept = (0, _utils.getConceptByTab)(state.active_tab);
+              uploaded = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : [];
+              listos = uploaded.filter(function (asset) {
+                return asset.src && !(0, _assets.isPersisted)(asset);
+              });
+
+              if (!(listos.length === 0)) {
+                _context6.next = 4;
+                break;
+              }
+
+              return _context6.abrupt("return");
+
+            case 4:
               data = {
                 articleId: (_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.id_article,
-                orderId: ((_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.orderId) || ((_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.id_order),
+                newAssets: listos.map(_assets.toPayload),
+                updateAssets: [],
+                deleteAssets: []
+              };
+
+              if ((_state$product20 = state.product) !== null && _state$product20 !== void 0 && _state$product20.orderId || (_state$product21 = state.product) !== null && _state$product21 !== void 0 && _state$product21.id_order) {
+                data.orderId = ((_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.orderId) || ((_state$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.id_order);
+              }
+
+              _context6.prev = 6;
+              _context6.next = 9;
+              return _axios.default.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
+                params: {
+                  asset: true
+                },
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 9:
+              res = _context6.sent;
+
+              if (!(res.data.statusCode !== 200)) {
+                _context6.next = 12;
+                break;
+              }
+
+              throw new Error("Respuesta inesperada");
+
+            case 12:
+              body = JSON.parse(res.data.body);
+              guardados = (_body$assets = body.assets) !== null && _body$assets !== void 0 ? _body$assets : [];
+              /*
+                Se le pone a cada activo el id que le tocó, emparejando por la clave de
+                S3, que es única.
+                 A propósito NO se reemplaza la lista entera con lo que devolvió el
+                backend: eso borraría el rastro de lo que el usuario cambió o borró y
+                todavía no ha guardado. Aquí solo se completa lo que faltaba.
+              */
+
+              listos.forEach(function (asset) {
+                var fila = guardados.find(function (row) {
+                  return row.src === asset.src;
+                });
+                if (!fila) return;
+                dispatch({
+                  type: "PATCH_ASSET",
+                  payload: {
+                    key: (0, _assets.assetKey)(asset),
+                    changes: {
+                      id: fila.id,
+                      url: fila.url
+                    }
+                  }
+                });
+              });
+              _context6.next = 21;
+              break;
+
+            case 17:
+              _context6.prev = 17;
+              _context6.t0 = _context6["catch"](6);
+              console.log("Error registering assets:", _context6.t0);
+              /*
+                El archivo SÍ está en S3; lo que falló es la fila. Se marca en el activo
+                y no en un modal porque el usuario puede estar soltando más archivos:
+                interrumpirlo con un diálogo por cada fallo sería peor que dejarlo
+                señalado en su renglón, donde además se ve cuál falló.
+              */
+
+              listos.forEach(function (asset) {
+                return dispatch({
+                  type: "PATCH_ASSET",
+                  payload: {
+                    key: (0, _assets.assetKey)(asset),
+                    changes: {
+                      status: "error",
+                      error: "Se subió el archivo pero no se pudo guardar. Usa el botón de guardar."
+                    }
+                  }
+                });
+              });
+
+            case 21:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6, null, [[6, 17]]);
+    }));
+
+    return function registerUploadedAssets(_x8) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  /*
+    Guarda los activos digitales: registra los nuevos, manda los cambios y pide
+    las bajas.
+     Va aparte de `updateImages` y no dentro, aunque las dos bandejas vivan en la
+    misma pestaña. Un activo no pasa por ninguna de las reglas de una imagen —ni
+    tipo de toma, ni obligatoriedad, ni cupo por cadena— y el backend los escribe
+    en otra tabla. Mezclarlos obligaría a partir en dos cada validación de
+    `updateImages`, que ya es la función más delicada de este archivo.
+     Igual que con las imágenes, aquí NO viaja ningún binario: el archivo ya está
+    en S3 y esto solo registra metadatos. Mandar el archivo en el cuerpo devuelve
+    413.
+  */
+
+
+  var saveAssets = /*#__PURE__*/function () {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(token) {
+      var _state$product24, _state$product25, _state$product26;
+
+      var payload, newAssets, updateAssets, deleteAssets, sinSubir, data, _state$product27, _state$product28, res;
+
+      return _regenerator.default.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              payload = (0, _assets.buildSavePayload)((0, _assets2.selectAssetsToSave)(state));
+              newAssets = payload.newAssets, updateAssets = payload.updateAssets, deleteAssets = payload.deleteAssets;
+
+              if (!(!newAssets.length && !updateAssets.length && !deleteAssets.length)) {
+                _context7.next = 4;
+                break;
+              }
+
+              return _context7.abrupt("return", false);
+
+            case 4:
+              /*
+                Un activo nuevo sin `key` es un archivo que todavía no llegó a S3.
+                Registrarlo crearía una fila apuntando a un objeto que no existe: la
+                bandeja lo mostraría y al descargarlo daría 404, sin forma de saber por qué.
+                Mejor no guardar nada y decirlo.
+              */
+              sinSubir = newAssets.filter(function (asset) {
+                return !asset.key;
+              });
+
+              if (!(sinSubir.length > 0)) {
+                _context7.next = 8;
+                break;
+              }
+
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "Faltan archivos por subir",
+                  message: "".concat(sinSubir.length, " activo(s) todav\xEDa no se han subido. Espera a que termine la carga e intenta de nuevo."),
+                  image: _genericModalWarning.default
+                }
+              });
+              return _context7.abrupt("return", false);
+
+            case 8:
+              dispatch({
+                type: "SET_SAVING",
+                payload: true
+              }); // Sin `version`: un activo general es el mismo para todas las versiones del
+              // producto, así que ni la fila ni la clave de S3 la llevan.
+
+              data = {
+                articleId: (_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.id_article,
+                newAssets: newAssets,
+                updateAssets: updateAssets,
+                deleteAssets: deleteAssets
+              };
+
+              if ((_state$product25 = state.product) !== null && _state$product25 !== void 0 && _state$product25.orderId || (_state$product26 = state.product) !== null && _state$product26 !== void 0 && _state$product26.id_order) {
+                data.orderId = ((_state$product27 = state.product) === null || _state$product27 === void 0 ? void 0 : _state$product27.orderId) || ((_state$product28 = state.product) === null || _state$product28 === void 0 ? void 0 : _state$product28.id_order);
+              }
+
+              _context7.prev = 11;
+              _context7.next = 14;
+              return _axios.default.put(process.env.REACT_APP_ARTICLE_DATA_ENDPOINT, data, {
+                params: {
+                  asset: true
+                },
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 14:
+              res = _context7.sent;
+
+              if (!(res.data.statusCode === 200)) {
+                _context7.next = 19;
+                break;
+              }
+
+              // Se olvida qué cambió y qué se borró: lo que hay en pantalla ya es lo
+              // que hay en la base. Sin esto, el siguiente guardado reenviaría todo.
+              dispatch({
+                type: "CLEAR_ASSETS_TRACKING"
+              });
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "",
+                  message: "Activos digitales guardados con éxito",
+                  image: _genericModalCheck.default
+                }
+              });
+              /*
+                Devuelve `true` para que quien llama recargue.
+                 Es imprescindible, no cortesía: los activos recién creados siguen en
+                memoria con su id temporal y sin el id de la base. Sin recargar, el
+                siguiente guardado los volvería a mandar como nuevos y se duplicarían.
+                Es exactamente el problema que ya tuvieron las imágenes.
+              */
+
+              return _context7.abrupt("return", true);
+
+            case 19:
+              return _context7.abrupt("return", false);
+
+            case 22:
+              _context7.prev = 22;
+              _context7.t0 = _context7["catch"](11);
+              console.log("Error saving assets:", _context7.t0);
+              dispatch({
+                type: "SET_ERRORS",
+                payload: [].concat((0, _toConsumableArray2.default)(state.errors), [_context7.t0])
+              });
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "Error",
+                  message: "Hubo un error al guardar los activos digitales",
+                  image: _errorModal.default
+                }
+              });
+              return _context7.abrupt("return", false);
+
+            case 28:
+              _context7.prev = 28;
+              dispatch({
+                type: "SET_SAVING",
+                payload: false
+              });
+              return _context7.finish(28);
+
+            case 31:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7, null, [[11, 22, 28, 31]]);
+    }));
+
+    return function saveAssets(_x9) {
+      return _ref10.apply(this, arguments);
+    };
+  }();
+
+  var createComment = /*#__PURE__*/function () {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(body, token) {
+      var _state$product29, _state$product30, _state$product31;
+
+      var concept, data;
+      return _regenerator.default.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              concept = (0, _utils.getConceptByTab)(state.active_tab);
+              data = {
+                articleId: (_state$product29 = state.product) === null || _state$product29 === void 0 ? void 0 : _state$product29.id_article,
+                orderId: ((_state$product30 = state.product) === null || _state$product30 === void 0 ? void 0 : _state$product30.orderId) || ((_state$product31 = state.product) === null || _state$product31 === void 0 ? void 0 : _state$product31.id_order),
                 message: body,
                 concept: concept,
                 version: state.product.version
               };
-              _context6.prev = 2;
-              _context6.next = 5;
+              _context8.prev = 2;
+              _context8.next = 5;
               return _axios.default.post("".concat(process.env.REACT_APP_COMMENTS_ENDPOINT), data, {
                 headers: {
                   Authorization: token
@@ -790,24 +1103,24 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
               });
 
             case 5:
-              _context6.next = 10;
+              _context8.next = 10;
               break;
 
             case 7:
-              _context6.prev = 7;
-              _context6.t0 = _context6["catch"](2);
-              console.log("Error creating comment:", _context6.t0);
+              _context8.prev = 7;
+              _context8.t0 = _context8["catch"](2);
+              console.log("Error creating comment:", _context8.t0);
 
             case 10:
             case "end":
-              return _context6.stop();
+              return _context8.stop();
           }
         }
-      }, _callee6, null, [[2, 7]]);
+      }, _callee8, null, [[2, 7]]);
     }));
 
-    return function createComment(_x8, _x9) {
-      return _ref9.apply(this, arguments);
+    return function createComment(_x10, _x11) {
+      return _ref11.apply(this, arguments);
     };
   }();
 
@@ -819,6 +1132,8 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
     updateImages: updateImages,
     saveImageAttrs: saveImageAttrs,
     deleteImages: deleteImages,
+    saveAssets: saveAssets,
+    registerUploadedAssets: registerUploadedAssets,
     handleOnDownloadImages: handleOnDownloadImages,
     createComment: createComment
   };