contentoh-components-library 21.6.55 → 21.6.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/.claude/launch.json +14 -0
  2. package/.env.test +1 -0
  3. package/dist/ai/prompts/attribute.prompt.js +28 -0
  4. package/dist/ai/prompts/description.prompt.js +33 -0
  5. package/dist/ai/schemas/attribute.schema.js +35 -0
  6. package/dist/ai/schemas/description.schema.js +27 -0
  7. package/dist/components/atoms/AsignationOption/index.js +1 -0
  8. package/dist/components/atoms/AsignationOption/styles.js +1 -1
  9. package/dist/components/atoms/AssetPreview/AssetPreview.stories.js +118 -0
  10. package/dist/components/atoms/AssetPreview/index.js +150 -0
  11. package/dist/components/atoms/AssetPreview/styles.js +28 -0
  12. package/dist/components/atoms/IconFile/index.js +85 -2
  13. package/dist/components/atoms/IconFile/styles.js +1 -1
  14. package/dist/components/atoms/ProductImage/ProductImage.stories.js +70 -2
  15. package/dist/components/atoms/ProductImage/index.js +100 -27
  16. package/dist/components/atoms/ProductImage/styles.js +3 -1
  17. package/dist/components/molecules/EditionActiveImage/index.js +4 -2
  18. package/dist/components/molecules/GalleryAssetElement/GalleryAssetElement.stories.js +147 -0
  19. package/dist/components/molecules/GalleryAssetElement/index.js +178 -0
  20. package/dist/components/molecules/GalleryAssetElement/styles.js +26 -0
  21. package/dist/components/molecules/GalleryElement/index.js +13 -4
  22. package/dist/components/molecules/GalleryHeader/index.js +96 -24
  23. package/dist/components/molecules/GalleryHeader/styles.js +4 -1
  24. package/dist/components/molecules/GalleryTrayTabs/GalleryTrayTabs.stories.js +56 -0
  25. package/dist/components/molecules/GalleryTrayTabs/index.js +60 -0
  26. package/dist/components/molecules/GalleryTrayTabs/styles.js +20 -0
  27. package/dist/components/molecules/ImageSelector/index.js +1 -0
  28. package/dist/components/molecules/RetailerSelector/RetailerSelector.stories.js +23 -2
  29. package/dist/components/molecules/RetailerSelector/index.js +7 -2
  30. package/dist/components/molecules/RetailerSelectorv2/index.js +6 -2
  31. package/dist/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js +235 -0
  32. package/dist/components/organisms/DigitalAssetsTray/index.js +219 -0
  33. package/dist/components/organisms/DigitalAssetsTray/styles.js +22 -0
  34. package/dist/components/organisms/ImagePreviewer/index.js +1 -0
  35. package/dist/components/organisms/ProductImageModal/index.js +3 -2
  36. package/dist/components/pages/CreatorsProductEdition/CreatorsProductEditionView.js +905 -0
  37. package/dist/components/pages/CreatorsProductEdition/constants.js +19 -0
  38. package/dist/components/pages/CreatorsProductEdition/hooks/useCreatorsProductEdition.js +2967 -0
  39. package/dist/components/pages/CreatorsProductEdition/index.js +33 -0
  40. package/dist/components/pages/CreatorsProductEdition/mocks/api.fixtures.js +537 -0
  41. package/dist/components/pages/CreatorsProductEdition/mocks/mockApi.js +251 -0
  42. package/dist/components/pages/CreatorsProductEdition/sections/CommentBox.js +311 -0
  43. package/dist/components/pages/CreatorsProductEdition/sections/ImagePanel.js +421 -0
  44. package/dist/components/pages/CreatorsProductEdition/sections/ImagesSection.js +473 -0
  45. package/dist/components/pages/CreatorsProductEdition/sections/ProductHeader.js +379 -0
  46. package/dist/components/pages/CreatorsProductEdition/sections/ProductMedia.js +138 -0
  47. package/dist/components/pages/CreatorsProductEdition/sections/RetailerMenu.js +162 -0
  48. package/dist/components/pages/CreatorsProductEdition/sections/ServiceActions.js +542 -0
  49. package/dist/components/pages/CreatorsProductEdition/sections/StatusChip.js +50 -0
  50. package/dist/components/pages/CreatorsProductEdition/sections/TabsBar.js +247 -0
  51. package/dist/components/pages/CreatorsProductEdition/sections/VariantsPanel.js +389 -0
  52. package/dist/components/pages/CreatorsProductEdition/sections/tokens.js +90 -0
  53. package/dist/components/pages/CreatorsProductEdition/stories/CreatorsProductEdition.stories.js +168 -0
  54. package/dist/components/pages/CreatorsProductEdition/stories/CreatorsProductEditionAPI.stories.js +74 -0
  55. package/dist/components/pages/CreatorsProductEdition/styles.js +46 -0
  56. package/dist/components/pages/RetailerProductEdition/context/provider-product-edition.context.js +330 -15
  57. package/dist/components/pages/RetailerProductEdition/context/provider-product-edition.reducer.js +12 -2
  58. package/dist/components/pages/RetailerProductEdition/index.js +606 -425
  59. package/dist/components/pages/RetailerProductEdition/stories/ImageEditor.stories.js +1 -0
  60. package/dist/global-files/data.js +16 -3
  61. package/dist/global-files/digital-assets/assetTypes.js +517 -0
  62. package/dist/global-files/digital-assets/assets.actions.js +64 -0
  63. package/dist/global-files/digital-assets/assets.adapter.js +304 -0
  64. package/dist/global-files/digital-assets/assets.mock.js +136 -0
  65. package/dist/global-files/digital-assets/assets.reducer.js +220 -0
  66. package/dist/global-files/digital-assets/uploadAssets.js +202 -0
  67. package/dist/global-files/digital-assets/useDigitalAssets.js +535 -0
  68. package/dist/index.js +142 -90
  69. package/docs/activos-digitales.md +273 -0
  70. package/package.json +1 -1
  71. package/src/components/atoms/AsignationOption/index.js +1 -1
  72. package/src/components/atoms/AsignationOption/styles.js +9 -0
  73. package/src/components/atoms/AssetPreview/AssetPreview.stories.js +78 -0
  74. package/src/components/atoms/AssetPreview/index.js +119 -0
  75. package/src/components/atoms/AssetPreview/styles.js +190 -0
  76. package/src/components/atoms/IconFile/index.js +28 -1
  77. package/src/components/atoms/IconFile/styles.js +8 -0
  78. package/src/components/atoms/ProductImage/ProductImage.stories.js +38 -0
  79. package/src/components/atoms/ProductImage/index.js +95 -20
  80. package/src/components/atoms/ProductImage/styles.js +92 -7
  81. package/src/components/molecules/EditionActiveImage/index.js +2 -2
  82. package/src/components/molecules/GalleryAssetElement/GalleryAssetElement.stories.js +102 -0
  83. package/src/components/molecules/GalleryAssetElement/index.js +162 -0
  84. package/src/components/molecules/GalleryAssetElement/styles.js +163 -0
  85. package/src/components/molecules/GalleryElement/index.js +9 -0
  86. package/src/components/molecules/GalleryHeader/index.js +65 -13
  87. package/src/components/molecules/GalleryHeader/styles.js +2 -1
  88. package/src/components/molecules/GalleryTrayTabs/GalleryTrayTabs.stories.js +32 -0
  89. package/src/components/molecules/GalleryTrayTabs/index.js +41 -0
  90. package/src/components/molecules/GalleryTrayTabs/styles.js +52 -0
  91. package/src/components/molecules/ImageSelector/index.js +1 -0
  92. package/src/components/molecules/RetailerSelector/RetailerSelector.stories.js +15 -1
  93. package/src/components/molecules/RetailerSelector/index.js +8 -1
  94. package/src/components/molecules/RetailerSelectorv2/index.js +7 -1
  95. package/src/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js +164 -0
  96. package/src/components/organisms/DigitalAssetsTray/index.js +193 -0
  97. package/src/components/organisms/DigitalAssetsTray/styles.js +183 -0
  98. package/src/components/organisms/ImagePreviewer/index.js +1 -0
  99. package/src/components/organisms/ProductImageModal/index.js +1 -0
  100. package/src/components/pages/RetailerProductEdition/context/provider-product-edition.context.jsx +201 -0
  101. package/src/components/pages/RetailerProductEdition/context/provider-product-edition.reducer.js +12 -0
  102. package/src/components/pages/RetailerProductEdition/index.js +356 -139
  103. package/src/components/pages/RetailerProductEdition/stories/ImageEditor.stories.js +1 -0
  104. package/src/global-files/data.js +17 -2
  105. package/src/global-files/digital-assets/assetTypes.js +451 -0
  106. package/src/global-files/digital-assets/assets.actions.js +50 -0
  107. package/src/global-files/digital-assets/assets.adapter.js +229 -0
  108. package/src/global-files/digital-assets/assets.mock.js +122 -0
  109. package/src/global-files/digital-assets/assets.reducer.js +197 -0
  110. package/src/global-files/digital-assets/uploadAssets.js +124 -0
  111. package/src/global-files/digital-assets/useDigitalAssets.js +340 -0
  112. package/src/index.js +4 -0
@@ -31,6 +31,7 @@ ImageEditor.args = {
31
31
  "Ficha técnica": false,
32
32
  Imágenes: true
33
33
  },
34
+ enableDigitalAssets: true,
34
35
  token: "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjN2U1YTZhNC0yYjNmLTRkNTQtYWY5OC05ZTA5YTRjYmMwMWUiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6ImM3ZTVhNmE0LTJiM2YtNGQ1NC1hZjk4LTllMDlhNGNiYzAxZSIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI5Y2Y2NTNkMS1iOTA1LTQ5ODgtYmI1MC0wY2E5NTllMTJkNTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODQ5Njg1MCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODUwMDQ1MCwiaWF0IjoxNzY4NDk2ODUwLCJlbWFpbCI6Imtpa2lqZTE0NjdAbXRsY3ouY29tIn0.kVyqMGAoe0ye3i882XuO_8xKf7vNzpPPse3852YP70aK4f9vq7o7NP0DhPTv5UnrcwC0Lcu_UOqoplyHxgPbIzrKF6e4Ket_T7KA2GHnO7-d30wmYl2GxMm_pSgb_qP_IZpVj5bmlST26LpEftZDHPAue3eQaZ0xRBwkI5dkVbVWncZz9iVdrUdz5FC5gXuAHyEQzn-669UsywrtlRN5y8EgcxsccNmsL_El5ctGZYiNMgn1mBeS-FvEikhNORoZqS0e8JKaYmL-e2jcrEuShpDE3mJMsm0E_KBUxt_t0FoB-tUlRDWlDkpIWHNidzTYAUfudc908ykQ15b3EdvFVw",
35
36
  productSelected: {
36
37
  orderId: 10421,
@@ -107,7 +107,7 @@ var getImage = function getImage(imageGeneral) {
107
107
  var height = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 250;
108
108
 
109
109
  try {
110
- var _imageGeneral$image_i;
110
+ var _imageGeneral$image_i, _ext;
111
111
 
112
112
  // `id_image` es el nombre de la columna en base de datos; `image_id` el que
113
113
  // usa el front. Se acepta cualquiera de los dos para que la URL se arme
@@ -117,14 +117,27 @@ var getImage = function getImage(imageGeneral) {
117
117
  });
118
118
  var ext = image.src.split(".");
119
119
  var uuid = ext[0].split("-");
120
+ var extension = (_ext = ext[ext.length - 1]) === null || _ext === void 0 ? void 0 : _ext.toLowerCase();
121
+ /*
122
+ El redimensionador de CloudFront reprocesa el archivo con sharp: sirve
123
+ para una foto de producto y destruye todo lo demás. Un mp4 devuelve un
124
+ error que la etiqueta <video> no puede reproducir, y un gif animado sale
125
+ aplanado a un solo fotograma.
126
+ Por eso solo los formatos que sharp sabe redimensionar pasan por el
127
+ resizer; el resto se queda con la URL directa a S3, que es la misma que
128
+ usa la descarga de imágenes. Sin esto hacía falta bajar cada video
129
+ completo a base64 solo para generarle una miniatura.
130
+ */
131
+
132
+ var isResizable = ["jpg", "jpeg", "png", "webp", "tiff", "avif"].includes(extension);
120
133
  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, image), {}, {
121
134
  version: image.id_version,
122
- ext: ext[ext.length - 1],
135
+ ext: extension,
123
136
  uuid: uuid.reduce(function (prevVal, currVal, idx) {
124
137
  if (idx < 2) return "";else return idx === 2 ? currVal : prevVal + "-" + currVal;
125
138
  }, "") || (0, _uuid.v4)(),
126
139
  srcDB: image.src,
127
- src: image.image_id ? "https://d24s337exbt5zr.cloudfront.net/" + _jsBase.Base64.encode(JSON.stringify({
140
+ src: image.image_id && !isResizable ? "https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(image.src) : image.image_id ? "https://d24s337exbt5zr.cloudfront.net/" + _jsBase.Base64.encode(JSON.stringify({
128
141
  bucket: process.env.REACT_APP_IMAGES_BUCKET,
129
142
  key: image.src,
130
143
  edits: {
@@ -0,0 +1,517 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ 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;
9
+
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
11
+
12
+ /**
13
+ * Catálogo de activos digitales.
14
+ *
15
+ * Este archivo es la ÚNICA fuente de verdad de qué se puede subir a la bandeja
16
+ * y con qué límites. Ajustar un tipo o un tope es cambiar un dato aquí, no
17
+ * tocar lógica repartida por la pantalla.
18
+ *
19
+ * Un activo NO es un "tipo de toma". Las imágenes de producto se validan contra
20
+ * `image_manager` (orden, obligatoriedad, cupo por cadena); los activos no
21
+ * entran a ese cruce y por eso tienen su propio catálogo.
22
+ *
23
+ * DOS COSAS QUE PARECEN DETALLE Y NO LO SON:
24
+ *
25
+ * 1. El tipo se decide por EXTENSIÓN, no por mime. El navegador no sabe qué es
26
+ * un .psd, un .ai o un .indd: reporta `application/octet-stream`, cadena
27
+ * vacía, o —peor— `application/pdf` para un .ai. Validar por mime dejaría
28
+ * fuera justo los formatos editables que se pidieron.
29
+ * 2. Por lo mismo, el `accept` del dropzone se arma con extensiones además de
30
+ * mimes. Si solo llevara mimes, react-dropzone descartaría esos archivos
31
+ * antes de que nuestra validación llegue a verlos, y el usuario no vería
32
+ * ningún mensaje: simplemente no pasaría nada al soltarlos.
33
+ */
34
+ var KB = 1024;
35
+ var MB = 1024 * KB;
36
+ /**
37
+ * Cómo se pinta un archivo en pantalla. No es lo mismo que el tipo de activo:
38
+ * un 360 puede ser mp4 (se reproduce) o gif (se muestra), así que la forma de
39
+ * previsualizar se resuelve por el archivo real, no por su categoría.
40
+ */
41
+
42
+ var ASSET_PREVIEW = {
43
+ VIDEO: "video",
44
+ IMAGE: "image",
45
+ ICON: "icon"
46
+ };
47
+ /**
48
+ * PROVISIONAL: cantidad máxima de activos por producto. Es el único dato que
49
+ * el manager no respondió. Subido de 10 a 20 porque la lista de tipos creció
50
+ * (documentos y editables, no solo multimedia).
51
+ */
52
+
53
+ exports.ASSET_PREVIEW = ASSET_PREVIEW;
54
+ var MAX_ASSETS_PER_PRODUCT = 20;
55
+ /**
56
+ * Duración válida de un video.
57
+ *
58
+ * Hoy la ficha valida `duracion <= 10 || duracion >= 600` mientras el mensaje al
59
+ * usuario dice "entre 15 segundos y 10 minutos". Los dos no pueden ser ciertos.
60
+ * Se conserva el rango que el código valida de verdad, y el mensaje se genera
61
+ * desde estos mismos números para que no se vuelvan a desincronizar.
62
+ */
63
+
64
+ exports.MAX_ASSETS_PER_PRODUCT = MAX_ASSETS_PER_PRODUCT;
65
+ var VIDEO_DURATION_SECONDS = {
66
+ min: 10,
67
+ max: 600
68
+ };
69
+ exports.VIDEO_DURATION_SECONDS = VIDEO_DURATION_SECONDS;
70
+ var ASSET_TYPES = {
71
+ /*
72
+ Imágenes sueltas: fotos de ambientación, lifestyle, material de campaña.
73
+ No sustituyen a la galería de la pestaña Imágenes, que valida tomas
74
+ contra `image_manager`; aquí no cuentan para el avance ni tienen orden.
75
+ El gif tiene su propio tipo y el svg vive en "editable": se sirve como
76
+ descarga porque un svg abierto en el navegador ejecuta scripts.
77
+ */
78
+ imagen: {
79
+ id: "imagen",
80
+ label: "Imagen",
81
+ description: "Foto o imagen suelta (ambientación, lifestyle, campaña)",
82
+ mimes: ["image/jpeg", "image/png", "image/webp", "image/bmp", "image/avif", "image/tiff"],
83
+ extensions: ["jpg", "jpeg", "png", "webp", "bmp", "avif", "tif", "tiff"],
84
+ maxBytes: 50 * MB,
85
+ validatesDuration: false
86
+ },
87
+ 360: {
88
+ id: "360",
89
+ label: "360",
90
+ description: "Giro del producto, en mp4 o gif animado",
91
+ mimes: ["video/mp4", "image/gif"],
92
+ extensions: ["mp4", "gif"],
93
+ maxBytes: 200 * MB,
94
+ validatesDuration: true
95
+ },
96
+ video: {
97
+ id: "video",
98
+ label: "Video",
99
+ description: "Video de producto o promocional",
100
+ mimes: ["video/mp4", "video/quicktime", "video/webm"],
101
+ extensions: ["mp4", "mov", "webm"],
102
+ maxBytes: 200 * MB,
103
+ validatesDuration: true
104
+ },
105
+ gif: {
106
+ id: "gif",
107
+ label: "GIF",
108
+ description: "Animación corta",
109
+ mimes: ["image/gif"],
110
+ extensions: ["gif"],
111
+ maxBytes: 20 * MB,
112
+ validatesDuration: false
113
+ },
114
+ documento: {
115
+ id: "documento",
116
+ label: "Documento",
117
+ description: "Manual, ficha técnica, certificado",
118
+ mimes: ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
119
+ extensions: ["pdf", "doc", "docx"],
120
+ maxBytes: 50 * MB,
121
+ validatesDuration: false
122
+ },
123
+ hoja_calculo: {
124
+ id: "hoja_calculo",
125
+ label: "Hoja de cálculo",
126
+ description: "Listas de medidas, tablas de tallas, matrices",
127
+ mimes: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/csv"],
128
+ extensions: ["xlsx", "xls", "csv"],
129
+ maxBytes: 20 * MB,
130
+ validatesDuration: false
131
+ },
132
+
133
+ /*
134
+ Archivos de diseño editables. Es la categoría con más riesgo: un .psd con
135
+ capas o un .aep pasan sin esfuerzo de 1 GB, y ninguno se puede previsualizar
136
+ en el navegador —se muestran con icono y nombre—. El tope de aquí abajo es
137
+ una propuesta, no un dato confirmado.
138
+ */
139
+ editable: {
140
+ id: "editable",
141
+ label: "Editable",
142
+ description: "Archivo de diseño con capas (Photoshop, Illustrator, InDesign…)",
143
+ mimes: [],
144
+ extensions: ["psd", "psb", // Photoshop
145
+ "ai", "eps", // Illustrator
146
+ "indd", "idml", // InDesign
147
+ "aep", // After Effects
148
+ "prproj", // Premiere
149
+ "sketch", "fig", "xd", // Sketch, Figma, Adobe XD
150
+ "afphoto", "afdesign", // Affinity
151
+ "svg"],
152
+ maxBytes: 500 * MB,
153
+ validatesDuration: false
154
+ },
155
+ comprimido: {
156
+ id: "comprimido",
157
+ label: "Comprimido",
158
+ description: "Paquete de varios archivos en un solo zip",
159
+ mimes: ["application/zip", "application/x-rar-compressed", "application/x-7z-compressed"],
160
+ extensions: ["zip", "rar", "7z"],
161
+ maxBytes: 500 * MB,
162
+ validatesDuration: false
163
+ },
164
+ otro: {
165
+ id: "otro",
166
+ label: "Otro",
167
+ description: "Formato no reconocido",
168
+ mimes: [],
169
+ extensions: [],
170
+ maxBytes: 50 * MB,
171
+ validatesDuration: false
172
+ }
173
+ };
174
+ /** Orden en que se muestran en el selector de tipo. */
175
+
176
+ exports.ASSET_TYPES = ASSET_TYPES;
177
+ var ASSET_TYPE_ORDER = ["imagen", "360", "video", "gif", "documento", "hoja_calculo", "editable", "comprimido", "otro"];
178
+ /** Opciones listas para el componente `Select` (espera `{ value, name }`). */
179
+
180
+ exports.ASSET_TYPE_ORDER = ASSET_TYPE_ORDER;
181
+
182
+ var assetTypeOptions = function assetTypeOptions() {
183
+ return ASSET_TYPE_ORDER.map(function (id) {
184
+ return {
185
+ value: id,
186
+ name: ASSET_TYPES[id].label
187
+ };
188
+ });
189
+ };
190
+ /** Extensiones que el navegador pinta como imagen. */
191
+
192
+
193
+ exports.assetTypeOptions = assetTypeOptions;
194
+ var IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "webp", "gif", "bmp", "avif", "svg", "tiff"];
195
+ /**
196
+ * Formatos de video que un navegador REPRODUCE de verdad.
197
+ *
198
+ * No es lo mismo que "es un video". Un .mov se sube bien y S3 lo sirve como
199
+ * video/quicktime, pero Chrome y Firefox no lo reproducen: una grabación de
200
+ * pantalla de macOS viene en HEVC o ProRes, que no saben decodificar. Tratarlo
201
+ * como reproducible pinta un recuadro negro sin explicación; mostrarlo como
202
+ * archivo dice la verdad y deja claro lo que sí se puede hacer: descargarlo.
203
+ */
204
+
205
+ exports.IMAGE_EXTENSIONS = IMAGE_EXTENSIONS;
206
+ var PLAYABLE_VIDEO_EXTENSIONS = ["mp4", "webm", "ogv", "ogg"];
207
+ /**
208
+ * Cómo pintar un archivo: manda la extensión y el mime queda de respaldo.
209
+ *
210
+ * La extensión manda porque el mime miente en las dos direcciones: un .psd
211
+ * llega sin él, y un .mov llega con uno que empieza por `video/` aunque el
212
+ * navegador no sepa reproducirlo.
213
+ *
214
+ * NUNCA por la URL. `ProductImage` lo hacía con `/\.mp4$/` y por eso fallaba:
215
+ * la URL guardada apunta al redimensionador de CloudFront y no conserva la
216
+ * extensión del archivo, así que un video jamás daba positivo.
217
+ */
218
+
219
+ exports.PLAYABLE_VIDEO_EXTENSIONS = PLAYABLE_VIDEO_EXTENSIONS;
220
+
221
+ var resolvePreviewKind = function resolvePreviewKind() {
222
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
223
+ mime = _ref.mime,
224
+ ext = _ref.ext,
225
+ name = _ref.name;
226
+
227
+ var extension = (ext || getExtension(name) || "").toLowerCase();
228
+
229
+ if (extension) {
230
+ if (PLAYABLE_VIDEO_EXTENSIONS.includes(extension)) return ASSET_PREVIEW.VIDEO;
231
+ if (IMAGE_EXTENSIONS.includes(extension)) return ASSET_PREVIEW.IMAGE;
232
+ return ASSET_PREVIEW.ICON;
233
+ }
234
+
235
+ if (mime === "video/mp4" || mime === "video/webm") return ASSET_PREVIEW.VIDEO;
236
+ if (mime !== null && mime !== void 0 && mime.startsWith("image/")) return ASSET_PREVIEW.IMAGE;
237
+ return ASSET_PREVIEW.ICON;
238
+ };
239
+
240
+ exports.resolvePreviewKind = resolvePreviewKind;
241
+
242
+ var getAssetType = function getAssetType(assetTypeId) {
243
+ var _ASSET_TYPES$assetTyp;
244
+
245
+ return (_ASSET_TYPES$assetTyp = ASSET_TYPES[assetTypeId]) !== null && _ASSET_TYPES$assetTyp !== void 0 ? _ASSET_TYPES$assetTyp : ASSET_TYPES.otro;
246
+ };
247
+
248
+ exports.getAssetType = getAssetType;
249
+
250
+ var getExtension = function getExtension() {
251
+ var fileName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
252
+ var parts = String(fileName).split(".");
253
+ return parts.length > 1 ? parts.pop().toLowerCase() : "";
254
+ };
255
+ /*
256
+ Qué tipo reclama cada extensión, resuelto una sola vez.
257
+
258
+ El orden de `ASSET_TYPE_ORDER` decide los empates: `mp4` y `gif` aparecen
259
+ también en "360", pero gana el tipo genérico porque es el caso común y el
260
+ usuario puede reetiquetarlo en la tarjeta. Mirando el archivo no hay forma de
261
+ saber si un giro es un giro.
262
+ */
263
+
264
+
265
+ exports.getExtension = getExtension;
266
+ var EXTENSION_INDEX = ASSET_TYPE_ORDER.reduce(function (index, id) {
267
+ ASSET_TYPES[id].extensions.forEach(function (ext) {
268
+ if (id !== "360" && !index[ext]) index[ext] = id;
269
+ });
270
+ return index;
271
+ }, {});
272
+ /**
273
+ * Tipo de activo sugerido para un archivo recién elegido.
274
+ *
275
+ * Manda la extensión. El mime solo se consulta como respaldo para los formatos
276
+ * multimedia, que son los únicos que el navegador reconoce con certeza: para un
277
+ * .psd o un .ai reporta `application/octet-stream` o nada, y para un .ai a veces
278
+ * `application/pdf`, que lo clasificaría como documento.
279
+ */
280
+
281
+ var suggestAssetType = function suggestAssetType() {
282
+ var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
283
+ mime = _ref2.mime,
284
+ name = _ref2.name;
285
+
286
+ var ext = getExtension(name);
287
+ if (EXTENSION_INDEX[ext]) return EXTENSION_INDEX[ext];
288
+ if (mime !== null && mime !== void 0 && mime.startsWith("video/")) return "video";
289
+ if (mime === "image/gif") return "gif";
290
+ if (mime === "application/pdf") return "documento";
291
+ return "otro";
292
+ };
293
+ /** Todos los mimes aceptados, sin repetir. */
294
+
295
+
296
+ exports.suggestAssetType = suggestAssetType;
297
+
298
+ var acceptedMimes = function acceptedMimes() {
299
+ return (0, _toConsumableArray2.default)(new Set(ASSET_TYPE_ORDER.flatMap(function (id) {
300
+ return ASSET_TYPES[id].mimes;
301
+ })));
302
+ };
303
+ /** Todas las extensiones aceptadas, sin repetir y con punto. */
304
+
305
+
306
+ exports.acceptedMimes = acceptedMimes;
307
+
308
+ var acceptedExtensions = function acceptedExtensions() {
309
+ return (0, _toConsumableArray2.default)(new Set(ASSET_TYPE_ORDER.flatMap(function (id) {
310
+ return ASSET_TYPES[id].extensions;
311
+ }))).map(function (ext) {
312
+ return ".".concat(ext);
313
+ });
314
+ };
315
+ /**
316
+ * Valor de `accept` para react-dropzone (v12: una cadena separada por comas).
317
+ *
318
+ * Lleva mimes Y extensiones. Con solo mimes, react-dropzone descartaría un
319
+ * .psd o un .indd antes de que nuestra validación llegue a verlos —el navegador
320
+ * no les asigna mime— y al soltarlos no pasaría absolutamente nada: ni el
321
+ * archivo, ni un mensaje de por qué.
322
+ */
323
+
324
+
325
+ exports.acceptedExtensions = acceptedExtensions;
326
+
327
+ var buildDropzoneAccept = function buildDropzoneAccept() {
328
+ return [].concat((0, _toConsumableArray2.default)(acceptedMimes()), (0, _toConsumableArray2.default)(acceptedExtensions())).join(", ");
329
+ };
330
+ /** Lista legible de formatos, para mensajes y para la ayuda de la bandeja. */
331
+
332
+
333
+ exports.buildDropzoneAccept = buildDropzoneAccept;
334
+
335
+ var acceptedFormatsLabel = function acceptedFormatsLabel() {
336
+ return acceptedExtensions().map(function (ext) {
337
+ return ext.replace(".", "").toUpperCase();
338
+ }).join(", ");
339
+ };
340
+
341
+ exports.acceptedFormatsLabel = acceptedFormatsLabel;
342
+ var GB = 1024 * MB;
343
+
344
+ var formatBytes = function formatBytes(bytes) {
345
+ var value = Number(bytes);
346
+ if (!Number.isFinite(value) || value <= 0) return "-";
347
+ if (value < KB) return "".concat(value, " B");
348
+ 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
349
+ // 1.2 GB se anunciaba como "1228.8 MB".
350
+
351
+ if (value < GB) return "".concat((value / MB).toFixed(1), " MB");
352
+ return "".concat((value / GB).toFixed(2), " GB");
353
+ };
354
+ /** Duración compacta para la tarjeta del activo: "1:05". */
355
+
356
+
357
+ exports.formatBytes = formatBytes;
358
+
359
+ var formatDuration = function formatDuration(seconds) {
360
+ var value = Number(seconds);
361
+ if (!Number.isFinite(value) || value <= 0) return "-";
362
+ var mins = Math.floor(value / 60);
363
+ var secs = Math.round(value % 60);
364
+ return "".concat(mins, ":").concat(String(secs).padStart(2, "0"));
365
+ };
366
+ /** Duración en prosa para los mensajes de error: "10 segundos", "10 minutos". */
367
+
368
+
369
+ exports.formatDuration = formatDuration;
370
+
371
+ var humanizeDuration = function humanizeDuration(seconds) {
372
+ var value = Number(seconds);
373
+ if (!Number.isFinite(value) || value <= 0) return "-";
374
+ if (value < 60) return "".concat(Math.round(value), " segundos");
375
+ var mins = value / 60;
376
+ var label = Number.isInteger(mins) ? mins : mins.toFixed(1);
377
+ return "".concat(label, " ").concat(mins === 1 ? "minuto" : "minutos");
378
+ };
379
+ /**
380
+ * Valida un archivo ANTES de tocar la red: tipo permitido, peso y cupo.
381
+ *
382
+ * Se separa de la subida a propósito. Da igual que el archivo termine yendo por
383
+ * URL prefirmada o por el `putObject` de hoy: esto no cambia, y es lo que evita
384
+ * que el navegador empiece a leer 200 MB que de todos modos se van a rechazar.
385
+ *
386
+ * @returns {{ valid: boolean, code?: string, message?: string }}
387
+ */
388
+
389
+
390
+ exports.humanizeDuration = humanizeDuration;
391
+
392
+ var validateAssetFile = function validateAssetFile(file) {
393
+ var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
394
+ _ref3$currentCount = _ref3.currentCount,
395
+ currentCount = _ref3$currentCount === void 0 ? 0 : _ref3$currentCount;
396
+
397
+ if (!file) {
398
+ return {
399
+ valid: false,
400
+ code: "NO_FILE",
401
+ message: "No se recibió ningún archivo."
402
+ };
403
+ } // El cupo se revisa al final: un archivo que no se puede subir de todos modos
404
+ // (formato o peso) debe decir ESA razón, no "ya no hay lugar".
405
+
406
+
407
+ var assetTypeId = suggestAssetType({
408
+ mime: file.type,
409
+ name: file.name
410
+ });
411
+ var assetType = getAssetType(assetTypeId);
412
+
413
+ if (assetTypeId === "otro") {
414
+ return {
415
+ valid: false,
416
+ code: "UNSUPPORTED_TYPE",
417
+ message: "\"".concat(file.name, "\" no es un formato permitido. Se aceptan: ").concat(acceptedFormatsLabel(), ".")
418
+ };
419
+ }
420
+
421
+ if (file.size > assetType.maxBytes) {
422
+ return {
423
+ valid: false,
424
+ code: "MAX_SIZE",
425
+ message: "\"".concat(file.name, "\" pesa ").concat(formatBytes(file.size), " y el m\xE1ximo para ").concat(assetType.label, " es ").concat(formatBytes(assetType.maxBytes), ".")
426
+ };
427
+ }
428
+
429
+ if (currentCount >= MAX_ASSETS_PER_PRODUCT) {
430
+ return {
431
+ valid: false,
432
+ code: "MAX_ASSETS",
433
+ message: "\"".concat(file.name, "\" no se agreg\xF3: solo puedes almacenar ").concat(MAX_ASSETS_PER_PRODUCT, " activos digitales por producto.")
434
+ };
435
+ }
436
+
437
+ return {
438
+ valid: true,
439
+ assetType: assetTypeId,
440
+ warning: warnAssetFile(file, assetTypeId)
441
+ };
442
+ };
443
+ /**
444
+ * Aviso para un archivo que SÍ se acepta pero que el usuario no va a poder ver.
445
+ *
446
+ * El caso que sorprende es el video: alguien sube una grabación de pantalla de
447
+ * macOS —un .mov— esperando reproducirla, y el navegador no la decodifica. El
448
+ * archivo sirve igual para entregarlo al retailer, así que no se rechaza; pero
449
+ * enterarse al soltarlo es mucho mejor que enterarse al intentar verlo.
450
+ *
451
+ * No se avisa de un .psd o un .indd: nadie espera previsualizar un archivo de
452
+ * diseño, y un aviso por cada uno sería ruido.
453
+ */
454
+
455
+
456
+ exports.validateAssetFile = validateAssetFile;
457
+
458
+ var warnAssetFile = function warnAssetFile(file, assetTypeId) {
459
+ if (assetTypeId !== "video" && assetTypeId !== "360") return null;
460
+ var ext = getExtension(file === null || file === void 0 ? void 0 : file.name);
461
+ if (PLAYABLE_VIDEO_EXTENSIONS.includes(ext)) return null;
462
+ 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.");
463
+ };
464
+ /**
465
+ * Aviso para un video cuya duración el navegador no pudo leer (códec que no
466
+ * conoce, archivo dañado). No se rechaza: sirve igual para entregarlo, solo que
467
+ * aquí no se podrá ver ni se sabe cuánto dura.
468
+ */
469
+
470
+
471
+ exports.warnAssetFile = warnAssetFile;
472
+
473
+ var warnUnreadableVideo = function warnUnreadableVideo(fileName) {
474
+ 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.");
475
+ };
476
+ /**
477
+ * Valida la duración de un video. Va aparte de `validateAssetFile` porque
478
+ * obtenerla es asíncrono (hay que cargar el archivo en un <video>) y no se
479
+ * quiere pagar ese costo en archivos que ya fueron rechazados por peso.
480
+ *
481
+ * `seconds` en null significa "no se pudo medir" y no se rechaza: `Number(null)`
482
+ * es 0 y, sin esta guarda, todo video ilegible salía como "dura menos de 10 s".
483
+ */
484
+
485
+
486
+ exports.warnUnreadableVideo = warnUnreadableVideo;
487
+
488
+ var validateAssetDuration = function validateAssetDuration(seconds, assetTypeId) {
489
+ var fileName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "El video";
490
+ var assetType = getAssetType(assetTypeId);
491
+ if (!assetType.validatesDuration) return {
492
+ valid: true
493
+ };
494
+ if (seconds === null || seconds === undefined) return {
495
+ valid: true
496
+ };
497
+ var value = Number(seconds);
498
+ if (!Number.isFinite(value)) return {
499
+ valid: true
500
+ };
501
+ var min = VIDEO_DURATION_SECONDS.min,
502
+ max = VIDEO_DURATION_SECONDS.max;
503
+
504
+ if (value < min || value > max) {
505
+ return {
506
+ valid: false,
507
+ code: "DURATION",
508
+ message: "\"".concat(fileName, "\" dura ").concat(humanizeDuration(value), "; los videos deben durar entre ").concat(humanizeDuration(min), " y ").concat(humanizeDuration(max), ".")
509
+ };
510
+ }
511
+
512
+ return {
513
+ valid: true
514
+ };
515
+ };
516
+
517
+ exports.validateAssetDuration = validateAssetDuration;
@@ -0,0 +1,64 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.assetsInitialState = exports.ASSET_ACTIONS = void 0;
7
+
8
+ /**
9
+ * Vocabulario compartido del estado de activos digitales.
10
+ *
11
+ * Vive aquí, y no dentro del reducer, para que nadie dependa de nadie en la
12
+ * dirección equivocada: el reducer de la ficha (`context/reducers/assets.js`)
13
+ * y el hook de la bandeja (`useDigitalAssets`) importan ambos estas constantes,
14
+ * y ninguno de los dos importa al otro. Es lo que permite probar el reducer
15
+ * suelto en Storybook sin arrastrar la pantalla completa.
16
+ */
17
+ var ASSET_ACTIONS = {
18
+ /** Reemplaza toda la lista con lo que devolvió el backend. Limpia el rastreo. */
19
+ SET_ASSETS_VALUES: "SET_ASSETS_VALUES",
20
+
21
+ /** Agrega activos recién soltados y ya validados. */
22
+ ADD_ASSETS: "ADD_ASSETS",
23
+
24
+ /**
25
+ * Cambio hecho por el usuario (reetiquetar el tipo, renombrar). Si el activo
26
+ * ya existe en el backend, queda marcado para enviarse al guardar.
27
+ */
28
+ UPDATE_ASSET: "UPDATE_ASSET",
29
+
30
+ /**
31
+ * Cambio de ciclo de vida de la subida: progreso, estado, error, o la clave
32
+ * de S3 que devuelve el backend. NO marca nada para guardar —el progreso de
33
+ * una barra no es una edición del usuario— y por eso está separado de
34
+ * `UPDATE_ASSET` en vez de ser una bandera.
35
+ */
36
+ PATCH_ASSET: "PATCH_ASSET",
37
+
38
+ /** Quita un activo de la lista. Si ya existía en el backend, lo anota para borrarlo. */
39
+ REMOVE_ASSET: "REMOVE_ASSET",
40
+ SET_SELECTED_ASSETS: "SET_SELECTED_ASSETS",
41
+ TOGGLE_CHECK_ALL_ASSETS: "TOGGLE_CHECK_ALL_ASSETS",
42
+
43
+ /** Tras un guardado exitoso: olvida qué cambió y qué se borró. */
44
+ CLEAR_ASSETS_TRACKING: "CLEAR_ASSETS_TRACKING"
45
+ };
46
+ exports.ASSET_ACTIONS = ASSET_ACTIONS;
47
+ var assetsInitialState = {
48
+ /** Lista completa, en el modelo de interfaz de `assets.adapter`. */
49
+ assets_values: [],
50
+
51
+ /**
52
+ * Claves de los activos YA GUARDADOS que el usuario modificó. Se guardan
53
+ * claves y no copias del objeto: una copia se queda vieja en cuanto el
54
+ * usuario vuelve a tocar el activo, y al guardar se enviaría el valor
55
+ * anterior. Con la clave, el objeto se lee siempre de `assets_values`.
56
+ */
57
+ updated_assets: [],
58
+
59
+ /** Ids del backend pendientes de borrar. */
60
+ deleted_assets: [],
61
+ selected_assets: [],
62
+ all_assets_checked: false
63
+ };
64
+ exports.assetsInitialState = assetsInitialState;