contentoh-components-library 21.6.28 → 21.6.30

package/dist/components/pages/ProviderProductEdition/index.js

@@ -90,7 +90,7 @@ var _AiProductEdition = require("../../../contexts/AiProductEdition");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
-  var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _family$variants, _state$product15, _state$product16, _state$product17, _state$active_retaile4, _location$state5, _location$state6, _state$active_retaile5, _state$active_retaile6, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile7, _state$product18, _state$product19, _state$product20, _state$product21, _family$variants2, _family$variants3, _state$active_percent, _state$active_percent2, _state$active_retaile8, _state$active_retaile9, _state$active_retaile10, _state$product22, _state$descriptions_i, _state$product23, _state$product24, _state$datasheets_inp, _state$datasheets_inp2, _state$datasheets_inp3, _state$product25, _state$images_values12;
+  var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _family$variants2, _state$product15, _state$product16, _state$product17, _state$active_retaile4, _location$state5, _location$state6, _state$active_retaile5, _state$active_retaile6, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile7, _state$product18, _state$product19, _state$product20, _state$product21, _family$variants3, _family$variants4, _family$variants5, _state$active_percent, _state$active_percent2, _state$active_retaile8, _state$active_retaile9, _state$active_retaile10, _state$product22, _state$descriptions_i, _state$product23, _state$product24, _state$datasheets_inp, _state$datasheets_inp2, _state$datasheets_inp3, _state$product25, _state$images_values12;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -162,37 +162,42 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var _useState17 = (0, _react.useState)(false),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      showRejectModal = _useState18[0],
-      setShowRejectModal = _useState18[1];
+      preparandoEdicionMultiple = _useState18[0],
+      setPreparandoEdicionMultiple = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(0),
+  var _useState19 = (0, _react.useState)(false),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      headerTop = _useState20[0],
-      setHeaderTop = _useState20[1];
+      showRejectModal = _useState20[0],
+      setShowRejectModal = _useState20[1];
 
-  var _useState21 = (0, _react.useState)({}),
+  var _useState21 = (0, _react.useState)(0),
       _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      assig = _useState22[0],
-      setAssig = _useState22[1];
+      headerTop = _useState22[0],
+      setHeaderTop = _useState22[1];
 
-  var _useState23 = (0, _react.useState)(false),
+  var _useState23 = (0, _react.useState)({}),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      imageLayout = _useState24[0],
-      setImageLayout = _useState24[1];
+      assig = _useState24[0],
+      setAssig = _useState24[1];
 
   var _useState25 = (0, _react.useState)(false),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      rejectAll = _useState26[0],
-      setRejectAll = _useState26[1];
+      imageLayout = _useState26[0],
+      setImageLayout = _useState26[1];
 
-  var _useState27 = (0, _react.useState)({
+  var _useState27 = (0, _react.useState)(false),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      rejectAll = _useState28[0],
+      setRejectAll = _useState28[1];
+
+  var _useState29 = (0, _react.useState)({
     "Ficha técnica": null,
     Descripción: null,
     Imágenes: null
   }),
-      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      origin = _useState28[0],
-      setOrigin = _useState28[1];
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      origin = _useState30[0],
+      setOrigin = _useState30[1];
 
   var _useCloseModal = (0, _customHooks.useCloseModal)("version-selector"),
       _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
@@ -975,18 +980,126 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
     raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
   */
 
+  /*
+    Abre la edición múltiple con las variantes de la familia ya cargadas.
+     Esa pantalla lee `multipleEditionList` de sessionStorage —así la deja el
+    listado al pulsar "editar varios"— y necesita el PRODUCTO COMPLETO de cada
+    uno, no solo su id: pinta el UPC, el nombre, parte `categoryName` por "|",
+    cuenta `retailersAvailable` y decide columnas según `id_order`. Con un objeto
+    reducido revienta al entrar.
+     Por eso se piden a /new-articles, que devuelve justo la forma del listado, y
+    se filtran por id y no por UPC: hay 12,024 UPC repetidos entre artículos
+    activos y el UPC no identifica un producto.
+     Va SIN el producto padre a propósito, aunque el botón viva en su ficha. En la
+    edición múltiple no existe el diálogo de propagación, así que incluirlo
+    abriría un camino para cambiar el padre sin decidir si eso baja a los hijos
+    —justo la decisión que su propia ficha obliga a tomar—.
+  */
 
-  var openVariant = /*#__PURE__*/function () {
-    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(articleId) {
-      var res, _readPayload, data, encontrado;
+
+  var openMultipleEdition = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var _family$variants;
+
+      var ids, res, _readPayload, data, productos;
 
       return _regenerator.default.wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
+            case 0:
+              ids = ((_family$variants = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants !== void 0 ? _family$variants : []).map(function (variant) {
+                return variant.articleId;
+              });
+
+              if (ids.length) {
+                _context4.next = 3;
+                break;
+              }
+
+              return _context4.abrupt("return");
+
+            case 3:
+              setPreparandoEdicionMultiple(true);
+              _context4.prev = 4;
+              _context4.next = 7;
+              return _axios.default.get("".concat(process.env.REACT_APP_NEW_ARTICLES_ENDPOINT), {
+                params: {
+                  listType: "general",
+                  filterByArticleId: ids.join(",")
+                },
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 7:
+              res = _context4.sent;
+              _readPayload = (0, _api.readPayload)(res), data = _readPayload.data;
+              productos = (data !== null && data !== void 0 ? data : []).filter(function (item) {
+                return ids.includes(Number(item.id_article));
+              });
+
+              if (productos.length) {
+                _context4.next = 13;
+                break;
+              }
+
+              console.error("openMultipleEdition: sin productos que abrir");
+              return _context4.abrupt("return");
+
+            case 13:
+              sessionStorage.setItem("multipleEditionList", JSON.stringify(productos.sort(function (a, b) {
+                return a.id_article - b.id_article;
+              })));
+              window.location.assign("/products/multipleEdition");
+              _context4.next = 21;
+              break;
+
+            case 17:
+              _context4.prev = 17;
+              _context4.t0 = _context4["catch"](4);
+              // Se avisa y se queda donde está: navegar con la lista vieja abriría otros
+              // productos, y navegar sin lista deja la pantalla rota.
+              console.error("openMultipleEdition: ", _context4.t0);
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "",
+                  message: "No se pudieron cargar las variantes para editarlas juntas.",
+                  image: _errorModal.default
+                }
+              });
+
+            case 21:
+              _context4.prev = 21;
+              setPreparandoEdicionMultiple(false);
+              return _context4.finish(21);
+
+            case 24:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[4, 17, 21, 24]]);
+    }));
+
+    return function openMultipleEdition() {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+
+  var openVariant = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(articleId) {
+      var res, _readPayload2, data, encontrado;
+
+      return _regenerator.default.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
             case 0:
               setLoadingVariant(articleId);
-              _context4.prev = 1;
-              _context4.next = 4;
+              _context5.prev = 1;
+              _context5.next = 4;
               return _axios.default.get("".concat(process.env.REACT_APP_NEW_ARTICLES_ENDPOINT), {
                 params: {
                   listType: "general",
@@ -998,9 +1111,9 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 4:
-              res = _context4.sent;
+              res = _context5.sent;
               // read-articles-v2 responde { count, data: [...] }.
-              _readPayload = (0, _api.readPayload)(res), data = _readPayload.data;
+              _readPayload2 = (0, _api.readPayload)(res), data = _readPayload2.data;
               encontrado = (data !== null && data !== void 0 ? data : []).find(function (item) {
                 return Number(item.id_article) === Number(articleId);
               });
@@ -1018,33 +1131,33 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }));
               }
 
-              _context4.next = 13;
+              _context5.next = 13;
               break;
 
             case 10:
-              _context4.prev = 10;
-              _context4.t0 = _context4["catch"](1);
+              _context5.prev = 10;
+              _context5.t0 = _context5["catch"](1);
               // Si la consulta falla se navega igual: la pantalla mostrará el producto
               // que hubiera en sessionStorage, que es el comportamiento de siempre.
               // Peor sería dejar el clic sin efecto y que pareciera que no responde.
-              console.error("openVariant: ", _context4.t0);
+              console.error("openVariant: ", _context5.t0);
 
             case 13:
-              _context4.prev = 13;
+              _context5.prev = 13;
               setLoadingVariant(null);
               window.location.assign("/products/".concat(articleId, "/datasheet"));
-              return _context4.finish(13);
+              return _context5.finish(13);
 
             case 17:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
         }
-      }, _callee4, null, [[1, 10, 13, 17]]);
+      }, _callee5, null, [[1, 10, 13, 17]]);
     }));
 
     return function openVariant(_x2) {
-      return _ref8.apply(this, arguments);
+      return _ref9.apply(this, arguments);
     };
   }();
   /*
@@ -1105,24 +1218,24 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
 
   var handleOnRestoreInheritance = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(attributeId) {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(attributeId) {
       var _state$product13;
 
       var res, data;
-      return _regenerator.default.wrap(function _callee5$(_context5) {
+      return _regenerator.default.wrap(function _callee6$(_context6) {
         while (1) {
-          switch (_context5.prev = _context5.next) {
+          switch (_context6.prev = _context6.next) {
             case 0:
               if (!(!attributeId || !((_state$product13 = state.product) !== null && _state$product13 !== void 0 && _state$product13.id_article))) {
-                _context5.next = 2;
+                _context6.next = 2;
                 break;
               }
 
-              return _context5.abrupt("return");
+              return _context6.abrupt("return");
 
             case 2:
-              _context5.prev = 2;
-              _context5.next = 5;
+              _context6.prev = 2;
+              _context6.next = 5;
               return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/restore"), {
                 articleId: state.product.id_article,
                 attributes: [Number(attributeId)]
@@ -1133,7 +1246,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 5:
-              res = _context5.sent;
+              res = _context6.sent;
               // El API responde 200 aunque la lambda haya devuelto 400: el resultado
               // real viaja en el cuerpo y readPayload lo convierte en excepción.
               data = (0, _api.readPayload)(res);
@@ -1147,24 +1260,24 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   };
                 })
               });
-              _context5.next = 13;
+              _context6.next = 13;
               break;
 
             case 10:
-              _context5.prev = 10;
-              _context5.t0 = _context5["catch"](2);
-              console.error("restoreInheritance: ", _context5.t0);
+              _context6.prev = 10;
+              _context6.t0 = _context6["catch"](2);
+              console.error("restoreInheritance: ", _context6.t0);
 
             case 13:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
         }
-      }, _callee5, null, [[2, 10]]);
+      }, _callee6, null, [[2, 10]]);
     }));
 
     return function handleOnRestoreInheritance(_x3) {
-      return _ref9.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
 
@@ -1199,14 +1312,14 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   };
 
   var sendEvaluation = /*#__PURE__*/function () {
-    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(result) {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(result) {
       var _state$product$id_ord, _state$active_retaile3, _state$product$status, _state$product$status2, _state$product14;
 
       var concept, articleId, orderId, retailerId, evalStatus, data, _newStatuses$newStatu, _state$services_data, res, newStatuses, serviceStatus, updatedStatusByRetailer, updatedProduct, updatedServicesData;
 
-      return _regenerator.default.wrap(function _callee6$(_context6) {
+      return _regenerator.default.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
               dispatch({
                 type: "SET_SAVING",
@@ -1223,16 +1336,16 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 concept: concept,
                 evalStatus: evalStatus
               };
-              _context6.prev = 7;
+              _context7.prev = 7;
 
               if (!result) {
-                _context6.next = 22;
+                _context7.next = 22;
                 break;
               }
 
               data.result = result;
               data.retailerId = retailerId;
-              _context6.next = 13;
+              _context7.next = 13;
               return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
                 headers: {
                   Authorization: token
@@ -1240,7 +1353,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 13:
-              res = _context6.sent;
+              res = _context7.sent;
               newStatuses = JSON.parse(res.data.body);
               serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")]; // Actualizar el producto con los nuevos estados
 
@@ -1277,13 +1390,13 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 22:
-              _context6.next = 28;
+              _context7.next = 28;
               break;
 
             case 24:
-              _context6.prev = 24;
-              _context6.t0 = _context6["catch"](7);
-              console.error("Error sending evaluation:", _context6.t0);
+              _context7.prev = 24;
+              _context7.t0 = _context7["catch"](7);
+              console.error("Error sending evaluation:", _context7.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -1295,32 +1408,32 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 28:
-              _context6.prev = 28;
+              _context7.prev = 28;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context6.finish(28);
+              return _context7.finish(28);
 
             case 31:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
         }
-      }, _callee6, null, [[7, 24, 28, 31]]);
+      }, _callee7, null, [[7, 24, 28, 31]]);
     }));
 
     return function sendEvaluation(_x4) {
-      return _ref10.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
 
   var evaluationToRetailer = /*#__PURE__*/function () {
-    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(result) {
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(result) {
       var data, statusComplete, updatedProduct;
-      return _regenerator.default.wrap(function _callee7$(_context7) {
+      return _regenerator.default.wrap(function _callee8$(_context8) {
         while (1) {
-          switch (_context7.prev = _context7.next) {
+          switch (_context8.prev = _context8.next) {
             case 0:
               dispatch({
                 type: "SET_SAVING",
@@ -1332,8 +1445,8 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 versionId: state.product.version,
                 status: result
               };
-              _context7.prev = 2;
-              _context7.next = 5;
+              _context8.prev = 2;
+              _context8.next = 5;
               return _axios.default.put("".concat(process.env.REACT_APP_RETAILER_REQUEST), data, {
                 headers: {
                   Authorization: token
@@ -1363,13 +1476,13 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context7.next = 15;
+              _context8.next = 15;
               break;
 
             case 11:
-              _context7.prev = 11;
-              _context7.t0 = _context7["catch"](2);
-              console.error("Error evaluating to retailer:", _context7.t0);
+              _context8.prev = 11;
+              _context8.t0 = _context8["catch"](2);
+              console.error("Error evaluating to retailer:", _context8.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -1381,23 +1494,23 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 15:
-              _context7.prev = 15;
+              _context8.prev = 15;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context7.finish(15);
+              return _context8.finish(15);
 
             case 18:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
         }
-      }, _callee7, null, [[2, 11, 15, 18]]);
+      }, _callee8, null, [[2, 11, 15, 18]]);
     }));
 
     return function evaluationToRetailer(_x5) {
-      return _ref11.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }();
 
@@ -1528,18 +1641,18 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
   };
 
   var handleOnEvaluateAll = /*#__PURE__*/function () {
-    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(result) {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(result) {
       var _state$product$id_ord2, _state$services_data2, evaluationArray, conceptArray, dataGeneral, isProvider, userType, status, updatedStatusByRetailer, updatedProduct;
 
-      return _regenerator.default.wrap(function _callee8$(_context8) {
+      return _regenerator.default.wrap(function _callee9$(_context9) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context9.prev = _context9.next) {
             case 0:
               dispatch({
                 type: "SET_SAVING",
                 payload: true
               });
-              _context8.prev = 1;
+              _context9.prev = 1;
               evaluationArray = [];
               conceptArray = ["description", "datasheet", "images"];
               dataGeneral = {
@@ -1570,7 +1683,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }));
               }); // Ejecutar todas las evaluaciones
 
-              _context8.next = 9;
+              _context9.next = 9;
               return Promise.all(evaluationArray);
 
             case 9:
@@ -1615,13 +1728,13 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context8.next = 24;
+              _context9.next = 24;
               break;
 
             case 20:
-              _context8.prev = 20;
-              _context8.t0 = _context8["catch"](1);
-              console.error("Error evaluating all:", _context8.t0);
+              _context9.prev = 20;
+              _context9.t0 = _context9["catch"](1);
+              console.error("Error evaluating all:", _context9.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -1633,24 +1746,24 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               });
 
             case 24:
-              _context8.prev = 24;
+              _context9.prev = 24;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
               setRejectAll(false);
-              return _context8.finish(24);
+              return _context9.finish(24);
 
             case 28:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
         }
-      }, _callee8, null, [[1, 20, 24, 28]]);
+      }, _callee9, null, [[1, 20, 24, 28]]);
     }));
 
     return function handleOnEvaluateAll(_x6) {
-      return _ref12.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
 
@@ -1700,7 +1813,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
         jwt: token
       }), pendingPropagation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PropagateChangesModal.PropagateChangesModal, {
         changedAttributes: pendingPropagation.cambios,
-        variants: ((_family$variants = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants !== void 0 ? _family$variants : []).filter(function (v) {
+        variants: ((_family$variants2 = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants2 !== void 0 ? _family$variants2 : []).filter(function (v) {
           return !v.isCurrent;
         }),
         saving: state.saving,
@@ -1781,21 +1894,21 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
           type: "pink",
           label: "Aceptar",
           size: 12,
-          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
+          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10() {
             var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
-            return _regenerator.default.wrap(function _callee9$(_context9) {
+            return _regenerator.default.wrap(function _callee10$(_context10) {
               while (1) {
-                switch (_context9.prev = _context9.next) {
+                switch (_context10.prev = _context10.next) {
                   case 0:
                     elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
 
                     if (!(!elements || elements.length === 0)) {
-                      _context9.next = 4;
+                      _context10.next = 4;
                       break;
                     }
 
                     console.error("Elemento no encontrado");
-                    return _context9.abrupt("return");
+                    return _context10.abrupt("return");
 
                   case 4:
                     isMessageEmpty = Array.from(elements).every(function (el) {
@@ -1804,7 +1917,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                     });
 
                     if (!isMessageEmpty) {
-                      _context9.next = 10;
+                      _context10.next = 10;
                       break;
                     }
 
@@ -1819,13 +1932,13 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                       container.appendChild(alert);
                     }
 
-                    return _context9.abrupt("return");
+                    return _context10.abrupt("return");
 
                   case 10:
                     fullMessage = Array.from(elements).map(function (element) {
                       return element.innerHTML;
                     }).join("").replace(/<br\s*\/?>/gi, "\n");
-                    _context9.next = 13;
+                    _context10.next = 13;
                     return createComment(fullMessage, token);
 
                   case 13:
@@ -1834,10 +1947,10 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
                   case 15:
                   case "end":
-                    return _context9.stop();
+                    return _context10.stop();
                 }
               }
-            }, _callee9);
+            }, _callee10);
           }))
         }, "btn-Aceptar")]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HeaderTop.HeaderTop, {
@@ -1943,7 +2056,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   className: "upc",
                   children: family.parent.upc
                 })]
-              }), family === null || family === void 0 ? void 0 : (_family$variants2 = family.variants) === null || _family$variants2 === void 0 ? void 0 : _family$variants2.map(function (variant) {
+              }), family === null || family === void 0 ? void 0 : (_family$variants3 = family.variants) === null || _family$variants3 === void 0 ? void 0 : _family$variants3.map(function (variant) {
                 return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                   type: "button",
                   className: "family-row".concat(variant.isCurrent ? " current" : ""),
@@ -1962,9 +2075,15 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                     children: variant.upc
                   })]
                 }, variant.articleId);
-              }), family && !family.error && !((_family$variants3 = family.variants) !== null && _family$variants3 !== void 0 && _family$variants3.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              }), family && !family.error && !((_family$variants4 = family.variants) !== null && _family$variants4 !== void 0 && _family$variants4.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
                 className: "loading",
                 children: "Este producto no tiene variantes."
+              }), (family === null || family === void 0 ? void 0 : (_family$variants5 = family.variants) === null || _family$variants5 === void 0 ? void 0 : _family$variants5.length) > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                type: "button",
+                className: "editar-juntas",
+                disabled: preparandoEdicionMultiple,
+                onClick: openMultipleEdition,
+                children: preparandoEdicionMultiple ? "Abriendo…" : "Editar las ".concat(family.variants.length, " variantes juntas")
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader, {
               headerData: state.product,

package/dist/components/pages/ProviderProductEdition/styles.js

@@ -18,9 +18,9 @@ var _templateObject;
 // Rosa ContentOh, el mismo del modal de ligar productos.
 var PINK = "#E13AA8";
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n  .variants-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n\n    .link-variants {\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      cursor: pointer;\n    }\n\n    .variants-count {\n      border: none;\n      background: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .variants-family {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    padding: 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n\n    .loading {\n      margin: 0;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n\n    .family-row {\n      display: flex;\n      align-items: baseline;\n      gap: 8px;\n      padding: 6px 8px;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      cursor: pointer;\n      text-align: left;\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n    }\n\n    .family-row:hover:not(:disabled) {\n      background-color: ", ";\n    }\n\n    .family-row:disabled {\n      cursor: default;\n      opacity: 0.7;\n    }\n\n    .family-row .role {\n      min-width: 96px;\n      font-size: 10px;\n      color: ", ";\n    }\n\n    .family-row.current .role {\n      color: ", ";\n    }\n\n    .family-row .name {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .family-row .upc {\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    .image-data-panel {\n      width: 340px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: 90%;\n    .dropzone {\n      height: 100%;\n      width: 100%;\n      position: relative;\n      transition: all 0.5s ease;\n\n      &.drag-active {\n        background-color: rgba(", ", 0.05);\n        border: 2px dashed ", ";\n        border-radius: 8px;\n\n        aside {\n          opacity: 0.3;\n          pointer-events: none;\n        }\n      }\n\n      .drag-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background-color: rgba(", ", 0.1);\n        border-radius: 8px;\n        pointer-events: none;\n        z-index: 10;\n\n        p {\n          font-family: ", ";\n          font-size: 24px;\n          font-weight: 600;\n          color: ", ";\n          text-align: center;\n          padding: 20px;\n          background-color: ", ";\n          border-radius: 8px;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n  .variants-actions {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 8px;\n\n    .link-variants {\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      cursor: pointer;\n    }\n\n    .variants-count {\n      border: none;\n      background: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  .variants-family {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-bottom: 10px;\n    padding: 8px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n\n    .loading {\n      margin: 0;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n\n    .family-row {\n      display: flex;\n      align-items: baseline;\n      gap: 8px;\n      padding: 6px 8px;\n      border: none;\n      border-radius: 4px;\n      background: none;\n      cursor: pointer;\n      text-align: left;\n      font-family: ", ";\n      font-size: 12px;\n      color: ", ";\n    }\n\n    .family-row:hover:not(:disabled) {\n      background-color: ", ";\n    }\n\n    .family-row:disabled {\n      cursor: default;\n      opacity: 0.7;\n    }\n\n    .family-row .role {\n      min-width: 96px;\n      font-size: 10px;\n      color: ", ";\n    }\n\n    .family-row.current .role {\n      color: ", ";\n    }\n\n    .family-row .name {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .family-row .upc {\n      font-size: 11px;\n      color: ", ";\n    }\n\n    .editar-juntas {\n      align-self: flex-start;\n      margin-top: 4px;\n      border: 1px solid ", ";\n      border-radius: 6px;\n      background: none;\n      padding: 6px 12px;\n      cursor: pointer;\n      font-family: ", ";\n      font-size: 11px;\n      color: ", ";\n    }\n  }\n"])), function (_ref) {
   var headerTop = _ref.headerTop;
   return headerTop;
-}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray);
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_gray, _variables.GlobalColors.rgb_color_pink, _variables.GlobalColors.color_pink, _variables.GlobalColors.rgb_color_pink, _variables.FontFamily.AvenirNext, _variables.GlobalColors.color_pink, _variables.GlobalColors.white, PINK, _variables.FontFamily.Raleway_600, PINK, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.GlobalColors.s2, _variables.FontFamily.Raleway_500, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_500, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, PINK, _variables.GlobalColors.gray, _variables.GlobalColors.gray, PINK, _variables.FontFamily.Raleway_600, PINK);
 
 exports.Container = Container;

package/package.json

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

package/src/components/pages/ProviderProductEdition/index.js

@@ -86,6 +86,8 @@ const ProviderProductEditionView = ({
   const [loadingVariant, setLoadingVariant] = useState(null);
   const [pendingPropagation, setPendingPropagation] = useState(null);
   const [preparandoPropagacion, setPreparandoPropagacion] = useState(false);
+  const [preparandoEdicionMultiple, setPreparandoEdicionMultiple] =
+    useState(false);
   const [showRejectModal, setShowRejectModal] = useState(false);
   const [headerTop, setHeaderTop] = useState(0);
   const [assig, setAssig] = useState({});
@@ -798,6 +800,70 @@ const ProviderProductEditionView = ({
     Es un rodeo, y lo es porque el origen del dato está mal puesto. Arreglarlo de
     raíz —que la ficha lea de la URL— toca todas las plataformas y no cabe aquí.
   */
+  /*
+    Abre la edición múltiple con las variantes de la familia ya cargadas.
+
+    Esa pantalla lee `multipleEditionList` de sessionStorage —así la deja el
+    listado al pulsar "editar varios"— y necesita el PRODUCTO COMPLETO de cada
+    uno, no solo su id: pinta el UPC, el nombre, parte `categoryName` por "|",
+    cuenta `retailersAvailable` y decide columnas según `id_order`. Con un objeto
+    reducido revienta al entrar.
+
+    Por eso se piden a /new-articles, que devuelve justo la forma del listado, y
+    se filtran por id y no por UPC: hay 12,024 UPC repetidos entre artículos
+    activos y el UPC no identifica un producto.
+
+    Va SIN el producto padre a propósito, aunque el botón viva en su ficha. En la
+    edición múltiple no existe el diálogo de propagación, así que incluirlo
+    abriría un camino para cambiar el padre sin decidir si eso baja a los hijos
+    —justo la decisión que su propia ficha obliga a tomar—.
+  */
+  const openMultipleEdition = async () => {
+    const ids = (family?.variants ?? []).map((variant) => variant.articleId);
+    if (!ids.length) return;
+
+    setPreparandoEdicionMultiple(true);
+    try {
+      const res = await axios.get(`${process.env.REACT_APP_NEW_ARTICLES_ENDPOINT}`, {
+        params: { listType: "general", filterByArticleId: ids.join(",") },
+        headers: { Authorization: token },
+      });
+
+      const { data } = readPayload(res);
+      const productos = (data ?? []).filter((item) =>
+        ids.includes(Number(item.id_article))
+      );
+
+      if (!productos.length) {
+        console.error("openMultipleEdition: sin productos que abrir");
+        return;
+      }
+
+      sessionStorage.setItem(
+        "multipleEditionList",
+        JSON.stringify(
+          productos.sort((a, b) => a.id_article - b.id_article)
+        )
+      );
+      window.location.assign("/products/multipleEdition");
+    } catch (error) {
+      // Se avisa y se queda donde está: navegar con la lista vieja abriría otros
+      // productos, y navegar sin lista deja la pantalla rota.
+      console.error("openMultipleEdition: ", error);
+      dispatch({
+        type: "SET_MODAL",
+        payload: {
+          show: true,
+          title: "",
+          message: "No se pudieron cargar las variantes para editarlas juntas.",
+          image: errorIcon,
+        },
+      });
+    } finally {
+      setPreparandoEdicionMultiple(false);
+    }
+  };
+
   const openVariant = async (articleId) => {
     setLoadingVariant(articleId);
     try {
@@ -1700,6 +1766,21 @@ const ProviderProductEditionView = ({
                   {family && !family.error && !family.variants?.length && (
                     <p className="loading">Este producto no tiene variantes.</p>
                   )}
+
+                  {/* Editarlas juntas evita abrir seis fichas para llenar lo
+                      mismo seis veces, que es el caso real de una familia. */}
+                  {family?.variants?.length > 1 && (
+                    <button
+                      type="button"
+                      className="editar-juntas"
+                      disabled={preparandoEdicionMultiple}
+                      onClick={openMultipleEdition}
+                    >
+                      {preparandoEdicionMultiple
+                        ? "Abriendo…"
+                        : `Editar las ${family.variants.length} variantes juntas`}
+                    </button>
+                  )}
                 </div>
               )}
               <FullProductNameHeader

package/src/components/pages/ProviderProductEdition/styles.js

@@ -253,5 +253,18 @@ export const Container = styled.div`
       font-size: 11px;
       color: ${GlobalColors.gray};
     }
+
+    .editar-juntas {
+      align-self: flex-start;
+      margin-top: 4px;
+      border: 1px solid ${PINK};
+      border-radius: 6px;
+      background: none;
+      padding: 6px 12px;
+      cursor: pointer;
+      font-family: ${FontFamily.Raleway_600};
+      font-size: 11px;
+      color: ${PINK};
+    }
   }
 `;