contentoh-components-library 21.6.44 → 21.6.46

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

@@ -0,0 +1,360 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VariantGroupModal = 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");
+
+/*
+  Agrupar el producto como variante de otros.
+
+  Ojo con la palabra: esto NO es padre/hijo. Ahí hay jerarquía y herencia —un
+  padre baja valores a sus hijos—. Aquí no hay ninguna de las dos: los productos
+  de un grupo son "el mismo producto en otra presentación" y nada más. Comparten
+  un código en `article.variant_group` y ya. Por eso el modal no pregunta qué
+  heredar: no hay nada que heredar.
+
+  Dos formas de agrupar, y son la misma operación por debajo:
+    - elegir un grupo que ya existe
+    - teclear un código nuevo, que crea el grupo con este producto dentro
+
+  No hay tabla de grupos: un grupo existe mientras algún producto use su código.
+  Eso hace que una errata no falle, solo cree un grupo de un miembro — de ahí que
+  la lista de los existentes vaya PRIMERO y el campo de código nuevo después.
+
+  props (* requerido):
+    - *articleId: el producto que se va a agrupar
+    - articleName / articleUpc: para nombrarlo
+    - currentGroup: el grupo en el que ya está, si lo hay
+    - *token, endpoint
+    - *onClose, onSaved
+*/
+var VariantGroupModal = function VariantGroupModal(_ref) {
+  var articleId = _ref.articleId,
+      articleName = _ref.articleName,
+      articleUpc = _ref.articleUpc,
+      _ref$currentGroup = _ref.currentGroup,
+      currentGroup = _ref$currentGroup === void 0 ? null : _ref$currentGroup,
+      token = _ref.token,
+      _ref$endpoint = _ref.endpoint,
+      endpoint = _ref$endpoint === void 0 ? process.env.REACT_APP_VARIANTS_ENDPOINT : _ref$endpoint,
+      onClose = _ref.onClose,
+      onSaved = _ref.onSaved;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      query = _useState2[0],
+      setQuery = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      groups = _useState4[0],
+      setGroups = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      saving = _useState8[0],
+      setSaving = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      error = _useState10[0],
+      setError = _useState10[1]; // Qué eligió el usuario: un código de la lista, o el que está escribiendo.
+
+
+  var _useState11 = (0, _react.useState)(null),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      selected = _useState12[0],
+      setSelected = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(""),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      nuevo = _useState14[0],
+      setNuevo = _useState14[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]);
+  var buscar = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(texto) {
+      var _data$groups, data;
+
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              setLoading(true);
+              setError(null);
+              _context2.prev = 2;
+              _context2.next = 5;
+              return request("groups", {
+                articleId: articleId,
+                query: texto !== null && texto !== void 0 ? texto : ""
+              });
+
+            case 5:
+              data = _context2.sent;
+              setGroups((_data$groups = data.groups) !== null && _data$groups !== void 0 ? _data$groups : []);
+              _context2.next = 12;
+              break;
+
+            case 9:
+              _context2.prev = 9;
+              _context2.t0 = _context2["catch"](2);
+              setError(_context2.t0 instanceof _api.ApiError || (_context2.t0 === null || _context2.t0 === void 0 ? void 0 : _context2.t0.name) === "ApiError" ? _context2.t0.message : "No se pudieron cargar los grupos.");
+
+            case 12:
+              _context2.prev = 12;
+              setLoading(false);
+              return _context2.finish(12);
+
+            case 15:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2, 9, 12, 15]]);
+    }));
+
+    return function (_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [request, articleId]); // Al abrir se listan los grupos que ya existen. Es lo que evita que el usuario
+  // teclee un código nuevo cuando en realidad quería sumarse a uno que ya está.
+
+  (0, _react.useEffect)(function () {
+    buscar(""); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  /*
+    El código se normaliza igual que en el servidor —mayúsculas, sin espacios—
+    para que lo que se ve en el campo sea lo que se va a guardar. Si el front
+    mostrara "abc 1" y la base guardara "ABC-1", el usuario buscaría después su
+    grupo por el texto que creyó escribir y no lo encontraría.
+  */
+
+  var normalizar = function normalizar(texto) {
+    return "".concat(texto !== null && texto !== void 0 ? texto : "").trim().replace(/\s+/g, "-").toUpperCase();
+  };
+
+  var codigoNuevo = normalizar(nuevo);
+  var codigoFinal = selected !== null && selected !== void 0 ? selected : codigoNuevo;
+  var esNuevo = !selected && !!codigoNuevo;
+  var yaEstaba = codigoFinal && codigoFinal === currentGroup;
+
+  var guardar = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var _data$group, data;
+
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(!codigoFinal || yaEstaba)) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return");
+
+            case 2:
+              setSaving(true);
+              setError(null);
+              _context3.prev = 4;
+              _context3.next = 7;
+              return request("join", {
+                articleId: articleId,
+                code: codigoFinal
+              });
+
+            case 7:
+              data = _context3.sent;
+              onSaved === null || onSaved === void 0 ? void 0 : onSaved((0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+                group: (_data$group = data.group) !== null && _data$group !== void 0 ? _data$group : codigoFinal
+              }));
+              onClose === null || onClose === void 0 ? void 0 : onClose();
+              _context3.next = 16;
+              break;
+
+            case 12:
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](4);
+              setError(_context3.t0 instanceof _api.ApiError || (_context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.name) === "ApiError" ? _context3.t0.message : "No se pudo agrupar el producto. Intenta de nuevo.");
+              setSaving(false);
+
+            case 16:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[4, 12]]);
+    }));
+
+    return function guardar() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var resumen = function resumen() {
+    if (yaEstaba) return "Este producto ya est\xE1 en \xAB".concat(codigoFinal, "\xBB.");
+    if (esNuevo) return "Se crear\xE1 el grupo \xAB".concat(codigoNuevo, "\xBB con este producto.");
+    if (selected) return "Se agregar\xE1 a \xAB".concat(selected, "\xBB.");
+    return "Elige un grupo o escribe un código nuevo.";
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Overlay, {
+    onClick: saving ? 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: "Agrupar como variante"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+          children: [articleName || "Producto ".concat(articleId), articleUpc ? " \xB7 UPC ".concat(articleUpc) : "", currentGroup ? " \xB7 hoy en \xAB".concat(currentGroup, "\xBB") : ""]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Body, {
+        children: [error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+          className: "error",
+          children: error
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SearchRow, {
+          onSubmit: function onSubmit(event) {
+            event.preventDefault();
+            buscar(query);
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            type: "text",
+            value: query,
+            placeholder: "Busca un grupo por su c\xF3digo",
+            onChange: function onChange(event) {
+              return setQuery(event.target.value);
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "submit",
+            disabled: loading,
+            children: loading ? "Buscando…" : "Buscar"
+          })]
+        }), groups.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.List, {
+          children: groups.map(function (grupo) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+                  type: "radio",
+                  name: "variant-group",
+                  checked: selected === grupo.code,
+                  onChange: function onChange() {
+                    setSelected(grupo.code);
+                    setNuevo("");
+                  }
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "codigo",
+                  children: grupo.code
+                }), grupo.code === currentGroup ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "actual",
+                  children: "grupo actual"
+                }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+                  className: "cuenta",
+                  children: [grupo.products, " producto", grupo.products === 1 ? "" : "s"]
+                })]
+              })
+            }, grupo.code);
+          })
+        }), !loading && groups.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Message, {
+          children: query.trim() ? "Ningún grupo coincide con esa búsqueda." : "Todavía no hay grupos en esta compañía. Crea el primero abajo."
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NewGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+            htmlFor: "nuevo-grupo",
+            children: "O crea un grupo nuevo"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            id: "nuevo-grupo",
+            type: "text",
+            value: nuevo,
+            placeholder: "RELOJ-CASIO-A158",
+            maxLength: 50,
+            onChange: function onChange(event) {
+              setNuevo(event.target.value);
+              setSelected(null);
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "ayuda",
+            children: "Letras, n\xFAmeros, guion y guion bajo. Se guarda en may\xFAsculas, as\xED que \xABabc-1\xBB y \xABABC-1\xBB son el mismo grupo."
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Footer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "resumen",
+          children: resumen()
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "acciones",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "secondary",
+            onClick: onClose,
+            disabled: saving,
+            children: "Cancelar"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            className: "primary",
+            onClick: guardar,
+            disabled: saving || !codigoFinal || yaEstaba,
+            children: saving ? "Guardando…" : "Aceptar"
+          })]
+        })]
+      })]
+    })
+  });
+};
+
+exports.VariantGroupModal = VariantGroupModal;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchRow = exports.Panel = exports.Overlay = exports.NewGroup = exports.Message = exports.List = 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, _templateObject7, _templateObject8, _templateObject9;
+
+var PINK = "#E13AA8";
+var PINK_RGB = "225, 58, 168";
+
+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  display: flex;\n  flex-direction: column;\n  width: min(560px, 92vw);\n  max-height: 86vh;\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: 20px 24px 12px;\n\n  h2 {\n    margin: 0;\n    font-family: ", ";\n    font-size: 17px;\n    color: ", ";\n  }\n\n  p {\n    margin: 4px 0 0;\n    font-size: 13px;\n    line-height: 1.4;\n    color: ", ";\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.GlobalColors.deep_gray, _variables.GlobalColors.gray);
+
+exports.Header = Header;
+
+var Body = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 4px 24px 12px;\n"])));
+
+exports.Body = Body;
+
+var SearchRow = _styledComponents.default.form(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 8px;\n  margin-bottom: 12px;\n\n  input {\n    flex: 1;\n    min-width: 0;\n    height: 36px;\n    padding: 0 12px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    font-family: ", ";\n    font-size: 13px;\n    color: ", ";\n  }\n\n  input:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  /*\n    Estas reglas faltaban y el bot\xF3n se sal\xEDa del panel.\n\n    Llevaba className=\"secondary\", pero esa clase solo est\xE1 definida dentro de\n    Footer, as\xED que aqu\xED no aplicaba nada: sal\xEDa como un bot\xF3n crudo del\n    navegador, sin altura ni ancho acotados. El flex-shrink es para que el texto\n    no se parta cuando el campo de b\xFAsqueda se lleva el espacio.\n  */\n  button {\n    flex-shrink: 0;\n    height: 36px;\n    padding: 0 18px;\n    border: none;\n    border-radius: 6px;\n    background-color: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 13px;\n    cursor: pointer;\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: default;\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Raleway, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white, _variables.FontFamily.Raleway_600);
+
+exports.SearchRow = SearchRow;
+
+var List = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 12px;\n  padding: 0;\n  list-style: none;\n  border: 1px solid ", ";\n  border-radius: 6px;\n  overflow: hidden;\n\n  li + li {\n    border-top: 1px solid ", ";\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 9px 12px;\n    cursor: pointer;\n    font-size: 13px;\n    color: ", ";\n  }\n\n  label:hover {\n    background-color: ", ";\n  }\n\n  input[type=\"radio\"] {\n    accent-color: ", ";\n    flex-shrink: 0;\n  }\n\n  .codigo {\n    font-family: ", ";\n  }\n\n  .cuenta {\n    margin-left: auto;\n    font-size: 11px;\n    color: ", ";\n    white-space: nowrap;\n  }\n\n  /* El grupo en el que ya est\xE1 el producto: se marca para que no lo elija otra\n     vez creyendo que hace algo. */\n  .actual {\n    margin-left: auto;\n    font-size: 11px;\n    font-style: italic;\n    color: ", ";\n    white-space: nowrap;\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s1, PINK, _variables.FontFamily.Raleway_600, _variables.GlobalColors.gray, PINK);
+
+exports.List = List;
+
+var NewGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 12px;\n  border: 1px dashed rgba(", ", 0.5);\n  border-radius: 6px;\n  background-color: rgba(", ", 0.04);\n\n  label {\n    display: block;\n    margin-bottom: 6px;\n    font-family: ", ";\n    font-size: 12px;\n    color: ", ";\n  }\n\n  input {\n    width: 100%;\n    height: 36px;\n    padding: 0 12px;\n    border: 1px solid ", ";\n    border-radius: 6px;\n    font-family: inherit;\n    font-size: 13px;\n    text-transform: uppercase;\n    color: ", ";\n  }\n\n  input:focus {\n    outline: none;\n    border-color: ", ";\n  }\n\n  .ayuda {\n    display: block;\n    margin-top: 6px;\n    font-size: 11px;\n    line-height: 1.4;\n    color: ", ";\n  }\n"])), PINK_RGB, PINK_RGB, _variables.FontFamily.Raleway_600, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, _variables.GlobalColors.gray);
+
+exports.NewGroup = NewGroup;
+
+var Message = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 12px;\n  padding: 10px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  line-height: 1.4;\n  background-color: ", ";\n  color: ", ";\n\n  &.error {\n    background-color: rgba(", ", 0.1);\n    color: ", ";\n  }\n"])), _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK_RGB, PINK);
+
+exports.Message = Message;
+
+var Footer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 16px 24px;\n  border-top: 1px solid ", ";\n\n  .resumen {\n    font-size: 12px;\n    color: ", ";\n  }\n\n  .acciones {\n    display: flex;\n    gap: 10px;\n  }\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.GlobalColors.s2, _variables.GlobalColors.gray, _variables.FontFamily.Raleway_600, _variables.GlobalColors.s2, _variables.GlobalColors.deep_gray, PINK, PINK, _variables.GlobalColors.white);
+
+exports.Footer = Footer;