contentoh-components-library 21.6.32 → 21.6.34

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

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import axios from "axios";
 
 import { readPayload, ApiError } from "./api";
-import { SingleSelect } from "../../molecules/SingleSelect";
 import { getProductImage, getRetailerPicture } from "../../../_utils/helper";
 
 import {
@@ -14,19 +13,18 @@ import {
   SearchRow,
   List,
   AttributeList,
-  Section,
+  Direction,
   Block,
   Choices,
   Tabs,
   Paging,
   ImageGrid,
-  AddRetailer,
   Message,
   Footer,
 } from "./styles";
 
 /*
-  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)
@@ -36,21 +34,31 @@ import {
     - *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:
 
-  En ambos el padre baja al hijo, nunca al revés. Lo que cambia es quién es quién.
+    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`.
+
+  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í.
 const ERROR_TEXT = {
-  VARIANT_SELF_LINK: "Un producto no puede ser variante de sí mismo.",
+  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 es variante de otro. Las familias son de un solo nivel.",
+    "Ese producto ya tiene un padre. Desvincúlalo primero.",
   VARIANT_CHILD_IS_PARENT:
-    "Ese producto ya tiene variantes propias, así que no puede colgar de otro.",
+    "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.",
@@ -76,7 +84,6 @@ export const LinkVariantsModal = ({
   activeRetailerId,
   token,
   endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
-  filtersEndpoint = process.env.REACT_APP_CREATE_PRODUCTS_FILTERS,
   onClose,
   onLinked,
 }) => {
@@ -94,7 +101,7 @@ export const LinkVariantsModal = ({
 
   // 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.
   const [offered, setOffered] = useState({
     attributes: [],
     descriptions: [],
@@ -131,11 +138,19 @@ export const LinkVariantsModal = ({
   // 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.
+  /*
+    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.
+  */
+  const [pushToParent, setPushToParent] = useState(null);
+
   const [applyToAll, setApplyToAll] = useState(false);
   const [activeChild, setActiveChild] = useState(null);
   const [perChild, setPerChild] = useState({});
 
-  // 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.
 
@@ -149,21 +164,6 @@ export const LinkVariantsModal = ({
   */
   const [brokenImages, setBrokenImages] = useState([]);
 
-  const [extraRetailers, setExtraRetailers] = useState([]);
-  const [newRetailer, setNewRetailer] = useState("");
-  const [newDepartment, setNewDepartment] = useState("");
-  const [newCategory, setNewCategory] = useState("");
-
-  // 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.
-  const [filters, setFilters] = useState({
-    retailers: [],
-    departments: [],
-    categories: [],
-  });
-  const [loadingFilters, setLoadingFilters] = useState(false);
-
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
 
@@ -195,6 +195,7 @@ export const LinkVariantsModal = ({
     setTotal(0);
     setHasMore(false);
     setError(null);
+    setPushToParent(null);
     setStep("search");
   }, [mode]);
 
@@ -258,6 +259,17 @@ export const LinkVariantsModal = ({
   };
 
   const goToInheritance = async () => {
+    /*
+      En modo `parent` no hay nada que elegir del padre —no baja nada—, asi que
+      no se pide su catalogo de atributos: seria una llamada cuyo resultado no
+      se pinta. La unica pregunta es si se plancha lo del hijo hacia arriba.
+    */
+    if (mode === "parent") {
+      setPushToParent(null);
+      setStep("inherit");
+      return;
+    }
+
     setLoading(true);
     setError(null);
     try {
@@ -290,7 +302,6 @@ export const LinkVariantsModal = ({
         attributes: null,
         images: null,
       });
-      setExtraRetailers([]);
       setBrokenImages([]);
       setPerChild({});
       setApplyToAll(false);
@@ -338,126 +349,6 @@ export const LinkVariantsModal = ({
     }));
   };
 
-  const loadFilters = useCallback(
-    async (retailer, department) => {
-      setLoadingFilters(true);
-      try {
-        const res = await axios.get(
-          `${filtersEndpoint}?retailerSelected=${
-            retailer ?? ""
-          }&departmentSelected=${department ?? ""}`,
-          { headers: { Authorization: token } }
-        );
-
-        // 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.
-        const lista = readPayload(res)?.data ?? [];
-
-        setFilters((current) => {
-          if (!retailer) {
-            return {
-              ...current,
-              retailers: lista.map((item) => ({
-                value: item.id,
-                label: item.name,
-              })),
-            };
-          }
-          if (!department) {
-            return {
-              ...current,
-              departments: lista.map((item) => ({
-                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 {
-            ...current,
-            categories: lista.map((item) => ({
-              value: item.category_id,
-              label: (item.subcategory ?? "").replace("|", " > "),
-            })),
-          };
-        });
-      } catch (error) {
-        console.error("linkVariants/filters: ", error);
-      } finally {
-        setLoadingFilters(false);
-      }
-    },
-    [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.
-  useEffect(() => {
-    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.
-  */
-  const removeExtraRetailer = (clave) => {
-    setExtraRetailers((current) =>
-      current.filter((item) => item.clave !== clave)
-    );
-    setChosen((current) => ({
-      ...current,
-      categoryRetailers: current.categoryRetailers.filter(
-        (item) => item !== clave
-      ),
-    }));
-  };
-
-  const addRetailer = () => {
-    const retailerId = Number(newRetailer);
-    const categoryId = Number(newCategory);
-    if (!retailerId || !categoryId) return;
-
-    const clave = `${retailerId}-${categoryId}`;
-    const yaEsta =
-      offered.categoryRetailers.some(
-        (item) => `${item.retailerId}-${item.categoryId}` === clave
-      ) || extraRetailers.some((item) => item.clave === clave);
-
-    if (yaEsta) return;
-
-    const retailer = filters.retailers.find(
-      (item) => Number(item.value) === retailerId
-    );
-    const category = filters.categories.find(
-      (item) => Number(item.value) === categoryId
-    );
-
-    setExtraRetailers((current) => [
-      ...current,
-      {
-        clave,
-        retailerId,
-        categoryId,
-        retailerName: retailer?.label ?? `Cadena ${retailerId}`,
-        categoryName: category?.label ?? `Categoría ${categoryId}`,
-      },
-    ]);
-    setChosen((current) => ({
-      ...current,
-      categoryRetailers: [...current.categoryRetailers, clave],
-    }));
-    setNewRetailer("");
-    setNewDepartment("");
-    setNewCategory("");
-  };
-
   /*
     Convierte una selección de pantalla en el bloque `inherit` de la API.
 
@@ -465,8 +356,9 @@ export const LinkVariantsModal = ({
     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".
@@ -475,14 +367,11 @@ export const LinkVariantsModal = ({
   );
 
   const buildInherit = (seleccion) => {
-    const parejas = [
-      ...offered.categoryRetailers.map((item) => ({
-        clave: `${item.retailerId}-${item.categoryId}`,
-        retailerId: item.retailerId,
-        categoryId: item.categoryId,
-      })),
-      ...(seleccion.extraRetailers ?? []),
-    ];
+    const parejas = offered.categoryRetailers.map((item) => ({
+      clave: `${item.retailerId}-${item.categoryId}`,
+      retailerId: item.retailerId,
+      categoryId: item.categoryId,
+    }));
 
     return {
       attributes:
@@ -514,7 +403,6 @@ export const LinkVariantsModal = ({
       images: [],
       categoryRetailers: [],
     },
-    extraRetailers: [],
   });
 
   /*
@@ -524,13 +412,12 @@ export const LinkVariantsModal = ({
   const switchChild = (id) => {
     setPerChild((current) => ({
       ...current,
-      [activeChild]: { modes, chosen, extraRetailers },
+      [activeChild]: { modes, chosen },
     }));
 
     const guardado = perChild[id] ?? seleccionVacia();
     setModes(guardado.modes);
     setChosen(guardado.chosen);
-    setExtraRetailers(guardado.extraRetailers ?? []);
     setActiveChild(id);
   };
 
@@ -538,7 +425,7 @@ export const LinkVariantsModal = ({
     setLoading(true);
     setError(null);
 
-    const inherit = buildInherit({ modes, chosen, extraRetailers });
+    const inherit = buildInherit({ modes, 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
@@ -547,9 +434,7 @@ export const LinkVariantsModal = ({
       !applyToAll && mode === "children"
         ? selected.reduce((acc, id) => {
             const guardado =
-              id === activeChild
-                ? { modes, chosen, extraRetailers }
-                : perChild[id];
+              id === activeChild ? { modes, chosen } : perChild[id];
             if (guardado) acc[id] = buildInherit(guardado);
             return acc;
           }, {})
@@ -557,7 +442,12 @@ export const LinkVariantsModal = ({
 
     const body =
       mode === "parent"
-        ? { mode, articleId, parentArticleId: selected[0], inherit }
+        ? {
+            mode,
+            articleId,
+            parentArticleId: selected[0],
+            pushChildToParent: pushToParent === true,
+          }
         : {
             mode,
             parentArticleId: articleId,
@@ -569,7 +459,7 @@ export const LinkVariantsModal = ({
     try {
       const data = await request("link", body);
       // 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?.({
         ...data,
@@ -589,9 +479,7 @@ export const LinkVariantsModal = ({
   const decidida = (dimension) => {
     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.
     return dimension === "images"
@@ -610,17 +498,13 @@ export const LinkVariantsModal = ({
   // 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.
   const decididoPara = (id) => {
-    const guardado =
-      id === activeChild ? { modes, chosen, extraRetailers } : perChild[id];
+    const guardado = id === activeChild ? { modes, chosen } : perChild[id];
     if (!guardado) return false;
 
     return DIMENSIONES.every((dimension) => {
       if (guardado.modes[dimension] !== null) return true;
       if (dimension === "categoryRetailers") {
-        return (
-          offered.categoryRetailers.length === 0 &&
-          (guardado.extraRetailers ?? []).length === 0
-        );
+        return offered.categoryRetailers.length === 0;
       }
       return dimension === "images"
         ? imagenesUtiles.length === 0
@@ -630,7 +514,9 @@ export const LinkVariantsModal = ({
 
   const todoDecidido =
     step === "inherit" &&
-    (applyToAll || mode !== "children"
+    (mode === "parent"
+      ? pushToParent !== null
+      : applyToAll
       ? DIMENSIONES.every(decidida)
       : selected.every(decididoPara));
 
@@ -646,7 +532,41 @@ export const LinkVariantsModal = ({
   const selectionLabel =
     mode === "parent"
       ? "Se elige un solo producto padre."
-      : `${selected.length} producto(s) pasarán a ser variantes.`;
+      : `${selected.length} producto(s) pasarán 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.
+  */
+  const nombreDe = (id) =>
+    candidates.find((item) => item.articleId === id)?.name || `Producto ${id}`;
+
+  const 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.
+  const hijosDelPadre =
+    mode === "parent" && selected.length
+      ? candidates.find((item) => item.articleId === selected[0])
+          ?.variantsCount ?? 0
+      : 0;
+
+  const nombreEsteProducto = articleName || `Producto ${articleId}`;
+  const nombrePadre = esteEsPadre
+    ? nombreEsteProducto
+    : selected.length
+    ? nombreDe(selected[0])
+    : "—";
+  const nombreHijo = !esteEsPadre
+    ? nombreEsteProducto
+    : selected.length === 1
+    ? nombreDe(selected[0])
+    : `${selected.length} productos elegidos`;
 
   return (
     <Overlay onClick={onClose}>
@@ -669,6 +589,10 @@ export const LinkVariantsModal = ({
           </button>
         </Header>
 
+        {/* Las dos etiquetas dicen qué se va a relacionar, no qué pasa a ser
+            este producto. "Este producto es hijo de otro" obligaba al usuario a
+            deducir el modelo de la familia para entender el botón; qué es un
+            nivel y qué no es asunto nuestro, no suyo. */}
         {step === "search" && (
           <ModeSwitch>
             <button
@@ -676,14 +600,14 @@ export const LinkVariantsModal = ({
               className={mode === "parent" ? "active" : ""}
               onClick={() => setMode("parent")}
             >
-              Este producto es variante de otro
+              Relacionar padre a este producto
             </button>
             <button
               type="button"
               className={mode === "children" ? "active" : ""}
               onClick={() => setMode("children")}
             >
-              Agregar variantes a este producto
+              Relacionar hijos a este producto
             </button>
           </ModeSwitch>
         )}
@@ -743,7 +667,7 @@ export const LinkVariantsModal = ({
                         </span>
                         {candidate.variantsCount > 0 && (
                           <span className="count">
-                            {candidate.variantsCount} variante
+                            {candidate.variantsCount} hijo
                             {candidate.variantsCount === 1 ? "" : "s"}
                           </span>
                         )}
@@ -774,8 +698,119 @@ export const LinkVariantsModal = ({
             </>
           )}
 
-          {step === "inherit" && (
+          {step === "inherit" && mode === "parent" && (
+            <>
+              <Direction>
+                <div className="lado">
+                  <span className="rol">Producto hijo</span>
+                  <strong title={nombreEsteProducto}>
+                    {nombreEsteProducto}
+                  </strong>
+                  <span className="actual">el que tienes abierto</span>
+                </div>
+                <span className="flecha" aria-hidden="true">
+                  →
+                </span>
+                <div className="lado">
+                  <span className="rol">Producto padre</span>
+                  <strong title={nombrePadre}>{nombrePadre}</strong>
+                </div>
+              </Direction>
+
+              <Message>
+                Aquí <strong>no baja nada del padre</strong>: «
+                {nombreEsteProducto}» conserva todo lo que ya tiene capturado. Lo
+                único que se decide es si esos valores{" "}
+                <strong>suben al padre</strong>.
+              </Message>
+
+              {/* Informativo, no bloqueante: si el padre ya encabeza una
+                  familia, planchar cambia de dónde heredarán sus hijos de aquí
+                  en adelante. Los valores que ya tienen NO cambian —nadie
+                  propaga solo— pero el usuario merece saberlo antes. */}
+              {hijosDelPadre > 0 && (
+                <Message className="aviso">
+                  «{nombrePadre}» ya tiene <strong>{hijosDelPadre}</strong>{" "}
+                  {hijosDelPadre === 1 ? "hijo" : "hijos"}. Si planchas, cambias
+                  los valores desde los que ellos heredan. Lo que ya tengan
+                  capturado no se toca.
+                </Message>
+              )}
+
+              <Block>
+                <h3>
+                  <span className="paso">1</span> ¿Qué hacemos con los atributos?
+                </h3>
+                <Choices>
+                  <label>
+                    <input
+                      type="radio"
+                      name="push-to-parent"
+                      checked={pushToParent === true}
+                      onChange={() => setPushToParent(true)}
+                    />
+                    <span>
+                      Planchar los de este producto sobre el padre
+                      <span className="hint">
+                        El padre se queda con estos valores y pasan a contar como
+                        heredados. El UPC y el SKU nunca suben.
+                      </span>
+                    </span>
+                  </label>
+                  <label>
+                    <input
+                      type="radio"
+                      name="push-to-parent"
+                      checked={pushToParent === false}
+                      onChange={() => setPushToParent(false)}
+                    />
+                    <span>
+                      Solo vincular, sin mover nada
+                      <span className="hint">
+                        Se crea el parentesco y ya. Ni el padre ni este producto
+                        cambian de valor.
+                      </span>
+                    </span>
+                  </label>
+                </Choices>
+              </Block>
+            </>
+          )}
+
+          {step === "inherit" && mode === "children" && (
             <>
+              <Direction>
+                <div className="lado">
+                  <span className="rol">Producto padre</span>
+                  <strong title={nombrePadre}>{nombrePadre}</strong>
+                  {esteEsPadre && (
+                    <span className="actual">el que tienes abierto</span>
+                  )}
+                </div>
+                <span className="flecha" aria-hidden="true">
+                  →
+                </span>
+                <div className="lado">
+                  <span className="rol">
+                    {esteEsPadre && selected.length > 1
+                      ? `${selected.length} productos hijo`
+                      : "Producto hijo"}
+                  </span>
+                  <strong title={nombreHijo}>{nombreHijo}</strong>
+                  {!esteEsPadre && (
+                    <span className="actual">el que tienes abierto</span>
+                  )}
+                </div>
+              </Direction>
+
+              <Message>
+                Todo lo que marques abajo <strong>baja del padre al hijo</strong>
+                . Nada sube en el otro sentido:{" "}
+                {esteEsPadre
+                  ? "este producto no cambia."
+                  : `«${nombrePadre}» no cambia.`}
+              </Message>
+
               {mode === "children" && selected.length > 1 && (
                 <>
                   <label className="apply-all">
@@ -823,8 +858,8 @@ export const LinkVariantsModal = ({
                 </>
               )}
 
-              {/* El orden no es casual: primero se decide en qué cadenas vive la
-                  variante, porque de eso depende qué atributos le aplican. Las
+              {/* El orden no es casual: primero se decide en qué cadenas vive el
+                  hijo, porque de eso depende qué atributos le aplican. Las
                   imágenes van al final: son la decisión más visual y la que menos
                   arrastra a las demás. */}
 
@@ -867,111 +902,47 @@ export const LinkVariantsModal = ({
                     <span>
                       Elegir cuáles
                       <span className="hint">
-                        También puedes agregar una cadena que el padre no tenga.
+                        Solo se puede heredar de las que ya tiene el padre.
                       </span>
                     </span>
                   </label>
                 </Choices>
 
                 <List>
-                  {[
-                    ...offered.categoryRetailers.map((item) => ({
+                  {offered.categoryRetailers
+                    .map((item) => ({
                       ...item,
                       clave: `${item.retailerId}-${item.categoryId}`,
-                      delPadre: true,
-                    })),
-                    ...extraRetailers.map((item) => ({
-                      ...item,
-                      delPadre: false,
-                    })),
-                  ].map((item) => (
-                    <li key={item.clave}>
-                      <label>
-                        <input
-                          type="checkbox"
-                          disabled={modes.categoryRetailers === "all"}
-                          checked={chosen.categoryRetailers.includes(
-                            item.clave
-                          )}
-                          onChange={() =>
-                            toggleChoice("categoryRetailers", item.clave)
-                          }
-                        />
-                        <img
-                          className="logo"
-                          src={getRetailerPicture(item.retailerId, 24, 24)}
-                          alt=""
-                        />
-                        <span>
-                          {item.retailerName}
-                          <span className="meta">
-                            {item.categoryName || "Sin categoría"}
-                            {!item.delPadre && " · no la tiene el padre"}
+                    }))
+                    .map((item) => (
+                      <li key={item.clave}>
+                        <label>
+                          <input
+                            type="checkbox"
+                            disabled={modes.categoryRetailers === "all"}
+                            checked={chosen.categoryRetailers.includes(
+                              item.clave
+                            )}
+                            onChange={() =>
+                              toggleChoice("categoryRetailers", item.clave)
+                            }
+                          />
+                          <img
+                            className="logo"
+                            src={getRetailerPicture(item.retailerId, 24, 24)}
+                            alt=""
+                          />
+                          <span>
+                            {item.retailerName}
+                            <span className="meta">
+                              {item.categoryName || "Sin categoría"}
+                            </span>
                           </span>
-                        </span>
-                      </label>
-
-                      {/* Solo las agregadas a mano se pueden quitar. Las del
-                          padre se desmarcan con su casilla, pero siguen ahí. */}
-                      {!item.delPadre && (
-                        <button
-                          type="button"
-                          className="quitar"
-                          title="Quitar esta cadena"
-                          aria-label={`Quitar ${item.retailerName}`}
-                          onClick={() => removeExtraRetailer(item.clave)}
-                        >
-                          ×
-                        </button>
-                      )}
-                    </li>
-                  ))}
+                        </label>
+                      </li>
+                    ))}
                 </List>
 
-                <AddRetailer>
-                  <SingleSelect
-                    id="link-variants-retailer"
-                    placeholder="Agregar otra cadena…"
-                    options={filters.retailers}
-                    value={newRetailer}
-                    loading={loadingFilters && !filters.retailers.length}
-                    onChange={(valor) => {
-                      setNewRetailer(valor ?? "");
-                      setNewDepartment("");
-                      setNewCategory("");
-                      if (valor) loadFilters(valor, null);
-                    }}
-                  />
-                  <SingleSelect
-                    id="link-variants-department"
-                    placeholder="Departamento…"
-                    options={filters.departments}
-                    value={newDepartment}
-                    disabled={!newRetailer}
-                    loading={loadingFilters && !!newRetailer}
-                    onChange={(valor) => {
-                      setNewDepartment(valor ?? "");
-                      setNewCategory("");
-                      if (valor) loadFilters(newRetailer, valor);
-                    }}
-                  />
-                  <SingleSelect
-                    id="link-variants-category"
-                    placeholder="Categoría…"
-                    options={filters.categories}
-                    value={newCategory}
-                    disabled={!newDepartment}
-                    loading={loadingFilters && !!newDepartment}
-                    onChange={(valor) => setNewCategory(valor ?? "")}
-                  />
-                  <button
-                    type="button"
-                    onClick={addRetailer}
-                    disabled={!newRetailer || !newCategory || loadingFilters}
-                  >
-                    Agregar
-                  </button>
-                </AddRetailer>
               </Block>
 
               <Block>
@@ -1014,8 +985,8 @@ export const LinkVariantsModal = ({
                         <span>
                           Elegir cuáles
                           <span className="hint">
-                            Lo que no elijas conserva el valor que ya tiene la
-                            variante.
+                            Lo que no elijas conserva el valor que ya tiene el
+                            hijo.
                           </span>
                         </span>
                       </label>
@@ -1095,8 +1066,8 @@ export const LinkVariantsModal = ({
                         <span>
                           Elegir cuáles
                           <span className="hint">
-                            Lo que no elijas conserva el valor que ya tiene la
-                            variante.
+                            Lo que no elijas conserva el valor que ya tiene el
+                            hijo.
                           </span>
                         </span>
                       </label>
@@ -1189,7 +1160,7 @@ export const LinkVariantsModal = ({
                       <span>
                         Elegir cuáles
                         <span className="hint">
-                          Útil cuando la variante cambia de color o de empaque.
+                          Útil cuando el hijo cambia de color o de empaque.
                         </span>
                       </span>
                     </label>
@@ -1231,10 +1202,10 @@ export const LinkVariantsModal = ({
               )}
 
               {/* Es la diferencia entre link y propagate, y es la que sorprende:
-                  aquí lo elegido se escribe encima aunque la variante lo hubiera
+                  aquí lo elegido se escribe encima aunque el hijo lo hubiera
                   editado a mano. Decirlo antes evita el reclamo después. */}
               <Message>
-                Lo que elijas heredar reemplaza el valor actual de la variante,
+                Lo que elijas heredar reemplaza el valor actual del hijo,
                 incluso si alguien lo había capturado a mano.
               </Message>
             </>
@@ -1254,6 +1225,8 @@ export const LinkVariantsModal = ({
               ? `Faltan ${
                   selected.filter((id) => !decididoPara(id)).length
                 } producto(s) por revisar.`
+              : mode === "parent"
+              ? "Elige si los atributos suben al padre o no."
               : `Falta decidir: ${faltantes.join(", ")}.`}
           </span>
           <div className="actions">