contentoh-components-library 21.6.46 → 21.6.49

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PropagateChangesModal = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
 var _react = require("react");
@@ -49,6 +49,10 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
       changedAttributes = _ref$changedAttribute === void 0 ? [] : _ref$changedAttribute,
       _ref$variants = _ref.variants,
       variants = _ref$variants === void 0 ? [] : _ref$variants,
+      _ref$groupMembers = _ref.groupMembers,
+      groupMembers = _ref$groupMembers === void 0 ? [] : _ref$groupMembers,
+      _ref$groupCode = _ref.groupCode,
+      groupCode = _ref$groupCode === void 0 ? null : _ref$groupCode,
       onCancel = _ref.onCancel,
       onConfirm = _ref.onConfirm,
       _ref$saving = _ref.saving,
@@ -58,18 +62,57 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       chosenAttributes = _useState2[0],
       setChosenAttributes = _useState2[1];
+  /*
+    DOS DESTINOS INDEPENDIENTES, y esa independencia es el punto.
+       hijos      cuelgan de este producto y heredan de él. Hay jerarquía.
+      variantes  comparten un código de grupo. No hay jerarquía; son el mismo
+                 producto en otra presentación.
+     Elegir variantes NO debe alcanzar a los hijos ni al revés, así que cada uno
+    lleva su propio alcance y su propia selección. Un solo control con tres
+    opciones —hijos / variantes / ambos— no bastaría: el usuario también tiene
+    que poder decir "a estas dos variantes y a ese hijo".
+     Arrancan en "none" los dos: propagar sobrescribe, así que ningún destino se
+    da por elegido sin que alguien lo pida.
+  */
+
 
-  var _useState3 = (0, _react.useState)("all"),
+  var _useState3 = (0, _react.useState)("none"),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      scope = _useState4[0],
-      setScope = _useState4[1];
+      scopeChildren = _useState4[0],
+      setScopeChildren = _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 _useState7 = (0, _react.useState)("none"),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      scopeVariants = _useState8[0],
+      setScopeVariants = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      chosenVariants = _useState10[0],
+      setChosenVariants = _useState10[1];
+
+  var seleccion = function seleccion(scope, todos, elegidos) {
+    if (scope === "none") return [];
+    if (scope === "all") return todos;
+    return todos.filter(function (item) {
+      return elegidos.includes(item.articleId);
+    });
+  };
+
+  var hijosDestino = seleccion(scopeChildren, variants, chosenChildren);
+  var variantesDestino = seleccion(scopeVariants, groupMembers, chosenVariants); // Un producto puede ser hijo Y estar en el grupo: se cuenta una sola vez.
+
+  var idsDestino = new Set([].concat((0, _toConsumableArray2.default)(hijosDestino.map(function (x) {
+    return x.articleId;
+  })), (0, _toConsumableArray2.default)(variantesDestino.map(function (x) {
+    return x.articleId;
+  }))));
+  var destinatarios = idsDestino.size;
   var puedePropagar = chosenAttributes.length > 0 && destinatarios > 0;
   var enSegundoPlano = destinatarios > UMBRAL_SEGUNDO_PLANO;
   /*
@@ -83,8 +126,10 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
     salida que el aviso debería estar ofreciendo.
   */
 
-  var destinos = scope === "all" ? variants : variants.filter(function (item) {
-    return chosenChildren.includes(item.articleId);
+  var destinos = [].concat((0, _toConsumableArray2.default)(hijosDestino), (0, _toConsumableArray2.default)(variantesDestino)).filter(function (item, i, lista) {
+    return lista.findIndex(function (x) {
+      return x.articleId === item.articleId;
+    }) === i;
   });
   var conValorPropio = destinos.map(function (hijo) {
     var _hijo$overriddenAttri;
@@ -106,18 +151,32 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
     });
   };
 
-  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 toggleEn = function toggleEn(setter) {
+    return function (id) {
+      setter(function (current) {
+        return current.includes(id) ? current.filter(function (item) {
+          return item !== id;
+        }) : [].concat((0, _toConsumableArray2.default)(current), [id]);
+      });
+    };
   };
 
+  var toggleChild = toggleEn(setChosenChildren);
+  var toggleVariant = toggleEn(setChosenVariants);
+
   var confirmar = function confirmar() {
+    // Se manda "none" explícito y no una lista vacía para que el servidor no
+    // tenga que adivinar si "sin ids" quiere decir "a ninguno" o "no me lo
+    // preguntaron". Cada destino viaja por su cuenta.
+    var comoLista = function comoLista(scope, elegidos) {
+      if (scope === "none") return "none";
+      return scope === "all" ? "all" : elegidos;
+    };
+
     onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
       attributes: chosenAttributes,
-      targetChildren: scope === "all" ? "all" : chosenChildren
+      targetChildren: comoLista(scopeChildren, chosenChildren),
+      targetVariants: comoLista(scopeVariants, chosenVariants)
     });
   };
 
@@ -128,13 +187,13 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h2", {
-          children: ["Este producto tiene ", variants.length, " hijo", variants.length === 1 ? "" : "s"]
+          children: [[variants.length ? "".concat(variants.length, " hijo").concat(variants.length === 1 ? "" : "s") : null, groupMembers.length ? "".concat(groupMembers.length, " variante").concat(groupMembers.length === 1 ? "" : "s") : null].filter(Boolean).join(" y "), " pueden recibir este cambio"]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-          children: ["Cambiaste ", changedAttributes.length, " atributo", changedAttributes.length === 1 ? "" : "s", ". Elige cu\xE1les bajan a los hijos; el resto se guarda solo en este producto."]
+          children: ["Cambiaste ", changedAttributes.length, " atributo", changedAttributes.length === 1 ? "" : "s", ". Elige cu\xE1les se copian y a qui\xE9nes; 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 los hijos?"
+          children: "\xBFQu\xE9 se copia?"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
           children: changedAttributes.map(function (attribute) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
@@ -155,54 +214,122 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
               })
             }, 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 todos", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-                className: "hint",
-                children: [variants.length, " hijo", variants.length === 1 ? "" : "s", " activo", variants.length === 1 ? "" : "s", "."]
+        }), variants.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+            children: ["\xBFA cu\xE1les de los ", variants.length, " hijo", variants.length === 1 ? "" : "s", "?"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                name: "scope-children",
+                checked: scopeChildren === "none",
+                onChange: function onChange() {
+                  return setScopeChildren("none");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "A ninguno"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                name: "scope-children",
+                checked: scopeChildren === "all",
+                onChange: function onChange() {
+                  return setScopeChildren("all");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "A todos"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                name: "scope-children",
+                checked: scopeChildren === "some",
+                onChange: function onChange() {
+                  return setScopeChildren("some");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Elegir cu\xE1les"
               })]
             })]
-          }), /*#__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"
-            })]
+          }), scopeChildren === "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);
+            })
           })]
-        }), 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 || "—"]
+        }), groupMembers.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+            children: ["\xBFA cu\xE1les de las ", groupMembers.length, " variante", groupMembers.length === 1 ? "" : "s", groupCode ? " del grupo ".concat(groupCode) : "", "?"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Choices, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                name: "scope-variants",
+                checked: scopeVariants === "none",
+                onChange: function onChange() {
+                  return setScopeVariants("none");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "A ninguna"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                name: "scope-variants",
+                checked: scopeVariants === "all",
+                onChange: function onChange() {
+                  return setScopeVariants("all");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "A todas"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                name: "scope-variants",
+                checked: scopeVariants === "some",
+                onChange: function onChange() {
+                  return setScopeVariants("some");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Elegir cu\xE1les"
+              })]
+            })]
+          }), scopeVariants === "some" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+            children: groupMembers.map(function (miembro) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "checkbox",
+                    checked: chosenVariants.includes(miembro.articleId),
+                    onChange: function onChange() {
+                      return toggleVariant(miembro.articleId);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: [miembro.name, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "meta",
+                      children: ["UPC ", miembro.upc || "—"]
+                    })]
                   })]
-                })]
-              })
-            }, variant.articleId);
-          })
+                })
+              }, miembro.articleId);
+            })
+          })]
         }), 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) {
@@ -215,7 +342,7 @@ var PropagateChangesModal = function PropagateChangesModal(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: "resumen",
-          children: puedePropagar ? "".concat(chosenAttributes.length, " atributo(s) a ").concat(destinatarios, " hijo(s).") : "No se bajará nada a los hijos."
+          children: puedePropagar ? "".concat(chosenAttributes.length, " atributo(s) a ").concat(destinatarios, " producto(s).") : "No se copiará nada: elige al menos un atributo y un destino."
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
           type: "button",
           className: "secondary",