contentoh-components-library 21.6.48 → 21.6.50

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

@@ -7,9 +7,12 @@ import {
   Panel,
   Header,
   Body,
+  Step,
   SearchRow,
   List,
+  GhostButton,
   NewGroup,
+  Candidates,
   Message,
   Footer,
 } from "./styles";
@@ -23,9 +26,18 @@ import {
   un código en `article.variant_group` y ya. Por eso el modal no pregunta qué
   heredar: no hay nada que heredar.
 
-  Dos formas de agrupar, y son la misma operación por debajo:
-    - elegir un grupo que ya existe
-    - teclear un código nuevo, que crea el grupo con este producto dentro
+  El modal tiene dos pasos y el segundo depende del primero:
+
+    1. QUÉ GRUPO. Se elige uno de los que ya existen, o se crea uno nuevo. El
+       campo para crearlo está escondido detrás de un botón a propósito: abrirlo
+       de entrada le contesta al usuario una pregunta que todavía no se ha
+       hecho —si quiere buscar o crear— y empuja a teclear un código que
+       probablemente ya existe.
+
+    2. QUÉ PRODUCTOS. Aparece solo cuando ya hay un grupo. Permite sumar varios
+       de una vez sin salir de aquí; antes había que volver a la tabla, entrar a
+       cada producto y repetir el trámite, que para un grupo de cinco eran cinco
+       vueltas completas.
 
   No hay tabla de grupos: un grupo existe mientras algún producto use su código.
   Eso hace que una errata no falle, solo cree un grupo de un miembro — de ahí que
@@ -57,6 +69,15 @@ export const VariantGroupModal = ({
   // Qué eligió el usuario: un código de la lista, o el que está escribiendo.
   const [selected, setSelected] = useState(null);
   const [nuevo, setNuevo] = useState("");
+  // El creador arranca cerrado: que esté abierto ya es una sugerencia de crear.
+  const [creando, setCreando] = useState(false);
+
+  // Paso 2: productos que se van a sumar junto con el de origen.
+  const [busquedaProd, setBusquedaProd] = useState("");
+  const [candidatos, setCandidatos] = useState([]);
+  const [totalCandidatos, setTotalCandidatos] = useState(0);
+  const [cargandoProd, setCargandoProd] = useState(false);
+  const [elegidos, setElegidos] = useState([]);
 
   const request = useCallback(
     async (action, body) => {
@@ -69,6 +90,11 @@ export const VariantGroupModal = ({
     [endpoint, token]
   );
 
+  const mensajeDe = (err, porDefecto) =>
+    err instanceof ApiError || err?.name === "ApiError"
+      ? err.message
+      : porDefecto;
+
   const buscar = useCallback(
     async (texto) => {
       setLoading(true);
@@ -77,11 +103,7 @@ export const VariantGroupModal = ({
         const data = await request("groups", { articleId, query: texto ?? "" });
         setGroups(data.groups ?? []);
       } catch (err) {
-        setError(
-          err instanceof ApiError || err?.name === "ApiError"
-            ? err.message
-            : "No se pudieron cargar los grupos."
-        );
+        setError(mensajeDe(err, "No se pudieron cargar los grupos."));
       } finally {
         setLoading(false);
       }
@@ -108,34 +130,95 @@ export const VariantGroupModal = ({
   const codigoNuevo = normalizar(nuevo);
   const codigoFinal = selected ?? codigoNuevo;
   const esNuevo = !selected && !!codigoNuevo;
-  const yaEstaba = codigoFinal && codigoFinal === currentGroup;
+  const yaEstaba = !!codigoFinal && codigoFinal === currentGroup;
+
+  const buscarProductos = useCallback(
+    async (texto) => {
+      setCargandoProd(true);
+      setError(null);
+      try {
+        const data = await request("group-candidates", {
+          articleId,
+          code: codigoFinal || "",
+          query: texto ?? "",
+        });
+        setCandidatos(data.candidates ?? []);
+        setTotalCandidatos(Number(data.total ?? 0));
+      } catch (err) {
+        setError(mensajeDe(err, "No se pudieron cargar los productos."));
+      } finally {
+        setCargandoProd(false);
+      }
+    },
+    [request, articleId, codigoFinal]
+  );
+
+  /*
+    La lista se recarga cuando cambia el código porque el servidor excluye a los
+    que ya están dentro: con otro grupo, el conjunto de candidatos es otro. Se
+    espera un momento porque el código nuevo se teclea letra por letra y sin la
+    pausa saldría una consulta por pulsación.
+  */
+  useEffect(() => {
+    if (!codigoFinal) {
+      setCandidatos([]);
+      setTotalCandidatos(0);
+      return undefined;
+    }
+    const t = setTimeout(() => buscarProductos(busquedaProd), 300);
+    return () => clearTimeout(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [codigoFinal]);
+
+  const alternar = (id) =>
+    setElegidos((previos) =>
+      previos.includes(id)
+        ? previos.filter((x) => x !== id)
+        : [...previos, id]
+    );
 
   const guardar = async () => {
-    if (!codigoFinal || yaEstaba) return;
+    if (!codigoFinal) return;
+    // Sin código nuevo y sin productos que sumar no hay nada que hacer.
+    if (yaEstaba && elegidos.length === 0) return;
 
     setSaving(true);
     setError(null);
     try {
-      const data = await request("join", { articleId, code: codigoFinal });
+      const data = await request("join", {
+        articleId,
+        code: codigoFinal,
+        alsoArticleIds: elegidos,
+      });
       onSaved?.({ ...data, group: data.group ?? codigoFinal });
       onClose?.();
     } catch (err) {
-      setError(
-        err instanceof ApiError || err?.name === "ApiError"
-          ? err.message
-          : "No se pudo agrupar el producto. Intenta de nuevo."
-      );
+      setError(mensajeDe(err, "No se pudo agrupar el producto. Intenta de nuevo."));
       setSaving(false);
     }
   };
 
+  // Cuántos de los elegidos cambian de grupo, para avisarlo antes y no después.
+  const seMueven = candidatos.filter(
+    (c) => elegidos.includes(c.articleId) && c.currentGroup && c.currentGroup !== codigoFinal
+  ).length;
+
   const resumen = () => {
-    if (yaEstaba) return `Este producto ya está en «${codigoFinal}».`;
-    if (esNuevo) return `Se creará el grupo «${codigoNuevo}» con este producto.`;
-    if (selected) return `Se agregará a «${selected}».`;
-    return "Elige un grupo o escribe un código nuevo.";
+    if (!codigoFinal) return "Elige un grupo o crea uno nuevo.";
+
+    const sufijo = elegidos.length
+      ? ` y ${elegidos.length} producto${elegidos.length === 1 ? "" : "s"} más`
+      : "";
+
+    if (yaEstaba && !elegidos.length) return `Este producto ya está en «${codigoFinal}».`;
+    if (yaEstaba) return `Se agregarán ${elegidos.length} producto${elegidos.length === 1 ? "" : "s"} a «${codigoFinal}».`;
+    if (esNuevo) return `Se creará «${codigoNuevo}» con este producto${sufijo}.`;
+    return `Se agregará a «${selected}»${sufijo}.`;
   };
 
+  const puedeGuardar =
+    !saving && !!codigoFinal && (!yaEstaba || elegidos.length > 0);
+
   return (
     <Overlay onClick={saving ? undefined : onClose}>
       <Panel onClick={(event) => event.stopPropagation()}>
@@ -151,6 +234,10 @@ export const VariantGroupModal = ({
         <Body>
           {error && <Message className="error">{error}</Message>}
 
+          <Step>
+            <h3>1 · Elige el grupo</h3>
+          </Step>
+
           <SearchRow
             onSubmit={(event) => {
               event.preventDefault();
@@ -180,6 +267,7 @@ export const VariantGroupModal = ({
                       onChange={() => {
                         setSelected(grupo.code);
                         setNuevo("");
+                        setCreando(false);
                       }}
                     />
                     <span className="codigo">{grupo.code}</span>
@@ -201,28 +289,137 @@ export const VariantGroupModal = ({
             <Message>
               {query.trim()
                 ? "Ningún grupo coincide con esa búsqueda."
-                : "Todavía no hay grupos en esta compañía. Crea el primero abajo."}
+                : "Todavía no hay grupos en esta compañía."}
             </Message>
           )}
 
-          <NewGroup>
-            <label htmlFor="nuevo-grupo">O crea un grupo nuevo</label>
-            <input
-              id="nuevo-grupo"
-              type="text"
-              value={nuevo}
-              placeholder="RELOJ-CASIO-A158"
-              maxLength={50}
-              onChange={(event) => {
-                setNuevo(event.target.value);
+          {/*
+            El campo para crear vive detrás de este botón. Mostrarlo de entrada
+            daba por hecho que el usuario venía a crear, cuando la mayoría de las
+            veces lo que quiere es sumarse a un grupo que ya existe.
+          */}
+          {!creando ? (
+            <GhostButton
+              type="button"
+              onClick={() => {
+                setCreando(true);
                 setSelected(null);
               }}
-            />
-            <span className="ayuda">
-              Letras, números, guion y guion bajo. Se guarda en mayúsculas, así
-              que «abc-1» y «ABC-1» son el mismo grupo.
-            </span>
-          </NewGroup>
+            >
+              + Crear un grupo nuevo
+            </GhostButton>
+          ) : (
+            <NewGroup>
+              <div className="encabezado">
+                <label htmlFor="nuevo-grupo">Código del grupo nuevo</label>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setCreando(false);
+                    setNuevo("");
+                  }}
+                >
+                  Cancelar
+                </button>
+              </div>
+              <input
+                id="nuevo-grupo"
+                type="text"
+                value={nuevo}
+                placeholder="RELOJ-CASIO-A158"
+                maxLength={50}
+                autoFocus
+                onChange={(event) => {
+                  setNuevo(event.target.value);
+                  setSelected(null);
+                }}
+              />
+              <span className="ayuda">
+                Letras, números, guion y guion bajo. Se guarda en mayúsculas, así
+                que «abc-1» y «ABC-1» son el mismo grupo.
+              </span>
+            </NewGroup>
+          )}
+
+          {/*
+            Paso 2. Solo tiene sentido con un grupo ya elegido: sin código no hay
+            a dónde sumar, y el servidor necesita el código para excluir a los
+            que ya están dentro.
+          */}
+          {!!codigoFinal && (
+            <>
+              <Step className="segundo">
+                <h3>2 · Agrega más productos a «{codigoFinal}»</h3>
+                <p>Opcional. Evita entrar a cada producto por separado.</p>
+              </Step>
+
+              <SearchRow
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  buscarProductos(busquedaProd);
+                }}
+              >
+                <input
+                  type="text"
+                  value={busquedaProd}
+                  placeholder="Busca por UPC, SKU o nombre"
+                  onChange={(event) => setBusquedaProd(event.target.value)}
+                />
+                <button type="submit" disabled={cargandoProd}>
+                  {cargandoProd ? "Buscando…" : "Buscar"}
+                </button>
+              </SearchRow>
+
+              {candidatos.length > 0 && (
+                <Candidates>
+                  {candidatos.map((c) => (
+                    <li key={c.articleId}>
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={elegidos.includes(c.articleId)}
+                          onChange={() => alternar(c.articleId)}
+                        />
+                        <span className="datos">
+                          <span className="nombre">{c.name}</span>
+                          <span className="ids">
+                            {c.upc ? `UPC ${c.upc}` : ""}
+                            {c.upc && c.sku ? " · " : ""}
+                            {c.sku ? `SKU ${c.sku}` : ""}
+                          </span>
+                        </span>
+                        {c.currentGroup && c.currentGroup !== codigoFinal && (
+                          <span className="mueve">hoy en «{c.currentGroup}»</span>
+                        )}
+                      </label>
+                    </li>
+                  ))}
+                </Candidates>
+              )}
+
+              {!cargandoProd && candidatos.length === 0 && (
+                <Message>
+                  {busquedaProd.trim()
+                    ? "Ningún producto coincide con esa búsqueda."
+                    : "No hay otros productos que puedas agrupar aquí."}
+                </Message>
+              )}
+
+              {totalCandidatos > candidatos.length && (
+                <Message className="sutil">
+                  Se muestran {candidatos.length} de {totalCandidatos}. Afina la
+                  búsqueda para ver el resto.
+                </Message>
+              )}
+
+              {seMueven > 0 && (
+                <Message className="aviso">
+                  {seMueven} de los productos elegidos ya está en otro grupo y se
+                  moverá a «{codigoFinal}». Un producto solo puede estar en uno.
+                </Message>
+              )}
+            </>
+          )}
         </Body>
 
         <Footer>
@@ -240,7 +437,7 @@ export const VariantGroupModal = ({
               type="button"
               className="primary"
               onClick={guardar}
-              disabled={saving || !codigoFinal || yaEstaba}
+              disabled={!puedeGuardar}
             >
               {saving ? "Guardando…" : "Aceptar"}
             </button>

package/src/components/organisms/VariantGroupModal/styles.js

@@ -159,9 +159,30 @@ export const NewGroup = styled.div`
   border-radius: 6px;
   background-color: rgba(${PINK_RGB}, 0.04);
 
+  .encabezado {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 6px;
+  }
+
+  /* Salir de aqui tiene que costar lo mismo que entrar: si abrir el creador es
+     un clic, cerrarlo tambien. Sin esto el usuario queda atrapado en el paso de
+     crear y la unica salida visible es cerrar el modal entero. */
+  .encabezado button {
+    border: none;
+    background: none;
+    padding: 0;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
   label {
     display: block;
-    margin-bottom: 6px;
     font-family: ${FontFamily.Raleway_600};
     font-size: 12px;
     color: ${GlobalColors.deep_gray};
@@ -193,6 +214,117 @@ export const NewGroup = styled.div`
   }
 `;
 
+export const Step = styled.div`
+  margin: 4px 0 10px;
+
+  h3 {
+    margin: 0;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  p {
+    margin: 2px 0 0;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  /* El segundo paso aparece y desaparece segun haya grupo elegido; la linea de
+     arriba es lo que evita que se lea como continuacion del bloque anterior. */
+  &.segundo {
+    margin-top: 18px;
+    padding-top: 14px;
+    border-top: 1px solid ${GlobalColors.s2};
+  }
+`;
+
+/*
+  El boton que revela el campo de codigo nuevo.
+
+  Va deliberadamente discreto: es la salida menos frecuente —lo normal es
+  sumarse a un grupo que ya existe— y competir en peso con "Buscar" volveria a
+  empujar hacia crear, que es justo lo que se queria dejar de hacer.
+*/
+export const GhostButton = styled.button`
+  display: block;
+  width: 100%;
+  height: 36px;
+  border: 1px dashed rgba(${PINK_RGB}, 0.5);
+  border-radius: 6px;
+  background-color: rgba(${PINK_RGB}, 0.04);
+  font-family: ${FontFamily.Raleway_600};
+  font-size: 12px;
+  color: ${PINK};
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(${PINK_RGB}, 0.09);
+  }
+`;
+
+export const Candidates = styled.ul`
+  margin: 0 0 10px;
+  padding: 0;
+  list-style: none;
+  border: 1px solid ${GlobalColors.s2};
+  border-radius: 6px;
+  /* Acotado a proposito: la lista vive dentro de un modal que ya scrollea, y sin
+     tope empuja el pie fuera de la vista. */
+  max-height: 210px;
+  overflow-y: auto;
+
+  li + li {
+    border-top: 1px solid ${GlobalColors.s2};
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    cursor: pointer;
+    font-size: 13px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  label:hover {
+    background-color: ${GlobalColors.s1};
+  }
+
+  input[type="checkbox"] {
+    accent-color: ${PINK};
+    flex-shrink: 0;
+  }
+
+  .datos {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .nombre {
+    font-family: ${FontFamily.Raleway_600};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ids {
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  .mueve {
+    margin-left: auto;
+    flex-shrink: 0;
+    font-size: 11px;
+    font-style: italic;
+    color: ${PINK};
+    white-space: nowrap;
+  }
+`;
+
 export const Message = styled.p`
   margin: 0 0 12px;
   padding: 10px 12px;
@@ -206,6 +338,21 @@ export const Message = styled.p`
     background-color: rgba(${PINK_RGB}, 0.1);
     color: ${PINK};
   }
+
+  /* Informativo, no accionable: no debe competir con el contenido. */
+  &.sutil {
+    background: none;
+    padding: 2px 0 10px;
+    font-size: 11px;
+    color: ${GlobalColors.gray};
+  }
+
+  /* Agrupar es un UPDATE, asi que sumar un producto que ya tenia grupo lo MUEVE.
+     Se avisa antes de guardar, no despues. */
+  &.aviso {
+    background-color: rgba(${PINK_RGB}, 0.08);
+    color: ${GlobalColors.deep_gray};
+  }
 `;
 
 export const Footer = styled.div`

package/src/components/pages/ProviderProductEdition/index.js

@@ -42,6 +42,7 @@ import { LinkVariantsModal } from "../../organisms/LinkVariantsModal";
 import { UnlinkVariantModal } from "../../organisms/UnlinkVariantModal";
 import { VariantGroupModal } from "../../organisms/VariantGroupModal";
 import { PropagateChangesModal } from "../../organisms/PropagateChangesModal";
+import { soloPropagables } from "../../organisms/PropagateChangesModal/non-propagable";
 import { readPayload } from "../../organisms/LinkVariantsModal/api";
 import { ProductImageModal } from "../../organisms/ProductImageModal";
 import { VersionSelector } from "../../organisms/VersionSelector";
@@ -712,7 +713,7 @@ const ProviderProductEditionView = ({
     const retailerId = state.active_retailer?.id_retailer;
     const inputs = state.services?.datasheets?.inputs ?? {};
 
-    return (state.updated_datasheets_inputs ?? []).map((item) => {
+    const cambios = (state.updated_datasheets_inputs ?? []).map((item) => {
       const input = inputs[`${item.attributeId}_${retailerId}`];
       return {
         id: Number(item.attributeId),
@@ -720,6 +721,14 @@ const ProviderProductEditionView = ({
         value: item.value,
       };
     });
+
+    /*
+      UPC y SKU se quitan aquí y no dentro del diálogo porque esta lista también
+      decide SI el diálogo se abre. Editar solo el UPC no tiene nada que
+      propagar, así que preguntarlo sería pedirle al usuario una decisión sobre
+      un conjunto vacío.
+    */
+    return soloPropagables(cambios);
   };
 
   const handleOnClickSave = () => {