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