contentoh-components-library 21.6.56 → 21.6.57

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

@@ -353,10 +353,13 @@ var useDigitalAssets = function useDigitalAssets() {
         _Array$from,
         file,
         check,
+        warning,
         objectUrl,
         asset,
+        isVideoFile,
         duration,
         durationCheck,
+        _warning,
         _args3 = arguments;
 
     return _regenerator.default.wrap(function _callee3$(_context3) {
@@ -371,7 +374,7 @@ var useDigitalAssets = function useDigitalAssets() {
 
           case 5:
             if (!(_i < _Array$from.length)) {
-              _context3.next = 29;
+              _context3.next = 31;
               break;
             }
 
@@ -391,39 +394,37 @@ var useDigitalAssets = function useDigitalAssets() {
               code: check.code,
               message: check.message
             });
-            return _context3.abrupt("continue", 26);
+            return _context3.abrupt("continue", 28);
 
           case 11:
-            // Se acepta, pero hay algo que decirle al usuario sobre este archivo.
-            if (check.warning) {
-              avisos.push({
-                level: "warning",
-                name: file.name,
-                message: check.warning
-              });
-            }
-
+            // Se acepta, pero hay algo que decirle al usuario. Se junta aquí y se
+            // publica solo si el archivo termina agregándose: si luego lo rechaza la
+            // duración, un "se agregaron" junto al error sería contradictorio.
+            warning = check.warning;
             objectUrl = URL.createObjectURL(file);
             asset = (0, _assets2.fromFile)(file, {
               assetType: check.assetType,
               objectUrl: objectUrl
             }); // La duración solo se mide en lo que la valida, y después del peso: no
-            // tiene sentido abrir un archivo que ya se rechazó.
+            // tiene sentido abrir un archivo que ya se rechazó. Un 360 en gif no es
+            // un video: <video> no lo abre y no hay duración que medir.
 
-            if (!(check.assetType === "video" || check.assetType === "360")) {
-              _context3.next = 24;
+            isVideoFile = (0, _assetTypes.getExtension)(file.name) !== "gif";
+
+            if (!((check.assetType === "video" || check.assetType === "360") && isVideoFile)) {
+              _context3.next = 25;
               break;
             }
 
-            _context3.next = 17;
+            _context3.next = 18;
             return readVideoDuration(objectUrl);
 
-          case 17:
+          case 18:
             duration = _context3.sent;
-            durationCheck = (0, _assetTypes.validateAssetDuration)(duration, check.assetType);
+            durationCheck = (0, _assetTypes.validateAssetDuration)(duration, check.assetType, file.name);
 
             if (durationCheck.valid) {
-              _context3.next = 23;
+              _context3.next = 24;
               break;
             }
 
@@ -434,21 +435,33 @@ var useDigitalAssets = function useDigitalAssets() {
               code: durationCheck.code,
               message: durationCheck.message
             });
-            return _context3.abrupt("continue", 26);
-
-          case 23:
-            asset.duration = duration;
+            return _context3.abrupt("continue", 28);
 
           case 24:
+            if (duration === null) {
+              warning = (_warning = warning) !== null && _warning !== void 0 ? _warning : (0, _assetTypes.warnUnreadableVideo)(file.name);
+            } else {
+              asset.duration = duration;
+            }
+
+          case 25:
+            if (warning) {
+              avisos.push({
+                level: "warning",
+                name: file.name,
+                message: warning
+              });
+            }
+
             accepted.push(asset);
             count += 1;
 
-          case 26:
+          case 28:
             _i++;
             _context3.next = 5;
             break;
 
-          case 29:
+          case 31:
             if (accepted.length) {
               countRef.current = count;
               dispatch({
@@ -466,7 +479,7 @@ var useDigitalAssets = function useDigitalAssets() {
               notices: avisos
             });
 
-          case 32:
+          case 34:
           case "end":
             return _context3.stop();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.56",
+  "version": "21.6.57",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/AsignationOption/index.js

@@ -38,7 +38,7 @@ export const AsignationOption = ({
   };
 
   return (
-    <Container onClick={onClick}>
+    <Container onClick={onClick} className={active ? "active-option" : undefined}>
       <Avatar
         imageType={imageType}
         image={profileImage}

package/src/components/atoms/AsignationOption/styles.js

@@ -63,6 +63,15 @@ export const Container = styled.div`
     background-color: ${GlobalColors.s3};
   }
 
+  /* La opción seleccionada (hoy: la cadena activa en el selector de cadenas). */
+  &.active-option {
+    background-color: rgba(${GlobalColors.rgb_color_pink}, 0.1);
+
+    &:hover {
+      background-color: rgba(${GlobalColors.rgb_color_pink}, 0.18);
+    }
+  }
+
   & + * {
     margin-top: 10px;
   }

package/src/components/molecules/GalleryAssetElement/styles.js

@@ -126,9 +126,13 @@ export const Container = styled.div`
     transition: width 0.2s ease-out;
   }
 
+  /* En la fila, que es una rejilla de dos columnas, el mensaje ocupa todo el
+     ancho. Si no, cae en la columna del checkbox, la ensancha hasta su palabra
+     más larga y descuadra la fila contra las demás. */
   .asset-error-message {
+    grid-column: 1 / -1;
     margin: 2px 0 0;
-    padding: 0 8px;
+    padding: 0 8px 6px;
     font-family: ${FontFamily.Lato};
     font-size: 11px;
     line-height: 15px;

package/src/components/molecules/RetailerSelector/RetailerSelector.stories.js

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { RetailerSelector } from "./index";
 
 export default {
@@ -5,7 +6,20 @@ export default {
   component: RetailerSelector,
 };
 
-const Template = (args) => <RetailerSelector {...args} />;
+// El panel se abre hacia la izquierda del avatar: sin margen quedaría fuera de
+// la vista. La cadena activa vive en estado para que elegir otra se vea.
+const Template = (args) => {
+  const [activeRetailer, setActiveRetailer] = useState(args.retailers[1]);
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end", width: 420 }}>
+      <RetailerSelector
+        {...args}
+        activeRetailer={activeRetailer}
+        setActiveRetailer={setActiveRetailer}
+      />
+    </div>
+  );
+};
 
 export const RetailerSelectorDefault = Template.bind({});
 RetailerSelectorDefault.args = {

package/src/components/molecules/RetailerSelector/index.js

@@ -89,7 +89,14 @@ export const RetailerSelector = ({
                 );
                 setRetailersPanel(false);
               }}
-              active={retailer.id === activeRetailer.id}
+              // El id llega como `id` o como `id_retailer` según el origen
+              // (en RetailerProductEdition, `categoryRetailerInOrder` usa
+              // `id_retailer`); comparar solo `id` nunca marcaba la activa.
+              active={
+                (retailer?.id ?? retailer?.id_retailer) != null &&
+                (retailer?.id ?? retailer?.id_retailer) ===
+                  (activeRetailer?.id ?? activeRetailer?.id_retailer)
+              }
               showStatus={showStatus}
             />
           ))}

package/src/components/molecules/RetailerSelectorv2/index.js

@@ -69,7 +69,13 @@ export const RetailerSelectorv2 = ({
                 );
                 setRetailersPanel(false);
               }}
-              active={retailer.id === activeRetailer.id}
+              // El id llega como `id` o como `id_retailer` según el origen;
+              // comparar solo `id` nunca marcaba la cadena activa.
+              active={
+                (retailer?.id ?? retailer?.id_retailer) != null &&
+                (retailer?.id ?? retailer?.id_retailer) ===
+                  (activeRetailer?.id ?? activeRetailer?.id_retailer)
+              }
               showStatus={showStatus}
             />
           ))}

package/src/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js

@@ -9,7 +9,12 @@ import {
   hasUnsavedAssets,
   selectAssetsToSave,
 } from "../../../global-files/digital-assets/assets.reducer";
-import { buildSavePayload } from "../../../global-files/digital-assets/assets.adapter";
+import {
+  ASSET_STATUS,
+  buildSavePayload,
+  fromFile,
+} from "../../../global-files/digital-assets/assets.adapter";
+import { ASSET_ACTIONS } from "../../../global-files/digital-assets/assets.actions";
 import { backendAssetsMock } from "../../../global-files/digital-assets/assets.mock";
 
 export default {
@@ -22,7 +27,13 @@ export default {
   Así lo que se ve aquí es el comportamiento real: qué queda marcado para
   guardar, qué se anota para borrar y qué payload saldría hacia el backend.
 */
-const Demo = ({ initialAssets = [], gridLayout = false, readOnly = false, showPayload = false }) => {
+const Demo = ({
+  initialAssets = [],
+  localAssets = [],
+  gridLayout = false,
+  readOnly = false,
+  showPayload = false,
+}) => {
   const [state, dispatch] = useReducer(assetsReducer, assetsInitialState);
   const [notices, setNotices] = useState([]);
 
@@ -35,8 +46,16 @@ const Demo = ({ initialAssets = [], gridLayout = false, readOnly = false, showPa
 
   // Carga inicial simulando la respuesta del backend, una sola vez.
   const [loaded, setLoaded] = useState(false);
-  if (!loaded && initialAssets.length) {
-    tray.replaceAll(initialAssets);
+  if (!loaded && (initialAssets.length || localAssets.length)) {
+    if (initialAssets.length) tray.replaceAll(initialAssets);
+    // Archivos locales ya en un estado de subida (subiendo, con error...), para
+    // ver cómo se pintan sin tener que provocar el fallo contra el backend.
+    if (localAssets.length) {
+      dispatch({
+        type: ASSET_ACTIONS.ADD_ASSETS,
+        payload: localAssets.map(({ file, ...estado }) => ({ ...fromFile(file), ...estado })),
+      });
+    }
     setLoaded(true);
   }
 
@@ -99,3 +118,47 @@ export const SoloLectura = () => <Demo initialAssets={backendAssetsMock} readOnl
  * se ha subido a S3.
  */
 export const PayloadDeGuardado = () => <Demo initialAssets={backendAssetsMock} showPayload />;
+
+const archivo = (name, type) => new File(["x"], name, { type });
+
+/**
+ * Cómo se ve una subida que falla: el motivo aparece debajo del archivo y el
+ * resto sigue su curso. Los textos son los que producen de verdad
+ * `uploadAssets.js` (S3 y firma) y `presign-asset-upload` (rechazo del servidor).
+ */
+export const ErroresDeSubida = () => (
+  <Demo
+    localAssets={[
+      {
+        file: archivo("video-campana.mp4", "video/mp4"),
+        status: ASSET_STATUS.UPLOADING,
+        progress: 45,
+      },
+      {
+        file: archivo("manual-instalacion.pdf", "application/pdf"),
+        status: ASSET_STATUS.ERROR,
+        error: "No se pudo subir el archivo. Avisa a soporte (permiso de almacenamiento).",
+      },
+      {
+        file: archivo("render-final.psd", ""),
+        status: ASSET_STATUS.ERROR,
+        error: "El archivo supera el tamaño permitido.",
+      },
+      {
+        file: archivo("tabla-tallas.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"),
+        status: ASSET_STATUS.ERROR,
+        error: "No se pudo conectar para subir el archivo. Revisa tu conexión e inténtalo de nuevo.",
+      },
+      {
+        file: archivo("foto-lifestyle.jpg", "image/jpeg"),
+        status: ASSET_STATUS.ERROR,
+        error: "El archivo pesa más del máximo permitido para imagen",
+      },
+      {
+        file: archivo("catalogo.zip", "application/zip"),
+        status: ASSET_STATUS.ERROR,
+        error: "No se pudo preparar la subida. Revisa tu conexión e inténtalo de nuevo.",
+      },
+    ]}
+  />
+);

package/src/components/organisms/DigitalAssetsTray/index.js

@@ -47,7 +47,11 @@ export const DigitalAssetsTray = ({
     multiple: true,
     noClick: true,
     disabled: readOnly,
-    onDrop: (acceptedFiles) => addFiles?.(acceptedFiles),
+    // Los rechazados también pasan: react-dropzone los descarta por `accept`
+    // antes que nuestra validación, y sin esto soltar un formato no permitido
+    // no hacía nada. `addFiles` los valida y avisa por qué no entran.
+    onDrop: (acceptedFiles, fileRejections) =>
+      addFiles?.([...acceptedFiles, ...fileRejections.map(({ file }) => file)]),
   });
 
   const noticesBy = (level) => notices.filter((item) => item.level === level);
@@ -66,11 +70,11 @@ export const DigitalAssetsTray = ({
   return (
     <Container>
       <div className="tray-toolbar">
-        {/* La lista completa son 27 formatos: no cabe en una línea, así que va
+        {/* La lista completa son 35 formatos: no cabe en una línea, así que va
             en el title y en el texto solo las familias. */}
         <p className="tray-hint" title={`Formatos permitidos: ${acceptedFormatsLabel()}`}>
-          Arrastra aquí videos, 360, GIF, documentos, hojas de cálculo o archivos
-          editables. Quedan {remaining} de {MAX_ASSETS_PER_PRODUCT}.
+          Arrastra aquí imágenes, videos, 360, GIF, documentos, hojas de cálculo
+          o archivos editables. Quedan {remaining} de {MAX_ASSETS_PER_PRODUCT}.
         </p>
         {!readOnly && (
           <ButtonV2

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

@@ -56,6 +56,23 @@ export const VIDEO_DURATION_SECONDS = {
 };
 
 export const ASSET_TYPES = {
+  /*
+    Imágenes sueltas: fotos de ambientación, lifestyle, material de campaña.
+    No sustituyen a la galería de la pestaña Imágenes, que valida tomas
+    contra `image_manager`; aquí no cuentan para el avance ni tienen orden.
+
+    El gif tiene su propio tipo y el svg vive en "editable": se sirve como
+    descarga porque un svg abierto en el navegador ejecuta scripts.
+  */
+  imagen: {
+    id: "imagen",
+    label: "Imagen",
+    description: "Foto o imagen suelta (ambientación, lifestyle, campaña)",
+    mimes: ["image/jpeg", "image/png", "image/webp", "image/bmp", "image/avif", "image/tiff"],
+    extensions: ["jpg", "jpeg", "png", "webp", "bmp", "avif", "tif", "tiff"],
+    maxBytes: 50 * MB,
+    validatesDuration: false,
+  },
   360: {
     id: "360",
     label: "360",
@@ -155,6 +172,7 @@ export const ASSET_TYPES = {
 
 /** Orden en que se muestran en el selector de tipo. */
 export const ASSET_TYPE_ORDER = [
+  "imagen",
   "360",
   "video",
   "gif",
@@ -338,14 +356,8 @@ export const validateAssetFile = (file, { currentCount = 0 } = {}) => {
     };
   }
 
-  if (currentCount >= MAX_ASSETS_PER_PRODUCT) {
-    return {
-      valid: false,
-      code: "MAX_ASSETS",
-      message: `Solo puedes almacenar ${MAX_ASSETS_PER_PRODUCT} activos digitales por producto.`,
-    };
-  }
-
+  // El cupo se revisa al final: un archivo que no se puede subir de todos modos
+  // (formato o peso) debe decir ESA razón, no "ya no hay lugar".
   const assetTypeId = suggestAssetType({ mime: file.type, name: file.name });
   const assetType = getAssetType(assetTypeId);
 
@@ -369,6 +381,14 @@ export const validateAssetFile = (file, { currentCount = 0 } = {}) => {
     };
   }
 
+  if (currentCount >= MAX_ASSETS_PER_PRODUCT) {
+    return {
+      valid: false,
+      code: "MAX_ASSETS",
+      message: `"${file.name}" no se agregó: solo puedes almacenar ${MAX_ASSETS_PER_PRODUCT} activos digitales por producto.`,
+    };
+  }
+
   return { valid: true, assetType: assetTypeId, warning: warnAssetFile(file, assetTypeId) };
 };
 
@@ -392,15 +412,27 @@ export const warnAssetFile = (file, assetTypeId) => {
   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í.`;
 };
 
+/**
+ * Aviso para un video cuya duración el navegador no pudo leer (códec que no
+ * conoce, archivo dañado). No se rechaza: sirve igual para entregarlo, solo que
+ * aquí no se podrá ver ni se sabe cuánto dura.
+ */
+export const warnUnreadableVideo = (fileName) =>
+  `"${fileName}" se guardará y se podrá descargar, pero el navegador no pudo leerlo: no se podrá reproducir aquí ni se validó su duración.`;
+
 /**
  * Valida la duración de un video. Va aparte de `validateAssetFile` porque
  * obtenerla es asíncrono (hay que cargar el archivo en un <video>) y no se
  * quiere pagar ese costo en archivos que ya fueron rechazados por peso.
+ *
+ * `seconds` en null significa "no se pudo medir" y no se rechaza: `Number(null)`
+ * es 0 y, sin esta guarda, todo video ilegible salía como "dura menos de 10 s".
  */
-export const validateAssetDuration = (seconds, assetTypeId) => {
+export const validateAssetDuration = (seconds, assetTypeId, fileName = "El video") => {
   const assetType = getAssetType(assetTypeId);
   if (!assetType.validatesDuration) return { valid: true };
 
+  if (seconds === null || seconds === undefined) return { valid: true };
   const value = Number(seconds);
   if (!Number.isFinite(value)) return { valid: true };
 
@@ -409,7 +441,7 @@ export const validateAssetDuration = (seconds, assetTypeId) => {
     return {
       valid: false,
       code: "DURATION",
-      message: `Los videos deben durar entre ${humanizeDuration(
+      message: `"${fileName}" dura ${humanizeDuration(value)}; los videos deben durar entre ${humanizeDuration(
         min
       )} y ${humanizeDuration(max)}.`,
     };

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

@@ -29,20 +29,28 @@ import { toPayload } from "./assets.adapter";
  * bucket.
  */
 export const requestPresign = async ({ articleId, assets, token }) => {
-  const { data } = await axios.post(
-    process.env.REACT_APP_ASSETS_PRESIGN_ENDPOINT,
-    {
-      articleId,
-      files: assets.map((asset) => ({
-        // El `ref` vuelve tal cual en la respuesta. Emparejar por nombre sería
-        // frágil: dos archivos que se llamen igual acabarían con la clave del
-        // otro.
-        ref: asset.tempId,
-        ...toPayload(asset),
-      })),
-    },
-    { headers: { Authorization: token } },
-  );
+  let data;
+  try {
+    ({ data } = await axios.post(
+      process.env.REACT_APP_ASSETS_PRESIGN_ENDPOINT,
+      {
+        articleId,
+        files: assets.map((asset) => ({
+          // El `ref` vuelve tal cual en la respuesta. Emparejar por nombre sería
+          // frágil: dos archivos que se llamen igual acabarían con la clave del
+          // otro.
+          ref: asset.tempId,
+          ...toPayload(asset),
+        })),
+      },
+      { headers: { Authorization: token } },
+    ));
+  } catch (error) {
+    // "Network Error" o "Request failed with status code 502" no le dicen nada
+    // al usuario. El detalle queda en la consola para quien lo diagnostique.
+    console.error("Activos digitales: falló la firma de la subida", error);
+    throw new Error("No se pudo preparar la subida. Revisa tu conexión e inténtalo de nuevo.");
+  }
 
   // `integration: lambda` de API Gateway devuelve el objeto del handler tal
   // cual, con el cuerpo como cadena, en vez de traducirlo a una respuesta HTTP.
@@ -91,17 +99,24 @@ export const uploadToS3 = ({ upload, file, onProgress }) => new Promise((resolve
       desplegó solo la función y no el servicio completo.
     */
     const code = /<Code>(.*?)<\/Code>/.exec(xhr.responseText)?.[1];
-    reject(new Error(code === "EntityTooLarge"
-      ? "El archivo supera el tamaño permitido."
-      : `S3 rechazó la subida (${code || xhr.status}).`));
+    // El código técnico va a la consola; al usuario, algo que pueda hacer.
+    console.error("Activos digitales: S3 rechazó la subida", code || xhr.status, xhr.responseText);
+    if (code === "EntityTooLarge") {
+      reject(new Error("El archivo supera el tamaño permitido."));
+    } else if (code === "AccessDenied") {
+      reject(new Error("No se pudo subir el archivo. Avisa a soporte (permiso de almacenamiento)."));
+    } else {
+      reject(new Error(`No se pudo subir el archivo (${code || xhr.status}). Inténtalo de nuevo; si sigue fallando, avisa a soporte.`));
+    }
   };
 
-  xhr.onerror = () => reject(new Error(
-    // Un fallo de red sin estatus casi siempre es CORS: el bucket tiene que
-    // permitir POST desde el origen de la aplicación. El navegador corta la
-    // petición antes de mandarla y no deja rastro en ningún log del servidor.
-    "No se pudo conectar con el almacenamiento. Revisa la configuración CORS del bucket.",
-  ));
+  xhr.onerror = () => {
+    // Un fallo de red sin estatus casi siempre es CORS (el bucket tiene que
+    // permitir POST desde el origen de la aplicación) o una conexión caída. El
+    // navegador corta la petición y no deja rastro en ningún log del servidor.
+    console.error("Activos digitales: no hubo respuesta de S3 (red o CORS del bucket)");
+    reject(new Error("No se pudo conectar para subir el archivo. Revisa tu conexión e inténtalo de nuevo."));
+  };
 
   xhr.onabort = () => reject(new Error("Subida cancelada."));
 

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

@@ -4,8 +4,10 @@ import { ASSET_ACTIONS } from "./assets.actions";
 import { requestPresign, uploadToS3 } from "./uploadAssets";
 import {
   MAX_ASSETS_PER_PRODUCT,
+  getExtension,
   validateAssetDuration,
   validateAssetFile,
+  warnUnreadableVideo,
 } from "./assetTypes";
 import {
   ASSET_STATUS,
@@ -243,19 +245,21 @@ export const useDigitalAssets = ({
           });
           continue;
         }
-        // Se acepta, pero hay algo que decirle al usuario sobre este archivo.
-        if (check.warning) {
-          avisos.push({ level: "warning", name: file.name, message: check.warning });
-        }
+        // Se acepta, pero hay algo que decirle al usuario. Se junta aquí y se
+        // publica solo si el archivo termina agregándose: si luego lo rechaza la
+        // duración, un "se agregaron" junto al error sería contradictorio.
+        let warning = check.warning;
 
         const objectUrl = URL.createObjectURL(file);
         const asset = fromFile(file, { assetType: check.assetType, objectUrl });
 
         // La duración solo se mide en lo que la valida, y después del peso: no
-        // tiene sentido abrir un archivo que ya se rechazó.
-        if (check.assetType === "video" || check.assetType === "360") {
+        // tiene sentido abrir un archivo que ya se rechazó. Un 360 en gif no es
+        // un video: <video> no lo abre y no hay duración que medir.
+        const isVideoFile = getExtension(file.name) !== "gif";
+        if ((check.assetType === "video" || check.assetType === "360") && isVideoFile) {
           const duration = await readVideoDuration(objectUrl);
-          const durationCheck = validateAssetDuration(duration, check.assetType);
+          const durationCheck = validateAssetDuration(duration, check.assetType, file.name);
           if (!durationCheck.valid) {
             URL.revokeObjectURL(objectUrl);
             avisos.push({
@@ -266,9 +270,16 @@ export const useDigitalAssets = ({
             });
             continue;
           }
-          asset.duration = duration;
+          if (duration === null) {
+            warning = warning ?? warnUnreadableVideo(file.name);
+          } else {
+            asset.duration = duration;
+          }
         }
 
+        if (warning) {
+          avisos.push({ level: "warning", name: file.name, message: warning });
+        }
         accepted.push(asset);
         count += 1;
       }