contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,184 +0,0 @@
-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

@@ -1,134 +0,0 @@
-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

@@ -1,187 +0,0 @@
-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

@@ -1,88 +0,0 @@
-/**
- * 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([]);
-  });
-});