contentoh-components-library 21.6.35 → 21.6.37

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

@@ -16,6 +16,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  * 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.
  *
@@ -51,9 +55,9 @@ var InheritanceTag = function InheritanceTag(_ref) {
     className: "inheritance-tag ".concat(state, " ").concat(className),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: "tag-label",
-      title: isOverridden ? "Valor propio de este producto hijo. La propagación del padre no lo modifica." : "Valor heredado".concat(parentUpc ? " del producto ".concat(parentUpc) : " del producto padre", "."),
+      title: isOverridden ? "Valor capturado en este producto hijo, distinto al del padre. Si el padre propaga este atributo, se reemplaza." : "Valor heredado".concat(parentUpc ? " del producto ".concat(parentUpc) : " del producto padre", "."),
       children: isOverridden ? "Propio" : "Heredado"
-    }), isOverridden && onRestore && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    }), Boolean(isOverridden) && onRestore && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       type: "button",
       className: "tag-action",
       onClick: onRestore,

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

@@ -420,7 +420,7 @@ var TagAndInput = function TagAndInput(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
-    children: [(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [Boolean(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "title-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "titles",

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

@@ -54,7 +54,7 @@ var TagAndInputv2 = function TagAndInputv2(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     inputType: inputType,
     className: "input-container",
-    children: [(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [Boolean(label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "title-container",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeaderv.ScreenHeaderv2, {
         text: label,

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

@@ -9,6 +9,8 @@ exports.PropagateChangesModal = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = require("react");
@@ -27,7 +29,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
   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
@@ -67,6 +72,31 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
   var destinatarios = scope === "all" ? variants.length : chosenChildren.length;
   var puedePropagar = chosenAttributes.length > 0 && destinatarios > 0;
   var 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.
+  */
+
+  var destinos = scope === "all" ? variants : variants.filter(function (item) {
+    return chosenChildren.includes(item.articleId);
+  });
+  var conValorPropio = destinos.map(function (hijo) {
+    var _hijo$overriddenAttri;
+
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, hijo), {}, {
+      pisados: ((_hijo$overriddenAttri = hijo.overriddenAttributes) !== null && _hijo$overriddenAttri !== void 0 ? _hijo$overriddenAttri : []).filter(function (id) {
+        return chosenAttributes.includes(Number(id));
+      })
+    });
+  }).filter(function (hijo) {
+    return hijo.pisados.length > 0;
+  });
 
   var toggleAttribute = function toggleAttribute(id) {
     setChosenAttributes(function (current) {
@@ -173,8 +203,11 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
               })
             }, variant.articleId);
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Note, {
-          children: "Un hijo que haya editado alguno de estos atributos por su cuenta conserva su valor. Para devolverlo al del padre est\xE1 la acci\xF3n \xABVolver a heredar\xBB en la ficha de ese hijo."
+        }), conValorPropio.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Note, {
+          className: "accent",
+          children: [conValorPropio.length === 1 ? "Un hijo tiene un valor propio en lo que elegiste y se va a reemplazar: " : "".concat(conValorPropio.length, " hijos tienen valores propios en lo que elegiste y se van a reemplazar: "), conValorPropio.map(function (hijo) {
+            return "".concat(hijo.name || "Producto ".concat(hijo.articleId), " (").concat(hijo.pisados.length, ")");
+          }).join(", "), ". Si no quieres pisarlos, desmarca ese atributo o ese hijo."]
         }), enSegundoPlano && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Note, {
           className: "accent",
           children: ["Son m\xE1s de ", UMBRAL_SEGUNDO_PLANO, " hijos, as\xED que la propagaci\xF3n corre en segundo plano: el guardado termina antes de que todas est\xE9n actualizadas."]

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

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnlinkVariantModal = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _api = require("../LinkVariantsModal/api");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  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
+*/
+var UnlinkVariantModal = function UnlinkVariantModal(_ref) {
+  var childArticleId = _ref.childArticleId,
+      childName = _ref.childName,
+      childUpc = _ref.childUpc,
+      parentName = _ref.parentName,
+      parentUpc = _ref.parentUpc,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "self" : _ref$mode,
+      token = _ref.token,
+      _ref$endpoint = _ref.endpoint,
+      endpoint = _ref$endpoint === void 0 ? process.env.REACT_APP_VARIANTS_ENDPOINT : _ref$endpoint,
+      onClose = _ref.onClose,
+      onUnlinked = _ref.onUnlinked;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var nombreHijo = childName || "Producto ".concat(childArticleId);
+  var nombrePadre = parentName || "el producto padre";
+
+  var submit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var res, data;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+              setError(null);
+              _context.prev = 2;
+              _context.next = 5;
+              return _axios.default.post("".concat(endpoint, "/unlink"), {
+                articleIds: [childArticleId]
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 5:
+              res = _context.sent;
+              data = (0, _api.readPayload)(res);
+              onUnlinked === null || onUnlinked === void 0 ? void 0 : onUnlinked((0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+                mode: mode,
+                childArticleId: childArticleId
+              }));
+              onClose === null || onClose === void 0 ? void 0 : onClose();
+              _context.next = 15;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
+              // El transporte siempre responde 200; el error de negocio viaja dentro.
+              setError(_context.t0 instanceof _api.ApiError || (_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.name) === "ApiError" ? _context.t0.message : "No se pudo desvincular. Intenta de nuevo.");
+              setLoading(false);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 11]]);
+    }));
+
+    return function submit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+    onClick: loading ? undefined : onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Panel, {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+          children: mode === "self" ? "Dejar de ser hijo de otro producto" : "Desvincular este hijo"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: mode === "self" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["\xAB", nombreHijo, "\xBB dejar\xE1 de colgar de \xAB", nombrePadre, "\xBB", parentUpc ? " (UPC ".concat(parentUpc, ")") : "", "."]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["\xAB", nombreHijo, "\xBB", childUpc ? " (UPC ".concat(childUpc, ")") : "", " dejar\xE1 de colgar de este producto."]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Body, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: "No se borra nada."
+            }), " Todo lo que hered\xF3 \u2014atributos, descripciones, im\xE1genes y cadenas\u2014 se queda como informaci\xF3n propia del producto."]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: "Desaparecen las marcas de \xABHeredado\xBB y \xABPropio\xBB: sin padre dejan de querer decir algo."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            children: ["Deja de recibir la propagaci\xF3n", mode === "self" ? " de su padre" : " de este producto", ": lo que se edite de un lado ya no baja al otro."]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: "aviso",
+            children: "Volver a ligarlos es a mano, y hay que elegir otra vez qu\xE9 hereda. Desvincular no se deshace solo."
+          })]
+        })
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+        children: error
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "secondary",
+          onClick: onClose,
+          disabled: loading,
+          children: "Cancelar"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "primary",
+          onClick: submit,
+          disabled: loading,
+          children: loading ? "Desvinculando…" : "Desvincular"
+        })]
+      })]
+    })
+  });
+};
+
+exports.UnlinkVariantModal = UnlinkVariantModal;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = exports.Overlay = exports.Message = exports.Header = exports.Footer = exports.Body = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var PINK = "#E13AA8";
+
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(40, 31, 51, 0.4);\n"])));
+
+exports.Overlay = Overlay;
+
+var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: min(460px, 92vw);\n  border-radius: 10px;\n  background-color: ", ";\n  font-family: ", ";\n  overflow: hidden;\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway);
+
+exports.Panel = Panel;
+
+var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 18px 22px 10px;\n\n  h2 {\n    margin: 0;\n    font-family: ", ";\n    font-size: 16px;\n    color: ", ";\n  }\n\n  p {\n    margin: 6px 0 0;\n    font-size: 13px;\n    line-height: 1.4;\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.Header = Header;
+
+var Body = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 22px 8px;\n\n  ul {\n    margin: 0;\n    padding-left: 18px;\n  }\n\n  li {\n    margin-bottom: 6px;\n    font-size: 13px;\n    line-height: 1.4;\n    color: ", ";\n  }\n\n  /* Lo \xFAnico que no se puede deshacer solo va marcado: el resto son\n     consecuencias, esta es una advertencia. */\n  li.aviso {\n    color: ", ";\n  }\n"])), _variables.GlobalColors.deep_gray, PINK);
+
+exports.Body = Body;
+
+var Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 8px 22px 0;\n  padding: 10px 12px;\n  border-radius: 6px;\n  background-color: rgba(225, 58, 168, 0.1);\n  font-size: 13px;\n  line-height: 1.4;\n  color: ", ";\n"])), PINK);
+
+exports.Message = Message;
+
+var Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: 16px 22px 20px;\n\n  button {\n    height: 38px;\n    padding: 0 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 13px;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  .secondary {\n    border: 1px solid ", ";\n    background: none;\n    color: ", ";\n  }\n\n  .primary {\n    border: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
+
+exports.Footer = Footer;