contentoh-components-library 21.6.23 → 21.6.25

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

@@ -11,7 +11,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectSpread6 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
@@ -25,6 +25,8 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _api = require("./api");
 
+var _helper = require("../../../_utils/helper");
+
 var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -74,11 +76,11 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       articleName = _ref.articleName,
       articleUpc = _ref.articleUpc,
       activeRetailerId = _ref.activeRetailerId,
-      retailersAvailable = _ref.retailersAvailable,
-      categoriesAvailable = _ref.categoriesAvailable,
       token = _ref.token,
       _ref$endpoint = _ref.endpoint,
       endpoint = _ref$endpoint === void 0 ? process.env.REACT_APP_VARIANTS_ENDPOINT : _ref$endpoint,
+      _ref$filtersEndpoint = _ref.filtersEndpoint,
+      filtersEndpoint = _ref$filtersEndpoint === void 0 ? process.env.REACT_APP_CREATE_PRODUCTS_FILTERS : _ref$filtersEndpoint,
       onClose = _ref.onClose,
       onLinked = _ref.onLinked;
 
@@ -115,71 +117,153 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   var _useState13 = (0, _react.useState)([]),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       selected = _useState14[0],
-      setSelected = _useState14[1]; // Lo que el padre ofrece en cada dimensión, y lo que el usuario eligió de
+      setSelected = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(0),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      total = _useState16[0],
+      setTotal = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(false),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      hasMore = _useState18[0],
+      setHasMore = _useState18[1];
+
+  var _useState19 = (0, _react.useState)(false),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      loadingMore = _useState20[0],
+      setLoadingMore = _useState20[1]; // Lo que el padre ofrece en cada dimensión, y lo que el usuario eligió de
   // cada una. Se guardan por separado porque se eligen por separado: heredar
   // todos los atributos no dice nada sobre qué fotos quiere la variante.
 
 
-  var _useState15 = (0, _react.useState)({
+  var _useState21 = (0, _react.useState)({
     attributes: [],
     descriptions: [],
     images: [],
     categoryRetailers: []
   }),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      offered = _useState16[0],
-      setOffered = _useState16[1];
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      offered = _useState22[0],
+      setOffered = _useState22[1];
 
-  var _useState17 = (0, _react.useState)({
+  var _useState23 = (0, _react.useState)({
     attributes: [],
     descriptions: [],
     images: [],
     categoryRetailers: []
   }),
-      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      chosen = _useState18[0],
-      setChosen = _useState18[1];
-
-  var _useState19 = (0, _react.useState)(null),
-      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      nameScope = _useState20[0],
-      setNameScope = _useState20[1];
-
-  var _useState21 = (0, _react.useState)("all-filled"),
-      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      inheritMode = _useState22[0],
-      setInheritMode = _useState22[1];
-
-  var _useState23 = (0, _react.useState)("attributes"),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      openSection = _useState24[0],
-      setOpenSection = _useState24[1]; // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
+      chosen = _useState24[0],
+      setChosen = _useState24[1];
 
-
-  var _useState25 = (0, _react.useState)([]),
+  var _useState25 = (0, _react.useState)(null),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      extraRetailers = _useState26[0],
-      setExtraRetailers = _useState26[1];
-
-  var _useState27 = (0, _react.useState)(""),
+      nameScope = _useState26[0],
+      setNameScope = _useState26[1]; // Un modo por dimensión, y ninguno decidido de entrada: el usuario tiene que
+  // pasar por las cuatro antes de poder ligar. Preseleccionar "todo" hacía que
+  // se pudiera ligar sin haber mirado nada, que es justo lo que hay que evitar
+  // en una operación que sobrescribe valores capturados.
+
+
+  var _useState27 = (0, _react.useState)({
+    categoryRetailers: null,
+    descriptions: null,
+    attributes: null,
+    images: null
+  }),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      newRetailer = _useState28[0],
-      setNewRetailer = _useState28[1];
-
-  var _useState29 = (0, _react.useState)(""),
+      modes = _useState28[0],
+      setModes = _useState28[1];
+  /*
+    Al ligar varios productos, la herencia puede ser la misma para todos o
+    distinta para cada uno.
+     Por defecto es la misma: es lo que se quiere casi siempre y evita repetir
+    cuatro decisiones por producto. Al desmarcarlo aparecen las pestañas y cada
+    producto guarda su propia selección en `perChild`.
+  */
+  // Desmarcado a propósito: aplicar la misma herencia a varios productos es una
+  // decisión, no un valor por omisión. Marcado de entrada se ligaban todos igual
+  // sin que nadie lo hubiera elegido.
+
+
+  var _useState29 = (0, _react.useState)(false),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      newCategory = _useState30[0],
-      setNewCategory = _useState30[1];
+      applyToAll = _useState30[0],
+      setApplyToAll = _useState30[1];
 
-  var _useState31 = (0, _react.useState)(false),
+  var _useState31 = (0, _react.useState)(null),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      loading = _useState32[0],
-      setLoading = _useState32[1];
+      activeChild = _useState32[0],
+      setActiveChild = _useState32[1];
 
-  var _useState33 = (0, _react.useState)(null),
+  var _useState33 = (0, _react.useState)({}),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      error = _useState34[0],
-      setError = _useState34[1];
+      perChild = _useState34[0],
+      setPerChild = _useState34[1]; // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
+
+  /*
+    Imágenes que la base lista pero cuyo archivo no está en S3.
+     Pasa: hay filas de rel_article_image con un src válido que apunta a un objeto
+    que ya no existe —comprobado, CloudFront responde 404—. Sin esto el paso 4
+    muestra una tarjeta rota, con el texto alternativo donde debería ir la foto, y
+    deja marcar para heredar algo que no se puede heredar.
+     No se puede saber desde el servidor sin ir a S3 por cada imagen, así que se
+    detecta al fallar la carga y se descuenta de la lista y del conteo.
+  */
+
+
+  var _useState35 = (0, _react.useState)([]),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      brokenImages = _useState36[0],
+      setBrokenImages = _useState36[1];
+
+  var _useState37 = (0, _react.useState)([]),
+      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
+      extraRetailers = _useState38[0],
+      setExtraRetailers = _useState38[1];
+
+  var _useState39 = (0, _react.useState)(""),
+      _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
+      newRetailer = _useState40[0],
+      setNewRetailer = _useState40[1];
+
+  var _useState41 = (0, _react.useState)(""),
+      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
+      newDepartment = _useState42[0],
+      setNewDepartment = _useState42[1];
+
+  var _useState43 = (0, _react.useState)(""),
+      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
+      newCategory = _useState44[0],
+      setNewCategory = _useState44[1]; // Las categorías no son una lista plana: dependen de la cadena y del
+  // departamento. Es la misma cascada que usa el alta de productos, y se sirve
+  // del mismo endpoint para no acabar con dos árboles de categorías distintos.
+
+
+  var _useState45 = (0, _react.useState)({
+    retailers: [],
+    departments: [],
+    categories: []
+  }),
+      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
+      filters = _useState46[0],
+      setFilters = _useState46[1];
+
+  var _useState47 = (0, _react.useState)(false),
+      _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
+      loadingFilters = _useState48[0],
+      setLoadingFilters = _useState48[1];
+
+  var _useState49 = (0, _react.useState)(false),
+      _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
+      loading = _useState50[0],
+      setLoading = _useState50[1];
+
+  var _useState51 = (0, _react.useState)(null),
+      _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
+      error = _useState52[0],
+      setError = _useState52[1];
 
   var request = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
@@ -223,13 +307,16 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     setSelected([]);
     setRejected(null);
     setSearched(false);
+    setTotal(0);
+    setHasMore(false);
     setError(null);
     setStep("search");
   }, [mode]);
 
   var search = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(event) {
-      var data;
+      var _data$total, data;
+
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -249,32 +336,94 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               data = _context2.sent;
               setCandidates(data.candidates || []);
               setRejected(data.rejected || null);
+              setTotal((_data$total = data.total) !== null && _data$total !== void 0 ? _data$total : (data.candidates || []).length);
+              setHasMore(!!data.hasMore);
               setSearched(true);
-              _context2.next = 15;
+              _context2.next = 17;
               break;
 
-            case 12:
-              _context2.prev = 12;
+            case 14:
+              _context2.prev = 14;
               _context2.t0 = _context2["catch"](3);
               setError(readError(_context2.t0));
 
-            case 15:
-              _context2.prev = 15;
+            case 17:
+              _context2.prev = 17;
               setLoading(false);
-              return _context2.finish(15);
+              return _context2.finish(17);
 
-            case 18:
+            case 20:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[3, 12, 15, 18]]);
+      }, _callee2, null, [[3, 14, 17, 20]]);
     }));
 
     return function search(_x3) {
       return _ref3.apply(this, arguments);
     };
   }();
+  /*
+    Trae la siguiente página y la agrega a la lista.
+     Se acumula en vez de reemplazar porque la selección vive en esta pantalla: si
+    la página 2 borrara la 1, lo marcado antes desaparecería de la vista sin
+    dejar de estar seleccionado, y el usuario acabaría ligando productos que ya
+    no ve.
+  */
+
+
+  var loadMore = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _data$total2, data;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setLoadingMore(true);
+              setError(null);
+              _context3.prev = 2;
+              _context3.next = 5;
+              return request("search", {
+                mode: mode,
+                articleId: articleId,
+                query: query.trim(),
+                offset: candidates.length
+              });
+
+            case 5:
+              data = _context3.sent;
+              setCandidates(function (current) {
+                return [].concat((0, _toConsumableArray2.default)(current), (0, _toConsumableArray2.default)(data.candidates || []));
+              });
+              setTotal((_data$total2 = data.total) !== null && _data$total2 !== void 0 ? _data$total2 : total);
+              setHasMore(!!data.hasMore);
+              _context3.next = 14;
+              break;
+
+            case 11:
+              _context3.prev = 11;
+              _context3.t0 = _context3["catch"](2);
+              setError(readError(_context3.t0));
+
+            case 14:
+              _context3.prev = 14;
+              setLoadingMore(false);
+              return _context3.finish(14);
+
+            case 17:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[2, 11, 14, 17]]);
+    }));
+
+    return function loadMore() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
 
   var toggle = function toggle(id) {
     setSelected(function (current) {
@@ -286,24 +435,24 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   };
 
   var goToInheritance = /*#__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$nameScope, data, listas;
 
-      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:
               setLoading(true);
               setError(null);
-              _context3.prev = 2;
-              _context3.next = 5;
+              _context4.prev = 2;
+              _context4.next = 5;
               return request("attributes", {
                 parentArticleId: parentArticleId,
                 retailerId: activeRetailerId
               });
 
             case 5:
-              data = _context3.sent;
+              data = _context4.sent;
               listas = {
                 attributes: data.attributes || [],
                 descriptions: data.descriptions || [],
@@ -311,66 +460,158 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 categoryRetailers: data.categoryRetailers || []
               };
               setOffered(listas);
-              setNameScope((_data$nameScope = data.nameScope) !== null && _data$nameScope !== void 0 ? _data$nameScope : null); // Todo preseleccionado: heredar es el caso normal, y quitar lo que sobra
-              // es menos trabajo que marcar de cero lo que casi siempre se quiere.
-
+              setNameScope((_data$nameScope = data.nameScope) !== null && _data$nameScope !== void 0 ? _data$nameScope : null);
               setChosen({
-                attributes: listas.attributes.map(function (item) {
-                  return item.id;
-                }),
-                descriptions: listas.descriptions.map(function (item) {
-                  return item.id;
-                }),
-                images: listas.images.map(function (item) {
-                  return item.id;
-                }),
-                categoryRetailers: listas.categoryRetailers.map(function (item) {
-                  return "".concat(item.retailerId, "-").concat(item.categoryId);
-                })
+                attributes: [],
+                descriptions: [],
+                images: [],
+                categoryRetailers: []
+              });
+              setModes({
+                categoryRetailers: null,
+                descriptions: null,
+                attributes: null,
+                images: null
               });
               setExtraRetailers([]);
+              setBrokenImages([]);
+              setPerChild({});
+              setApplyToAll(false);
+              setActiveChild(mode === "children" ? selected[0] : null);
               setStep("inherit");
-              _context3.next = 17;
+              _context4.next = 22;
               break;
 
-            case 14:
-              _context3.prev = 14;
-              _context3.t0 = _context3["catch"](2);
-              setError(readError(_context3.t0));
+            case 19:
+              _context4.prev = 19;
+              _context4.t0 = _context4["catch"](2);
+              setError(readError(_context4.t0));
 
-            case 17:
-              _context3.prev = 17;
+            case 22:
+              _context4.prev = 22;
               setLoading(false);
-              return _context3.finish(17);
+              return _context4.finish(22);
 
-            case 20:
+            case 25:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
         }
-      }, _callee3, null, [[2, 14, 17, 20]]);
+      }, _callee4, null, [[2, 19, 22, 25]]);
     }));
 
     return function goToInheritance() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
 
   var toggleChoice = function toggleChoice(dimension, id) {
     setChosen(function (current) {
       var lista = current[dimension];
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
         return item !== id;
       }) : [].concat((0, _toConsumableArray2.default)(lista), [id])));
     });
   };
 
-  var toggleAll = function toggleAll(dimension, ids) {
+  var chooseMode = function chooseMode(dimension, modo, ids) {
+    setModes(function (current) {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo));
+    });
     setChosen(function (current) {
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, current[dimension].length === ids.length ? [] : ids));
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo === "all" ? ids : []));
     });
   };
 
+  var loadFilters = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(retailer, department) {
+      var _readPayload$data, _readPayload, res, lista;
+
+      return _regenerator.default.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              setLoadingFilters(true);
+              _context5.prev = 1;
+              _context5.next = 4;
+              return _axios.default.get("".concat(filtersEndpoint, "?retailerSelected=").concat(retailer !== null && retailer !== void 0 ? retailer : "", "&departmentSelected=").concat(department !== null && department !== void 0 ? department : ""), {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 4:
+              res = _context5.sent;
+              // readPayload YA devuelve el cuerpo parseado. Volver a buscar `body`
+              // dentro dejaba la lista siempre vacía, y por eso el selector de cadenas
+              // no mostraba nada.
+              lista = (_readPayload$data = (_readPayload = (0, _api.readPayload)(res)) === null || _readPayload === void 0 ? void 0 : _readPayload.data) !== null && _readPayload$data !== void 0 ? _readPayload$data : [];
+              setFilters(function (current) {
+                if (!retailer) {
+                  return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+                    retailers: lista.map(function (item) {
+                      return {
+                        value: item.id,
+                        label: item.name
+                      };
+                    })
+                  });
+                }
+
+                if (!department) {
+                  return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+                    departments: lista.map(function (item) {
+                      return {
+                        value: item.category,
+                        label: item.category
+                      };
+                    }),
+                    categories: []
+                  });
+                }
+
+                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+                  categories: lista.map(function (item) {
+                    return {
+                      value: item.id,
+                      label: item.name
+                    };
+                  })
+                });
+              });
+              _context5.next = 12;
+              break;
+
+            case 9:
+              _context5.prev = 9;
+              _context5.t0 = _context5["catch"](1);
+              console.error("linkVariants/filters: ", _context5.t0);
+
+            case 12:
+              _context5.prev = 12;
+              setLoadingFilters(false);
+              return _context5.finish(12);
+
+            case 15:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5, null, [[1, 9, 12, 15]]);
+    }));
+
+    return function (_x4, _x5) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [filtersEndpoint, token]); // Las cadenas del catálogo se piden al entrar al paso de herencia, no al abrir
+  // el modal: quien solo busca y cancela no llega a necesitarlas.
+
+  (0, _react.useEffect)(function () {
+    if (step === "inherit" && !filters.retailers.length) {
+      loadFilters(null, null);
+    }
+  }, [step, filters.retailers.length, loadFilters]);
+
   var addRetailer = function addRetailer() {
     var retailerId = Number(newRetailer);
     var categoryId = Number(newCategory);
@@ -382,120 +623,243 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       return item.clave === clave;
     });
     if (yaEsta) return;
-    var retailer = (retailersAvailable || []).find(function (item) {
-      var _item$id;
-
-      return Number((_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.value) === retailerId;
+    var retailer = filters.retailers.find(function (item) {
+      return Number(item.value) === retailerId;
     });
-    var category = (categoriesAvailable || []).find(function (item) {
-      var _item$id2;
-
-      return Number((_item$id2 = item.id) !== null && _item$id2 !== void 0 ? _item$id2 : item.value) === categoryId;
+    var category = filters.categories.find(function (item) {
+      return Number(item.value) === categoryId;
     });
     setExtraRetailers(function (current) {
-      var _ref5, _retailer$name, _ref6, _category$name;
+      var _retailer$label, _category$label;
 
       return [].concat((0, _toConsumableArray2.default)(current), [{
         clave: clave,
         retailerId: retailerId,
         categoryId: categoryId,
-        retailerName: (_ref5 = (_retailer$name = retailer === null || retailer === void 0 ? void 0 : retailer.name) !== null && _retailer$name !== void 0 ? _retailer$name : retailer === null || retailer === void 0 ? void 0 : retailer.label) !== null && _ref5 !== void 0 ? _ref5 : "Cadena ".concat(retailerId),
-        categoryName: (_ref6 = (_category$name = category === null || category === void 0 ? void 0 : category.name) !== null && _category$name !== void 0 ? _category$name : category === null || category === void 0 ? void 0 : category.label) !== null && _ref6 !== void 0 ? _ref6 : "Categor\xEDa ".concat(categoryId)
+        retailerName: (_retailer$label = retailer === null || retailer === void 0 ? void 0 : retailer.label) !== null && _retailer$label !== void 0 ? _retailer$label : "Cadena ".concat(retailerId),
+        categoryName: (_category$label = category === null || category === void 0 ? void 0 : category.label) !== null && _category$label !== void 0 ? _category$label : "Categor\xEDa ".concat(categoryId)
       }]);
     });
     setChosen(function (current) {
-      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, current), {}, {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
         categoryRetailers: [].concat((0, _toConsumableArray2.default)(current.categoryRetailers), [clave])
       });
     });
     setNewRetailer("");
+    setNewDepartment("");
     setNewCategory("");
   };
+  /*
+    Convierte una selección de pantalla en el bloque `inherit` de la API.
+     Con el modo en "todos" se manda la palabra y no la lista que se pintó: si
+    entre la carga del modal y el guardado alguien agregó un valor al padre,
+    "todos" sigue significando todos. La lista sería una foto ya vieja.
+     Las parejas cadena+categoría viajan como objetos, no como ids, porque pueden
+    ser cadenas que el padre no tiene: ahí no hay nada que heredar, se asigna.
+  */
+  // Las que de verdad se pueden heredar: la base puede listar filas cuyo archivo
+  // ya no existe, y esas no cuentan ni para la lista ni para el "todas".
+
+
+  var imagenesUtiles = offered.images.filter(function (image) {
+    return !brokenImages.includes(image.id);
+  });
+
+  var buildInherit = function buildInherit(seleccion) {
+    var _seleccion$extraRetai;
+
+    var parejas = [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
+      return {
+        clave: "".concat(item.retailerId, "-").concat(item.categoryId),
+        retailerId: item.retailerId,
+        categoryId: item.categoryId
+      };
+    })), (0, _toConsumableArray2.default)((_seleccion$extraRetai = seleccion.extraRetailers) !== null && _seleccion$extraRetai !== void 0 ? _seleccion$extraRetai : []));
+    return {
+      attributes: seleccion.modes.attributes === "all" ? "all-filled" : seleccion.chosen.attributes,
+      descriptions: seleccion.modes.descriptions === "all" ? "all" : seleccion.chosen.descriptions,
+      images: seleccion.modes.images === "all" ? "all" : seleccion.chosen.images,
+      categoryRetailers: parejas.filter(function (par) {
+        return seleccion.chosen.categoryRetailers.includes(par.clave);
+      }).map(function (_ref7) {
+        var retailerId = _ref7.retailerId,
+            categoryId = _ref7.categoryId;
+        return {
+          retailerId: retailerId,
+          categoryId: categoryId
+        };
+      })
+    };
+  };
+
+  var seleccionVacia = function seleccionVacia() {
+    return {
+      modes: {
+        categoryRetailers: null,
+        descriptions: null,
+        attributes: null,
+        images: null
+      },
+      chosen: {
+        attributes: [],
+        descriptions: [],
+        images: [],
+        categoryRetailers: []
+      },
+      extraRetailers: []
+    };
+  };
+  /*
+    Cambia de pestaña conservando lo elegido en la anterior. Sin esto, moverse
+    entre productos borraría el trabajo hecho en cada uno.
+  */
+
+
+  var switchChild = function switchChild(id) {
+    var _perChild$id, _guardado$extraRetail;
+
+    setPerChild(function (current) {
+      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, activeChild, {
+        modes: modes,
+        chosen: chosen,
+        extraRetailers: extraRetailers
+      }));
+    });
+    var guardado = (_perChild$id = perChild[id]) !== null && _perChild$id !== void 0 ? _perChild$id : seleccionVacia();
+    setModes(guardado.modes);
+    setChosen(guardado.chosen);
+    setExtraRetailers((_guardado$extraRetail = guardado.extraRetailers) !== null && _guardado$extraRetail !== void 0 ? _guardado$extraRetail : []);
+    setActiveChild(id);
+  };
 
   var submit = /*#__PURE__*/function () {
-    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-      var todasLasParejas, inherit, body, data;
-      return _regenerator.default.wrap(function _callee4$(_context4) {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+      var inherit, inheritByChild, body, data;
+      return _regenerator.default.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context4.prev = _context4.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               setLoading(true);
-              setError(null); // Las parejas cadena+categoría viajan como objetos, no como ids: pueden ser
-              // cadenas que el padre no tiene, y ahí no hay nada que "heredar" — se asigna.
-
-              todasLasParejas = [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
-                return {
-                  clave: "".concat(item.retailerId, "-").concat(item.categoryId),
-                  retailerId: item.retailerId,
-                  categoryId: item.categoryId
-                };
-              })), (0, _toConsumableArray2.default)(extraRetailers));
-              inherit = {
-                attributes: inheritMode === "all-filled" ? "all-filled" : chosen.attributes,
-                descriptions: chosen.descriptions,
-                images: chosen.images,
-                categoryRetailers: todasLasParejas.filter(function (par) {
-                  return chosen.categoryRetailers.includes(par.clave);
-                }).map(function (_ref8) {
-                  var retailerId = _ref8.retailerId,
-                      categoryId = _ref8.categoryId;
-                  return {
-                    retailerId: retailerId,
-                    categoryId: categoryId
-                  };
-                })
-              };
+              setError(null);
+              inherit = buildInherit({
+                modes: modes,
+                chosen: chosen,
+                extraRetailers: extraRetailers
+              }); // Con las pestañas abiertas cada producto manda la suya. La selección de la
+              // pestaña a la vista todavía no está en perChild, así que se agrega aquí: si
+              // no, lo último que tocó el usuario se perdería al guardar.
+
+              inheritByChild = !applyToAll && mode === "children" ? selected.reduce(function (acc, id) {
+                var guardado = id === activeChild ? {
+                  modes: modes,
+                  chosen: chosen,
+                  extraRetailers: extraRetailers
+                } : perChild[id];
+                if (guardado) acc[id] = buildInherit(guardado);
+                return acc;
+              }, {}) : undefined;
               body = mode === "parent" ? {
                 mode: mode,
                 articleId: articleId,
                 parentArticleId: selected[0],
                 inherit: inherit
-              } : {
+              } : (0, _objectSpread6.default)({
                 mode: mode,
                 parentArticleId: articleId,
                 childrenArticleIds: selected,
                 inherit: inherit
-              };
-              _context4.prev = 5;
-              _context4.next = 8;
+              }, inheritByChild ? {
+                inheritByChild: inheritByChild
+              } : {});
+              _context6.prev = 5;
+              _context6.next = 8;
               return request("link", body);
 
             case 8:
-              data = _context4.sent;
+              data = _context6.sent;
               // El modo importa para quien escucha: en `children` este producto GANA
               // variantes; en `parent` pasa a SER una. Son efectos opuestos sobre la
               // misma ficha, así que quien refresque el estado necesita distinguirlos.
-              onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread4.default)((0, _objectSpread4.default)({}, data), {}, {
+              onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread6.default)((0, _objectSpread6.default)({}, data), {}, {
                 mode: mode,
                 parentArticleId: mode === "parent" ? selected[0] : articleId
               }));
               onClose === null || onClose === void 0 ? void 0 : onClose();
-              _context4.next = 16;
+              _context6.next = 16;
               break;
 
             case 13:
-              _context4.prev = 13;
-              _context4.t0 = _context4["catch"](5);
-              setError(readError(_context4.t0));
+              _context6.prev = 13;
+              _context6.t0 = _context6["catch"](5);
+              setError(readError(_context6.t0));
 
             case 16:
-              _context4.prev = 16;
+              _context6.prev = 16;
               setLoading(false);
-              return _context4.finish(16);
+              return _context6.finish(16);
 
             case 19:
             case "end":
-              return _context4.stop();
+              return _context6.stop();
           }
         }
-      }, _callee4, null, [[5, 13, 16, 19]]);
+      }, _callee6, null, [[5, 13, 16, 19]]);
     }));
 
     return function submit() {
-      return _ref7.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
-  }();
+  }(); // Una dimensión está decidida si el usuario eligió un modo, o si el padre no
+  // ofrece nada en ella —no se puede pedir que decida sobre una lista vacía—.
+
 
+  var decidida = function decidida(dimension) {
+    if (modes[dimension] !== null) return true;
+
+    if (dimension === "categoryRetailers") {
+      return offered.categoryRetailers.length === 0 && extraRetailers.length === 0;
+    } // Una imagen cuyo archivo no existe no es algo sobre lo que se pueda decidir.
+
+
+    return dimension === "images" ? imagenesUtiles.length === 0 : offered[dimension].length === 0;
+  };
+
+  var DIMENSIONES = ["categoryRetailers", "descriptions", "attributes", "images"]; // Con pestañas, que la que estoy viendo esté completa no basta: ligar escribe
+  // en todos, así que todos tienen que estar decididos. Si no, un producto se
+  // ligaría sin heredar nada solo porque nadie abrió su pestaña.
+
+  var decididoPara = function decididoPara(id) {
+    var guardado = id === activeChild ? {
+      modes: modes,
+      chosen: chosen,
+      extraRetailers: extraRetailers
+    } : perChild[id];
+    if (!guardado) return false;
+    return DIMENSIONES.every(function (dimension) {
+      if (guardado.modes[dimension] !== null) return true;
+
+      if (dimension === "categoryRetailers") {
+        var _guardado$extraRetail2;
+
+        return offered.categoryRetailers.length === 0 && ((_guardado$extraRetail2 = guardado.extraRetailers) !== null && _guardado$extraRetail2 !== void 0 ? _guardado$extraRetail2 : []).length === 0;
+      }
+
+      return dimension === "images" ? imagenesUtiles.length === 0 : offered[dimension].length === 0;
+    });
+  };
+
+  var todoDecidido = step === "inherit" && (applyToAll || mode !== "children" ? DIMENSIONES.every(decidida) : selected.every(decididoPara));
+  var faltantes = [["categoryRetailers", "cadenas"], ["descriptions", "descripciones"], ["attributes", "atributos"], ["images", "imágenes"]].filter(function (_ref9) {
+    var _ref10 = (0, _slicedToArray2.default)(_ref9, 1),
+        clave = _ref10[0];
+
+    return !decidida(clave);
+  }).map(function (_ref11) {
+    var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
+        nombre = _ref12[1];
+
+    return nombre;
+  });
   var selectionLabel = mode === "parent" ? "Se elige un solo producto padre." : "".concat(selected.length, " producto(s) pasar\xE1n a ser variantes.");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
     onClick: onClose,
@@ -580,241 +944,390 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 })
               }, candidate.articleId);
             })
+          }), searched && candidates.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Paging, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: ["Mostrando ", candidates.length, " de ", total]
+            }), hasMore && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              onClick: loadMore,
+              disabled: loadingMore,
+              children: loadingMore ? "Cargando…" : "Cargar más"
+            })]
           })]
         }), step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-              children: "Atributos de la ficha t\xE9cnica"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              className: "choice",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                type: "radio",
-                checked: inheritMode === "all-filled",
-                onChange: function onChange() {
-                  return setInheritMode("all-filled");
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                children: ["Todos los que tienen valor", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                  className: "hint",
-                  children: [offered.attributes.length, " atributo(s) con informaci\xF3n en el padre."]
-                })]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-              className: "choice",
+          children: [mode === "children" && selected.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "apply-all",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                type: "radio",
-                checked: inheritMode === "selected",
-                onChange: function onChange() {
-                  return setInheritMode("selected");
+                type: "checkbox",
+                checked: applyToAll,
+                onChange: function onChange(event) {
+                  setApplyToAll(event.target.checked);
+                  if (event.target.checked) setPerChild({});
                 }
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: ["Aplicar lo mismo a los ", selected.length, " productos", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "hint",
-                  children: "Lo que no elijas conserva el valor que ya tiene la variante."
+                  children: "Desm\xE1rcalo si alguno debe heredar algo distinto."
                 })]
               })]
+            }), !applyToAll && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Tabs, {
+              children: selected.map(function (id, indice) {
+                var producto = candidates.find(function (item) {
+                  return item.articleId === id;
+                });
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                  type: "button",
+                  className: id === activeChild ? "active" : "",
+                  onClick: function onClick() {
+                    return switchChild(id);
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "orden",
+                    children: indice + 1
+                  }), (producto === null || producto === void 0 ? void 0 : producto.name) || "Producto ".concat(id), decididoPara(id) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "listo",
+                    "aria-label": "listo",
+                    children: "\u2713"
+                  })]
+                }, id);
+              })
             })]
-          }), inheritMode === "selected" && activeRetailerId && !nameScope && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
-            children: "El producto padre no comparte la cadena que tienes abierta, as\xED que los nombres de abajo son los de otra de sus cadenas."
-          }), inheritMode === "selected" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
-            children: offered.attributes.map(function (attribute) {
-              return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    type: "checkbox",
-                    checked: chosen.attributes.includes(attribute.id),
-                    onChange: function onChange() {
-                      return toggleChoice("attributes", attribute.id);
-                    }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                    children: [attribute.name, attribute.unconfigured && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "note",
-                      children: "sin configuraci\xF3n en las cadenas del padre"
-                    }), attribute.ambiguousName && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "note",
-                      children: "se llama distinto en otra cadena"
-                    })]
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    className: "value",
-                    title: attribute.value,
-                    children: attribute.value
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "paso",
+                children: "1"
+              }), " Cadenas y categor\xEDas"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "categoryRetailers-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                  checked: modes.categoryRetailers === "all",
+                  onChange: function onChange() {
+                    return chooseMode("categoryRetailers", "all", offered.categoryRetailers.map(function (item) {
+                      return "".concat(item.retailerId, "-").concat(item.categoryId);
+                    }));
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Todas las del producto padre", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "hint",
+                    children: [offered.categoryRetailers.length, " cadena(s)."]
+                  })]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "categoryRetailers-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                  checked: modes.categoryRetailers === "some",
+                  onChange: function onChange() {
+                    return chooseMode("categoryRetailers", "some", []);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "hint",
+                    children: "Tambi\xE9n puedes agregar una cadena que el padre no tenga."
                   })]
-                })
-              }, attribute.id);
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SectionHead, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-                type: "button",
-                className: "toggle",
-                "aria-expanded": openSection === "descriptions",
-                onClick: function onClick() {
-                  return setOpenSection(openSection === "descriptions" ? null : "descriptions");
-                },
-                children: ["Descripciones", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                  className: "count",
-                  children: [chosen.descriptions.length, " de", " ", offered.descriptions.length]
                 })]
-              }), offered.descriptions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                type: "button",
-                className: "all",
-                onClick: function onClick() {
-                  return toggleAll("descriptions", offered.descriptions.map(function (item) {
-                    return item.id;
-                  }));
-                },
-                children: chosen.descriptions.length === offered.descriptions.length ? "Ninguna" : "Todas"
               })]
-            }), openSection === "descriptions" && (offered.descriptions.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
-              children: offered.descriptions.map(function (item) {
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+              children: [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
+                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, item), {}, {
+                  clave: "".concat(item.retailerId, "-").concat(item.categoryId),
+                  delPadre: true
+                });
+              })), (0, _toConsumableArray2.default)(extraRetailers.map(function (item) {
+                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, item), {}, {
+                  delPadre: false
+                });
+              }))).map(function (item) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
                   children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                       type: "checkbox",
-                      checked: chosen.descriptions.includes(item.id),
+                      disabled: modes.categoryRetailers === "all",
+                      checked: chosen.categoryRetailers.includes(item.clave),
                       onChange: function onChange() {
-                        return toggleChoice("descriptions", item.id);
+                        return toggleChoice("categoryRetailers", item.clave);
                       }
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      children: item.name
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: "value",
-                      title: item.value,
-                      children: item.value
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      className: "logo",
+                      src: (0, _helper.getRetailerPicture)(item.retailerId, 24, 24),
+                      alt: ""
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      children: [item.retailerName, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                        className: "meta",
+                        children: [item.categoryName || "Sin categoría", !item.delPadre && " · no la tiene el padre"]
+                      })]
                     })]
                   })
-                }, item.id);
+                }, item.clave);
               })
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
-              children: "El producto padre no tiene descripciones."
-            }))]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SectionHead, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-                type: "button",
-                className: "toggle",
-                "aria-expanded": openSection === "images",
-                onClick: function onClick() {
-                  return setOpenSection(openSection === "images" ? null : "images");
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                value: newRetailer,
+                onChange: function onChange(event) {
+                  var valor = event.target.value;
+                  setNewRetailer(valor);
+                  setNewDepartment("");
+                  setNewCategory("");
+                  if (valor) loadFilters(valor, null);
                 },
-                children: ["Im\xE1genes", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                  className: "count",
-                  children: [chosen.images.length, " de ", offered.images.length]
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                  value: "",
+                  children: "Agregar otra cadena\u2026"
+                }), filters.retailers.map(function (item) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: item.value,
+                    children: item.label
+                  }, item.value);
                 })]
-              }), offered.images.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                type: "button",
-                className: "all",
-                onClick: function onClick() {
-                  return toggleAll("images", offered.images.map(function (item) {
-                    return item.id;
-                  }));
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                value: newDepartment,
+                disabled: !newRetailer || !filters.departments.length,
+                onChange: function onChange(event) {
+                  var valor = event.target.value;
+                  setNewDepartment(valor);
+                  setNewCategory("");
+                  if (valor) loadFilters(newRetailer, valor);
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                  value: "",
+                  children: "Departamento\u2026"
+                }), filters.departments.map(function (item) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: item.value,
+                    children: item.label
+                  }, item.value);
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+                value: newCategory,
+                disabled: !newDepartment || !filters.categories.length,
+                onChange: function onChange(event) {
+                  return setNewCategory(event.target.value);
                 },
-                children: chosen.images.length === offered.images.length ? "Ninguna" : "Todas"
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                  value: "",
+                  children: "Categor\xEDa\u2026"
+                }), filters.categories.map(function (item) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+                    value: item.value,
+                    children: item.label
+                  }, item.value);
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                type: "button",
+                onClick: addRetailer,
+                disabled: !newRetailer || !newCategory || loadingFilters,
+                children: loadingFilters ? "…" : "Agregar"
               })]
-            }), openSection === "images" && (offered.images.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
-              children: offered.images.map(function (image) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
-                  className: chosen.images.includes(image.id) ? "picked" : "",
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "paso",
+                children: "2"
+              }), " Descripciones"]
+            }), offered.descriptions.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-                    type: "checkbox",
-                    checked: chosen.images.includes(image.id),
+                    type: "radio",
+                    name: "descriptions-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                    checked: modes.descriptions === "all",
                     onChange: function onChange() {
-                      return toggleChoice("images", image.id);
+                      return chooseMode("descriptions", "all", offered.descriptions.map(function (item) {
+                        return item.id;
+                      }));
                     }
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-                    src: image.src,
-                    alt: image.imageType || ""
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                    children: image.imageType || "Sin tipo"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: ["Todas las que tienen valor", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "hint",
+                      children: [offered.descriptions.length, " descripci\xF3n(es) con informaci\xF3n en el padre."]
+                    })]
                   })]
-                }, image.id);
-              })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "radio",
+                    name: "descriptions-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                    checked: modes.descriptions === "some",
+                    onChange: function onChange() {
+                      return chooseMode("descriptions", "some", []);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "hint",
+                      children: "Lo que no elijas conserva el valor que ya tiene la variante."
+                    })]
+                  })]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
+                children: offered.descriptions.map(function (item) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                        type: "checkbox",
+                        disabled: modes.descriptions === "all",
+                        checked: chosen.descriptions.includes(item.id),
+                        onChange: function onChange() {
+                          return toggleChoice("descriptions", item.id);
+                        }
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                        children: [item.name, item.duplicated && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                          className: "note",
+                          children: ["el padre tiene ", item.rows, " versiones de este texto; se copian todas"]
+                        })]
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: "value",
+                        title: item.value,
+                        children: item.value
+                      })]
+                    })
+                  }, item.id);
+                })
+              })]
             }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
-              children: "El producto padre no tiene im\xE1genes."
-            }))]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.SectionHead, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-                type: "button",
-                className: "toggle",
-                "aria-expanded": openSection === "retailers",
-                onClick: function onClick() {
-                  return setOpenSection(openSection === "retailers" ? null : "retailers");
-                },
-                children: ["Cadenas y categor\xEDas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                  className: "count",
-                  children: [chosen.categoryRetailers.length, " seleccionada(s)"]
+              children: "El producto padre no tiene descripciones que heredar."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "paso",
+                children: "3"
+              }), " Atributos de la ficha t\xE9cnica"]
+            }), offered.attributes.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "radio",
+                    name: "attributes-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                    checked: modes.attributes === "all",
+                    onChange: function onChange() {
+                      return chooseMode("attributes", "all", offered.attributes.map(function (item) {
+                        return item.id;
+                      }));
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: ["Todos los que tienen valor", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "hint",
+                      children: [offered.attributes.length, " atributo(s) con informaci\xF3n en el padre."]
+                    })]
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "radio",
+                    name: "attributes-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                    checked: modes.attributes === "some",
+                    onChange: function onChange() {
+                      return chooseMode("attributes", "some", []);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "hint",
+                      children: "Lo que no elijas conserva el valor que ya tiene la variante."
+                    })]
+                  })]
                 })]
-              })
-            }), openSection === "retailers" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
-                children: [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
-                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
-                    clave: "".concat(item.retailerId, "-").concat(item.categoryId),
-                    delPadre: true
-                  });
-                })), (0, _toConsumableArray2.default)(extraRetailers.map(function (item) {
-                  return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
-                    delPadre: false
-                  });
-                }))).map(function (item) {
+              }), activeRetailerId && !nameScope && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+                children: "El producto padre no comparte la cadena que tienes abierta, as\xED que los nombres de abajo son los de otra de sus cadenas."
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
+                children: offered.attributes.map(function (attribute) {
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
                     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                         type: "checkbox",
-                        checked: chosen.categoryRetailers.includes(item.clave),
+                        disabled: modes.attributes === "all",
+                        checked: chosen.attributes.includes(attribute.id),
                         onChange: function onChange() {
-                          return toggleChoice("categoryRetailers", item.clave);
+                          return toggleChoice("attributes", attribute.id);
                         }
                       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                        children: [item.retailerName, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                          className: "meta",
-                          children: [item.categoryName || "Sin categoría", !item.delPadre && " · no la tiene el padre"]
+                        children: [attribute.name, attribute.unconfigured && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                          className: "note",
+                          children: "sin configuraci\xF3n en las cadenas del padre"
+                        }), attribute.ambiguousName && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                          className: "note",
+                          children: "se llama distinto en otra cadena"
                         })]
+                      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                        className: "value",
+                        title: attribute.value,
+                        children: attribute.value
                       })]
                     })
-                  }, item.clave);
+                  }, attribute.id);
                 })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-                  value: newRetailer,
-                  onChange: function onChange(event) {
-                    return setNewRetailer(event.target.value);
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: "",
-                    children: "Agregar otra cadena\u2026"
-                  }), (retailersAvailable || []).map(function (item) {
-                    var _item$id3, _item$id4, _item$name;
-
-                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: (_item$id4 = item.id) !== null && _item$id4 !== void 0 ? _item$id4 : item.value,
-                      children: (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : item.label
-                    }, (_item$id3 = item.id) !== null && _item$id3 !== void 0 ? _item$id3 : item.value);
+              })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+              children: "El producto padre no tiene atributos con valor que heredar."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "paso",
+                children: "4"
+              }), " Im\xE1genes"]
+            }), imagenesUtiles.length ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "radio",
+                    name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                    checked: modes.images === "all",
+                    onChange: function onChange() {
+                      return chooseMode("images", "all", imagenesUtiles.map(function (item) {
+                        return item.id;
+                      }));
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: ["Todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "hint",
+                      children: [imagenesUtiles.length, " imagen(es) en el padre."]
+                    })]
                   })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-                  value: newCategory,
-                  onChange: function onChange(event) {
-                    return setNewCategory(event.target.value);
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                    value: "",
-                    children: "Categor\xEDa\u2026"
-                  }), (categoriesAvailable || []).map(function (item) {
-                    var _item$id5, _item$id6, _item$name2;
-
-                    return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-                      value: (_item$id6 = item.id) !== null && _item$id6 !== void 0 ? _item$id6 : item.value,
-                      children: (_item$name2 = item.name) !== null && _item$name2 !== void 0 ? _item$name2 : item.label
-                    }, (_item$id5 = item.id) !== null && _item$id5 !== void 0 ? _item$id5 : item.value);
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "radio",
+                    name: "images-".concat(activeChild !== null && activeChild !== void 0 ? activeChild : "todos"),
+                    checked: modes.images === "some",
+                    onChange: function onChange() {
+                      return chooseMode("images", "some", []);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "hint",
+                      children: "\xDAtil cuando la variante cambia de color o de empaque."
+                    })]
                   })]
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                  type: "button",
-                  onClick: addRetailer,
-                  disabled: !newRetailer || !newCategory,
-                  children: "Agregar"
                 })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageGrid, {
+                children: imagenesUtiles.map(function (image) {
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                    className: [chosen.images.includes(image.id) ? "picked" : "", modes.images === "all" ? "locked" : ""].filter(Boolean).join(" "),
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                      type: "checkbox",
+                      disabled: modes.images === "all",
+                      checked: chosen.images.includes(image.id),
+                      onChange: function onChange() {
+                        return toggleChoice("images", image.id);
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+                      src: (0, _helper.getProductImage)(image.src),
+                      alt: "",
+                      onError: function onError() {
+                        return setBrokenImages(function (current) {
+                          return current.includes(image.id) ? current : [].concat((0, _toConsumableArray2.default)(current), [image.id]);
+                        });
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      children: image.imageType || "Sin tipo de toma"
+                    })]
+                  }, image.id);
+                })
               })]
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+              children: "El producto padre no tiene im\xE1genes que heredar."
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
             children: "Lo que elijas heredar reemplaza el valor actual de la variante, incluso si alguien lo hab\xEDa capturado a mano."
@@ -823,7 +1336,9 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "summary",
-          children: step === "search" ? selectionLabel : "Revisa la herencia antes de ligar."
+          children: step === "search" ? selectionLabel : todoDecidido ? "Todo revisado. Puedes ligar." : !applyToAll && mode === "children" ? "Faltan ".concat(selected.filter(function (id) {
+            return !decididoPara(id);
+          }).length, " producto(s) por revisar.") : "Falta decidir: ".concat(faltantes.join(", "), ".")
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "actions",
           children: [step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
@@ -850,10 +1365,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
             type: "button",
             className: "primary",
             onClick: submit,
-            disabled: loading || // Solo estorba cuando hay algo que elegir y no se eligió nada.
-            // Con el padre sin atributos heredables, ligar sigue siendo
-            // válido: se heredan imágenes, descripciones y cadenas.
-            inheritMode === "selected" && offered.attributes.length > 0 && !chosen.attributes.length,
+            disabled: loading || !todoDecidido,
             children: loading ? "Ligando…" : "Ligar"
           })]
         })]