contentoh-components-library 21.6.60 → 21.6.61

package/src/components/pages/ProductEdition/sections/ServiceTeam.jsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from "react";
+import {
+  Avatar,
+  Box,
+  ButtonBase,
+  List,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+  Popover,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+
+import { getProfilePicture } from "../../../../global-files/data";
+import { COLORS, FONTS } from "../../CreatorsProductEdition/sections/tokens";
+
+/*
+  Equipo del servicio abierto: especialista, coordinador y auditor, con foto,
+  rol y nombre («Tú» para quien está viendo).
+
+  Reemplaza al grupo de avatares «Asig.» de la barra de pestañas, que no decía
+  quién era quién. Quien puede asignar (permissions.canAssign) hace clic en el
+  especialista o en el coordinador y elige de la lista, igual que antes.
+
+  `roles` (opcional) limita los roles que se muestran: un servicio del catálogo
+  de flujo simple solo tiene especialista. Por omisión, los tres.
+*/
+
+const ROLES = [
+  { role: "especialist", label: "Especialista", assignable: true },
+  { role: "facilitator", label: "Coordinador", assignable: true },
+  { role: "auditor", label: "Auditor", assignable: false },
+];
+
+const nameOf = (person) =>
+  person ? [person.name, person.last_name].filter(Boolean).join(" ").trim() : "";
+
+const initialsOf = (person) =>
+  nameOf(person)
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+
+const PersonAvatar = ({ person, isMe, size = 26 }) => (
+  <Avatar
+    src={person?.id_user ? getProfilePicture(person.id_user, 48, 48) : undefined}
+    alt={nameOf(person)}
+    sx={{
+      width: size,
+      height: size,
+      fontSize: size * 0.4,
+      fontFamily: FONTS.Lato,
+      fontWeight: 700,
+      bgcolor: person ? COLORS.s2 : COLORS.white,
+      color: person ? COLORS.s5 : COLORS.s3,
+      border: `2px solid ${isMe ? COLORS.magenta_s2 : COLORS.white}`,
+      outline: person ? "none" : `1px dashed ${COLORS.s3}`,
+      outlineOffset: -3,
+    }}
+  >
+    {person ? initialsOf(person) : "?"}
+  </Avatar>
+);
+
+export const ServiceTeam = ({
+  assignees = {},
+  userId,
+  canAssign = false,
+  assig,
+  setAssignation,
+  resetKey,
+  roles,
+}) => {
+  const [anchor, setAnchor] = useState(null);
+  const [role, setRole] = useState(null);
+  useEffect(() => setAnchor(null), [resetKey]);
+
+  const options = assig?.collaborators?.[role] ?? [];
+
+  return (
+    <>
+      <Stack direction="row" alignItems="center" spacing={1.5} sx={{ flexWrap: "wrap", rowGap: 0.75, minWidth: 0 }}>
+        {ROLES.filter((item) => !roles || roles.includes(item.role)).map((item) => {
+          const person = assignees[item.role];
+          const isMe = Boolean(person) && person.id_user === userId;
+          const clickable = canAssign && item.assignable;
+          const content = (
+            <Stack direction="row" alignItems="center" spacing={0.75}>
+              <PersonAvatar person={person} isMe={isMe} />
+              <Box sx={{ lineHeight: 1.1, textAlign: "left", minWidth: 0 }}>
+                <Typography
+                  sx={{
+                    fontFamily: FONTS.Lato,
+                    fontSize: 10,
+                    color: COLORS.s4,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.05em",
+                  }}
+                >
+                  {item.label}
+                </Typography>
+                <Typography
+                  noWrap
+                  sx={{
+                    maxWidth: 120,
+                    fontFamily: FONTS.Lato,
+                    fontSize: 12,
+                    fontWeight: isMe ? 700 : 400,
+                    color: person ? COLORS.s5 : COLORS.s3,
+                  }}
+                >
+                  {person ? (isMe ? "Tú" : nameOf(person)) : "Sin asignar"}
+                </Typography>
+              </Box>
+            </Stack>
+          );
+          const title = person ? `${item.label}: ${nameOf(person)}` : `${item.label}: sin asignar`;
+          return clickable ? (
+            <Tooltip key={item.role} title={`${title} · Clic para asignar`} arrow>
+              <ButtonBase
+                onClick={(event) => {
+                  setRole(item.role);
+                  setAnchor(event.currentTarget);
+                }}
+                sx={{ borderRadius: "8px", px: 0.5, py: 0.25, "&:hover": { bgcolor: COLORS.s2 } }}
+              >
+                {content}
+              </ButtonBase>
+            </Tooltip>
+          ) : (
+            <Tooltip key={item.role} title={title} arrow>
+              <Box sx={{ px: 0.5, py: 0.25 }}>{content}</Box>
+            </Tooltip>
+          );
+        })}
+      </Stack>
+
+      <Popover
+        open={Boolean(anchor)}
+        anchorEl={anchor}
+        onClose={() => setAnchor(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+        transformOrigin={{ vertical: "top", horizontal: "left" }}
+        PaperProps={{ sx: { width: 260, maxWidth: "calc(100vw - 24px)", mt: 1, p: 1.5, borderRadius: "10px" } }}
+      >
+        <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 12, fontWeight: 700, color: COLORS.s4, mb: 1 }}>
+          Asignar {ROLES.find((item) => item.role === role)?.label.toLowerCase()}
+        </Typography>
+        {options.length ? (
+          <List dense disablePadding sx={{ maxHeight: 280, overflowY: "auto" }}>
+            {options.map((person, index) => (
+              <ListItemButton
+                key={`${index}-${person?.id_user}`}
+                selected={person?.id_user === assignees[role]?.id_user}
+                onClick={() => {
+                  setAssignation && setAssignation(role, person?.id_user);
+                  setAnchor(null);
+                }}
+                sx={{ borderRadius: "6px" }}
+              >
+                <ListItemAvatar sx={{ minWidth: 38 }}>
+                  <PersonAvatar person={person} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={nameOf(person)}
+                  primaryTypographyProps={{ sx: { fontFamily: FONTS.Lato, fontSize: 14, color: COLORS.s5 } }}
+                />
+              </ListItemButton>
+            ))}
+          </List>
+        ) : (
+          <Typography sx={{ fontFamily: FONTS.Lato, fontSize: 13, color: COLORS.s4, py: 1 }}>
+            Sin personas para asignar
+          </Typography>
+        )}
+      </Popover>
+    </>
+  );
+};

package/src/components/pages/ProductEdition/sections/ServiceTools.jsx

@@ -0,0 +1,134 @@
+import { Button, IconButton, Stack, Tooltip } from "@mui/material";
+
+import { useAiProductEdition } from "../../../../contexts/AiProductEdition";
+
+import saveIcon from "../../../../assets/images/generalButton/saveIcon.svg";
+import saveIconHover from "../../../../assets/images/generalButton/saveIconHover.svg";
+import deleteIcon from "../../../../assets/images/generalButton/deleteIcon.svg";
+import deleteIconHover from "../../../../assets/images/generalButton/deleteIconHover.svg";
+import downloadIcon from "../../../../assets/images/generalButton/downloadIcon.svg";
+import rowsLayoutIcon from "../../../../assets/images/generalButton/rowLayout.svg";
+import gridLayoutIcon from "../../../../assets/images/generalButton/gridLayout.svg";
+
+import { COLORS, FONTS } from "../../CreatorsProductEdition/sections/tokens";
+
+/*
+  Herramientas del servicio abierto: versión, guardar y, en imágenes, borrar,
+  descargar y cambiar de vista.
+
+  Sale de `ServiceActions` de CreatorsProductEdition sin tres cosas que ahora
+  viven en otro lado o ya no se usan:
+    - el botón de ayuda (las diapositivas de «Valida tu producto…»): el equipo
+      ya no lo usa;
+    - el estatus: lo muestra el encabezado del servicio junto a su nombre;
+    - las asignaciones: las muestra ServiceTeam con nombre y rol.
+*/
+
+/** Botón redondo con el ícono de siempre y su versión «hover». */
+const RoundIcon = ({ label, icon, hoverIcon, onClick, bordered = COLORS.s3, hoverBg = COLORS.magenta_s2, size = 15 }) => (
+  <Tooltip title={label} arrow>
+    <IconButton
+      aria-label={label}
+      onClick={onClick}
+      sx={{
+        width: 28,
+        height: 28,
+        p: 0,
+        border: bordered ? `1px solid ${bordered}` : "none",
+        backgroundImage: `url(${icon})`,
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        backgroundSize: size,
+        "&:hover": {
+          backgroundColor: hoverBg,
+          borderColor: hoverBg,
+          ...(hoverIcon ? { backgroundImage: `url(${hoverIcon})` } : {}),
+        },
+      }}
+    />
+  </Tooltip>
+);
+
+export const ServiceTools = ({
+  imagesSection = false,
+  imageLayout,
+  setImageLayout,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
+  version,
+  setShowVersionSelector,
+}) => {
+  const { inputsUsingAi } = useAiProductEdition();
+
+  const save = () => {
+    if (Object.values(inputsUsingAi ?? {}).some((input) => !!input?.using)) {
+      console.warn("Para guardar se debe de dejar de usar la generación con IA");
+      return;
+    }
+    onClickSave && onClickSave();
+  };
+
+  return (
+    <Stack direction="row" alignItems="center" gap="8px" sx={{ flexShrink: 0 }}>
+      {version && (
+        <Tooltip title="Cambiar de versión" arrow>
+          <Button
+            onClick={(event) => {
+              event.stopPropagation();
+              setShowVersionSelector(true);
+            }}
+            sx={{
+              minWidth: 28,
+              width: 28,
+              height: 28,
+              p: 0,
+              borderRadius: "50%",
+              border: `1px solid ${COLORS.color_purple}`,
+              color: COLORS.color_purple,
+              fontFamily: FONTS.AvenirNext,
+              fontSize: 11,
+              lineHeight: "28px",
+            }}
+          >
+            V{version}
+          </Button>
+        </Tooltip>
+      )}
+      {showSaveButton && (
+        <RoundIcon
+          label="Guardar"
+          icon={saveIcon}
+          hoverIcon={saveIconHover}
+          bordered={COLORS.color_gray}
+          hoverBg={COLORS.color_pink}
+          size={undefined}
+          onClick={save}
+        />
+      )}
+      {imagesSection && (
+        <>
+          {showSaveButton && (
+            <RoundIcon
+              label="Borrar seleccionadas"
+              icon={deleteIcon}
+              hoverIcon={deleteIconHover}
+              onClick={() => askToDeleteImages && askToDeleteImages()}
+            />
+          )}
+          <RoundIcon label="Descargar" icon={downloadIcon} onClick={() => downloadImages && downloadImages()} />
+          <Tooltip title={imageLayout ? "Ver como lista" : "Ver como cuadrícula"} arrow>
+            <IconButton
+              aria-label={imageLayout ? "Ver como lista" : "Ver como cuadrícula"}
+              onClick={() => setImageLayout && setImageLayout(!imageLayout)}
+              sx={{ width: 28, height: 28, p: 0 }}
+            >
+              <img src={imageLayout ? rowsLayoutIcon : gridLayoutIcon} alt="" width={24} height={24} />
+            </IconButton>
+          </Tooltip>
+        </>
+      )}
+    </Stack>
+  );
+};

package/src/components/pages/ProductEdition/services.js

@@ -0,0 +1,187 @@
+import { SERVICE_CATALOG } from "../../organisms/ServicesNavigation/catalog";
+import {
+  CLASSIC_SERVICES,
+  isAssignedToService,
+  isAuditorAssigned,
+  isPendingFor,
+  rolesInService,
+  tabOf,
+} from "./permissions";
+
+/*
+  Servicios del producto para la lista lateral de la edición.
+
+  Hoy los servicios con editor son los tres de siempre: salen de los estatus
+  del producto (`<servicio>_status`) y el de la cadena activa sale de
+  `services_data`. Un servicio con estatus vacío o «NS» no está contratado y
+  no aparece.
+
+  Esta lista es el respaldo de cuando GET /product-services no responde
+  (buildServicesFromApi, abajo): solo los servicios de siempre. Los servicios
+  del producto nunca salen de datos de muestra; la prop `demoServices` es solo
+  para las historias de Storybook.
+*/
+
+const NOT_REQUESTED = [undefined, null, "", "NS", "NULL", "-"];
+
+const catalogEntry = (serviceName) =>
+  SERVICE_CATALOG.find((item) => item.service_name === serviceName) ?? {
+    service_name: serviceName,
+    group: "review",
+    view: "files",
+    icon: null,
+  };
+
+/** Persona de las listas de asignables (`collaborator_assignations`). */
+const findUser = (collaborators, id) => {
+  if (!id) return null;
+  const all = Object.values(collaborators ?? {}).flat();
+  const user = all.find((item) => item?.id_user === id);
+  return user ?? { id_user: id, name: "Asignado", last_name: "" };
+};
+
+// `services_data` y `collaborator_assignations` llegan en null mientras carga.
+const retailerStatus = (servicesData, serviceName, retailerId, fallback) =>
+  (servicesData ?? []).find((item) => item.service === serviceName && item.id_retailer === retailerId)?.status ??
+  fallback;
+
+/**
+ * @returns {Array<{service_name, display_name, group, view, icon, status,
+ *   tab, assignees, mine, pending, is_demo}>}
+ */
+export const buildEditionServices = ({
+  product,
+  user,
+  servicesData,
+  activeRetailerId,
+  collaboratorAssignations,
+  // Auditores (rol 6): `collaborator_assignations` solo trae especialistas y
+  // coordinadores, y sin esta lista el auditor no tendría nombre.
+  auditors,
+  demoServices,
+}) => {
+  if (!product) return [];
+
+  const classic = CLASSIC_SERVICES.filter(
+    (item) => !NOT_REQUESTED.includes(product[`${item.service_name}_status`])
+  ).map((item) => {
+    const definition = catalogEntry(item.service_name);
+    const collaborators = collaboratorAssignations?.[item.tab]?.collaborators ?? {};
+    const status = retailerStatus(
+      servicesData,
+      item.service_name,
+      activeRetailerId,
+      product[`${item.service_name}_status`]
+    );
+    return {
+      ...definition,
+      status,
+      tab: item.tab,
+      assignees: {
+        especialist: findUser(collaborators, product[`id_${item.service_name}_especialist`]),
+        facilitator: findUser(collaborators, product[`id_${item.service_name}_facilitator`]),
+        auditor: product.id_auditor
+          ? findUser({ ...collaborators, auditors: auditors ?? [] }, product.id_auditor)
+          : null,
+      },
+      mine:
+        rolesInService(product, user, item.service_name).length > 0 ||
+        isAssignedToService(product, user, item.service_name) ||
+        isAuditorAssigned(product, user),
+      pending: isPendingFor(product, user, item.service_name, status),
+      is_demo: false,
+    };
+  });
+
+  // Solo historias (`demoServices`): el auditor del producto lo es de todos sus
+  // servicios, así «Míos» de un auditor no esconde los que no tienen editor.
+  const productAuditor = product.id_auditor ? findUser({ auditors: auditors ?? [] }, product.id_auditor) : null;
+  const auditorIsMe = isAuditorAssigned(product, user);
+
+  const demo = (demoServices ?? []).map((service) => ({
+    ...catalogEntry(service.service_name),
+    display_name: service.display_name ?? catalogEntry(service.service_name).display_name ?? service.service_name,
+    status: service.status,
+    tab: null,
+    assignees: { especialist: null, facilitator: null, auditor: productAuditor },
+    mine: auditorIsMe,
+    pending: false,
+    is_demo: true,
+  }));
+
+  return [...classic, ...demo];
+};
+
+/* ------------------------------------------------------------------------ */
+/* Desde el backend (GET /product-services)                                 */
+/* ------------------------------------------------------------------------ */
+
+/*
+  Los servicios del producto como los devuelve GET /product-services: leídos
+  de las columnas del catálogo de rel_order_services (id_service, id_status,
+  id_especialist, id_facilitator). Trae todos los servicios del producto, los
+  de siempre y los del catálogo, con su estatus por cadena, su equipo y lo que
+  la persona puede hacer con cada uno (`actions`).
+
+  Cuando esta lista está, la edición la usa en lugar de armar los servicios con
+  los campos del producto (buildEditionServices).
+*/
+
+/** En qué estatus le toca actuar a cada rol (flujo completo, el del motor). */
+const WORKFLOW_ACTIONABLE = {
+  especialist: ["AS", "CA", "RC", "RA"],
+  facilitator: ["PA", "IE"],
+  auditor: ["AC", "RP", "RCA", "SAC"],
+};
+
+/** Roles de la persona en el servicio, según su equipo. */
+const rolesOfUser = (assignees, userId) =>
+  Object.entries(assignees ?? {})
+    .filter(([, person]) => person && userId && person.id_user === userId)
+    .map(([role]) => role);
+
+/**
+ * @param {{ productServices: { services: Array }, user: Object, activeRetailerId?: number }} params
+ * @returns {Array} servicios con la forma de la lista lateral, más `api` (el
+ *   servicio tal como llegó) para los paneles que lo necesitan.
+ */
+export const buildServicesFromApi = ({ productServices, user, activeRetailerId }) => {
+  const userId = user?.id_user;
+  return (productServices?.services ?? []).map((service) => {
+    const entry = catalogEntry(service.service_name);
+    const flowType = service.status_flow?.flow_type ?? "workflow";
+    const simple = flowType === "simple";
+    // Estatus de la cadena activa; si el servicio no es por cadena (o no está
+    // en ella), el general.
+    const status =
+      service.retailers?.find((retailer) => retailer.id_retailer === activeRetailerId)?.status ??
+      service.status ??
+      null;
+    const assignees = service.assignees ?? {};
+    const roles = rolesOfUser(assignees, userId);
+    const parts = String(status?.status_name ?? "").split("/");
+    const pending = simple
+      ? roles.includes("especialist") && Boolean(status) && !status.is_final
+      : roles.some((role) => parts.some((part) => WORKFLOW_ACTIONABLE[role]?.includes(part)));
+
+    return {
+      ...entry,
+      service_name: service.service_name,
+      display_name: service.display_name ?? entry.display_name ?? service.service_name,
+      group: service.category?.category_name ?? entry.group,
+      view: simple ? "simple" : entry.view,
+      icon: service.icon_name ?? entry.icon,
+      status: status?.status_name ?? null,
+      status_label: status?.display_name ?? null,
+      status_color: status?.color ?? null,
+      status_flow_type: flowType,
+      tab: tabOf(service.service_name),
+      assignees,
+      mine: roles.length > 0,
+      pending,
+      is_demo: false,
+      is_catalog: !service.is_legacy,
+      api: service,
+    };
+  });
+};

package/src/components/pages/ProductEdition/services.test.js

@@ -0,0 +1,88 @@
+/**
+ * Lista lateral de la edición a partir de GET /product-services.
+ *
+ *   npx vitest run src/components/pages/ProductEdition
+ */
+import { describe, expect, it } from "vitest";
+import { buildServicesFromApi } from "./services";
+
+const person = (id_user, name) => ({ id_user, name, last_name: "Prueba" });
+const status = (status_name, extra = {}) => ({ status_name, display_name: status_name, color: null, ...extra });
+
+const productServices = {
+  article_id: 10,
+  order_id: 500,
+  services: [
+    {
+      service_name: "datasheet",
+      display_name: "Ficha técnica",
+      category: { category_name: "texts" },
+      status_flow: { flow_name: "workflow", flow_type: "workflow" },
+      is_legacy: true,
+      status: status("PA"),
+      retailers: [
+        { id_retailer: 58, status: status("PA") },
+        { id_retailer: 59, status: status("RA/AS") },
+      ],
+      roles: ["especialist", "facilitator", "auditor"],
+      assignees: { especialist: person(426, "Textos"), facilitator: person(901, "Coord"), auditor: person(903, "QA") },
+      actions: { set_status: false, assign: false },
+    },
+    {
+      service_name: "productPurchase",
+      display_name: "Compra de producto",
+      icon_name: null,
+      category: { category_name: "logistics" },
+      status_flow: { flow_name: "checkbox", flow_type: "simple" },
+      is_legacy: false,
+      per_retailer: false,
+      status: status("PE", { display_name: "Pendiente", color: "#FFAA00", is_final: false }),
+      retailers: [{ id_retailer: 0, status: status("PE", { display_name: "Pendiente", color: "#FFAA00", is_final: false }) }],
+      status_options: [status("PE"), status("HE", { is_final: true })],
+      roles: ["especialist"],
+      assignees: { especialist: person(426, "Textos"), facilitator: null, auditor: null },
+      actions: { set_status: true, assign: true },
+    },
+  ],
+};
+
+describe("buildServicesFromApi", () => {
+  const specialist = { id_user: 426, id_role: 7 };
+
+  it("toma el estatus de la cadena activa; si no está en ella, el general", () => {
+    const [datasheet, purchase] = buildServicesFromApi({ productServices, user: specialist, activeRetailerId: 59 });
+    expect(datasheet.status).toBe("RA/AS");
+    expect(purchase.status).toBe("PE");
+  });
+
+  it("los de siempre conservan su pestaña; los del catálogo usan su bloque y la vista simple", () => {
+    const [datasheet, purchase] = buildServicesFromApi({ productServices, user: specialist, activeRetailerId: 58 });
+    expect(datasheet).toMatchObject({ tab: "Ficha técnica", group: "texts", is_catalog: false });
+    expect(purchase).toMatchObject({
+      tab: null,
+      group: "logistics",
+      view: "simple",
+      icon: "purchase",
+      status_label: "Pendiente",
+      status_color: "#FFAA00",
+      status_flow_type: "simple",
+      is_catalog: true,
+    });
+    expect(purchase.api).toBe(productServices.services[1]);
+  });
+
+  it("«Míos» y «te toca» salen del equipo del servicio", () => {
+    const [datasheet, purchase] = buildServicesFromApi({ productServices, user: specialist, activeRetailerId: 59 });
+    // RA/AS: le toca a la especialista asignada.
+    expect(datasheet).toMatchObject({ mine: true, pending: true });
+    // Flujo simple sin terminar: le toca a su especialista.
+    expect(purchase).toMatchObject({ mine: true, pending: true });
+
+    const [, other] = buildServicesFromApi({ productServices, user: { id_user: 1 }, activeRetailerId: 59 });
+    expect(other).toMatchObject({ mine: false, pending: false });
+  });
+
+  it("sin respuesta del backend, lista vacía", () => {
+    expect(buildServicesFromApi({ productServices: null, user: specialist })).toEqual([]);
+  });
+});

package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -1,4 +1,5 @@
 import { RetailerProductEdition } from "./index";
+import { withDemoServices } from "../../organisms/ServicesWorkspace/demo";
 
 export default {
   title: "Components/pages/RetailerProductEdition",
@@ -217,3 +218,14 @@ user: {
 }
 
 };
+
+/**
+ * Con la pestaña "Servicios" (la activa Creators con `showServicesTab`) y
+ * servicios de ejemplo además de los tres de siempre.
+ */
+export const ConPestanaServicios = Template.bind({});
+ConPestanaServicios.args = {
+  ...RetailerProductEditionDefault.args,
+  showServicesTab: true,
+  productSelected: withDemoServices(RetailerProductEditionDefault.args.productSelected, 14),
+};

package/src/components/pages/RetailerProductEdition/index.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import axios from "axios";
 import { useDropzone } from "react-dropzone";
@@ -74,6 +74,7 @@ import generateThumbnail from "./generateThumnail";
 
 import { AiProductEditionProvider } from "../../../contexts/AiProductEdition";
 import ChangeStatusModal from "../../organisms/ChangeStatusModal";
+import ServicesWorkspace from "../../organisms/ServicesWorkspace";
 
 import { Skeleton, Box, Stack } from "@mui/material";
 
@@ -105,8 +106,14 @@ function obtenerDuracionVideoBase64(base64Data) {
   });
 }
 
+/** Pestaña con todos los servicios del producto (ver organisms/ServicesWorkspace). */
+const SERVICES_TAB = "Servicios";
+
 const RetailerProductEditionView = ({
   tabsSections,
+  // Opcional para no cambiar la edición de quien no la pida (aplicación de
+  // proveedores). Creators la activa.
+  showServicesTab = false,
   productSelected = {},
   user = {},
   token,
@@ -134,6 +141,13 @@ const RetailerProductEditionView = ({
 
   const isRetailer = user?.is_retailer;
 
+  const tabs = useMemo(
+    () =>
+      showServicesTab ? { ...tabsSections, [SERVICES_TAB]: false } : tabsSections,
+    [tabsSections, showServicesTab],
+  );
+  const isServicesTab = state.active_tab === SERVICES_TAB;
+
   const [showVersionSelector, setShowVersionSelector] =
     useCloseModal("version-selector");
   const [auditableVersion, setAuditableVersion] = useState(null);
@@ -2928,7 +2942,7 @@ const RetailerProductEditionView = ({
               }
             />
             <FullTabsMenu
-              tabsSections={tabsSections}
+              tabsSections={tabs}
               status={getStatusByCurrentServiceAndRetailer()}
               activeTab={state.active_tab}
               isRetailer={isRetailer}
@@ -2975,6 +2989,14 @@ const RetailerProductEditionView = ({
                 <Loading />
               ) : (
                 <>
+                  {isServicesTab && (
+                    <ServicesWorkspace
+                      product={state.product}
+                      retailers={state.product?.categoryRetailerInOrder ?? []}
+                      canAssign={![7, 8].includes(user.id_role)}
+                      onOpenEditor={handleOnChangeActiveTab}
+                    />
+                  )}
                   {state.active_tab === "Descripción" &&
                     (state.product?.description_status !== "NS" ? (
                       <InputGroup
@@ -3150,7 +3172,10 @@ const RetailerProductEditionView = ({
                 </>
               )}
             </div>
-            {(isUserAssignedToService(state.active_tab) ||
+            {/* Comentario y cambio de estatus son de un servicio con editor;
+                en la pestaña Servicios cada servicio lleva su propio detalle. */}
+            {!isServicesTab &&
+              (isUserAssignedToService(state.active_tab) ||
               isAuditorAssigned()) &&
               state.product[`${getConceptByTab(state.active_tab)}_status`] !==
                 "NS" && (