contentoh-components-library 21.6.27 → 21.6.28

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);
     };
   }();