contentoh-components-library 21.6.24 → 21.6.26

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

@@ -2,10 +2,8 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import axios from "axios";
 
 import { readPayload, ApiError } from "./api";
-import {
-  getProductImage,
-  getRetailerPicture,
-} from "../../../_utils/helper";
+import { SingleSelect } from "../../molecules/SingleSelect";
+import { getProductImage, getRetailerPicture } from "../../../_utils/helper";
 
 import {
   Overlay,
@@ -130,11 +128,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 +291,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 +330,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) {
@@ -341,9 +361,16 @@ export const LinkVariantsModal = ({
               categories: [],
             };
           }
+          // El tercer nivel no viene como {id, name} sino como
+          // {category_id, subcategory}: con el mapeo de los otros dos, la
+          // categoría salía en la lista pero sin texto. Mismo criterio que usa
+          // el alta de productos, incluido el separador legible.
           return {
             ...current,
-            categories: lista.map((item) => ({ value: item.id, label: item.name })),
+            categories: lista.map((item) => ({
+              value: item.category_id,
+              label: (item.subcategory ?? "").replace("|", " > "),
+            })),
           };
         });
       } catch (error) {
@@ -412,6 +439,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 +464,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 +518,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 +557,18 @@ 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 +587,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 +630,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 +707,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 +732,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 +807,7 @@ export const LinkVariantsModal = ({
                   <label>
                     <input
                       type="radio"
+                      name={`categoryRetailers-${activeChild ?? "todos"}`}
                       checked={modes.categoryRetailers === "all"}
                       onChange={() =>
                         chooseMode(
@@ -769,8 +829,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 +851,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)
                           }
@@ -818,58 +886,47 @@ export const LinkVariantsModal = ({
                 </List>
 
                 <AddRetailer>
-                  <select
+                  <SingleSelect
+                    id="link-variants-retailer"
+                    placeholder="Agregar otra cadena…"
+                    options={filters.retailers}
                     value={newRetailer}
-                    onChange={(event) => {
-                      const valor = event.target.value;
-                      setNewRetailer(valor);
+                    loading={loadingFilters && !filters.retailers.length}
+                    onChange={(valor) => {
+                      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
+                  />
+                  <SingleSelect
+                    id="link-variants-department"
+                    placeholder="Departamento…"
+                    options={filters.departments}
                     value={newDepartment}
-                    disabled={!newRetailer || !filters.departments.length}
-                    onChange={(event) => {
-                      const valor = event.target.value;
-                      setNewDepartment(valor);
+                    disabled={!newRetailer}
+                    loading={loadingFilters && !!newRetailer}
+                    onChange={(valor) => {
+                      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
+                  />
+                  <SingleSelect
+                    id="link-variants-category"
+                    placeholder="Categoría…"
+                    options={filters.categories}
                     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>
+                    disabled={!newDepartment}
+                    loading={loadingFilters && !!newDepartment}
+                    onChange={(valor) => setNewCategory(valor ?? "")}
+                  />
                   <button
                     type="button"
                     onClick={addRetailer}
                     disabled={!newRetailer || !newCategory || loadingFilters}
                   >
-                    {loadingFilters ? "…" : "Agregar"}
+                    Agregar
                   </button>
                 </AddRetailer>
               </Block>
@@ -884,6 +941,7 @@ export const LinkVariantsModal = ({
                       <label>
                         <input
                           type="radio"
+                          name={`descriptions-${activeChild ?? "todos"}`}
                           checked={modes.descriptions === "all"}
                           onChange={() =>
                             chooseMode(
@@ -904,8 +962,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 +986,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 +1024,7 @@ export const LinkVariantsModal = ({
                       <label>
                         <input
                           type="radio"
+                          name={`attributes-${activeChild ?? "todos"}`}
                           checked={modes.attributes === "all"}
                           onChange={() =>
                             chooseMode(
@@ -973,14 +1037,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 +1061,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 +1075,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}
@@ -1039,79 +1107,85 @@ export const LinkVariantsModal = ({
                 )}
               </Block>
 
-              <Block>
-                <h3>
-                  <span className="paso">4</span> Imágenes
-                </h3>
-                {offered.images.length ? (
-                  <>
-                    <Choices>
-                      <label>
+              {/* Sin imágenes utilizables el bloque no se dibuja: un paso que
+                  solo sirve para decir que no hay nada es ruido, y ademas ya no
+                  hay decision que tomar ahi. */}
+              {imagenesUtiles.length > 0 && (
+                <Block>
+                  <h3>
+                    <span className="paso">4</span> Imágenes
+                  </h3>
+                  <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="radio"
-                          checked={modes.images === "all"}
-                          onChange={() =>
-                            chooseMode(
-                              "images",
-                              "all",
-                              offered.images.map((item) => item.id)
+                          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>
-                          Todas
-                          <span className="hint">
-                            {offered.images.length} imagen(es) en el padre.
-                          </span>
-                        </span>
-                      </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>
+                        <span>{image.imageType || "Sin tipo de toma"}</span>
                       </label>
-                    </Choices>
-
-                    <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>
+                    ))}
+                  </ImageGrid>
+                </Block>
+              )}
 
               {/* Es la diferencia entre link y propagate, y es la que sorprende:
                   aquí lo elegido se escribe encima aunque la variante lo hubiera
@@ -1131,7 +1205,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 +1221,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" ? (