contentoh-components-library 21.6.34 → 21.6.36

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

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnlinkVariantModal = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+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("../LinkVariantsModal/api");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Confirmación para romper un vínculo padre/hijo.
+
+  El servidor ya sabía hacerlo desde el principio —POST /variants/unlink—, pero
+  no había forma de pedirlo desde ninguna pantalla: la única manera de deshacer
+  una liga era DESACTIVAR al padre, que suelta a todos los hijos de golpe y no
+  se puede revertir. Esto es la versión de a uno.
+
+  La acción se pide siempre con el id del HIJO, que es quien tiene el vínculo en
+  `article.parent_article_id`. Por eso las dos direcciones —un hijo que se suelta
+  y un padre que suelta a un hijo— son la misma llamada; lo único que cambia es
+  el texto, porque no es lo mismo lo que el usuario cree estar haciendo.
+
+  props (* requerido):
+    - *childArticleId: el hijo que pierde el vínculo
+    - childName / childUpc: para nombrarlo en el diálogo
+    - parentName / parentUpc: de quién se desprende
+    - mode: "self" (esta ficha deja de ser hija) | "child" (esta ficha suelta a un hijo)
+    - *token, endpoint
+    - *onClose, onUnlinked
+*/
+var UnlinkVariantModal = function UnlinkVariantModal(_ref) {
+  var childArticleId = _ref.childArticleId,
+      childName = _ref.childName,
+      childUpc = _ref.childUpc,
+      parentName = _ref.parentName,
+      parentUpc = _ref.parentUpc,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "self" : _ref$mode,
+      token = _ref.token,
+      _ref$endpoint = _ref.endpoint,
+      endpoint = _ref$endpoint === void 0 ? process.env.REACT_APP_VARIANTS_ENDPOINT : _ref$endpoint,
+      onClose = _ref.onClose,
+      onUnlinked = _ref.onUnlinked;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var nombreHijo = childName || "Producto ".concat(childArticleId);
+  var nombrePadre = parentName || "el producto padre";
+
+  var submit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var res, data;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+              setError(null);
+              _context.prev = 2;
+              _context.next = 5;
+              return _axios.default.post("".concat(endpoint, "/unlink"), {
+                articleIds: [childArticleId]
+              }, {
+                headers: {
+                  Authorization: token
+                }
+              });
+
+            case 5:
+              res = _context.sent;
+              data = (0, _api.readPayload)(res);
+              onUnlinked === null || onUnlinked === void 0 ? void 0 : onUnlinked((0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+                mode: mode,
+                childArticleId: childArticleId
+              }));
+              onClose === null || onClose === void 0 ? void 0 : onClose();
+              _context.next = 15;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](2);
+              // El transporte siempre responde 200; el error de negocio viaja dentro.
+              setError(_context.t0 instanceof _api.ApiError || (_context.t0 === null || _context.t0 === void 0 ? void 0 : _context.t0.name) === "ApiError" ? _context.t0.message : "No se pudo desvincular. Intenta de nuevo.");
+              setLoading(false);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[2, 11]]);
+    }));
+
+    return function submit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+    onClick: loading ? undefined : 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.jsx)("h2", {
+          children: mode === "self" ? "Dejar de ser hijo de otro producto" : "Desvincular este hijo"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: mode === "self" ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["\xAB", nombreHijo, "\xBB dejar\xE1 de colgar de \xAB", nombrePadre, "\xBB", parentUpc ? " (UPC ".concat(parentUpc, ")") : "", "."]
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: ["\xAB", nombreHijo, "\xBB", childUpc ? " (UPC ".concat(childUpc, ")") : "", " dejar\xE1 de colgar de este producto."]
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Body, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+              children: "No se borra nada."
+            }), " Todo lo que hered\xF3 \u2014atributos, descripciones, im\xE1genes y cadenas\u2014 se queda como informaci\xF3n propia del producto."]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: "Desaparecen las marcas de \xABHeredado\xBB y \xABPropio\xBB: sin padre dejan de querer decir algo."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+            children: ["Deja de recibir la propagaci\xF3n", mode === "self" ? " de su padre" : " de este producto", ": lo que se edite de un lado ya no baja al otro."]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: "aviso",
+            children: "Volver a ligarlos es a mano, y hay que elegir otra vez qu\xE9 hereda. Desvincular no se deshace solo."
+          })]
+        })
+      }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+        children: error
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "secondary",
+          onClick: onClose,
+          disabled: loading,
+          children: "Cancelar"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+          type: "button",
+          className: "primary",
+          onClick: submit,
+          disabled: loading,
+          children: loading ? "Desvinculando…" : "Desvincular"
+        })]
+      })]
+    })
+  });
+};
+
+exports.UnlinkVariantModal = UnlinkVariantModal;

package/dist/components/organisms/UnlinkVariantModal/styles.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Panel = exports.Overlay = exports.Message = exports.Header = exports.Footer = exports.Body = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var PINK = "#E13AA8";
+
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(40, 31, 51, 0.4);\n"])));
+
+exports.Overlay = Overlay;
+
+var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: min(460px, 92vw);\n  border-radius: 10px;\n  background-color: ", ";\n  font-family: ", ";\n  overflow: hidden;\n"])), _variables.GlobalColors.white, _variables.FontFamily.Raleway);
+
+exports.Panel = Panel;
+
+var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 18px 22px 10px;\n\n  h2 {\n    margin: 0;\n    font-family: ", ";\n    font-size: 16px;\n    color: ", ";\n  }\n\n  p {\n    margin: 6px 0 0;\n    font-size: 13px;\n    line-height: 1.4;\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.Header = Header;
+
+var Body = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 22px 8px;\n\n  ul {\n    margin: 0;\n    padding-left: 18px;\n  }\n\n  li {\n    margin-bottom: 6px;\n    font-size: 13px;\n    line-height: 1.4;\n    color: ", ";\n  }\n\n  /* Lo \xFAnico que no se puede deshacer solo va marcado: el resto son\n     consecuencias, esta es una advertencia. */\n  li.aviso {\n    color: ", ";\n  }\n"])), _variables.GlobalColors.deep_gray, PINK);
+
+exports.Body = Body;
+
+var Message = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 8px 22px 0;\n  padding: 10px 12px;\n  border-radius: 6px;\n  background-color: rgba(225, 58, 168, 0.1);\n  font-size: 13px;\n  line-height: 1.4;\n  color: ", ";\n"])), PINK);
+
+exports.Message = Message;
+
+var Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  padding: 16px 22px 20px;\n\n  button {\n    height: 38px;\n    padding: 0 16px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 13px;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  .secondary {\n    border: 1px solid ", ";\n    background: none;\n    color: ", ";\n  }\n\n  .primary {\n    border: 1px solid ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
+
+exports.Footer = Footer;