contentoh-components-library 21.6.22 → 21.6.24

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

@@ -2,6 +2,10 @@ 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,6 +17,12 @@ import {
   List,
   AttributeList,
   Section,
+  Block,
+  Choices,
+  Tabs,
+  Paging,
+  ImageGrid,
+  AddRetailer,
   Message,
   Footer,
 } from "./styles";
@@ -68,6 +78,7 @@ export const LinkVariantsModal = ({
   activeRetailerId,
   token,
   endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
+  filtersEndpoint = process.env.REACT_APP_CREATE_PRODUCTS_FILTERS,
   onClose,
   onLinked,
 }) => {
@@ -79,14 +90,65 @@ 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);
 
-  const [attributes, setAttributes] = useState([]);
+  // 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.
+  const [offered, setOffered] = useState({
+    attributes: [],
+    descriptions: [],
+    images: [],
+    categoryRetailers: [],
+  });
+  const [chosen, setChosen] = useState({
+    attributes: [],
+    descriptions: [],
+    images: [],
+    categoryRetailers: [],
+  });
   const [nameScope, setNameScope] = useState(null);
-  const [inheritMode, setInheritMode] = useState("all-filled");
-  const [chosenAttributes, setChosenAttributes] = useState([]);
-  const [inheritImages, setInheritImages] = useState(true);
-  const [inheritDescriptions, setInheritDescriptions] = useState(true);
-  const [inheritCategoryRetailers, setInheritCategoryRetailers] = useState(true);
+
+  // 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`.
+  */
+  const [applyToAll, setApplyToAll] = useState(true);
+  const [activeChild, setActiveChild] = useState(null);
+  const [perChild, setPerChild] = useState({});
+
+  // Cadenas que el padre NO tiene y el usuario decidió agregar a la variante.
+  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);
@@ -116,6 +178,8 @@ export const LinkVariantsModal = ({
     setSelected([]);
     setRejected(null);
     setSearched(false);
+    setTotal(0);
+    setHasMore(false);
     setError(null);
     setStep("search");
   }, [mode]);
@@ -132,6 +196,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));
@@ -140,6 +206,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];
@@ -160,9 +254,32 @@ export const LinkVariantsModal = ({
         parentArticleId,
         retailerId: activeRetailerId,
       });
-      setAttributes(data.attributes || []);
+
+      const listas = {
+        attributes: data.attributes || [],
+        descriptions: data.descriptions || [],
+        images: data.images || [],
+        categoryRetailers: data.categoryRetailers || [],
+      };
+
+      setOffered(listas);
       setNameScope(data.nameScope ?? null);
-      setChosenAttributes((data.attributes || []).map((item) => item.id));
+      setChosen({
+        attributes: [],
+        descriptions: [],
+        images: [],
+        categoryRetailers: [],
+      });
+      setModes({
+        categoryRetailers: null,
+        descriptions: null,
+        attributes: null,
+        images: null,
+      });
+      setExtraRetailers([]);
+      setPerChild({});
+      setApplyToAll(true);
+      setActiveChild(mode === "children" ? selected[0] : null);
       setStep("inherit");
     } catch (err) {
       setError(readError(err));
@@ -171,33 +288,229 @@ export const LinkVariantsModal = ({
     }
   };
 
-  const toggleAttribute = (id) => {
-    setChosenAttributes((current) =>
-      current.includes(id)
-        ? current.filter((item) => item !== id)
-        : [...current, id]
+  const toggleChoice = (dimension, id) => {
+    setChosen((current) => {
+      const lista = current[dimension];
+      return {
+        ...current,
+        [dimension]: lista.includes(id)
+          ? lista.filter((item) => item !== id)
+          : [...lista, id],
+      };
+    });
+  };
+
+  const chooseMode = (dimension, modo, ids) => {
+    setModes((current) => ({ ...current, [dimension]: modo }));
+    setChosen((current) => ({
+      ...current,
+      // "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 } }
+        );
+
+        const { body } = readPayload(res);
+        const lista = (body ? JSON.parse(body) : res.data)?.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);
+    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.
+
+    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.
+  */
+  const buildInherit = (seleccion) => {
+    const parejas = [
+      ...offered.categoryRetailers.map((item) => ({
+        clave: `${item.retailerId}-${item.categoryId}`,
+        retailerId: item.retailerId,
+        categoryId: item.categoryId,
+      })),
+      ...(seleccion.extraRetailers ?? []),
+    ];
+
+    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((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 = {
-      attributes: inheritMode === "all-filled" ? "all-filled" : chosenAttributes,
-      images: inheritImages,
-      descriptions: inheritDescriptions,
-      categoryRetailers: inheritCategoryRetailers,
-    };
+    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);
-      onLinked?.(data);
+      // El modo importa para quien escucha: en `children` este producto GANA
+      // variantes; en `parent` pasa a SER una. Son efectos opuestos sobre la
+      // misma ficha, así que quien refresque el estado necesita distinguirlos.
+      onLinked?.({
+        ...data,
+        mode,
+        parentArticleId: mode === "parent" ? selected[0] : articleId,
+      });
       onClose?.();
     } catch (err) {
       setError(readError(err));
@@ -206,6 +519,53 @@ 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) =>
+    modes[dimension] !== null ||
+    (dimension === "categoryRetailers"
+      ? offered.categoryRetailers.length === 0 && extraRetailers.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;
+      return dimension === "categoryRetailers"
+        ? offered.categoryRetailers.length === 0 &&
+            (guardado.extraRetailers ?? []).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."
@@ -308,112 +668,450 @@ 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>¿Qué se hereda del producto padre?</h3>
-                <label className="choice">
-                  <input
-                    type="radio"
-                    checked={inheritMode === "all-filled"}
-                    onChange={() => setInheritMode("all-filled")}
-                  />
-                  <span>
-                    Todos los atributos con valor
-                    <span className="hint">
-                      {attributes.length} atributo(s) con información en el padre.
+              {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>
-                <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.
-                    </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>
-                  {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"
+                      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"
+                      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={chosenAttributes.includes(attribute.id)}
-                          onChange={() => toggleAttribute(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>
+                          {item.retailerName}
+                          <span className="meta">
+                            {item.categoryName || "Sin categoría"}
+                            {!item.delPadre && " · no la tiene el padre"}
+                          </span>
+                        </span>
+                      </label>
+                    </li>
+                  ))}
+                </List>
+
+                <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"
+                    onClick={addRetailer}
+                    disabled={!newRetailer || !newCategory || loadingFilters}
+                  >
+                    {loadingFilters ? "…" : "Agregar"}
+                  </button>
+                </AddRetailer>
+              </Block>
+
+              <Block>
+                <h3>
+                  <span className="paso">2</span> Descripciones
+                </h3>
+                {offered.descriptions.length ? (
+                  <>
+                    <Choices>
+                      <label>
+                        <input
+                          type="radio"
+                          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"
+                          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>
+
+                    <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)}
+                            />
+                            <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>
+                          </label>
+                        </li>
+                      ))}
+                    </AttributeList>
+                  </>
+                ) : (
+                  <Message>
+                    El producto padre no tiene descripciones que heredar.
+                  </Message>
+                )}
+              </Block>
+
+              <Block>
+                <h3>
+                  <span className="paso">3</span> Atributos de la ficha técnica
+                </h3>
+                {offered.attributes.length ? (
+                  <>
+                    <Choices>
+                      <label>
+                        <input
+                          type="radio"
+                          checked={modes.attributes === "all"}
+                          onChange={() =>
+                            chooseMode(
+                              "attributes",
+                              "all",
+                              offered.attributes.map((item) => item.id)
+                            )
+                          }
+                        />
+                        <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"
+                          checked={modes.attributes === "some"}
+                          onChange={() => chooseMode("attributes", "some", [])}
                         />
                         <span>
-                          {attribute.name}
-                          {attribute.unconfigured && (
-                            <span className="note">
-                              sin configuración en las cadenas del padre
+                          Elegir cuáles
+                          <span className="hint">
+                            Lo que no elijas conserva el valor que ya tiene la
+                            variante.
+                          </span>
+                        </span>
+                      </label>
+                    </Choices>
+
+                    {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>
+                    )}
+
+                    <AttributeList>
+                      {offered.attributes.map((attribute) => (
+                        <li key={attribute.id}>
+                          <label>
+                            <input
+                              type="checkbox"
+                              disabled={modes.attributes === "all"}
+                              checked={chosen.attributes.includes(attribute.id)}
+                              onChange={() => toggleChoice("attributes", attribute.id)}
+                            />
+                            <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>
-                          )}
-                          {attribute.ambiguousName && (
-                            <span className="note">
-                              se llama distinto en otra cadena
+                            <span className="value" title={attribute.value}>
+                              {attribute.value}
                             </span>
-                          )}
+                          </label>
+                        </li>
+                      ))}
+                    </AttributeList>
+                  </>
+                ) : (
+                  <Message>
+                    El producto padre no tiene atributos con valor que heredar.
+                  </Message>
+                )}
+              </Block>
+
+              <Block>
+                <h3>
+                  <span className="paso">4</span> Imágenes
+                </h3>
+                {offered.images.length ? (
+                  <>
+                    <Choices>
+                      <label>
+                        <input
+                          type="radio"
+                          checked={modes.images === "all"}
+                          onChange={() =>
+                            chooseMode(
+                              "images",
+                              "all",
+                              offered.images.map((item) => item.id)
+                            )
+                          }
+                        />
+                        <span>
+                          Todas
+                          <span className="hint">
+                            {offered.images.length} imagen(es) en el padre.
+                          </span>
                         </span>
-                        <span className="value" title={attribute.value}>
-                          {attribute.value}
+                      </label>
+                      <label>
+                        <input
+                          type="radio"
+                          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>
-                    </li>
-                  ))}
-                </AttributeList>
-              )}
+                    </Choices>
 
-              <Section>
-                <h3>También se hereda</h3>
-                <label className="choice">
-                  <input
-                    type="checkbox"
-                    checked={inheritImages}
-                    onChange={() => setInheritImages((value) => !value)}
-                  />
-                  <span>Imágenes</span>
-                </label>
-                <label className="choice">
-                  <input
-                    type="checkbox"
-                    checked={inheritDescriptions}
-                    onChange={() => setInheritDescriptions((value) => !value)}
-                  />
-                  <span>Descripciones</span>
-                </label>
-                <label className="choice">
-                  <input
-                    type="checkbox"
-                    checked={inheritCategoryRetailers}
-                    onChange={() => setInheritCategoryRetailers((value) => !value)}
-                  />
-                  <span>
-                    Cadenas y categorías
-                    <span className="hint">
-                      Las parejas cadena-categoría del padre se copian a la variante.
-                    </span>
-                  </span>
-                </label>
-              </Section>
+                    <ImageGrid>
+                      {offered.images.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={image.imageType || "Imagen del producto"}
+                          />
+                          <span>{image.imageType || "Sin tipo de toma"}</span>
+                        </label>
+                      ))}
+                    </ImageGrid>
+                  </>
+                ) : (
+                  <Message>
+                    El producto padre no tiene imágenes que heredar.
+                  </Message>
+                )}
+              </Block>
 
               {/* Es la diferencia entre link y propagate, y es la que sorprende:
                   aquí lo elegido se escribe encima aunque la variante lo hubiera
@@ -428,7 +1126,13 @@ 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" && (
@@ -458,15 +1162,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" &&
-                    attributes.length > 0 &&
-                    !chosenAttributes.length)
-                }
+                disabled={loading || !todoDecidido}
               >
                 {loading ? "Ligando…" : "Ligar"}
               </button>