contentoh-components-library 21.6.55 → 21.6.57

package/dist/components/pages/CreatorsProductEdition/mocks/mockApi.js

@@ -0,0 +1,251 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withRealApi = exports.withMockApi = exports.createMockAdapter = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = require("react");
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _api = require("./api.fixtures");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  API falsa para las historias: reemplaza el adaptador de axios mientras la
+  historia está montada. Toda la pantalla (contexto, utils, modales) usa la
+  instancia por omisión de axios y nadie usa `fetch`, así que con esto basta y
+  no hace falta ninguna dependencia nueva.
+
+  Lo que no reconoce responde 200 vacío y lo avisa en la consola: así una
+  llamada nueva no rompe la historia y se nota qué falta simular.
+*/
+var reply = function reply(config, data) {
+  var status = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
+  return new Promise(function (resolve) {
+    return (// Un poco de latencia para ver el skeleton y los estados de carga.
+      setTimeout(function () {
+        return resolve({
+          data: data,
+          status: status,
+          statusText: "OK",
+          headers: {},
+          config: config,
+          request: {}
+        });
+      }, 150)
+    );
+  });
+};
+
+var pathOf = function pathOf() {
+  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+
+  try {
+    var _URL = new URL(url, "http://mock"),
+        pathname = _URL.pathname,
+        searchParams = _URL.searchParams; // `/dev/articles-data/images` → `articles-data/images`
+
+
+    return {
+      path: pathname.replace(/^\/[^/]+\//, ""),
+      params: searchParams
+    };
+  } catch (_unused) {
+    return {
+      path: url,
+      params: new URLSearchParams()
+    };
+  }
+};
+
+var ok = {
+  statusCode: 200,
+  body: JSON.stringify({
+    message: "OK"
+  })
+};
+
+var createMockAdapter = function createMockAdapter() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$images = _ref.images,
+      images = _ref$images === void 0 ? true : _ref$images,
+      _ref$failLoad = _ref.failLoad,
+      failLoad = _ref$failLoad === void 0 ? false : _ref$failLoad,
+      delSolStatus = _ref.delSolStatus,
+      familia = _ref.familia,
+      grupo = _ref.grupo;
+
+  var fx = (0, _api.buildFixtures)({
+    images: images,
+    delSolStatus: delSolStatus,
+    familia: familia,
+    grupo: grupo
+  });
+  return function (config) {
+    var _fx$comments$query$co, _fx$users$query$fetch;
+
+    var method = (config.method || "get").toUpperCase();
+
+    var _pathOf = pathOf(config.url),
+        path = _pathOf.path,
+        params = _pathOf.params;
+
+    var query = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, Object.fromEntries(params)), config.params || {});
+
+    if (failLoad && path === "services") {
+      return reply(config, {
+        statusCode: 500,
+        body: JSON.stringify({
+          message: "Error simulado"
+        })
+      }, 500).then(function (response) {
+        return Promise.reject(Object.assign(new Error("Request failed with status code 500"), {
+          response: response
+        }));
+      });
+    }
+
+    if (method === "GET" && path === "comments") return reply(config, (_fx$comments$query$co = fx.comments[query.concept]) !== null && _fx$comments$query$co !== void 0 ? _fx$comments$query$co : fx.comments.images);
+    if (path === "articles-data/datasheets") return reply(config, fx.datasheets);
+    if (method === "GET" && path === "articles-data/descriptions") return reply(config, fx.descriptions);
+    if (path === "articles-data/images") return reply(config, fx.images);
+    if (method === "GET" && path === "users") return reply(config, (_fx$users$query$fetch = fx.users[query.fetchRole]) !== null && _fx$users$query$fetch !== void 0 ? _fx$users$query$fetch : {
+      data: []
+    });
+    if (path === "variants/family") return reply(config, fx.family);
+    if (path === "variants/group") return reply(config, fx.group);
+    if (method === "GET" && path === "services") return reply(config, fx.services);
+    if (path === "percentages") return reply(config, fx.percentages); // Sin versión auditable ni observación: con la API real de dev estas dos
+    // fallan por CORS, así que la pantalla ya sabe vivir sin ellas.
+
+    if (method === "GET" && path === "version-manager") {
+      return reply(config, {
+        statusCode: 200,
+        body: JSON.stringify({
+          data: null
+        })
+      });
+    }
+
+    if (method === "GET" && path === "articles-observations/read-observation") {
+      return reply(config, {
+        statusCode: 200,
+        body: JSON.stringify({
+          data: [{
+            observations: ""
+          }]
+        })
+      });
+    } // Guardados, evaluaciones y demás escrituras: se aceptan sin hacer nada.
+
+
+    if (method !== "GET") {
+      console.info("[mock API] ".concat(method, " ").concat(path), config.data);
+      return reply(config, ok);
+    }
+
+    console.warn("[mock API] sin simular: ".concat(method, " ").concat(path), query);
+    return reply(config, {
+      statusCode: 200,
+      body: JSON.stringify({
+        message: "OK",
+        data: []
+      })
+    });
+  };
+};
+
+exports.createMockAdapter = createMockAdapter;
+
+var realAdapter = function realAdapter() {
+  if (!_axios.default.defaults.__realAdapter) _axios.default.defaults.__realAdapter = _axios.default.defaults.adapter;
+  return _axios.default.defaults.__realAdapter;
+};
+
+var activeMock = null;
+/*
+  Monta la API falsa ANTES que la pantalla: el adaptador se cambia durante el
+  render, y los efectos de los hijos —que son los que piden los datos— corren
+  después.
+
+  Dos detalles que no son adorno:
+    - Se aplica en CADA render, no solo al montar. Al cambiar de historia desde
+      el menú, React reutiliza este mismo componente con otras `options` (por
+      ejemplo, de "Error al cargar" a otra): si solo se aplicara al montar, la
+      historia nueva seguiría con la API de la anterior.
+    - Al desmontarse solo restaura si nadie más tomó el relevo. El render de la
+      historia nueva ocurre ANTES que la limpieza de la vieja; restaurar a ciegas
+      le quitaría la API falsa a la historia que acaba de entrar.
+*/
+
+var MockApi = function MockApi(_ref2) {
+  var _activeMock;
+
+  var options = _ref2.options,
+      children = _ref2.children;
+
+  var _useState = (0, _react.useState)(function () {
+    return Symbol("mock-api");
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+      id = _useState2[0];
+
+  var key = JSON.stringify(options !== null && options !== void 0 ? options : {});
+  realAdapter();
+
+  if (((_activeMock = activeMock) === null || _activeMock === void 0 ? void 0 : _activeMock.id) !== id || activeMock.key !== key) {
+    _axios.default.defaults.adapter = createMockAdapter(options);
+    activeMock = {
+      id: id,
+      key: key
+    };
+  }
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _activeMock2;
+
+      if (((_activeMock2 = activeMock) === null || _activeMock2 === void 0 ? void 0 : _activeMock2.id) === id) {
+        _axios.default.defaults.adapter = realAdapter();
+        activeMock = null;
+      }
+    };
+  }, [id]);
+  return children;
+};
+/**
+ * Decorador de Storybook que envuelve la historia en la API falsa. La `key`
+ * obliga a remontar la pantalla cuando cambian las opciones, para que vuelva a
+ * pedir los datos con la API nueva.
+ */
+
+
+var withMockApi = function withMockApi(options) {
+  return function (Story) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(MockApi, {
+      options: options,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {})
+    }, JSON.stringify(options !== null && options !== void 0 ? options : {}));
+  };
+};
+/** Decorador para las historias contra dev: garantiza el adaptador real. */
+
+
+exports.withMockApi = withMockApi;
+
+var withRealApi = function withRealApi(Story) {
+  _axios.default.defaults.adapter = realAdapter();
+  activeMock = null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {});
+};
+
+exports.withRealApi = withRealApi;

package/dist/components/pages/CreatorsProductEdition/sections/CommentBox.js

@@ -0,0 +1,311 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CommentBox = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _material = require("@mui/material");
+
+var _genericModalCheck = _interopRequireDefault(require("../../../../assets/images/genericModal/genericModalCheck.svg"));
+
+var _errorModal = _interopRequireDefault(require("../../../../assets/images/genericModal/errorModal.svg"));
+
+var _tokens = require("./tokens");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Caja de comentario y botones de acción ("Cambio de Estatus", "Enviar
+  evaluación").
+
+  Reemplaza a TagAndInput (Quill) + Commentary + los botones de la vista
+  original. El comentario se guarda con el mismo `createComment` y los mismos
+  avisos que `handleOnSubmitComment`, pero leyendo el campo controlado en lugar
+  del DOM de Quill. Con eso se va un defecto del original: solo guardaba el
+  primer párrafo (`.ql-editor > p`), así que un comentario de dos párrafos
+  perdía el segundo.
+*/
+var MAX_CHARS = 999;
+/*
+  Se guarda el texto tal cual, con sus saltos de línea: los comentarios se
+  pintan como texto (`white-space: pre-wrap`), no como HTML, y es el mismo
+  formato que ya usa el mensaje de rechazo (convierte los <br> de Quill a \n).
+*/
+
+var toCommentText = function toCommentText(text) {
+  return text.trim();
+};
+
+var pill = {
+  borderRadius: "30px",
+  px: "25px",
+  py: "10px",
+  minHeight: 40,
+  textTransform: "none",
+  fontSize: 18,
+  lineHeight: "22px",
+  boxShadow: "none",
+  whiteSpace: "nowrap",
+  "&:hover": {
+    boxShadow: "none",
+    opacity: 0.7
+  }
+};
+
+var CommentBox = function CommentBox(_ref) {
+  var comment = _ref.comment,
+      crossComment = _ref.crossComment,
+      createComment = _ref.createComment,
+      token = _ref.token,
+      dispatch = _ref.dispatch,
+      showChangeStatus = _ref.showChangeStatus,
+      onOpenChangeStatus = _ref.onOpenChangeStatus,
+      showSendEvaluation = _ref.showSendEvaluation,
+      canSendEvaluation = _ref.canSendEvaluation,
+      onSendEvaluation = _ref.onSendEvaluation;
+
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      text = _useState2[0],
+      setText = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      sending = _useState4[0],
+      setSending = _useState4[1];
+
+  var notify = function notify(payload) {
+    return dispatch({
+      type: "SET_MODAL",
+      payload: (0, _objectSpread2.default)({
+        show: true
+      }, payload)
+    });
+  };
+
+  var submit = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (text.trim()) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              setSending(true);
+              _context.prev = 3;
+              _context.next = 6;
+              return createComment(toCommentText(text), token);
+
+            case 6:
+              setText("");
+              notify({
+                title: "",
+                message: "Comentario guardado con éxito",
+                image: _genericModalCheck.default
+              });
+              _context.next = 14;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](3);
+              console.error("Error saving comment:", _context.t0);
+              notify({
+                title: "Error",
+                message: "Hubo un error al guardar el comentario",
+                image: _errorModal.default
+              });
+
+            case 14:
+              _context.prev = 14;
+              setSending(false);
+              return _context.finish(14);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[3, 10, 14, 17]]);
+    }));
+
+    return function submit() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: {
+      xs: "column",
+      sm: "row"
+    },
+    alignItems: {
+      xs: "stretch",
+      sm: "flex-end"
+    },
+    justifyContent: "space-between",
+    flexWrap: "wrap",
+    gap: 1.5,
+    sx: {
+      py: "10px",
+      minWidth: 0
+    },
+    children: [!comment ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      direction: {
+        xs: "column",
+        md: "row"
+      },
+      alignItems: {
+        xs: "stretch",
+        md: "flex-end"
+      },
+      gap: 1,
+      sx: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          width: {
+            xs: "100%",
+            md: "min(500px, 100%)"
+          }
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "label",
+          htmlFor: "commentary-box-input",
+          sx: {
+            display: "block",
+            mb: 0.5,
+            fontFamily: _tokens.FONTS.Raleway,
+            fontSize: 14,
+            color: _tokens.COLORS.color_gray
+          },
+          children: "Caja de Comentario"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
+          id: "commentary-box-input",
+          multiline: true,
+          minRows: 4,
+          maxRows: 8,
+          fullWidth: true,
+          value: text,
+          onChange: function onChange(e) {
+            return setText(e.target.value.slice(0, MAX_CHARS));
+          },
+          helperText: "".concat(text.length, "/").concat(MAX_CHARS),
+          FormHelperTextProps: {
+            sx: {
+              textAlign: "right",
+              mx: 0
+            }
+          },
+          InputProps: {
+            sx: {
+              fontFamily: _tokens.FONTS.AvenirNext,
+              fontSize: 13,
+              borderRadius: "3px"
+            }
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "outlined",
+        disabled: !text.trim() || sending,
+        onClick: submit,
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill), {}, {
+          mb: {
+            md: "23px"
+          },
+          fontSize: 16,
+          borderColor: _tokens.COLORS.s5,
+          color: _tokens.COLORS.s5,
+          "&:hover": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill["&:hover"]), {}, {
+            borderColor: _tokens.COLORS.s5
+          })
+        }),
+        children: sending ? "Enviando…" : "Enviar comentario"
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      variant: "outlined",
+      sx: {
+        flex: 1,
+        minWidth: 0,
+        maxWidth: {
+          md: 500
+        },
+        minHeight: 80,
+        p: "10px",
+        borderColor: _tokens.COLORS.s2
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          whiteSpace: "pre-wrap",
+          overflowWrap: "anywhere",
+          fontFamily: _tokens.FONTS.AvenirNext,
+          fontSize: 12,
+          lineHeight: "15px",
+          color: _tokens.COLORS.deep_gray,
+          textDecoration: crossComment ? "line-through" : "none"
+        },
+        children: comment === null || comment === void 0 ? void 0 : comment.message
+      })
+    }), (showChangeStatus || showSendEvaluation) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+      gap: 2,
+      sx: {
+        flexShrink: 0
+      },
+      children: [showChangeStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+        id: "button-change-status",
+        variant: "contained",
+        onClick: onOpenChangeStatus,
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill), {}, {
+          bgcolor: "#E33AA9",
+          "&:hover": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill["&:hover"]), {}, {
+            bgcolor: "#E33AA9"
+          })
+        }),
+        children: "Cambio de Estatus"
+      }), showSendEvaluation &&
+      /*#__PURE__*/
+      // Igual que el original: gris y deshabilitado mientras no se pueda
+      // enviar (evaluación sin terminar o faltan requeridos).
+      (0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        disabled: !canSendEvaluation,
+        onClick: onSendEvaluation,
+        sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill), {}, {
+          bgcolor: "#71de56",
+          color: _tokens.COLORS.white,
+          "&:hover": (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pill["&:hover"]), {}, {
+            bgcolor: "#71de56"
+          }),
+          "&.Mui-disabled": {
+            bgcolor: "grey",
+            color: _tokens.COLORS.white
+          }
+        }),
+        children: "Enviar evaluaci\xF3n"
+      })]
+    })]
+  });
+};
+
+exports.CommentBox = CommentBox;