contentoh-components-library 21.6.34 → 21.6.36

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

@@ -67,6 +67,8 @@ var _InputGroup = require("../../organisms/InputGroup");
 
 var _LinkVariantsModal = require("../../organisms/LinkVariantsModal");
 
+var _UnlinkVariantModal = require("../../organisms/UnlinkVariantModal");
+
 var _PropagateChangesModal = require("../../organisms/PropagateChangesModal");
 
 var _api = require("../../organisms/LinkVariantsModal/api");
@@ -90,7 +92,7 @@ var _AiProductEdition = require("../../../contexts/AiProductEdition");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
-  var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _family$variants2, _state$product15, _state$product16, _state$product17, _state$active_retaile4, _location$state5, _location$state6, _state$active_retaile5, _state$active_retaile6, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile7, _state$product18, _state$product19, _state$product20, _state$product21, _family$variants3, _family$variants4, _family$variants5, _state$active_percent, _state$active_percent2, _state$active_retaile8, _state$active_retaile9, _state$active_retaile10, _state$product22, _state$descriptions_i, _state$services2, _state$services2$data, _state$product23, _state$product24, _state$datasheets_inp, _state$datasheets_inp2, _state$datasheets_inp3, _state$product25, _state$images_values12;
+  var _location$state4, _state$product2, _state$product3, _state$product4, _state$product5, _state$product6, _state$product7, _family$variants2, _state$product16, _state$product17, _state$product18, _state$active_retaile4, _location$state5, _location$state6, _state$active_retaile5, _state$active_retaile6, _state$images_values$2, _state$images_values10, _state$images_values11, _state$active_retaile7, _state$product19, _state$product20, _state$product21, _state$product22, _family$variants3, _family$variants4, _family$variants5, _state$active_percent, _state$active_percent2, _state$active_retaile8, _state$active_retaile9, _state$active_retaile10, _state$product28, _state$descriptions_i, _state$services2, _state$services2$data, _state$product29, _state$product30, _state$datasheets_inp, _state$datasheets_inp2, _state$datasheets_inp3, _state$product31, _state$images_values12;
 
   var tabsSections = _ref.tabsSections,
       _ref$productSelected = _ref.productSelected,
@@ -928,22 +930,27 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var loadFamily = /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-      var _state$product11, res;
+      var forzar,
+          _state$product11,
+          res,
+          _args3 = arguments;
 
       return _regenerator.default.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
-              if (!family) {
-                _context3.next = 2;
+              forzar = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : false;
+
+              if (!(family && !forzar)) {
+                _context3.next = 3;
                 break;
               }
 
               return _context3.abrupt("return", family);
 
-            case 2:
-              _context3.prev = 2;
-              _context3.next = 5;
+            case 3:
+              _context3.prev = 3;
+              _context3.next = 6;
               return _axios.default.post("".concat(process.env.REACT_APP_VARIANTS_ENDPOINT, "/family"), {
                 articleId: (_state$product11 = state.product) === null || _state$product11 === void 0 ? void 0 : _state$product11.id_article
               }, {
@@ -952,15 +959,15 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }
               });
 
-            case 5:
+            case 6:
               res = _context3.sent;
               setFamily((0, _api.readPayload)(res));
-              _context3.next = 13;
+              _context3.next = 14;
               break;
 
-            case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](2);
+            case 10:
+              _context3.prev = 10;
+              _context3.t0 = _context3["catch"](3);
               console.error("loadFamily: ", _context3.t0);
               setFamily({
                 variants: [],
@@ -968,12 +975,12 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 error: true
               });
 
-            case 13:
+            case 14:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[2, 9]]);
+      }, _callee3, null, [[3, 10]]);
     }));
 
     return function loadFamily() {
@@ -1101,6 +1108,74 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
       return _ref8.apply(this, arguments);
     };
   }();
+  /*
+    Qué vínculo se está por romper, o null si no hay diálogo abierto.
+     Guarda al HIJO, porque la relación vive en él (`article.parent_article_id`)
+    y es lo que pide la acción `unlink`. `mode` solo cambia el texto: no es lo
+    mismo soltarse de un padre que soltar a un hijo, aunque por dentro sea la
+    misma llamada.
+  */
+
+
+  var _useState33 = (0, _react.useState)(null),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      porDesvincular = _useState34[0],
+      setPorDesvincular = _useState34[1];
+  /*
+    Después de desvincular, esta ficha cambia de forma.
+     Si el producto se soltó de su padre, deja de ser hijo y vuelve a poder ligar
+    —el botón reaparece—. Si soltó a un hijo, pierde uno de la cuenta. En los dos
+    casos hay que repreguntar la familia: lo que se ve en la lista ya no es lo
+    que hay en el servidor.
+  */
+
+
+  var handleOnUnlinked = function handleOnUnlinked(result) {
+    var _state$product$varian, _state$product12, _updatedProduct$varia;
+
+    if (!result) return;
+    var updatedProduct = result.mode === "self" ? (0, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product), {}, {
+      parentArticleId: null,
+      variantsCount: 0
+    }) : (0, _objectSpread4.default)((0, _objectSpread4.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
+    });
+
+    try {
+      sessionStorage.setItem("productSelected", JSON.stringify(updatedProduct));
+      var productEdit = JSON.parse(sessionStorage.getItem("productEdit"));
+
+      if (productEdit) {
+        sessionStorage.setItem("productEdit", JSON.stringify((0, _objectSpread4.default)((0, _objectSpread4.default)({}, productEdit), {}, {
+          product: updatedProduct
+        })));
+      }
+    } 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); // Y los servicios: al desvincular, el servidor pone `is_overridden = 0` en
+    // todas las versiones, así que los chips de herencia tienen que dejar de
+    // dibujarse. Sin esto la ficha sigue mostrándolos hasta que se recarga.
+
+    setLinkNonce(function (n) {
+      return n + 1;
+    });
+  };
 
   var openVariant = /*#__PURE__*/function () {
     var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(articleId) {
@@ -1186,11 +1261,11 @@ var ProviderProductEditionView = function ProviderProductEditionView(_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, _objectSpread4.default)((0, _objectSpread4.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, _objectSpread4.default)((0, _objectSpread4.default)({}, state.product), {}, {
       parentArticleId: (_result$parentArticle = result.parentArticleId) !== null && _result$parentArticle !== void 0 ? _result$parentArticle : null,
       variantsCount: 0
@@ -1198,9 +1273,15 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
     dispatch({
       type: "SET_PRODUCT",
       payload: updatedProduct
-    }); // La lista cacheada quedó vieja: se descarta para que vuelva a pedirse.
+    });
+    /*
+      Se vuelve a pedir, no se vacía.
+       `setFamily(null)` invalidaba la caché, pero la lista solo se pide al pulsar
+      el desplegable: si estaba abierto al ligar, se quedaba en «Cargando
+      familia…» para siempre, porque ya nadie iba a volver a pedirla.
+    */
 
-    setFamily(null); // Y los servicios, para que los chips reflejen la herencia recién creada.
+    loadFamily(true); // Y los servicios, para que los chips reflejen la herencia recién creada.
 
     setLinkNonce(function (n) {
       return n + 1;
@@ -1243,7 +1324,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var handleOnRestoreInheritance = /*#__PURE__*/function () {
     var _ref10 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6(attributeId) {
-      var _state$product13;
+      var _state$product14;
 
       var kind,
           esDescripcion,
@@ -1256,7 +1337,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
             case 0:
               kind = _args6.length > 1 && _args6[1] !== undefined ? _args6[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))) {
                 _context6.next = 3;
                 break;
               }
@@ -1366,7 +1447,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
 
   var sendEvaluation = /*#__PURE__*/function () {
     var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee7(result) {
-      var _state$product$id_ord, _state$active_retaile3, _state$product$status, _state$product$status2, _state$product14;
+      var _state$product$id_ord, _state$active_retaile3, _state$product$status, _state$product$status2, _state$product15;
 
       var concept, articleId, orderId, retailerId, evalStatus, data, _newStatuses$newStatu, _state$services_data, res, newStatuses, serviceStatus, updatedStatusByRetailer, updatedProduct, updatedServicesData;
 
@@ -1382,7 +1463,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
               articleId = state.product.id_article;
               orderId = (_state$product$id_ord = state.product.id_order) !== null && _state$product$id_ord !== void 0 ? _state$product$id_ord : state.product.orderId;
               retailerId = (_state$active_retaile3 = state.active_retailer) === null || _state$active_retaile3 === void 0 ? void 0 : _state$active_retaile3.id_retailer;
-              evalStatus = ((_state$product$status = state.product.statusByRetailer) === null || _state$product$status === void 0 ? void 0 : (_state$product$status2 = _state$product$status[retailerId]) === null || _state$product$status2 === void 0 ? void 0 : _state$product$status2[concept]) || state.product["".concat(concept, "_status")] || ((_state$product14 = state.product) === null || _state$product14 === void 0 ? void 0 : _state$product14.version_status);
+              evalStatus = ((_state$product$status = state.product.statusByRetailer) === null || _state$product$status === void 0 ? void 0 : (_state$product$status2 = _state$product$status[retailerId]) === null || _state$product$status2 === void 0 ? void 0 : _state$product$status2[concept]) || state.product["".concat(concept, "_status")] || ((_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.version_status);
               data = {
                 articleId: articleId,
                 orderId: orderId,
@@ -1878,16 +1959,22 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
           saveDatasheets(token, propagation !== null && propagation !== void 0 ? propagation : undefined);
         }
       }), showLinkVariants && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkVariantsModal.LinkVariantsModal, {
-        articleId: (_state$product15 = state.product) === null || _state$product15 === void 0 ? void 0 : _state$product15.id_article,
-        articleName: (_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : _state$product16.name,
-        articleUpc: (_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.upc,
+        articleId: (_state$product16 = state.product) === null || _state$product16 === void 0 ? void 0 : _state$product16.id_article,
+        articleName: (_state$product17 = state.product) === null || _state$product17 === void 0 ? void 0 : _state$product17.name,
+        articleUpc: (_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.upc,
         activeRetailerId: (_state$active_retaile4 = state.active_retailer) === null || _state$active_retaile4 === void 0 ? void 0 : _state$active_retaile4.id_retailer,
         token: token,
         onClose: function onClose() {
           return setShowLinkVariants(false);
         },
         onLinked: handleOnLinkedVariants
-      }), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
+      }), porDesvincular && /*#__PURE__*/(0, _jsxRuntime.jsx)(_UnlinkVariantModal.UnlinkVariantModal, (0, _objectSpread4.default)((0, _objectSpread4.default)({}, porDesvincular), {}, {
+        token: token,
+        onClose: function onClose() {
+          return setPorDesvincular(null);
+        },
+        onUnlinked: handleOnUnlinked
+      })), showModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductImageModal.ProductImageModal, {
         images: state.images_values,
         setShowModal: setShowModal,
         approveRejectButtons: canShowValidationButtons(),
@@ -2030,7 +2117,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
             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: assig,
             retailerSelected: (_state$active_retaile7 = state.active_retailer) === null || _state$active_retaile7 === void 0 ? void 0 : _state$active_retaile7.id_retailer,
-            imagesStatus: ((_state$product18 = state.product) === null || _state$product18 === void 0 ? void 0 : _state$product18.images_status) || "-",
+            imagesStatus: ((_state$product19 = state.product) === null || _state$product19 === void 0 ? void 0 : _state$product19.images_status) || "-",
             isRetailer: isRetailer,
             setShowVersionSelector: setShowVersionSelector,
             version: state.product.version,
@@ -2043,7 +2130,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
           className: "product-information",
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
             className: "product-information",
-            children: [!((_state$product19 = state.product) !== null && _state$product19 !== void 0 && _state$product19.parentArticleId) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            children: [!((_state$product20 = state.product) !== null && _state$product20 !== void 0 && _state$product20.parentArticleId) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: "variants-actions",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
                 type: "button",
@@ -2052,7 +2139,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   return setShowLinkVariants(true);
                 },
                 children: "Ligar productos"
-              }), ((_state$product20 = state.product) === null || _state$product20 === void 0 ? void 0 : _state$product20.variantsCount) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              }), ((_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.variantsCount) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                 type: "button",
                 className: "variants-count",
                 "aria-expanded": showFamily,
@@ -2067,7 +2154,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                   children: showFamily ? " ▴" : " ▾"
                 })]
               })]
-            }), ((_state$product21 = state.product) === null || _state$product21 === void 0 ? void 0 : _state$product21.parentArticleId) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            }), ((_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.parentArticleId) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "variants-actions",
               children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
                 type: "button",
@@ -2092,40 +2179,80 @@ var ProviderProductEditionView = function ProviderProductEditionView(_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 openVariant(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 openVariant(variant.articleId);
+                    return openVariant(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$product23, _state$product24, _state$product25;
+
+                    return setPorDesvincular({
+                      mode: "self",
+                      childArticleId: (_state$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.id_article,
+                      childName: (_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.name,
+                      childUpc: (_state$product25 = state.product) === null || _state$product25 === void 0 ? void 0 : _state$product25.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 openVariant(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$product26, _state$product27;
+
+                      return setPorDesvincular({
+                        mode: "child",
+                        childArticleId: variant.articleId,
+                        childName: variant.name,
+                        childUpc: variant.upc,
+                        parentName: (_state$product26 = state.product) === null || _state$product26 === void 0 ? void 0 : _state$product26.name,
+                        parentUpc: (_state$product27 = state.product) === null || _state$product27 === void 0 ? void 0 : _state$product27.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", {
@@ -2188,7 +2315,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: "services-information-container " + (imageLayout && state.active_tab === "Imágenes" ? "image-services" : ""),
               children: state.saving ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [state.active_tab === "Descripción" && (((_state$product22 = state.product) === null || _state$product22 === void 0 ? void 0 : _state$product22.description_status) !== "NS" ? (_state$descriptions_i = state.descriptions_inputs) !== null && _state$descriptions_i !== void 0 && _state$descriptions_i[0] ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
+                children: [state.active_tab === "Descripción" && (((_state$product28 = state.product) === null || _state$product28 === void 0 ? void 0 : _state$product28.description_status) !== "NS" ? (_state$descriptions_i = state.descriptions_inputs) !== null && _state$descriptions_i !== void 0 && _state$descriptions_i[0] ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputGroup.InputGroup, {
                   activeSection: state.active_tab,
                   inputGroup: state.descriptions_inputs[0],
                   updatedDescriptions: state.updated_descriptions_inputs
@@ -2199,7 +2326,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_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$product23 = state.product) === null || _state$product23 === void 0 ? void 0 : _state$product23.id_article,
+                  articleId: (_state$product29 = state.product) === null || _state$product29 === void 0 ? void 0 : _state$product29.id_article,
                   version: state.product.version,
                   isShowbox: false,
                   dinamicHeight: true,
@@ -2211,7 +2338,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
                   text: "No cuentas con este servicio",
                   headerType: "input-name-header"
-                })), state.active_tab === "Ficha técnica" && (((_state$product24 = state.product) === null || _state$product24 === void 0 ? void 0 : _state$product24.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                })), state.active_tab === "Ficha técnica" && (((_state$product30 = state.product) === null || _state$product30 === void 0 ? void 0 : _state$product30.datasheet_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                   children: ((_state$datasheets_inp = state.datasheets_inputs) === null || _state$datasheets_inp === void 0 ? void 0 : (_state$datasheets_inp2 = _state$datasheets_inp[0]) === null || _state$datasheets_inp2 === void 0 ? void 0 : (_state$datasheets_inp3 = _state$datasheets_inp2.data) === null || _state$datasheets_inp3 === void 0 ? void 0 : _state$datasheets_inp3.length) > 0 ? state.datasheets_inputs[0].data.map(function (dataGroup, index) {
                     var _state$datasheets_inp4, _state$services3, _state$services3$data, _state$services$datas3;
 
@@ -2241,7 +2368,7 @@ var ProviderProductEditionView = function ProviderProductEditionView(_ref) {
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
                   text: "No cuentas con este servicio",
                   headerType: "input-name-header"
-                })), state.active_tab === "Imágenes" && (((_state$product25 = state.product) === null || _state$product25 === void 0 ? void 0 : _state$product25.images_status) !== "NS" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                })), state.active_tab === "Imágenes" && (((_state$product31 = state.product) === null || _state$product31 === void 0 ? void 0 : _state$product31.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/ProviderProductEdition/styles.js

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