contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,813 @@
+"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"
+            })
+          })
+        }))]
+      })]
+    })]
+  });
+}