contentoh-components-library 21.6.35 → 21.6.37

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

@@ -75,6 +75,8 @@ var _Modal = require("../../organisms/Modal");
 
 var _LinkVariantsModal = require("../../organisms/LinkVariantsModal");
 
+var _UnlinkVariantModal = require("../../organisms/UnlinkVariantModal");
+
 var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
 
 var _api = require("../../organisms/LinkVariantsModal/api");
@@ -234,7 +236,7 @@ function _regenerateVideoThumbnails() {
 }
 
 var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
-  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$services2, _state$services2$data, _state$product19, _state$product20, _state$datasheets_inp, _state$datasheets_inp2, _state$product21, _state$images_values12, _state$comment;
+  var _state$product10, _family$variants, _state$product11, _state$errors, _family$variants2, _state$product15, _state$product16, _state$product17, _state$active_retaile5, _location$state, _location$state2, _state$active_retaile6, _state$active_retaile7, _state$images_values$2, _state$images_values10, _state$images_values11, _state$product18, _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$product24, _state$services2, _state$services2$data, _state$product25, _state$product26, _state$datasheets_inp, _state$datasheets_inp2, _state$product27, _state$images_values12, _state$comment;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -331,49 +333,56 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
   var _useState27 = (0, _react.useState)(null),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
       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.
+      setLoadingVariant = _useState28[1]; // Qué vínculo se está por romper, o null si no hay diálogo abierto. Guarda al
+  // HIJO, que es quien lleva la relación y lo que pide la acción `unlink`.
 
 
   var _useState29 = (0, _react.useState)(null),
       _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
-      avisoFamilia = _useState30[0],
-      setAvisoFamilia = _useState30[1];
+      porDesvincular = _useState30[0],
+      setPorDesvincular = _useState30[1]; // Por qué un salto no se pudo hacer. Vive aparte de `family.error` porque no
+  // es un fallo al leer la familia, sino al abrir uno de sus miembros.
+
 
   var _useState31 = (0, _react.useState)(null),
       _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
-      pendingPropagation = _useState32[0],
-      setPendingPropagation = _useState32[1];
+      avisoFamilia = _useState32[0],
+      setAvisoFamilia = _useState32[1];
 
-  var _useState33 = (0, _react.useState)(false),
+  var _useState33 = (0, _react.useState)(null),
       _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
-      preparandoPropagacion = _useState34[0],
-      setPreparandoPropagacion = _useState34[1];
+      pendingPropagation = _useState34[0],
+      setPendingPropagation = _useState34[1];
 
-  var _useState35 = (0, _react.useState)([]),
+  var _useState35 = (0, _react.useState)(false),
       _useState36 = (0, _slicedToArray2.default)(_useState35, 2),
-      auditServices = _useState36[0],
-      setAuditServices = _useState36[1];
+      preparandoPropagacion = _useState36[0],
+      setPreparandoPropagacion = _useState36[1];
 
   var _useState37 = (0, _react.useState)([]),
       _useState38 = (0, _slicedToArray2.default)(_useState37, 2),
-      auditDatasheets = _useState38[0],
-      setAuditDatasheets = _useState38[1];
+      auditServices = _useState38[0],
+      setAuditServices = _useState38[1];
 
   var _useState39 = (0, _react.useState)([]),
       _useState40 = (0, _slicedToArray2.default)(_useState39, 2),
-      auditDescriptions = _useState40[0],
-      setAuditDescriptions = _useState40[1];
+      auditDatasheets = _useState40[0],
+      setAuditDatasheets = _useState40[1];
 
-  var _useState41 = (0, _react.useState)(false),
+  var _useState41 = (0, _react.useState)([]),
       _useState42 = (0, _slicedToArray2.default)(_useState41, 2),
-      showModal = _useState42[0],
-      setShowModal = _useState42[1];
+      auditDescriptions = _useState42[0],
+      setAuditDescriptions = _useState42[1];
 
   var _useState43 = (0, _react.useState)(false),
       _useState44 = (0, _slicedToArray2.default)(_useState43, 2),
-      compare = _useState44[0],
-      setCompare = _useState44[1];
+      showModal = _useState44[0],
+      setShowModal = _useState44[1];
+
+  var _useState45 = (0, _react.useState)(false),
+      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
+      compare = _useState46[0],
+      setCompare = _useState46[1];
 
   var _useDropzone = (0, _reactDropzone.useDropzone)({
     accept: "image/*, video/mp4",
@@ -509,10 +518,10 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
       isDragActive = _useDropzone.isDragActive,
       open = _useDropzone.open;
 
-  var _useState45 = (0, _react.useState)(false),
-      _useState46 = (0, _slicedToArray2.default)(_useState45, 2),
-      openChangeStatusModal = _useState46[0],
-      setOpenChangeStatusModal = _useState46[1];
+  var _useState47 = (0, _react.useState)(false),
+      _useState48 = (0, _slicedToArray2.default)(_useState47, 2),
+      openChangeStatusModal = _useState48[0],
+      setOpenChangeStatusModal = _useState48[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;
@@ -1251,6 +1260,66 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
     pantalla que mostraría el producto equivocado.
   */
 
+  /*
+    Después de desvincular, esta ficha cambia de forma: si se soltó de su padre
+    vuelve a poder ligar, y si soltó a un hijo pierde uno de la cuenta. En esta
+    pantalla el bloque de parentesco se decide con `family`, así que hay que
+    repreguntarla —vaciarla lo haría desaparecer, que es el error que ya se
+    cometió una vez aquí—.
+  */
+
+  var handleOnUnlinked = function handleOnUnlinked(result) {
+    var _state$product$varian, _state$product12, _updatedProduct$varia;
+
+    if (!result) return;
+    var updatedProduct = result.mode === "self" ? (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
+      parentArticleId: null,
+      variantsCount: 0
+    }) : (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
+      variantsCount: Math.max(((_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 : 1) - 1, 0)
+    });
+    dispatch({
+      type: "SET_PRODUCT",
+      payload: updatedProduct
+    }); // Se PARCHEA lo guardado: ahí vive el producto con la forma del listado
+    // —`article` anidado, servicios, cadenas— y escribir encima la versión
+    // aplanada de esta pantalla lo dejaría mutilado en el siguiente F5.
+
+    try {
+      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) {
+      console.error("unlinkVariant/sessionStorage: ", error);
+    }
+    /*
+      Si ya no queda familia, se cierra el desplegable: su botón desaparece con
+      el vínculo, y dejarlo abierto pinta una caja que dice «no tiene hijos» y
+      que nadie puede cerrar.
+    */
+
+
+    if (!updatedProduct.parentArticleId && ((_updatedProduct$varia = updatedProduct.variantsCount) !== null && _updatedProduct$varia !== void 0 ? _updatedProduct$varia : 0) === 0) {
+      setShowFamily(false);
+    }
+
+    loadFamily(true); // Al desvincular el servidor pone `is_overridden = 0` en todas las
+    // versiones, así que los chips de herencia tienen que dejar de dibujarse.
+    // Sin `enableLoading` para no parpadear el esqueleto encima de una pantalla
+    // que ya está pintada.
+
+    loadData(false);
+  };
+
   var openFamilyMember = /*#__PURE__*/function () {
     var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(articleId) {
       var _readPayload, res, _ref10, data, encontrado;
@@ -1336,11 +1405,11 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
 
   var handleOnLinkedVariants = function handleOnLinkedVariants(result) {
-    var _state$product$varian, _state$product12, _result$linked, _result$parentArticle;
+    var _state$product$varian2, _state$product13, _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
+      variantsCount: ((_state$product$varian2 = (_state$product13 = state.product) === null || _state$product13 === void 0 ? void 0 : _state$product13.variantsCount) !== null && _state$product$varian2 !== void 0 ? _state$product$varian2 : 0) + ((_result$linked = result.linked) !== null && _result$linked !== void 0 ? _result$linked : []).length
     }) : (0, _objectSpread5.default)((0, _objectSpread5.default)({}, state.product), {}, {
       parentArticleId: (_result$parentArticle = result.parentArticleId) !== null && _result$parentArticle !== void 0 ? _result$parentArticle : null,
       variantsCount: 0
@@ -1361,16 +1430,16 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
     */
 
     try {
-      var _sessionStorage$getIt;
+      var _sessionStorage$getIt2;
 
-      var guardado = JSON.parse((_sessionStorage$getIt = sessionStorage.getItem("productSelected")) !== null && _sessionStorage$getIt !== void 0 ? _sessionStorage$getIt : "null");
+      var guardado = JSON.parse((_sessionStorage$getIt2 = sessionStorage.getItem("productSelected")) !== null && _sessionStorage$getIt2 !== void 0 ? _sessionStorage$getIt2 : "null");
 
       if (guardado) {
-        var _updatedProduct$paren;
+        var _updatedProduct$paren2;
 
         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
+          parentArticleId: (_updatedProduct$paren2 = updatedProduct.parentArticleId) !== null && _updatedProduct$paren2 !== void 0 ? _updatedProduct$paren2 : null
         })));
       }
     } catch (error) {
@@ -1415,7 +1484,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
   var handleOnRestoreInheritance = /*#__PURE__*/function () {
     var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(attributeId) {
-      var _state$product13;
+      var _state$product14;
 
       var kind,
           esDescripcion,
@@ -1428,7 +1497,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             case 0:
               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))) {
+              if (!(!attributeId || !((_state$product14 = state.product) !== null && _state$product14 !== void 0 && _state$product14.id_article))) {
                 _context7.next = 3;
                 break;
               }
@@ -1528,7 +1597,8 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
   var handleOnClickSave = /*#__PURE__*/function () {
     var _ref12 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee8() {
-      var esPadre, cambios;
+      var _familia$variants, cambios, familia, hijos;
+
       return _regenerator.default.wrap(function _callee8$(_context8) {
         while (1) {
           switch (_context8.prev = _context8.next) {
@@ -1542,7 +1612,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
 
             case 2:
               _context8.t0 = state.active_tab;
-              _context8.next = _context8.t0 === "Descripción" ? 5 : _context8.t0 === "Ficha técnica" ? 8 : _context8.t0 === "Imágenes" ? 17 : 20;
+              _context8.next = _context8.t0 === "Descripción" ? 5 : _context8.t0 === "Ficha técnica" ? 8 : _context8.t0 === "Imágenes" ? 32 : 35;
               break;
 
             case 5:
@@ -1550,57 +1620,134 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               return saveDescriptions(token);
 
             case 7:
-              return _context8.abrupt("break", 21);
+              return _context8.abrupt("break", 36);
 
             case 8:
-              // Guardar un padre con hijos abre la decisión de propagar. Sin este
-              // paso el cambio se queda solo en el padre y los hijos se van
-              // separando de él sin que nadie lo note.
-              esPadre = hijosDelProducto > 0;
               cambios = cambiosDeFichaTecnica();
 
-              if (!(esPadre && cambios.length > 0)) {
-                _context8.next = 14;
+              if (!(cambios.length === 0)) {
+                _context8.next = 13;
                 break;
               }
 
+              _context8.next = 12;
+              return saveDatasheets(token);
+
+            case 12:
+              return _context8.abrupt("break", 36);
+
+            case 13:
+              /*
+                Guardar un padre con hijos abre la decisión de propagar. Sin este paso
+                el cambio se queda solo en el padre y los hijos se van separando de él
+                sin que nadie lo note.
+                 Si tiene hijos se resuelve AQUÍ, esperando la respuesta, en vez de
+                mirar la copia en memoria. `family` es una consulta asíncrona: si
+                todavía no llegó, o si falló, `hijosDelProducto` vale 0 — o sea que
+                «todavía no sé» se leía igual que «no tiene hijos», y el padre se
+                guardaba sin ofrecer la propagación. En silencio, que es lo peor: el
+                usuario creía haber bajado el cambio a los hijos.
+                 La ficha de la aplicación de clientes no tiene el problema porque ahí
+                `state.product.variantsCount` viene del listado; aquí el producto sale
+                del endpoint de reportes, que no trae el parentesco.
+              */
               setPreparandoPropagacion(true);
-              loadFamily().then(function () {
-                return setPendingPropagation({
-                  cambios: cambios
-                });
-              }).finally(function () {
-                return setPreparandoPropagacion(false);
+              familia = null;
+              _context8.prev = 15;
+              _context8.next = 18;
+              return loadFamily(true);
+
+            case 18:
+              familia = _context8.sent;
+
+            case 19:
+              _context8.prev = 19;
+              setPreparandoPropagacion(false);
+              return _context8.finish(19);
+
+            case 22:
+              if (!(!familia || familia.error)) {
+                _context8.next = 25;
+                break;
+              }
+
+              dispatch({
+                type: "SET_MODAL",
+                payload: {
+                  show: true,
+                  title: "No se pudo consultar la familia",
+                  message: "No pudimos saber si este producto tiene hijos, así que no sabemos si hay que bajarles el cambio. Vuelve a intentar el guardado; si sigue fallando, guarda y revisa los hijos a mano.",
+                  image: _genericModalWarning.default,
+                  buttons: [{
+                    text: "Entendido",
+                    buttonType: "general-white-button",
+                    action: function action() {
+                      return dispatch({
+                        type: "SET_MODAL",
+                        payload: {
+                          show: false
+                        }
+                      });
+                    }
+                  }, {
+                    text: "Guardar solo este producto",
+                    buttonType: "general-button-default",
+                    action: function action() {
+                      dispatch({
+                        type: "SET_MODAL",
+                        payload: {
+                          show: false
+                        }
+                      });
+                      saveDatasheets(token);
+                    }
+                  }]
+                }
               });
               return _context8.abrupt("return");
 
-            case 14:
-              _context8.next = 16;
+            case 25:
+              hijos = ((_familia$variants = familia.variants) !== null && _familia$variants !== void 0 ? _familia$variants : []).filter(function (v) {
+                return !v.isCurrent;
+              });
+
+              if (!(hijos.length > 0)) {
+                _context8.next = 29;
+                break;
+              }
+
+              setPendingPropagation({
+                cambios: cambios
+              });
+              return _context8.abrupt("return");
+
+            case 29:
+              _context8.next = 31;
               return saveDatasheets(token);
 
-            case 16:
-              return _context8.abrupt("break", 21);
+            case 31:
+              return _context8.abrupt("break", 36);
 
-            case 17:
-              _context8.next = 19;
+            case 32:
+              _context8.next = 34;
               return updateImages(token);
 
-            case 19:
-              return _context8.abrupt("break", 21);
+            case 34:
+              return _context8.abrupt("break", 36);
 
-            case 20:
-              return _context8.abrupt("break", 21);
+            case 35:
+              return _context8.abrupt("break", 36);
 
-            case 21:
-              _context8.next = 23;
+            case 36:
+              _context8.next = 38;
               return loadData(false);
 
-            case 23:
+            case 38:
             case "end":
               return _context8.stop();
           }
         }
-      }, _callee8);
+      }, _callee8, null, [[15,, 19, 22]]);
     }));
 
     return function handleOnClickSave() {
@@ -2536,16 +2683,22 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
           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,
+        articleId: (_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.id_article,
+        articleName: (_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : _state$product16.name,
+        articleUpc: (_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.upc,
         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, {
+      }), porDesvincular && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UnlinkVariantModal.UnlinkVariantModal, (0, _objectSpread5.default)((0, _objectSpread5.default)({}, porDesvincular), {}, {
+        token: token,
+        onClose: function onClose() {
+          return setPorDesvincular(null);
+        },
+        onUnlinked: handleOnUnlinked
+      })), 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, {
@@ -2699,7 +2852,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             lists: state.images_values || [],
             activeImage: (_state$images_values10 = state.images_values) !== null && _state$images_values10 !== void 0 && _state$images_values10.values ? (_state$images_values11 = state.images_values) === null || _state$images_values11 === void 0 ? void 0 : _state$images_values11.values[state.current_image] : {},
             assignationsImages: state.collaborator_assignations["Imágenes"],
-            imagesStatus: ((_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.images_status) || "-",
+            imagesStatus: ((_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.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,
@@ -2763,40 +2916,80 @@ 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)("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: loadingVariant === family.parent.articleId ? "Abriendo…" : "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)("button", {
+            }), (family === null || family === void 0 ? void 0 : family.parent) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "family-item",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                 type: "button",
-                className: "family-row".concat(variant.isCurrent ? " current" : ""),
-                disabled: variant.isCurrent || loadingVariant !== null,
+                className: "family-row parent",
+                disabled: loadingVariant !== null,
                 onClick: function onClick() {
-                  return openFamilyMember(variant.articleId);
+                  return openFamilyMember(family.parent.articleId);
                 },
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "role",
-                  children: loadingVariant === variant.articleId ? "Abriendo…" : variant.isCurrent ? "Estás aquí" : "Hijo"
+                  children: loadingVariant === family.parent.articleId ? "Abriendo…" : "Producto padre"
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "name",
-                  children: variant.name
+                  children: family.parent.name
                 }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                   className: "upc",
-                  children: variant.upc
+                  children: family.parent.upc
+                })]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                type: "button",
+                className: "desvincular",
+                title: "Dejar de ser hijo de este producto",
+                onClick: function onClick() {
+                  var _state$product19, _state$product20, _state$product21;
+
+                  return setPorDesvincular({
+                    mode: "self",
+                    childArticleId: (_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.id_article,
+                    childName: (_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.name,
+                    childUpc: (_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.upc,
+                    parentName: family.parent.name,
+                    parentUpc: family.parent.upc
+                  });
+                },
+                children: "Desvincular"
+              })]
+            }), 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-item",
+                children: [/*#__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: loadingVariant === variant.articleId ? "Abriendo…" : variant.isCurrent ? "Estás aquí" : "Hijo"
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "name",
+                    children: variant.name
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "upc",
+                    children: variant.upc
+                  })]
+                }), !family.parent && !variant.isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+                  type: "button",
+                  className: "desvincular",
+                  title: "Desvincular este hijo",
+                  onClick: function onClick() {
+                    var _state$product22, _state$product23;
+
+                    return setPorDesvincular({
+                      mode: "child",
+                      childArticleId: variant.articleId,
+                      childName: variant.name,
+                      childUpc: variant.upc,
+                      parentName: (_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.name,
+                      parentUpc: (_state$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.upc
+                    });
+                  },
+                  children: "Desvincular"
                 })]
               }, variant.articleId);
             }), family && !family.error && !((_family$variants4 = family.variants) !== null && _family$variants4 !== void 0 && _family$variants4.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
@@ -2864,7 +3057,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
             className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
             id: "services-information-container",
             children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [state.active_tab === "Descripción" && (((_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+              children: [state.active_tab === "Descripción" && (((_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.description_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
                 activeSection: state.active_tab,
                 inputGroup: state.descriptions_inputs[0],
                 updatedDescriptions: state.updated_descriptions_inputs
@@ -2873,7 +3066,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
                 ,
                 variant: (_state$services2 = state.services) === null || _state$services2 === void 0 ? void 0 : (_state$services2$data = _state$services2.datasheets) === null || _state$services2$data === void 0 ? void 0 : _state$services2$data.variant,
                 onRestoreInheritance: handleOnRestoreInheritance,
-                articleId: (_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.id_article,
+                articleId: (_state$product25 = state.product) === null || _state$product25 === void 0 ? void 0 : _state$product25.id_article,
                 version: state.product.version,
                 auditInputGroup: auditDescriptions[0],
                 setUpdatedDescriptions: handleOnSetUpdatedDescriptions,
@@ -2882,7 +3075,7 @@ var RetailerProductEditionView = function RetailerProductEditionView(_ref) {
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
                 text: "No cuentas con este servicio",
                 headerType: "input-name-header"
-              })), state.active_tab === "Ficha técnica" && (((_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              })), state.active_tab === "Ficha técnica" && (((_state$product26 = state.product) === null || _state$product26 === void 0 ? void 0 : _state$product26.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                 children: (_state$datasheets_inp = state.datasheets_inputs[0]) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp.data) === null || _state$datasheets_inp2 === void 0 ? void 0 : _state$datasheets_inp2.map(function (dataGroup, index) {
                   var _state$services3, _state$services3$data;
 
@@ -2903,7 +3096,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$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              })), state.active_tab === "Imágenes" && (((_state$product27 = state.product) === null || _state$product27 === void 0 ? void 0 : _state$product27.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                 children: [!imageLayout && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GalleryHeader.GalleryHeader, {
                   checkAll: state.all_image_checked // Determina si el checkbox "Seleccionar todo" está marcado
                   ,

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

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