contentoh-components-library 21.6.48 → 21.6.50

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/dist/components/pages/ProviderProductEdition/index.js

@@ -73,6 +73,8 @@ var _VariantGroupModal = require("../../organisms/VariantGroupModal");
 
 var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
 
+var _nonPropagable = require("../../organisms/PropagateChangesModal/non-propagable");
+
 var _api = require("../../organisms/LinkVariantsModal/api");
 
 var _ProductImageModal = require("../../organisms/ProductImageModal");
@@ -858,7 +860,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
     var retailerId = (_state$active_retaile2 = state.active_retailer) === null || _state$active_retaile2 === void 0 ? void 0 : _state$active_retaile2.id_retailer;
     var inputs = (_state$services$datas = (_state$services = state.services) === null || _state$services === void 0 ? void 0 : (_state$services$datas2 = _state$services.datasheets) === null || _state$services$datas2 === void 0 ? void 0 : _state$services$datas2.inputs) !== null && _state$services$datas !== void 0 ? _state$services$datas : {};
-    return ((_state$updated_datash = state.updated_datasheets_inputs) !== null && _state$updated_datash !== void 0 ? _state$updated_datash : []).map(function (item) {
+    var cambios = ((_state$updated_datash = state.updated_datasheets_inputs) !== null && _state$updated_datash !== void 0 ? _state$updated_datash : []).map(function (item) {
       var _input$name;
 
       var input = inputs["".concat(item.attributeId, "_").concat(retailerId)];
@@ -868,6 +870,14 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
         value: item.value
       };
     });
+    /*
+      UPC y SKU se quitan aquí y no dentro del diálogo porque esta lista también
+      decide SI el diálogo se abre. Editar solo el UPC no tiene nada que
+      propagar, así que preguntarlo sería pedirle al usuario una decisión sobre
+      un conjunto vacío.
+    */
+
+    return (0, _nonPropagable.soloPropagables)(cambios);
   };
 
   var handleOnClickSave = function handleOnClickSave() {