contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,813 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ServicesWorkspace = exports.default = ServicesWorkspace;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _react = require("react");
-
-var _material = require("@mui/material");
-
-var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-
-var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
-
-var _EditOutlined = _interopRequireDefault(require("@mui/icons-material/EditOutlined"));
-
-var _CloudUploadOutlined = _interopRequireDefault(require("@mui/icons-material/CloudUploadOutlined"));
-
-var _ArrowForward = _interopRequireDefault(require("@mui/icons-material/ArrowForward"));
-
-var _AssigneePicker = _interopRequireDefault(require("./AssigneePicker"));
-
-var _tooltipStyles = require("./tooltipStyles");
-
-var _demo = require("./demo");
-
-var _servicesModel = require("./servicesModel");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-/*
-  Pestaña "Servicios" de la edición de producto.
-
-  Con 3 servicios bastaban 3 pestañas; con 20 la barra deja de servir. Aquí
-  todos los servicios del producto viven en un mismo lugar, con el lenguaje que
-  ya usa la tabla de Creators:
-    - izquierda: el resumen (barra por etapas y lo que pide atención), un
-      buscador y la lista agrupada por etapa, desplegable.
-    - derecha: el servicio elegido: estatus, equipo (responsable, facilitador,
-      auditor), su avance por cadena y su entregable.
-  Ficha técnica, Descripción e Imágenes también aparecen en la lista para ver
-  el panorama completo, pero se siguen editando en su pestaña (botón "Ir a").
-*/
-var C = {
-  pink: "#E33AA9",
-  pinkHard: "#B12D84",
-  purple: "#8A6CAA",
-  textPurple: "#503D66",
-  purpleLight: "#F0EEF2",
-  white: "#FFFFFF",
-  gray: "#707070",
-  grayLight: "#F0F0F0",
-  black: "#262626"
-};
-var sectionTitleSx = {
-  fontFamily: "Lato, sans-serif",
-  fontSize: 12,
-  fontWeight: 700,
-  letterSpacing: 0.4,
-  textTransform: "uppercase",
-  color: C.gray,
-  mb: 1
-};
-
-function StatusChip(_ref) {
-  var status = _ref.status,
-      _ref$long = _ref.long,
-      long = _ref$long === void 0 ? false : _ref$long;
-  var color = (0, _servicesModel.getStatusColor)(status);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    component: "span",
-    title: (0, _servicesModel.getStatusName)(status),
-    sx: {
-      display: "inline-flex",
-      alignItems: "center",
-      height: 22,
-      px: 1,
-      borderRadius: "6px",
-      background: color,
-      color: C.white,
-      fontFamily: "Lato, sans-serif",
-      fontSize: 12,
-      fontWeight: 700,
-      whiteSpace: "nowrap"
-    },
-    children: long ? "".concat(status, " \xB7 ").concat((0, _servicesModel.getStatusName)(status)) : status
-  });
-}
-
-function StageDot(_ref2) {
-  var color = _ref2.color,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 8 : _ref2$size;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    component: "span",
-    sx: {
-      width: size,
-      height: size,
-      borderRadius: "50%",
-      background: color,
-      flexShrink: 0
-    }
-  });
-}
-
-function ServicesBar(_ref3) {
-  var groups = _ref3.groups;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-    "aria-hidden": "true",
-    sx: {
-      display: "flex",
-      gap: "2px",
-      height: 8
-    },
-    children: groups.flatMap(function (group) {
-      return group.services.map(function (service) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-          component: "span",
-          sx: {
-            flex: "1 1 0",
-            minWidth: 3,
-            borderRadius: "2px",
-            background: group.stage.color
-          }
-        }, service.service_name);
-      });
-    })
-  });
-}
-
-function ServicesWorkspace(_ref4) {
-  var _services$find;
-
-  var product = _ref4.product,
-      _ref4$retailers = _ref4.retailers,
-      retailers = _ref4$retailers === void 0 ? [] : _ref4$retailers,
-      _ref4$users = _ref4.users,
-      users = _ref4$users === void 0 ? {} : _ref4$users,
-      _ref4$canAssign = _ref4.canAssign,
-      canAssign = _ref4$canAssign === void 0 ? true : _ref4$canAssign,
-      onAssign = _ref4.onAssign,
-      onOpenEditor = _ref4.onOpenEditor;
-  var services = (0, _react.useMemo)(function () {
-    return (0, _servicesModel.getProductServices)(product);
-  }, [product]);
-  var groups = (0, _react.useMemo)(function () {
-    return (0, _servicesModel.groupServicesByStage)(services);
-  }, [services]);
-  var attention = (0, _servicesModel.getAttention)(groups);
-
-  var _useState = (0, _react.useState)(""),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      query = _useState2[0],
-      setQuery = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(function () {
-    return (0, _servicesModel.pickInitialService)(services);
-  }),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      selectedName = _useState4[0],
-      setSelectedName = _useState4[1];
-
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      expanded = _useState6[0],
-      setExpanded = _useState6[1]; // Al cambiar de producto: se elige lo que pide atención y se abre su etapa.
-
-
-  var productKey = "".concat(product === null || product === void 0 ? void 0 : product.id_article, "-").concat(product === null || product === void 0 ? void 0 : product.id_order);
-  (0, _react.useEffect)(function () {
-    var first = (0, _servicesModel.pickInitialService)(services);
-    setSelectedName(first);
-    var firstService = services.find(function (service) {
-      return service.service_name === first;
-    });
-    setExpanded(firstService ? [(0, _servicesModel.getServiceStage)(firstService).stage_name] : []); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [productKey]);
-  var text = query.trim().toLowerCase();
-  var visibleGroups = text ? (0, _servicesModel.groupServicesByStage)(services.filter(function (service) {
-    return service.display_name.toLowerCase().includes(text);
-  })) : groups;
-  var selected = (_services$find = services.find(function (service) {
-    return service.service_name === selectedName;
-  })) !== null && _services$find !== void 0 ? _services$find : null;
-
-  var toggle = function toggle(stageName) {
-    return setExpanded(function (prev) {
-      return prev.includes(stageName) ? prev.filter(function (name) {
-        return name !== stageName;
-      }) : [].concat((0, _toConsumableArray2.default)(prev), [stageName]);
-    });
-  };
-
-  if (services.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      sx: {
-        p: 4,
-        textAlign: "center",
-        color: C.gray,
-        fontFamily: "Lato, sans-serif"
-      },
-      children: "Este producto no tiene servicios solicitados."
-    });
-  }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      display: "grid",
-      gridTemplateColumns: {
-        xs: "1fr",
-        md: "300px minmax(0, 1fr)"
-      },
-      minHeight: 480,
-      border: "1px solid ".concat(C.purpleLight),
-      borderRadius: "12px",
-      background: C.white,
-      overflow: "hidden",
-      textAlign: "left",
-      // La librería no fija la tipografía del cuerpo: sin esto, los textos
-      // sueltos (Box) heredan la del navegador fuera de las aplicaciones.
-      fontFamily: "Lato, sans-serif"
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      component: "nav",
-      "aria-label": "Servicios del producto",
-      sx: {
-        borderRight: {
-          md: "1px solid ".concat(C.purpleLight)
-        },
-        p: 2,
-        display: "flex",
-        flexDirection: "column",
-        gap: 1.5,
-        minWidth: 0
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          display: "flex",
-          alignItems: "baseline",
-          gap: 1
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            fontFamily: "Raleway, sans-serif",
-            fontSize: 16,
-            fontWeight: 600,
-            color: C.textPurple
-          },
-          children: "Servicios"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            flex: 1,
-            fontFamily: "Lato, sans-serif",
-            fontSize: 12,
-            color: C.gray
-          },
-          children: services.length
-        }), attention && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          component: "span",
-          sx: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 0.75,
-            px: 1,
-            height: 22,
-            alignSelf: "center",
-            borderRadius: "11px",
-            background: C.purpleLight,
-            fontFamily: "Lato, sans-serif",
-            fontSize: 12,
-            fontWeight: 700,
-            color: C.textPurple,
-            whiteSpace: "nowrap"
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StageDot, {
-            color: attention.stage.color
-          }), attention.label]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ServicesBar, {
-        groups: groups
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TextField, {
-        size: "small",
-        placeholder: "Buscar servicio\u2026",
-        value: query,
-        onChange: function onChange(event) {
-          return setQuery(event.target.value);
-        },
-        InputProps: {
-          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {
-              sx: {
-                fontSize: 18,
-                color: C.gray
-              }
-            })
-          }),
-          sx: {
-            borderRadius: "8px",
-            fontFamily: "Lato, sans-serif",
-            fontSize: 13,
-            "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: C.pink
-            }
-          }
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 0.5,
-          overflowY: "auto",
-          maxHeight: 520
-        },
-        children: [visibleGroups.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            py: 2,
-            textAlign: "center",
-            fontSize: 13,
-            color: C.gray
-          },
-          children: "Sin coincidencias"
-        }), visibleGroups.map(function (_ref5) {
-          var stage = _ref5.stage,
-              inStage = _ref5.services;
-          var isOpen = Boolean(text) || expanded.includes(stage.stage_name);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-              onClick: function onClick() {
-                return toggle(stage.stage_name);
-              },
-              "aria-expanded": isOpen,
-              sx: {
-                width: "100%",
-                display: "flex",
-                alignItems: "center",
-                gap: 1,
-                px: 1,
-                py: 0.75,
-                borderRadius: "8px",
-                textAlign: "left",
-                "&:hover": {
-                  backgroundColor: C.purpleLight
-                }
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StageDot, {
-                color: stage.color,
-                size: 10
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                sx: {
-                  flex: 1,
-                  fontSize: 13,
-                  fontWeight: 700,
-                  color: C.textPurple
-                },
-                children: stage.display_name
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                sx: {
-                  fontFamily: "Lato, sans-serif",
-                  fontSize: 12,
-                  fontWeight: 700,
-                  color: C.gray
-                },
-                children: inStage.length
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandMore.default, {
-                fontSize: "small",
-                sx: {
-                  color: C.purple,
-                  transition: "transform 150ms",
-                  transform: isOpen ? "rotate(180deg)" : "none"
-                }
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Collapse, {
-              in: isOpen,
-              unmountOnExit: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-                sx: {
-                  display: "flex",
-                  flexDirection: "column",
-                  py: 0.25
-                },
-                children: inStage.map(function (service) {
-                  var active = service.service_name === selectedName;
-                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ButtonBase, {
-                    onClick: function onClick() {
-                      return setSelectedName(service.service_name);
-                    },
-                    "aria-current": active ? "true" : undefined,
-                    sx: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 1,
-                      pl: 3,
-                      pr: 1,
-                      py: 0.75,
-                      borderRadius: "8px",
-                      textAlign: "left",
-                      borderLeft: "3px solid ".concat(active ? C.pink : "transparent"),
-                      backgroundColor: active ? C.purpleLight : "transparent",
-                      "&:hover": {
-                        backgroundColor: C.purpleLight
-                      }
-                    },
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                      sx: {
-                        flex: 1,
-                        minWidth: 0,
-                        fontSize: 14,
-                        fontWeight: active ? 700 : 400,
-                        color: active ? C.textPurple : C.black,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap"
-                      },
-                      children: service.display_name
-                    }), service.editor_tab && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _tooltipStyles.whiteTooltipProps), {}, {
-                      title: "Se edita en la pesta\xF1a ".concat(service.editor_tab),
-                      arrow: true,
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {
-                        sx: {
-                          fontSize: 18,
-                          color: C.purple
-                        }
-                      })
-                    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusChip, {
-                      status: service.has_workflow ? service.status : "REG"
-                    })]
-                  }, service.service_name);
-                })
-              })
-            })]
-          }, stage.stage_name);
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      component: "section",
-      "aria-live": "polite",
-      sx: {
-        p: 3,
-        minWidth: 0
-      },
-      children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ServiceDetail, {
-        product: product,
-        service: selected,
-        retailers: retailers,
-        users: users,
-        canAssign: canAssign,
-        onAssign: onAssign,
-        onOpenEditor: onOpenEditor
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: {
-          color: C.gray
-        },
-        children: "Elige un servicio de la lista."
-      })
-    })]
-  });
-}
-
-var personName = function personName() {
-  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var id = arguments.length > 1 ? arguments[1] : undefined;
-  if (!id) return "Por asignar";
-  var person = list.find(function (user) {
-    return user.id_user === id;
-  });
-  return person ? [person.name, person.last_name].filter(Boolean).join(" ") : "Asignado";
-};
-
-function ServiceDetail(_ref6) {
-  var _ref7, _service$deliverable_, _DEMO_CATALOG$find, _service$assignees, _service$assignees2;
-
-  var product = _ref6.product,
-      service = _ref6.service,
-      retailers = _ref6.retailers,
-      users = _ref6.users,
-      canAssign = _ref6.canAssign,
-      _onAssign = _ref6.onAssign,
-      onOpenEditor = _ref6.onOpenEditor;
-  var stage = (0, _servicesModel.getServiceStage)(service);
-  var retailerStatuses = (0, _servicesModel.getRetailerStatuses)(product, service, retailers);
-  var deliverableType = (_ref7 = (_service$deliverable_ = service.deliverable_type) !== null && _service$deliverable_ !== void 0 ? _service$deliverable_ : (_DEMO_CATALOG$find = _demo.DEMO_CATALOG.find(function (item) {
-    return item.service_name === service.service_name;
-  })) === null || _DEMO_CATALOG$find === void 0 ? void 0 : _DEMO_CATALOG$find.deliverable_type) !== null && _ref7 !== void 0 ? _ref7 : "Entregable";
-
-  var lockReason = function lockReason(role) {
-    var _users$role;
-
-    // El auditor es del producto, no del servicio: no depende de este.
-    var perService = role !== "auditor";
-    if (perService && !service.has_workflow) return "Servicio de registro: no lleva equipo";
-    if (perService && service.is_demo) return "Se podrá asignar cuando el servicio exista en el catálogo";
-    if (!canAssign) return "Tu rol puede ver la asignación, pero no cambiarla";
-    if (!_onAssign) return "Asigna desde la tabla de productos";
-    if (!((_users$role = users[role]) !== null && _users$role !== void 0 ? _users$role : []).length) return "No hay personas asignables para este rol";
-    return null;
-  };
-
-  var team = [{
-    role: "especialist",
-    label: "Responsable",
-    currentId: (_service$assignees = service.assignees) === null || _service$assignees === void 0 ? void 0 : _service$assignees.especialist
-  }, {
-    role: "facilitator",
-    label: "Facilitador",
-    currentId: (_service$assignees2 = service.assignees) === null || _service$assignees2 === void 0 ? void 0 : _service$assignees2.facilitator
-  }, {
-    role: "auditor",
-    label: "Auditor",
-    currentId: (product === null || product === void 0 ? void 0 : product.id_auditor) || null,
-    note: "del producto"
-  }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 3
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 1,
-          flexWrap: "wrap"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "h3",
-          sx: {
-            m: 0,
-            fontFamily: "Raleway, sans-serif",
-            fontSize: 22,
-            fontWeight: 600,
-            color: C.textPurple
-          },
-          children: service.display_name
-        }), service.is_demo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-          component: "span",
-          sx: {
-            fontSize: 12,
-            fontStyle: "italic",
-            color: C.gray
-          },
-          children: "ejemplo"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          mt: 1,
-          display: "flex",
-          alignItems: "center",
-          gap: 1,
-          flexWrap: "wrap"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatusChip, {
-          status: service.has_workflow ? service.status : "REG",
-          long: true
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          component: "span",
-          sx: {
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 0.75,
-            fontSize: 13,
-            color: C.gray
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StageDot, {
-            color: stage.color
-          }), stage.display_name]
-        })]
-      })]
-    }), service.editor_tab && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        display: "flex",
-        alignItems: "center",
-        gap: 2,
-        p: 1.5,
-        borderRadius: "10px",
-        background: C.purpleLight
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {
-        sx: {
-          color: C.purple
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-        sx: {
-          flex: 1,
-          fontSize: 14,
-          color: C.textPurple
-        },
-        children: ["Este servicio se trabaja en la pesta\xF1a ", /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
-          children: service.editor_tab
-        }), "."]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Button, {
-        onClick: function onClick() {
-          return onOpenEditor === null || onOpenEditor === void 0 ? void 0 : onOpenEditor(service.editor_tab);
-        },
-        endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowForward.default, {
-          fontSize: "small"
-        }),
-        sx: {
-          textTransform: "none",
-          fontWeight: 700,
-          color: C.pinkHard,
-          borderRadius: "8px"
-        },
-        children: ["Ir a ", service.editor_tab]
-      })]
-    }), service.has_workflow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: sectionTitleSx,
-        children: "Acciones"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _tooltipStyles.whiteTooltipProps), {}, {
-        title: "Se habilita con el motor de estatus (status-engine)",
-        arrow: true,
-        placement: "top-start",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            display: "inline-flex",
-            gap: 1,
-            flexWrap: "wrap"
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            disabled: true,
-            variant: "contained",
-            sx: {
-              textTransform: "none",
-              borderRadius: "8px",
-              boxShadow: "none"
-            },
-            children: "Aprobar"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            disabled: true,
-            variant: "outlined",
-            sx: {
-              textTransform: "none",
-              borderRadius: "8px"
-            },
-            children: "Rechazar"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-            disabled: true,
-            sx: {
-              textTransform: "none",
-              borderRadius: "8px"
-            },
-            children: "Cambiar estatus\u2026"
-          })]
-        })
-      }))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: sectionTitleSx,
-        children: "Equipo"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 1
-        },
-        children: team.map(function (_ref8) {
-          var _users$role2;
-
-          var role = _ref8.role,
-              label = _ref8.label,
-              currentId = _ref8.currentId,
-              note = _ref8.note;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              display: "grid",
-              gridTemplateColumns: "minmax(0, 1fr) auto",
-              alignItems: "center",
-              gap: 1
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-              sx: {
-                fontSize: 14,
-                color: C.black
-              },
-              children: [label, note && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                sx: {
-                  ml: 0.75,
-                  fontSize: 12,
-                  color: C.gray
-                },
-                children: note
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AssigneePicker.default, {
-              // Aquí el estatus ya está arriba: la pastilla dice quién es.
-              statusLabel: function statusLabel(current) {
-                return current ? personName([current], current.id_user) : personName(users[role], currentId);
-              },
-              statusTitle: (0, _servicesModel.getStatusName)(service.status),
-              users: (_users$role2 = users[role]) !== null && _users$role2 !== void 0 ? _users$role2 : [],
-              currentId: currentId || null,
-              roleLabel: label,
-              lockedReason: lockReason(role),
-              onAssign: function onAssign(user) {
-                return _onAssign === null || _onAssign === void 0 ? void 0 : _onAssign(service.service_name, role, user);
-              }
-            }, "".concat(service.service_name, "-").concat(role, "-").concat(currentId))]
-          }, role);
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: sectionTitleSx,
-        children: "Por cadena"
-      }), retailerStatuses.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: {
-          fontSize: 13,
-          color: C.gray
-        },
-        children: "Sin cadenas para este servicio."
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 0.5
-        },
-        children: retailerStatuses.map(function (item) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              py: 0.75,
-              px: 1.25,
-              borderRadius: "8px",
-              background: C.grayLight
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                flex: 1,
-                fontSize: 14,
-                color: C.black
-              },
-              children: item.retailer
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatusChip, {
-              status: item.status
-            })]
-          }, item.id_retailer);
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: sectionTitleSx,
-        children: "Entregable"
-      }), service.editor_tab ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-        sx: {
-          fontSize: 13,
-          color: C.gray
-        },
-        children: ["El entregable es el contenido de la pesta\xF1a ", service.editor_tab, "."]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: 2,
-          p: 2,
-          borderRadius: "10px",
-          border: "1px dashed ".concat(C.purple)
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CloudUploadOutlined.default, {
-          sx: {
-            color: C.purple,
-            fontSize: 32
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          sx: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              fontSize: 14,
-              fontWeight: 700,
-              color: C.textPurple
-            },
-            children: "A\xFAn no hay entregables"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
-            sx: {
-              fontSize: 13,
-              color: C.gray
-            },
-            children: ["Tipo: ", deliverableType]
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _tooltipStyles.whiteTooltipProps), {}, {
-          title: "Se habilita con el gestor de servicios",
-          arrow: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
-              disabled: true,
-              variant: "outlined",
-              sx: {
-                textTransform: "none",
-                borderRadius: "8px"
-              },
-              children: "Subir entregable"
-            })
-          })
-        }))]
-      })]
-    })]
-  });
-}