contentoh-components-library 21.6.59 → 21.6.61

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

@@ -0,0 +1,337 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ServicesNavigation = 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 _material = require("@mui/material");
+
+var _ImageOutlined = _interopRequireDefault(require("@mui/icons-material/ImageOutlined"));
+
+var _ProductHeader = require("../../pages/CreatorsProductEdition/sections/ProductHeader");
+
+var _ui = require("./ui");
+
+var _ServicesRail = require("./ServicesRail");
+
+var _ServiceToolbar = require("./ServiceToolbar");
+
+var _views = require("./views");
+
+var _model = require("./model");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  PROTOTIPO: navegación por servicios en la edición de producto.
+
+  Responde a dos preguntas:
+    1. Si el producto solo lleva Traducción, ¿por qué ver Ficha técnica,
+       Descripción e Imágenes? → Solo aparecen los servicios contratados. Con
+       uno solo no hay lista: la edición abre directo en él.
+    2. Con 20 servicios, ¿cómo se navega sin perderse? → Lista lateral en lugar
+       de pestañas, filtrada por omisión a lo que la persona trabaja («Míos»),
+       con un Resumen y un punto rosa en lo que le toca a cada quien.
+
+  Usa la cabecera real de la edición de Creators (ProductHeader); la columna de
+  imagen es un marcador de lugar y las vistas de trabajo son de ejemplo. No está
+  conectado a la base: los servicios y sus estatus llegan por props.
+*/
+var ImagePanelPlaceholder = function ImagePanelPlaceholder() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      display: {
+        xs: "none",
+        lg: "block"
+      },
+      flex: "0 0 clamp(240px, 22%, 320px)",
+      minWidth: 0
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        aspectRatio: "1 / 1",
+        borderRadius: "8px",
+        border: "1px solid ".concat(_ui.COLORS.s2),
+        background: "linear-gradient(135deg, ".concat(_ui.COLORS.blue_light, ", ").concat(_ui.COLORS.s2, ")"),
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageOutlined.default, {
+        sx: {
+          fontSize: 56,
+          color: _ui.COLORS.s3
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: _ui.captionSx,
+        children: "Imagen principal"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Stack, {
+      direction: "row",
+      spacing: 1,
+      sx: {
+        mt: 1
+      },
+      children: [0, 1, 2, 3].map(function (index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          sx: {
+            flex: 1,
+            aspectRatio: "1 / 1",
+            borderRadius: "6px",
+            border: "1px solid ".concat(index === 0 ? _ui.COLORS.magenta_s2 : _ui.COLORS.s2),
+            bgcolor: _ui.COLORS.s1
+          }
+        }, index);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ui.captionSx), {}, {
+        mt: 1.5
+      }),
+      children: "La columna de imagen de la edici\xF3n se queda como est\xE1."
+    })]
+  });
+};
+
+var TopBar = function TopBar(_ref) {
+  var currentUser = _ref.currentUser,
+      currentUserRole = _ref.currentUserRole;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1.5,
+    sx: {
+      px: 2,
+      py: 1.25,
+      borderBottom: "1px solid ".concat(_ui.COLORS.s2),
+      flexWrap: "wrap",
+      rowGap: 0.5
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        fontFamily: _ui.TITLE_STACK,
+        fontWeight: 600,
+        fontSize: 18,
+        color: _ui.COLORS.s5
+      },
+      children: "Edici\xF3n de producto"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, {
+      label: "Prototipo \xB7 datos de ejemplo",
+      size: "small",
+      sx: {
+        height: 22,
+        bgcolor: _ui.COLORS.s2,
+        color: _ui.COLORS.s4,
+        fontFamily: _ui.FONT_STACK,
+        fontWeight: 700,
+        fontSize: 11
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        flex: 1
+      }
+    }), currentUser && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+      sx: _ui.captionSx,
+      children: ["Viendo como ", /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
+        children: (0, _model.fullName)(currentUser)
+      }), currentUserRole ? " \xB7 ".concat(currentUserRole) : ""]
+    })]
+  });
+};
+
+var ServicesNavigation = function ServicesNavigation(_ref2) {
+  var _product$categoryReta, _services$find;
+
+  var product = _ref2.product,
+      _ref2$services = _ref2.services,
+      services = _ref2$services === void 0 ? [] : _ref2$services,
+      currentUser = _ref2.currentUser,
+      currentUserRole = _ref2.currentUserRole,
+      initialService = _ref2.initialService,
+      _ref2$initialCollapse = _ref2.initialCollapsed,
+      initialCollapsed = _ref2$initialCollapse === void 0 ? false : _ref2$initialCollapse;
+  var userId = currentUser === null || currentUser === void 0 ? void 0 : currentUser.id_user;
+  var isDesktop = (0, _material.useMediaQuery)("(min-width:900px)");
+  var single = services.length === 1;
+  var showFilter = (0, _model.hasUsefulFilter)(services, userId);
+
+  var _useState = (0, _react.useState)(function () {
+    return initialService !== null && initialService !== void 0 ? initialService : (0, _model.initialSelection)(services, userId);
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(function () {
+    return (0, _model.defaultFilter)(services, userId);
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      filter = _useState4[0],
+      setFilter = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(initialCollapsed),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      collapsed = _useState6[0],
+      setCollapsed = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      drawerOpen = _useState8[0],
+      setDrawerOpen = _useState8[1];
+
+  var retailers = (_product$categoryReta = product === null || product === void 0 ? void 0 : product.categoryRetailer) !== null && _product$categoryReta !== void 0 ? _product$categoryReta : [];
+
+  var _useState9 = (0, _react.useState)(function () {
+    var _retailers$, _retailers$2;
+
+    return {
+      id: (_retailers$ = retailers[0]) === null || _retailers$ === void 0 ? void 0 : _retailers$.id_retailer,
+      name: (_retailers$2 = retailers[0]) === null || _retailers$2 === void 0 ? void 0 : _retailers$2.name
+    };
+  }),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      activeRetailer = _useState10[0],
+      _setActiveRetailer = _useState10[1];
+
+  var service = (_services$find = services.find(function (item) {
+    return item.service_name === selected;
+  })) !== null && _services$find !== void 0 ? _services$find : null;
+  var isSummary = !single && (selected === _model.SUMMARY || !service);
+
+  var select = function select(name) {
+    var target = services.find(function (item) {
+      return item.service_name === name;
+    }); // Si se abre algo que no es suyo (desde el Resumen), se pasa a «Todos»
+    // para que el servicio abierto se vea marcado en la lista.
+
+    if (target && filter === "mine" && !(0, _model.isMine)(target, userId)) setFilter("all");
+    setSelected(name);
+    setDrawerOpen(false);
+  };
+
+  var renderRail = function renderRail(variant) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServicesRail.ServicesRail, {
+      variant: variant,
+      services: services,
+      selected: isSummary ? _model.SUMMARY : selected,
+      onSelect: select,
+      userId: userId,
+      filter: filter,
+      onFilterChange: setFilter,
+      showFilter: showFilter,
+      collapsed: collapsed,
+      onToggleCollapsed: function onToggleCollapsed() {
+        return setCollapsed(function (value) {
+          return !value;
+        });
+      },
+      onClose: variant === "drawer" ? function () {
+        return setDrawerOpen(false);
+      } : undefined
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      flex: 1,
+      minWidth: 0,
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      bgcolor: _ui.COLORS.white,
+      fontFamily: _ui.FONT_STACK,
+      textAlign: "left"
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopBar, {
+      currentUser: currentUser,
+      currentUserRole: currentUserRole
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        display: "flex"
+      },
+      children: [!single && isDesktop && renderRail("rail"), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          flex: 1,
+          minWidth: 0,
+          overflowY: "auto",
+          p: {
+            xs: 1.5,
+            md: 2.5
+          },
+          display: "flex",
+          gap: 2.5,
+          alignItems: "flex-start"
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImagePanelPlaceholder, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+          sx: {
+            flex: 1,
+            minWidth: 0
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductHeader.ProductHeader, {
+            headerData: product,
+            percent: 72,
+            activeRetailer: activeRetailer,
+            setActiveRetailer: function setActiveRetailer(retailer) {
+              var _retailer$id_retailer, _retailer$name;
+
+              return _setActiveRetailer({
+                id: (_retailer$id_retailer = retailer === null || retailer === void 0 ? void 0 : retailer.id_retailer) !== null && _retailer$id_retailer !== void 0 ? _retailer$id_retailer : retailer === null || retailer === void 0 ? void 0 : retailer.id,
+                name: (_retailer$name = retailer === null || retailer === void 0 ? void 0 : retailer.name) !== null && _retailer$name !== void 0 ? _retailer$name : retailer === null || retailer === void 0 ? void 0 : retailer.retailer
+              });
+            },
+            servicesData: null,
+            showValidationButtons: false
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ServiceToolbar.ServiceToolbar, {
+            service: service,
+            isSummary: isSummary,
+            summaryCounts: {
+              total: services.length,
+              pending: services.filter(function (item) {
+                return (0, _model.isPendingFor)(item, userId);
+              }).length
+            },
+            onOpenRail: !single && !isDesktop ? function () {
+              return setDrawerOpen(true);
+            } : undefined,
+            userId: userId
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_views.ServiceView, {
+            selected: isSummary ? _model.SUMMARY : selected,
+            service: service,
+            services: services,
+            userId: userId,
+            onSelect: select,
+            retailerName: activeRetailer.name
+          })]
+        })]
+      })]
+    }), !single && !isDesktop && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Drawer, {
+      anchor: "left",
+      open: drawerOpen,
+      onClose: function onClose() {
+        return setDrawerOpen(false);
+      },
+      PaperProps: {
+        sx: {
+          width: "min(320px, 88vw)"
+        }
+      },
+      children: renderRail("drawer")
+    })]
+  });
+};
+
+exports.ServicesNavigation = ServicesNavigation;
+var _default = ServicesNavigation;
+exports.default = _default;

package/dist/components/organisms/ServicesNavigation/model.js

@@ -0,0 +1,167 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rolesOf = exports.railOrder = exports.isPendingFor = exports.isMine = exports.initials = exports.initialSelection = exports.hasUsefulFilter = exports.groupServices = exports.groupLabel = exports.fullName = exports.defaultFilter = exports.SUMMARY = exports.ROLE_LABELS = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _catalog = require("./catalog");
+
+/** Identificador del elemento «Resumen» de la lista (no es un servicio). */
+var SUMMARY = "__summary";
+exports.SUMMARY = SUMMARY;
+var ROLE_LABELS = {
+  especialist: "Especialista",
+  facilitator: "Coordinador",
+  auditor: "Auditor"
+};
+/*
+  Estatus en los que le toca actuar a cada rol. Un estatus compuesto como
+  «RA/AS» (rechazado por el auditor y de vuelta con el especialista) cuenta si
+  cualquiera de sus partes le toca al rol.
+*/
+
+exports.ROLE_LABELS = ROLE_LABELS;
+var ACTIONABLE = {
+  especialist: ["AS", "CA", "RC", "RA"],
+  facilitator: ["PA", "IE"],
+  auditor: ["AC", "RP", "RCA", "SAC"]
+};
+
+var statusParts = function statusParts(status) {
+  return String(status !== null && status !== void 0 ? status : "").split("/");
+};
+
+var fullName = function fullName(user) {
+  return user ? [user.name, user.last_name].filter(Boolean).join(" ") : "";
+};
+
+exports.fullName = fullName;
+
+var initials = function initials(user) {
+  var _user$name$, _user$name, _user$last_name$, _user$last_name;
+
+  return user ? "".concat((_user$name$ = (_user$name = user.name) === null || _user$name === void 0 ? void 0 : _user$name[0]) !== null && _user$name$ !== void 0 ? _user$name$ : "").concat((_user$last_name$ = (_user$last_name = user.last_name) === null || _user$last_name === void 0 ? void 0 : _user$last_name[0]) !== null && _user$last_name$ !== void 0 ? _user$last_name$ : "").toUpperCase() : "";
+};
+
+exports.initials = initials;
+
+var rolesOf = function rolesOf(service, userId) {
+  var _service$assignees;
+
+  return Object.entries((_service$assignees = service.assignees) !== null && _service$assignees !== void 0 ? _service$assignees : {}).filter(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        user = _ref2[1];
+
+    return user && user.id_user === userId;
+  }).map(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
+        role = _ref4[0];
+
+    return role;
+  });
+};
+/*
+  `mine` y `pending` pueden venir ya calculados en el servicio (la edición real
+  los saca de ProductEdition/permissions.js con las asignaciones del
+  producto). Si no vienen, se calculan aquí con `assignees`, como en el
+  prototipo.
+*/
+
+
+exports.rolesOf = rolesOf;
+
+var isMine = function isMine(service, userId) {
+  return typeof service.mine === "boolean" ? service.mine : rolesOf(service, userId).length > 0;
+};
+
+exports.isMine = isMine;
+
+var isPendingFor = function isPendingFor(service, userId) {
+  return typeof service.pending === "boolean" ? service.pending : rolesOf(service, userId).some(function (role) {
+    return statusParts(service.status).some(function (part) {
+      var _ACTIONABLE$role;
+
+      return (_ACTIONABLE$role = ACTIONABLE[role]) === null || _ACTIONABLE$role === void 0 ? void 0 : _ACTIONABLE$role.includes(part);
+    });
+  });
+};
+
+exports.isPendingFor = isPendingFor;
+
+var groupLabel = function groupLabel(key) {
+  var _SERVICE_GROUPS$find$, _SERVICE_GROUPS$find;
+
+  return (_SERVICE_GROUPS$find$ = (_SERVICE_GROUPS$find = _catalog.SERVICE_GROUPS.find(function (group) {
+    return group.key === key;
+  })) === null || _SERVICE_GROUPS$find === void 0 ? void 0 : _SERVICE_GROUPS$find.label) !== null && _SERVICE_GROUPS$find$ !== void 0 ? _SERVICE_GROUPS$find$ : "";
+};
+/** Servicios en bloques fijos, en el orden del catálogo. */
+
+
+exports.groupLabel = groupLabel;
+
+var groupServices = function groupServices(services) {
+  return _catalog.SERVICE_GROUPS.map(function (group) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, group), {}, {
+      services: services.filter(function (service) {
+        return service.group === group.key;
+      })
+    });
+  }).filter(function (group) {
+    return group.services.length > 0;
+  });
+};
+/** El orden en que aparecen en la lista lateral. */
+
+
+exports.groupServices = groupServices;
+
+var railOrder = function railOrder(services) {
+  return groupServices(services).flatMap(function (group) {
+    return group.services;
+  });
+};
+/**
+ * Qué se abre al entrar: con un solo servicio, ese; si a la persona le toca
+ * algo, lo primero que le toca; si no, el Resumen.
+ */
+
+
+exports.railOrder = railOrder;
+
+var initialSelection = function initialSelection(services, userId) {
+  if (services.length === 1) return services[0].service_name;
+  var pending = railOrder(services).find(function (service) {
+    return isPendingFor(service, userId);
+  });
+  return pending ? pending.service_name : SUMMARY;
+};
+/**
+ * «Míos» solo tiene sentido si la persona trabaja algunos servicios del
+ * producto y no todos: con todos o con ninguno, el filtro no cambia nada.
+ */
+
+
+exports.initialSelection = initialSelection;
+
+var hasUsefulFilter = function hasUsefulFilter(services, userId) {
+  var mine = services.filter(function (service) {
+    return isMine(service, userId);
+  }).length;
+  return mine > 0 && mine < services.length;
+};
+
+exports.hasUsefulFilter = hasUsefulFilter;
+
+var defaultFilter = function defaultFilter(services, userId) {
+  return hasUsefulFilter(services, userId) ? "mine" : "all";
+};
+
+exports.defaultFilter = defaultFilter;