contentoh-components-library 21.6.19 → 21.6.21

package/dist/index.js

@@ -1083,7 +1083,7 @@ Object.keys(_index82).forEach(function (key) {
   });
 });
 
-var _index83 = require("./components/organisms/ProductImageModal/index");
+var _index83 = require("./components/organisms/LinkVariantsModal/index");
 
 Object.keys(_index83).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1096,7 +1096,7 @@ Object.keys(_index83).forEach(function (key) {
   });
 });
 
-var _index84 = require("./components/organisms/Chat/index");
+var _index84 = require("./components/organisms/ProductImageModal/index");
 
 Object.keys(_index84).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1109,7 +1109,7 @@ Object.keys(_index84).forEach(function (key) {
   });
 });
 
-var _index85 = require("./components/organisms/Modal/index");
+var _index85 = require("./components/organisms/Chat/index");
 
 Object.keys(_index85).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1122,7 +1122,7 @@ Object.keys(_index85).forEach(function (key) {
   });
 });
 
-var _index86 = require("./components/organisms/OrderDetail/index");
+var _index86 = require("./components/organisms/Modal/index");
 
 Object.keys(_index86).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -1135,6 +1135,19 @@ Object.keys(_index86).forEach(function (key) {
   });
 });
 
+var _index87 = require("./components/organisms/OrderDetail/index");
+
+Object.keys(_index87).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index87[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index87[key];
+    }
+  });
+});
+
 var _RangeCalendar = require("./components/organisms/RangeCalendar");
 
 Object.keys(_RangeCalendar).forEach(function (key) {
@@ -1161,28 +1174,28 @@ Object.keys(_TableResizable).forEach(function (key) {
   });
 });
 
-var _index87 = require("./components/organisms/SideModal/index");
+var _index88 = require("./components/organisms/SideModal/index");
 
-Object.keys(_index87).forEach(function (key) {
+Object.keys(_index88).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index87[key]) return;
+  if (key in exports && exports[key] === _index88[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index87[key];
+      return _index88[key];
     }
   });
 });
 
-var _index88 = require("./components/organisms/GridProducts/index");
+var _index89 = require("./components/organisms/GridProducts/index");
 
-Object.keys(_index88).forEach(function (key) {
+Object.keys(_index89).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index88[key]) return;
+  if (key in exports && exports[key] === _index89[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index88[key];
+      return _index89[key];
     }
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.6.19",
+  "version": "21.6.21",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/InheritanceTag/index.js

@@ -9,16 +9,23 @@ import { Container } from "./styles";
  * así que es el que lleva acento y el que ofrece la acción de volver a heredar.
  * "Heredado" es el caso normal y se mantiene discreto: si gritara en cada campo,
  * la ficha entera se volvería ruido.
+ *
+ * Un campo VACÍO no lleva marca: no heredó nada y tampoco tiene valor propio, así
+ * que llamarlo "Heredado" es falso además de ruidoso. Sin esto la ficha de una
+ * variante sale con el chip repetido en cada campo, incluidos los obligatorios en
+ * rojo que están sin capturar, y la marca deja de distinguir nada.
  */
 export const InheritanceTag = ({
   isVariant = false,
   isOverridden = false,
+  hasValue = true,
   parentUpc,
   onRestore,
   restoreLabel = "Volver a heredar",
   className = "",
 }) => {
   if (!isVariant) return null;
+  if (!hasValue) return null;
 
   const state = isOverridden ? "own" : "inherited";
 

package/src/components/molecules/TagAndInput/index.js

@@ -331,6 +331,7 @@ export const TagAndInput = ({
             <InheritanceTag
               isVariant={isVariant}
               isOverridden={isOverridden}
+              hasValue={`${value ?? ""}`.trim() !== ""}
               parentUpc={parentUpc}
               onRestore={
                 onRestoreInheritance

package/src/components/molecules/TagAndInputv2/index.js

@@ -63,6 +63,7 @@ export const TagAndInputv2 = ({
           <InheritanceTag
             isVariant={isVariant}
             isOverridden={isOverridden}
+            hasValue={`${value ?? ""}`.trim() !== ""}
             parentUpc={parentUpc}
             onRestore={
               onRestoreInheritance

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

@@ -0,0 +1,61 @@
+/*
+  Las lambdas de este API están declaradas con `integration: lambda`, no con
+  lambda-proxy. Eso tiene dos consecuencias que se pagan caras si se ignoran:
+
+  1. La respuesta llega ENVUELTA: axios entrega { statusCode, headers, body },
+     con `body` en texto. Leer `res.data.candidates` da undefined.
+  2. El HTTP siempre es 200, incluso cuando la lambda respondió 400 o 500. Un
+     try/catch alrededor de axios NUNCA se dispara por un error de negocio: el
+     error viaja dentro del cuerpo y hay que mirar `statusCode` a mano.
+
+  El repo ya vive con esto —provider-product-edition.context.jsx hace
+  JSON.parse(res.data.body)— pero sin un lugar común cada llamada nueva vuelve a
+  tropezar. Esto lo centraliza.
+*/
+
+export const unwrap = (res) => {
+  const payload = res?.data;
+
+  const envuelto = payload
+    && typeof payload === "object"
+    && "statusCode" in payload
+    && "body" in payload;
+
+  if (!envuelto) return { status: res?.status ?? 200, body: payload };
+
+  const body =
+    typeof payload.body === "string" ? safeParse(payload.body) : payload.body;
+
+  return { status: Number(payload.statusCode), body };
+};
+
+const safeParse = (text) => {
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    return { message: text };
+  }
+};
+
+/*
+  Error de negocio con el código estable que manda el backend
+  (VARIANT_CROSS_COMPANY, VARIANT_ALREADY_LINKED, ...). Se lanza para que el
+  llamador use un try/catch normal, aunque el transporte haya dicho 200.
+*/
+export class ApiError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.name = "ApiError";
+    this.code = code;
+  }
+}
+
+export const readPayload = (res) => {
+  const { status, body } = unwrap(res);
+
+  if (status >= 400) {
+    throw new ApiError(body?.code, body?.message || "La operación falló.");
+  }
+
+  return body ?? {};
+};

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

@@ -0,0 +1,479 @@
+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 ||
+                  // 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)
+                }
+              >
+                {loading ? "Ligando…" : "Ligar"}
+              </button>
+            )}
+          </div>
+        </Footer>
+      </Panel>
+    </Overlay>
+  );
+};