contentoh-components-library 21.6.49 → 21.6.50

package/src/components/pages/RetailerProductEdition/stories/ImageEditor.stories.js

@@ -15,6 +15,7 @@ ImageEditor.args = {
     "Ficha técnica": false,
     Imágenes: true,
   },
+  enableDigitalAssets: true,
   token:
     "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjN2U1YTZhNC0yYjNmLTRkNTQtYWY5OC05ZTA5YTRjYmMwMWUiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6ImM3ZTVhNmE0LTJiM2YtNGQ1NC1hZjk4LTllMDlhNGNiYzAxZSIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI5Y2Y2NTNkMS1iOTA1LTQ5ODgtYmI1MC0wY2E5NTllMTJkNTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODQ5Njg1MCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODUwMDQ1MCwiaWF0IjoxNzY4NDk2ODUwLCJlbWFpbCI6Imtpa2lqZTE0NjdAbXRsY3ouY29tIn0.kVyqMGAoe0ye3i882XuO_8xKf7vNzpPPse3852YP70aK4f9vq7o7NP0DhPTv5UnrcwC0Lcu_UOqoplyHxgPbIzrKF6e4Ket_T7KA2GHnO7-d30wmYl2GxMm_pSgb_qP_IZpVj5bmlST26LpEftZDHPAue3eQaZ0xRBwkI5dkVbVWncZz9iVdrUdz5FC5gXuAHyEQzn-669UsywrtlRN5y8EgcxsccNmsL_El5ctGZYiNMgn1mBeS-FvEikhNORoZqS0e8JKaYmL-e2jcrEuShpDE3mJMsm0E_KBUxt_t0FoB-tUlRDWlDkpIWHNidzTYAUfudc908ykQ15b3EdvFVw",
   productSelected: {

package/src/components/pages/RetailerProductEdition/stories/TextEditor.stories.js

@@ -18,123 +18,70 @@ TextEditor.args = {
   token:
     "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI4ZDAxMDIxNC01YmZhLTQzYzMtOTZmYi1jNTU2ZGMwNTc3NGIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjhkMDEwMjE0LTViZmEtNDNjMy05NmZiLWM1NTZkYzA1Nzc0YiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiIzYzc3Y2JjMC02ZTM0LTRhZDQtOGJjMy02MmJmNGRhOTYxMTUiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODQ5NjU3NywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODUwMDE3NywiaWF0IjoxNzY4NDk2NTc3LCJlbWFpbCI6ImthcmFmZTMyMThAbW9tMmtpZC5jb20ifQ.FhBvgESIAX90v1_2auyejto5NrMetq5qHoFxzh9lRr07UsYw2iKdDG29VyJLZ_bPStSUx-424U7FR1ctSD9mU831TKuwSyGyGKLz0mO70Ume7pgt8zfN0C_YWv5MFG4thcMrvMfEuyzfUhvQ944HBjXvqzyjcOdCjsFx9gVEnLh1bsXe1MJrUx8H1KN5gNrrkkTE7Qo3ybyr_WZF1002JsdMaoFg2UP3H5gzcbcuxgtjNuyhqaXGnoCBsPhu6SOAwWLEu1pZMty88OFteEWEdxJxCbzKaj8IomT8U4Tjiti4tshMkXRnxHBqAkGzLDu3ypbG4S31CR7RgDxRIVqntw",
   productSelected: {
-    orderId: 10424,
-    status: "CA",
-    datasheet_status: "CA",
+    articleId: 140554,
+    services: {
+      datasheets: 0,
+      descriptions: 0,
+      images: 1,
+    },
+    orderId: 9981,
+    city: "CDMX",
+    status: "AA",
+    datasheet_status: "NS",
     prio: "none",
-    version: 3,
-    description_status: "CA",
-    images_status: "CA",
-    brand: "Marca",
-    retailerOrder: 0,
-    missing: { datasheet: null, descriptions: null, images: null },
-    services: { datasheets: 1, descriptions: 1, images: 1 },
+    version: 5,
+    description_status: "NS",
+    images_status: "AA",
+    statusByRetailer: [
+      {
+        status: "AA",
+        service: "images",
+        retailer_id: 17,
+        task_user_group_id: 5,
+      },
+    ],
     article: {
-      category:
-        "Categoría Genérica Rappi|Categoría Genérica|Categoría Genérica",
-      company_name: "Walmart SA de CV",
+      id_article: 140554,
+      id_category: 264,
+      brand: null,
+      name: "AOX RI Suplemento alimenticio 30 caps de 600 mg c/u",
+      upc: "123456789",
+      sku: "123456789",
+      timestamp: "2025-06-12T00:02:27.000Z",
+      active: 1,
+      company_id: 1541,
+      company_name: "Uniq Balance",
       country: "México",
-      id_category: "4911",
-      id_datasheet_especialist: 426,
+      id_order: 9981,
+      id_datasheet_especialist: null,
       id_datasheet_facilitator: null,
-      id_description_especialist: 426,
+      id_description_especialist: null,
       id_description_facilitator: null,
-      id_images_especialist: 427,
+      id_images_especialist: null,
       id_images_facilitator: null,
-      id_order: 10424,
-      id_article: 144832,
-      id_auditor: 425,
-      name: "Copia prod cadenas 1",
-      timestamp: "2025-11-16T00:32:13.000Z",
-      upc: "100023",
-      sku: "900006",
+      id_auditor: null,
+      id_recepcionist: null,
+      category: "Farmacia|Farmacia OTC|Suplementos Alimenticios",
       categoryRetailer: [
         {
-          id_category: 3431,
-          id_retailer: 24,
-          category_name:
-            "Abarrotes Básicos Alsuper|Abarrotes Básicos|Abarrotes Básicos",
-          retailer_name: "Alsuper",
-        },
-        {
-          id_category: 3435,
-          id_retailer: 21,
-          category_name:
-            "Bebés Cuidado e Higiene|Bebés Cuidado e Higiene|Bebés Cuidado e Higiene",
-          retailer_name: "Anicetos",
-        },
-        {
-          id_category: 3438,
-          id_retailer: 1008,
-          category_name:
-            "Categoría Genérica App Olímpica|Categoría Genérica|Categoría Genérica",
-          retailer_name: "App Olímpica",
-        },
-        {
-          id_category: 3439,
-          id_retailer: 2004,
-          category_name:
-            "Categoría Genérica Automercado|Categoría Genérica Automercado|Categoría Genérica Automercado",
-          retailer_name: "Automercado",
-        },
-        {
-          id_category: 4774,
-          id_retailer: 1032,
-          category_name:
-            "Categoría Genérica IMPIRA Colombia|Categoría Genérica|Categoría Genérica",
-          retailer_name: "IMPIRA Colombia",
-        },
-        {
-          id_category: 4911,
-          id_retailer: 16,
-          category_name:
-            "Categoría Genérica Rappi|Categoría Genérica|Categoría Genérica",
-          retailer_name: "Rappi",
-        },
-        {
-          id_category: 6103,
-          id_retailer: 9,
-          category_name: "Alimentos y Bebidas|Amazon Súper|Abarrotes",
-          retailer_name: "Amazon",
-        },
-        {
-          id_category: 6792,
-          id_retailer: 32,
-          category_name:
-            "Categoría Salud y Belleza Coppel|Categoría Salud y Belleza|Categoría Salud y Belleza",
-          retailer_name: "Coppel",
-        },
-        {
-          id_category: 7008,
-          id_retailer: 3,
-          category_name: "Bebés|Accesorios para Bebés|Accesorios para Bebés",
-          retailer_name: "Sam´s Club",
+          id_category: 264,
+          id_retailer: 17,
+          category_name: "Farmacia|Farmacia OTC|Suplementos Alimenticios",
+          retailer_name: "Genérico",
         },
       ],
     },
     retailers: [
-      { id: 3, name: "Sam´s Club" },
-      { id: 16, name: "Rappi" },
-      { id: 32, name: "Coppel" },
-      { id: 1008, name: "App Olímpica" },
-    ],
-    statusByRetailer: [
-      { status: "RA/AS", service: "datasheet", retailer_id: 3 },
-      { status: "RA/AS", service: "description", retailer_id: 3 },
-      { status: "AA", service: "images", retailer_id: 3 },
-      { status: "AC", service: "datasheet", retailer_id: 16 },
-      { status: "AC", service: "description", retailer_id: 16 },
-      { status: "AC", service: "images", retailer_id: 16 },
-      { status: "AC", service: "datasheet", retailer_id: 32 },
-      { status: "AC", service: "description", retailer_id: 32 },
-      { status: "AC", service: "images", retailer_id: 32 },
-      { status: "PA", service: "datasheet", retailer_id: 1032 },
-      { status: "PA", service: "description", retailer_id: 1032 },
-      { status: "PA", service: "images", retailer_id: 1032 },
-      { status: "PA", service: "datasheet", retailer_id: 2004 },
-      { status: "PA", service: "description", retailer_id: 2004 },
-      { status: "PA", service: "images", retailer_id: 2004 },
+      {
+        id: 17,
+        name: "Genérico",
+      },
     ],
+    variantsCount: 0,
+    parent: null,
+    parentArticleId: null,
+    country: "México",
+    upc: "123456789",
   },
   user: {
     id_user: 426,

package/src/global-files/data.js

@@ -78,17 +78,32 @@ export const getImage = (imageGeneral, width = 250, height = 250) => {
     };
     const ext = image.src.split(".");
     const uuid = ext[0].split("-");
+    const extension = ext[ext.length - 1]?.toLowerCase();
+    /*
+      El redimensionador de CloudFront reprocesa el archivo con sharp: sirve
+      para una foto de producto y destruye todo lo demás. Un mp4 devuelve un
+      error que la etiqueta <video> no puede reproducir, y un gif animado sale
+      aplanado a un solo fotograma.
+
+      Por eso solo los formatos que sharp sabe redimensionar pasan por el
+      resizer; el resto se queda con la URL directa a S3, que es la misma que
+      usa la descarga de imágenes. Sin esto hacía falta bajar cada video
+      completo a base64 solo para generarle una miniatura.
+    */
+    const isResizable = ["jpg", "jpeg", "png", "webp", "tiff", "avif"].includes(extension);
     return {
       ...image,
       version: image.id_version,
-      ext: ext[ext.length - 1],
+      ext: extension,
       uuid:
         uuid.reduce((prevVal, currVal, idx) => {
           if (idx < 2) return "";
           else return idx === 2 ? currVal : prevVal + "-" + currVal;
         }, "") || uuidv4(),
       srcDB: image.src,
-      src: image.image_id
+      src: image.image_id && !isResizable
+        ? `https://${process.env.REACT_APP_IMAGES_BUCKET}.s3.amazonaws.com/${image.src}`
+        : image.image_id
         ? "https://d24s337exbt5zr.cloudfront.net/" +
           Base64.encode(
             JSON.stringify({

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

@@ -0,0 +1,419 @@
+/**
+ * Catálogo de activos digitales.
+ *
+ * Este archivo es la ÚNICA fuente de verdad de qué se puede subir a la bandeja
+ * y con qué límites. Ajustar un tipo o un tope es cambiar un dato aquí, no
+ * tocar lógica repartida por la pantalla.
+ *
+ * Un activo NO es un "tipo de toma". Las imágenes de producto se validan contra
+ * `image_manager` (orden, obligatoriedad, cupo por cadena); los activos no
+ * entran a ese cruce y por eso tienen su propio catálogo.
+ *
+ * DOS COSAS QUE PARECEN DETALLE Y NO LO SON:
+ *
+ * 1. El tipo se decide por EXTENSIÓN, no por mime. El navegador no sabe qué es
+ *    un .psd, un .ai o un .indd: reporta `application/octet-stream`, cadena
+ *    vacía, o —peor— `application/pdf` para un .ai. Validar por mime dejaría
+ *    fuera justo los formatos editables que se pidieron.
+ * 2. Por lo mismo, el `accept` del dropzone se arma con extensiones además de
+ *    mimes. Si solo llevara mimes, react-dropzone descartaría esos archivos
+ *    antes de que nuestra validación llegue a verlos, y el usuario no vería
+ *    ningún mensaje: simplemente no pasaría nada al soltarlos.
+ */
+
+const KB = 1024;
+const MB = 1024 * KB;
+
+/**
+ * Cómo se pinta un archivo en pantalla. No es lo mismo que el tipo de activo:
+ * un 360 puede ser mp4 (se reproduce) o gif (se muestra), así que la forma de
+ * previsualizar se resuelve por el archivo real, no por su categoría.
+ */
+export const ASSET_PREVIEW = {
+  VIDEO: "video",
+  IMAGE: "image",
+  ICON: "icon",
+};
+
+/**
+ * PROVISIONAL: cantidad máxima de activos por producto. Es el único dato que
+ * el manager no respondió. Subido de 10 a 20 porque la lista de tipos creció
+ * (documentos y editables, no solo multimedia).
+ */
+export const MAX_ASSETS_PER_PRODUCT = 20;
+
+/**
+ * Duración válida de un video.
+ *
+ * Hoy la ficha valida `duracion <= 10 || duracion >= 600` mientras el mensaje al
+ * usuario dice "entre 15 segundos y 10 minutos". Los dos no pueden ser ciertos.
+ * Se conserva el rango que el código valida de verdad, y el mensaje se genera
+ * desde estos mismos números para que no se vuelvan a desincronizar.
+ */
+export const VIDEO_DURATION_SECONDS = {
+  min: 10,
+  max: 600,
+};
+
+export const ASSET_TYPES = {
+  360: {
+    id: "360",
+    label: "360",
+    description: "Giro del producto, en mp4 o gif animado",
+    mimes: ["video/mp4", "image/gif"],
+    extensions: ["mp4", "gif"],
+    maxBytes: 200 * MB,
+    validatesDuration: true,
+  },
+  video: {
+    id: "video",
+    label: "Video",
+    description: "Video de producto o promocional",
+    mimes: ["video/mp4", "video/quicktime", "video/webm"],
+    extensions: ["mp4", "mov", "webm"],
+    maxBytes: 200 * MB,
+    validatesDuration: true,
+  },
+  gif: {
+    id: "gif",
+    label: "GIF",
+    description: "Animación corta",
+    mimes: ["image/gif"],
+    extensions: ["gif"],
+    maxBytes: 20 * MB,
+    validatesDuration: false,
+  },
+  documento: {
+    id: "documento",
+    label: "Documento",
+    description: "Manual, ficha técnica, certificado",
+    mimes: [
+      "application/pdf",
+      "application/msword",
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    ],
+    extensions: ["pdf", "doc", "docx"],
+    maxBytes: 50 * MB,
+    validatesDuration: false,
+  },
+  hoja_calculo: {
+    id: "hoja_calculo",
+    label: "Hoja de cálculo",
+    description: "Listas de medidas, tablas de tallas, matrices",
+    mimes: [
+      "application/vnd.ms-excel",
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "text/csv",
+    ],
+    extensions: ["xlsx", "xls", "csv"],
+    maxBytes: 20 * MB,
+    validatesDuration: false,
+  },
+  /*
+    Archivos de diseño editables. Es la categoría con más riesgo: un .psd con
+    capas o un .aep pasan sin esfuerzo de 1 GB, y ninguno se puede previsualizar
+    en el navegador —se muestran con icono y nombre—. El tope de aquí abajo es
+    una propuesta, no un dato confirmado.
+  */
+  editable: {
+    id: "editable",
+    label: "Editable",
+    description: "Archivo de diseño con capas (Photoshop, Illustrator, InDesign…)",
+    mimes: [],
+    extensions: [
+      "psd", "psb", // Photoshop
+      "ai", "eps", // Illustrator
+      "indd", "idml", // InDesign
+      "aep", // After Effects
+      "prproj", // Premiere
+      "sketch", "fig", "xd", // Sketch, Figma, Adobe XD
+      "afphoto", "afdesign", // Affinity
+      "svg",
+    ],
+    maxBytes: 500 * MB,
+    validatesDuration: false,
+  },
+  comprimido: {
+    id: "comprimido",
+    label: "Comprimido",
+    description: "Paquete de varios archivos en un solo zip",
+    mimes: ["application/zip", "application/x-rar-compressed", "application/x-7z-compressed"],
+    extensions: ["zip", "rar", "7z"],
+    maxBytes: 500 * MB,
+    validatesDuration: false,
+  },
+  otro: {
+    id: "otro",
+    label: "Otro",
+    description: "Formato no reconocido",
+    mimes: [],
+    extensions: [],
+    maxBytes: 50 * MB,
+    validatesDuration: false,
+  },
+};
+
+/** Orden en que se muestran en el selector de tipo. */
+export const ASSET_TYPE_ORDER = [
+  "360",
+  "video",
+  "gif",
+  "documento",
+  "hoja_calculo",
+  "editable",
+  "comprimido",
+  "otro",
+];
+
+/** Opciones listas para el componente `Select` (espera `{ value, name }`). */
+export const assetTypeOptions = () =>
+  ASSET_TYPE_ORDER.map((id) => ({
+    value: id,
+    name: ASSET_TYPES[id].label,
+  }));
+
+/** Extensiones que el navegador pinta como imagen. */
+export const IMAGE_EXTENSIONS = [
+  "jpg",
+  "jpeg",
+  "png",
+  "webp",
+  "gif",
+  "bmp",
+  "avif",
+  "svg",
+  "tiff",
+];
+
+/**
+ * Formatos de video que un navegador REPRODUCE de verdad.
+ *
+ * No es lo mismo que "es un video". Un .mov se sube bien y S3 lo sirve como
+ * video/quicktime, pero Chrome y Firefox no lo reproducen: una grabación de
+ * pantalla de macOS viene en HEVC o ProRes, que no saben decodificar. Tratarlo
+ * como reproducible pinta un recuadro negro sin explicación; mostrarlo como
+ * archivo dice la verdad y deja claro lo que sí se puede hacer: descargarlo.
+ */
+export const PLAYABLE_VIDEO_EXTENSIONS = ["mp4", "webm", "ogv", "ogg"];
+
+/**
+ * Cómo pintar un archivo: manda la extensión y el mime queda de respaldo.
+ *
+ * La extensión manda porque el mime miente en las dos direcciones: un .psd
+ * llega sin él, y un .mov llega con uno que empieza por `video/` aunque el
+ * navegador no sepa reproducirlo.
+ *
+ * NUNCA por la URL. `ProductImage` lo hacía con `/\.mp4$/` y por eso fallaba:
+ * la URL guardada apunta al redimensionador de CloudFront y no conserva la
+ * extensión del archivo, así que un video jamás daba positivo.
+ */
+export const resolvePreviewKind = ({ mime, ext, name } = {}) => {
+  const extension = (ext || getExtension(name) || "").toLowerCase();
+
+  if (extension) {
+    if (PLAYABLE_VIDEO_EXTENSIONS.includes(extension)) return ASSET_PREVIEW.VIDEO;
+    if (IMAGE_EXTENSIONS.includes(extension)) return ASSET_PREVIEW.IMAGE;
+    return ASSET_PREVIEW.ICON;
+  }
+
+  if (mime === "video/mp4" || mime === "video/webm") return ASSET_PREVIEW.VIDEO;
+  if (mime?.startsWith("image/")) return ASSET_PREVIEW.IMAGE;
+  return ASSET_PREVIEW.ICON;
+};
+
+export const getAssetType = (assetTypeId) =>
+  ASSET_TYPES[assetTypeId] ?? ASSET_TYPES.otro;
+
+export const getExtension = (fileName = "") => {
+  const parts = String(fileName).split(".");
+  return parts.length > 1 ? parts.pop().toLowerCase() : "";
+};
+
+/*
+  Qué tipo reclama cada extensión, resuelto una sola vez.
+
+  El orden de `ASSET_TYPE_ORDER` decide los empates: `mp4` y `gif` aparecen
+  también en "360", pero gana el tipo genérico porque es el caso común y el
+  usuario puede reetiquetarlo en la tarjeta. Mirando el archivo no hay forma de
+  saber si un giro es un giro.
+*/
+const EXTENSION_INDEX = ASSET_TYPE_ORDER.reduce((index, id) => {
+  ASSET_TYPES[id].extensions.forEach((ext) => {
+    if (id !== "360" && !index[ext]) index[ext] = id;
+  });
+  return index;
+}, {});
+
+/**
+ * Tipo de activo sugerido para un archivo recién elegido.
+ *
+ * Manda la extensión. El mime solo se consulta como respaldo para los formatos
+ * multimedia, que son los únicos que el navegador reconoce con certeza: para un
+ * .psd o un .ai reporta `application/octet-stream` o nada, y para un .ai a veces
+ * `application/pdf`, que lo clasificaría como documento.
+ */
+export const suggestAssetType = ({ mime, name } = {}) => {
+  const ext = getExtension(name);
+  if (EXTENSION_INDEX[ext]) return EXTENSION_INDEX[ext];
+
+  if (mime?.startsWith("video/")) return "video";
+  if (mime === "image/gif") return "gif";
+  if (mime === "application/pdf") return "documento";
+
+  return "otro";
+};
+
+/** Todos los mimes aceptados, sin repetir. */
+export const acceptedMimes = () => [
+  ...new Set(ASSET_TYPE_ORDER.flatMap((id) => ASSET_TYPES[id].mimes)),
+];
+
+/** Todas las extensiones aceptadas, sin repetir y con punto. */
+export const acceptedExtensions = () => [
+  ...new Set(ASSET_TYPE_ORDER.flatMap((id) => ASSET_TYPES[id].extensions)),
+].map((ext) => `.${ext}`);
+
+/**
+ * Valor de `accept` para react-dropzone (v12: una cadena separada por comas).
+ *
+ * Lleva mimes Y extensiones. Con solo mimes, react-dropzone descartaría un
+ * .psd o un .indd antes de que nuestra validación llegue a verlos —el navegador
+ * no les asigna mime— y al soltarlos no pasaría absolutamente nada: ni el
+ * archivo, ni un mensaje de por qué.
+ */
+export const buildDropzoneAccept = () => [...acceptedMimes(), ...acceptedExtensions()].join(", ");
+
+/** Lista legible de formatos, para mensajes y para la ayuda de la bandeja. */
+export const acceptedFormatsLabel = () => acceptedExtensions()
+  .map((ext) => ext.replace(".", "").toUpperCase())
+  .join(", ");
+
+const GB = 1024 * MB;
+
+export const formatBytes = (bytes) => {
+  const value = Number(bytes);
+  if (!Number.isFinite(value) || value <= 0) return "-";
+  if (value < KB) return `${value} B`;
+  if (value < MB) return `${Math.round(value / KB)} KB`;
+  // Los editables llegan a varios cientos de MB; sin este escalón un archivo de
+  // 1.2 GB se anunciaba como "1228.8 MB".
+  if (value < GB) return `${(value / MB).toFixed(1)} MB`;
+  return `${(value / GB).toFixed(2)} GB`;
+};
+
+/** Duración compacta para la tarjeta del activo: "1:05". */
+export const formatDuration = (seconds) => {
+  const value = Number(seconds);
+  if (!Number.isFinite(value) || value <= 0) return "-";
+  const mins = Math.floor(value / 60);
+  const secs = Math.round(value % 60);
+  return `${mins}:${String(secs).padStart(2, "0")}`;
+};
+
+/** Duración en prosa para los mensajes de error: "10 segundos", "10 minutos". */
+export const humanizeDuration = (seconds) => {
+  const value = Number(seconds);
+  if (!Number.isFinite(value) || value <= 0) return "-";
+  if (value < 60) return `${Math.round(value)} segundos`;
+  const mins = value / 60;
+  const label = Number.isInteger(mins) ? mins : mins.toFixed(1);
+  return `${label} ${mins === 1 ? "minuto" : "minutos"}`;
+};
+
+/**
+ * Valida un archivo ANTES de tocar la red: tipo permitido, peso y cupo.
+ *
+ * Se separa de la subida a propósito. Da igual que el archivo termine yendo por
+ * URL prefirmada o por el `putObject` de hoy: esto no cambia, y es lo que evita
+ * que el navegador empiece a leer 200 MB que de todos modos se van a rechazar.
+ *
+ * @returns {{ valid: boolean, code?: string, message?: string }}
+ */
+export const validateAssetFile = (file, { currentCount = 0 } = {}) => {
+  if (!file) {
+    return {
+      valid: false,
+      code: "NO_FILE",
+      message: "No se recibió ningún archivo.",
+    };
+  }
+
+  if (currentCount >= MAX_ASSETS_PER_PRODUCT) {
+    return {
+      valid: false,
+      code: "MAX_ASSETS",
+      message: `Solo puedes almacenar ${MAX_ASSETS_PER_PRODUCT} activos digitales por producto.`,
+    };
+  }
+
+  const assetTypeId = suggestAssetType({ mime: file.type, name: file.name });
+  const assetType = getAssetType(assetTypeId);
+
+  if (assetTypeId === "otro") {
+    return {
+      valid: false,
+      code: "UNSUPPORTED_TYPE",
+      message: `"${file.name}" no es un formato permitido. Se aceptan: ${acceptedFormatsLabel()}.`,
+    };
+  }
+
+  if (file.size > assetType.maxBytes) {
+    return {
+      valid: false,
+      code: "MAX_SIZE",
+      message: `"${file.name}" pesa ${formatBytes(
+        file.size
+      )} y el máximo para ${assetType.label} es ${formatBytes(
+        assetType.maxBytes
+      )}.`,
+    };
+  }
+
+  return { valid: true, assetType: assetTypeId, warning: warnAssetFile(file, assetTypeId) };
+};
+
+/**
+ * Aviso para un archivo que SÍ se acepta pero que el usuario no va a poder ver.
+ *
+ * El caso que sorprende es el video: alguien sube una grabación de pantalla de
+ * macOS —un .mov— esperando reproducirla, y el navegador no la decodifica. El
+ * archivo sirve igual para entregarlo al retailer, así que no se rechaza; pero
+ * enterarse al soltarlo es mucho mejor que enterarse al intentar verlo.
+ *
+ * No se avisa de un .psd o un .indd: nadie espera previsualizar un archivo de
+ * diseño, y un aviso por cada uno sería ruido.
+ */
+export const warnAssetFile = (file, assetTypeId) => {
+  if (assetTypeId !== "video" && assetTypeId !== "360") return null;
+
+  const ext = getExtension(file?.name);
+  if (PLAYABLE_VIDEO_EXTENSIONS.includes(ext)) return null;
+
+  return `"${file?.name}" se guardará y se podrá descargar, pero el navegador no puede reproducir los .${ext}. Conviértelo a MP4 si necesitas verlo aquí.`;
+};
+
+/**
+ * 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.
+ */
+export const validateAssetDuration = (seconds, assetTypeId) => {
+  const assetType = getAssetType(assetTypeId);
+  if (!assetType.validatesDuration) return { valid: true };
+
+  const value = Number(seconds);
+  if (!Number.isFinite(value)) return { valid: true };
+
+  const { min, max } = VIDEO_DURATION_SECONDS;
+  if (value < min || value > max) {
+    return {
+      valid: false,
+      code: "DURATION",
+      message: `Los videos deben durar entre ${humanizeDuration(
+        min
+      )} y ${humanizeDuration(max)}.`,
+    };
+  }
+
+  return { valid: true };
+};

package/src/global-files/digital-assets/assets.actions.js

@@ -0,0 +1,50 @@
+/**
+ * Vocabulario compartido del estado de activos digitales.
+ *
+ * Vive aquí, y no dentro del reducer, para que nadie dependa de nadie en la
+ * dirección equivocada: el reducer de la ficha (`context/reducers/assets.js`)
+ * y el hook de la bandeja (`useDigitalAssets`) importan ambos estas constantes,
+ * y ninguno de los dos importa al otro. Es lo que permite probar el reducer
+ * suelto en Storybook sin arrastrar la pantalla completa.
+ */
+
+export const ASSET_ACTIONS = {
+  /** Reemplaza toda la lista con lo que devolvió el backend. Limpia el rastreo. */
+  SET_ASSETS_VALUES: "SET_ASSETS_VALUES",
+  /** Agrega activos recién soltados y ya validados. */
+  ADD_ASSETS: "ADD_ASSETS",
+  /**
+   * Cambio hecho por el usuario (reetiquetar el tipo, renombrar). Si el activo
+   * ya existe en el backend, queda marcado para enviarse al guardar.
+   */
+  UPDATE_ASSET: "UPDATE_ASSET",
+  /**
+   * Cambio de ciclo de vida de la subida: progreso, estado, error, o la clave
+   * de S3 que devuelve el backend. NO marca nada para guardar —el progreso de
+   * una barra no es una edición del usuario— y por eso está separado de
+   * `UPDATE_ASSET` en vez de ser una bandera.
+   */
+  PATCH_ASSET: "PATCH_ASSET",
+  /** Quita un activo de la lista. Si ya existía en el backend, lo anota para borrarlo. */
+  REMOVE_ASSET: "REMOVE_ASSET",
+  SET_SELECTED_ASSETS: "SET_SELECTED_ASSETS",
+  TOGGLE_CHECK_ALL_ASSETS: "TOGGLE_CHECK_ALL_ASSETS",
+  /** Tras un guardado exitoso: olvida qué cambió y qué se borró. */
+  CLEAR_ASSETS_TRACKING: "CLEAR_ASSETS_TRACKING",
+};
+
+export const assetsInitialState = {
+  /** Lista completa, en el modelo de interfaz de `assets.adapter`. */
+  assets_values: [],
+  /**
+   * Claves de los activos YA GUARDADOS que el usuario modificó. Se guardan
+   * claves y no copias del objeto: una copia se queda vieja en cuanto el
+   * usuario vuelve a tocar el activo, y al guardar se enviaría el valor
+   * anterior. Con la clave, el objeto se lee siempre de `assets_values`.
+   */
+  updated_assets: [],
+  /** Ids del backend pendientes de borrar. */
+  deleted_assets: [],
+  selected_assets: [],
+  all_assets_checked: false,
+};