contentoh-components-library 21.6.44 → 21.6.46

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

@@ -77,6 +77,8 @@ var _LinkVariantsModal = require("../../organisms/LinkVariantsModal");
 
 var _UnlinkVariantModal = require("../../organisms/UnlinkVariantModal");
 
+var _VariantGroupModal = require("../../organisms/VariantGroupModal");
+
 var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
 
 var _api = require("../../organisms/LinkVariantsModal/api");
@@ -162,81 +164,81 @@ function regenerateVideoThumbnails(_x) {
 }
 
 function _regenerateVideoThumbnails() {
-  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee19(values) {
-    return _regenerator.default.wrap(function _callee19$(_context19) {
+  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee21(values) {
+    return _regenerator.default.wrap(function _callee21$(_context21) {
       while (1) {
-        switch (_context19.prev = _context19.next) {
+        switch (_context21.prev = _context21.next) {
           case 0:
             if (Array.isArray(values)) {
-              _context19.next = 2;
+              _context21.next = 2;
               break;
             }
 
-            return _context19.abrupt("return", values);
+            return _context21.abrupt("return", values);
 
           case 2:
-            return _context19.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
-              var _ref23 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee18(value) {
+            return _context21.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
+              var _ref25 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee20(value) {
                 var base64, videoSrc, thumbnail;
-                return _regenerator.default.wrap(function _callee18$(_context18) {
+                return _regenerator.default.wrap(function _callee20$(_context20) {
                   while (1) {
-                    switch (_context18.prev = _context18.next) {
+                    switch (_context20.prev = _context20.next) {
                       case 0:
                         if (!((value === null || value === void 0 ? void 0 : value.ext) !== "mp4" || !(value !== null && value !== void 0 && value.srcDB))) {
-                          _context18.next = 2;
+                          _context20.next = 2;
                           break;
                         }
 
-                        return _context18.abrupt("return", value);
+                        return _context20.abrupt("return", value);
 
                       case 2:
-                        _context18.prev = 2;
-                        _context18.next = 5;
+                        _context20.prev = 2;
+                        _context20.next = 5;
                         return convertirVideoABase64("https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + value.srcDB);
 
                       case 5:
-                        base64 = _context18.sent;
+                        base64 = _context20.sent;
                         videoSrc = "data:video/mp4;base64," + base64.split(",")[1];
-                        _context18.next = 9;
+                        _context20.next = 9;
                         return (0, _generateThumnail.default)(videoSrc, 2);
 
                       case 9:
-                        thumbnail = _context18.sent;
-                        return _context18.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
+                        thumbnail = _context20.sent;
+                        return _context20.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
                           src: thumbnail
                         }));
 
                       case 13:
-                        _context18.prev = 13;
-                        _context18.t0 = _context18["catch"](2);
-                        console.error("Error al generar thumbnail del video:", _context18.t0);
-                        return _context18.abrupt("return", value);
+                        _context20.prev = 13;
+                        _context20.t0 = _context20["catch"](2);
+                        console.error("Error al generar thumbnail del video:", _context20.t0);
+                        return _context20.abrupt("return", value);
 
                       case 17:
                       case "end":
-                        return _context18.stop();
+                        return _context20.stop();
                     }
                   }
-                }, _callee18, null, [[2, 13]]);
+                }, _callee20, null, [[2, 13]]);
               }));
 
               return function (_x10) {
-                return _ref23.apply(this, arguments);
+                return _ref25.apply(this, arguments);
               };
             }())));
 
           case 3:
           case "end":
-            return _context19.stop();
+            return _context21.stop();
         }
       }
-    }, _callee19);
+    }, _callee21);
   }));
   return _regenerateVideoThumbnails.apply(this, arguments);
 }
 
 var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
-  var _state$product10, _family$variants, _state$product11, _state$errors, _family$variants2, _state$product15, _state$product16, _state$product17, _state$active_retaile6, _location$state, _location$state2, _state$active_retaile7, _state$active_retaile8, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product18, _state$active_retaile9, _family$variants3, _family$variants4, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile10, _state$active_retaile11, _state$active_retaile12, _state$product24, _state$services2, _state$services2$data, _state$product25, _state$product26, _state$datasheets_inp, _state$datasheets_inp2, _state$product27, _state$images_values12, _state$comment;
+  var _state$product10, _family$variants, _state$product11, _state$product15, _state$errors, _family$variants2, _state$product19, _state$product20, _state$product21, _state$active_retaile6, _state$product22, _state$product23, _state$product24, _variantGroup$group, _location$state, _location$state2, _state$active_retaile7, _state$active_retaile8, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product25, _state$active_retaile9, _family$variants3, _family$variants4, _variantGroup$members, _variantGroup$members2, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile10, _state$active_retaile11, _state$active_retaile12, _state$product31, _state$services2, _state$services2$data, _state$product32, _state$product33, _state$datasheets_inp, _state$datasheets_inp2, _state$product34, _state$images_values12, _state$comment;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -332,56 +334,77 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   var _useState27 = (0, _react.useState)(null),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
       loadingVariant = _useState28[0],
-      setLoadingVariant = _useState28[1]; // Qué vínculo se está por romper, o null si no hay diálogo abierto. Guarda al
-  // HIJO, que es quien lleva la relación y lo que pide la acción `unlink`.
+      setLoadingVariant = _useState28[1];
+  /*
+    Agrupación de variantes. Aparte del padre/hijo a propósito: son mecanismos
+    independientes y un producto puede tener los dos. Padre/hijo es herencia;
+    esto es solo un código compartido.
+  */
 
 
   var _useState29 = (0, _react.useState)(null),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      porDesvincular = _useState30[0],
-      setPorDesvincular = _useState30[1]; // Por qué un salto no se pudo hacer. Vive aparte de `family.error` porque no
-  // es un fallo al leer la familia, sino al abrir uno de sus miembros.
-
+      variantGroup = _useState30[0],
+      setVariantGroup = _useState30[1];
 
-  var _useState31 = (0, _react.useState)(null),
+  var _useState31 = (0, _react.useState)(false),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      avisoFamilia = _useState32[0],
-      setAvisoFamilia = _useState32[1];
+      showGroup = _useState32[0],
+      setShowGroup = _useState32[1];
 
-  var _useState33 = (0, _react.useState)(null),
+  var _useState33 = (0, _react.useState)(false),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      pendingPropagation = _useState34[0],
-      setPendingPropagation = _useState34[1];
+      showGroupModal = _useState34[0],
+      setShowGroupModal = _useState34[1]; // Qué vínculo se está por romper, o null si no hay diálogo abierto. Guarda al
+  // HIJO, que es quien lleva la relación y lo que pide la acción `unlink`.
 
-  var _useState35 = (0, _react.useState)(false),
+
+  var _useState35 = (0, _react.useState)(null),
       _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      preparandoPropagacion = _useState36[0],
-      setPreparandoPropagacion = _useState36[1];
+      porDesvincular = _useState36[0],
+      setPorDesvincular = _useState36[1]; // Por qué un salto no se pudo hacer. Vive aparte de `family.error` porque no
+  // es un fallo al leer la familia, sino al abrir uno de sus miembros.
 
-  var _useState37 = (0, _react.useState)([]),
+
+  var _useState37 = (0, _react.useState)(null),
       _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      auditServices = _useState38[0],
-      setAuditServices = _useState38[1];
+      avisoFamilia = _useState38[0],
+      setAvisoFamilia = _useState38[1];
 
-  var _useState39 = (0, _react.useState)([]),
+  var _useState39 = (0, _react.useState)(null),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      auditDatasheets = _useState40[0],
-      setAuditDatasheets = _useState40[1];
+      pendingPropagation = _useState40[0],
+      setPendingPropagation = _useState40[1];
 
-  var _useState41 = (0, _react.useState)([]),
+  var _useState41 = (0, _react.useState)(false),
       _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
-      auditDescriptions = _useState42[0],
-      setAuditDescriptions = _useState42[1];
+      preparandoPropagacion = _useState42[0],
+      setPreparandoPropagacion = _useState42[1];
 
-  var _useState43 = (0, _react.useState)(false),
+  var _useState43 = (0, _react.useState)([]),
       _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
-      showModal = _useState44[0],
-      setShowModal = _useState44[1];
+      auditServices = _useState44[0],
+      setAuditServices = _useState44[1];
 
-  var _useState45 = (0, _react.useState)(false),
+  var _useState45 = (0, _react.useState)([]),
       _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
-      compare = _useState46[0],
-      setCompare = _useState46[1];
+      auditDatasheets = _useState46[0],
+      setAuditDatasheets = _useState46[1];
+
+  var _useState47 = (0, _react.useState)([]),
+      _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
+      auditDescriptions = _useState48[0],
+      setAuditDescriptions = _useState48[1];
+
+  var _useState49 = (0, _react.useState)(false),
+      _useState50 = (0, _slicedToArray2.default)(_useState49, 2),
+      showModal = _useState50[0],
+      setShowModal = _useState50[1];
+
+  var _useState51 = (0, _react.useState)(false),
+      _useState52 = (0, _slicedToArray2.default)(_useState51, 2),
+      compare = _useState52[0],
+      setCompare = _useState52[1];
 
   var _useDropzone = (0, _reactDropzone.useDropzone)({
     accept: "image/*, video/mp4",
@@ -517,10 +540,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       isDragActive = _useDropzone.isDragActive,
       open = _useDropzone.open;
 
-  var _useState47 = (0, _react.useState)(false),
-      _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
-      openChangeStatusModal = _useState48[0],
-      setOpenChangeStatusModal = _useState48[1];
+  var _useState53 = (0, _react.useState)(false),
+      _useState54 = (0, _slicedToArray2.default)(_useState53, 2),
+      openChangeStatusModal = _useState54[0],
+      setOpenChangeStatusModal = _useState54[1];
 
   var thumbs = function thumbs() {
     var _state$images_values, _state$images_values$, _state$images_values4, _state$images_values5, _state$images_values6, _state$images_values7, _state$images_values8, _state$images_values9;
@@ -1370,19 +1393,159 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
     loadData(false);
   };
+  /*
+    Trae el grupo de variantes y sus miembros.
+     Al montar, no al abrir el desplegable: `variant_group` no lo devuelve el
+    endpoint del listado, así que sin esta llamada la ficha no sabe si el
+    producto está agrupado.
+  */
 
-  var openFamilyMember = /*#__PURE__*/function () {
-    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(articleId) {
-      var _readPayload, res, _ref12, data, encontrado;
+
+  var loadVariantGroup = /*#__PURE__*/function () {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+      var forzar,
+          _state$product13,
+          res,
+          data,
+          _args7 = arguments;
 
       return _regenerator.default.wrap(function _callee7$(_context7) {
         while (1) {
           switch (_context7.prev = _context7.next) {
+            case 0:
+              forzar = _args7.length > 0 && _args7[0] !== undefined ? _args7[0] : false;
+
+              if (!(variantGroup && !forzar)) {
+                _context7.next = 3;
+                break;
+              }
+
+              return _context7.abrupt("return", variantGroup);
+
+            case 3:
+              _context7.prev = 3;
+              _context7.next = 6;
+              return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/group"), {
+                articleId: (_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.id_article
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 6:
+              res = _context7.sent;
+              data = (0, _api.readPayload)(res);
+              setVariantGroup(data);
+              return _context7.abrupt("return", data);
+
+            case 12:
+              _context7.prev = 12;
+              _context7.t0 = _context7["catch"](3);
+              console.error("loadVariantGroup: ", _context7.t0);
+              setVariantGroup({
+                group: null,
+                members: [],
+                error: true
+              });
+              return _context7.abrupt("return", null);
+
+            case 17:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7, null, [[3, 12]]);
+    }));
+
+    return function loadVariantGroup() {
+      return _ref11.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    var _state$product14;
+
+    if (!((_state$product14 = state.product) !== null && _state$product14 !== void 0 && _state$product14.id_article)) return;
+    loadVariantGroup(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.id_article]);
+
+  var handleOnLeaveGroup = /*#__PURE__*/function () {
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+      var _state$product16, res;
+
+      return _regenerator.default.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.prev = 0;
+              _context8.next = 3;
+              return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/leave"), {
+                articleId: (_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : _state$product16.id_article
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 3:
+              res = _context8.sent;
+              setVariantGroup((0, _api.readPayload)(res));
+              setShowGroup(false);
+              _context8.next = 12;
+              break;
+
+            case 8:
+              _context8.prev = 8;
+              _context8.t0 = _context8["catch"](0);
+              console.error("leaveVariantGroup: ", _context8.t0);
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "Variantes",
+                  message: "No se pudo quitar el producto del grupo. Intenta de nuevo.",
+                  image: _genericModalWarning.default,
+                  buttons: [{
+                    text: "Entendido",
+                    buttonType: "general-white-button",
+                    action: function action() {
+                      return dispatch({
+                        type: "SET_MODAL",
+                        payload: {
+                          show: false
+                        }
+                      });
+                    }
+                  }]
+                }
+              });
+
+            case 12:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee8, null, [[0, 8]]);
+    }));
+
+    return function handleOnLeaveGroup() {
+      return _ref12.apply(this, arguments);
+    };
+  }();
+
+  var openFamilyMember = /*#__PURE__*/function () {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(articleId) {
+      var _readPayload, res, _ref14, data, encontrado;
+
+      return _regenerator.default.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
             case 0:
               setLoadingVariant(articleId);
               setAvisoFamilia(null);
-              _context7.prev = 2;
-              _context7.next = 5;
+              _context9.prev = 2;
+              _context9.next = 5;
               return _axios.default.get("".concat(process.env.REACT_APP_ORDERED_SERVICES_ENDPOINT), {
                 params: {
                   filterByIdArticle: articleId,
@@ -1394,11 +1557,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 5:
-              res = _context7.sent;
+              res = _context9.sent;
               // read-order-services responde { total, data: [...] }. La vista trae una
               // fila por orden, así que puede haber varias del mismo artículo; llegan
               // ordenadas por order_id DESC y la primera es la orden más reciente.
-              _ref12 = (_readPayload = (0, _api.readPayload)(res)) !== null && _readPayload !== void 0 ? _readPayload : {}, data = _ref12.data;
+              _ref14 = (_readPayload = (0, _api.readPayload)(res)) !== null && _readPayload !== void 0 ? _readPayload : {}, data = _ref14.data;
               encontrado = (data !== null && data !== void 0 ? data : []).find(function (item) {
                 var _item$article;
 
@@ -1406,12 +1569,12 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
               if (encontrado) {
-                _context7.next = 11;
+                _context9.next = 11;
                 break;
               }
 
               setAvisoFamilia("Ese producto no está en ninguna orden de trabajo, así que no se puede abrir desde aquí.");
-              return _context7.abrupt("return");
+              return _context9.abrupt("return");
 
             case 11:
               sessionStorage.setItem("productSelected", JSON.stringify(encontrado));
@@ -1422,30 +1585,30 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 product: [encontrado]
               }));
               window.location.assign("/EditProducts");
-              _context7.next = 21;
+              _context9.next = 21;
               break;
 
             case 17:
-              _context7.prev = 17;
-              _context7.t0 = _context7["catch"](2);
-              console.error("openFamilyMember: ", _context7.t0);
+              _context9.prev = 17;
+              _context9.t0 = _context9["catch"](2);
+              console.error("openFamilyMember: ", _context9.t0);
               setAvisoFamilia("No se pudo abrir ese producto. Intenta de nuevo.");
 
             case 21:
-              _context7.prev = 21;
+              _context9.prev = 21;
               setLoadingVariant(null);
-              return _context7.finish(21);
+              return _context9.finish(21);
 
             case 24:
             case "end":
-              return _context7.stop();
+              return _context9.stop();
           }
         }
-      }, _callee7, null, [[2, 17, 21, 24]]);
+      }, _callee9, null, [[2, 17, 21, 24]]);
     }));
 
     return function openFamilyMember(_x3) {
-      return _ref11.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
   /*
@@ -1456,11 +1619,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
 
   var handleOnLinkedVariants = function handleOnLinkedVariants(result) {
-    var _state$product$varian2, _state$product13, _result$linked, _result$parentArticle;
+    var _state$product$varian2, _state$product17, _result$linked, _result$parentArticle;
 
     if (!result) return;
     var updatedProduct = result.mode === "children" ? (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
-      variantsCount: ((_state$product$varian2 = (_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.variantsCount) !== null && _state$product$varian2 !== void 0 ? _state$product$varian2 : 0) + ((_result$linked = result.linked) !== null && _result$linked !== void 0 ? _result$linked : []).length
+      variantsCount: ((_state$product$varian2 = (_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.variantsCount) !== null && _state$product$varian2 !== void 0 ? _state$product$varian2 : 0) + ((_result$linked = result.linked) !== null && _result$linked !== void 0 ? _result$linked : []).length
     }) : (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
       parentArticleId: (_result$parentArticle = result.parentArticleId) !== null && _result$parentArticle !== void 0 ? _result$parentArticle : null,
       variantsCount: 0
@@ -1534,31 +1697,31 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
 
   var handleOnRestoreInheritance = /*#__PURE__*/function () {
-    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8(attributeId) {
-      var _state$product14;
+    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10(attributeId) {
+      var _state$product18;
 
       var kind,
           esDescripcion,
           res,
           data,
-          _args8 = arguments;
-      return _regenerator.default.wrap(function _callee8$(_context8) {
+          _args10 = arguments;
+      return _regenerator.default.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
-              kind = _args8.length > 1 && _args8[1] !== undefined ? _args8[1] : "attribute";
+              kind = _args10.length > 1 && _args10[1] !== undefined ? _args10[1] : "attribute";
 
-              if (!(!attributeId || !((_state$product14 = state.product) !== null && _state$product14 !== void 0 && _state$product14.id_article))) {
-                _context8.next = 3;
+              if (!(!attributeId || !((_state$product18 = state.product) !== null && _state$product18 !== void 0 && _state$product18.id_article))) {
+                _context10.next = 3;
                 break;
               }
 
-              return _context8.abrupt("return");
+              return _context10.abrupt("return");
 
             case 3:
               esDescripcion = kind === "description";
-              _context8.prev = 4;
-              _context8.next = 7;
+              _context10.prev = 4;
+              _context10.next = 7;
               return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/restore"), (0, _objectSpread5.default)({
                 articleId: state.product.id_article
               }, esDescripcion ? {
@@ -1572,11 +1735,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 7:
-              res = _context8.sent;
+              res = _context10.sent;
               data = (0, _api.readPayload)(res);
 
               if (!esDescripcion) {
-                _context8.next = 12;
+                _context10.next = 12;
                 break;
               }
 
@@ -1590,7 +1753,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   };
                 })
               });
-              return _context8.abrupt("return");
+              return _context10.abrupt("return");
 
             case 12:
               dispatch({
@@ -1603,24 +1766,24 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   };
                 })
               });
-              _context8.next = 18;
+              _context10.next = 18;
               break;
 
             case 15:
-              _context8.prev = 15;
-              _context8.t0 = _context8["catch"](4);
-              console.error("restoreInheritance: ", _context8.t0);
+              _context10.prev = 15;
+              _context10.t0 = _context10["catch"](4);
+              console.error("restoreInheritance: ", _context10.t0);
 
             case 18:
             case "end":
-              return _context8.stop();
+              return _context10.stop();
           }
         }
-      }, _callee8, null, [[4, 15]]);
+      }, _callee10, null, [[4, 15]]);
     }));
 
     return function handleOnRestoreInheritance(_x4) {
-      return _ref13.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }();
   /*
@@ -1647,45 +1810,45 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnClickSave = /*#__PURE__*/function () {
-    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
+    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11() {
       var _familia$variants, cambios, familia, hijos;
 
-      return _regenerator.default.wrap(function _callee9$(_context9) {
+      return _regenerator.default.wrap(function _callee11$(_context11) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context11.prev = _context11.next) {
             case 0:
               if (!(state.saving || preparandoPropagacion)) {
-                _context9.next = 2;
+                _context11.next = 2;
                 break;
               }
 
-              return _context9.abrupt("return");
+              return _context11.abrupt("return");
 
             case 2:
-              _context9.t0 = state.active_tab;
-              _context9.next = _context9.t0 === "Descripción" ? 5 : _context9.t0 === "Ficha técnica" ? 8 : _context9.t0 === "Imágenes" ? 32 : 35;
+              _context11.t0 = state.active_tab;
+              _context11.next = _context11.t0 === "Descripción" ? 5 : _context11.t0 === "Ficha técnica" ? 8 : _context11.t0 === "Imágenes" ? 32 : 35;
               break;
 
             case 5:
-              _context9.next = 7;
+              _context11.next = 7;
               return saveDescriptions(token);
 
             case 7:
-              return _context9.abrupt("break", 36);
+              return _context11.abrupt("break", 36);
 
             case 8:
               cambios = cambiosDeFichaTecnica();
 
               if (!(cambios.length === 0)) {
-                _context9.next = 13;
+                _context11.next = 13;
                 break;
               }
 
-              _context9.next = 12;
+              _context11.next = 12;
               return saveDatasheets(token);
 
             case 12:
-              return _context9.abrupt("break", 36);
+              return _context11.abrupt("break", 36);
 
             case 13:
               /*
@@ -1704,21 +1867,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               */
               setPreparandoPropagacion(true);
               familia = null;
-              _context9.prev = 15;
-              _context9.next = 18;
+              _context11.prev = 15;
+              _context11.next = 18;
               return loadFamily(true);
 
             case 18:
-              familia = _context9.sent;
+              familia = _context11.sent;
 
             case 19:
-              _context9.prev = 19;
+              _context11.prev = 19;
               setPreparandoPropagacion(false);
-              return _context9.finish(19);
+              return _context11.finish(19);
 
             case 22:
               if (!(!familia || familia.error)) {
-                _context9.next = 25;
+                _context11.next = 25;
                 break;
               }
 
@@ -1755,7 +1918,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   }]
                 }
               });
-              return _context9.abrupt("return");
+              return _context11.abrupt("return");
 
             case 25:
               hijos = ((_familia$variants = familia.variants) !== null && _familia$variants !== void 0 ? _familia$variants : []).filter(function (v) {
@@ -1763,46 +1926,46 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
               if (!(hijos.length > 0)) {
-                _context9.next = 29;
+                _context11.next = 29;
                 break;
               }
 
               setPendingPropagation({
                 cambios: cambios
               });
-              return _context9.abrupt("return");
+              return _context11.abrupt("return");
 
             case 29:
-              _context9.next = 31;
+              _context11.next = 31;
               return saveDatasheets(token);
 
             case 31:
-              return _context9.abrupt("break", 36);
+              return _context11.abrupt("break", 36);
 
             case 32:
-              _context9.next = 34;
+              _context11.next = 34;
               return updateImages(token);
 
             case 34:
-              return _context9.abrupt("break", 36);
+              return _context11.abrupt("break", 36);
 
             case 35:
-              return _context9.abrupt("break", 36);
+              return _context11.abrupt("break", 36);
 
             case 36:
-              _context9.next = 38;
+              _context11.next = 38;
               return loadData(false);
 
             case 38:
             case "end":
-              return _context9.stop();
+              return _context11.stop();
           }
         }
-      }, _callee9, null, [[15,, 19, 22]]);
+      }, _callee11, null, [[15,, 19, 22]]);
     }));
 
     return function handleOnClickSave() {
-      return _ref14.apply(this, arguments);
+      return _ref16.apply(this, arguments);
     };
   }();
 
@@ -1870,24 +2033,24 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnApproveSingleService = /*#__PURE__*/function () {
-    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10() {
-      return _regenerator.default.wrap(function _callee10$(_context10) {
+    var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
+      return _regenerator.default.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
-              _context10.next = 2;
+              _context12.next = 2;
               return sendSingleEvaluation("A");
 
             case 2:
             case "end":
-              return _context10.stop();
+              return _context12.stop();
           }
         }
-      }, _callee10);
+      }, _callee12);
     }));
 
     return function handleOnApproveSingleService() {
-      return _ref15.apply(this, arguments);
+      return _ref17.apply(this, arguments);
     };
   }();
 
@@ -1896,21 +2059,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var sendSingleEvaluation = /*#__PURE__*/function () {
-    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
+    var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(result) {
       var _state$product$id_ord, _state$active_retaile5;
 
       var concept, articleId, orderId, sectionStatusKey, evalStatus, retailerId, data, res, message, icon, activeTab, newStatuses, serviceStatus, articleStatus, updatedStatusByRetailer, updatedProduct, specialistDone, _objectSpread2, _state$services_data2, _JSON$parse2, newStatus, newOrderStatus, newArticleStatus, _articleStatus, updatedStatusByRetailerForSend, _updatedProduct, updatedServicesData, sessionProduct, _objectSpread3, productInSession, updatedProductInSession;
 
-      return _regenerator.default.wrap(function _callee11$(_context11) {
+      return _regenerator.default.wrap(function _callee13$(_context13) {
         while (1) {
-          switch (_context11.prev = _context11.next) {
+          switch (_context13.prev = _context13.next) {
             case 0:
               if (!state.saving) {
-                _context11.next = 2;
+                _context13.next = 2;
                 break;
               }
 
-              return _context11.abrupt("return");
+              return _context13.abrupt("return");
 
             case 2:
               dispatch({
@@ -1931,16 +2094,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 retailerId: retailerId
               };
               activeTab = state.active_tab;
-              _context11.prev = 11;
+              _context13.prev = 11;
 
               if (!result) {
-                _context11.next = 28;
+                _context13.next = 28;
                 break;
               }
 
               data.result = result;
               data.retailerId = retailerId;
-              _context11.next = 17;
+              _context13.next = 17;
               return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
                 headers: {
                   Authorization: token
@@ -1948,7 +2111,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 17:
-              res = _context11.sent;
+              res = _context13.sent;
               newStatuses = JSON.parse(res.data.body);
               serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")];
               articleStatus = newStatuses.newArticleStatus[articleId];
@@ -1979,7 +2142,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context11.next = 33;
+              _context13.next = 33;
               break;
 
             case 28:
@@ -1995,7 +2158,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 icon = _genericModalCheck.default;
               }
 
-              _context11.next = 32;
+              _context13.next = 32;
               return _axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
                 headers: {
                   Authorization: token
@@ -2003,7 +2166,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 32:
-              res = _context11.sent;
+              res = _context13.sent;
 
             case 33:
               if (res.data.statusCode === 200) {
@@ -2088,13 +2251,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 });
               }
 
-              _context11.next = 40;
+              _context13.next = 40;
               break;
 
             case 36:
-              _context11.prev = 36;
-              _context11.t0 = _context11["catch"](11);
-              console.error("Error sending evaluation:", _context11.t0);
+              _context13.prev = 36;
+              _context13.t0 = _context13["catch"](11);
+              console.error("Error sending evaluation:", _context13.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -2106,45 +2269,45 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 40:
-              _context11.prev = 40;
+              _context13.prev = 40;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context11.finish(40);
+              return _context13.finish(40);
 
             case 43:
             case "end":
-              return _context11.stop();
+              return _context13.stop();
           }
         }
-      }, _callee11, null, [[11, 36, 40, 43]]);
+      }, _callee13, null, [[11, 36, 40, 43]]);
     }));
 
     return function sendSingleEvaluation(_x5) {
-      return _ref16.apply(this, arguments);
+      return _ref18.apply(this, arguments);
     };
   }();
 
   var handleOnApproveAllServices = /*#__PURE__*/function () {
-    var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
-      return _regenerator.default.wrap(function _callee12$(_context12) {
+    var _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14() {
+      return _regenerator.default.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
-              _context12.next = 2;
+              _context14.next = 2;
               return sendBulkEvaluation("A");
 
             case 2:
             case "end":
-              return _context12.stop();
+              return _context14.stop();
           }
         }
-      }, _callee12);
+      }, _callee14);
     }));
 
     return function handleOnApproveAllServices() {
-      return _ref17.apply(this, arguments);
+      return _ref19.apply(this, arguments);
     };
   }();
 
@@ -2154,18 +2317,18 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var sendBulkEvaluation = /*#__PURE__*/function () {
-    var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(result) {
+    var _ref20 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(result) {
       var _state$services_data3, evaluationArray, conceptArray, status, updatedStatusByRetailer, updatedProduct, updatedServicesData;
 
-      return _regenerator.default.wrap(function _callee13$(_context13) {
+      return _regenerator.default.wrap(function _callee15$(_context15) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context15.prev = _context15.next) {
             case 0:
               dispatch({
                 type: "SET_SAVING",
                 payload: true
               });
-              _context13.prev = 1;
+              _context15.prev = 1;
               evaluationArray = [];
               conceptArray = (0, _utils.getConceptsByRole)(user.id_role);
               (_state$services_data3 = state.services_data) === null || _state$services_data3 === void 0 ? void 0 : _state$services_data3.forEach(function (ret, idx) {
@@ -2190,7 +2353,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   }));
                 }
               });
-              _context13.next = 7;
+              _context15.next = 7;
               return Promise.all(evaluationArray);
 
             case 7:
@@ -2245,41 +2408,41 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context13.next = 19;
+              _context15.next = 19;
               break;
 
             case 16:
-              _context13.prev = 16;
-              _context13.t0 = _context13["catch"](1);
-              console.error("Error in bulk evaluation:", _context13.t0);
+              _context15.prev = 16;
+              _context15.t0 = _context15["catch"](1);
+              console.error("Error in bulk evaluation:", _context15.t0);
 
             case 19:
-              _context13.prev = 19;
+              _context15.prev = 19;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context13.finish(19);
+              return _context15.finish(19);
 
             case 22:
             case "end":
-              return _context13.stop();
+              return _context15.stop();
           }
         }
-      }, _callee13, null, [[1, 16, 19, 22]]);
+      }, _callee15, null, [[1, 16, 19, 22]]);
     }));
 
     return function sendBulkEvaluation(_x6) {
-      return _ref18.apply(this, arguments);
+      return _ref20.apply(this, arguments);
     };
   }();
 
   var handleOnChangeAssignations = /*#__PURE__*/function () {
-    var _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(assignationType, assignationId) {
+    var _ref21 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16(assignationType, assignationId) {
       var concept, data, updatedProduct;
-      return _regenerator.default.wrap(function _callee14$(_context14) {
+      return _regenerator.default.wrap(function _callee16$(_context16) {
         while (1) {
-          switch (_context14.prev = _context14.next) {
+          switch (_context16.prev = _context16.next) {
             case 0:
               concept = (0, _utils.getConceptByTab)(state.active_tab);
               data = {
@@ -2290,7 +2453,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 concept: concept,
                 userId: assignationId
               };
-              _context14.next = 4;
+              _context16.next = 4;
               return (0, _axios.default)({
                 method: "post",
                 url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
@@ -2309,14 +2472,14 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 6:
             case "end":
-              return _context14.stop();
+              return _context16.stop();
           }
         }
-      }, _callee14);
+      }, _callee16);
     }));
 
     return function handleOnChangeAssignations(_x7, _x8) {
-      return _ref19.apply(this, arguments);
+      return _ref21.apply(this, arguments);
     };
   }();
 
@@ -2351,16 +2514,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnSubmitComment = /*#__PURE__*/function () {
-    var _ref20 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(e) {
+    var _ref22 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17(e) {
       var commentText;
-      return _regenerator.default.wrap(function _callee15$(_context15) {
+      return _regenerator.default.wrap(function _callee17$(_context17) {
         while (1) {
-          switch (_context15.prev = _context15.next) {
+          switch (_context17.prev = _context17.next) {
             case 0:
               e.preventDefault();
               commentText = document.querySelector("#commentary-box .ql-container .ql-editor > p").innerHTML;
-              _context15.prev = 2;
-              _context15.next = 5;
+              _context17.prev = 2;
+              _context17.next = 5;
               return createComment(commentText, token);
 
             case 5:
@@ -2373,13 +2536,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context15.next = 12;
+              _context17.next = 12;
               break;
 
             case 8:
-              _context15.prev = 8;
-              _context15.t0 = _context15["catch"](2);
-              console.error("Error saving comment:", _context15.t0);
+              _context17.prev = 8;
+              _context17.t0 = _context17["catch"](2);
+              console.error("Error saving comment:", _context17.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -2392,14 +2555,14 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 12:
             case "end":
-              return _context15.stop();
+              return _context17.stop();
           }
         }
-      }, _callee15, null, [[2, 8]]);
+      }, _callee17, null, [[2, 8]]);
     }));
 
     return function handleOnSubmitComment(_x9) {
-      return _ref20.apply(this, arguments);
+      return _ref22.apply(this, arguments);
     };
   }();
 
@@ -2734,15 +2897,28 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           saveDatasheets(token, propagation !== null && propagation !== void 0 ? propagation : undefined);
         }
       }), showLinkVariants && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkVariantsModal.LinkVariantsModal, {
-        articleId: (_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.id_article,
-        articleName: (_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : _state$product16.name,
-        articleUpc: (_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.upc,
+        articleId: (_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.id_article,
+        articleName: (_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.name,
+        articleUpc: (_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.upc,
         activeRetailerId: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
         token: token,
         onClose: function onClose() {
           return setShowLinkVariants(false);
         },
         onLinked: handleOnLinkedVariants
+      }), showGroupModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VariantGroupModal.VariantGroupModal, {
+        articleId: (_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.id_article,
+        articleName: (_state$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.name,
+        articleUpc: (_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.upc,
+        currentGroup: (_variantGroup$group = variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) !== null && _variantGroup$group !== void 0 ? _variantGroup$group : null,
+        token: token,
+        onClose: function onClose() {
+          return setShowGroupModal(false);
+        },
+        onSaved: function onSaved(result) {
+          setVariantGroup(result);
+          setShowGroup(true);
+        }
       }), porDesvincular && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UnlinkVariantModal.UnlinkVariantModal, (0, _objectSpread5.default)((0, _objectSpread5.default)({}, porDesvincular), {}, {
         token: token,
         onClose: function onClose() {
@@ -2769,21 +2945,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           type: "pink",
           label: "Aceptar",
           size: 12,
-          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16() {
+          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee18() {
             var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
-            return _regenerator.default.wrap(function _callee16$(_context16) {
+            return _regenerator.default.wrap(function _callee18$(_context18) {
               while (1) {
-                switch (_context16.prev = _context16.next) {
+                switch (_context18.prev = _context18.next) {
                   case 0:
                     elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
 
                     if (!(!elements || elements.length === 0)) {
-                      _context16.next = 4;
+                      _context18.next = 4;
                       break;
                     }
 
                     console.error("Elemento no encontrado");
-                    return _context16.abrupt("return");
+                    return _context18.abrupt("return");
 
                   case 4:
                     isMessageEmpty = Array.from(elements).every(function (el) {
@@ -2792,7 +2968,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                     });
 
                     if (!isMessageEmpty) {
-                      _context16.next = 10;
+                      _context18.next = 10;
                       break;
                     }
 
@@ -2807,13 +2983,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                       container.appendChild(alert);
                     }
 
-                    return _context16.abrupt("return");
+                    return _context18.abrupt("return");
 
                   case 10:
                     fullMessage = Array.from(elements).map(function (element) {
                       return element.innerHTML;
                     }).join("").replace(/<br\s*\/?>/gi, "\n");
-                    _context16.next = 13;
+                    _context18.next = 13;
                     return createComment(fullMessage, token);
 
                   case 13:
@@ -2822,10 +2998,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
                   case 15:
                   case "end":
-                    return _context16.stop();
+                    return _context18.stop();
                 }
               }
-            }, _callee16);
+            }, _callee18);
           }))
         }, "btn-Aceptar")]
       }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
@@ -2903,7 +3079,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             lists: state.images_values || [],
             activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
             assignationsImages: state.collaborator_assignations["Imágenes"],
-            imagesStatus: ((_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.images_status) || "-",
+            imagesStatus: ((_state$product25 = state.product) === null || _state$product25 === void 0 ? void 0 : _state$product25.images_status) || "-",
             retailerSelected: (_state$active_retaile9 = state.active_retailer) === null || _state$active_retaile9 === void 0 ? void 0 : _state$active_retaile9.id_retailer,
             isRetailer: isRetailer,
             version: state.product.version,
@@ -2991,13 +3167,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 className: "desvincular",
                 title: "Dejar de ser hijo de este producto",
                 onClick: function onClick() {
-                  var _state$product19, _state$product20, _state$product21;
+                  var _state$product26, _state$product27, _state$product28;
 
                   return setPorDesvincular({
                     mode: "self",
-                    childArticleId: (_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.id_article,
-                    childName: (_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.name,
-                    childUpc: (_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.upc,
+                    childArticleId: (_state$product26 = state.product) === null || _state$product26 === void 0 ? void 0 : _state$product26.id_article,
+                    childName: (_state$product27 = state.product) === null || _state$product27 === void 0 ? void 0 : _state$product27.name,
+                    childUpc: (_state$product28 = state.product) === null || _state$product28 === void 0 ? void 0 : _state$product28.upc,
                     parentName: family.parent.name,
                     parentUpc: family.parent.upc
                   });
@@ -3029,15 +3205,15 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   className: "desvincular",
                   title: "Desvincular este hijo",
                   onClick: function onClick() {
-                    var _state$product22, _state$product23;
+                    var _state$product29, _state$product30;
 
                     return setPorDesvincular({
                       mode: "child",
                       childArticleId: variant.articleId,
                       childName: variant.name,
                       childUpc: variant.upc,
-                      parentName: (_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.name,
-                      parentUpc: (_state$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.upc
+                      parentName: (_state$product29 = state.product) === null || _state$product29 === void 0 ? void 0 : _state$product29.name,
+                      parentUpc: (_state$product30 = state.product) === null || _state$product30 === void 0 ? void 0 : _state$product30.upc
                     });
                   },
                   children: "Desvincular"
@@ -3050,6 +3226,67 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               className: "loading",
               children: avisoFamilia
             })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "variants-actions",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              className: "link-variants",
+              onClick: function onClick() {
+                return setShowGroupModal(true);
+              },
+              children: variantGroup !== null && variantGroup !== void 0 && variantGroup.group ? "Cambiar de grupo" : "Agrupar variantes"
+            }), (variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
+              className: "variants-count",
+              "aria-expanded": showGroup,
+              onClick: function onClick() {
+                return setShowGroup(function (abierto) {
+                  return !abierto;
+                });
+              },
+              children: ["Variante ", variantGroup.group, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                "aria-hidden": "true",
+                children: showGroup ? " ▴" : " ▾"
+              })]
+            })]
+          }), showGroup && (variantGroup === null || variantGroup === void 0 ? void 0 : variantGroup.group) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "variants-family",
+            children: [((_variantGroup$members = variantGroup.members) !== null && _variantGroup$members !== void 0 ? _variantGroup$members : []).filter(function (miembro) {
+              return !miembro.isCurrent;
+            }).map(function (miembro) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "family-item",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                  type: "button",
+                  className: "family-row",
+                  disabled: loadingVariant !== null,
+                  onClick: function onClick() {
+                    return openFamilyMember(miembro.articleId);
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "role",
+                    children: loadingVariant === miembro.articleId ? "Abriendo…" : "Variante"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "name",
+                    children: miembro.name
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "upc",
+                    children: miembro.upc
+                  })]
+                })
+              }, miembro.articleId);
+            }), ((_variantGroup$members2 = variantGroup.members) !== null && _variantGroup$members2 !== void 0 ? _variantGroup$members2 : []).filter(function (m) {
+              return !m.isCurrent;
+            }).length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+              className: "loading",
+              children: ["Este producto es el \xFAnico en el grupo ", variantGroup.group, "."]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              className: "desvincular",
+              title: "Quitar este producto del grupo",
+              onClick: handleOnLeaveGroup,
+              children: "Quitar del grupo"
+            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader // states
           , {
             headerData: state.product,
@@ -3108,7 +3345,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
             id: "services-information-container",
             children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [state.active_tab === "Descripción" && (((_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+              children: [state.active_tab === "Descripción" && (((_state$product31 = state.product) === null || _state$product31 === void 0 ? void 0 : _state$product31.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
                 activeSection: state.active_tab,
                 inputGroup: state.descriptions_inputs[0],
                 updatedDescriptions: state.updated_descriptions_inputs
@@ -3117,7 +3354,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 ,
                 variant: (_state$services2 = state.services) === null || _state$services2 === void 0 ? void 0 : (_state$services2$data = _state$services2.datasheets) === null || _state$services2$data === void 0 ? void 0 : _state$services2$data.variant,
                 onRestoreInheritance: handleOnRestoreInheritance,
-                articleId: (_state$product25 = state.product) === null || _state$product25 === void 0 ? void 0 : _state$product25.id_article,
+                articleId: (_state$product32 = state.product) === null || _state$product32 === void 0 ? void 0 : _state$product32.id_article,
                 version: state.product.version,
                 auditInputGroup: auditDescriptions[0],
                 setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
@@ -3126,7 +3363,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
                 text: "No cuentas con este servicio",
                 headerType: "input-name-header"
-              })), state.active_tab === "Ficha técnica" && (((_state$product26 = state.product) === null || _state$product26 === void 0 ? void 0 : _state$product26.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              })), state.active_tab === "Ficha técnica" && (((_state$product33 = state.product) === null || _state$product33 === void 0 ? void 0 : _state$product33.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                 children: (_state$datasheets_inp = state.datasheets_inputs[0]) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp.data) === null || _state$datasheets_inp2 === void 0 ? void 0 : _state$datasheets_inp2.map(function (dataGroup, index) {
                   var _state$services3, _state$services3$data;
 
@@ -3147,7 +3384,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
                 text: "No cuentas con este servicio",
                 headerType: "input-name-header"
-              })), state.active_tab === "Imágenes" && (((_state$product27 = state.product) === null || _state$product27 === void 0 ? void 0 : _state$product27.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              })), state.active_tab === "Imágenes" && (((_state$product34 = state.product) === null || _state$product34 === void 0 ? void 0 : _state$product34.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                 children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
                   checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
                   ,
@@ -3239,20 +3476,20 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 reviewed: crossComment
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
                 buttonType: "circular-button accept-button",
-                onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17() {
-                  return _regenerator.default.wrap(function _callee17$(_context17) {
+                onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee19() {
+                  return _regenerator.default.wrap(function _callee19$(_context19) {
                     while (1) {
-                      switch (_context17.prev = _context17.next) {
+                      switch (_context19.prev = _context19.next) {
                         case 0:
                           setCrossComment(true);
                           commentRevised();
 
                         case 2:
                         case "end":
-                          return _context17.stop();
+                          return _context19.stop();
                       }
                     }
-                  }, _callee17);
+                  }, _callee19);
                 }))
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {