contentoh-components-library 21.6.35 → 21.6.37

package/dist/index.js

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

package/package.json

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

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

@@ -7,6 +7,10 @@ import { Container } from "./styles";
  *
  * El estado "propio" es el que carga información —ese campo se separó del padre—
  * así que es el que lleva acento y el que ofrece la acción de volver a heredar.
+ *
+ * OJO: "propio" ya NO significa "a salvo de la propagación". Desde el cambio del
+ * 2026-09-01 la propagación sobrescribe también estos valores; el aviso de que va
+ * a pasar vive en el diálogo de propagación, no aquí. El tooltip lo dice así.
  * "Heredado" es el caso normal y se mantiene discreto: si gritara en cada campo,
  * la ficha entera se volvería ruido.
  *
@@ -41,14 +45,20 @@ export const InheritanceTag = ({
         className="tag-label"
         title={
           isOverridden
-            ? "Valor propio de este producto hijo. La propagación del padre no lo modifica."
+            ? "Valor capturado en este producto hijo, distinto al del padre. Si el padre propaga este atributo, se reemplaza."
             : `Valor heredado${parentUpc ? ` del producto ${parentUpc}` : " del producto padre"}.`
         }
       >
         {isOverridden ? "Propio" : "Heredado"}
       </span>
 
-      {isOverridden && onRestore && (
+      {/* `Boolean`, no `isOverridden` a secas.
+
+          `is_overridden` llega como NÚMERO (0/1) desde la API y el reducer. Con
+          `{isOverridden && ...}`, un 0 se evalúa a 0 y React IMPRIME el texto
+          «0» — ese era el cero que aparecía en el hueco de la acción justo
+          después de pulsar «Volver a heredar», que es cuando el valor pasa a 0. */}
+      {Boolean(isOverridden) && onRestore && (
         <button type="button" className="tag-action" onClick={onRestore}>
           {restoreLabel}
         </button>

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

@@ -321,7 +321,9 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      {label?.length && (
+      {/* `Boolean`, no `label?.length`: con la etiqueta en cadena vacía la
+          expresión valía 0 y React imprimía un «0» en la ficha. */}
+      {Boolean(label?.length) && (
         <div className="title-container">
           <div className="titles">
             <ScreenHeader

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

@@ -46,7 +46,9 @@ export const TagAndInputv2 = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      {label?.length && (
+      {/* `Boolean`, no `label?.length`: con la etiqueta en cadena vacía la
+          expresión valía 0 y React imprimía un «0» en la ficha. */}
+      {Boolean(label?.length) && (
         <div className="title-container">
           <ScreenHeaderv2
             text={label}

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

@@ -21,7 +21,10 @@ import {
 
   props (* requerido):
     - *changedAttributes: [{ id, name, value }] lo que se acaba de editar
-    - *variants: [{ articleId, name, upc }] los hijos activos del padre
+    - *variants: [{ articleId, name, upc, overriddenAttributes }] los hijos
+        activos del padre. `overriddenAttributes` son los atributos que ese hijo
+        capturó a mano; la propagación los sobrescribe, y este diálogo es el
+        único lugar donde el usuario puede enterarse antes de que pase.
     - *onCancel: cerrar sin guardar nada
     - *onConfirm: (propagation | null) => void
         null            → guardar solo el padre
@@ -49,6 +52,31 @@ export const PropagateChangesModal = ({
   const puedePropagar = chosenAttributes.length > 0 && destinatarios > 0;
   const enSegundoPlano = destinatarios > UMBRAL_SEGUNDO_PLANO;
 
+  /*
+    A quién se le va a pisar un valor capturado a mano.
+
+    La propagación sobrescribe: eso se decidió a propósito, porque el usuario ya
+    eligió atributo por atributo y hijo por hijo. Pero sobrescribir en silencio
+    es otra cosa, y desde que se quitaron las etiquetas de «Heredado» y «Propio»
+    este diálogo es el único momento en que alguien puede saberlo.
+
+    Se recalcula con lo que está marcado ahora, no al abrir: si el usuario
+    desmarca el atributo conflictivo, el aviso desaparece — que es justo la
+    salida que el aviso debería estar ofreciendo.
+  */
+  const destinos = scope === "all"
+    ? variants
+    : variants.filter((item) => chosenChildren.includes(item.articleId));
+
+  const conValorPropio = destinos
+    .map((hijo) => ({
+      ...hijo,
+      pisados: (hijo.overriddenAttributes ?? []).filter((id) =>
+        chosenAttributes.includes(Number(id))
+      ),
+    }))
+    .filter((hijo) => hijo.pisados.length > 0);
+
   const toggleAttribute = (id) => {
     setChosenAttributes((current) =>
       current.includes(id)
@@ -155,13 +183,20 @@ export const PropagateChangesModal = ({
             </List>
           )}
 
-          {/* La diferencia con "ligar", y la que sorprende si no se dice: aquí
-              lo que el hijo editó a mano NO se pisa. */}
-          <Note>
-            Un hijo que haya editado alguno de estos atributos por su cuenta
-            conserva su valor. Para devolverlo al del padre está la acción
-            «Volver a heredar» en la ficha de ese hijo.
-          </Note>
+          {/* Lo que sorprende si no se dice: aquí se pisa lo que el hijo
+              hubiera capturado a mano. Se nombra a quién, no solo cuántos: con
+              «2 hijos» nadie sabe si le importa, con los nombres sí. */}
+          {conValorPropio.length > 0 && (
+            <Note className="accent">
+              {conValorPropio.length === 1
+                ? "Un hijo tiene un valor propio en lo que elegiste y se va a reemplazar: "
+                : `${conValorPropio.length} hijos tienen valores propios en lo que elegiste y se van a reemplazar: `}
+              {conValorPropio
+                .map((hijo) => `${hijo.name || `Producto ${hijo.articleId}`} (${hijo.pisados.length})`)
+                .join(", ")}
+              . Si no quieres pisarlos, desmarca ese atributo o ese hijo.
+            </Note>
+          )}
 
           {enSegundoPlano && (
             <Note className="accent">

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

@@ -0,0 +1,141 @@
+import { useState } from "react";
+import axios from "axios";
+
+import { readPayload, ApiError } from "../LinkVariantsModal/api";
+import { Overlay, Panel, Header, Body, Message, Footer } from "./styles";
+
+/*
+  Confirmación para romper un vínculo padre/hijo.
+
+  El servidor ya sabía hacerlo desde el principio —POST /variants/unlink—, pero
+  no había forma de pedirlo desde ninguna pantalla: la única manera de deshacer
+  una liga era DESACTIVAR al padre, que suelta a todos los hijos de golpe y no
+  se puede revertir. Esto es la versión de a uno.
+
+  La acción se pide siempre con el id del HIJO, que es quien tiene el vínculo en
+  `article.parent_article_id`. Por eso las dos direcciones —un hijo que se suelta
+  y un padre que suelta a un hijo— son la misma llamada; lo único que cambia es
+  el texto, porque no es lo mismo lo que el usuario cree estar haciendo.
+
+  props (* requerido):
+    - *childArticleId: el hijo que pierde el vínculo
+    - childName / childUpc: para nombrarlo en el diálogo
+    - parentName / parentUpc: de quién se desprende
+    - mode: "self" (esta ficha deja de ser hija) | "child" (esta ficha suelta a un hijo)
+    - *token, endpoint
+    - *onClose, onUnlinked
+*/
+export const UnlinkVariantModal = ({
+  childArticleId,
+  childName,
+  childUpc,
+  parentName,
+  parentUpc,
+  mode = "self",
+  token,
+  endpoint = process.env.REACT_APP_VARIANTS_ENDPOINT,
+  onClose,
+  onUnlinked,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const nombreHijo = childName || `Producto ${childArticleId}`;
+  const nombrePadre = parentName || "el producto padre";
+
+  const submit = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await axios.post(
+        `${endpoint}/unlink`,
+        { articleIds: [childArticleId] },
+        { headers: { Authorization: token } }
+      );
+
+      const data = readPayload(res);
+      onUnlinked?.({ ...data, mode, childArticleId });
+      onClose?.();
+    } catch (err) {
+      // El transporte siempre responde 200; el error de negocio viaja dentro.
+      setError(
+        err instanceof ApiError || err?.name === "ApiError"
+          ? err.message
+          : "No se pudo desvincular. Intenta de nuevo."
+      );
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Overlay onClick={loading ? undefined : onClose}>
+      <Panel onClick={(event) => event.stopPropagation()}>
+        <Header>
+          <h2>
+            {mode === "self"
+              ? "Dejar de ser hijo de otro producto"
+              : "Desvincular este hijo"}
+          </h2>
+          <p>
+            {mode === "self" ? (
+              <>
+                «{nombreHijo}» dejará de colgar de «{nombrePadre}»
+                {parentUpc ? ` (UPC ${parentUpc})` : ""}.
+              </>
+            ) : (
+              <>
+                «{nombreHijo}»{childUpc ? ` (UPC ${childUpc})` : ""} dejará de
+                colgar de este producto.
+              </>
+            )}
+          </p>
+        </Header>
+
+        <Body>
+          <ul>
+            {/* Lo primero que la gente teme, y no pasa. */}
+            <li>
+              <strong>No se borra nada.</strong> Todo lo que heredó —atributos,
+              descripciones, imágenes y cadenas— se queda como información
+              propia del producto.
+            </li>
+            <li>
+              Desaparecen las marcas de «Heredado» y «Propio»: sin padre dejan de
+              querer decir algo.
+            </li>
+            <li>
+              Deja de recibir la propagación
+              {mode === "self" ? " de su padre" : " de este producto"}: lo que se
+              edite de un lado ya no baja al otro.
+            </li>
+            <li className="aviso">
+              Volver a ligarlos es a mano, y hay que elegir otra vez qué hereda.
+              Desvincular no se deshace solo.
+            </li>
+          </ul>
+        </Body>
+
+        {error && <Message>{error}</Message>}
+
+        <Footer>
+          <button
+            type="button"
+            className="secondary"
+            onClick={onClose}
+            disabled={loading}
+          >
+            Cancelar
+          </button>
+          <button
+            type="button"
+            className="primary"
+            onClick={submit}
+            disabled={loading}
+          >
+            {loading ? "Desvinculando…" : "Desvincular"}
+          </button>
+        </Footer>
+      </Panel>
+    </Overlay>
+  );
+};

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

@@ -0,0 +1,106 @@
+import styled from "styled-components";
+
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+const PINK = "#E13AA8";
+
+export const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(40, 31, 51, 0.4);
+`;
+
+export const Panel = styled.div`
+  width: min(460px, 92vw);
+  border-radius: 10px;
+  background-color: ${GlobalColors.white};
+  font-family: ${FontFamily.Raleway};
+  overflow: hidden;
+`;
+
+export const Header = styled.div`
+  padding: 18px 22px 10px;
+
+  h2 {
+    margin: 0;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 16px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  p {
+    margin: 6px 0 0;
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${GlobalColors.gray};
+  }
+`;
+
+export const Body = styled.div`
+  padding: 4px 22px 8px;
+
+  ul {
+    margin: 0;
+    padding-left: 18px;
+  }
+
+  li {
+    margin-bottom: 6px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  /* Lo único que no se puede deshacer solo va marcado: el resto son
+     consecuencias, esta es una advertencia. */
+  li.aviso {
+    color: ${PINK};
+  }
+`;
+
+export const Message = styled.p`
+  margin: 8px 22px 0;
+  padding: 10px 12px;
+  border-radius: 6px;
+  background-color: rgba(225, 58, 168, 0.1);
+  font-size: 13px;
+  line-height: 1.4;
+  color: ${PINK};
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 22px 20px;
+
+  button {
+    height: 38px;
+    padding: 0 16px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: ${FontFamily.Raleway_600};
+    font-size: 13px;
+  }
+
+  button:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .secondary {
+    border: 1px solid ${GlobalColors.s2};
+    background: none;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  .primary {
+    border: 1px solid ${PINK};
+    background-color: ${PINK};
+    color: ${GlobalColors.white};
+  }
+`;