contentoh-components-library 21.6.23 → 21.6.25

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

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import axios from "axios";
 
 import { readPayload, ApiError } from "./api";
+import { getProductImage, getRetailerPicture } from "../../../_utils/helper";
 
 import {
   Overlay,
@@ -13,7 +14,10 @@ import {
   List,
   AttributeList,
   Section,
-  SectionHead,
+  Block,
+  Choices,
+  Tabs,
+  Paging,
   ImageGrid,
   AddRetailer,
   Message,
@@ -69,10 +73,9 @@ export const LinkVariantsModal = ({
   articleName,
   articleUpc,
   activeRetailerId,
-  retailersAvailable,
-  categoriesAvailable,
   token,
   endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
+  filtersEndpoint = process.env.REACT_APP_CREATE_PRODUCTS_FILTERS,
   onClose,
   onLinked,
 }) => {
@@ -84,6 +87,9 @@ export const LinkVariantsModal = ({
   const [rejected, setRejected] = useState(null);
   const [searched, setSearched] = useState(false);
   const [selected, setSelected] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
 
   // 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
@@ -101,14 +107,62 @@ export const LinkVariantsModal = ({
     categoryRetailers: [],
   });
   const [nameScope, setNameScope] = useState(null);
-  const [inheritMode, setInheritMode] = useState("all-filled");
-  const [openSection, setOpenSection] = useState("attributes");
+
+  // 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.
+  const [modes, setModes] = useState({
+    categoryRetailers: null,
+    descriptions: null,
+    attributes: null,
+    images: null,
+  });
+
+  /*
+    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.
+  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.
+
+    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.
+  */
+  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);
 
@@ -137,6 +191,8 @@ export const LinkVariantsModal = ({
     setSelected([]);
     setRejected(null);
     setSearched(false);
+    setTotal(0);
+    setHasMore(false);
     setError(null);
     setStep("search");
   }, [mode]);
@@ -153,6 +209,8 @@ export const LinkVariantsModal = ({
       });
       setCandidates(data.candidates || []);
       setRejected(data.rejected || null);
+      setTotal(data.total ?? (data.candidates || []).length);
+      setHasMore(!!data.hasMore);
       setSearched(true);
     } catch (err) {
       setError(readError(err));
@@ -161,6 +219,34 @@ export const LinkVariantsModal = ({
     }
   };
 
+  /*
+    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.
+  */
+  const loadMore = async () => {
+    setLoadingMore(true);
+    setError(null);
+    try {
+      const data = await request("search", {
+        mode,
+        articleId,
+        query: query.trim(),
+        offset: candidates.length,
+      });
+      setCandidates((current) => [...current, ...(data.candidates || [])]);
+      setTotal(data.total ?? total);
+      setHasMore(!!data.hasMore);
+    } catch (err) {
+      setError(readError(err));
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
   const toggle = (id) => {
     setSelected((current) => {
       if (mode === "parent") return current[0] === id ? [] : [id];
@@ -191,17 +277,23 @@ export const LinkVariantsModal = ({
 
       setOffered(listas);
       setNameScope(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.
       setChosen({
-        attributes: listas.attributes.map((item) => item.id),
-        descriptions: listas.descriptions.map((item) => item.id),
-        images: listas.images.map((item) => item.id),
-        categoryRetailers: listas.categoryRetailers.map(
-          (item) => `${item.retailerId}-${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");
     } catch (err) {
       setError(readError(err));
@@ -222,13 +314,77 @@ export const LinkVariantsModal = ({
     });
   };
 
-  const toggleAll = (dimension, ids) => {
+  const chooseMode = (dimension, modo, ids) => {
+    setModes((current) => ({ ...current, [dimension]: modo }));
     setChosen((current) => ({
       ...current,
-      [dimension]: current[dimension].length === ids.length ? [] : ids,
+      // "Todos" marca la lista completa para que se vea qué va a bajar; al pasar
+      // a "elegir" se parte de cero, que es lo que la palabra promete.
+      [dimension]: modo === "all" ? ids : [],
     }));
   };
 
+  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: [],
+            };
+          }
+          return {
+            ...current,
+            categories: lista.map((item) => ({
+              value: item.id,
+              label: item.name,
+            })),
+          };
+        });
+      } 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]);
+
   const addRetailer = () => {
     const retailerId = Number(newRetailer);
     const categoryId = Number(newCategory);
@@ -242,11 +398,11 @@ export const LinkVariantsModal = ({
 
     if (yaEsta) return;
 
-    const retailer = (retailersAvailable || []).find(
-      (item) => Number(item.id ?? item.value) === retailerId
+    const retailer = filters.retailers.find(
+      (item) => Number(item.value) === retailerId
     );
-    const category = (categoriesAvailable || []).find(
-      (item) => Number(item.id ?? item.value) === categoryId
+    const category = filters.categories.find(
+      (item) => Number(item.value) === categoryId
     );
 
     setExtraRetailers((current) => [
@@ -255,8 +411,8 @@ export const LinkVariantsModal = ({
         clave,
         retailerId,
         categoryId,
-        retailerName: retailer?.name ?? retailer?.label ?? `Cadena ${retailerId}`,
-        categoryName: category?.name ?? category?.label ?? `Categoría ${categoryId}`,
+        retailerName: retailer?.label ?? `Cadena ${retailerId}`,
+        categoryName: category?.label ?? `Categoría ${categoryId}`,
       },
     ]);
     setChosen((current) => ({
@@ -264,38 +420,117 @@ export const LinkVariantsModal = ({
       categoryRetailers: [...current.categoryRetailers, clave],
     }));
     setNewRetailer("");
+    setNewDepartment("");
     setNewCategory("");
   };
 
-  const submit = async () => {
-    setLoading(true);
-    setError(null);
+  /*
+    Convierte una selección de pantalla en el bloque `inherit` de la API.
 
-    // 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.
-    const todasLasParejas = [
+    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".
+  const imagenesUtiles = offered.images.filter(
+    (image) => !brokenImages.includes(image.id)
+  );
+
+  const buildInherit = (seleccion) => {
+    const parejas = [
       ...offered.categoryRetailers.map((item) => ({
         clave: `${item.retailerId}-${item.categoryId}`,
         retailerId: item.retailerId,
         categoryId: item.categoryId,
       })),
-      ...extraRetailers,
+      ...(seleccion.extraRetailers ?? []),
     ];
 
-    const inherit = {
+    return {
       attributes:
-        inheritMode === "all-filled" ? "all-filled" : chosen.attributes,
-      descriptions: chosen.descriptions,
-      images: chosen.images,
-      categoryRetailers: todasLasParejas
-        .filter((par) => chosen.categoryRetailers.includes(par.clave))
+        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((par) => seleccion.chosen.categoryRetailers.includes(par.clave))
         .map(({ retailerId, categoryId }) => ({ retailerId, categoryId })),
     };
+  };
+
+  const seleccionVacia = () => ({
+    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.
+  */
+  const switchChild = (id) => {
+    setPerChild((current) => ({
+      ...current,
+      [activeChild]: { modes, chosen, extraRetailers },
+    }));
+
+    const guardado = perChild[id] ?? seleccionVacia();
+    setModes(guardado.modes);
+    setChosen(guardado.chosen);
+    setExtraRetailers(guardado.extraRetailers ?? []);
+    setActiveChild(id);
+  };
+
+  const submit = async () => {
+    setLoading(true);
+    setError(null);
+
+    const inherit = buildInherit({ modes, chosen, 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.
+    const inheritByChild =
+      !applyToAll && mode === "children"
+        ? selected.reduce((acc, id) => {
+            const guardado =
+              id === activeChild
+                ? { modes, chosen, extraRetailers }
+                : perChild[id];
+            if (guardado) acc[id] = buildInherit(guardado);
+            return acc;
+          }, {})
+        : undefined;
 
     const body =
       mode === "parent"
         ? { mode, articleId, parentArticleId: selected[0], inherit }
-        : { mode, parentArticleId: articleId, childrenArticleIds: selected, inherit };
+        : {
+            mode,
+            parentArticleId: articleId,
+            childrenArticleIds: selected,
+            inherit,
+            ...(inheritByChild ? { inheritByChild } : {}),
+          };
 
     try {
       const data = await request("link", body);
@@ -315,6 +550,63 @@ export const LinkVariantsModal = ({
     }
   };
 
+  // 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—.
+  const 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;
+  };
+
+  const 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.
+  const decididoPara = (id) => {
+    const guardado =
+      id === activeChild ? { modes, chosen, extraRetailers } : 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 dimension === "images"
+        ? imagenesUtiles.length === 0
+        : offered[dimension].length === 0;
+    });
+  };
+
+  const todoDecidido =
+    step === "inherit" &&
+    (applyToAll || mode !== "children"
+      ? DIMENSIONES.every(decidida)
+      : selected.every(decididoPara));
+
+  const faltantes = [
+    ["categoryRetailers", "cadenas"],
+    ["descriptions", "descripciones"],
+    ["attributes", "atributos"],
+    ["images", "imágenes"],
+  ]
+    .filter(([clave]) => !decidida(clave))
+    .map(([, nombre]) => nombre);
+
   const selectionLabel =
     mode === "parent"
       ? "Se elige un solo producto padre."
@@ -331,7 +623,12 @@ export const LinkVariantsModal = ({
               {articleUpc ? ` · UPC ${articleUpc}` : ""}
             </p>
           </div>
-          <button type="button" className="close" onClick={onClose} aria-label="Cerrar">
+          <button
+            type="button"
+            className="close"
+            onClick={onClose}
+            aria-label="Cerrar"
+          >
             ×
           </button>
         </Header>
@@ -403,7 +700,9 @@ export const LinkVariantsModal = ({
                           {candidate.name || `Producto ${candidate.articleId}`}
                           <span className="meta">
                             UPC {candidate.upc || "—"}
-                            {candidate.categoryName ? ` · ${candidate.categoryName}` : ""}
+                            {candidate.categoryName
+                              ? ` · ${candidate.categoryName}`
+                              : ""}
                           </span>
                         </span>
                         {candidate.variantsCount > 0 && (
@@ -417,129 +716,293 @@ export const LinkVariantsModal = ({
                   ))}
                 </List>
               )}
+
+              {/* Cuántos hay de verdad. Sin esto la lista se corta en 20 y no hay
+                  forma de saber si eso es todo o solo el principio. */}
+              {searched && candidates.length > 0 && (
+                <Paging>
+                  <span>
+                    Mostrando {candidates.length} de {total}
+                  </span>
+                  {hasMore && (
+                    <button
+                      type="button"
+                      onClick={loadMore}
+                      disabled={loadingMore}
+                    >
+                      {loadingMore ? "Cargando…" : "Cargar más"}
+                    </button>
+                  )}
+                </Paging>
+              )}
             </>
           )}
 
           {step === "inherit" && (
             <>
-              <Section>
-                <h3>Atributos de la ficha técnica</h3>
-                <label className="choice">
-                  <input
-                    type="radio"
-                    checked={inheritMode === "all-filled"}
-                    onChange={() => setInheritMode("all-filled")}
-                  />
-                  <span>
-                    Todos los que tienen valor
-                    <span className="hint">
-                      {offered.attributes.length} atributo(s) con información en
-                      el padre.
-                    </span>
-                  </span>
-                </label>
-                <label className="choice">
-                  <input
-                    type="radio"
-                    checked={inheritMode === "selected"}
-                    onChange={() => setInheritMode("selected")}
-                  />
-                  <span>
-                    Elegir cuáles
-                    <span className="hint">
-                      Lo que no elijas conserva el valor que ya tiene la variante.
+              {mode === "children" && selected.length > 1 && (
+                <>
+                  <label className="apply-all">
+                    <input
+                      type="checkbox"
+                      checked={applyToAll}
+                      onChange={(event) => {
+                        setApplyToAll(event.target.checked);
+                        if (event.target.checked) setPerChild({});
+                      }}
+                    />
+                    <span>
+                      Aplicar lo mismo a los {selected.length} productos
+                      <span className="hint">
+                        Desmárcalo si alguno debe heredar algo distinto.
+                      </span>
                     </span>
-                  </span>
-                </label>
-              </Section>
+                  </label>
 
-              {inheritMode === "selected" && activeRetailerId && !nameScope && (
-                <Message>
-                  El producto padre no comparte la cadena que tienes abierta, así
-                  que los nombres de abajo son los de otra de sus cadenas.
-                </Message>
+                  {!applyToAll && (
+                    <Tabs>
+                      {selected.map((id, indice) => {
+                        const producto = candidates.find(
+                          (item) => item.articleId === id
+                        );
+                        return (
+                          <button
+                            key={id}
+                            type="button"
+                            className={id === activeChild ? "active" : ""}
+                            onClick={() => switchChild(id)}
+                          >
+                            <span className="orden">{indice + 1}</span>
+                            {producto?.name || `Producto ${id}`}
+                            {decididoPara(id) && (
+                              <span className="listo" aria-label="listo">
+                                ✓
+                              </span>
+                            )}
+                          </button>
+                        );
+                      })}
+                    </Tabs>
+                  )}
+                </>
               )}
 
-              {inheritMode === "selected" && (
-                <AttributeList>
-                  {offered.attributes.map((attribute) => (
-                    <li key={attribute.id}>
+              {/* El orden no es casual: primero se decide en qué cadenas vive la
+                  variante, 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. */}
+
+              <Block>
+                <h3>
+                  <span className="paso">1</span> Cadenas y categorías
+                </h3>
+                <Choices>
+                  <label>
+                    <input
+                      type="radio"
+                      name={`categoryRetailers-${activeChild ?? "todos"}`}
+                      checked={modes.categoryRetailers === "all"}
+                      onChange={() =>
+                        chooseMode(
+                          "categoryRetailers",
+                          "all",
+                          offered.categoryRetailers.map(
+                            (item) => `${item.retailerId}-${item.categoryId}`
+                          )
+                        )
+                      }
+                    />
+                    <span>
+                      Todas las del producto padre
+                      <span className="hint">
+                        {offered.categoryRetailers.length} cadena(s).
+                      </span>
+                    </span>
+                  </label>
+                  <label>
+                    <input
+                      type="radio"
+                      name={`categoryRetailers-${activeChild ?? "todos"}`}
+                      checked={modes.categoryRetailers === "some"}
+                      onChange={() =>
+                        chooseMode("categoryRetailers", "some", [])
+                      }
+                    />
+                    <span>
+                      Elegir cuáles
+                      <span className="hint">
+                        También puedes agregar una cadena que el padre no tenga.
+                      </span>
+                    </span>
+                  </label>
+                </Choices>
+
+                <List>
+                  {[
+                    ...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"
-                          checked={chosen.attributes.includes(attribute.id)}
-                          onChange={() => toggleChoice("attributes", attribute.id)}
+                          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>
-                          {attribute.name}
-                          {attribute.unconfigured && (
-                            <span className="note">
-                              sin configuración en las cadenas del padre
-                            </span>
-                          )}
-                          {attribute.ambiguousName && (
-                            <span className="note">
-                              se llama distinto en otra cadena
-                            </span>
-                          )}
-                        </span>
-                        <span className="value" title={attribute.value}>
-                          {attribute.value}
+                          {item.retailerName}
+                          <span className="meta">
+                            {item.categoryName || "Sin categoría"}
+                            {!item.delPadre && " · no la tiene el padre"}
+                          </span>
                         </span>
                       </label>
                     </li>
                   ))}
-                </AttributeList>
-              )}
+                </List>
 
-              <Section>
-                <SectionHead>
+                <AddRetailer>
+                  <select
+                    value={newRetailer}
+                    onChange={(event) => {
+                      const valor = event.target.value;
+                      setNewRetailer(valor);
+                      setNewDepartment("");
+                      setNewCategory("");
+                      if (valor) loadFilters(valor, null);
+                    }}
+                  >
+                    <option value="">Agregar otra cadena…</option>
+                    {filters.retailers.map((item) => (
+                      <option key={item.value} value={item.value}>
+                        {item.label}
+                      </option>
+                    ))}
+                  </select>
+                  <select
+                    value={newDepartment}
+                    disabled={!newRetailer || !filters.departments.length}
+                    onChange={(event) => {
+                      const valor = event.target.value;
+                      setNewDepartment(valor);
+                      setNewCategory("");
+                      if (valor) loadFilters(newRetailer, valor);
+                    }}
+                  >
+                    <option value="">Departamento…</option>
+                    {filters.departments.map((item) => (
+                      <option key={item.value} value={item.value}>
+                        {item.label}
+                      </option>
+                    ))}
+                  </select>
+                  <select
+                    value={newCategory}
+                    disabled={!newDepartment || !filters.categories.length}
+                    onChange={(event) => setNewCategory(event.target.value)}
+                  >
+                    <option value="">Categoría…</option>
+                    {filters.categories.map((item) => (
+                      <option key={item.value} value={item.value}>
+                        {item.label}
+                      </option>
+                    ))}
+                  </select>
                   <button
                     type="button"
-                    className="toggle"
-                    aria-expanded={openSection === "descriptions"}
-                    onClick={() =>
-                      setOpenSection(
-                        openSection === "descriptions" ? null : "descriptions"
-                      )
-                    }
+                    onClick={addRetailer}
+                    disabled={!newRetailer || !newCategory || loadingFilters}
                   >
-                    Descripciones
-                    <span className="count">
-                      {chosen.descriptions.length} de{" "}
-                      {offered.descriptions.length}
-                    </span>
+                    {loadingFilters ? "…" : "Agregar"}
                   </button>
-                  {offered.descriptions.length > 0 && (
-                    <button
-                      type="button"
-                      className="all"
-                      onClick={() =>
-                        toggleAll(
-                          "descriptions",
-                          offered.descriptions.map((item) => item.id)
-                        )
-                      }
-                    >
-                      {chosen.descriptions.length === offered.descriptions.length
-                        ? "Ninguna"
-                        : "Todas"}
-                    </button>
-                  )}
-                </SectionHead>
+                </AddRetailer>
+              </Block>
+
+              <Block>
+                <h3>
+                  <span className="paso">2</span> Descripciones
+                </h3>
+                {offered.descriptions.length ? (
+                  <>
+                    <Choices>
+                      <label>
+                        <input
+                          type="radio"
+                          name={`descriptions-${activeChild ?? "todos"}`}
+                          checked={modes.descriptions === "all"}
+                          onChange={() =>
+                            chooseMode(
+                              "descriptions",
+                              "all",
+                              offered.descriptions.map((item) => item.id)
+                            )
+                          }
+                        />
+                        <span>
+                          Todas las que tienen valor
+                          <span className="hint">
+                            {offered.descriptions.length} descripción(es) con
+                            información en el padre.
+                          </span>
+                        </span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name={`descriptions-${activeChild ?? "todos"}`}
+                          checked={modes.descriptions === "some"}
+                          onChange={() =>
+                            chooseMode("descriptions", "some", [])
+                          }
+                        />
+                        <span>
+                          Elegir cuáles
+                          <span className="hint">
+                            Lo que no elijas conserva el valor que ya tiene la
+                            variante.
+                          </span>
+                        </span>
+                      </label>
+                    </Choices>
 
-                {openSection === "descriptions" &&
-                  (offered.descriptions.length ? (
                     <AttributeList>
                       {offered.descriptions.map((item) => (
                         <li key={item.id}>
                           <label>
                             <input
                               type="checkbox"
+                              disabled={modes.descriptions === "all"}
                               checked={chosen.descriptions.includes(item.id)}
-                              onChange={() => toggleChoice("descriptions", item.id)}
+                              onChange={() =>
+                                toggleChoice("descriptions", item.id)
+                              }
                             />
-                            <span>{item.name}</span>
+                            <span>
+                              {item.name}
+                              {item.duplicated && (
+                                <span className="note">
+                                  el padre tiene {item.rows} versiones de este
+                                  texto; se copian todas
+                                </span>
+                              )}
+                            </span>
                             <span className="value" title={item.value}>
                               {item.value}
                             </span>
@@ -547,167 +1010,190 @@ export const LinkVariantsModal = ({
                         </li>
                       ))}
                     </AttributeList>
-                  ) : (
-                    <Message>El producto padre no tiene descripciones.</Message>
-                  ))}
-              </Section>
-
-              <Section>
-                <SectionHead>
-                  <button
-                    type="button"
-                    className="toggle"
-                    aria-expanded={openSection === "images"}
-                    onClick={() =>
-                      setOpenSection(openSection === "images" ? null : "images")
-                    }
-                  >
-                    Imágenes
-                    <span className="count">
-                      {chosen.images.length} de {offered.images.length}
-                    </span>
-                  </button>
-                  {offered.images.length > 0 && (
-                    <button
-                      type="button"
-                      className="all"
-                      onClick={() =>
-                        toggleAll(
-                          "images",
-                          offered.images.map((item) => item.id)
-                        )
-                      }
-                    >
-                      {chosen.images.length === offered.images.length
-                        ? "Ninguna"
-                        : "Todas"}
-                    </button>
-                  )}
-                </SectionHead>
+                  </>
+                ) : (
+                  <Message>
+                    El producto padre no tiene descripciones que heredar.
+                  </Message>
+                )}
+              </Block>
 
-                {openSection === "images" &&
-                  (offered.images.length ? (
-                    <ImageGrid>
-                      {offered.images.map((image) => (
-                        <label
-                          key={image.id}
-                          className={
-                            chosen.images.includes(image.id) ? "picked" : ""
+              <Block>
+                <h3>
+                  <span className="paso">3</span> Atributos de la ficha técnica
+                </h3>
+                {offered.attributes.length ? (
+                  <>
+                    <Choices>
+                      <label>
+                        <input
+                          type="radio"
+                          name={`attributes-${activeChild ?? "todos"}`}
+                          checked={modes.attributes === "all"}
+                          onChange={() =>
+                            chooseMode(
+                              "attributes",
+                              "all",
+                              offered.attributes.map((item) => item.id)
+                            )
                           }
-                        >
-                          <input
-                            type="checkbox"
-                            checked={chosen.images.includes(image.id)}
-                            onChange={() => toggleChoice("images", image.id)}
-                          />
-                          <img src={image.src} alt={image.imageType || ""} />
-                          <span>{image.imageType || "Sin tipo"}</span>
-                        </label>
-                      ))}
-                    </ImageGrid>
-                  ) : (
-                    <Message>El producto padre no tiene imágenes.</Message>
-                  ))}
-              </Section>
+                        />
+                        <span>
+                          Todos los que tienen valor
+                          <span className="hint">
+                            {offered.attributes.length} atributo(s) con
+                            información en el padre.
+                          </span>
+                        </span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name={`attributes-${activeChild ?? "todos"}`}
+                          checked={modes.attributes === "some"}
+                          onChange={() => chooseMode("attributes", "some", [])}
+                        />
+                        <span>
+                          Elegir cuáles
+                          <span className="hint">
+                            Lo que no elijas conserva el valor que ya tiene la
+                            variante.
+                          </span>
+                        </span>
+                      </label>
+                    </Choices>
 
-              <Section>
-                <SectionHead>
-                  <button
-                    type="button"
-                    className="toggle"
-                    aria-expanded={openSection === "retailers"}
-                    onClick={() =>
-                      setOpenSection(
-                        openSection === "retailers" ? null : "retailers"
-                      )
-                    }
-                  >
-                    Cadenas y categorías
-                    <span className="count">
-                      {chosen.categoryRetailers.length} seleccionada(s)
-                    </span>
-                  </button>
-                </SectionHead>
+                    {activeRetailerId && !nameScope && (
+                      <Message>
+                        El producto padre no comparte la cadena que tienes
+                        abierta, así que los nombres de abajo son los de otra de
+                        sus cadenas.
+                      </Message>
+                    )}
 
-                {openSection === "retailers" && (
-                  <>
-                    <List>
-                      {[
-                        ...offered.categoryRetailers.map((item) => ({
-                          ...item,
-                          clave: `${item.retailerId}-${item.categoryId}`,
-                          delPadre: true,
-                        })),
-                        ...extraRetailers.map((item) => ({
-                          ...item,
-                          delPadre: false,
-                        })),
-                      ].map((item) => (
-                        <li key={item.clave}>
+                    <AttributeList>
+                      {offered.attributes.map((attribute) => (
+                        <li key={attribute.id}>
                           <label>
                             <input
                               type="checkbox"
-                              checked={chosen.categoryRetailers.includes(
-                                item.clave
-                              )}
+                              disabled={modes.attributes === "all"}
+                              checked={chosen.attributes.includes(attribute.id)}
                               onChange={() =>
-                                toggleChoice("categoryRetailers", item.clave)
+                                toggleChoice("attributes", attribute.id)
                               }
                             />
                             <span>
-                              {item.retailerName}
-                              <span className="meta">
-                                {item.categoryName || "Sin categoría"}
-                                {!item.delPadre && " · no la tiene el padre"}
-                              </span>
+                              {attribute.name}
+                              {attribute.unconfigured && (
+                                <span className="note">
+                                  sin configuración en las cadenas del padre
+                                </span>
+                              )}
+                              {attribute.ambiguousName && (
+                                <span className="note">
+                                  se llama distinto en otra cadena
+                                </span>
+                              )}
+                            </span>
+                            <span className="value" title={attribute.value}>
+                              {attribute.value}
                             </span>
                           </label>
                         </li>
                       ))}
-                    </List>
-
-                    {/* Agregar una cadena que el padre no tiene. No es herencia:
-                        la variante entra a esa cadena por su cuenta. */}
-                    <AddRetailer>
-                      <select
-                        value={newRetailer}
-                        onChange={(event) => setNewRetailer(event.target.value)}
-                      >
-                        <option value="">Agregar otra cadena…</option>
-                        {(retailersAvailable || []).map((item) => (
-                          <option
-                            key={item.id ?? item.value}
-                            value={item.id ?? item.value}
-                          >
-                            {item.name ?? item.label}
-                          </option>
-                        ))}
-                      </select>
-                      <select
-                        value={newCategory}
-                        onChange={(event) => setNewCategory(event.target.value)}
-                      >
-                        <option value="">Categoría…</option>
-                        {(categoriesAvailable || []).map((item) => (
-                          <option
-                            key={item.id ?? item.value}
-                            value={item.id ?? item.value}
-                          >
-                            {item.name ?? item.label}
-                          </option>
-                        ))}
-                      </select>
-                      <button
-                        type="button"
-                        onClick={addRetailer}
-                        disabled={!newRetailer || !newCategory}
-                      >
-                        Agregar
-                      </button>
-                    </AddRetailer>
+                    </AttributeList>
+                  </>
+                ) : (
+                  <Message>
+                    El producto padre no tiene atributos con valor que heredar.
+                  </Message>
+                )}
+              </Block>
+
+              <Block>
+                <h3>
+                  <span className="paso">4</span> Imágenes
+                </h3>
+                {imagenesUtiles.length ? (
+                  <>
+                    <Choices>
+                      <label>
+                        <input
+                          type="radio"
+                          name={`images-${activeChild ?? "todos"}`}
+                          checked={modes.images === "all"}
+                          onChange={() =>
+                            chooseMode(
+                              "images",
+                              "all",
+                              imagenesUtiles.map((item) => item.id)
+                            )
+                          }
+                        />
+                        <span>
+                          Todas
+                          <span className="hint">
+                            {imagenesUtiles.length} imagen(es) en el padre.
+                          </span>
+                        </span>
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          name={`images-${activeChild ?? "todos"}`}
+                          checked={modes.images === "some"}
+                          onChange={() => chooseMode("images", "some", [])}
+                        />
+                        <span>
+                          Elegir cuáles
+                          <span className="hint">
+                            Útil cuando la variante cambia de color o de
+                            empaque.
+                          </span>
+                        </span>
+                      </label>
+                    </Choices>
+
+                    <ImageGrid>
+                      {imagenesUtiles.map((image) => (
+                        <label
+                          key={image.id}
+                          className={[
+                            chosen.images.includes(image.id) ? "picked" : "",
+                            modes.images === "all" ? "locked" : "",
+                          ]
+                            .filter(Boolean)
+                            .join(" ")}
+                        >
+                          <input
+                            type="checkbox"
+                            disabled={modes.images === "all"}
+                            checked={chosen.images.includes(image.id)}
+                            onChange={() => toggleChoice("images", image.id)}
+                          />
+                          <img
+                            src={getProductImage(image.src)}
+                            alt=""
+                            onError={() =>
+                              setBrokenImages((current) =>
+                                current.includes(image.id)
+                                  ? current
+                                  : [...current, image.id]
+                              )
+                            }
+                          />
+                          <span>{image.imageType || "Sin tipo de toma"}</span>
+                        </label>
+                      ))}
+                    </ImageGrid>
                   </>
+                ) : (
+                  <Message>
+                    El producto padre no tiene imágenes que heredar.
+                  </Message>
                 )}
-              </Section>
+              </Block>
 
               {/* Es la diferencia entre link y propagate, y es la que sorprende:
                   aquí lo elegido se escribe encima aunque la variante lo hubiera
@@ -722,7 +1208,15 @@ export const LinkVariantsModal = ({
 
         <Footer>
           <span className="summary">
-            {step === "search" ? selectionLabel : "Revisa la herencia antes de ligar."}
+            {step === "search"
+              ? selectionLabel
+              : todoDecidido
+              ? "Todo revisado. Puedes ligar."
+              : !applyToAll && mode === "children"
+              ? `Faltan ${
+                  selected.filter((id) => !decididoPara(id)).length
+                } producto(s) por revisar.`
+              : `Falta decidir: ${faltantes.join(", ")}.`}
           </span>
           <div className="actions">
             {step === "inherit" && (
@@ -735,7 +1229,12 @@ export const LinkVariantsModal = ({
                 Atrás
               </button>
             )}
-            <button type="button" className="secondary" onClick={onClose} disabled={loading}>
+            <button
+              type="button"
+              className="secondary"
+              onClick={onClose}
+              disabled={loading}
+            >
               Cancelar
             </button>
             {step === "search" ? (
@@ -752,15 +1251,7 @@ export const LinkVariantsModal = ({
                 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}
               >
                 {loading ? "Ligando…" : "Ligar"}
               </button>