contentoh-components-library 21.6.24 → 21.6.25

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

@@ -2,10 +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 { getProductImage, getRetailerPicture } from "../../../_utils/helper";
 
 import {
   Overlay,
@@ -130,11 +127,27 @@ export const LinkVariantsModal = ({
     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);
+  // 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("");
@@ -277,8 +290,9 @@ export const LinkVariantsModal = ({
         images: null,
       });
       setExtraRetailers([]);
+      setBrokenImages([]);
       setPerChild({});
-      setApplyToAll(true);
+      setApplyToAll(false);
       setActiveChild(mode === "children" ? selected[0] : null);
       setStep("inherit");
     } catch (err) {
@@ -315,20 +329,25 @@ export const LinkVariantsModal = ({
       setLoadingFilters(true);
       try {
         const res = await axios.get(
-          `${filtersEndpoint}?retailerSelected=${retailer ?? ""}&departmentSelected=${
-            department ?? ""
-          }`,
+          `${filtersEndpoint}?retailerSelected=${
+            retailer ?? ""
+          }&departmentSelected=${department ?? ""}`,
           { headers: { Authorization: token } }
         );
 
-        const { body } = readPayload(res);
-        const lista = (body ? JSON.parse(body) : res.data)?.data ?? [];
+        // 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 })),
+              retailers: lista.map((item) => ({
+                value: item.id,
+                label: item.name,
+              })),
             };
           }
           if (!department) {
@@ -343,7 +362,10 @@ export const LinkVariantsModal = ({
           }
           return {
             ...current,
-            categories: lista.map((item) => ({ value: item.id, label: item.name })),
+            categories: lista.map((item) => ({
+              value: item.id,
+              label: item.name,
+            })),
           };
         });
       } catch (error) {
@@ -412,6 +434,12 @@ export const LinkVariantsModal = ({
     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) => ({
@@ -431,7 +459,8 @@ export const LinkVariantsModal = ({
         seleccion.modes.descriptions === "all"
           ? "all"
           : seleccion.chosen.descriptions,
-      images: seleccion.modes.images === "all" ? "all" : seleccion.chosen.images,
+      images:
+        seleccion.modes.images === "all" ? "all" : seleccion.chosen.images,
       categoryRetailers: parejas
         .filter((par) => seleccion.chosen.categoryRetailers.includes(par.clave))
         .map(({ retailerId, categoryId }) => ({ retailerId, categoryId })),
@@ -484,7 +513,9 @@ export const LinkVariantsModal = ({
       !applyToAll && mode === "children"
         ? selected.reduce((acc, id) => {
             const guardado =
-              id === activeChild ? { modes, chosen, extraRetailers } : perChild[id];
+              id === activeChild
+                ? { modes, chosen, extraRetailers }
+                : perChild[id];
             if (guardado) acc[id] = buildInherit(guardado);
             return acc;
           }, {})
@@ -521,11 +552,16 @@ 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 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",
@@ -544,9 +580,14 @@ export const LinkVariantsModal = ({
 
     return DIMENSIONES.every((dimension) => {
       if (guardado.modes[dimension] !== null) return true;
-      return dimension === "categoryRetailers"
-        ? offered.categoryRetailers.length === 0 &&
-            (guardado.extraRetailers ?? []).length === 0
+      if (dimension === "categoryRetailers") {
+        return (
+          offered.categoryRetailers.length === 0 &&
+          (guardado.extraRetailers ?? []).length === 0
+        );
+      }
+      return dimension === "images"
+        ? imagenesUtiles.length === 0
         : offered[dimension].length === 0;
     });
   };
@@ -582,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>
@@ -654,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 && (
@@ -677,7 +725,11 @@ export const LinkVariantsModal = ({
                     Mostrando {candidates.length} de {total}
                   </span>
                   {hasMore && (
-                    <button type="button" onClick={loadMore} disabled={loadingMore}>
+                    <button
+                      type="button"
+                      onClick={loadMore}
+                      disabled={loadingMore}
+                    >
                       {loadingMore ? "Cargando…" : "Cargar más"}
                     </button>
                   )}
@@ -748,6 +800,7 @@ export const LinkVariantsModal = ({
                   <label>
                     <input
                       type="radio"
+                      name={`categoryRetailers-${activeChild ?? "todos"}`}
                       checked={modes.categoryRetailers === "all"}
                       onChange={() =>
                         chooseMode(
@@ -769,8 +822,11 @@ export const LinkVariantsModal = ({
                   <label>
                     <input
                       type="radio"
+                      name={`categoryRetailers-${activeChild ?? "todos"}`}
                       checked={modes.categoryRetailers === "some"}
-                      onChange={() => chooseMode("categoryRetailers", "some", [])}
+                      onChange={() =>
+                        chooseMode("categoryRetailers", "some", [])
+                      }
                     />
                     <span>
                       Elegir cuáles
@@ -788,14 +844,19 @@ export const LinkVariantsModal = ({
                       clave: `${item.retailerId}-${item.categoryId}`,
                       delPadre: true,
                     })),
-                    ...extraRetailers.map((item) => ({ ...item, delPadre: false })),
+                    ...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)}
+                          checked={chosen.categoryRetailers.includes(
+                            item.clave
+                          )}
                           onChange={() =>
                             toggleChoice("categoryRetailers", item.clave)
                           }
@@ -884,6 +945,7 @@ export const LinkVariantsModal = ({
                       <label>
                         <input
                           type="radio"
+                          name={`descriptions-${activeChild ?? "todos"}`}
                           checked={modes.descriptions === "all"}
                           onChange={() =>
                             chooseMode(
@@ -904,8 +966,11 @@ export const LinkVariantsModal = ({
                       <label>
                         <input
                           type="radio"
+                          name={`descriptions-${activeChild ?? "todos"}`}
                           checked={modes.descriptions === "some"}
-                          onChange={() => chooseMode("descriptions", "some", [])}
+                          onChange={() =>
+                            chooseMode("descriptions", "some", [])
+                          }
                         />
                         <span>
                           Elegir cuáles
@@ -925,7 +990,9 @@ export const LinkVariantsModal = ({
                               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}
@@ -961,6 +1028,7 @@ export const LinkVariantsModal = ({
                       <label>
                         <input
                           type="radio"
+                          name={`attributes-${activeChild ?? "todos"}`}
                           checked={modes.attributes === "all"}
                           onChange={() =>
                             chooseMode(
@@ -973,14 +1041,15 @@ export const LinkVariantsModal = ({
                         <span>
                           Todos los que tienen valor
                           <span className="hint">
-                            {offered.attributes.length} atributo(s) con información
-                            en el padre.
+                            {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", [])}
                         />
@@ -996,8 +1065,9 @@ export const LinkVariantsModal = ({
 
                     {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.
+                        El producto padre no comparte la cadena que tienes
+                        abierta, así que los nombres de abajo son los de otra de
+                        sus cadenas.
                       </Message>
                     )}
 
@@ -1009,7 +1079,9 @@ export const LinkVariantsModal = ({
                               type="checkbox"
                               disabled={modes.attributes === "all"}
                               checked={chosen.attributes.includes(attribute.id)}
-                              onChange={() => toggleChoice("attributes", attribute.id)}
+                              onChange={() =>
+                                toggleChoice("attributes", attribute.id)
+                              }
                             />
                             <span>
                               {attribute.name}
@@ -1043,45 +1115,48 @@ export const LinkVariantsModal = ({
                 <h3>
                   <span className="paso">4</span> Imágenes
                 </h3>
-                {offered.images.length ? (
+                {imagenesUtiles.length ? (
                   <>
                     <Choices>
                       <label>
                         <input
                           type="radio"
+                          name={`images-${activeChild ?? "todos"}`}
                           checked={modes.images === "all"}
                           onChange={() =>
                             chooseMode(
                               "images",
                               "all",
-                              offered.images.map((item) => item.id)
+                              imagenesUtiles.map((item) => item.id)
                             )
                           }
                         />
                         <span>
                           Todas
                           <span className="hint">
-                            {offered.images.length} imagen(es) en el padre.
+                            {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.
+                            Útil cuando la variante cambia de color o de
+                            empaque.
                           </span>
                         </span>
                       </label>
                     </Choices>
 
                     <ImageGrid>
-                      {offered.images.map((image) => (
+                      {imagenesUtiles.map((image) => (
                         <label
                           key={image.id}
                           className={[
@@ -1099,7 +1174,14 @@ export const LinkVariantsModal = ({
                           />
                           <img
                             src={getProductImage(image.src)}
-                            alt={image.imageType || "Imagen del producto"}
+                            alt=""
+                            onError={() =>
+                              setBrokenImages((current) =>
+                                current.includes(image.id)
+                                  ? current
+                                  : [...current, image.id]
+                              )
+                            }
                           />
                           <span>{image.imageType || "Sin tipo de toma"}</span>
                         </label>
@@ -1131,7 +1213,9 @@ export const LinkVariantsModal = ({
               : todoDecidido
               ? "Todo revisado. Puedes ligar."
               : !applyToAll && mode === "children"
-              ? `Faltan ${selected.filter((id) => !decididoPara(id)).length} producto(s) por revisar.`
+              ? `Faltan ${
+                  selected.filter((id) => !decididoPara(id)).length
+                } producto(s) por revisar.`
               : `Falta decidir: ${faltantes.join(", ")}.`}
           </span>
           <div className="actions">
@@ -1145,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" ? (