contentoh-components-library 21.6.19 → 21.6.21

package/dist/components/organisms/LinkVariantsModal/index.js

@@ -0,0 +1,620 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkVariantsModal = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _api = require("./api");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Modal para ligar productos como padre/variante.
+
+  props (* requerido):
+    - *articleId: producto desde el que se liga (el que está en edición)
+    - articleName / articleUpc: para que el usuario sepa sobre qué está trabajando
+    - *token: JWT que va en el header Authorization
+    - endpoint: base del API de variantes. Por defecto REACT_APP_VARIANTS_ENDPOINT
+    - *onClose: cerrar sin cambios
+    - onLinked: se llama con la respuesta del backend cuando la liga tuvo éxito
+
+  Los dos modos son los de POST /variants/link:
+    parent   → este producto pasa a ser variante del que se elija
+    children → los elegidos pasan a ser variantes de este producto
+
+  En ambos el padre baja al hijo, nunca al revés. Lo que cambia es quién es quién.
+*/
+// El backend devuelve códigos estables justamente para no mandar textos de UI
+// desde el servidor. La traducción a lenguaje humano vive aquí.
+var ERROR_TEXT = {
+  VARIANT_SELF_LINK: "Un producto no puede ser variante de sí mismo.",
+  VARIANT_PARENT_IS_CHILD: "Ese producto ya es variante de otro. Las familias son de un solo nivel.",
+  VARIANT_CHILD_IS_PARENT: "Ese producto ya tiene variantes propias, así que no puede colgar de otro.",
+  VARIANT_ALREADY_LINKED: "Ese producto ya pertenece a otra familia. Desvincúlalo primero.",
+  VARIANT_NOT_OWNED_BY_USER: "Ese producto está fuera de tu alcance.",
+  VARIANT_CROSS_COMPANY: "Ese producto pertenece a otra compañía.",
+  VARIANT_INACTIVE_ARTICLE: "Ese producto está desactivado.",
+  VARIANT_NOT_FOUND: "No encontramos ese producto.",
+  VARIANT_PLAN_LIMIT_REACHED: "Tu plan no tiene cupo disponible para más productos."
+};
+
+var readError = function readError(error) {
+  if (error instanceof _api.ApiError || (error === null || error === void 0 ? void 0 : error.name) === "ApiError") {
+    return ERROR_TEXT[error.code] || error.message;
+  } // Falla de transporte de verdad: red caída, DNS, CORS.
+
+
+  return "No se pudo conectar con el servidor.";
+};
+
+var LinkVariantsModal = function LinkVariantsModal(_ref) {
+  var articleId = _ref.articleId,
+      articleName = _ref.articleName,
+      articleUpc = _ref.articleUpc,
+      activeRetailerId = _ref.activeRetailerId,
+      token = _ref.token,
+      _ref$endpoint = _ref.endpoint,
+      endpoint = _ref$endpoint === void 0 ? process.env.REACT_APP_VARIANTS_ENDPOINT : _ref$endpoint,
+      onClose = _ref.onClose,
+      onLinked = _ref.onLinked;
+
+  var _useState = (0, _react.useState)("parent"),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      mode = _useState2[0],
+      setMode = _useState2[1];
+
+  var _useState3 = (0, _react.useState)("search"),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      step = _useState4[0],
+      setStep = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      query = _useState6[0],
+      setQuery = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      candidates = _useState8[0],
+      setCandidates = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      rejected = _useState10[0],
+      setRejected = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      searched = _useState12[0],
+      setSearched = _useState12[1];
+
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      selected = _useState14[0],
+      setSelected = _useState14[1];
+
+  var _useState15 = (0, _react.useState)([]),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      attributes = _useState16[0],
+      setAttributes = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(null),
+      _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
+      nameScope = _useState18[0],
+      setNameScope = _useState18[1];
+
+  var _useState19 = (0, _react.useState)("all-filled"),
+      _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
+      inheritMode = _useState20[0],
+      setInheritMode = _useState20[1];
+
+  var _useState21 = (0, _react.useState)([]),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      chosenAttributes = _useState22[0],
+      setChosenAttributes = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(true),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      inheritImages = _useState24[0],
+      setInheritImages = _useState24[1];
+
+  var _useState25 = (0, _react.useState)(true),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      inheritDescriptions = _useState26[0],
+      setInheritDescriptions = _useState26[1];
+
+  var _useState27 = (0, _react.useState)(true),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      inheritCategoryRetailers = _useState28[0],
+      setInheritCategoryRetailers = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(false),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      loading = _useState30[0],
+      setLoading = _useState30[1];
+
+  var _useState31 = (0, _react.useState)(null),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      error = _useState32[0],
+      setError = _useState32[1];
+
+  var request = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action, body) {
+      var res;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return _axios.default.post("".concat(endpoint, "/").concat(action), body, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 2:
+              res = _context.sent;
+              return _context.abrupt("return", (0, _api.readPayload)(res));
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [endpoint, token]); // En modo children el padre es el producto en edición; en modo parent es el
+  // candidato que el usuario acaba de elegir. De ahí sale qué atributos ofrecer.
+
+  var parentArticleId = (0, _react.useMemo)(function () {
+    return mode === "children" ? articleId : selected[0];
+  }, [mode, articleId, selected]); // Cambiar de dirección invalida la selección: los candidatos elegibles no son
+  // los mismos, y arrastrar la anterior llevaría a ligar algo que no se buscó.
+
+  (0, _react.useEffect)(function () {
+    setCandidates([]);
+    setSelected([]);
+    setRejected(null);
+    setSearched(false);
+    setError(null);
+    setStep("search");
+  }, [mode]);
+
+  var search = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(event) {
+      var data;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              event === null || event === void 0 ? void 0 : event.preventDefault();
+              setLoading(true);
+              setError(null);
+              _context2.prev = 3;
+              _context2.next = 6;
+              return request("search", {
+                mode: mode,
+                articleId: articleId,
+                query: query.trim()
+              });
+
+            case 6:
+              data = _context2.sent;
+              setCandidates(data.candidates || []);
+              setRejected(data.rejected || null);
+              setSearched(true);
+              _context2.next = 15;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](3);
+              setError(readError(_context2.t0));
+
+            case 15:
+              _context2.prev = 15;
+              setLoading(false);
+              return _context2.finish(15);
+
+            case 18:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[3, 12, 15, 18]]);
+    }));
+
+    return function search(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var toggle = function toggle(id) {
+    setSelected(function (current) {
+      if (mode === "parent") return current[0] === id ? [] : [id];
+      return current.includes(id) ? current.filter(function (item) {
+        return item !== id;
+      }) : [].concat((0, _toConsumableArray2.default)(current), [id]);
+    });
+  };
+
+  var goToInheritance = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _data$nameScope, data;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setLoading(true);
+              setError(null);
+              _context3.prev = 2;
+              _context3.next = 5;
+              return request("attributes", {
+                parentArticleId: parentArticleId,
+                retailerId: activeRetailerId
+              });
+
+            case 5:
+              data = _context3.sent;
+              setAttributes(data.attributes || []);
+              setNameScope((_data$nameScope = data.nameScope) !== null && _data$nameScope !== void 0 ? _data$nameScope : null);
+              setChosenAttributes((data.attributes || []).map(function (item) {
+                return item.id;
+              }));
+              setStep("inherit");
+              _context3.next = 15;
+              break;
+
+            case 12:
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](2);
+              setError(readError(_context3.t0));
+
+            case 15:
+              _context3.prev = 15;
+              setLoading(false);
+              return _context3.finish(15);
+
+            case 18:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[2, 12, 15, 18]]);
+    }));
+
+    return function goToInheritance() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var toggleAttribute = function toggleAttribute(id) {
+    setChosenAttributes(function (current) {
+      return current.includes(id) ? current.filter(function (item) {
+        return item !== id;
+      }) : [].concat((0, _toConsumableArray2.default)(current), [id]);
+    });
+  };
+
+  var submit = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      var inherit, body, data;
+      return _regenerator.default.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              setLoading(true);
+              setError(null);
+              inherit = {
+                attributes: inheritMode === "all-filled" ? "all-filled" : chosenAttributes,
+                images: inheritImages,
+                descriptions: inheritDescriptions,
+                categoryRetailers: inheritCategoryRetailers
+              };
+              body = mode === "parent" ? {
+                mode: mode,
+                articleId: articleId,
+                parentArticleId: selected[0],
+                inherit: inherit
+              } : {
+                mode: mode,
+                parentArticleId: articleId,
+                childrenArticleIds: selected,
+                inherit: inherit
+              };
+              _context4.prev = 4;
+              _context4.next = 7;
+              return request("link", body);
+
+            case 7:
+              data = _context4.sent;
+              onLinked === null || onLinked === void 0 ? void 0 : onLinked(data);
+              onClose === null || onClose === void 0 ? void 0 : onClose();
+              _context4.next = 15;
+              break;
+
+            case 12:
+              _context4.prev = 12;
+              _context4.t0 = _context4["catch"](4);
+              setError(readError(_context4.t0));
+
+            case 15:
+              _context4.prev = 15;
+              setLoading(false);
+              return _context4.finish(15);
+
+            case 18:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4, null, [[4, 12, 15, 18]]);
+    }));
+
+    return function submit() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var selectionLabel = mode === "parent" ? "Se elige un solo producto padre." : "".concat(selected.length, " producto(s) pasar\xE1n a ser variantes.");
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+    onClick: onClose,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Panel, {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Header, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+            children: "Ligar productos"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+            children: [articleName || "Producto ".concat(articleId), articleUpc ? " \xB7 UPC ".concat(articleUpc) : ""]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "close",
+          onClick: onClose,
+          "aria-label": "Cerrar",
+          children: "\xD7"
+        })]
+      }), step === "search" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ModeSwitch, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: mode === "parent" ? "active" : "",
+          onClick: function onClick() {
+            return setMode("parent");
+          },
+          children: "Este producto es variante de otro"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: mode === "children" ? "active" : "",
+          onClick: function onClick() {
+            return setMode("children");
+          },
+          children: "Agregar variantes a este producto"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Body, {
+        children: [error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+          className: "error",
+          children: error
+        }), step === "search" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SearchRow, {
+            onSubmit: search,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+              type: "text",
+              value: query,
+              placeholder: "Busca por UPC, SKU o nombre",
+              onChange: function onChange(event) {
+                return setQuery(event.target.value);
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+              type: "submit",
+              disabled: loading,
+              children: loading ? "Buscando…" : "Buscar"
+            })]
+          }), rejected && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Message, {
+            className: "error",
+            children: [rejected.name || rejected.upc, ": ", ERROR_TEXT[rejected.code]]
+          }), searched && !candidates.length && !rejected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+            children: "No hay productos que puedas ligar con esa b\xFAsqueda. Solo aparecen productos activos de la misma compa\xF1\xEDa que todav\xEDa no pertenecen a otra familia."
+          }), candidates.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+            children: candidates.map(function (candidate) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: mode === "parent" ? "radio" : "checkbox",
+                    name: "candidate",
+                    checked: selected.includes(candidate.articleId),
+                    onChange: function onChange() {
+                      return toggle(candidate.articleId);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: [candidate.name || "Producto ".concat(candidate.articleId), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                      className: "meta",
+                      children: ["UPC ", candidate.upc || "—", candidate.categoryName ? " \xB7 ".concat(candidate.categoryName) : ""]
+                    })]
+                  }), candidate.variantsCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    className: "count",
+                    children: [candidate.variantsCount, " variante", candidate.variantsCount === 1 ? "" : "s"]
+                  })]
+                })
+              }, candidate.articleId);
+            })
+          })]
+        }), step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+              children: "\xBFQu\xE9 se hereda del producto padre?"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "choice",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                checked: inheritMode === "all-filled",
+                onChange: function onChange() {
+                  return setInheritMode("all-filled");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                children: ["Todos los atributos con valor", /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: "hint",
+                  children: [attributes.length, " atributo(s) con informaci\xF3n en el padre."]
+                })]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "choice",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "radio",
+                checked: inheritMode === "selected",
+                onChange: function onChange() {
+                  return setInheritMode("selected");
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                children: ["Elegir cu\xE1les", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "hint",
+                  children: "Lo que no elijas conserva el valor que ya tiene la variante."
+                })]
+              })]
+            })]
+          }), inheritMode === "selected" && activeRetailerId && !nameScope && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+            children: "El producto padre no comparte la cadena que tienes abierta, as\xED que los nombres de abajo son los de otra de sus cadenas."
+          }), inheritMode === "selected" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AttributeList, {
+            children: attributes.map(function (attribute) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                    type: "checkbox",
+                    checked: chosenAttributes.includes(attribute.id),
+                    onChange: function onChange() {
+                      return toggleAttribute(attribute.id);
+                    }
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                    children: [attribute.name, attribute.unconfigured && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "note",
+                      children: "sin configuraci\xF3n en las cadenas del padre"
+                    }), attribute.ambiguousName && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                      className: "note",
+                      children: "se llama distinto en otra cadena"
+                    })]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    className: "value",
+                    title: attribute.value,
+                    children: attribute.value
+                  })]
+                })
+              }, attribute.id);
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Section, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+              children: "Tambi\xE9n se hereda"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "choice",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "checkbox",
+                checked: inheritImages,
+                onChange: function onChange() {
+                  return setInheritImages(function (value) {
+                    return !value;
+                  });
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Im\xE1genes"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "choice",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "checkbox",
+                checked: inheritDescriptions,
+                onChange: function onChange() {
+                  return setInheritDescriptions(function (value) {
+                    return !value;
+                  });
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: "Descripciones"
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+              className: "choice",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                type: "checkbox",
+                checked: inheritCategoryRetailers,
+                onChange: function onChange() {
+                  return setInheritCategoryRetailers(function (value) {
+                    return !value;
+                  });
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                children: ["Cadenas y categor\xEDas", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "hint",
+                  children: "Las parejas cadena-categor\xEDa del padre se copian a la variante."
+                })]
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+            children: "Lo que elijas heredar reemplaza el valor actual de la variante, incluso si alguien lo hab\xEDa capturado a mano."
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "summary",
+          children: step === "search" ? selectionLabel : "Revisa la herencia antes de ligar."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "actions",
+          children: [step === "inherit" && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "secondary",
+            onClick: function onClick() {
+              return setStep("search");
+            },
+            disabled: loading,
+            children: "Atr\xE1s"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "secondary",
+            onClick: onClose,
+            disabled: loading,
+            children: "Cancelar"
+          }), step === "search" ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "primary",
+            onClick: goToInheritance,
+            disabled: loading || !selected.length,
+            children: "Continuar"
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "primary",
+            onClick: submit,
+            disabled: loading || // Solo estorba cuando hay algo que elegir y no se eligió nada.
+            // Con el padre sin atributos heredables, ligar sigue siendo
+            // válido: se heredan imágenes, descripciones y cadenas.
+            inheritMode === "selected" && attributes.length > 0 && !chosenAttributes.length,
+            children: loading ? "Ligando…" : "Ligar"
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+exports.LinkVariantsModal = LinkVariantsModal;