contentoh-components-library 21.6.18 → 21.6.20

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

@@ -0,0 +1,474 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import axios from "axios";
+
+import { readPayload, ApiError } from "./api";
+
+import {
+  Overlay,
+  Panel,
+  Header,
+  ModeSwitch,
+  Body,
+  SearchRow,
+  List,
+  AttributeList,
+  Section,
+  Message,
+  Footer,
+} from "./styles";
+
+/*
+  Modal para ligar productos como padre/variante.
+
+  props (* requerido):
+    - *articleId: producto desde el que se liga (el que está en edición)
+    - articleName / articleUpc: para que el usuario sepa sobre qué está trabajando
+    - *token: JWT que va en el header Authorization
+    - endpoint: base del API de variantes. Por defecto REACT_APP_VARIANTS_ENDPOINT
+    - *onClose: cerrar sin cambios
+    - onLinked: se llama con la respuesta del backend cuando la liga tuvo éxito
+
+  Los dos modos son los de POST /variants/link:
+    parent   → este producto pasa a ser variante del que se elija
+    children → los elegidos pasan a ser variantes de este producto
+
+  En ambos el padre baja al hijo, nunca al revés. Lo que cambia es quién es quién.
+*/
+
+// El backend devuelve códigos estables justamente para no mandar textos de UI
+// desde el servidor. La traducción a lenguaje humano vive aquí.
+const ERROR_TEXT = {
+  VARIANT_SELF_LINK: "Un producto no puede ser variante de sí mismo.",
+  VARIANT_PARENT_IS_CHILD:
+    "Ese producto ya es variante de otro. Las familias son de un solo nivel.",
+  VARIANT_CHILD_IS_PARENT:
+    "Ese producto ya tiene variantes propias, así que no puede colgar de otro.",
+  VARIANT_ALREADY_LINKED:
+    "Ese producto ya pertenece a otra familia. Desvincúlalo primero.",
+  VARIANT_NOT_OWNED_BY_USER: "Ese producto está fuera de tu alcance.",
+  VARIANT_CROSS_COMPANY: "Ese producto pertenece a otra compañía.",
+  VARIANT_INACTIVE_ARTICLE: "Ese producto está desactivado.",
+  VARIANT_NOT_FOUND: "No encontramos ese producto.",
+  VARIANT_PLAN_LIMIT_REACHED:
+    "Tu plan no tiene cupo disponible para más productos.",
+};
+
+const readError = (error) => {
+  if (error instanceof ApiError || error?.name === "ApiError") {
+    return ERROR_TEXT[error.code] || error.message;
+  }
+  // Falla de transporte de verdad: red caída, DNS, CORS.
+  return "No se pudo conectar con el servidor.";
+};
+
+export const LinkVariantsModal = ({
+  articleId,
+  articleName,
+  articleUpc,
+  activeRetailerId,
+  token,
+  endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
+  onClose,
+  onLinked,
+}) => {
+  const [mode, setMode] = useState("parent");
+  const [step, setStep] = useState("search");
+
+  const [query, setQuery] = useState("");
+  const [candidates, setCandidates] = useState([]);
+  const [rejected, setRejected] = useState(null);
+  const [searched, setSearched] = useState(false);
+  const [selected, setSelected] = useState([]);
+
+  const [attributes, setAttributes] = useState([]);
+  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);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const request = useCallback(
+    async (action, body) => {
+      const res = await axios.post(`${endpoint}/${action}`, body, {
+        headers: { Authorization: token },
+      });
+      // El transporte siempre responde 200; el resultado real va en el cuerpo.
+      return readPayload(res);
+    },
+    [endpoint, token]
+  );
+
+  // En modo children el padre es el producto en edición; en modo parent es el
+  // candidato que el usuario acaba de elegir. De ahí sale qué atributos ofrecer.
+  const parentArticleId = useMemo(
+    () => (mode === "children" ? articleId : selected[0]),
+    [mode, articleId, selected]
+  );
+
+  // Cambiar de dirección invalida la selección: los candidatos elegibles no son
+  // los mismos, y arrastrar la anterior llevaría a ligar algo que no se buscó.
+  useEffect(() => {
+    setCandidates([]);
+    setSelected([]);
+    setRejected(null);
+    setSearched(false);
+    setError(null);
+    setStep("search");
+  }, [mode]);
+
+  const search = async (event) => {
+    event?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await request("search", {
+        mode,
+        articleId,
+        query: query.trim(),
+      });
+      setCandidates(data.candidates || []);
+      setRejected(data.rejected || null);
+      setSearched(true);
+    } catch (err) {
+      setError(readError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggle = (id) => {
+    setSelected((current) => {
+      if (mode === "parent") return current[0] === id ? [] : [id];
+      return current.includes(id)
+        ? current.filter((item) => item !== id)
+        : [...current, id];
+    });
+  };
+
+  const goToInheritance = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      // La cadena activa decide con qué nombre se ve cada atributo: el equipo
+      // interno y los proveedores los renombran por cadena en attribute_manager,
+      // y mostrar el nombre de otra cadena confundiría al elegir.
+      const data = await request("attributes", {
+        parentArticleId,
+        retailerId: activeRetailerId,
+      });
+      setAttributes(data.attributes || []);
+      setNameScope(data.nameScope ?? null);
+      setChosenAttributes((data.attributes || []).map((item) => item.id));
+      setStep("inherit");
+    } catch (err) {
+      setError(readError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleAttribute = (id) => {
+    setChosenAttributes((current) =>
+      current.includes(id)
+        ? current.filter((item) => item !== id)
+        : [...current, id]
+    );
+  };
+
+  const submit = async () => {
+    setLoading(true);
+    setError(null);
+
+    const inherit = {
+      attributes: inheritMode === "all-filled" ? "all-filled" : chosenAttributes,
+      images: inheritImages,
+      descriptions: inheritDescriptions,
+      categoryRetailers: inheritCategoryRetailers,
+    };
+
+    const body =
+      mode === "parent"
+        ? { mode, articleId, parentArticleId: selected[0], inherit }
+        : { mode, parentArticleId: articleId, childrenArticleIds: selected, inherit };
+
+    try {
+      const data = await request("link", body);
+      onLinked?.(data);
+      onClose?.();
+    } catch (err) {
+      setError(readError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const selectionLabel =
+    mode === "parent"
+      ? "Se elige un solo producto padre."
+      : `${selected.length} producto(s) pasarán a ser variantes.`;
+
+  return (
+    <Overlay onClick={onClose}>
+      <Panel onClick={(event) => event.stopPropagation()}>
+        <Header>
+          <div>
+            <h2>Ligar productos</h2>
+            <p>
+              {articleName || `Producto ${articleId}`}
+              {articleUpc ? ` · UPC ${articleUpc}` : ""}
+            </p>
+          </div>
+          <button type="button" className="close" onClick={onClose} aria-label="Cerrar">
+            ×
+          </button>
+        </Header>
+
+        {step === "search" && (
+          <ModeSwitch>
+            <button
+              type="button"
+              className={mode === "parent" ? "active" : ""}
+              onClick={() => setMode("parent")}
+            >
+              Este producto es variante de otro
+            </button>
+            <button
+              type="button"
+              className={mode === "children" ? "active" : ""}
+              onClick={() => setMode("children")}
+            >
+              Agregar variantes a este producto
+            </button>
+          </ModeSwitch>
+        )}
+
+        <Body>
+          {error && <Message className="error">{error}</Message>}
+
+          {step === "search" && (
+            <>
+              <SearchRow onSubmit={search}>
+                <input
+                  type="text"
+                  value={query}
+                  placeholder="Busca por UPC, SKU o nombre"
+                  onChange={(event) => setQuery(event.target.value)}
+                />
+                <button type="submit" disabled={loading}>
+                  {loading ? "Buscando…" : "Buscar"}
+                </button>
+              </SearchRow>
+
+              {/* El backend explica por qué un UPC existente no es ligable. Sin
+                  esto el usuario ve "sin resultados" y no sabe qué hacer. */}
+              {rejected && (
+                <Message className="error">
+                  {rejected.name || rejected.upc}: {ERROR_TEXT[rejected.code]}
+                </Message>
+              )}
+
+              {searched && !candidates.length && !rejected && (
+                <Message>
+                  No hay productos que puedas ligar con esa búsqueda. Solo
+                  aparecen productos activos de la misma compañía que todavía no
+                  pertenecen a otra familia.
+                </Message>
+              )}
+
+              {candidates.length > 0 && (
+                <List>
+                  {candidates.map((candidate) => (
+                    <li key={candidate.articleId}>
+                      <label>
+                        <input
+                          type={mode === "parent" ? "radio" : "checkbox"}
+                          name="candidate"
+                          checked={selected.includes(candidate.articleId)}
+                          onChange={() => toggle(candidate.articleId)}
+                        />
+                        <span>
+                          {candidate.name || `Producto ${candidate.articleId}`}
+                          <span className="meta">
+                            UPC {candidate.upc || "—"}
+                            {candidate.categoryName ? ` · ${candidate.categoryName}` : ""}
+                          </span>
+                        </span>
+                        {candidate.variantsCount > 0 && (
+                          <span className="count">
+                            {candidate.variantsCount} variante
+                            {candidate.variantsCount === 1 ? "" : "s"}
+                          </span>
+                        )}
+                      </label>
+                    </li>
+                  ))}
+                </List>
+              )}
+            </>
+          )}
+
+          {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.
+                    </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>
+
+              {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>
+              )}
+
+              {inheritMode === "selected" && (
+                <AttributeList>
+                  {attributes.map((attribute) => (
+                    <li key={attribute.id}>
+                      <label>
+                        <input
+                          type="checkbox"
+                          checked={chosenAttributes.includes(attribute.id)}
+                          onChange={() => toggleAttribute(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>
+                        <span className="value" title={attribute.value}>
+                          {attribute.value}
+                        </span>
+                      </label>
+                    </li>
+                  ))}
+                </AttributeList>
+              )}
+
+              <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>
+
+              {/* Es la diferencia entre link y propagate, y es la que sorprende:
+                  aquí lo elegido se escribe encima aunque la variante lo hubiera
+                  editado a mano. Decirlo antes evita el reclamo después. */}
+              <Message>
+                Lo que elijas heredar reemplaza el valor actual de la variante,
+                incluso si alguien lo había capturado a mano.
+              </Message>
+            </>
+          )}
+        </Body>
+
+        <Footer>
+          <span className="summary">
+            {step === "search" ? selectionLabel : "Revisa la herencia antes de ligar."}
+          </span>
+          <div className="actions">
+            {step === "inherit" && (
+              <button
+                type="button"
+                className="secondary"
+                onClick={() => setStep("search")}
+                disabled={loading}
+              >
+                Atrás
+              </button>
+            )}
+            <button type="button" className="secondary" onClick={onClose} disabled={loading}>
+              Cancelar
+            </button>
+            {step === "search" ? (
+              <button
+                type="button"
+                className="primary"
+                onClick={goToInheritance}
+                disabled={loading || !selected.length}
+              >
+                Continuar
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="primary"
+                onClick={submit}
+                disabled={
+                  loading ||
+                  (inheritMode === "selected" && !chosenAttributes.length)
+                }
+              >
+                {loading ? "Ligando…" : "Ligar"}
+              </button>
+            )}
+          </div>
+        </Footer>
+      </Panel>
+    </Overlay>
+  );
+};