contentoh-components-library 21.6.32 → 21.6.33

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

@@ -25,8 +25,6 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _api = require("./api");
 
-var _SingleSelect = require("../../molecules/SingleSelect");
-
 var _helper = require("../../../_utils/helper");
 
 var _styles = require("./styles");
@@ -34,7 +32,7 @@ var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
 
 /*
-  Modal para ligar productos como padre/variante.
+  Modal para ligar productos como padre/hijo.
 
   props (* requerido):
     - *articleId: producto desde el que se liga (el que está en edición)
@@ -44,18 +42,28 @@ var _jsxRuntime = require("react/jsx-runtime");
     - *onClose: cerrar sin cambios
     - onLinked: se llama con la respuesta del backend cuando la liga tuvo éxito
 
-  Los dos modos son los de POST /variants/link:
-    parent   → este producto pasa a ser variante del que se elija
-    children → los elegidos pasan a ser variantes de este producto
+  Los dos modos son los de POST /variants/link, y NO son simétricos:
+
+    parent   → este producto pasa a ser hijo del que se elija.
+               No baja nada del padre. La única pregunta es si los atributos de
+               este producto se planchan sobre el padre (`pushChildToParent`) o
+               si solo se crea el vínculo.
+
+    children → los elegidos pasan a ser hijos de este producto.
+               Aquí sí baja del padre al hijo, con la selección de `inherit`.
 
-  En ambos el padre baja al hijo, nunca al revés. Lo que cambia es quién es quién.
+  La asimetría no es un descuido: al modo `parent` se llega desde un producto ya
+  capturado al que se le crea un padre para encabezar la familia. Bajarle encima
+  lo del padre borraría justo el trabajo desde el que se está ligando.
 */
 // El backend devuelve códigos estables justamente para no mandar textos de UI
 // desde el servidor. La traducción a lenguaje humano vive aquí.
 var ERROR_TEXT = {
-  VARIANT_SELF_LINK: "Un producto no puede ser variante de sí mismo.",
-  VARIANT_PARENT_IS_CHILD: "Ese producto ya es variante de otro. Las familias son de un solo nivel.",
-  VARIANT_CHILD_IS_PARENT: "Ese producto ya tiene variantes propias, así que no puede colgar de otro.",
+  VARIANT_SELF_LINK: "Un producto no puede ser hijo de sí mismo.",
+  // Se dice el hecho concreto y no la regla que hay detrás: "las familias son de
+  // un solo nivel" obliga al usuario a entender el modelo para leer el error.
+  VARIANT_PARENT_IS_CHILD: "Ese producto ya tiene un padre. Desvincúlalo primero.",
+  VARIANT_CHILD_IS_PARENT: "Ese producto ya tiene hijos, así que no se le puede asignar un padre.",
   VARIANT_ALREADY_LINKED: "Ese producto ya pertenece a otra familia. Desvincúlalo primero.",
   VARIANT_NOT_OWNED_BY_USER: "Ese producto está fuera de tu alcance.",
   VARIANT_CROSS_COMPANY: "Ese producto pertenece a otra compañía.",
@@ -74,6 +82,8 @@ var readError = function readError(error) {
 };
 
 var LinkVariantsModal = function LinkVariantsModal(_ref) {
+  var _candidates$find$vari, _candidates$find2;
+
   var articleId = _ref.articleId,
       articleName = _ref.articleName,
       articleUpc = _ref.articleUpc,
@@ -81,8 +91,6 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       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;
 
@@ -136,7 +144,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       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.
+  // todos los atributos no dice nada sobre qué fotos quiere el hijo.
 
 
   var _useState21 = (0, _react.useState)({
@@ -188,22 +196,33 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   // decisión, no un valor por omisión. Marcado de entrada se ligaban todos igual
   // sin que nadie lo hubiera elegido.
 
+  /*
+    Modo `parent`: la unica decision de la pantalla.
+     null = sin decidir, true = planchar los atributos del hijo sobre el padre,
+    false = solo vincular sin mover nada. No hay una tercera opcion: bajar del
+    padre al hijo es la otra direccion y vive en el modo children.
+  */
+
 
-  var _useState29 = (0, _react.useState)(false),
+  var _useState29 = (0, _react.useState)(null),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      applyToAll = _useState30[0],
-      setApplyToAll = _useState30[1];
+      pushToParent = _useState30[0],
+      setPushToParent = _useState30[1];
 
-  var _useState31 = (0, _react.useState)(null),
+  var _useState31 = (0, _react.useState)(false),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      activeChild = _useState32[0],
-      setActiveChild = _useState32[1];
+      applyToAll = _useState32[0],
+      setApplyToAll = _useState32[1];
 
-  var _useState33 = (0, _react.useState)({}),
+  var _useState33 = (0, _react.useState)(null),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      perChild = _useState34[0],
-      setPerChild = _useState34[1]; // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
+      activeChild = _useState34[0],
+      setActiveChild = _useState34[1];
 
+  var _useState35 = (0, _react.useState)({}),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      perChild = _useState36[0],
+      setPerChild = _useState36[1];
   /*
     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
@@ -215,57 +234,20 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   */
 
 
-  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];
+      brokenImages = _useState38[0],
+      setBrokenImages = _useState38[1];
 
-  var _useState39 = (0, _react.useState)(""),
+  var _useState39 = (0, _react.useState)(false),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      newRetailer = _useState40[0],
-      setNewRetailer = _useState40[1];
+      loading = _useState40[0],
+      setLoading = _useState40[1];
 
-  var _useState41 = (0, _react.useState)(""),
+  var _useState41 = (0, _react.useState)(null),
       _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];
+      error = _useState42[0],
+      setError = _useState42[1];
 
   var request = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
@@ -312,6 +294,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     setTotal(0);
     setHasMore(false);
     setError(null);
+    setPushToParent(null);
     setStep("search");
   }, [mode]);
 
@@ -444,16 +427,26 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
+              if (!(mode === "parent")) {
+                _context4.next = 4;
+                break;
+              }
+
+              setPushToParent(null);
+              setStep("inherit");
+              return _context4.abrupt("return");
+
+            case 4:
               setLoading(true);
               setError(null);
-              _context4.prev = 2;
-              _context4.next = 5;
+              _context4.prev = 6;
+              _context4.next = 9;
               return request("attributes", {
                 parentArticleId: parentArticleId,
                 retailerId: activeRetailerId
               });
 
-            case 5:
+            case 9:
               data = _context4.sent;
               listas = {
                 attributes: data.attributes || [],
@@ -475,31 +468,30 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 attributes: null,
                 images: null
               });
-              setExtraRetailers([]);
               setBrokenImages([]);
               setPerChild({});
               setApplyToAll(false);
               setActiveChild(mode === "children" ? selected[0] : null);
               setStep("inherit");
-              _context4.next = 22;
+              _context4.next = 25;
               break;
 
-            case 19:
-              _context4.prev = 19;
-              _context4.t0 = _context4["catch"](2);
-              setError(readError(_context4.t0));
-
             case 22:
               _context4.prev = 22;
-              setLoading(false);
-              return _context4.finish(22);
+              _context4.t0 = _context4["catch"](6);
+              setError(readError(_context4.t0));
 
             case 25:
+              _context4.prev = 25;
+              setLoading(false);
+              return _context4.finish(25);
+
+            case 28:
             case "end":
               return _context4.stop();
           }
         }
-      }, _callee4, null, [[2, 19, 22, 25]]);
+      }, _callee4, null, [[6, 22, 25, 28]]);
     }));
 
     return function goToInheritance() {
@@ -534,165 +526,14 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       return (0, _objectSpread7.default)((0, _objectSpread7.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, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
-                    retailers: lista.map(function (item) {
-                      return {
-                        value: item.id,
-                        label: item.name
-                      };
-                    })
-                  });
-                }
-
-                if (!department) {
-                  return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
-                    departments: lista.map(function (item) {
-                      return {
-                        value: item.category,
-                        label: item.category
-                      };
-                    }),
-                    categories: []
-                  });
-                } // El tercer nivel no viene como {id, name} sino como
-                // {category_id, subcategory}: con el mapeo de los otros dos, la
-                // categoría salía en la lista pero sin texto. Mismo criterio que usa
-                // el alta de productos, incluido el separador legible.
-
-
-                return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
-                  categories: lista.map(function (item) {
-                    var _item$subcategory;
-
-                    return {
-                      value: item.category_id,
-                      label: ((_item$subcategory = item.subcategory) !== null && _item$subcategory !== void 0 ? _item$subcategory : "").replace("|", " > ")
-                    };
-                  })
-                });
-              });
-              _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]);
-  /*
-    Quita una cadena agregada a mano. Solo esas: las del padre se desmarcan con
-    su casilla, pero siguen existiendo y volverán a aparecer.
-  */
-
-  var removeExtraRetailer = function removeExtraRetailer(clave) {
-    setExtraRetailers(function (current) {
-      return current.filter(function (item) {
-        return item.clave !== clave;
-      });
-    });
-    setChosen(function (current) {
-      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
-        categoryRetailers: current.categoryRetailers.filter(function (item) {
-          return item !== clave;
-        })
-      });
-    });
-  };
-
-  var addRetailer = function addRetailer() {
-    var retailerId = Number(newRetailer);
-    var categoryId = Number(newCategory);
-    if (!retailerId || !categoryId) return;
-    var clave = "".concat(retailerId, "-").concat(categoryId);
-    var yaEsta = offered.categoryRetailers.some(function (item) {
-      return "".concat(item.retailerId, "-").concat(item.categoryId) === clave;
-    }) || extraRetailers.some(function (item) {
-      return item.clave === clave;
-    });
-    if (yaEsta) return;
-    var retailer = filters.retailers.find(function (item) {
-      return Number(item.value) === retailerId;
-    });
-    var category = filters.categories.find(function (item) {
-      return Number(item.value) === categoryId;
-    });
-    setExtraRetailers(function (current) {
-      var _retailer$label, _category$label;
-
-      return [].concat((0, _toConsumableArray2.default)(current), [{
-        clave: clave,
-        retailerId: retailerId,
-        categoryId: 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, _objectSpread7.default)((0, _objectSpread7.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 parejas cadena+categoría viajan como objetos y no como ids porque el
+    backend las da de alta en el hijo por (cadena, categoría); todas salen de las
+    que ya tiene el padre, que son las únicas que se pueden heredar.
   */
   // 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".
@@ -703,24 +544,22 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   });
 
   var buildInherit = function buildInherit(seleccion) {
-    var _seleccion$extraRetai;
-
-    var parejas = [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
+    var parejas = 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;
+      }).map(function (_ref6) {
+        var retailerId = _ref6.retailerId,
+            categoryId = _ref6.categoryId;
         return {
           retailerId: retailerId,
           categoryId: categoryId
@@ -742,8 +581,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
         descriptions: [],
         images: [],
         categoryRetailers: []
-      },
-      extraRetailers: []
+      }
     };
   };
   /*
@@ -753,35 +591,32 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
 
 
   var switchChild = function switchChild(id) {
-    var _perChild$id, _guardado$extraRetail;
+    var _perChild$id;
 
     setPerChild(function (current) {
       return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, activeChild, {
         modes: modes,
-        chosen: chosen,
-        extraRetailers: extraRetailers
+        chosen: chosen
       }));
     });
     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 _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+    var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
       var inherit, inheritByChild, body, data;
-      return _regenerator.default.wrap(function _callee6$(_context6) {
+      return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context5.prev = _context5.next) {
             case 0:
               setLoading(true);
               setError(null);
               inherit = buildInherit({
                 modes: modes,
-                chosen: chosen,
-                extraRetailers: extraRetailers
+                chosen: chosen
               }); // 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.
@@ -789,8 +624,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               inheritByChild = !applyToAll && mode === "children" ? selected.reduce(function (acc, id) {
                 var guardado = id === activeChild ? {
                   modes: modes,
-                  chosen: chosen,
-                  extraRetailers: extraRetailers
+                  chosen: chosen
                 } : perChild[id];
                 if (guardado) acc[id] = buildInherit(guardado);
                 return acc;
@@ -799,7 +633,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 mode: mode,
                 articleId: articleId,
                 parentArticleId: selected[0],
-                inherit: inherit
+                pushChildToParent: pushToParent === true
               } : (0, _objectSpread7.default)({
                 mode: mode,
                 parentArticleId: articleId,
@@ -808,43 +642,43 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               }, inheritByChild ? {
                 inheritByChild: inheritByChild
               } : {});
-              _context6.prev = 5;
-              _context6.next = 8;
+              _context5.prev = 5;
+              _context5.next = 8;
               return request("link", body);
 
             case 8:
-              data = _context6.sent;
+              data = _context5.sent;
               // El modo importa para quien escucha: en `children` este producto GANA
-              // variantes; en `parent` pasa a SER una. Son efectos opuestos sobre la
+              // hijos; en `parent` pasa a SER uno. Son efectos opuestos sobre la
               // misma ficha, así que quien refresque el estado necesita distinguirlos.
               onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread7.default)((0, _objectSpread7.default)({}, data), {}, {
                 mode: mode,
                 parentArticleId: mode === "parent" ? selected[0] : articleId
               }));
               onClose === null || onClose === void 0 ? void 0 : onClose();
-              _context6.next = 16;
+              _context5.next = 16;
               break;
 
             case 13:
-              _context6.prev = 13;
-              _context6.t0 = _context6["catch"](5);
-              setError(readError(_context6.t0));
+              _context5.prev = 13;
+              _context5.t0 = _context5["catch"](5);
+              setError(readError(_context5.t0));
 
             case 16:
-              _context6.prev = 16;
+              _context5.prev = 16;
               setLoading(false);
-              return _context6.finish(16);
+              return _context5.finish(16);
 
             case 19:
             case "end":
-              return _context6.stop();
+              return _context5.stop();
           }
         }
-      }, _callee6, null, [[5, 13, 16, 19]]);
+      }, _callee5, null, [[5, 13, 16, 19]]);
     }));
 
     return function submit() {
-      return _ref8.apply(this, arguments);
+      return _ref7.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—.
@@ -854,7 +688,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     if (modes[dimension] !== null) return true;
 
     if (dimension === "categoryRetailers") {
-      return offered.categoryRetailers.length === 0 && extraRetailers.length === 0;
+      return offered.categoryRetailers.length === 0;
     } // Una imagen cuyo archivo no existe no es algo sobre lo que se pueda decidir.
 
 
@@ -868,36 +702,59 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   var decididoPara = function decididoPara(id) {
     var guardado = id === activeChild ? {
       modes: modes,
-      chosen: chosen,
-      extraRetailers: extraRetailers
+      chosen: chosen
     } : 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 offered.categoryRetailers.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];
+  var todoDecidido = step === "inherit" && (mode === "parent" ? pushToParent !== null : applyToAll ? DIMENSIONES.every(decidida) : selected.every(decididoPara));
+  var faltantes = [["categoryRetailers", "cadenas"], ["descriptions", "descripciones"], ["attributes", "atributos"], ["images", "imágenes"]].filter(function (_ref8) {
+    var _ref9 = (0, _slicedToArray2.default)(_ref8, 1),
+        clave = _ref9[0];
 
     return !decidida(clave);
-  }).map(function (_ref11) {
-    var _ref12 = (0, _slicedToArray2.default)(_ref11, 2),
-        nombre = _ref12[1];
+  }).map(function (_ref10) {
+    var _ref11 = (0, _slicedToArray2.default)(_ref10, 2),
+        nombre = _ref11[1];
 
     return nombre;
   });
-  var selectionLabel = mode === "parent" ? "Se elige un solo producto padre." : "".concat(selected.length, " producto(s) pasar\xE1n a ser variantes.");
+  var selectionLabel = mode === "parent" ? "Se elige un solo producto padre." : "".concat(selected.length, " producto(s) pasar\xE1n a ser hijos de este.");
+  /*
+    Quién es el padre y quién el hijo.
+     Es la pregunta que el modal no contestaba: la dirección la fija el modo, que
+    se eligió en la pantalla anterior y ya no está a la vista, así que al llegar
+    aquí no había forma de saber si lo que se marca baja o sube. En modo `parent`
+    el producto abierto es el que RECIBE, que es justo lo contrario de lo que
+    sugiere tenerlo en el título del modal.
+  */
+
+  var nombreDe = function nombreDe(id) {
+    var _candidates$find;
+
+    return ((_candidates$find = candidates.find(function (item) {
+      return item.articleId === id;
+    })) === null || _candidates$find === void 0 ? void 0 : _candidates$find.name) || "Producto ".concat(id);
+  };
+
+  var esteEsPadre = mode === "children"; // Cuántos hijos tiene ya el padre elegido. Es informativo: sale del mismo
+  // candidato que se pintó en la búsqueda, sin una llamada extra.
+
+  var hijosDelPadre = mode === "parent" && selected.length ? (_candidates$find$vari = (_candidates$find2 = candidates.find(function (item) {
+    return item.articleId === selected[0];
+  })) === null || _candidates$find2 === void 0 ? void 0 : _candidates$find2.variantsCount) !== null && _candidates$find$vari !== void 0 ? _candidates$find$vari : 0 : 0;
+  var nombreEsteProducto = articleName || "Producto ".concat(articleId);
+  var nombrePadre = esteEsPadre ? nombreEsteProducto : selected.length ? nombreDe(selected[0]) : "—";
+  var nombreHijo = !esteEsPadre ? nombreEsteProducto : selected.length === 1 ? nombreDe(selected[0]) : "".concat(selected.length, " productos elegidos");
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
     onClick: onClose,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Panel, {
@@ -925,14 +782,14 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
           onClick: function onClick() {
             return setMode("parent");
           },
-          children: "Este producto es variante de otro"
+          children: "Relacionar padre a este producto"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           type: "button",
           className: mode === "children" ? "active" : "",
           onClick: function onClick() {
             return setMode("children");
           },
-          children: "Agregar variantes a este producto"
+          children: "Relacionar hijos a este producto"
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Body, {
         children: [error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
@@ -976,7 +833,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                     })]
                   }), candidate.variantsCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
                     className: "count",
-                    children: [candidate.variantsCount, " variante", candidate.variantsCount === 1 ? "" : "s"]
+                    children: [candidate.variantsCount, " hijo", candidate.variantsCount === 1 ? "" : "s"]
                   })]
                 })
               }, candidate.articleId);
@@ -991,8 +848,119 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               children: loadingMore ? "Cargando…" : "Cargar más"
             })]
           })]
-        }), step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [mode === "children" && selected.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        }), step === "inherit" && mode === "parent" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Direction, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "lado",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "rol",
+                children: "Producto hijo"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                title: nombreEsteProducto,
+                children: nombreEsteProducto
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "actual",
+                children: "el que tienes abierto"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "flecha",
+              "aria-hidden": "true",
+              children: "\u2192"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "lado",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "rol",
+                children: "Producto padre"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                title: nombrePadre,
+                children: nombrePadre
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+            children: ["Aqu\xED ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: "no baja nada del padre"
+            }), ": \xAB", nombreEsteProducto, "\xBB conserva todo lo que ya tiene capturado. Lo \xFAnico que se decide es si esos valores", " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: "suben al padre"
+            }), "."]
+          }), hijosDelPadre > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+            className: "aviso",
+            children: ["\xAB", nombrePadre, "\xBB ya tiene ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: hijosDelPadre
+            }), " ", hijosDelPadre === 1 ? "hijo" : "hijos", ". Si planchas, cambias los valores desde los que ellos heredan. Lo que ya tengan capturado no se toca."]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "paso",
+                children: "1"
+              }), " \xBFQu\xE9 hacemos con los atributos?"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "push-to-parent",
+                  checked: pushToParent === true,
+                  onChange: function onChange() {
+                    return setPushToParent(true);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Planchar los de este producto sobre el padre", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "hint",
+                    children: "El padre se queda con estos valores y pasan a contar como heredados. El UPC y el SKU nunca suben."
+                  })]
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "push-to-parent",
+                  checked: pushToParent === false,
+                  onChange: function onChange() {
+                    return setPushToParent(false);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: ["Solo vincular, sin mover nada", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "hint",
+                    children: "Se crea el parentesco y ya. Ni el padre ni este producto cambian de valor."
+                  })]
+                })]
+              })]
+            })]
+          })]
+        }), step === "inherit" && mode === "children" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Direction, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "lado",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "rol",
+                children: "Producto padre"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                title: nombrePadre,
+                children: nombrePadre
+              }), esteEsPadre && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "actual",
+                children: "el que tienes abierto"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "flecha",
+              "aria-hidden": "true",
+              children: "\u2192"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "lado",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "rol",
+                children: esteEsPadre && selected.length > 1 ? "".concat(selected.length, " productos hijo") : "Producto hijo"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+                title: nombreHijo,
+                children: nombreHijo
+              }), !esteEsPadre && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "actual",
+                children: "el que tienes abierto"
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+            children: ["Todo lo que marques abajo ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: "baja del padre al hijo"
+            }), ". Nada sube en el otro sentido:", " ", esteEsPadre ? "este producto no cambia." : "\xAB".concat(nombrePadre, "\xBB no cambia.")]
+          }), 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", {
@@ -1064,23 +1032,18 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }), /*#__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."
+                    children: "Solo se puede heredar de las que ya tiene el padre."
                   })]
                 })]
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
-              children: [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
+              children: offered.categoryRetailers.map(function (item) {
                 return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, item), {}, {
-                  clave: "".concat(item.retailerId, "-").concat(item.categoryId),
-                  delPadre: true
+                  clave: "".concat(item.retailerId, "-").concat(item.categoryId)
                 });
-              })), (0, _toConsumableArray2.default)(extraRetailers.map(function (item) {
-                return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, item), {}, {
-                  delPadre: false
-                });
-              }))).map(function (item) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              }).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.categoryRetailers === "all",
@@ -1093,64 +1056,14 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                       src: (0, _helper.getRetailerPicture)(item.retailerId, 24, 24),
                       alt: ""
                     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                      children: [item.retailerName, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      children: [item.retailerName, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                         className: "meta",
-                        children: [item.categoryName || "Sin categoría", !item.delPadre && " · no la tiene el padre"]
+                        children: item.categoryName || "Sin categoría"
                       })]
                     })]
-                  }), !item.delPadre && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                    type: "button",
-                    className: "quitar",
-                    title: "Quitar esta cadena",
-                    "aria-label": "Quitar ".concat(item.retailerName),
-                    onClick: function onClick() {
-                      return removeExtraRetailer(item.clave);
-                    },
-                    children: "\xD7"
-                  })]
+                  })
                 }, item.clave);
               })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
-                id: "link-variants-retailer",
-                placeholder: "Agregar otra cadena\u2026",
-                options: filters.retailers,
-                value: newRetailer,
-                loading: loadingFilters && !filters.retailers.length,
-                onChange: function onChange(valor) {
-                  setNewRetailer(valor !== null && valor !== void 0 ? valor : "");
-                  setNewDepartment("");
-                  setNewCategory("");
-                  if (valor) loadFilters(valor, null);
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
-                id: "link-variants-department",
-                placeholder: "Departamento\u2026",
-                options: filters.departments,
-                value: newDepartment,
-                disabled: !newRetailer,
-                loading: loadingFilters && !!newRetailer,
-                onChange: function onChange(valor) {
-                  setNewDepartment(valor !== null && valor !== void 0 ? valor : "");
-                  setNewCategory("");
-                  if (valor) loadFilters(newRetailer, valor);
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleSelect.SingleSelect, {
-                id: "link-variants-category",
-                placeholder: "Categor\xEDa\u2026",
-                options: filters.categories,
-                value: newCategory,
-                disabled: !newDepartment,
-                loading: loadingFilters && !!newDepartment,
-                onChange: function onChange(valor) {
-                  return setNewCategory(valor !== null && valor !== void 0 ? valor : "");
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-                type: "button",
-                onClick: addRetailer,
-                disabled: !newRetailer || !newCategory || loadingFilters,
-                children: "Agregar"
-              })]
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Block, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
@@ -1187,7 +1100,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                   }), /*#__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."
+                      children: "Lo que no elijas conserva el valor que ya tiene el hijo."
                     })]
                   })]
                 })]
@@ -1254,7 +1167,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                   }), /*#__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."
+                      children: "Lo que no elijas conserva el valor que ya tiene el hijo."
                     })]
                   })]
                 })]
@@ -1325,7 +1238,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }), /*#__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."
+                    children: "\xDAtil cuando el hijo cambia de color o de empaque."
                   })]
                 })]
               })]
@@ -1355,7 +1268,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               })
             })]
           }), /*#__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."
+            children: "Lo que elijas heredar reemplaza el valor actual del hijo, incluso si alguien lo hab\xEDa capturado a mano."
           })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
@@ -1367,7 +1280,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
              falta, no repetir que falta "1 producto". */
           !applyToAll && mode === "children" && selected.length > 1 ? "Faltan ".concat(selected.filter(function (id) {
             return !decididoPara(id);
-          }).length, " producto(s) por revisar.") : "Falta decidir: ".concat(faltantes.join(", "), ".")
+          }).length, " producto(s) por revisar.") : mode === "parent" ? "Elige si los atributos suben al padre o no." : "Falta decidir: ".concat(faltantes.join(", "), ".")
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "actions",
           children: [step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {