contentoh-components-library 21.6.26 → 21.6.28

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

@@ -11,7 +11,7 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 
-var _objectSpread6 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _objectSpread7 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 
@@ -508,9 +508,19 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
   }();
 
   var toggleChoice = function toggleChoice(dimension, id) {
+    // Marcar un elemento ES elegir cuáles, así que el radio se pone solo. Antes
+    // se podían marcar atributos con los dos radios en blanco: la pantalla decía
+    // una cosa y el estado era otra.
+    //
+    // Se hace así y no dejando "elegir cuáles" marcado de entrada porque eso
+    // daría las cuatro dimensiones por decididas desde el principio y habilitaría
+    // Ligar sin que nadie hubiera revisado nada.
+    setModes(function (current) {
+      return current[dimension] === null ? (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, "some")) : current;
+    });
     setChosen(function (current) {
       var lista = current[dimension];
-      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
+      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, lista.includes(id) ? lista.filter(function (item) {
         return item !== id;
       }) : [].concat((0, _toConsumableArray2.default)(lista), [id])));
     });
@@ -518,10 +528,10 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
 
   var chooseMode = function chooseMode(dimension, modo, ids) {
     setModes(function (current) {
-      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo));
+      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo));
     });
     setChosen(function (current) {
-      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo === "all" ? ids : []));
+      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, dimension, modo === "all" ? ids : []));
     });
   };
 
@@ -550,7 +560,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               lista = (_readPayload$data = (_readPayload = (0, _api.readPayload)(res)) === null || _readPayload === void 0 ? void 0 : _readPayload.data) !== null && _readPayload$data !== void 0 ? _readPayload$data : [];
               setFilters(function (current) {
                 if (!retailer) {
-                  return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+                  return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
                     retailers: lista.map(function (item) {
                       return {
                         value: item.id,
@@ -561,7 +571,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 }
 
                 if (!department) {
-                  return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+                  return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
                     departments: lista.map(function (item) {
                       return {
                         value: item.category,
@@ -576,7 +586,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 // el alta de productos, incluido el separador legible.
 
 
-                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+                return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
                   categories: lista.map(function (item) {
                     var _item$subcategory;
 
@@ -619,6 +629,25 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       loadFilters(null, null);
     }
   }, [step, filters.retailers.length, loadFilters]);
+  /*
+    Quita una cadena agregada a mano. Solo esas: las del padre se desmarcan con
+    su casilla, pero siguen existiendo y volverán a aparecer.
+  */
+
+  var removeExtraRetailer = function removeExtraRetailer(clave) {
+    setExtraRetailers(function (current) {
+      return current.filter(function (item) {
+        return item.clave !== clave;
+      });
+    });
+    setChosen(function (current) {
+      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
+        categoryRetailers: current.categoryRetailers.filter(function (item) {
+          return item !== clave;
+        })
+      });
+    });
+  };
 
   var addRetailer = function addRetailer() {
     var retailerId = Number(newRetailer);
@@ -649,7 +678,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       }]);
     });
     setChosen(function (current) {
-      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, {
+      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, {
         categoryRetailers: [].concat((0, _toConsumableArray2.default)(current.categoryRetailers), [clave])
       });
     });
@@ -727,7 +756,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
     var _perChild$id, _guardado$extraRetail;
 
     setPerChild(function (current) {
-      return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, current), {}, (0, _defineProperty2.default)({}, activeChild, {
+      return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, current), {}, (0, _defineProperty2.default)({}, activeChild, {
         modes: modes,
         chosen: chosen,
         extraRetailers: extraRetailers
@@ -771,7 +800,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                 articleId: articleId,
                 parentArticleId: selected[0],
                 inherit: inherit
-              } : (0, _objectSpread6.default)({
+              } : (0, _objectSpread7.default)({
                 mode: mode,
                 parentArticleId: articleId,
                 childrenArticleIds: selected,
@@ -788,7 +817,7 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               // El modo importa para quien escucha: en `children` este producto GANA
               // variantes; en `parent` pasa a SER una. Son efectos opuestos sobre la
               // misma ficha, así que quien refresque el estado necesita distinguirlos.
-              onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread6.default)((0, _objectSpread6.default)({}, data), {}, {
+              onLinked === null || onLinked === void 0 ? void 0 : onLinked((0, _objectSpread7.default)((0, _objectSpread7.default)({}, data), {}, {
                 mode: mode,
                 parentArticleId: mode === "parent" ? selected[0] : articleId
               }));
@@ -1041,17 +1070,17 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
               children: [].concat((0, _toConsumableArray2.default)(offered.categoryRetailers.map(function (item) {
-                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, item), {}, {
+                return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, item), {}, {
                   clave: "".concat(item.retailerId, "-").concat(item.categoryId),
                   delPadre: true
                 });
               })), (0, _toConsumableArray2.default)(extraRetailers.map(function (item) {
-                return (0, _objectSpread6.default)((0, _objectSpread6.default)({}, item), {}, {
+                return (0, _objectSpread7.default)((0, _objectSpread7.default)({}, item), {}, {
                   delPadre: false
                 });
               }))).map(function (item) {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
                     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
                       type: "checkbox",
                       disabled: modes.categoryRetailers === "all",
@@ -1069,7 +1098,16 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
                         children: [item.categoryName || "Sin categoría", !item.delPadre && " · no la tiene el padre"]
                       })]
                     })]
-                  })
+                  }), !item.delPadre && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                    type: "button",
+                    className: "quitar",
+                    title: "Quitar esta cadena",
+                    "aria-label": "Quitar ".concat(item.retailerName),
+                    onClick: function onClick() {
+                      return removeExtraRetailer(item.clave);
+                    },
+                    children: "\xD7"
+                  })]
                 }, item.clave);
               })
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.AddRetailer, {
@@ -1323,7 +1361,11 @@ var LinkVariantsModal = function LinkVariantsModal(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "summary",
-          children: step === "search" ? selectionLabel : todoDecidido ? "Todo revisado. Puedes ligar." : !applyToAll && mode === "children" ? "Faltan ".concat(selected.filter(function (id) {
+          children: step === "search" ? selectionLabel : todoDecidido ? "Todo revisado. Puedes ligar." :
+          /* Contar productos solo tiene sentido cuando hay varios y cada
+             uno lleva su propia selección. Con uno, lo útil es decir qué
+             falta, no repetir que falta "1 producto". */
+          !applyToAll && mode === "children" && selected.length > 1 ? "Faltan ".concat(selected.filter(function (id) {
             return !decididoPara(id);
           }).length, " producto(s) por revisar.") : "Falta decidir: ".concat(faltantes.join(", "), ".")
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

@@ -51,7 +51,7 @@ var SearchRow = _styledComponents.default.form(_templateObject6 || (_templateObj
 
 exports.SearchRow = SearchRow;
 
-var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0 0 16px;\n  padding: 0;\n  border: 1px solid ", ";\n  border-radius: 6px;\n\n  li + li {\n    border-top: 1px solid ", ";\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    cursor: pointer;\n    font-size: 13px;\n    color: ", ";\n  }\n\n  .meta {\n    display: block;\n    font-size: 12px;\n    color: ", ";\n  }\n\n  .logo {\n    width: 24px;\n    height: 24px;\n    object-fit: contain;\n    border-radius: 3px;\n    flex-shrink: 0;\n  }\n\n  .count {\n    margin-left: auto;\n    font-size: 12px;\n    color: ", ";\n    white-space: nowrap;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, PINK);
+var List = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0 0 16px;\n  padding: 0;\n  border: 1px solid ", ";\n  border-radius: 6px;\n\n  li + li {\n    border-top: 1px solid ", ";\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    cursor: pointer;\n    font-size: 13px;\n    color: ", ";\n  }\n\n  .meta {\n    display: block;\n    font-size: 12px;\n    color: ", ";\n  }\n\n  .logo {\n    width: 24px;\n    height: 24px;\n    object-fit: contain;\n    border-radius: 3px;\n    flex-shrink: 0;\n  }\n\n  li {\n    display: flex;\n    align-items: center;\n  }\n\n  li > label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .quitar {\n    flex-shrink: 0;\n    margin-right: 10px;\n    border: none;\n    background: none;\n    padding: 2px 6px;\n    cursor: pointer;\n    font-size: 16px;\n    line-height: 1;\n    color: ", ";\n  }\n\n  .quitar:hover {\n    color: ", ";\n  }\n\n  .count {\n    margin-left: auto;\n    font-size: 12px;\n    color: ", ";\n    white-space: nowrap;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray, PINK, PINK);
 
 exports.List = List;
 var AttributeList = (0, _styledComponents.default)(List)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 220px;\n  overflow-y: auto;\n\n  .note {\n    display: block;\n    font-size: 11px;\n    font-style: italic;\n    color: ", ";\n  }\n\n  .value {\n    margin-left: auto;\n    max-width: 45%;\n    font-size: 12px;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), _variables.GlobalColors.gray, _variables.GlobalColors.gray);

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

@@ -0,0 +1,213 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PropagateChangesModal = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Diálogo de propagación al guardar un producto padre.
+
+  Aparece cuando se guardan cambios de ficha técnica en un producto que tiene
+  variantes. El backend NO propaga nada por su cuenta: solo baja a los hijos lo
+  que venga en `propagation`, y esa lista la arma esta pantalla. Guardar sin
+  abrirla, o cerrarla sin propagar, deja al padre modificado y a las variantes
+  como estaban.
+
+  props (* requerido):
+    - *changedAttributes: [{ id, name, value }] lo que se acaba de editar
+    - *variants: [{ articleId, name, upc }] las variantes activas del padre
+    - *onCancel: cerrar sin guardar nada
+    - *onConfirm: (propagation | null) => void
+        null            → guardar solo el padre
+        { attributes, targetChildren } → guardar y propagar
+    - saving: deshabilita los botones mientras el guardado corre
+*/
+// Por encima de este número el backend delega la propagación a una invocación
+// en segundo plano. Se avisa aquí porque cambia lo que el usuario debe esperar:
+// el guardado responde antes de que los hijos estén actualizados.
+var UMBRAL_SEGUNDO_PLANO = 20;
+
+var PropagateChangesModal = function PropagateChangesModal(_ref) {
+  var _ref$changedAttribute = _ref.changedAttributes,
+      changedAttributes = _ref$changedAttribute === void 0 ? [] : _ref$changedAttribute,
+      _ref$variants = _ref.variants,
+      variants = _ref$variants === void 0 ? [] : _ref$variants,
+      onCancel = _ref.onCancel,
+      onConfirm = _ref.onConfirm,
+      _ref$saving = _ref.saving,
+      saving = _ref$saving === void 0 ? false : _ref$saving;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      chosenAttributes = _useState2[0],
+      setChosenAttributes = _useState2[1];
+
+  var _useState3 = (0, _react.useState)("all"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      scope = _useState4[0],
+      setScope = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      chosenChildren = _useState6[0],
+      setChosenChildren = _useState6[1];
+
+  var destinatarios = scope === "all" ? variants.length : chosenChildren.length;
+  var puedePropagar = chosenAttributes.length > 0 && destinatarios > 0;
+  var enSegundoPlano = destinatarios > UMBRAL_SEGUNDO_PLANO;
+
+  var toggleAttribute = function toggleAttribute(id) {
+    setChosenAttributes(function (current) {
+      return current.includes(id) ? current.filter(function (item) {
+        return item !== id;
+      }) : [].concat((0, _toConsumableArray2.default)(current), [id]);
+    });
+  };
+
+  var toggleChild = function toggleChild(id) {
+    setChosenChildren(function (current) {
+      return current.includes(id) ? current.filter(function (item) {
+        return item !== id;
+      }) : [].concat((0, _toConsumableArray2.default)(current), [id]);
+    });
+  };
+
+  var confirmar = function confirmar() {
+    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
+      attributes: chosenAttributes,
+      targetChildren: scope === "all" ? "all" : chosenChildren
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+    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.jsxs)("h2", {
+          children: ["Este producto tiene ", variants.length, " variante", variants.length === 1 ? "" : "s"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: ["Cambiaste ", changedAttributes.length, " atributo", changedAttributes.length === 1 ? "" : "s", ". Elige cu\xE1les bajan a las variantes; el resto se guarda solo en este producto."]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Body, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          children: "\xBFQu\xE9 se baja a las variantes?"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+          children: changedAttributes.map(function (attribute) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "checkbox",
+                  checked: chosenAttributes.includes(attribute.id),
+                  onChange: function onChange() {
+                    return toggleAttribute(attribute.id);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  children: attribute.name
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "valor",
+                  title: attribute.value,
+                  children: attribute.value
+                })]
+              })
+            }, attribute.id);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          children: "\xBFA cu\xE1les?"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "radio",
+              name: "propagation-scope",
+              checked: scope === "all",
+              onChange: function onChange() {
+                return setScope("all");
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+              children: ["A todas", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                className: "hint",
+                children: [variants.length, " variante", variants.length === 1 ? "" : "s", " activa", variants.length === 1 ? "" : "s", "."]
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "radio",
+              name: "propagation-scope",
+              checked: scope === "some",
+              onChange: function onChange() {
+                return setScope("some");
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: "Elegir cu\xE1les"
+            })]
+          })]
+        }), scope === "some" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+          children: variants.map(function (variant) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "checkbox",
+                  checked: chosenChildren.includes(variant.articleId),
+                  onChange: function onChange() {
+                    return toggleChild(variant.articleId);
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  children: [variant.name, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "meta",
+                    children: ["UPC ", variant.upc || "—"]
+                  })]
+                })]
+              })
+            }, variant.articleId);
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Note, {
+          children: "Una variante 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 esa variante."
+        }), enSegundoPlano && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Note, {
+          className: "accent",
+          children: ["Son m\xE1s de ", UMBRAL_SEGUNDO_PLANO, " variantes, as\xED que la propagaci\xF3n corre en segundo plano: el guardado termina antes de que todas est\xE9n actualizadas."]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "resumen",
+          children: puedePropagar ? "".concat(chosenAttributes.length, " atributo(s) a ").concat(destinatarios, " variante(s).") : "No se bajará nada a las variantes."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "secondary",
+          onClick: onCancel,
+          disabled: saving,
+          children: "Cancelar"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "secondary",
+          onClick: function onClick() {
+            return onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(null);
+          },
+          disabled: saving,
+          children: "Solo este producto"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "primary",
+          onClick: confirmar,
+          disabled: saving || !puedePropagar,
+          children: saving ? "Guardando…" : "Guardar y propagar"
+        })]
+      })]
+    })
+  });
+};
+
+exports.PropagateChangesModal = PropagateChangesModal;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = exports.Overlay = exports.Note = exports.List = exports.Header = exports.Footer = exports.Choices = exports.Body = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+require("../../../global-files/global-styles.css");
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+var PINK = "#E13AA8";
+var PINK_RGB = "225, 58, 168";
+
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  inset: 0;\n  z-index: 110;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(40, 31, 51, 0.45);\n"])));
+
+exports.Overlay = Overlay;
+
+var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: min(560px, 92vw);\n  max-height: 86vh;\n  border-radius: 10px;\n  background-color: ", ";\n  font-family: ", ";\n  overflow: hidden;\n\n  input[type=\"checkbox\"],\n  input[type=\"radio\"] {\n    accent-color: ", ";\n    width: 15px;\n    height: 15px;\n    cursor: pointer;\n  }\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway, PINK);
+
+exports.Panel = Panel;
+
+var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 20px 24px 8px;\n\n  h2 {\n    margin: 0;\n    font-family: ", ";\n    font-size: 17px;\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_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.Header = Header;
+
+var Body = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px 24px 0;\n\n  h3 {\n    margin: 0 0 8px;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray);
+
+exports.Body = Body;
+
+var List = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  list-style: none;\n  margin: 0 0 18px;\n  padding: 0;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  max-height: 190px;\n  overflow-y: auto;\n\n  li + li {\n    border-top: 1px solid ", ";\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 9px 12px;\n    cursor: pointer;\n    font-size: 13px;\n    color: ", ";\n  }\n\n  .valor {\n    margin-left: auto;\n    max-width: 45%;\n    font-size: 12px;\n    color: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .meta {\n    display: block;\n    font-size: 12px;\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
+
+exports.List = List;
+
+var Choices = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-bottom: 10px;\n\n  label {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 13px;\n    color: ", ";\n    cursor: pointer;\n  }\n\n  .hint {\n    display: block;\n    font-size: 12px;\n    color: ", ";\n  }\n"])), _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.Choices = Choices;
+
+var Note = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 16px;\n  padding: 10px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  line-height: 1.45;\n  background-color: ", ";\n  color: ", ";\n\n  &.accent {\n    background-color: rgba(", ", 0.1);\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK);
+
+exports.Note = Note;
+
+var Footer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 16px 24px;\n  border-top: 1px solid ", ";\n\n  .resumen {\n    flex: 1;\n    font-size: 12px;\n    color: ", ";\n  }\n\n  button {\n    height: 38px;\n    padding: 0 16px;\n    border-radius: 6px;\n    font-family: ", ";\n    font-size: 13px;\n    cursor: pointer;\n  }\n\n  button.secondary {\n    border: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button.primary {\n    border: none;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.GlobalColors.gray, PINK, _variables.GlobalColors.white);
+
+exports.Footer = Footer;

package/dist/components/pages/ProviderProductEdition/context/provider-product-edition.context.js

@@ -184,9 +184,16 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
       return _ref2.apply(this, arguments);
     };
   }();
+  /*
+    `propagation` es opcional y solo lo manda la ficha de un producto padre, con
+    lo que el usuario eligió en el diálogo: { attributes: [...], targetChildren }.
+     Sin ese bloque el backend no propaga nada. Es deliberado: bajar un cambio a
+    las variantes tiene que ser una decisión, no un efecto secundario de guardar.
+  */
+
 
   var saveDatasheets = /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(token) {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(token, propagation) {
       var _state$product4, _state$product5;
 
       var dataObject, _state$product6, res, _state$services$datas, _state$services, _state$services$datas2, _state$services$datas3, _state$product7, esVariante;
@@ -207,10 +214,12 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
                 type: "SET_SAVING",
                 payload: true
               });
-              dataObject = {
+              dataObject = (0, _objectSpread2.default)({
                 articleId: (_state$product4 = state.product) === null || _state$product4 === void 0 ? void 0 : _state$product4.id_article,
                 articleData: state.updated_datasheets_inputs
-              }; // Marcar todos los items como aprobados
+              }, propagation ? {
+                propagation: propagation
+              } : {}); // Marcar todos los items como aprobados
 
               dataObject.articleData = dataObject.articleData.map(function (item) {
                 return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
@@ -292,7 +301,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
       }, _callee2, null, [[6, 13, 17, 20]]);
     }));
 
-    return function saveDatasheets(_x2) {
+    return function saveDatasheets(_x2, _x3) {
       return _ref3.apply(this, arguments);
     };
   }();
@@ -458,7 +467,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
       }, _callee3, null, [[10, 20, 25, 28]]);
     }));
 
-    return function updateImages(_x3) {
+    return function updateImages(_x4) {
       return _ref4.apply(this, arguments);
     };
   }();
@@ -570,7 +579,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
       }, _callee4, null, [[4, 10]]);
     }));
 
-    return function deleteImages(_x4) {
+    return function deleteImages(_x5) {
       return _ref5.apply(this, arguments);
     };
   }();
@@ -607,7 +616,7 @@ var ProviderProductEditionProvider = function ProviderProductEditionProvider(_re
       }, _callee5);
     }));
 
-    return function createComment(_x5, _x6) {
+    return function createComment(_x6, _x7) {
       return _ref6.apply(this, arguments);
     };
   }();