contentoh-components-library 21.6.48 → 21.6.49

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

@@ -11,6 +11,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
@@ -34,9 +36,18 @@ var _jsxRuntime = require("react/jsx-runtime");
   un código en `article.variant_group` y ya. Por eso el modal no pregunta qué
   heredar: no hay nada que heredar.
 
-  Dos formas de agrupar, y son la misma operación por debajo:
-    - elegir un grupo que ya existe
-    - teclear un código nuevo, que crea el grupo con este producto dentro
+  El modal tiene dos pasos y el segundo depende del primero:
+
+    1. QUÉ GRUPO. Se elige uno de los que ya existen, o se crea uno nuevo. El
+       campo para crearlo está escondido detrás de un botón a propósito: abrirlo
+       de entrada le contesta al usuario una pregunta que todavía no se ha
+       hecho —si quiere buscar o crear— y empuja a teclear un código que
+       probablemente ya existe.
+
+    2. QUÉ PRODUCTOS. Aparece solo cuando ya hay un grupo. Permite sumar varios
+       de una vez sin salir de aquí; antes había que volver a la tabla, entrar a
+       cada producto y repetir el trámite, que para un grupo de cinco eran cinco
+       vueltas completas.
 
   No hay tabla de grupos: un grupo existe mientras algún producto use su código.
   Eso hace que una errata no falle, solo cree un grupo de un miembro — de ahí que
@@ -95,7 +106,39 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
   var _useState13 = (0, _react.useState)(""),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       nuevo = _useState14[0],
-      setNuevo = _useState14[1];
+      setNuevo = _useState14[1]; // El creador arranca cerrado: que esté abierto ya es una sugerencia de crear.
+
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      creando = _useState16[0],
+      setCreando = _useState16[1]; // Paso 2: productos que se van a sumar junto con el de origen.
+
+
+  var _useState17 = (0, _react.useState)(""),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      busquedaProd = _useState18[0],
+      setBusquedaProd = _useState18[1];
+
+  var _useState19 = (0, _react.useState)([]),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      candidatos = _useState20[0],
+      setCandidatos = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(0),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      totalCandidatos = _useState22[0],
+      setTotalCandidatos = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      cargandoProd = _useState24[0],
+      setCargandoProd = _useState24[1];
+
+  var _useState25 = (0, _react.useState)([]),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      elegidos = _useState26[0],
+      setElegidos = _useState26[1];
 
   var request = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
@@ -127,6 +170,11 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
       return _ref2.apply(this, arguments);
     };
   }(), [endpoint, token]);
+
+  var mensajeDe = function mensajeDe(err, porDefecto) {
+    return err instanceof _api.ApiError || (err === null || err === void 0 ? void 0 : err.name) === "ApiError" ? err.message : porDefecto;
+  };
+
   var buscar = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(texto) {
       var _data$groups, data;
@@ -153,7 +201,7 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
             case 9:
               _context2.prev = 9;
               _context2.t0 = _context2["catch"](2);
-              setError(_context2.t0 instanceof _api.ApiError || (_context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.name) === "ApiError" ? _context2.t0.message : "No se pudieron cargar los grupos.");
+              setError(mensajeDe(_context2.t0, "No se pudieron cargar los grupos."));
 
             case 12:
               _context2.prev = 12;
@@ -191,68 +239,161 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
   var codigoNuevo = normalizar(nuevo);
   var codigoFinal = selected !== null && selected !== void 0 ? selected : codigoNuevo;
   var esNuevo = !selected && !!codigoNuevo;
-  var yaEstaba = codigoFinal && codigoFinal === currentGroup;
+  var yaEstaba = !!codigoFinal && codigoFinal === currentGroup;
+  var buscarProductos = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(texto) {
+      var _data$candidates, _data$total, data;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setCargandoProd(true);
+              setError(null);
+              _context3.prev = 2;
+              _context3.next = 5;
+              return request("group-candidates", {
+                articleId: articleId,
+                code: codigoFinal || "",
+                query: texto !== null && texto !== void 0 ? texto : ""
+              });
+
+            case 5:
+              data = _context3.sent;
+              setCandidatos((_data$candidates = data.candidates) !== null && _data$candidates !== void 0 ? _data$candidates : []);
+              setTotalCandidatos(Number((_data$total = data.total) !== null && _data$total !== void 0 ? _data$total : 0));
+              _context3.next = 13;
+              break;
+
+            case 10:
+              _context3.prev = 10;
+              _context3.t0 = _context3["catch"](2);
+              setError(mensajeDe(_context3.t0, "No se pudieron cargar los productos."));
+
+            case 13:
+              _context3.prev = 13;
+              setCargandoProd(false);
+              return _context3.finish(13);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[2, 10, 13, 16]]);
+    }));
+
+    return function (_x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [request, articleId, codigoFinal]);
+  /*
+    La lista se recarga cuando cambia el código porque el servidor excluye a los
+    que ya están dentro: con otro grupo, el conjunto de candidatos es otro. Se
+    espera un momento porque el código nuevo se teclea letra por letra y sin la
+    pausa saldría una consulta por pulsación.
+  */
+
+  (0, _react.useEffect)(function () {
+    if (!codigoFinal) {
+      setCandidatos([]);
+      setTotalCandidatos(0);
+      return undefined;
+    }
+
+    var t = setTimeout(function () {
+      return buscarProductos(busquedaProd);
+    }, 300);
+    return function () {
+      return clearTimeout(t);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [codigoFinal]);
+
+  var alternar = function alternar(id) {
+    return setElegidos(function (previos) {
+      return previos.includes(id) ? previos.filter(function (x) {
+        return x !== id;
+      }) : [].concat((0, _toConsumableArray2.default)(previos), [id]);
+    });
+  };
 
   var guardar = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
       var _data$group, data;
 
-      return _regenerator.default.wrap(function _callee3$(_context3) {
+      return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
-          switch (_context3.prev = _context3.next) {
+          switch (_context4.prev = _context4.next) {
             case 0:
-              if (!(!codigoFinal || yaEstaba)) {
-                _context3.next = 2;
+              if (codigoFinal) {
+                _context4.next = 2;
                 break;
               }
 
-              return _context3.abrupt("return");
+              return _context4.abrupt("return");
 
             case 2:
+              if (!(yaEstaba && elegidos.length === 0)) {
+                _context4.next = 4;
+                break;
+              }
+
+              return _context4.abrupt("return");
+
+            case 4:
               setSaving(true);
               setError(null);
-              _context3.prev = 4;
-              _context3.next = 7;
+              _context4.prev = 6;
+              _context4.next = 9;
               return request("join", {
                 articleId: articleId,
-                code: codigoFinal
+                code: codigoFinal,
+                alsoArticleIds: elegidos
               });
 
-            case 7:
-              data = _context3.sent;
+            case 9:
+              data = _context4.sent;
               onSaved === null || onSaved === void 0 ? void 0 : onSaved((0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
                 group: (_data$group = data.group) !== null && _data$group !== void 0 ? _data$group : codigoFinal
               }));
               onClose === null || onClose === void 0 ? void 0 : onClose();
-              _context3.next = 16;
+              _context4.next = 18;
               break;
 
-            case 12:
-              _context3.prev = 12;
-              _context3.t0 = _context3["catch"](4);
-              setError(_context3.t0 instanceof _api.ApiError || (_context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.name) === "ApiError" ? _context3.t0.message : "No se pudo agrupar el producto. Intenta de nuevo.");
+            case 14:
+              _context4.prev = 14;
+              _context4.t0 = _context4["catch"](6);
+              setError(mensajeDe(_context4.t0, "No se pudo agrupar el producto. Intenta de nuevo."));
               setSaving(false);
 
-            case 16:
+            case 18:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3, null, [[4, 12]]);
+      }, _callee4, null, [[6, 14]]);
     }));
 
     return function guardar() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
-  }();
+  }(); // Cuántos de los elegidos cambian de grupo, para avisarlo antes y no después.
+
+
+  var seMueven = candidatos.filter(function (c) {
+    return elegidos.includes(c.articleId) && c.currentGroup && c.currentGroup !== codigoFinal;
+  }).length;
 
   var resumen = function resumen() {
-    if (yaEstaba) return "Este producto ya est\xE1 en \xAB".concat(codigoFinal, "\xBB.");
-    if (esNuevo) return "Se crear\xE1 el grupo \xAB".concat(codigoNuevo, "\xBB con este producto.");
-    if (selected) return "Se agregar\xE1 a \xAB".concat(selected, "\xBB.");
-    return "Elige un grupo o escribe un código nuevo.";
+    if (!codigoFinal) return "Elige un grupo o crea uno nuevo.";
+    var sufijo = elegidos.length ? " y ".concat(elegidos.length, " producto").concat(elegidos.length === 1 ? "" : "s", " m\xE1s") : "";
+    if (yaEstaba && !elegidos.length) return "Este producto ya est\xE1 en \xAB".concat(codigoFinal, "\xBB.");
+    if (yaEstaba) return "Se agregar\xE1n ".concat(elegidos.length, " producto").concat(elegidos.length === 1 ? "" : "s", " a \xAB").concat(codigoFinal, "\xBB.");
+    if (esNuevo) return "Se crear\xE1 \xAB".concat(codigoNuevo, "\xBB con este producto").concat(sufijo, ".");
+    return "Se agregar\xE1 a \xAB".concat(selected, "\xBB").concat(sufijo, ".");
   };
 
+  var puedeGuardar = !saving && !!codigoFinal && (!yaEstaba || elegidos.length > 0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
     onClick: saving ? undefined : onClose,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Panel, {
@@ -269,6 +410,10 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
         children: [error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
           className: "error",
           children: error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Step, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            children: "1 \xB7 Elige el grupo"
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SearchRow, {
           onSubmit: function onSubmit(event) {
             event.preventDefault();
@@ -297,6 +442,7 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
                   onChange: function onChange() {
                     setSelected(grupo.code);
                     setNuevo("");
+                    setCreando(false);
                   }
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "codigo",
@@ -312,17 +458,35 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
             }, grupo.code);
           })
         }), !loading && groups.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
-          children: query.trim() ? "Ningún grupo coincide con esa búsqueda." : "Todavía no hay grupos en esta compañía. Crea el primero abajo."
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NewGroup, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-            htmlFor: "nuevo-grupo",
-            children: "O crea un grupo nuevo"
+          children: query.trim() ? "Ningún grupo coincide con esa búsqueda." : "Todavía no hay grupos en esta compañía."
+        }), !creando ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GhostButton, {
+          type: "button",
+          onClick: function onClick() {
+            setCreando(true);
+            setSelected(null);
+          },
+          children: "+ Crear un grupo nuevo"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NewGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "encabezado",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+              htmlFor: "nuevo-grupo",
+              children: "C\xF3digo del grupo nuevo"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              onClick: function onClick() {
+                setCreando(false);
+                setNuevo("");
+              },
+              children: "Cancelar"
+            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
             id: "nuevo-grupo",
             type: "text",
             value: nuevo,
             placeholder: "RELOJ-CASIO-A158",
             maxLength: 50,
+            autoFocus: true,
             onChange: function onChange(event) {
               setNuevo(event.target.value);
               setSelected(null);
@@ -331,6 +495,66 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
             className: "ayuda",
             children: "Letras, n\xFAmeros, guion y guion bajo. Se guarda en may\xFAsculas, as\xED que \xABabc-1\xBB y \xABABC-1\xBB son el mismo grupo."
           })]
+        }), !!codigoFinal && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Step, {
+            className: "segundo",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+              children: ["2 \xB7 Agrega m\xE1s productos a \xAB", codigoFinal, "\xBB"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              children: "Opcional. Evita entrar a cada producto por separado."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SearchRow, {
+            onSubmit: function onSubmit(event) {
+              event.preventDefault();
+              buscarProductos(busquedaProd);
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "text",
+              value: busquedaProd,
+              placeholder: "Busca por UPC, SKU o nombre",
+              onChange: function onChange(event) {
+                return setBusquedaProd(event.target.value);
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "submit",
+              disabled: cargandoProd,
+              children: cargandoProd ? "Buscando…" : "Buscar"
+            })]
+          }), candidatos.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Candidates, {
+            children: candidatos.map(function (c) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "checkbox",
+                    checked: elegidos.includes(c.articleId),
+                    onChange: function onChange() {
+                      return alternar(c.articleId);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "datos",
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "nombre",
+                      children: c.name
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "ids",
+                      children: [c.upc ? "UPC ".concat(c.upc) : "", c.upc && c.sku ? " · " : "", c.sku ? "SKU ".concat(c.sku) : ""]
+                    })]
+                  }), c.currentGroup && c.currentGroup !== codigoFinal && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "mueve",
+                    children: ["hoy en \xAB", c.currentGroup, "\xBB"]
+                  })]
+                })
+              }, c.articleId);
+            })
+          }), !cargandoProd && candidatos.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+            children: busquedaProd.trim() ? "Ningún producto coincide con esa búsqueda." : "No hay otros productos que puedas agrupar aquí."
+          }), totalCandidatos > candidatos.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+            className: "sutil",
+            children: ["Se muestran ", candidatos.length, " de ", totalCandidatos, ". Afina la b\xFAsqueda para ver el resto."]
+          }), seMueven > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+            className: "aviso",
+            children: [seMueven, " de los productos elegidos ya est\xE1 en otro grupo y se mover\xE1 a \xAB", codigoFinal, "\xBB. Un producto solo puede estar en uno."]
+          })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -348,7 +572,7 @@ var VariantGroupModal = function VariantGroupModal(_ref) {
             type: "button",
             className: "primary",
             onClick: guardar,
-            disabled: saving || !codigoFinal || yaEstaba,
+            disabled: !puedeGuardar,
             children: saving ? "Guardando…" : "Aceptar"
           })]
         })]

package/dist/components/organisms/VariantGroupModal/styles.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SearchRow = exports.Panel = exports.Overlay = exports.NewGroup = exports.Message = exports.List = exports.Header = exports.Footer = exports.Body = void 0;
+exports.Step = exports.SearchRow = exports.Panel = exports.Overlay = exports.NewGroup = exports.Message = exports.List = exports.Header = exports.GhostButton = exports.Footer = exports.Candidates = exports.Body = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _variables = require("../../../global-files/variables");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 var PINK = "#E13AA8";
 var PINK_RGB = "225, 58, 168";
@@ -42,14 +42,34 @@ var List = _styledComponents.default.ul(_templateObject6 || (_templateObject6 =
 
 exports.List = List;
 
-var NewGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px;\n  border: 1px dashed rgba(", ", 0.5);\n  border-radius: 6px;\n  background-color: rgba(", ", 0.04);\n\n  label {\n    display: block;\n    margin-bottom: 6px;\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  input {\n    width: 100%;\n    height: 36px;\n    padding: 0 12px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    font-family: inherit;\n    font-size: 13px;\n    text-transform: uppercase;\n    color: ", ";\n  }\n\n  input:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  .ayuda {\n    display: block;\n    margin-top: 6px;\n    font-size: 11px;\n    line-height: 1.4;\n    color: ", ";\n  }\n"])), PINK_RGB, PINK_RGB, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray);
+var NewGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px;\n  border: 1px dashed rgba(", ", 0.5);\n  border-radius: 6px;\n  background-color: rgba(", ", 0.04);\n\n  .encabezado {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 6px;\n  }\n\n  /* Salir de aqui tiene que costar lo mismo que entrar: si abrir el creador es\n     un clic, cerrarlo tambien. Sin esto el usuario queda atrapado en el paso de\n     crear y la unica salida visible es cerrar el modal entero. */\n  .encabezado button {\n    border: none;\n    background: none;\n    padding: 0;\n    font-family: ", ";\n    font-size: 11px;\n    color: ", ";\n    cursor: pointer;\n    text-decoration: underline;\n  }\n\n  label {\n    display: block;\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  input {\n    width: 100%;\n    height: 36px;\n    padding: 0 12px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    font-family: inherit;\n    font-size: 13px;\n    text-transform: uppercase;\n    color: ", ";\n  }\n\n  input:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  .ayuda {\n    display: block;\n    margin-top: 6px;\n    font-size: 11px;\n    line-height: 1.4;\n    color: ", ";\n  }\n"])), PINK_RGB, PINK_RGB, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray);
 
 exports.NewGroup = NewGroup;
 
-var Message = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 12px;\n  padding: 10px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  line-height: 1.4;\n  background-color: ", ";\n  color: ", ";\n\n  &.error {\n    background-color: rgba(", ", 0.1);\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK);
+var Step = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 4px 0 10px;\n\n  h3 {\n    margin: 0;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n  }\n\n  p {\n    margin: 2px 0 0;\n    font-size: 11px;\n    color: ", ";\n  }\n\n  /* El segundo paso aparece y desaparece segun haya grupo elegido; la linea de\n     arriba es lo que evita que se lea como continuacion del bloque anterior. */\n  &.segundo {\n    margin-top: 18px;\n    padding-top: 14px;\n    border-top: 1px solid ", ";\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.s2);
+/*
+  El boton que revela el campo de codigo nuevo.
+
+  Va deliberadamente discreto: es la salida menos frecuente —lo normal es
+  sumarse a un grupo que ya existe— y competir en peso con "Buscar" volveria a
+  empujar hacia crear, que es justo lo que se queria dejar de hacer.
+*/
+
+
+exports.Step = Step;
+
+var GhostButton = _styledComponents.default.button(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n  width: 100%;\n  height: 36px;\n  border: 1px dashed rgba(", ", 0.5);\n  border-radius: 6px;\n  background-color: rgba(", ", 0.04);\n  font-family: ", ";\n  font-size: 12px;\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: rgba(", ", 0.09);\n  }\n"])), PINK_RGB, PINK_RGB, _variables.FontFamily.Raleway_600, PINK, PINK_RGB);
+
+exports.GhostButton = GhostButton;
+
+var Candidates = _styledComponents.default.ul(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 10px;\n  padding: 0;\n  list-style: none;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  /* Acotado a proposito: la lista vive dentro de un modal que ya scrollea, y sin\n     tope empuja el pie fuera de la vista. */\n  max-height: 210px;\n  overflow-y: auto;\n\n  li + li {\n    border-top: 1px solid ", ";\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    cursor: pointer;\n    font-size: 13px;\n    color: ", ";\n  }\n\n  label:hover {\n    background-color: ", ";\n  }\n\n  input[type=\"checkbox\"] {\n    accent-color: ", ";\n    flex-shrink: 0;\n  }\n\n  .datos {\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  .nombre {\n    font-family: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ids {\n    font-size: 11px;\n    color: ", ";\n  }\n\n  .mueve {\n    margin-left: auto;\n    flex-shrink: 0;\n    font-size: 11px;\n    font-style: italic;\n    color: ", ";\n    white-space: nowrap;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s1, PINK, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, PINK);
+
+exports.Candidates = Candidates;
+
+var Message = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 12px;\n  padding: 10px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  line-height: 1.4;\n  background-color: ", ";\n  color: ", ";\n\n  &.error {\n    background-color: rgba(", ", 0.1);\n    color: ", ";\n  }\n\n  /* Informativo, no accionable: no debe competir con el contenido. */\n  &.sutil {\n    background: none;\n    padding: 2px 0 10px;\n    font-size: 11px;\n    color: ", ";\n  }\n\n  /* Agrupar es un UPDATE, asi que sumar un producto que ya tenia grupo lo MUEVE.\n     Se avisa antes de guardar, no despues. */\n  &.aviso {\n    background-color: rgba(", ", 0.08);\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK, _variables.GlobalColors.gray, PINK_RGB, _variables.GlobalColors.deep_gray);
 
 exports.Message = Message;
 
-var Footer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 24px;\n  border-top: 1px solid ", ";\n\n  .resumen {\n    font-size: 12px;\n    color: ", ";\n  }\n\n  .acciones {\n    display: flex;\n    gap: 10px;\n  }\n\n  button {\n    height: 38px;\n    padding: 0 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 13px;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  .secondary {\n    border: 1px solid ", ";\n    background: none;\n    color: ", ";\n  }\n\n  .primary {\n    border: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
+var Footer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 24px;\n  border-top: 1px solid ", ";\n\n  .resumen {\n    font-size: 12px;\n    color: ", ";\n  }\n\n  .acciones {\n    display: flex;\n    gap: 10px;\n  }\n\n  button {\n    height: 38px;\n    padding: 0 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 13px;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  .secondary {\n    border: 1px solid ", ";\n    background: none;\n    color: ", ";\n  }\n\n  .primary {\n    border: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
 
 exports.Footer = Footer;

package/package.json

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

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

@@ -7,9 +7,12 @@ import {
   Panel,
   Header,
   Body,
+  Step,
   SearchRow,
   List,
+  GhostButton,
   NewGroup,
+  Candidates,
   Message,
   Footer,
 } from "./styles";
@@ -23,9 +26,18 @@ import {
   un código en `article.variant_group` y ya. Por eso el modal no pregunta qué
   heredar: no hay nada que heredar.
 
-  Dos formas de agrupar, y son la misma operación por debajo:
-    - elegir un grupo que ya existe
-    - teclear un código nuevo, que crea el grupo con este producto dentro
+  El modal tiene dos pasos y el segundo depende del primero:
+
+    1. QUÉ GRUPO. Se elige uno de los que ya existen, o se crea uno nuevo. El
+       campo para crearlo está escondido detrás de un botón a propósito: abrirlo
+       de entrada le contesta al usuario una pregunta que todavía no se ha
+       hecho —si quiere buscar o crear— y empuja a teclear un código que
+       probablemente ya existe.
+
+    2. QUÉ PRODUCTOS. Aparece solo cuando ya hay un grupo. Permite sumar varios
+       de una vez sin salir de aquí; antes había que volver a la tabla, entrar a
+       cada producto y repetir el trámite, que para un grupo de cinco eran cinco
+       vueltas completas.
 
   No hay tabla de grupos: un grupo existe mientras algún producto use su código.
   Eso hace que una errata no falle, solo cree un grupo de un miembro — de ahí que
@@ -57,6 +69,15 @@ export const VariantGroupModal = ({
   // Qué eligió el usuario: un código de la lista, o el que está escribiendo.
   const [selected, setSelected] = useState(null);
   const [nuevo, setNuevo] = useState("");
+  // El creador arranca cerrado: que esté abierto ya es una sugerencia de crear.
+  const [creando, setCreando] = useState(false);
+
+  // Paso 2: productos que se van a sumar junto con el de origen.
+  const [busquedaProd, setBusquedaProd] = useState("");
+  const [candidatos, setCandidatos] = useState([]);
+  const [totalCandidatos, setTotalCandidatos] = useState(0);
+  const [cargandoProd, setCargandoProd] = useState(false);
+  const [elegidos, setElegidos] = useState([]);
 
   const request = useCallback(
     async (action, body) => {
@@ -69,6 +90,11 @@ export const VariantGroupModal = ({
     [endpoint, token]
   );
 
+  const mensajeDe = (err, porDefecto) =>
+    err instanceof ApiError || err?.name === "ApiError"
+      ? err.message
+      : porDefecto;
+
   const buscar = useCallback(
     async (texto) => {
       setLoading(true);
@@ -77,11 +103,7 @@ export const VariantGroupModal = ({
         const data = await request("groups", { articleId, query: texto ?? "" });
         setGroups(data.groups ?? []);
       } catch (err) {
-        setError(
-          err instanceof ApiError || err?.name === "ApiError"
-            ? err.message
-            : "No se pudieron cargar los grupos."
-        );
+        setError(mensajeDe(err, "No se pudieron cargar los grupos."));
       } finally {
         setLoading(false);
       }
@@ -108,34 +130,95 @@ export const VariantGroupModal = ({
   const codigoNuevo = normalizar(nuevo);
   const codigoFinal = selected ?? codigoNuevo;
   const esNuevo = !selected && !!codigoNuevo;
-  const yaEstaba = codigoFinal && codigoFinal === currentGroup;
+  const yaEstaba = !!codigoFinal && codigoFinal === currentGroup;
+
+  const buscarProductos = useCallback(
+    async (texto) => {
+      setCargandoProd(true);
+      setError(null);
+      try {
+        const data = await request("group-candidates", {
+          articleId,
+          code: codigoFinal || "",
+          query: texto ?? "",
+        });
+        setCandidatos(data.candidates ?? []);
+        setTotalCandidatos(Number(data.total ?? 0));
+      } catch (err) {
+        setError(mensajeDe(err, "No se pudieron cargar los productos."));
+      } finally {
+        setCargandoProd(false);
+      }
+    },
+    [request, articleId, codigoFinal]
+  );
+
+  /*
+    La lista se recarga cuando cambia el código porque el servidor excluye a los
+    que ya están dentro: con otro grupo, el conjunto de candidatos es otro. Se
+    espera un momento porque el código nuevo se teclea letra por letra y sin la
+    pausa saldría una consulta por pulsación.
+  */
+  useEffect(() => {
+    if (!codigoFinal) {
+      setCandidatos([]);
+      setTotalCandidatos(0);
+      return undefined;
+    }
+    const t = setTimeout(() => buscarProductos(busquedaProd), 300);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [codigoFinal]);
+
+  const alternar = (id) =>
+    setElegidos((previos) =>
+      previos.includes(id)
+        ? previos.filter((x) => x !== id)
+        : [...previos, id]
+    );
 
   const guardar = async () => {
-    if (!codigoFinal || yaEstaba) return;
+    if (!codigoFinal) return;
+    // Sin código nuevo y sin productos que sumar no hay nada que hacer.
+    if (yaEstaba && elegidos.length === 0) return;
 
     setSaving(true);
     setError(null);
     try {
-      const data = await request("join", { articleId, code: codigoFinal });
+      const data = await request("join", {
+        articleId,
+        code: codigoFinal,
+        alsoArticleIds: elegidos,
+      });
       onSaved?.({ ...data, group: data.group ?? codigoFinal });
       onClose?.();
     } catch (err) {
-      setError(
-        err instanceof ApiError || err?.name === "ApiError"
-          ? err.message
-          : "No se pudo agrupar el producto. Intenta de nuevo."
-      );
+      setError(mensajeDe(err, "No se pudo agrupar el producto. Intenta de nuevo."));
       setSaving(false);
     }
   };
 
+  // Cuántos de los elegidos cambian de grupo, para avisarlo antes y no después.
+  const seMueven = candidatos.filter(
+    (c) => elegidos.includes(c.articleId) && c.currentGroup && c.currentGroup !== codigoFinal
+  ).length;
+
   const resumen = () => {
-    if (yaEstaba) return `Este producto ya está en «${codigoFinal}».`;
-    if (esNuevo) return `Se creará el grupo «${codigoNuevo}» con este producto.`;
-    if (selected) return `Se agregará a «${selected}».`;
-    return "Elige un grupo o escribe un código nuevo.";
+    if (!codigoFinal) return "Elige un grupo o crea uno nuevo.";
+
+    const sufijo = elegidos.length
+      ? ` y ${elegidos.length} producto${elegidos.length === 1 ? "" : "s"} más`
+      : "";
+
+    if (yaEstaba && !elegidos.length) return `Este producto ya está en «${codigoFinal}».`;
+    if (yaEstaba) return `Se agregarán ${elegidos.length} producto${elegidos.length === 1 ? "" : "s"} a «${codigoFinal}».`;
+    if (esNuevo) return `Se creará «${codigoNuevo}» con este producto${sufijo}.`;
+    return `Se agregará a «${selected}»${sufijo}.`;
   };
 
+  const puedeGuardar =
+    !saving && !!codigoFinal && (!yaEstaba || elegidos.length > 0);
+
   return (
     <Overlay onClick={saving ? undefined : onClose}>
       <Panel onClick={(event) => event.stopPropagation()}>
@@ -151,6 +234,10 @@ export const VariantGroupModal = ({
         <Body>
           {error && <Message className="error">{error}</Message>}
 
+          <Step>
+            <h3>1 · Elige el grupo</h3>
+          </Step>
+
           <SearchRow
             onSubmit={(event) => {
               event.preventDefault();
@@ -180,6 +267,7 @@ export const VariantGroupModal = ({
                       onChange={() => {
                         setSelected(grupo.code);
                         setNuevo("");
+                        setCreando(false);
                       }}
                     />
                     <span className="codigo">{grupo.code}</span>
@@ -201,28 +289,137 @@ export const VariantGroupModal = ({
             <Message>
               {query.trim()
                 ? "Ningún grupo coincide con esa búsqueda."
-                : "Todavía no hay grupos en esta compañía. Crea el primero abajo."}
+                : "Todavía no hay grupos en esta compañía."}
             </Message>
           )}
 
-          <NewGroup>
-            <label htmlFor="nuevo-grupo">O crea un grupo nuevo</label>
-            <input
-              id="nuevo-grupo"
-              type="text"
-              value={nuevo}
-              placeholder="RELOJ-CASIO-A158"
-              maxLength={50}
-              onChange={(event) => {
-                setNuevo(event.target.value);
+          {/*
+            El campo para crear vive detrás de este botón. Mostrarlo de entrada
+            daba por hecho que el usuario venía a crear, cuando la mayoría de las
+            veces lo que quiere es sumarse a un grupo que ya existe.
+          */}
+          {!creando ? (
+            <GhostButton
+              type="button"
+              onClick={() => {
+                setCreando(true);
                 setSelected(null);
               }}
-            />
-            <span className="ayuda">
-              Letras, números, guion y guion bajo. Se guarda en mayúsculas, así
-              que «abc-1» y «ABC-1» son el mismo grupo.
-            </span>
-          </NewGroup>
+            >
+              + Crear un grupo nuevo
+            </GhostButton>
+          ) : (
+            <NewGroup>
+              <div className="encabezado">
+                <label htmlFor="nuevo-grupo">Código del grupo nuevo</label>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setCreando(false);
+                    setNuevo("");
+                  }}
+                >
+                  Cancelar
+                </button>
+              </div>
+              <input
+                id="nuevo-grupo"
+                type="text"
+                value={nuevo}
+                placeholder="RELOJ-CASIO-A158"
+                maxLength={50}
+                autoFocus
+                onChange={(event) => {
+                  setNuevo(event.target.value);
+                  setSelected(null);
+                }}
+              />
+              <span className="ayuda">
+                Letras, números, guion y guion bajo. Se guarda en mayúsculas, así
+                que «abc-1» y «ABC-1» son el mismo grupo.
+              </span>
+            </NewGroup>
+          )}
+
+          {/*
+            Paso 2. Solo tiene sentido con un grupo ya elegido: sin código no hay
+            a dónde sumar, y el servidor necesita el código para excluir a los
+            que ya están dentro.
+          */}
+          {!!codigoFinal && (
+            <>
+              <Step className="segundo">
+                <h3>2 · Agrega más productos a «{codigoFinal}»</h3>
+                <p>Opcional. Evita entrar a cada producto por separado.</p>
+              </Step>
+
+              <SearchRow
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  buscarProductos(busquedaProd);
+                }}
+              >
+                <input
+                  type="text"
+                  value={busquedaProd}
+                  placeholder="Busca por UPC, SKU o nombre"
+                  onChange={(event) => setBusquedaProd(event.target.value)}
+                />
+                <button type="submit" disabled={cargandoProd}>
+                  {cargandoProd ? "Buscando…" : "Buscar"}
+                </button>
+              </SearchRow>
+
+              {candidatos.length > 0 && (
+                <Candidates>
+                  {candidatos.map((c) => (
+                    <li key={c.articleId}>
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={elegidos.includes(c.articleId)}
+                          onChange={() => alternar(c.articleId)}
+                        />
+                        <span className="datos">
+                          <span className="nombre">{c.name}</span>
+                          <span className="ids">
+                            {c.upc ? `UPC ${c.upc}` : ""}
+                            {c.upc && c.sku ? " · " : ""}
+                            {c.sku ? `SKU ${c.sku}` : ""}
+                          </span>
+                        </span>
+                        {c.currentGroup && c.currentGroup !== codigoFinal && (
+                          <span className="mueve">hoy en «{c.currentGroup}»</span>
+                        )}
+                      </label>
+                    </li>
+                  ))}
+                </Candidates>
+              )}
+
+              {!cargandoProd && candidatos.length === 0 && (
+                <Message>
+                  {busquedaProd.trim()
+                    ? "Ningún producto coincide con esa búsqueda."
+                    : "No hay otros productos que puedas agrupar aquí."}
+                </Message>
+              )}
+
+              {totalCandidatos > candidatos.length && (
+                <Message className="sutil">
+                  Se muestran {candidatos.length} de {totalCandidatos}. Afina la
+                  búsqueda para ver el resto.
+                </Message>
+              )}
+
+              {seMueven > 0 && (
+                <Message className="aviso">
+                  {seMueven} de los productos elegidos ya está en otro grupo y se
+                  moverá a «{codigoFinal}». Un producto solo puede estar en uno.
+                </Message>
+              )}
+            </>
+          )}
         </Body>
 
         <Footer>
@@ -240,7 +437,7 @@ export const VariantGroupModal = ({
               type="button"
               className="primary"
               onClick={guardar}
-              disabled={saving || !codigoFinal || yaEstaba}
+              disabled={!puedeGuardar}
             >
               {saving ? "Guardando…" : "Aceptar"}
             </button>

package/src/components/organisms/VariantGroupModal/styles.js

@@ -159,9 +159,30 @@ export const NewGroup = styled.div`
   border-radius: 6px;
   background-color: rgba(${PINK_RGB}, 0.04);
 
+  .encabezado {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 6px;
+  }
+
+  /* Salir de aqui tiene que costar lo mismo que entrar: si abrir el creador es
+     un clic, cerrarlo tambien. Sin esto el usuario queda atrapado en el paso de
+     crear y la unica salida visible es cerrar el modal entero. */
+  .encabezado button {
+    border: none;
+    background: none;
+    padding: 0;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
   label {
     display: block;
-    margin-bottom: 6px;
     font-family: ${FontFamily.Raleway_600};
     font-size: 12px;
     color: ${GlobalColors.deep_gray};
@@ -193,6 +214,117 @@ export const NewGroup = styled.div`
   }
 `;
 
+export const Step = styled.div`
+  margin: 4px 0 10px;
+
+  h3 {
+    margin: 0;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  p {
+    margin: 2px 0 0;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  /* El segundo paso aparece y desaparece segun haya grupo elegido; la linea de
+     arriba es lo que evita que se lea como continuacion del bloque anterior. */
+  &.segundo {
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid ${GlobalColors.s2};
+  }
+`;
+
+/*
+  El boton que revela el campo de codigo nuevo.
+
+  Va deliberadamente discreto: es la salida menos frecuente —lo normal es
+  sumarse a un grupo que ya existe— y competir en peso con "Buscar" volveria a
+  empujar hacia crear, que es justo lo que se queria dejar de hacer.
+*/
+export const GhostButton = styled.button`
+  display: block;
+  width: 100%;
+  height: 36px;
+  border: 1px dashed rgba(${PINK_RGB}, 0.5);
+  border-radius: 6px;
+  background-color: rgba(${PINK_RGB}, 0.04);
+  font-family: ${FontFamily.Raleway_600};
+  font-size: 12px;
+  color: ${PINK};
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(${PINK_RGB}, 0.09);
+  }
+`;
+
+export const Candidates = styled.ul`
+  margin: 0 0 10px;
+  padding: 0;
+  list-style: none;
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 6px;
+  /* Acotado a proposito: la lista vive dentro de un modal que ya scrollea, y sin
+     tope empuja el pie fuera de la vista. */
+  max-height: 210px;
+  overflow-y: auto;
+
+  li + li {
+    border-top: 1px solid ${GlobalColors.s2};
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  label:hover {
+    background-color: ${GlobalColors.s1};
+  }
+
+  input[type="checkbox"] {
+    accent-color: ${PINK};
+    flex-shrink: 0;
+  }
+
+  .datos {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nombre {
+    font-family: ${FontFamily.Raleway_600};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ids {
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  .mueve {
+    margin-left: auto;
+    flex-shrink: 0;
+    font-size: 11px;
+    font-style: italic;
+    color: ${PINK};
+    white-space: nowrap;
+  }
+`;
+
 export const Message = styled.p`
   margin: 0 0 12px;
   padding: 10px 12px;
@@ -206,6 +338,21 @@ export const Message = styled.p`
     background-color: rgba(${PINK_RGB}, 0.1);
     color: ${PINK};
   }
+
+  /* Informativo, no accionable: no debe competir con el contenido. */
+  &.sutil {
+    background: none;
+    padding: 2px 0 10px;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  /* Agrupar es un UPDATE, asi que sumar un producto que ya tenia grupo lo MUEVE.
+     Se avisa antes de guardar, no despues. */
+  &.aviso {
+    background-color: rgba(${PINK_RGB}, 0.08);
+    color: ${GlobalColors.deep_gray};
+  }
 `;
 
 export const Footer = styled.div`