contentoh-components-library 21.6.61 → 21.6.62

package/src/components/organisms/ServicesNavigation/catalog.js

@@ -1,180 +0,0 @@
-/*
-  Datos de ejemplo del prototipo de navegación por servicios.
-
-  Nada de esto sale de la base todavía. Es el catálogo de `cat_service`
-  (docs/sql/catalog/002) con dos datos que la edición necesita para pintar cada
-  servicio:
-
-    - group: en qué bloque de la lista lateral va. Los bloques son fijos y no
-      dependen del estatus, para que un servicio siempre esté en el mismo lugar
-      y el usuario lo encuentre de memoria.
-    - view: qué vista de trabajo abre. La vista depende del tipo de entregable,
-      no del servicio: Foto, Edición y Resize abren la misma vista de imágenes.
-*/
-
-export const SERVICE_GROUPS = [
-  { key: "texts", label: "Textos" },
-  { key: "images", label: "Imágenes" },
-  { key: "media", label: "Multimedia y diseño" },
-  { key: "review", label: "Revisión y entrega" },
-  { key: "maintenance", label: "Mantenimiento" },
-  { key: "logistics", label: "Logística" },
-];
-
-/*
-  Los servicios activos de `cat_service` que se trabajan en la edición
-  (docs/sql/catalog/002 y 006 del backend), con los mismos `service_name`,
-  `display_name` y bloque (`category_name`). Dentro de cada bloque van en el
-  orden del catálogo (`sort_order`). Los de logística (Levantamiento, Compra,
-  Armado) usan un flujo simple (casilla o avance) y abren la vista «simple»:
-  su estatus por cadena y quién lo tiene, sin editor.
-
-  `view` sale del tipo de entregable: attributes → ficha, text → textos
-  (Traducción tiene la suya), images → la vista de imágenes compartida,
-  video → videos, file → archivos. A+, Golden, Banner y Render entregan
-  imágenes, pero son diseños: van como archivos.
-*/
-export const SERVICE_CATALOG = [
-  // Textos
-  { service_name: "datasheet", display_name: "Ficha técnica", group: "texts", view: "attributes", icon: "datasheet" },
-  { service_name: "description", display_name: "Descripción", group: "texts", view: "text", icon: "description" },
-  { service_name: "datasheetHeader", display_name: "Header Ficha", group: "texts", view: "text", icon: "header" },
-  { service_name: "translation", display_name: "Traducción", group: "texts", view: "translation", icon: "translation" },
-  { service_name: "seo", display_name: "SEO", group: "texts", view: "text", icon: "seo" },
-  { service_name: "benefitBullets", display_name: "Legales + beneficios (bullets)", group: "texts", view: "text", icon: "bullets" },
-  // Imágenes (fotografía y edición sobre las imágenes del producto)
-  { service_name: "images", display_name: "Imágenes", group: "images", view: "images", icon: "images" },
-  { service_name: "photo", display_name: "Foto", group: "images", view: "images", icon: "photo" },
-  { service_name: "edition", display_name: "Edición", group: "images", view: "images", icon: "edition" },
-  { service_name: "premiumImage", display_name: "Premium", group: "images", view: "images", icon: "premium" },
-  { service_name: "resize", display_name: "Resize", group: "images", view: "images", icon: "resize" },
-  { service_name: "adaptations", display_name: "Adaptaciones", group: "images", view: "images", icon: "adaptations" },
-  { service_name: "graphicTranslation", display_name: "Traducciones gráficas", group: "images", view: "images", icon: "graphicTranslation" },
-  { service_name: "visualUpdate", display_name: "Actualización visual", group: "images", view: "images", icon: "visualUpdate" },
-  { service_name: "ambientImage", display_name: "Ambientada", group: "images", view: "images", icon: "ambient" },
-  { service_name: "specialPhoto", display_name: "Foto especial", group: "images", view: "images", icon: "specialPhoto" },
-  { service_name: "modelPhoto", display_name: "Foto con modelo", group: "images", view: "images", icon: "modelPhoto" },
-  { service_name: "premiumAmbientImage", display_name: "Foto ambientada premium", group: "images", view: "images", icon: "premiumAmbient" },
-  // Multimedia y diseño
-  { service_name: "aplusPlatinum", display_name: "A+ / Platinum SKU", group: "media", view: "files", icon: "aplus", deliverable: "Diseño" },
-  { service_name: "brandstore", display_name: "Brandstore", group: "media", view: "files", icon: "brandstore", deliverable: "Diseño" },
-  { service_name: "image360", display_name: "360°", group: "media", view: "files", icon: "image360", deliverable: "Archivos 360" },
-  { service_name: "videos", display_name: "Videos", group: "media", view: "video", icon: "video" },
-  { service_name: "golden", display_name: "Golden", group: "media", view: "files", icon: "golden", deliverable: "Diseño" },
-  { service_name: "banner", display_name: "Banner", group: "media", view: "files", icon: "banner", deliverable: "Diseño" },
-  { service_name: "render", display_name: "Render", group: "media", view: "files", icon: "render", deliverable: "Render" },
-  { service_name: "arModel", display_name: "Modelado 3D (realidad aumentada)", group: "media", view: "files", icon: "arModel", deliverable: "Modelo 3D" },
-  { service_name: "manualDigitization", display_name: "Digitalización de manuales", group: "media", view: "files", icon: "manual", deliverable: "Manual digital" },
-  // Revisión y entrega
-  { service_name: "quality", display_name: "Calidad de textos", group: "review", view: "files", icon: "quality", deliverable: "Reporte" },
-  { service_name: "secodatReview", display_name: "Revisión secodat", group: "review", view: "files", icon: "secodat", deliverable: "Reporte" },
-  { service_name: "followUp", display_name: "Seguimiento", group: "review", view: "files", icon: "followUp", deliverable: "Reporte" },
-  { service_name: "uploadOnly", display_name: "Solo Carga", group: "review", view: "files", icon: "upload", deliverable: "Carga en cadena" },
-  { service_name: "audit", display_name: "Auditoría de textos", group: "review", view: "files", icon: "audit", deliverable: "Reporte" },
-  { service_name: "inputReview", display_name: "Revisión de Input", group: "review", view: "files", icon: "inputReview", deliverable: "Reporte" },
-  { service_name: "clientReview", display_name: "Revisión Cliente", group: "review", view: "files", icon: "clientReview", deliverable: "Reporte" },
-  { service_name: "visualQuality", display_name: "Calidad visual", group: "review", view: "files", icon: "visualQuality", deliverable: "Reporte" },
-  { service_name: "visualAudit", display_name: "Auditoría visual", group: "review", view: "files", icon: "visualAudit", deliverable: "Reporte" },
-  { service_name: "gdsnUpload", display_name: "Carga GDSN (Syncway)", group: "review", view: "files", icon: "gdsn", deliverable: "Carga en GDSN" },
-  // Mantenimiento
-  { service_name: "maintenance", display_name: "Mantenimiento de textos", group: "maintenance", view: "files", icon: "maintenance", deliverable: "Archivo" },
-  { service_name: "visualMaintenance", display_name: "Mantenimiento de imágenes", group: "maintenance", view: "images", icon: "visualMaintenance" },
-  // Logística: flujo simple (casilla o avance), sin editor. La edición muestra
-  // su estatus por cadena y quién lo tiene (ProductEdition/sections/CatalogServicePanel).
-  { service_name: "productPickup", display_name: "Levantamiento y recolección", group: "logistics", view: "simple", icon: "pickup" },
-  { service_name: "productPurchase", display_name: "Compra de producto en tienda", group: "logistics", view: "simple", icon: "purchase" },
-  { service_name: "productAssembly", display_name: "Armado de producto", group: "logistics", view: "simple", icon: "assembly" },
-];
-
-export const DEMO_USERS = {
-  ana: { id_user: 9100, name: "Ana", last_name: "López" },
-  carlos: { id_user: 9101, name: "Carlos", last_name: "Méndez" },
-  diana: { id_user: 9102, name: "Diana", last_name: "Ruiz" },
-  eduardo: { id_user: 9103, name: "Eduardo", last_name: "Pérez" },
-  fernanda: { id_user: 9104, name: "Fernanda", last_name: "Soto" },
-  gabriel: { id_user: 9105, name: "Gabriel", last_name: "Torres" },
-  helena: { id_user: 9106, name: "Helena", last_name: "Vargas" },
-};
-
-/** Producto con la forma que espera la cabecera de la edición (ProductHeader). */
-export const DEMO_PRODUCT = {
-  id_article: 11096001,
-  id_order: 11096,
-  name: "Taladro inalámbrico 20 V con 2 baterías",
-  upc: "7501234567890",
-  sku: "TAL-20V-2B",
-  categoryName: "Herramientas|Eléctricas|Taladros",
-  status: "CA",
-  timestamp: "2026-10-08T15:00:00Z",
-  article: { company_name: "Herramientas del Norte" },
-  categoryRetailer: [
-    {
-      id_retailer: 58,
-      name: "The Home Depot",
-      retailer: "The Home Depot",
-      category: "Herramientas|Eléctricas|Taladros",
-    },
-  ],
-};
-
-const DATES = ["13/10/2026", "12/10/2026", "10/10/2026", "09/10/2026", "07/10/2026"];
-
-/**
- * Servicios del producto para las historias. Cada fila es
- * [service_name, estatus, { especialist, facilitator, auditor }].
- * El coordinador (facilitator) y el auditor tienen valores por omisión.
- */
-export const buildServices = (rows) =>
-  rows.map(([serviceName, status, team = {}], index) => {
-    const definition = SERVICE_CATALOG.find((item) => item.service_name === serviceName);
-    return {
-      ...definition,
-      status,
-      updated_at: DATES[index % DATES.length],
-      assignees: {
-        especialist: team.especialist ?? null,
-        facilitator: team.facilitator === undefined ? DEMO_USERS.helena : team.facilitator,
-        auditor: team.auditor === undefined ? DEMO_USERS.fernanda : team.auditor,
-      },
-    };
-  });
-
-const { ana, carlos, diana, eduardo, fernanda, gabriel } = DEMO_USERS;
-
-/** Veinte servicios del catálogo con estatus y equipos variados. */
-export const TWENTY_SERVICES = buildServices([
-  ["datasheet", "AA", { especialist: ana }],
-  ["description", "RA/AS", { especialist: ana }],
-  ["datasheetHeader", "AC", { especialist: ana }],
-  ["seo", "CA", { especialist: eduardo }],
-  ["translation", "CA", { especialist: diana }],
-  ["images", "AS", { especialist: carlos }],
-  ["photo", "Ex", { especialist: gabriel }],
-  ["edition", "RA/AS", { especialist: carlos }],
-  ["resize", "CA", { especialist: carlos }],
-  ["adaptations", "PA"],
-  ["premiumImage", "AP", { especialist: gabriel }],
-  ["videos", "IE", { especialist: gabriel }],
-  ["image360", "PA"],
-  ["brandstore", "AC", { especialist: eduardo }],
-  ["aplusPlatinum", "RC", { especialist: eduardo }],
-  ["golden", "AS", { especialist: eduardo }],
-  ["quality", "AA", { especialist: fernanda, auditor: diana }],
-  ["audit", "R", { especialist: fernanda, auditor: diana }],
-  ["secodatReview", "Ex", { especialist: fernanda, auditor: diana }],
-  ["uploadOnly", "PA"],
-]);
-
-/** Estatus variados para mostrar todos los servicios del catálogo a la vez. */
-const SAMPLE_STATUSES = ["PA", "AS", "CA", "IE", "AC", "AA", "AP", "Ex", "RA/AS", "RC"];
-
-/**
- * Todos los servicios activos del catálogo con un estatus de ejemplo cada uno
- * (los tres de siempre se pueden excluir: en la edición real salen del
- * producto).
- */
-export const allCatalogServices = ({ exclude = [] } = {}) =>
-  SERVICE_CATALOG.filter((item) => !exclude.includes(item.service_name)).map((item, index) => ({
-    service_name: item.service_name,
-    status: SAMPLE_STATUSES[(index * 3) % SAMPLE_STATUSES.length],
-  }));

package/src/components/organisms/ServicesNavigation/index.jsx

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

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

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