contentoh-components-library 21.6.56 → 21.6.58

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm test *)"
+    ]
+  }
+}

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

@@ -69,6 +69,7 @@ var AsignationOption = function AsignationOption(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     onClick: onClick,
+    className: active ? "active-option" : undefined,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
       imageType: imageType,
       image: profileImage,

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

@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 3px;\n  padding: 5px;\n\n  .profile-image,\n  .medium-image {\n    & + * {\n      margin-left: 15px;\n    }\n  }\n\n  .labels-container {\n    font-family: ", ";\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 16px;\n\n    .name-label,\n    .team-label {\n      inline-size: 100px;\n      overflow: hidden;\n    }\n\n    .name-label {\n      color: ", ";\n    }\n\n    .team-label {\n      color: ", ";\n    }\n\n    & + * {\n      margin-left: 11px;\n    }\n  }\n\n  .status-container {\n    & + * {\n      margin-left: 10px;\n    }\n  }\n\n  .green-circle {\n    background-color: ", ";\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n  }\n\n  button {\n    background-color: transparent;\n    cursor: pointer;\n    border: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & + * {\n    margin-top: 10px;\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 3px;\n  padding: 5px;\n\n  .profile-image,\n  .medium-image {\n    & + * {\n      margin-left: 15px;\n    }\n  }\n\n  .labels-container {\n    font-family: ", ";\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 16px;\n\n    .name-label,\n    .team-label {\n      inline-size: 100px;\n      overflow: hidden;\n    }\n\n    .name-label {\n      color: ", ";\n    }\n\n    .team-label {\n      color: ", ";\n    }\n\n    & + * {\n      margin-left: 11px;\n    }\n  }\n\n  .status-container {\n    & + * {\n      margin-left: 10px;\n    }\n  }\n\n  .green-circle {\n    background-color: ", ";\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n  }\n\n  button {\n    background-color: transparent;\n    cursor: pointer;\n    border: none;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  /* La opci\xF3n seleccionada (hoy: la cadena activa en el selector de cadenas). */\n  &.active-option {\n    background-color: rgba(", ", 0.1);\n\n    &:hover {\n      background-color: rgba(", ", 0.18);\n    }\n  }\n\n  & + * {\n    margin-top: 10px;\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.s3, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.rgb_color_pink);
 
 exports.Container = Container;

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

@@ -21,6 +21,6 @@ var _templateObject;
   cinco, porque un activo no tiene leyenda— y lo propio de un archivo que se
   está subiendo: barra de progreso, mensaje de error y botón de quitar.
 */
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  &.grid-gallery {\n    width: 179px;\n    border-radius: 3px;\n    overflow: hidden;\n\n    .buttons-container {\n      position: absolute;\n      top: 5px;\n      left: 5px;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      border: 1px solid #f0eef2;\n\n      .information-container {\n        background-color: ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0 2px;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 11px;\n          line-height: 17px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n\n  &.row-gallery {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 0.05fr 1fr;\n    align-items: center;\n    padding-right: 10px;\n\n    .buttons-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      align-items: center;\n      flex: 1;\n\n      .information-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        align-items: center;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 14px;\n          line-height: 17px;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        & > * {\n          flex: 1;\n          padding: 5px;\n        }\n      }\n    }\n  }\n\n  /* El nombre es el sitio donde uno intenta hacer clic para abrir un archivo. */\n  .asset-link {\n    cursor: pointer;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  &.asset-error {\n    border: 1px solid ", ";\n    border-radius: 3px;\n  }\n\n  /* Progreso de subida. Ocupa el borde inferior de la fila para no empujar el\n     resto del contenido mientras aparece y desaparece. */\n  .asset-progress {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 3px;\n    background: ", ";\n    border-radius: 2px;\n    overflow: hidden;\n  }\n\n  .asset-progress-fill {\n    height: 100%;\n    background: ", ";\n    transition: width 0.2s ease-out;\n  }\n\n  .asset-error-message {\n    margin: 2px 0 0;\n    padding: 0 8px;\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 15px;\n    color: ", ";\n  }\n\n  .asset-remove {\n    position: absolute;\n    top: 4px;\n    right: 6px;\n    width: 18px;\n    height: 18px;\n    display: grid;\n    place-items: center;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 1;\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.color_purple, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Lato, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  &.grid-gallery {\n    width: 179px;\n    border-radius: 3px;\n    overflow: hidden;\n\n    .buttons-container {\n      position: absolute;\n      top: 5px;\n      left: 5px;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      border: 1px solid #f0eef2;\n\n      .information-container {\n        background-color: ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0 2px;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 11px;\n          line-height: 17px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n\n  &.row-gallery {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 0.05fr 1fr;\n    align-items: center;\n    padding-right: 10px;\n\n    .buttons-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      align-items: center;\n      flex: 1;\n\n      .information-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        align-items: center;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 14px;\n          line-height: 17px;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        & > * {\n          flex: 1;\n          padding: 5px;\n        }\n      }\n    }\n  }\n\n  /* El nombre es el sitio donde uno intenta hacer clic para abrir un archivo. */\n  .asset-link {\n    cursor: pointer;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  &.asset-error {\n    border: 1px solid ", ";\n    border-radius: 3px;\n  }\n\n  /* Progreso de subida. Ocupa el borde inferior de la fila para no empujar el\n     resto del contenido mientras aparece y desaparece. */\n  .asset-progress {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 3px;\n    background: ", ";\n    border-radius: 2px;\n    overflow: hidden;\n  }\n\n  .asset-progress-fill {\n    height: 100%;\n    background: ", ";\n    transition: width 0.2s ease-out;\n  }\n\n  /* En la fila, que es una rejilla de dos columnas, el mensaje ocupa todo el\n     ancho. Si no, cae en la columna del checkbox, la ensancha hasta su palabra\n     m\xE1s larga y descuadra la fila contra las dem\xE1s. */\n  .asset-error-message {\n    grid-column: 1 / -1;\n    margin: 2px 0 0;\n    padding: 0 8px 6px;\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 15px;\n    color: ", ";\n  }\n\n  .asset-remove {\n    position: absolute;\n    top: 4px;\n    right: 6px;\n    width: 18px;\n    height: 18px;\n    display: grid;\n    place-items: center;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 1;\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.color_purple, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Lato, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
 
 exports.Container = Container;

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

@@ -9,6 +9,10 @@ exports.default = exports.RetailerSelectorDefault = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
 var _index = require("./index");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -16,11 +20,28 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _default = {
   title: "Components/molecules/RetailerSelector",
   component: _index.RetailerSelector
-};
+}; // 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.
+
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerSelector, (0, _objectSpread2.default)({}, args));
+  var _useState = (0, _react.useState)(args.retailers[1]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeRetailer = _useState2[0],
+      setActiveRetailer = _useState2[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      width: 420
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.RetailerSelector, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, args), {}, {
+      activeRetailer: activeRetailer,
+      setActiveRetailer: setActiveRetailer
+    }))
+  });
 };
 
 var RetailerSelectorDefault = Template.bind({});

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

@@ -111,6 +111,8 @@ var RetailerSelector = function RetailerSelector(_ref) {
     }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "retailers-panel",
       children: retailers.map(function (retailer, index) {
+        var _retailer$id, _retailer$id2, _activeRetailer$id;
+
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsignationOption.AsignationOption, {
           profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
           imageType: "medium-image",
@@ -124,8 +126,11 @@ var RetailerSelector = function RetailerSelector(_ref) {
             setActiveRetailer(retailer);
             document.removeEventListener("click", closeRetailersPanel, false);
             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 === null || retailer === void 0 ? void 0 : retailer.id) !== null && _retailer$id !== void 0 ? _retailer$id : retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer) != null && ((_retailer$id2 = retailer === null || retailer === void 0 ? void 0 : retailer.id) !== null && _retailer$id2 !== void 0 ? _retailer$id2 : retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer) === ((_activeRetailer$id = activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) !== null && _activeRetailer$id !== void 0 ? _activeRetailer$id : activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id_retailer),
           showStatus: showStatus
         }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
       })

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

@@ -86,6 +86,8 @@ var RetailerSelectorv2 = function RetailerSelectorv2(_ref) {
     }), retailersPanel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "retailers-panel",
       children: retailers.map(function (retailer, index) {
+        var _retailer$id, _retailer$id2, _activeRetailer$id;
+
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsignationOption.AsignationOption, {
           profileImage: retailer === null || retailer === void 0 ? void 0 : retailer.image,
           imageType: "medium-image",
@@ -97,8 +99,10 @@ var RetailerSelectorv2 = function RetailerSelectorv2(_ref) {
             setActiveRetailer(retailer);
             document.removeEventListener("click", closeRetailersPanel, false);
             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 === null || retailer === void 0 ? void 0 : retailer.id) !== null && _retailer$id !== void 0 ? _retailer$id : retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer) != null && ((_retailer$id2 = retailer === null || retailer === void 0 ? void 0 : retailer.id) !== null && _retailer$id2 !== void 0 ? _retailer$id2 : retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer) === ((_activeRetailer$id = activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id) !== null && _activeRetailer$id !== void 0 ? _activeRetailer$id : activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id_retailer),
           showStatus: showStatus
         }, "".concat(index, "-").concat(retailer === null || retailer === void 0 ? void 0 : retailer.name));
       })

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

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Vacia = exports.SoloLectura = exports.PayloadDeGuardado = exports.Cuadricula = exports.ConActivos = void 0;
+exports.default = exports.Vacia = exports.SoloLectura = exports.PayloadDeGuardado = exports.ErroresDeSubida = exports.Cuadricula = exports.ConActivos = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = require("react");
@@ -21,10 +23,13 @@ var _assets = require("../../../global-files/digital-assets/assets.reducer");
 
 var _assets2 = require("../../../global-files/digital-assets/assets.adapter");
 
-var _assets3 = require("../../../global-files/digital-assets/assets.mock");
+var _assets3 = require("../../../global-files/digital-assets/assets.actions");
+
+var _assets4 = require("../../../global-files/digital-assets/assets.mock");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["file"];
 var _default = {
   title: "Components/organisms/DigitalAssetsTray",
   component: _index.DigitalAssetsTray
@@ -40,6 +45,8 @@ exports.default = _default;
 var Demo = function Demo(_ref) {
   var _ref$initialAssets = _ref.initialAssets,
       initialAssets = _ref$initialAssets === void 0 ? [] : _ref$initialAssets,
+      _ref$localAssets = _ref.localAssets,
+      localAssets = _ref$localAssets === void 0 ? [] : _ref$localAssets,
       _ref$gridLayout = _ref.gridLayout,
       gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
       _ref$readOnly = _ref.readOnly,
@@ -69,8 +76,21 @@ var Demo = function Demo(_ref) {
       loaded = _useState4[0],
       setLoaded = _useState4[1];
 
-  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: _assets3.ASSET_ACTIONS.ADD_ASSETS,
+        payload: localAssets.map(function (_ref2) {
+          var file = _ref2.file,
+              estado = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _assets2.fromFile)(file)), estado);
+        })
+      });
+    }
+
     setLoaded(true);
   }
 
@@ -130,7 +150,7 @@ exports.Vacia = Vacia;
 
 var ConActivos = function ConActivos() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
-    initialAssets: _assets3.backendAssetsMock
+    initialAssets: _assets4.backendAssetsMock
   });
 };
 
@@ -138,7 +158,7 @@ exports.ConActivos = ConActivos;
 
 var Cuadricula = function Cuadricula() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
-    initialAssets: _assets3.backendAssetsMock,
+    initialAssets: _assets4.backendAssetsMock,
     gridLayout: true
   });
 };
@@ -147,7 +167,7 @@ exports.Cuadricula = Cuadricula;
 
 var SoloLectura = function SoloLectura() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
-    initialAssets: _assets3.backendAssetsMock,
+    initialAssets: _assets4.backendAssetsMock,
     readOnly: true
   });
 };
@@ -163,9 +183,53 @@ exports.SoloLectura = SoloLectura;
 
 var PayloadDeGuardado = function PayloadDeGuardado() {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
-    initialAssets: _assets3.backendAssetsMock,
+    initialAssets: _assets4.backendAssetsMock,
     showPayload: true
   });
 };
 
-exports.PayloadDeGuardado = PayloadDeGuardado;
+exports.PayloadDeGuardado = PayloadDeGuardado;
+
+var archivo = function archivo(name, type) {
+  return new File(["x"], name, {
+    type: 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).
+ */
+
+
+var ErroresDeSubida = function ErroresDeSubida() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    localAssets: [{
+      file: archivo("video-campana.mp4", "video/mp4"),
+      status: _assets2.ASSET_STATUS.UPLOADING,
+      progress: 45
+    }, {
+      file: archivo("manual-instalacion.pdf", "application/pdf"),
+      status: _assets2.ASSET_STATUS.ERROR,
+      error: "No se pudo subir el archivo. Avisa a soporte (permiso de almacenamiento)."
+    }, {
+      file: archivo("render-final.psd", ""),
+      status: _assets2.ASSET_STATUS.ERROR,
+      error: "El archivo supera el tamaño permitido."
+    }, {
+      file: archivo("tabla-tallas.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"),
+      status: _assets2.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: _assets2.ASSET_STATUS.ERROR,
+      error: "El archivo pesa más del máximo permitido para imagen"
+    }, {
+      file: archivo("catalogo.zip", "application/zip"),
+      status: _assets2.ASSET_STATUS.ERROR,
+      error: "No se pudo preparar la subida. Revisa tu conexión e inténtalo de nuevo."
+    }]
+  });
+};
+
+exports.ErroresDeSubida = ErroresDeSubida;

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

@@ -9,6 +9,8 @@ exports.DigitalAssetsTray = void 0;
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _reactDropzone = require("react-dropzone");
 
 var _styles = require("./styles");
@@ -73,8 +75,14 @@ var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
     multiple: true,
     noClick: true,
     disabled: readOnly,
-    onDrop: function onDrop(acceptedFiles) {
-      return addFiles === null || addFiles === void 0 ? void 0 : 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: function onDrop(acceptedFiles, fileRejections) {
+      return addFiles === null || addFiles === void 0 ? void 0 : addFiles([].concat((0, _toConsumableArray2.default)(acceptedFiles), (0, _toConsumableArray2.default)(fileRejections.map(function (_ref2) {
+        var file = _ref2.file;
+        return file;
+      }))));
     }
   }),
       getRootProps = _useDropzone.getRootProps,
@@ -101,7 +109,7 @@ var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
         className: "tray-hint",
         title: "Formatos permitidos: ".concat((0, _assetTypes.acceptedFormatsLabel)()),
-        children: ["Arrastra aqu\xED videos, 360, GIF, documentos, hojas de c\xE1lculo o archivos editables. Quedan ", remaining, " de ", _assetTypes.MAX_ASSETS_PER_PRODUCT, "."]
+        children: ["Arrastra aqu\xED im\xE1genes, videos, 360, GIF, documentos, hojas de c\xE1lculo o archivos editables. Quedan ", remaining, " de ", _assetTypes.MAX_ASSETS_PER_PRODUCT, "."]
       }), !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
         label: "Agregar activos",
         type: "pink",
@@ -187,8 +195,8 @@ var DigitalAssetsTray = function DigitalAssetsTray(_ref) {
             selectedAssets: selectedAssets,
             setSelectedAssets: setSelectedAssets,
             setCheckAll: setCheckAll,
-            changeAsset: function changeAsset(_ref2) {
-              var value = _ref2.value;
+            changeAsset: function changeAsset(_ref3) {
+              var value = _ref3.value;
               return changeAssetType === null || changeAssetType === void 0 ? void 0 : changeAssetType(index, value);
             },
             onRemove: removeAsset,