contentoh-components-library 21.6.30 → 21.6.32

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

@@ -73,6 +73,12 @@ var _VersionSelector = require("../../organisms/VersionSelector");
 
 var _Modal = require("../../organisms/Modal");
 
+var _LinkVariantsModal = require("../../organisms/LinkVariantsModal");
+
+var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
+
+var _api = require("../../organisms/LinkVariantsModal/api");
+
 var _genericModalCheck = _interopRequireDefault(require("../../../assets/images/genericModal/genericModalCheck.svg"));
 
 var _errorModal = _interopRequireDefault(require("../../../assets/images/genericModal/errorModal.svg"));
@@ -154,81 +160,81 @@ function regenerateVideoThumbnails(_x) {
 }
 
 function _regenerateVideoThumbnails() {
-  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15(values) {
-    return _regenerator.default.wrap(function _callee15$(_context15) {
+  _regenerateVideoThumbnails = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee17(values) {
+    return _regenerator.default.wrap(function _callee17$(_context17) {
       while (1) {
-        switch (_context15.prev = _context15.next) {
+        switch (_context17.prev = _context17.next) {
           case 0:
             if (Array.isArray(values)) {
-              _context15.next = 2;
+              _context17.next = 2;
               break;
             }
 
-            return _context15.abrupt("return", values);
+            return _context17.abrupt("return", values);
 
           case 2:
-            return _context15.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
-              var _ref17 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14(value) {
+            return _context17.abrupt("return", Promise.all(values.map( /*#__PURE__*/function () {
+              var _ref19 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee16(value) {
                 var base64, videoSrc, thumbnail;
-                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:
                         if (!((value === null || value === void 0 ? void 0 : value.ext) !== "mp4" || !(value !== null && value !== void 0 && value.srcDB))) {
-                          _context14.next = 2;
+                          _context16.next = 2;
                           break;
                         }
 
-                        return _context14.abrupt("return", value);
+                        return _context16.abrupt("return", value);
 
                       case 2:
-                        _context14.prev = 2;
-                        _context14.next = 5;
+                        _context16.prev = 2;
+                        _context16.next = 5;
                         return convertirVideoABase64("https://" + process.env.REACT_APP_IMAGES_BUCKET + ".s3.amazonaws.com/" + value.srcDB);
 
                       case 5:
-                        base64 = _context14.sent;
+                        base64 = _context16.sent;
                         videoSrc = "data:video/mp4;base64," + base64.split(",")[1];
-                        _context14.next = 9;
+                        _context16.next = 9;
                         return (0, _generateThumnail.default)(videoSrc, 2);
 
                       case 9:
-                        thumbnail = _context14.sent;
-                        return _context14.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
+                        thumbnail = _context16.sent;
+                        return _context16.abrupt("return", (0, _objectSpread5.default)((0, _objectSpread5.default)({}, value), {}, {
                           src: thumbnail
                         }));
 
                       case 13:
-                        _context14.prev = 13;
-                        _context14.t0 = _context14["catch"](2);
-                        console.error("Error al generar thumbnail del video:", _context14.t0);
-                        return _context14.abrupt("return", value);
+                        _context16.prev = 13;
+                        _context16.t0 = _context16["catch"](2);
+                        console.error("Error al generar thumbnail del video:", _context16.t0);
+                        return _context16.abrupt("return", value);
 
                       case 17:
                       case "end":
-                        return _context14.stop();
+                        return _context16.stop();
                     }
                   }
-                }, _callee14, null, [[2, 13]]);
+                }, _callee16, null, [[2, 13]]);
               }));
 
-              return function (_x8) {
-                return _ref17.apply(this, arguments);
+              return function (_x9) {
+                return _ref19.apply(this, arguments);
               };
             }())));
 
           case 3:
           case "end":
-            return _context15.stop();
+            return _context17.stop();
         }
       }
-    }, _callee15);
+    }, _callee17);
   }));
   return _regenerateVideoThumbnails.apply(this, arguments);
 }
 
 var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
-  var _state$errors, _location$state, _location$state2, _state$active_retaile4, _state$active_retaile5, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product8, _state$active_retaile6, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile7, _state$active_retaile8, _state$active_retaile9, _state$product9, _state$product10, _state$product11, _state$datasheets_inp, _state$datasheets_inp2, _state$product12, _state$images_values12, _state$comment;
+  var _state$product10, _family$variants, _state$product11, _state$errors, _family$variants2, _state$product14, _state$product15, _state$product16, _state$active_retaile5, _location$state, _location$state2, _state$active_retaile6, _state$active_retaile7, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product17, _state$active_retaile8, _family$variants3, _family$variants4, _state$active_percent, _state$active_percent2, _state$active_percent3, _state$active_retaile9, _state$active_retaile10, _state$active_retaile11, _state$product18, _state$product19, _state$product20, _state$datasheets_inp, _state$datasheets_inp2, _state$product21, _state$images_values12, _state$comment;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -304,32 +310,58 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   var _useState19 = (0, _react.useState)(false),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
       rejectAll = _useState20[0],
-      setRejectAll = _useState20[1];
+      setRejectAll = _useState20[1]; // Variantes: mismo comportamiento que la ficha de la aplicación de clientes.
 
-  var _useState21 = (0, _react.useState)([]),
+
+  var _useState21 = (0, _react.useState)(false),
       _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      auditServices = _useState22[0],
-      setAuditServices = _useState22[1];
+      showLinkVariants = _useState22[0],
+      setShowLinkVariants = _useState22[1];
 
-  var _useState23 = (0, _react.useState)([]),
+  var _useState23 = (0, _react.useState)(null),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      auditDatasheets = _useState24[0],
-      setAuditDatasheets = _useState24[1];
+      family = _useState24[0],
+      setFamily = _useState24[1];
 
-  var _useState25 = (0, _react.useState)([]),
+  var _useState25 = (0, _react.useState)(false),
       _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      auditDescriptions = _useState26[0],
-      setAuditDescriptions = _useState26[1];
+      showFamily = _useState26[0],
+      setShowFamily = _useState26[1];
 
-  var _useState27 = (0, _react.useState)(false),
+  var _useState27 = (0, _react.useState)(null),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
-      showModal = _useState28[0],
-      setShowModal = _useState28[1];
+      pendingPropagation = _useState28[0],
+      setPendingPropagation = _useState28[1];
 
   var _useState29 = (0, _react.useState)(false),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      compare = _useState30[0],
-      setCompare = _useState30[1];
+      preparandoPropagacion = _useState30[0],
+      setPreparandoPropagacion = _useState30[1];
+
+  var _useState31 = (0, _react.useState)([]),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      auditServices = _useState32[0],
+      setAuditServices = _useState32[1];
+
+  var _useState33 = (0, _react.useState)([]),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      auditDatasheets = _useState34[0],
+      setAuditDatasheets = _useState34[1];
+
+  var _useState35 = (0, _react.useState)([]),
+      _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
+      auditDescriptions = _useState36[0],
+      setAuditDescriptions = _useState36[1];
+
+  var _useState37 = (0, _react.useState)(false),
+      _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
+      showModal = _useState38[0],
+      setShowModal = _useState38[1];
+
+  var _useState39 = (0, _react.useState)(false),
+      _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
+      compare = _useState40[0],
+      setCompare = _useState40[1];
 
   var _useDropzone = (0, _reactDropzone.useDropzone)({
     accept: "image/*, video/mp4",
@@ -465,10 +497,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       isDragActive = _useDropzone.isDragActive,
       open = _useDropzone.open;
 
-  var _useState31 = (0, _react.useState)(false),
-      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      openChangeStatusModal = _useState32[0],
-      setOpenChangeStatusModal = _useState32[1];
+  var _useState41 = (0, _react.useState)(false),
+      _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
+      openChangeStatusModal = _useState42[0],
+      setOpenChangeStatusModal = _useState42[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;
@@ -1095,63 +1127,307 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       saveImageAttrs(token);
     }
   };
+  /*
+    Trae la familia: las variantes del producto, o sus hermanas si el abierto es
+    una de ellas. Se pide al abrir la sección y no al montar la pantalla: la
+    mayoría de los productos no son familia.
+  */
 
-  var handleOnClickSave = /*#__PURE__*/function () {
+
+  var loadFamily = /*#__PURE__*/function () {
     var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+      var forzar,
+          _state$product8,
+          res,
+          data,
+          _args5 = arguments;
+
       return _regenerator.default.wrap(function _callee5$(_context5) {
         while (1) {
           switch (_context5.prev = _context5.next) {
             case 0:
-              if (!state.saving) {
-                _context5.next = 2;
+              forzar = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : false;
+
+              if (!(family && !forzar)) {
+                _context5.next = 3;
+                break;
+              }
+
+              return _context5.abrupt("return", family);
+
+            case 3:
+              _context5.prev = 3;
+              _context5.next = 6;
+              return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/family"), {
+                articleId: (_state$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.id_article
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 6:
+              res = _context5.sent;
+              data = (0, _api.readPayload)(res);
+              setFamily(data);
+              return _context5.abrupt("return", data);
+
+            case 12:
+              _context5.prev = 12;
+              _context5.t0 = _context5["catch"](3);
+              console.error("loadFamily: ", _context5.t0);
+              setFamily({
+                variants: [],
+                parent: null,
+                error: true
+              });
+              return _context5.abrupt("return", null);
+
+            case 17:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5, null, [[3, 12]]);
+    }));
+
+    return function loadFamily() {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  /*
+    En Creators el parentesco se pregunta, no viene con el producto.
+     Su listado sale del endpoint de reportes, que no trae `variantsCount` ni
+    `parentArticleId`: esas columnas se agregaron a las vistas pero DynamoDB no
+    las tiene hasta que se corra el recorrido de datos. Y aunque las tuviera,
+    dependería de lo actualizado que esté ese recorrido.
+     Preguntar a `family` cuesta una llamada por ficha y da el dato de la base, no
+    de una copia. Además aplica el alcance del perfil (§5.1): al equipo interno le
+    devuelve los productos solicitados a ContentOh, que es justo lo que puede
+    tocar.
+  */
+
+
+  (0, _react.useEffect)(function () {
+    var _state$product9;
+
+    if (!((_state$product9 = state.product) !== null && _state$product9 !== void 0 && _state$product9.id_article)) return;
+    loadFamily(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.id_article]); // El conteo sale de la familia recién consultada, no del producto.
+
+  var variantesDelProducto = family !== null && family !== void 0 && family.error ? 0 : ((_family$variants = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants !== void 0 ? _family$variants : []).filter(function (v) {
+    return !v.isCurrent;
+  }).length;
+  var esVarianteDeOtro = 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 otra variante.
+     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 variante 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).
+  */
+
+  /*
+    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.
+  */
+
+  var handleOnLinkedVariants = function handleOnLinkedVariants(result) {
+    var _state$product$varian, _state$product12, _result$linked, _result$parentArticle;
+
+    if (!result) return;
+    var updatedProduct = result.mode === "children" ? (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
+      variantsCount: ((_state$product$varian = (_state$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.variantsCount) !== null && _state$product$varian !== void 0 ? _state$product$varian : 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
+    });
+    dispatch({
+      type: "SET_PRODUCT",
+      payload: updatedProduct
+    });
+    setFamily(null);
+
+    try {
+      sessionStorage.setItem("productSelected", JSON.stringify(updatedProduct));
+    } catch (error) {
+      console.error("linkVariants/sessionStorage: ", error);
+    }
+  };
+  /*
+    Acción "Volver a heredar" de los chips. Repinta en sitio con lo que devuelve
+    el endpoint: recargar la ficha se llevaría lo que haya sin guardar.
+  */
+
+
+  var handleOnRestoreInheritance = /*#__PURE__*/function () {
+    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(attributeId) {
+      var _state$product13;
+
+      var res, data;
+      return _regenerator.default.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              if (!(!attributeId || !((_state$product13 = state.product) !== null && _state$product13 !== void 0 && _state$product13.id_article))) {
+                _context6.next = 2;
+                break;
+              }
+
+              return _context6.abrupt("return");
+
+            case 2:
+              _context6.prev = 2;
+              _context6.next = 5;
+              return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/restore"), {
+                articleId: state.product.id_article,
+                attributes: [Number(attributeId)]
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 5:
+              res = _context6.sent;
+              data = (0, _api.readPayload)(res);
+              dispatch({
+                type: "UPDATE_DATASHEETS_INPUTS",
+                payload: (data.values || []).map(function (item) {
+                  return {
+                    attributeId: item.id,
+                    value: item.value,
+                    isOverridden: 0
+                  };
+                })
+              });
+              _context6.next = 13;
+              break;
+
+            case 10:
+              _context6.prev = 10;
+              _context6.t0 = _context6["catch"](2);
+              console.error("restoreInheritance: ", _context6.t0);
+
+            case 13:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6, null, [[2, 10]]);
+    }));
+
+    return function handleOnRestoreInheritance(_x3) {
+      return _ref9.apply(this, arguments);
+    };
+  }();
+  /*
+    Los atributos recién tocados, con el nombre que ve el usuario:
+    `updated_datasheets_inputs` solo trae { attributeId, value }.
+  */
+
+
+  var cambiosDeFichaTecnica = function cambiosDeFichaTecnica() {
+    var _state$active_retaile3, _state$services$datas, _state$services, _state$services$datas2, _state$updated_datash;
+
+    var retailerId = (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer;
+    var inputs = (_state$services$datas = (_state$services = state.services) === null || _state$services === void 0 ? void 0 : (_state$services$datas2 = _state$services.datasheets) === null || _state$services$datas2 === void 0 ? void 0 : _state$services$datas2.inputs) !== null && _state$services$datas !== void 0 ? _state$services$datas : {};
+    return ((_state$updated_datash = state.updated_datasheets_inputs) !== null && _state$updated_datash !== void 0 ? _state$updated_datash : []).map(function (item) {
+      var _input$name;
+
+      var input = inputs["".concat(item.attributeId, "_").concat(retailerId)];
+      return {
+        id: Number(item.attributeId),
+        name: (_input$name = input === null || input === void 0 ? void 0 : input.name) !== null && _input$name !== void 0 ? _input$name : "Atributo ".concat(item.attributeId),
+        value: item.value
+      };
+    });
+  };
+
+  var handleOnClickSave = /*#__PURE__*/function () {
+    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7() {
+      var esPadre, cambios;
+      return _regenerator.default.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              if (!(state.saving || preparandoPropagacion)) {
+                _context7.next = 2;
                 break;
               }
 
-              return _context5.abrupt("return");
+              return _context7.abrupt("return");
 
             case 2:
-              _context5.t0 = state.active_tab;
-              _context5.next = _context5.t0 === "Descripción" ? 5 : _context5.t0 === "Ficha técnica" ? 8 : _context5.t0 === "Imágenes" ? 11 : 14;
+              _context7.t0 = state.active_tab;
+              _context7.next = _context7.t0 === "Descripción" ? 5 : _context7.t0 === "Ficha técnica" ? 8 : _context7.t0 === "Imágenes" ? 17 : 20;
               break;
 
             case 5:
-              _context5.next = 7;
+              _context7.next = 7;
               return saveDescriptions(token);
 
             case 7:
-              return _context5.abrupt("break", 15);
+              return _context7.abrupt("break", 21);
 
             case 8:
-              _context5.next = 10;
+              // Guardar un padre con variantes abre la decisión de propagar. Sin este
+              // paso el cambio se queda solo en el padre y las variantes se van
+              // separando de él sin que nadie lo note.
+              esPadre = variantesDelProducto > 0;
+              cambios = cambiosDeFichaTecnica();
+
+              if (!(esPadre && cambios.length > 0)) {
+                _context7.next = 14;
+                break;
+              }
+
+              setPreparandoPropagacion(true);
+              loadFamily().then(function () {
+                return setPendingPropagation({
+                  cambios: cambios
+                });
+              }).finally(function () {
+                return setPreparandoPropagacion(false);
+              });
+              return _context7.abrupt("return");
+
+            case 14:
+              _context7.next = 16;
               return saveDatasheets(token);
 
-            case 10:
-              return _context5.abrupt("break", 15);
+            case 16:
+              return _context7.abrupt("break", 21);
 
-            case 11:
-              _context5.next = 13;
+            case 17:
+              _context7.next = 19;
               return updateImages(token);
 
-            case 13:
-              return _context5.abrupt("break", 15);
+            case 19:
+              return _context7.abrupt("break", 21);
 
-            case 14:
-              return _context5.abrupt("break", 15);
+            case 20:
+              return _context7.abrupt("break", 21);
 
-            case 15:
-              _context5.next = 17;
+            case 21:
+              _context7.next = 23;
               return loadData(false);
 
-            case 17:
+            case 23:
             case "end":
-              return _context5.stop();
+              return _context7.stop();
           }
         }
-      }, _callee5);
+      }, _callee7);
     }));
 
     return function handleOnClickSave() {
-      return _ref8.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }();
 
@@ -1219,24 +1495,24 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnApproveSingleService = /*#__PURE__*/function () {
-    var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
-      return _regenerator.default.wrap(function _callee6$(_context6) {
+    var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
+      return _regenerator.default.wrap(function _callee8$(_context8) {
         while (1) {
-          switch (_context6.prev = _context6.next) {
+          switch (_context8.prev = _context8.next) {
             case 0:
-              _context6.next = 2;
+              _context8.next = 2;
               return sendSingleEvaluation("A");
 
             case 2:
             case "end":
-              return _context6.stop();
+              return _context8.stop();
           }
         }
-      }, _callee6);
+      }, _callee8);
     }));
 
     return function handleOnApproveSingleService() {
-      return _ref9.apply(this, arguments);
+      return _ref11.apply(this, arguments);
     };
   }();
 
@@ -1245,21 +1521,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var sendSingleEvaluation = /*#__PURE__*/function () {
-    var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(result) {
-      var _state$product$id_ord, _state$active_retaile3;
+    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(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 _callee7$(_context7) {
+      return _regenerator.default.wrap(function _callee9$(_context9) {
         while (1) {
-          switch (_context7.prev = _context7.next) {
+          switch (_context9.prev = _context9.next) {
             case 0:
               if (!state.saving) {
-                _context7.next = 2;
+                _context9.next = 2;
                 break;
               }
 
-              return _context7.abrupt("return");
+              return _context9.abrupt("return");
 
             case 2:
               dispatch({
@@ -1271,7 +1547,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               orderId = (_state$product$id_ord = state.product.id_order) !== null && _state$product$id_ord !== void 0 ? _state$product$id_ord : state.product.orderId;
               sectionStatusKey = "".concat(concept, "_status");
               evalStatus = state.product[sectionStatusKey];
-              retailerId = (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer;
+              retailerId = (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.id_retailer;
               data = {
                 articleId: articleId,
                 orderId: orderId,
@@ -1280,16 +1556,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 retailerId: retailerId
               };
               activeTab = state.active_tab;
-              _context7.prev = 11;
+              _context9.prev = 11;
 
               if (!result) {
-                _context7.next = 28;
+                _context9.next = 28;
                 break;
               }
 
               data.result = result;
               data.retailerId = retailerId;
-              _context7.next = 17;
+              _context9.next = 17;
               return _axios.default.put("".concat(process.env.REACT_APP_EVALUATION_ENDPOINT), data, {
                 headers: {
                   Authorization: token
@@ -1297,7 +1573,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 17:
-              res = _context7.sent;
+              res = _context9.sent;
               newStatuses = JSON.parse(res.data.body);
               serviceStatus = newStatuses.newServiceStatus[articleId]["".concat(concept, "Status")];
               articleStatus = newStatuses.newArticleStatus[articleId];
@@ -1328,7 +1604,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context7.next = 33;
+              _context9.next = 33;
               break;
 
             case 28:
@@ -1344,7 +1620,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 icon = _genericModalCheck.default;
               }
 
-              _context7.next = 32;
+              _context9.next = 32;
               return _axios.default.put("".concat(process.env.REACT_APP_SEND_EVAL), data, {
                 headers: {
                   Authorization: token
@@ -1352,7 +1628,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 32:
-              res = _context7.sent;
+              res = _context9.sent;
 
             case 33:
               if (res.data.statusCode === 200) {
@@ -1437,13 +1713,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 });
               }
 
-              _context7.next = 40;
+              _context9.next = 40;
               break;
 
             case 36:
-              _context7.prev = 36;
-              _context7.t0 = _context7["catch"](11);
-              console.error("Error sending evaluation:", _context7.t0);
+              _context9.prev = 36;
+              _context9.t0 = _context9["catch"](11);
+              console.error("Error sending evaluation:", _context9.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -1455,45 +1731,45 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               });
 
             case 40:
-              _context7.prev = 40;
+              _context9.prev = 40;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context7.finish(40);
+              return _context9.finish(40);
 
             case 43:
             case "end":
-              return _context7.stop();
+              return _context9.stop();
           }
         }
-      }, _callee7, null, [[11, 36, 40, 43]]);
+      }, _callee9, null, [[11, 36, 40, 43]]);
     }));
 
-    return function sendSingleEvaluation(_x3) {
-      return _ref10.apply(this, arguments);
+    return function sendSingleEvaluation(_x4) {
+      return _ref12.apply(this, arguments);
     };
   }();
 
   var handleOnApproveAllServices = /*#__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 _callee10() {
+      return _regenerator.default.wrap(function _callee10$(_context10) {
         while (1) {
-          switch (_context8.prev = _context8.next) {
+          switch (_context10.prev = _context10.next) {
             case 0:
-              _context8.next = 2;
+              _context10.next = 2;
               return sendBulkEvaluation("A");
 
             case 2:
             case "end":
-              return _context8.stop();
+              return _context10.stop();
           }
         }
-      }, _callee8);
+      }, _callee10);
     }));
 
     return function handleOnApproveAllServices() {
-      return _ref11.apply(this, arguments);
+      return _ref13.apply(this, arguments);
     };
   }();
 
@@ -1503,18 +1779,18 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var sendBulkEvaluation = /*#__PURE__*/function () {
-    var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9(result) {
+    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(result) {
       var _state$services_data3, evaluationArray, conceptArray, status, updatedStatusByRetailer, updatedProduct, updatedServicesData;
 
-      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:
               dispatch({
                 type: "SET_SAVING",
                 payload: true
               });
-              _context9.prev = 1;
+              _context11.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) {
@@ -1539,7 +1815,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   }));
                 }
               });
-              _context9.next = 7;
+              _context11.next = 7;
               return Promise.all(evaluationArray);
 
             case 7:
@@ -1594,41 +1870,41 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context9.next = 19;
+              _context11.next = 19;
               break;
 
             case 16:
-              _context9.prev = 16;
-              _context9.t0 = _context9["catch"](1);
-              console.error("Error in bulk evaluation:", _context9.t0);
+              _context11.prev = 16;
+              _context11.t0 = _context11["catch"](1);
+              console.error("Error in bulk evaluation:", _context11.t0);
 
             case 19:
-              _context9.prev = 19;
+              _context11.prev = 19;
               dispatch({
                 type: "SET_SAVING",
                 payload: false
               });
-              return _context9.finish(19);
+              return _context11.finish(19);
 
             case 22:
             case "end":
-              return _context9.stop();
+              return _context11.stop();
           }
         }
-      }, _callee9, null, [[1, 16, 19, 22]]);
+      }, _callee11, null, [[1, 16, 19, 22]]);
     }));
 
-    return function sendBulkEvaluation(_x4) {
-      return _ref12.apply(this, arguments);
+    return function sendBulkEvaluation(_x5) {
+      return _ref14.apply(this, arguments);
     };
   }();
 
   var handleOnChangeAssignations = /*#__PURE__*/function () {
-    var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee10(assignationType, assignationId) {
+    var _ref15 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12(assignationType, assignationId) {
       var concept, data, updatedProduct;
-      return _regenerator.default.wrap(function _callee10$(_context10) {
+      return _regenerator.default.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context10.prev = _context10.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
               concept = (0, _utils.getConceptByTab)(state.active_tab);
               data = {
@@ -1639,7 +1915,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 concept: concept,
                 userId: assignationId
               };
-              _context10.next = 4;
+              _context12.next = 4;
               return (0, _axios.default)({
                 method: "post",
                 url: process.env.REACT_APP_ASSIGNATIONS_ENDPOINT,
@@ -1658,14 +1934,14 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 6:
             case "end":
-              return _context10.stop();
+              return _context12.stop();
           }
         }
-      }, _callee10);
+      }, _callee12);
     }));
 
-    return function handleOnChangeAssignations(_x5, _x6) {
-      return _ref13.apply(this, arguments);
+    return function handleOnChangeAssignations(_x6, _x7) {
+      return _ref15.apply(this, arguments);
     };
   }();
 
@@ -1700,16 +1976,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   };
 
   var handleOnSubmitComment = /*#__PURE__*/function () {
-    var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee11(e) {
+    var _ref16 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee13(e) {
       var commentText;
-      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:
               e.preventDefault();
               commentText = document.querySelector("#commentary-box .ql-container .ql-editor > p").innerHTML;
-              _context11.prev = 2;
-              _context11.next = 5;
+              _context13.prev = 2;
+              _context13.next = 5;
               return createComment(commentText, token);
 
             case 5:
@@ -1722,13 +1998,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                   image: _genericModalCheck.default
                 }
               });
-              _context11.next = 12;
+              _context13.next = 12;
               break;
 
             case 8:
-              _context11.prev = 8;
-              _context11.t0 = _context11["catch"](2);
-              console.error("Error saving comment:", _context11.t0);
+              _context13.prev = 8;
+              _context13.t0 = _context13["catch"](2);
+              console.error("Error saving comment:", _context13.t0);
               dispatch({
                 type: "SET_MODAL",
                 payload: {
@@ -1741,14 +2017,14 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 12:
             case "end":
-              return _context11.stop();
+              return _context13.stop();
           }
         }
-      }, _callee11, null, [[2, 8]]);
+      }, _callee13, null, [[2, 8]]);
     }));
 
-    return function handleOnSubmitComment(_x7) {
-      return _ref14.apply(this, arguments);
+    return function handleOnSubmitComment(_x8) {
+      return _ref16.apply(this, arguments);
     };
   }();
 
@@ -2069,7 +2345,30 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
     state: state,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       headerTop: headerTop,
-      children: [showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
+      children: [pendingPropagation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_PropagateChangesModal.PropagateChangesModal, {
+        changedAttributes: pendingPropagation.cambios,
+        variants: ((_family$variants2 = family === null || family === void 0 ? void 0 : family.variants) !== null && _family$variants2 !== void 0 ? _family$variants2 : []).filter(function (v) {
+          return !v.isCurrent;
+        }),
+        saving: state.saving,
+        onCancel: function onCancel() {
+          return setPendingPropagation(null);
+        },
+        onConfirm: function onConfirm(propagation) {
+          setPendingPropagation(null);
+          saveDatasheets(token, propagation !== null && propagation !== void 0 ? propagation : undefined);
+        }
+      }), showLinkVariants && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkVariantsModal.LinkVariantsModal, {
+        articleId: (_state$product14 = state.product) === null || _state$product14 === void 0 ? void 0 : _state$product14.id_article,
+        articleName: (_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.name,
+        articleUpc: (_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : _state$product16.upc,
+        activeRetailerId: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.id_retailer,
+        token: token,
+        onClose: function onClose() {
+          return setShowLinkVariants(false);
+        },
+        onLinked: handleOnLinkedVariants
+      }), showRejectModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.Modal, {
         title: rejectAll ? "Agregar mensaje para rechazar todo" : "Agregar mensaje de rechazo",
         show: showRejectModal,
         customComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TagAndInput, {
@@ -2089,21 +2388,21 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           type: "pink",
           label: "Aceptar",
           size: 12,
-          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee12() {
+          onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee14() {
             var elements, isMessageEmpty, container, existingAlert, alert, fullMessage;
-            return _regenerator.default.wrap(function _callee12$(_context12) {
+            return _regenerator.default.wrap(function _callee14$(_context14) {
               while (1) {
-                switch (_context12.prev = _context12.next) {
+                switch (_context14.prev = _context14.next) {
                   case 0:
                     elements = document.querySelectorAll("#modal-message-box .ql-container .ql-editor > p");
 
                     if (!(!elements || elements.length === 0)) {
-                      _context12.next = 4;
+                      _context14.next = 4;
                       break;
                     }
 
                     console.error("Elemento no encontrado");
-                    return _context12.abrupt("return");
+                    return _context14.abrupt("return");
 
                   case 4:
                     isMessageEmpty = Array.from(elements).every(function (el) {
@@ -2112,7 +2411,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                     });
 
                     if (!isMessageEmpty) {
-                      _context12.next = 10;
+                      _context14.next = 10;
                       break;
                     }
 
@@ -2127,13 +2426,13 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                       container.appendChild(alert);
                     }
 
-                    return _context12.abrupt("return");
+                    return _context14.abrupt("return");
 
                   case 10:
                     fullMessage = Array.from(elements).map(function (element) {
                       return element.innerHTML;
                     }).join("").replace(/<br\s*\/?>/gi, "\n");
-                    _context12.next = 13;
+                    _context14.next = 13;
                     return createComment(fullMessage, token);
 
                   case 13:
@@ -2142,10 +2441,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
                   case 15:
                   case "end":
-                    return _context12.stop();
+                    return _context14.stop();
                 }
               }
-            }, _callee12);
+            }, _callee14);
           }))
         }, "btn-Aceptar")]
       }), state.modal.show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
@@ -2206,8 +2505,8 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
         productSelected: state.product,
         token: token,
         activeRetailer: {
-          id: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.id_retailer,
-          name: (_state$active_retaile5 = state.active_retailer) === null || _state$active_retaile5 === void 0 ? void 0 : _state$active_retaile5.retailer
+          id: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
+          name: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.retailer
         }
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "data-container",
@@ -2223,8 +2522,8 @@ 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$product8 = state.product) === null || _state$product8 === void 0 ? void 0 : _state$product8.images_status) || "-",
-            retailerSelected: (_state$active_retaile6 = state.active_retailer) === null || _state$active_retaile6 === void 0 ? void 0 : _state$active_retaile6.id_retailer,
+            imagesStatus: ((_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.images_status) || "-",
+            retailerSelected: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.id_retailer,
             isRetailer: isRetailer,
             version: state.product.version,
             shotThd: shotThd,
@@ -2238,15 +2537,94 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           className: "product-information",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader // states
+          children: [!esVarianteDeOtro && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "variants-actions",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "button",
+              className: "link-variants",
+              onClick: function onClick() {
+                return setShowLinkVariants(true);
+              },
+              children: "Ligar productos"
+            }), variantesDelProducto > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
+              className: "variants-count",
+              "aria-expanded": showFamily,
+              onClick: function onClick() {
+                setShowFamily(function (abierto) {
+                  return !abierto;
+                });
+                loadFamily();
+              },
+              children: [variantesDelProducto, " variante", variantesDelProducto === 1 ? "" : "s", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                "aria-hidden": "true",
+                children: showFamily ? " ▴" : " ▾"
+              })]
+            })]
+          }), esVarianteDeOtro && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "variants-actions",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
+              className: "variants-count",
+              "aria-expanded": showFamily,
+              onClick: function onClick() {
+                setShowFamily(function (abierto) {
+                  return !abierto;
+                });
+                loadFamily();
+              },
+              children: ["Variante de otro producto", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                "aria-hidden": "true",
+                children: showFamily ? " ▴" : " ▾"
+              })]
+            })
+          }), showFamily && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "variants-family",
+            children: [!family && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: "loading",
+              children: "Cargando familia\u2026"
+            }), (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", {
+              className: "family-row parent",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "role",
+                children: "Producto padre"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "name",
+                children: family.parent.name
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: "upc",
+                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", {
+                className: "family-row".concat(variant.isCurrent ? " current" : ""),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "role",
+                  children: variant.isCurrent ? "Estás aquí" : "Variante"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "name",
+                  children: variant.name
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "upc",
+                  children: variant.upc
+                })]
+              }, variant.articleId);
+            }), family && !family.error && !((_family$variants4 = family.variants) !== null && _family$variants4 !== void 0 && _family$variants4.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+              className: "loading",
+              children: "Este producto no tiene variantes."
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullProductNameHeader.FullProductNameHeader // states
           , {
             headerData: state.product,
             productObservation: observation,
             percent: (_state$active_percent = (_state$active_percent2 = state.active_percentage) === null || _state$active_percent2 === void 0 ? void 0 : (_state$active_percent3 = _state$active_percent2.percentagesGeneral) === null || _state$active_percent3 === void 0 ? void 0 : _state$active_percent3.required) !== null && _state$active_percent !== void 0 ? _state$active_percent : 0,
             activeRetailer: {
-              id: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.id_retailer,
-              name: (_state$active_retaile8 = state.active_retailer) === null || _state$active_retaile8 === void 0 ? void 0 : _state$active_retaile8.retailer,
-              image: (_state$active_retaile9 = state.active_retailer) === null || _state$active_retaile9 === void 0 ? void 0 : _state$active_retaile9.image
+              id: (_state$active_retaile9 = state.active_retailer) === null || _state$active_retaile9 === void 0 ? void 0 : _state$active_retaile9.id_retailer,
+              name: (_state$active_retaile10 = state.active_retailer) === null || _state$active_retaile10 === void 0 ? void 0 : _state$active_retaile10.retailer,
+              image: (_state$active_retaile11 = state.active_retailer) === null || _state$active_retaile11 === void 0 ? void 0 : _state$active_retaile11.image
             },
             servicesData: state.services_data ? state.services_data : null,
             isObservationVisible: isObservationVisible // actions
@@ -2296,11 +2674,11 @@ 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$product9 = state.product) === null || _state$product9 === void 0 ? void 0 : _state$product9.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+              children: [state.active_tab === "Descripción" && (((_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
                 activeSection: state.active_tab,
                 inputGroup: state.descriptions_inputs[0],
                 updatedDescriptions: state.updated_descriptions_inputs,
-                articleId: (_state$product10 = state.product) === null || _state$product10 === void 0 ? void 0 : _state$product10.id_article,
+                articleId: (_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.id_article,
                 version: state.product.version,
                 auditInputGroup: auditDescriptions[0],
                 setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
@@ -2309,14 +2687,18 @@ 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$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : _state$product11.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              })), state.active_tab === "Ficha técnica" && (((_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.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$services2, _state$services2$data;
+
                   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
                     articleId: state.product.id_article,
                     version: state.version,
                     activeSection: state.active_tab,
                     inputGroup: dataGroup,
                     dataInputs: state.datasheets_inputs[1],
+                    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,
                     auditInputs: auditDatasheets[1],
                     updatedDatasheets: state.updated_datasheets_inputs,
                     setUpdatedDatasheets: handleOnSetUpdatedDatasheets,
@@ -2326,7 +2708,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$product12 = state.product) === null || _state$product12 === void 0 ? void 0 : _state$product12.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              })), state.active_tab === "Imágenes" && (((_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.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
                   ,
@@ -2418,20 +2800,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 _callee13() {
-                  return _regenerator.default.wrap(function _callee13$(_context13) {
+                onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee15() {
+                  return _regenerator.default.wrap(function _callee15$(_context15) {
                     while (1) {
-                      switch (_context13.prev = _context13.next) {
+                      switch (_context15.prev = _context15.next) {
                         case 0:
                           setCrossComment(true);
                           commentRevised();
 
                         case 2:
                         case "end":
-                          return _context13.stop();
+                          return _context15.stop();
                       }
                     }
-                  }, _callee13);
+                  }, _callee15);
                 }))
               })]
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {