contentoh-components-library 21.6.49 → 21.6.50

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

@@ -0,0 +1,480 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+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;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+/**
+ * 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.
+ */
+var KB = 1024;
+var 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.
+ */
+
+var 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).
+ */
+
+exports.ASSET_PREVIEW = ASSET_PREVIEW;
+var 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.
+ */
+
+exports.MAX_ASSETS_PER_PRODUCT = MAX_ASSETS_PER_PRODUCT;
+var VIDEO_DURATION_SECONDS = {
+  min: 10,
+  max: 600
+};
+exports.VIDEO_DURATION_SECONDS = VIDEO_DURATION_SECONDS;
+var 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. */
+
+exports.ASSET_TYPES = ASSET_TYPES;
+var ASSET_TYPE_ORDER = ["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;
+
+var assetTypeOptions = function assetTypeOptions() {
+  return ASSET_TYPE_ORDER.map(function (id) {
+    return {
+      value: id,
+      name: ASSET_TYPES[id].label
+    };
+  });
+};
+/** Extensiones que el navegador pinta como imagen. */
+
+
+exports.assetTypeOptions = assetTypeOptions;
+var 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.
+ */
+
+exports.IMAGE_EXTENSIONS = IMAGE_EXTENSIONS;
+var 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.
+ */
+
+exports.PLAYABLE_VIDEO_EXTENSIONS = PLAYABLE_VIDEO_EXTENSIONS;
+
+var resolvePreviewKind = function resolvePreviewKind() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      mime = _ref.mime,
+      ext = _ref.ext,
+      name = _ref.name;
+
+  var 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 !== null && mime !== void 0 && mime.startsWith("image/")) return ASSET_PREVIEW.IMAGE;
+  return ASSET_PREVIEW.ICON;
+};
+
+exports.resolvePreviewKind = resolvePreviewKind;
+
+var getAssetType = function getAssetType(assetTypeId) {
+  var _ASSET_TYPES$assetTyp;
+
+  return (_ASSET_TYPES$assetTyp = ASSET_TYPES[assetTypeId]) !== null && _ASSET_TYPES$assetTyp !== void 0 ? _ASSET_TYPES$assetTyp : ASSET_TYPES.otro;
+};
+
+exports.getAssetType = getAssetType;
+
+var getExtension = function getExtension() {
+  var fileName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var 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.
+*/
+
+
+exports.getExtension = getExtension;
+var EXTENSION_INDEX = ASSET_TYPE_ORDER.reduce(function (index, id) {
+  ASSET_TYPES[id].extensions.forEach(function (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.
+ */
+
+var suggestAssetType = function suggestAssetType() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      mime = _ref2.mime,
+      name = _ref2.name;
+
+  var ext = getExtension(name);
+  if (EXTENSION_INDEX[ext]) return EXTENSION_INDEX[ext];
+  if (mime !== null && mime !== void 0 && 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. */
+
+
+exports.suggestAssetType = suggestAssetType;
+
+var acceptedMimes = function acceptedMimes() {
+  return (0, _toConsumableArray2.default)(new Set(ASSET_TYPE_ORDER.flatMap(function (id) {
+    return ASSET_TYPES[id].mimes;
+  })));
+};
+/** Todas las extensiones aceptadas, sin repetir y con punto. */
+
+
+exports.acceptedMimes = acceptedMimes;
+
+var acceptedExtensions = function acceptedExtensions() {
+  return (0, _toConsumableArray2.default)(new Set(ASSET_TYPE_ORDER.flatMap(function (id) {
+    return ASSET_TYPES[id].extensions;
+  }))).map(function (ext) {
+    return ".".concat(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é.
+ */
+
+
+exports.acceptedExtensions = acceptedExtensions;
+
+var buildDropzoneAccept = function buildDropzoneAccept() {
+  return [].concat((0, _toConsumableArray2.default)(acceptedMimes()), (0, _toConsumableArray2.default)(acceptedExtensions())).join(", ");
+};
+/** Lista legible de formatos, para mensajes y para la ayuda de la bandeja. */
+
+
+exports.buildDropzoneAccept = buildDropzoneAccept;
+
+var acceptedFormatsLabel = function acceptedFormatsLabel() {
+  return acceptedExtensions().map(function (ext) {
+    return ext.replace(".", "").toUpperCase();
+  }).join(", ");
+};
+
+exports.acceptedFormatsLabel = acceptedFormatsLabel;
+var GB = 1024 * MB;
+
+var formatBytes = function formatBytes(bytes) {
+  var value = Number(bytes);
+  if (!Number.isFinite(value) || value <= 0) return "-";
+  if (value < KB) return "".concat(value, " B");
+  if (value < MB) return "".concat(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 "".concat((value / MB).toFixed(1), " MB");
+  return "".concat((value / GB).toFixed(2), " GB");
+};
+/** Duración compacta para la tarjeta del activo: "1:05". */
+
+
+exports.formatBytes = formatBytes;
+
+var formatDuration = function formatDuration(seconds) {
+  var value = Number(seconds);
+  if (!Number.isFinite(value) || value <= 0) return "-";
+  var mins = Math.floor(value / 60);
+  var secs = Math.round(value % 60);
+  return "".concat(mins, ":").concat(String(secs).padStart(2, "0"));
+};
+/** Duración en prosa para los mensajes de error: "10 segundos", "10 minutos". */
+
+
+exports.formatDuration = formatDuration;
+
+var humanizeDuration = function humanizeDuration(seconds) {
+  var value = Number(seconds);
+  if (!Number.isFinite(value) || value <= 0) return "-";
+  if (value < 60) return "".concat(Math.round(value), " segundos");
+  var mins = value / 60;
+  var label = Number.isInteger(mins) ? mins : mins.toFixed(1);
+  return "".concat(label, " ").concat(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 }}
+ */
+
+
+exports.humanizeDuration = humanizeDuration;
+
+var validateAssetFile = function validateAssetFile(file) {
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref3$currentCount = _ref3.currentCount,
+      currentCount = _ref3$currentCount === void 0 ? 0 : _ref3$currentCount;
+
+  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 ".concat(MAX_ASSETS_PER_PRODUCT, " activos digitales por producto.")
+    };
+  }
+
+  var assetTypeId = suggestAssetType({
+    mime: file.type,
+    name: file.name
+  });
+  var assetType = getAssetType(assetTypeId);
+
+  if (assetTypeId === "otro") {
+    return {
+      valid: false,
+      code: "UNSUPPORTED_TYPE",
+      message: "\"".concat(file.name, "\" no es un formato permitido. Se aceptan: ").concat(acceptedFormatsLabel(), ".")
+    };
+  }
+
+  if (file.size > assetType.maxBytes) {
+    return {
+      valid: false,
+      code: "MAX_SIZE",
+      message: "\"".concat(file.name, "\" pesa ").concat(formatBytes(file.size), " y el m\xE1ximo para ").concat(assetType.label, " es ").concat(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.
+ */
+
+
+exports.validateAssetFile = validateAssetFile;
+
+var warnAssetFile = function warnAssetFile(file, assetTypeId) {
+  if (assetTypeId !== "video" && assetTypeId !== "360") return null;
+  var ext = getExtension(file === null || file === void 0 ? void 0 : file.name);
+  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.");
+};
+/**
+ * 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.
+ */
+
+
+exports.warnAssetFile = warnAssetFile;
+
+var validateAssetDuration = function validateAssetDuration(seconds, assetTypeId) {
+  var assetType = getAssetType(assetTypeId);
+  if (!assetType.validatesDuration) return {
+    valid: true
+  };
+  var value = Number(seconds);
+  if (!Number.isFinite(value)) return {
+    valid: true
+  };
+  var min = VIDEO_DURATION_SECONDS.min,
+      max = VIDEO_DURATION_SECONDS.max;
+
+  if (value < min || value > max) {
+    return {
+      valid: false,
+      code: "DURATION",
+      message: "Los videos deben durar entre ".concat(humanizeDuration(min), " y ").concat(humanizeDuration(max), ".")
+    };
+  }
+
+  return {
+    valid: true
+  };
+};
+
+exports.validateAssetDuration = validateAssetDuration;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assetsInitialState = exports.ASSET_ACTIONS = void 0;
+
+/**
+ * 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.
+ */
+var 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"
+};
+exports.ASSET_ACTIONS = ASSET_ACTIONS;
+var 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
+};
+exports.assetsInitialState = assetsInitialState;