contentoh-components-library 21.6.33 → 21.6.35

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

@@ -160,75 +160,75 @@ function regenerateVideoThumbnails(_x) {
 }
 
 function _regenerateVideoThumbnails() {
-  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17(values) {
-    return _regenerator.default.wrap(function _callee17$(_context17) {
+  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee18(values) {
+    return _regenerator.default.wrap(function _callee18$(_context18) {
       while (1) {
-        switch (_context17.prev = _context17.next) {
+        switch (_context18.prev = _context18.next) {
           case 0:
             if (Array.isArray(values)) {
-              _context17.next = 2;
+              _context18.next = 2;
               break;
             }
 
-            return _context17.abrupt("return", values);
+            return _context18.abrupt("return", values);
 
           case 2:
-            return _context17.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
-              var _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16(value) {
+            return _context18.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
+              var _ref21 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17(value) {
                 var base64, videoSrc, thumbnail;
-                return _regenerator.default.wrap(function _callee16$(_context16) {
+                return _regenerator.default.wrap(function _callee17$(_context17) {
                   while (1) {
-                    switch (_context16.prev = _context16.next) {
+                    switch (_context17.prev = _context17.next) {
                       case 0:
                         if (!((value === null || value === void 0 ? void 0 : value.ext) !== "mp4" || !(value !== null && value !== void 0 && value.srcDB))) {
-                          _context16.next = 2;
+                          _context17.next = 2;
                           break;
                         }
 
-                        return _context16.abrupt("return", value);
+                        return _context17.abrupt("return", value);
 
                       case 2:
-                        _context16.prev = 2;
-                        _context16.next = 5;
+                        _context17.prev = 2;
+                        _context17.next = 5;
                         return convertirVideoABase64("https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + value.srcDB);
 
                       case 5:
-                        base64 = _context16.sent;
+                        base64 = _context17.sent;
                         videoSrc = "data:video/mp4;base64," + base64.split(",")[1];
-                        _context16.next = 9;
+                        _context17.next = 9;
                         return (0, _generateThumnail.default)(videoSrc, 2);
 
                       case 9:
-                        thumbnail = _context16.sent;
-                        return _context16.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
+                        thumbnail = _context17.sent;
+                        return _context17.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
                           src: thumbnail
                         }));
 
                       case 13:
-                        _context16.prev = 13;
-                        _context16.t0 = _context16["catch"](2);
-                        console.error("Error al generar thumbnail del video:", _context16.t0);
-                        return _context16.abrupt("return", value);
+                        _context17.prev = 13;
+                        _context17.t0 = _context17["catch"](2);
+                        console.error("Error al generar thumbnail del video:", _context17.t0);
+                        return _context17.abrupt("return", value);
 
                       case 17:
                       case "end":
-                        return _context16.stop();
+                        return _context17.stop();
                     }
                   }
-                }, _callee16, null, [[2, 13]]);
+                }, _callee17, null, [[2, 13]]);
               }));
 
-              return function (_x9) {
-                return _ref19.apply(this, arguments);
+              return function (_x10) {
+                return _ref21.apply(this, arguments);
               };
             }())));
 
           case 3:
           case "end":
-            return _context17.stop();
+            return _context18.stop();
         }
       }
-    }, _callee17);
+    }, _callee18);
   }));
   return _regenerateVideoThumbnails.apply(this, arguments);
 }
@@ -330,38 +330,50 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
   var _useState27 = (0, _react.useState)(null),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      pendingPropagation = _useState28[0],
-      setPendingPropagation = _useState28[1];
+      loadingVariant = _useState28[0],
+      setLoadingVariant = _useState28[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 _useState29 = (0, _react.useState)(false),
+
+  var _useState29 = (0, _react.useState)(null),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      preparandoPropagacion = _useState30[0],
-      setPreparandoPropagacion = _useState30[1];
+      avisoFamilia = _useState30[0],
+      setAvisoFamilia = _useState30[1];
 
-  var _useState31 = (0, _react.useState)([]),
+  var _useState31 = (0, _react.useState)(null),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      auditServices = _useState32[0],
-      setAuditServices = _useState32[1];
+      pendingPropagation = _useState32[0],
+      setPendingPropagation = _useState32[1];
 
-  var _useState33 = (0, _react.useState)([]),
+  var _useState33 = (0, _react.useState)(false),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      auditDatasheets = _useState34[0],
-      setAuditDatasheets = _useState34[1];
+      preparandoPropagacion = _useState34[0],
+      setPreparandoPropagacion = _useState34[1];
 
   var _useState35 = (0, _react.useState)([]),
       _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      auditDescriptions = _useState36[0],
-      setAuditDescriptions = _useState36[1];
+      auditServices = _useState36[0],
+      setAuditServices = _useState36[1];
 
-  var _useState37 = (0, _react.useState)(false),
+  var _useState37 = (0, _react.useState)([]),
       _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      showModal = _useState38[0],
-      setShowModal = _useState38[1];
+      auditDatasheets = _useState38[0],
+      setAuditDatasheets = _useState38[1];
 
-  var _useState39 = (0, _react.useState)(false),
+  var _useState39 = (0, _react.useState)([]),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      compare = _useState40[0],
-      setCompare = _useState40[1];
+      auditDescriptions = _useState40[0],
+      setAuditDescriptions = _useState40[1];
+
+  var _useState41 = (0, _react.useState)(false),
+      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
+      showModal = _useState42[0],
+      setShowModal = _useState42[1];
+
+  var _useState43 = (0, _react.useState)(false),
+      _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
+      compare = _useState44[0],
+      setCompare = _useState44[1];
 
   var _useDropzone = (0, _reactDropzone.useDropzone)({
     accept: "image/*, video/mp4",
@@ -497,10 +509,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       isDragActive = _useDropzone.isDragActive,
       open = _useDropzone.open;
 
-  var _useState41 = (0, _react.useState)(false),
-      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
-      openChangeStatusModal = _useState42[0],
-      setOpenChangeStatusModal = _useState42[1];
+  var _useState45 = (0, _react.useState)(false),
+      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
+      openChangeStatusModal = _useState46[0],
+      setOpenChangeStatusModal = _useState46[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;
@@ -1220,23 +1232,109 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   }).length;
   var esHijoDeOtro = family !== null && family !== void 0 && family.error ? !!((_state$product11 = state.product) !== null && _state$product11 !== void 0 && _state$product11.parentArticleId) : !!(family !== null && family !== void 0 && family.parent);
   /*
-    En Creators la lista de familia es INFORMATIVA: no se salta a otro producto.
-     Saltar exige precargar el producto destino, y el endpoint que hace eso en la
-    aplicación de clientes —read-articles-v2— filtra por la compañía del usuario:
-    `AND a.company_id = <la del usuario>`. El equipo interno pertenece a ContentOh
-    y trabaja productos de sus clientes, así que ahí no devuelve nada.
-     Navegar sin precargar sería peor que no ofrecerlo: esta pantalla lee el
-    producto de sessionStorage, así que cambiaría la URL y seguiría mostrando el
-    producto anterior, dando a entender que se cambió de producto cuando no.
-     Para habilitarlo hace falta una forma de traer un producto por id sin filtro
-    de compañía, respetando el alcance del perfil interno (§5.1 del contrato).
+    Abre otro producto de la familia.
+     Cambiar la URL no basta: esta pantalla no lee el producto de la ruta sino de
+    sessionStorage —el router hace JSON.parse(sessionStorage.productSelected) y
+    se lo pasa como prop—, así que navegar sin precargar dejaría la URL nueva
+    mostrando el producto anterior. Por eso primero se trae el destino y se
+    escriben las tres llaves que el listado escribe al hacer clic en una fila
+    (productSelected, version, productEdit), y solo entonces se navega.
+     Se pide a /ordered-services y no a read-articles-v2, que es lo que usa la
+    aplicación de clientes: aquel filtra por la compañía del usuario y el equipo
+    interno es de ContentOh trabajando productos de sus clientes, así que ahí no
+    devolvería nada. /ordered-services es el mismo endpoint del listado de esta
+    aplicación, así que el objeto llega con la forma exacta que normalizeProduct
+    espera —con `article` anidado, `statusByRetailer` y `categoryRetailer`—.
+     Un producto de la familia puede no estar en ninguna orden de trabajo: la
+    relación padre/hijo vive en `article` y no exige haber pasado por ContentOh.
+    En ese caso no hay nada que abrir aquí, y se dice en vez de navegar a una
+    pantalla que mostraría el producto equivocado.
   */
 
+  var openFamilyMember = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(articleId) {
+      var _readPayload, res, _ref10, data, encontrado;
+
+      return _regenerator.default.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              setLoadingVariant(articleId);
+              setAvisoFamilia(null);
+              _context6.prev = 2;
+              _context6.next = 5;
+              return _axios.default.get("".concat(process.env.REACT_APP_ORDERED_SERVICES_ENDPOINT), {
+                params: {
+                  filterByIdArticle: articleId,
+                  includeFilters: false
+                },
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 5:
+              res = _context6.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.
+              _ref10 = (_readPayload = (0, _api.readPayload)(res)) !== null && _readPayload !== void 0 ? _readPayload : {}, data = _ref10.data;
+              encontrado = (data !== null && data !== void 0 ? data : []).find(function (item) {
+                var _item$article;
+
+                return Number(item === null || item === void 0 ? void 0 : (_item$article = item.article) === null || _item$article === void 0 ? void 0 : _item$article.id_article) === Number(articleId);
+              });
+
+              if (encontrado) {
+                _context6.next = 11;
+                break;
+              }
+
+              setAvisoFamilia("Ese producto no está en ninguna orden de trabajo, así que no se puede abrir desde aquí.");
+              return _context6.abrupt("return");
+
+            case 11:
+              sessionStorage.setItem("productSelected", JSON.stringify(encontrado));
+              sessionStorage.setItem("version", JSON.stringify(encontrado.version));
+              sessionStorage.setItem("productEdit", JSON.stringify({
+                ArticleId: encontrado.article.id_article,
+                categoryId: encontrado.article.id_article,
+                product: [encontrado]
+              }));
+              window.location.assign("/EditProducts");
+              _context6.next = 21;
+              break;
+
+            case 17:
+              _context6.prev = 17;
+              _context6.t0 = _context6["catch"](2);
+              console.error("openFamilyMember: ", _context6.t0);
+              setAvisoFamilia("No se pudo abrir ese producto. Intenta de nuevo.");
+
+            case 21:
+              _context6.prev = 21;
+              setLoadingVariant(null);
+              return _context6.finish(21);
+
+            case 24:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6, null, [[2, 17, 21, 24]]);
+    }));
+
+    return function openFamilyMember(_x3) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
   /*
-    Refresca tras ligar, sin recargar: el producto sale de sessionStorage, así que
-    un refresh devolvería el mismo objeto y el contador seguiría igual.
+    Refresca tras ligar, sin recargar la página: el producto sale de
+    sessionStorage, así que un F5 devolvería el mismo objeto y el contador
+    seguiría igual.
   */
 
+
   var handleOnLinkedVariants = function handleOnLinkedVariants(result) {
     var _state$product$varian, _state$product12, _result$linked, _result$parentArticle;
 
@@ -1251,13 +1349,57 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       type: "SET_PRODUCT",
       payload: updatedProduct
     });
-    setFamily(null);
+    /*
+      En sessionStorage se PARCHEA lo guardado; no se reemplaza.
+       Lo que hay ahí es el producto tal como lo devuelve el listado de esta
+      aplicación: con `article` anidado, `statusByRetailer`, `categoryRetailer`
+      y los servicios. `updatedProduct` es la versión aplanada que usa esta
+      pantalla, y escribirla encima tiraba todo eso: al siguiente F5 la ficha se
+      reconstruía desde un objeto mutilado —sin relaciones de cadena, sin
+      estatus por cadena— aunque en pantalla se viera bien hasta entonces.
+       De ligar solo cambian dos cosas, y son las dos que se copian aquí.
+    */
 
     try {
-      sessionStorage.setItem("productSelected", JSON.stringify(updatedProduct));
+      var _sessionStorage$getIt;
+
+      var guardado = JSON.parse((_sessionStorage$getIt = sessionStorage.getItem("productSelected")) !== null && _sessionStorage$getIt !== void 0 ? _sessionStorage$getIt : "null");
+
+      if (guardado) {
+        var _updatedProduct$paren;
+
+        sessionStorage.setItem("productSelected", JSON.stringify((0, _objectSpread5.default)((0, _objectSpread5.default)({}, guardado), {}, {
+          variantsCount: updatedProduct.variantsCount,
+          parentArticleId: (_updatedProduct$paren = updatedProduct.parentArticleId) !== null && _updatedProduct$paren !== void 0 ? _updatedProduct$paren : null
+        })));
+      }
     } catch (error) {
+      // Un sessionStorage inaccesible no debe tumbar la pantalla: el estado en
+      // memoria ya quedó bien y es lo que el usuario está viendo.
       console.error("linkVariants/sessionStorage: ", error);
     }
+    /*
+      Volver a preguntar, no vaciar.
+       Antes esto hacía `setFamily(null)` para invalidar la caché, y en esta
+      pantalla eso tenía el efecto contrario al buscado: el bloque de parentesco
+      se decide con `esHijoDeOtro`, que sale de `family`, no del producto. Con
+      `family` en null el bloque desaparecía, así que después de ligar la
+      pantalla se quedaba SIN ninguna señal de que el producto ya tenía padre
+      —justo lo que el usuario acababa de hacer—.
+    */
+
+
+    loadFamily(true);
+    /*
+      Y se recargan los servicios, porque ligar cambia la herencia de cada campo
+      en el servidor: al planchar, lo que era propio pasa a heredado y los chips
+      tienen que decirlo. Sin esto la ficha sigue mostrando el estado anterior
+      hasta que alguien cierra y vuelve a abrir el producto.
+       Sin `enableLoading` para no parpadear el esqueleto encima de una pantalla
+      que ya está pintada.
+    */
+
+    loadData(false);
   };
   /*
     Acción "Volver a heredar" de los chips. Repinta en sitio con lo que devuelve
@@ -1272,31 +1414,31 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
 
   var handleOnRestoreInheritance = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(attributeId) {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(attributeId) {
       var _state$product13;
 
       var kind,
           esDescripcion,
           res,
           data,
-          _args6 = arguments;
-      return _regenerator.default.wrap(function _callee6$(_context6) {
+          _args7 = arguments;
+      return _regenerator.default.wrap(function _callee7$(_context7) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context7.prev = _context7.next) {
             case 0:
-              kind = _args6.length > 1 && _args6[1] !== undefined ? _args6[1] : "attribute";
+              kind = _args7.length > 1 && _args7[1] !== undefined ? _args7[1] : "attribute";
 
               if (!(!attributeId || !((_state$product13 = state.product) !== null && _state$product13 !== void 0 && _state$product13.id_article))) {
-                _context6.next = 3;
+                _context7.next = 3;
                 break;
               }
 
-              return _context6.abrupt("return");
+              return _context7.abrupt("return");
 
             case 3:
               esDescripcion = kind === "description";
-              _context6.prev = 4;
-              _context6.next = 7;
+              _context7.prev = 4;
+              _context7.next = 7;
               return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/restore"), (0, _objectSpread5.default)({
                 articleId: state.product.id_article
               }, esDescripcion ? {
@@ -1310,11 +1452,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 7:
-              res = _context6.sent;
+              res = _context7.sent;
               data = (0, _api.readPayload)(res);
 
               if (!esDescripcion) {
-                _context6.next = 12;
+                _context7.next = 12;
                 break;
               }
 
@@ -1328,7 +1470,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   };
                 })
               });
-              return _context6.abrupt("return");
+              return _context7.abrupt("return");
 
             case 12:
               dispatch({
@@ -1341,24 +1483,24 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   };
                 })
               });
-              _context6.next = 18;
+              _context7.next = 18;
               break;
 
             case 15:
-              _context6.prev = 15;
-              _context6.t0 = _context6["catch"](4);
-              console.error("restoreInheritance: ", _context6.t0);
+              _context7.prev = 15;
+              _context7.t0 = _context7["catch"](4);
+              console.error("restoreInheritance: ", _context7.t0);
 
             case 18:
             case "end":
-              return _context6.stop();
+              return _context7.stop();
           }
         }
-      }, _callee6, null, [[4, 15]]);
+      }, _callee7, null, [[4, 15]]);
     }));
 
-    return function handleOnRestoreInheritance(_x3) {
-      return _ref9.apply(this, arguments);
+    return function handleOnRestoreInheritance(_x4) {
+      return _ref11.apply(this, arguments);
     };
   }();
   /*
@@ -1385,30 +1527,30 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnClickSave = /*#__PURE__*/function () {
-    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
       var esPadre, cambios;
-      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:
               if (!(state.saving || preparandoPropagacion)) {
-                _context7.next = 2;
+                _context8.next = 2;
                 break;
               }
 
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 2:
-              _context7.t0 = state.active_tab;
-              _context7.next = _context7.t0 === "Descripción" ? 5 : _context7.t0 === "Ficha técnica" ? 8 : _context7.t0 === "Imágenes" ? 17 : 20;
+              _context8.t0 = state.active_tab;
+              _context8.next = _context8.t0 === "Descripción" ? 5 : _context8.t0 === "Ficha técnica" ? 8 : _context8.t0 === "Imágenes" ? 17 : 20;
               break;
 
             case 5:
-              _context7.next = 7;
+              _context8.next = 7;
               return saveDescriptions(token);
 
             case 7:
-              return _context7.abrupt("break", 21);
+              return _context8.abrupt("break", 21);
 
             case 8:
               // Guardar un padre con hijos abre la decisión de propagar. Sin este
@@ -1418,7 +1560,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               cambios = cambiosDeFichaTecnica();
 
               if (!(esPadre && cambios.length > 0)) {
-                _context7.next = 14;
+                _context8.next = 14;
                 break;
               }
 
@@ -1430,39 +1572,39 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               }).finally(function () {
                 return setPreparandoPropagacion(false);
               });
-              return _context7.abrupt("return");
+              return _context8.abrupt("return");
 
             case 14:
-              _context7.next = 16;
+              _context8.next = 16;
               return saveDatasheets(token);
 
             case 16:
-              return _context7.abrupt("break", 21);
+              return _context8.abrupt("break", 21);
 
             case 17:
-              _context7.next = 19;
+              _context8.next = 19;
               return updateImages(token);
 
             case 19:
-              return _context7.abrupt("break", 21);
+              return _context8.abrupt("break", 21);
 
             case 20:
-              return _context7.abrupt("break", 21);
+              return _context8.abrupt("break", 21);
 
             case 21:
-              _context7.next = 23;
+              _context8.next = 23;
               return loadData(false);
 
             case 23:
             case "end":
-              return _context7.stop();
+              return _context8.stop();
           }
         }
-      }, _callee7);
+      }, _callee8);
     }));
 
     return function handleOnClickSave() {
-      return _ref10.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }();
 
@@ -1530,24 +1672,24 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnApproveSingleService = /*#__PURE__*/function () {
-    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
-      return _regenerator.default.wrap(function _callee8$(_context8) {
+    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
+      return _regenerator.default.wrap(function _callee9$(_context9) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context9.prev = _context9.next) {
             case 0:
-              _context8.next = 2;
+              _context9.next = 2;
               return sendSingleEvaluation("A");
 
             case 2:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
         }
-      }, _callee8);
+      }, _callee9);
     }));
 
     return function handleOnApproveSingleService() {
-      return _ref11.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
 
@@ -1556,21 +1698,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var sendSingleEvaluation = /*#__PURE__*/function () {
-    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(result) {
+    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10(result) {
       var _state$product$id_ord, _state$active_retaile4;
 
       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 _callee9$(_context9) {
+      return _regenerator.default.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
               if (!state.saving) {
-                _context9.next = 2;
+                _context10.next = 2;
                 break;
               }
 
-              return _context9.abrupt("return");
+              return _context10.abrupt("return");
 
             case 2:
               dispatch({
@@ -1591,16 +1733,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 retailerId: retailerId
               };
               activeTab = state.active_tab;
-              _context9.prev = 11;
+              _context10.prev = 11;
 
               if (!result) {
-                _context9.next = 28;
+                _context10.next = 28;
                 break;
               }
 
               data.result = result;
               data.retailerId = retailerId;
-              _context9.next = 17;
+              _context10.next = 17;
               return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
                 headers: {
                   Authorization: token
@@ -1608,7 +1750,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 17:
-              res = _context9.sent;
+              res = _context10.sent;
               newStatuses = JSON.parse(res.data.body);
               serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")];
               articleStatus = newStatuses.newArticleStatus[articleId];
@@ -1639,7 +1781,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context9.next = 33;
+              _context10.next = 33;
               break;
 
             case 28:
@@ -1655,7 +1797,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 icon = _genericModalCheck.default;
               }
 
-              _context9.next = 32;
+              _context10.next = 32;
               return _axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
                 headers: {
                   Authorization: token
@@ -1663,7 +1805,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 32:
-              res = _context9.sent;
+              res = _context10.sent;
 
             case 33:
               if (res.data.statusCode === 200) {
@@ -1748,13 +1890,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 });
               }
 
-              _context9.next = 40;
+              _context10.next = 40;
               break;
 
             case 36:
-              _context9.prev = 36;
-              _context9.t0 = _context9["catch"](11);
-              console.error("Error sending evaluation:", _context9.t0);
+              _context10.prev = 36;
+              _context10.t0 = _context10["catch"](11);
+              console.error("Error sending evaluation:", _context10.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -1766,45 +1908,45 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 40:
-              _context9.prev = 40;
+              _context10.prev = 40;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context9.finish(40);
+              return _context10.finish(40);
 
             case 43:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
         }
-      }, _callee9, null, [[11, 36, 40, 43]]);
+      }, _callee10, null, [[11, 36, 40, 43]]);
     }));
 
-    return function sendSingleEvaluation(_x4) {
-      return _ref12.apply(this, arguments);
+    return function sendSingleEvaluation(_x5) {
+      return _ref14.apply(this, arguments);
     };
   }();
 
   var handleOnApproveAllServices = /*#__PURE__*/function () {
-    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10() {
-      return _regenerator.default.wrap(function _callee10$(_context10) {
+    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11() {
+      return _regenerator.default.wrap(function _callee11$(_context11) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context11.prev = _context11.next) {
             case 0:
-              _context10.next = 2;
+              _context11.next = 2;
               return sendBulkEvaluation("A");
 
             case 2:
             case "end":
-              return _context10.stop();
+              return _context11.stop();
           }
         }
-      }, _callee10);
+      }, _callee11);
     }));
 
     return function handleOnApproveAllServices() {
-      return _ref13.apply(this, arguments);
+      return _ref15.apply(this, arguments);
     };
   }();
 
@@ -1814,18 +1956,18 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var sendBulkEvaluation = /*#__PURE__*/function () {
-    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
+    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12(result) {
       var _state$services_data3, evaluationArray, conceptArray, status, updatedStatusByRetailer, updatedProduct, updatedServicesData;
 
-      return _regenerator.default.wrap(function _callee11$(_context11) {
+      return _regenerator.default.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context11.prev = _context11.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
               dispatch({
                 type: "SET_SAVING",
                 payload: true
               });
-              _context11.prev = 1;
+              _context12.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) {
@@ -1850,7 +1992,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   }));
                 }
               });
-              _context11.next = 7;
+              _context12.next = 7;
               return Promise.all(evaluationArray);
 
             case 7:
@@ -1905,41 +2047,41 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context11.next = 19;
+              _context12.next = 19;
               break;
 
             case 16:
-              _context11.prev = 16;
-              _context11.t0 = _context11["catch"](1);
-              console.error("Error in bulk evaluation:", _context11.t0);
+              _context12.prev = 16;
+              _context12.t0 = _context12["catch"](1);
+              console.error("Error in bulk evaluation:", _context12.t0);
 
             case 19:
-              _context11.prev = 19;
+              _context12.prev = 19;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context11.finish(19);
+              return _context12.finish(19);
 
             case 22:
             case "end":
-              return _context11.stop();
+              return _context12.stop();
           }
         }
-      }, _callee11, null, [[1, 16, 19, 22]]);
+      }, _callee12, null, [[1, 16, 19, 22]]);
     }));
 
-    return function sendBulkEvaluation(_x5) {
-      return _ref14.apply(this, arguments);
+    return function sendBulkEvaluation(_x6) {
+      return _ref16.apply(this, arguments);
     };
   }();
 
   var handleOnChangeAssignations = /*#__PURE__*/function () {
-    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12(assignationType, assignationId) {
+    var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(assignationType, assignationId) {
       var concept, data, updatedProduct;
-      return _regenerator.default.wrap(function _callee12$(_context12) {
+      return _regenerator.default.wrap(function _callee13$(_context13) {
         while (1) {
-          switch (_context12.prev = _context12.next) {
+          switch (_context13.prev = _context13.next) {
             case 0:
               concept = (0, _utils.getConceptByTab)(state.active_tab);
               data = {
@@ -1950,7 +2092,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 concept: concept,
                 userId: assignationId
               };
-              _context12.next = 4;
+              _context13.next = 4;
               return (0, _axios.default)({
                 method: "post",
                 url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
@@ -1969,14 +2111,14 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 6:
             case "end":
-              return _context12.stop();
+              return _context13.stop();
           }
         }
-      }, _callee12);
+      }, _callee13);
     }));
 
-    return function handleOnChangeAssignations(_x6, _x7) {
-      return _ref15.apply(this, arguments);
+    return function handleOnChangeAssignations(_x7, _x8) {
+      return _ref17.apply(this, arguments);
     };
   }();
 
@@ -2011,16 +2153,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnSubmitComment = /*#__PURE__*/function () {
-    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(e) {
+    var _ref18 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(e) {
       var commentText;
-      return _regenerator.default.wrap(function _callee13$(_context13) {
+      return _regenerator.default.wrap(function _callee14$(_context14) {
         while (1) {
-          switch (_context13.prev = _context13.next) {
+          switch (_context14.prev = _context14.next) {
             case 0:
               e.preventDefault();
               commentText = document.querySelector("#commentary-box .ql-container .ql-editor > p").innerHTML;
-              _context13.prev = 2;
-              _context13.next = 5;
+              _context14.prev = 2;
+              _context14.next = 5;
               return createComment(commentText, token);
 
             case 5:
@@ -2033,13 +2175,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context13.next = 12;
+              _context14.next = 12;
               break;
 
             case 8:
-              _context13.prev = 8;
-              _context13.t0 = _context13["catch"](2);
-              console.error("Error saving comment:", _context13.t0);
+              _context14.prev = 8;
+              _context14.t0 = _context14["catch"](2);
+              console.error("Error saving comment:", _context14.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -2052,14 +2194,14 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 12:
             case "end":
-              return _context13.stop();
+              return _context14.stop();
           }
         }
-      }, _callee13, null, [[2, 8]]);
+      }, _callee14, null, [[2, 8]]);
     }));
 
-    return function handleOnSubmitComment(_x8) {
-      return _ref16.apply(this, arguments);
+    return function handleOnSubmitComment(_x9) {
+      return _ref18.apply(this, arguments);
     };
   }();
 
@@ -2423,21 +2565,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           type: "pink",
           label: "Aceptar",
           size: 12,
-          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14() {
+          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15() {
             var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
-            return _regenerator.default.wrap(function _callee14$(_context14) {
+            return _regenerator.default.wrap(function _callee15$(_context15) {
               while (1) {
-                switch (_context14.prev = _context14.next) {
+                switch (_context15.prev = _context15.next) {
                   case 0:
                     elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
 
                     if (!(!elements || elements.length === 0)) {
-                      _context14.next = 4;
+                      _context15.next = 4;
                       break;
                     }
 
                     console.error("Elemento no encontrado");
-                    return _context14.abrupt("return");
+                    return _context15.abrupt("return");
 
                   case 4:
                     isMessageEmpty = Array.from(elements).every(function (el) {
@@ -2446,7 +2588,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                     });
 
                     if (!isMessageEmpty) {
-                      _context14.next = 10;
+                      _context15.next = 10;
                       break;
                     }
 
@@ -2461,13 +2603,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                       container.appendChild(alert);
                     }
 
-                    return _context14.abrupt("return");
+                    return _context15.abrupt("return");
 
                   case 10:
                     fullMessage = Array.from(elements).map(function (element) {
                       return element.innerHTML;
                     }).join("").replace(/<br\s*\/?>/gi, "\n");
-                    _context14.next = 13;
+                    _context15.next = 13;
                     return createComment(fullMessage, token);
 
                   case 13:
@@ -2476,10 +2618,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
                   case 15:
                   case "end":
-                    return _context14.stop();
+                    return _context15.stop();
                 }
               }
-            }, _callee14);
+            }, _callee15);
           }))
         }, "btn-Aceptar")]
       }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
@@ -2621,11 +2763,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             }), (family === null || family === void 0 ? void 0 : family.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
               className: "loading",
               children: "No se pudo cargar la familia de este producto."
-            }), (family === null || family === void 0 ? void 0 : family.parent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            }), (family === null || family === void 0 ? void 0 : family.parent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
               className: "family-row parent",
+              disabled: loadingVariant !== null,
+              onClick: function onClick() {
+                return openFamilyMember(family.parent.articleId);
+              },
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "role",
-                children: "Producto padre"
+                children: loadingVariant === family.parent.articleId ? "Abriendo…" : "Producto padre"
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 className: "name",
                 children: family.parent.name
@@ -2634,11 +2781,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 children: family.parent.upc
               })]
             }), 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)("div", {
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+                type: "button",
                 className: "family-row".concat(variant.isCurrent ? " current" : ""),
+                disabled: variant.isCurrent || loadingVariant !== null,
+                onClick: function onClick() {
+                  return openFamilyMember(variant.articleId);
+                },
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "role",
-                  children: variant.isCurrent ? "Estás aquí" : "Hijo"
+                  children: loadingVariant === variant.articleId ? "Abriendo…" : variant.isCurrent ? "Estás aquí" : "Hijo"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "name",
                   children: variant.name
@@ -2650,6 +2802,9 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             }), 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 hijos."
+            }), avisoFamilia && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: "loading",
+              children: avisoFamilia
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader // states
           , {
@@ -2840,20 +2995,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 _callee15() {
-                  return _regenerator.default.wrap(function _callee15$(_context15) {
+                onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16() {
+                  return _regenerator.default.wrap(function _callee16$(_context16) {
                     while (1) {
-                      switch (_context15.prev = _context15.next) {
+                      switch (_context16.prev = _context16.next) {
                         case 0:
                           setCrossComment(true);
                           commentRevised();
 
                         case 2:
                         case "end":
-                          return _context15.stop();
+                          return _context16.stop();
                       }
                     }
-                  }, _callee15);
+                  }, _callee16);
                 }))
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {