contentoh-components-library 21.6.56 → 21.6.57

package/dist/components/pages/CreatorsProductEdition/sections/tokens.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.statusName = exports.statusColor = exports.retailerImage = exports.retailerId = exports.FONTS = exports.COLORS = void 0;
+
+var _variables = require("../../../../global-files/variables");
+
+var _statusDictionary = require("../../../../global-files/statusDictionary");
+
+/*
+  Colores y tipografía de la edición de producto, en un solo lugar para las
+  secciones hechas con MUI. Son los mismos de los componentes originales
+  (Status, FeatureTag, TabSection, ScreenHeader...): el diseño no cambia.
+*/
+var COLORS = _variables.GlobalColors;
+exports.COLORS = COLORS;
+var FONTS = _variables.FontFamily;
+/** Color de fondo de la etiqueta de estatus, como en `atoms/Status/styles.js`. */
+
+exports.FONTS = FONTS;
+var STATUS_COLORS = {
+  CA: _variables.GlobalColors.in_progress,
+  IE: _variables.GlobalColors.in_progress,
+  GLD: _variables.GlobalColors.in_progress,
+  R: _variables.GlobalColors.reception,
+  AS: _variables.GlobalColors.reception,
+  SAC: _variables.GlobalColors.reception,
+  PA: _variables.GlobalColors.reception,
+  AA: _variables.GlobalColors.finished,
+  AP: _variables.GlobalColors.finished,
+  AC: _variables.GlobalColors.finished,
+  AAC: _variables.GlobalColors.finished,
+  ACA: _variables.GlobalColors.finished,
+  RA: _variables.GlobalColors.rejected_status,
+  RC: _variables.GlobalColors.rejected_status,
+  RP: _variables.GlobalColors.rejected_status,
+  RAC: _variables.GlobalColors.rejected_status,
+  RCA: _variables.GlobalColors.rejected_status,
+  Dat: _variables.GlobalColors.s4,
+  Dsc: _variables.GlobalColors.s4,
+  Imgs: _variables.GlobalColors.s4,
+  FAP: _variables.GlobalColors.exported,
+  Ex: _variables.GlobalColors.exported,
+  DDI: _variables.GlobalColors.original_purpura,
+  TAB: _variables.GlobalColors.deep_gray,
+  Pt: _variables.GlobalColors.s2
+};
+/** "RA/AS" se pinta con el color de la primera parte, igual que el original. */
+
+var statusColor = function statusColor(status) {
+  var _STATUS_COLORS$String;
+
+  return (_STATUS_COLORS$String = STATUS_COLORS[String(status !== null && status !== void 0 ? status : "").replace(/\/.*/, "")]) !== null && _STATUS_COLORS$String !== void 0 ? _STATUS_COLORS$String : _variables.GlobalColors.s3;
+};
+/** Nombre legible: "RA/AS" → "Rechazado Auditor / Asignado". */
+
+
+exports.statusColor = statusColor;
+
+var statusName = function statusName(status) {
+  if (!status) return null;
+  var names = String(status).split("/").map(function (key) {
+    var _STATUS_DICTIONARY$ke;
+
+    return (_STATUS_DICTIONARY$ke = _statusDictionary.STATUS_DICTIONARY[key]) === null || _STATUS_DICTIONARY$ke === void 0 ? void 0 : _STATUS_DICTIONARY$ke.name;
+  }).filter(Boolean);
+  return names.length > 0 ? names.join(" / ") : null;
+};
+
+exports.statusName = statusName;
+
+var retailerImage = function retailerImage(retailer) {
+  var _retailer$id;
+
+  return (retailer === null || retailer === void 0 ? void 0 : retailer.image) || "https://content-management-images.s3.amazonaws.com/retailers/".concat((_retailer$id = retailer === null || retailer === void 0 ? void 0 : retailer.id) !== null && _retailer$id !== void 0 ? _retailer$id : retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer, ".png");
+};
+/** El id de una cadena llega como `id` o como `id_retailer` según el origen. */
+
+
+exports.retailerImage = retailerImage;
+
+var retailerId = function retailerId(retailer) {
+  var _retailer$id2;
+
+  return (_retailer$id2 = retailer === null || retailer === void 0 ? void 0 : retailer.id) !== null && _retailer$id2 !== void 0 ? _retailer$id2 : retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer;
+};
+
+exports.retailerId = retailerId;

package/dist/components/pages/CreatorsProductEdition/stories/CreatorsProductEdition.stories.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SinImagenes = exports.HijoDeOtro = exports.EspecialistaTextosCelular = exports.EspecialistaTextos = exports.EspecialistaImagenesTablet = exports.EspecialistaImagenesCelular = exports.EspecialistaImagenes = exports.ErrorAlCargar = exports.ConVariantesCelular = exports.ConVariantes = exports.AuditorQATablet = exports.AuditorQACelular = exports.AuditorQA = exports.AuditorPorEvaluarCelular = exports.AuditorPorEvaluar = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("../index");
+
+var _mockApi = require("../mocks/mockApi");
+
+var _ImageEditor = require("../../RetailerProductEdition/stories/ImageEditor.stories");
+
+var _TextEditor = require("../../RetailerProductEdition/stories/TextEditor.stories");
+
+var _Auditor = require("../../RetailerProductEdition/stories/Auditor.stories");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Historias con datos locales: no le pegan a ninguna API, así que funcionan
+  siempre, sin token ni producto vivo en dev. Las respuestas están en
+  `mocks/api.fixtures.js`. Guardar, aprobar o rechazar se acepta sin hacer
+  nada (queda en la consola como `[mock API]`).
+
+  El producto y los usuarios salen de las historias de RetailerProductEdition
+  para que las dos vistas se comparen con lo mismo. El token va solo porque la
+  pantalla lo exige: aquí no sale a ningún lado.
+*/
+var _default = {
+  title: "Components/pages/CreatorsProductEdition",
+  component: _index.CreatorsProductEdition,
+  decorators: [(0, _mockApi.withMockApi)()],
+  parameters: {
+    layout: "fullscreen"
+  }
+}; // Como en la app: la pantalla vive en una caja de altura fija que no se
+// desplaza. El scroll tiene que darlo la propia pantalla, en todos los tamaños.
+
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: "100vh",
+      display: "flex",
+      overflow: "hidden"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CreatorsProductEdition, (0, _objectSpread2.default)({}, args))
+  });
+};
+
+var base = {
+  token: _ImageEditor.ImageEditor.args.token,
+  productSelected: _ImageEditor.ImageEditor.args.productSelected,
+  enableDigitalAssets: true
+};
+var TODAS_LAS_PESTAÑAS = {
+  Descripción: true,
+  "Ficha técnica": true,
+  Imágenes: true
+};
+var celular = {
+  viewport: {
+    defaultViewport: "mobile2"
+  }
+};
+var tablet = {
+  viewport: {
+    defaultViewport: "tablet"
+  }
+}; // --- Especialista de edición (rol 8): pestaña de imágenes -------------------
+
+var EspecialistaImagenes = Template.bind({});
+exports.EspecialistaImagenes = EspecialistaImagenes;
+EspecialistaImagenes.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  tabsSections: _ImageEditor.ImageEditor.args.tabsSections,
+  user: _ImageEditor.ImageEditor.args.user
+});
+var EspecialistaImagenesTablet = Template.bind({});
+exports.EspecialistaImagenesTablet = EspecialistaImagenesTablet;
+EspecialistaImagenesTablet.args = EspecialistaImagenes.args;
+EspecialistaImagenesTablet.parameters = tablet;
+var EspecialistaImagenesCelular = Template.bind({});
+exports.EspecialistaImagenesCelular = EspecialistaImagenesCelular;
+EspecialistaImagenesCelular.args = EspecialistaImagenes.args;
+EspecialistaImagenesCelular.parameters = celular; // --- Especialista de textos (rol 7): descripción ----------------------------
+
+var EspecialistaTextos = Template.bind({});
+exports.EspecialistaTextos = EspecialistaTextos;
+EspecialistaTextos.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  tabsSections: _TextEditor.TextEditor.args.tabsSections,
+  user: _TextEditor.TextEditor.args.user
+});
+var EspecialistaTextosCelular = Template.bind({});
+exports.EspecialistaTextosCelular = EspecialistaTextosCelular;
+EspecialistaTextosCelular.args = EspecialistaTextos.args;
+EspecialistaTextosCelular.parameters = celular; // --- Auditor QA (rol 6): las tres pestañas ----------------------------------
+
+var AuditorQA = Template.bind({});
+exports.AuditorQA = AuditorQA;
+AuditorQA.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, base), {}, {
+  tabsSections: TODAS_LAS_PESTAÑAS,
+  user: _Auditor.Auditor.args.user
+});
+var AuditorQATablet = Template.bind({});
+exports.AuditorQATablet = AuditorQATablet;
+AuditorQATablet.args = AuditorQA.args;
+AuditorQATablet.parameters = tablet;
+var AuditorQACelular = Template.bind({});
+exports.AuditorQACelular = AuditorQACelular;
+AuditorQACelular.args = AuditorQA.args;
+AuditorQACelular.parameters = celular; // Del Sol en "AC": el auditor asignado ve el botón para validar o rechazar.
+
+var AuditorPorEvaluar = Template.bind({});
+exports.AuditorPorEvaluar = AuditorPorEvaluar;
+AuditorPorEvaluar.args = AuditorQA.args;
+AuditorPorEvaluar.decorators = [(0, _mockApi.withMockApi)({
+  delSolStatus: "AC"
+})];
+var AuditorPorEvaluarCelular = Template.bind({});
+exports.AuditorPorEvaluarCelular = AuditorPorEvaluarCelular;
+AuditorPorEvaluarCelular.args = AuditorQA.args;
+AuditorPorEvaluarCelular.decorators = [(0, _mockApi.withMockApi)({
+  delSolStatus: "AC"
+})];
+AuditorPorEvaluarCelular.parameters = celular; // --- Variantes ---------------------------------------------------------------
+// Padre con dos hijos y en un grupo de variantes.
+
+var ConVariantes = Template.bind({});
+exports.ConVariantes = ConVariantes;
+ConVariantes.args = EspecialistaTextos.args;
+ConVariantes.decorators = [(0, _mockApi.withMockApi)({
+  familia: "padre",
+  grupo: true
+})];
+var ConVariantesCelular = Template.bind({});
+exports.ConVariantesCelular = ConVariantesCelular;
+ConVariantesCelular.args = EspecialistaTextos.args;
+ConVariantesCelular.decorators = [(0, _mockApi.withMockApi)({
+  familia: "padre",
+  grupo: true
+})];
+ConVariantesCelular.parameters = celular; // Hijo de otro producto: no ofrece ligar ni agrupar.
+
+var HijoDeOtro = Template.bind({});
+exports.HijoDeOtro = HijoDeOtro;
+HijoDeOtro.args = EspecialistaTextos.args;
+HijoDeOtro.decorators = [(0, _mockApi.withMockApi)({
+  familia: "hijo"
+})]; // --- Casos límite -----------------------------------------------------------
+
+var SinImagenes = Template.bind({});
+exports.SinImagenes = SinImagenes;
+SinImagenes.args = EspecialistaImagenes.args;
+SinImagenes.decorators = [(0, _mockApi.withMockApi)({
+  images: false
+})];
+var ErrorAlCargar = Template.bind({});
+exports.ErrorAlCargar = ErrorAlCargar;
+ErrorAlCargar.args = EspecialistaImagenes.args;
+ErrorAlCargar.decorators = [(0, _mockApi.withMockApi)({
+  failLoad: true
+})];

package/dist/components/pages/CreatorsProductEdition/stories/CreatorsProductEditionAPI.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Textos = exports.ImagenesTablet = exports.ImagenesCelular = exports.Imagenes = exports.AuditorQA = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("../index");
+
+var _mockApi = require("../mocks/mockApi");
+
+var _ImageEditor = require("../../RetailerProductEdition/stories/ImageEditor.stories");
+
+var _Auditor = require("../../RetailerProductEdition/stories/Auditor.stories");
+
+var _TextEditor = require("../../RetailerProductEdition/stories/TextEditor.stories");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Historias contra la API real de dev, con los MISMOS datos que las de
+  RetailerProductEdition (se importan de allá para no duplicar el token ni el
+  producto). Sirven para comparar las dos vistas lado a lado con datos reales.
+
+  Dependen de que el token siga sirviendo y el producto exista en dev: si una
+  falla al cargar, revisar primero eso. Las historias con datos locales, que no
+  dependen de nada, están en `CreatorsProductEdition.stories.js`.
+*/
+var _default = {
+  title: "Components/pages/CreatorsProductEdition/API real",
+  component: _index.CreatorsProductEdition,
+  // Por si se llega desde una historia con datos locales: la API real.
+  decorators: [_mockApi.withRealApi]
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.CreatorsProductEdition, (0, _objectSpread2.default)({}, args));
+};
+
+var Imagenes = Template.bind({});
+exports.Imagenes = Imagenes;
+Imagenes.args = (0, _objectSpread2.default)({}, _ImageEditor.ImageEditor.args);
+var ImagenesTablet = Template.bind({});
+exports.ImagenesTablet = ImagenesTablet;
+ImagenesTablet.args = (0, _objectSpread2.default)({}, _ImageEditor.ImageEditor.args);
+ImagenesTablet.parameters = {
+  viewport: {
+    defaultViewport: "tablet"
+  }
+};
+var ImagenesCelular = Template.bind({});
+exports.ImagenesCelular = ImagenesCelular;
+ImagenesCelular.args = (0, _objectSpread2.default)({}, _ImageEditor.ImageEditor.args);
+ImagenesCelular.parameters = {
+  viewport: {
+    defaultViewport: "mobile2"
+  }
+};
+var AuditorQA = Template.bind({});
+exports.AuditorQA = AuditorQA;
+AuditorQA.args = (0, _objectSpread2.default)({}, _Auditor.Auditor.args); // El usuario de textos (rol 7) con el producto de la historia de imágenes: el
+// de TextEditor (150504) no existe en dev y la pantalla no puede cargar.
+
+var Textos = Template.bind({});
+exports.Textos = Textos;
+Textos.args = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _TextEditor.TextEditor.args), {}, {
+  token: _ImageEditor.ImageEditor.args.token,
+  productSelected: _ImageEditor.ImageEditor.args.productSelected
+});

package/dist/components/pages/CreatorsProductEdition/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = exports.BREAKPOINTS = 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;
+
+/*
+  Estilos de la edición de producto de Creators.
+
+  Parte de `RetailerProductEdition/styles.js` (mismo diseño) y agrega lo que la
+  hace responsiva. Tres tamaños, los mismos que usa MUI por omisión:
+
+    - celular  (< 600px): una columna, un solo scroll para toda la pantalla.
+    - tablet   (600-899px): igual, con más aire.
+    - desktop  (>= 900px): las dos columnas de siempre, cada una con su scroll.
+
+  Varios hijos (ImagePreviewer, ImageDataTable, InputGroup...) traen anchos fijos
+  y la regla es no tocarlos. Donde estorban se ajustan DESDE AQUÍ, con selectores
+  acotados a esta página. Las fases siguientes los van reemplazando por MUI y
+  estos ajustes desaparecen con ellos.
+*/
+var BREAKPOINTS = {
+  tablet: 600,
+  desktop: 900
+};
+exports.BREAKPOINTS = BREAKPOINTS;
+var mobile = "@media (max-width: ".concat(BREAKPOINTS.tablet - 1, "px)");
+var belowDesktop = "@media (max-width: ".concat(BREAKPOINTS.desktop - 1, "px)");
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  min-width: 0;\n  overflow: auto;\n  box-sizing: border-box;\n\n  /* El scroll lo lleva SIEMPRE este contenedor, como en la vista original: en\n     la app la pantalla vive dentro de un layout de altura fija, y si se dejara\n     al documento, en celular no habr\xEDa nada que desplazar. */\n  ", " {\n    overflow-x: hidden;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    /* Sin overscroll-behavior: contain. Al llegar al final, el scroll tiene\n       que poder pasar al contenedor de afuera (el lienzo de Storybook, o la\n       p\xE1gina si la app la mete en algo que se desplaza); con contain se queda\n       atorado y no hay forma de ver lo que est\xE1 debajo. */\n  }\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    gap: 16px;\n    min-width: 0;\n    height: calc(100% - ", "px);\n    padding: 0 12px 12px;\n    box-sizing: border-box;\n\n    ", " {\n      flex-direction: column;\n      flex: none;\n      height: auto;\n    }\n\n    ", " {\n      padding: 0 8px 12px;\n      gap: 12px;\n    }\n\n    .image-data-panel {\n      flex: 0 0 clamp(280px, 30%, 360px);\n      min-width: 0;\n\n      ", " {\n        flex: 0 0 auto;\n        width: 100%;\n      }\n\n      ", " {\n        max-width: 480px;\n        align-self: center;\n      }\n    }\n\n    .product-information {\n      flex: 1;\n      min-width: 0;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      ", " {\n        height: auto;\n      }\n\n      /* Cabecera, pesta\xF1as y grupos de inputs: que puedan encogerse en vez de\n         empujar la p\xE1gina hacia los lados. */\n      & > * {\n        min-width: 0;\n        max-width: 100%;\n      }\n\n      .services-information-container {\n        height: 100%;\n        min-width: 0;\n        overflow: auto;\n\n        ", " {\n          height: auto;\n          overflow: visible;\n        }\n      }\n\n    }\n  }\n\n  #modal-message-box {\n    width: min(400px, 80vw);\n    height: 100px;\n  }\n"])), belowDesktop, function (_ref) {
+  var headerTop = _ref.headerTop;
+  return headerTop;
+}, belowDesktop, mobile, belowDesktop, mobile, belowDesktop, belowDesktop);
+
+exports.Container = Container;

package/dist/global-files/digital-assets/assetTypes.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.warnAssetFile = exports.validateAssetFile = exports.validateAssetDuration = exports.suggestAssetType = exports.resolvePreviewKind = exports.humanizeDuration = exports.getExtension = exports.getAssetType = exports.formatDuration = exports.formatBytes = exports.buildDropzoneAccept = exports.assetTypeOptions = exports.acceptedMimes = exports.acceptedFormatsLabel = exports.acceptedExtensions = exports.VIDEO_DURATION_SECONDS = exports.PLAYABLE_VIDEO_EXTENSIONS = exports.MAX_ASSETS_PER_PRODUCT = exports.IMAGE_EXTENSIONS = exports.ASSET_TYPE_ORDER = exports.ASSET_TYPES = exports.ASSET_PREVIEW = void 0;
+exports.warnUnreadableVideo = exports.warnAssetFile = exports.validateAssetFile = exports.validateAssetDuration = exports.suggestAssetType = exports.resolvePreviewKind = exports.humanizeDuration = exports.getExtension = exports.getAssetType = exports.formatDuration = exports.formatBytes = exports.buildDropzoneAccept = exports.assetTypeOptions = exports.acceptedMimes = exports.acceptedFormatsLabel = exports.acceptedExtensions = exports.VIDEO_DURATION_SECONDS = exports.PLAYABLE_VIDEO_EXTENSIONS = exports.MAX_ASSETS_PER_PRODUCT = exports.IMAGE_EXTENSIONS = exports.ASSET_TYPE_ORDER = exports.ASSET_TYPES = exports.ASSET_PREVIEW = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
@@ -68,6 +68,22 @@ var VIDEO_DURATION_SECONDS = {
 };
 exports.VIDEO_DURATION_SECONDS = VIDEO_DURATION_SECONDS;
 var ASSET_TYPES = {
+  /*
+    Imágenes sueltas: fotos de ambientación, lifestyle, material de campaña.
+    No sustituyen a la galería de la pestaña Imágenes, que valida tomas
+    contra `image_manager`; aquí no cuentan para el avance ni tienen orden.
+     El gif tiene su propio tipo y el svg vive en "editable": se sirve como
+    descarga porque un svg abierto en el navegador ejecuta scripts.
+  */
+  imagen: {
+    id: "imagen",
+    label: "Imagen",
+    description: "Foto o imagen suelta (ambientación, lifestyle, campaña)",
+    mimes: ["image/jpeg", "image/png", "image/webp", "image/bmp", "image/avif", "image/tiff"],
+    extensions: ["jpg", "jpeg", "png", "webp", "bmp", "avif", "tif", "tiff"],
+    maxBytes: 50 * MB,
+    validatesDuration: false
+  },
   360: {
     id: "360",
     label: "360",
@@ -158,7 +174,7 @@ var ASSET_TYPES = {
 /** Orden en que se muestran en el selector de tipo. */
 
 exports.ASSET_TYPES = ASSET_TYPES;
-var ASSET_TYPE_ORDER = ["360", "video", "gif", "documento", "hoja_calculo", "editable", "comprimido", "otro"];
+var ASSET_TYPE_ORDER = ["imagen", "360", "video", "gif", "documento", "hoja_calculo", "editable", "comprimido", "otro"];
 /** Opciones listas para el componente `Select` (espera `{ value, name }`). */
 
 exports.ASSET_TYPE_ORDER = ASSET_TYPE_ORDER;
@@ -384,15 +400,9 @@ var validateAssetFile = function validateAssetFile(file) {
       code: "NO_FILE",
       message: "No se recibió ningún archivo."
     };
-  }
+  } // El cupo se revisa al final: un archivo que no se puede subir de todos modos
+  // (formato o peso) debe decir ESA razón, no "ya no hay lugar".
 
-  if (currentCount >= MAX_ASSETS_PER_PRODUCT) {
-    return {
-      valid: false,
-      code: "MAX_ASSETS",
-      message: "Solo puedes almacenar ".concat(MAX_ASSETS_PER_PRODUCT, " activos digitales por producto.")
-    };
-  }
 
   var assetTypeId = suggestAssetType({
     mime: file.type,
@@ -416,6 +426,14 @@ var validateAssetFile = function validateAssetFile(file) {
     };
   }
 
+  if (currentCount >= MAX_ASSETS_PER_PRODUCT) {
+    return {
+      valid: false,
+      code: "MAX_ASSETS",
+      message: "\"".concat(file.name, "\" no se agreg\xF3: solo puedes almacenar ").concat(MAX_ASSETS_PER_PRODUCT, " activos digitales por producto.")
+    };
+  }
+
   return {
     valid: true,
     assetType: assetTypeId,
@@ -443,20 +461,39 @@ var warnAssetFile = function warnAssetFile(file, assetTypeId) {
   if (PLAYABLE_VIDEO_EXTENSIONS.includes(ext)) return null;
   return "\"".concat(file === null || file === void 0 ? void 0 : file.name, "\" se guardar\xE1 y se podr\xE1 descargar, pero el navegador no puede reproducir los .").concat(ext, ". Convi\xE9rtelo a MP4 si necesitas verlo aqu\xED.");
 };
+/**
+ * Aviso para un video cuya duración el navegador no pudo leer (códec que no
+ * conoce, archivo dañado). No se rechaza: sirve igual para entregarlo, solo que
+ * aquí no se podrá ver ni se sabe cuánto dura.
+ */
+
+
+exports.warnAssetFile = warnAssetFile;
+
+var warnUnreadableVideo = function warnUnreadableVideo(fileName) {
+  return "\"".concat(fileName, "\" se guardar\xE1 y se podr\xE1 descargar, pero el navegador no pudo leerlo: no se podr\xE1 reproducir aqu\xED ni se valid\xF3 su duraci\xF3n.");
+};
 /**
  * Valida la duración de un video. Va aparte de `validateAssetFile` porque
  * obtenerla es asíncrono (hay que cargar el archivo en un <video>) y no se
  * quiere pagar ese costo en archivos que ya fueron rechazados por peso.
+ *
+ * `seconds` en null significa "no se pudo medir" y no se rechaza: `Number(null)`
+ * es 0 y, sin esta guarda, todo video ilegible salía como "dura menos de 10 s".
  */
 
 
-exports.warnAssetFile = warnAssetFile;
+exports.warnUnreadableVideo = warnUnreadableVideo;
 
 var validateAssetDuration = function validateAssetDuration(seconds, assetTypeId) {
+  var fileName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "El video";
   var assetType = getAssetType(assetTypeId);
   if (!assetType.validatesDuration) return {
     valid: true
   };
+  if (seconds === null || seconds === undefined) return {
+    valid: true
+  };
   var value = Number(seconds);
   if (!Number.isFinite(value)) return {
     valid: true
@@ -468,7 +505,7 @@ var validateAssetDuration = function validateAssetDuration(seconds, assetTypeId)
     return {
       valid: false,
       code: "DURATION",
-      message: "Los videos deben durar entre ".concat(humanizeDuration(min), " y ").concat(humanizeDuration(max), ".")
+      message: "\"".concat(fileName, "\" dura ").concat(humanizeDuration(value), "; los videos deben durar entre ").concat(humanizeDuration(min), " y ").concat(humanizeDuration(max), ".")
     };
   }
 

package/dist/global-files/digital-assets/uploadAssets.js

@@ -47,16 +47,17 @@ var _assets = require("./assets.adapter");
  */
 var requestPresign = /*#__PURE__*/function () {
   var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
-    var _data$body, _body$uploads, _body$rejected;
+    var _data, _data$body, _data2, _data3, _body$uploads, _body$rejected;
 
-    var articleId, assets, token, _yield$axios$post, data, body;
+    var articleId, assets, token, data, _yield$axios$post, body;
 
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
             articleId = _ref.articleId, assets = _ref.assets, token = _ref.token;
-            _context.next = 3;
+            _context.prev = 1;
+            _context.next = 4;
             return _axios.default.post(process.env.REACT_APP_ASSETS_PRESIGN_ENDPOINT, {
               articleId: articleId,
               files: assets.map(function (asset) {
@@ -73,32 +74,44 @@ var requestPresign = /*#__PURE__*/function () {
               }
             });
 
-          case 3:
+          case 4:
             _yield$axios$post = _context.sent;
             data = _yield$axios$post.data;
+            _context.next = 12;
+            break;
+
+          case 8:
+            _context.prev = 8;
+            _context.t0 = _context["catch"](1);
+            // "Network Error" o "Request failed with status code 502" no le dicen nada
+            // al usuario. El detalle queda en la consola para quien lo diagnostique.
+            console.error("Activos digitales: falló la firma de la subida", _context.t0);
+            throw new Error("No se pudo preparar la subida. Revisa tu conexión e inténtalo de nuevo.");
+
+          case 12:
             // `integration: lambda` de API Gateway devuelve el objeto del handler tal
             // cual, con el cuerpo como cadena, en vez de traducirlo a una respuesta HTTP.
-            body = typeof (data === null || data === void 0 ? void 0 : data.body) === "string" ? JSON.parse(data.body) : (_data$body = data === null || data === void 0 ? void 0 : data.body) !== null && _data$body !== void 0 ? _data$body : data;
+            body = typeof ((_data = data) === null || _data === void 0 ? void 0 : _data.body) === "string" ? JSON.parse(data.body) : (_data$body = (_data2 = data) === null || _data2 === void 0 ? void 0 : _data2.body) !== null && _data$body !== void 0 ? _data$body : data;
 
-            if (!(data !== null && data !== void 0 && data.statusCode && data.statusCode >= 400)) {
-              _context.next = 8;
+            if (!((_data3 = data) !== null && _data3 !== void 0 && _data3.statusCode && data.statusCode >= 400)) {
+              _context.next = 15;
               break;
             }
 
             throw new Error((body === null || body === void 0 ? void 0 : body.message) || "No se pudo preparar la subida");
 
-          case 8:
+          case 15:
             return _context.abrupt("return", {
               uploads: (_body$uploads = body === null || body === void 0 ? void 0 : body.uploads) !== null && _body$uploads !== void 0 ? _body$uploads : [],
               rejected: (_body$rejected = body === null || body === void 0 ? void 0 : body.rejected) !== null && _body$rejected !== void 0 ? _body$rejected : []
             });
 
-          case 9:
+          case 16:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee);
+    }, _callee, null, [[1, 8]]);
   }));
 
   return function requestPresign(_x) {
@@ -157,15 +170,25 @@ var uploadToS3 = function uploadToS3(_ref3) {
       */
 
 
-      var code = (_$exec = /<Code>(.*?)<\/Code>/.exec(xhr.responseText)) === null || _$exec === void 0 ? void 0 : _$exec[1];
-      reject(new Error(code === "EntityTooLarge" ? "El archivo supera el tamaño permitido." : "S3 rechaz\xF3 la subida (".concat(code || xhr.status, ").")));
+      var code = (_$exec = /<Code>(.*?)<\/Code>/.exec(xhr.responseText)) === null || _$exec === void 0 ? void 0 : _$exec[1]; // El código técnico va a la consola; al usuario, algo que pueda hacer.
+
+      console.error("Activos digitales: S3 rechazó la subida", code || xhr.status, xhr.responseText);
+
+      if (code === "EntityTooLarge") {
+        reject(new Error("El archivo supera el tamaño permitido."));
+      } else if (code === "AccessDenied") {
+        reject(new Error("No se pudo subir el archivo. Avisa a soporte (permiso de almacenamiento)."));
+      } else {
+        reject(new Error("No se pudo subir el archivo (".concat(code || xhr.status, "). Int\xE9ntalo de nuevo; si sigue fallando, avisa a soporte.")));
+      }
     };
 
     xhr.onerror = function () {
-      return reject(new Error( // Un fallo de red sin estatus casi siempre es CORS: el bucket tiene que
-      // permitir POST desde el origen de la aplicación. El navegador corta la
-      // petición antes de mandarla y no deja rastro en ningún log del servidor.
-      "No se pudo conectar con el almacenamiento. Revisa la configuración CORS del bucket."));
+      // Un fallo de red sin estatus casi siempre es CORS (el bucket tiene que
+      // permitir POST desde el origen de la aplicación) o una conexión caída. El
+      // navegador corta la petición y no deja rastro en ningún log del servidor.
+      console.error("Activos digitales: no hubo respuesta de S3 (red o CORS del bucket)");
+      reject(new Error("No se pudo conectar para subir el archivo. Revisa tu conexión e inténtalo de nuevo."));
     };
 
     xhr.onabort = function () {