contentoh-components-library 21.6.61 → 21.6.62

package/src/components/organisms/ServicesWorkspace/AssigneePicker.js

@@ -1,348 +0,0 @@
-import { useMemo, useRef, useState } from "react";
-import {
-  Avatar,
-  Box,
-  ButtonBase,
-  CircularProgress,
-  InputAdornment,
-  List,
-  ListItemButton,
-  Popover,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@mui/material";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import PersonAddAlt1OutlinedIcon from "@mui/icons-material/PersonAddAlt1Outlined";
-import SearchIcon from "@mui/icons-material/Search";
-import CheckIcon from "@mui/icons-material/Check";
-import { getProfilePicture } from "../../../global-files/data";
-import { whiteTooltipProps } from "./tooltipStyles";
-
-/** Roles que ven la asignación pero no pueden cambiarla (igual que AsignationControl). */
-export const READ_ONLY_ROLES = [2, 3, 7, 8];
-
-export const canCurrentUserAssign = () => {
-  try {
-    const user = JSON.parse(sessionStorage.getItem("user"));
-    return !READ_ONLY_ROLES.includes(user?.id_role);
-  } catch (error) {
-    return true;
-  }
-};
-
-/**
- * ¿El clic fue dentro de una capa flotante de MUI (selector, tooltip, diálogo)?
- * Esas capas se pintan fuera del panel lateral, así que los "clic afuera para
- * cerrar" deben ignorarlas.
- */
-export const isFloatingLayerClick = (target) =>
-  Boolean(target?.closest?.(".MuiPopover-root, .MuiModal-root, .MuiTooltip-popper"));
-
-export const fullName = (user) => [user?.name, user?.last_name].filter(Boolean).join(" ");
-
-const initials = (user) =>
-  [user?.name, user?.last_name]
-    .filter(Boolean)
-    .map((part) => part.trim()[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2);
-
-/** Foto del usuario; si no carga, sus iniciales (MUI muestra `children` cuando falla la imagen). */
-function UserAvatar({ user, size = 28 }) {
-  return (
-    <Avatar
-      src={user?.id_user ? getProfilePicture(user.id_user, 40, 40) : undefined}
-      alt={fullName(user)}
-      sx={{
-        width: size,
-        height: size,
-        fontSize: size * 0.4,
-        fontFamily: "Lato, sans-serif",
-        fontWeight: 700,
-        bgcolor: "#F0EEF2",
-        color: "#503D66",
-      }}
-    >
-      {initials(user)}
-    </Avatar>
-  );
-}
-
-const pillSx = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 0.75,
-  height: 34,
-  pl: 1.25,
-  pr: 0.5,
-  borderRadius: "17px",
-  backgroundColor: "#F0F0F0",
-  border: "1px solid transparent",
-  fontFamily: "Lato, sans-serif",
-  transition: "background-color 120ms, border-color 120ms",
-};
-
-const statusSx = {
-  fontFamily: "Lato, sans-serif",
-  fontSize: 12,
-  fontWeight: 600,
-  color: "#707070",
-  whiteSpace: "nowrap",
-};
-
-/**
- * Pastilla "estatus + responsable" y selector de personas.
- *
- * Copia de la de Creators (ServicesCell/AssigneePicker) para que la edición se
- * vea y se comporte igual que la tabla. Colores fijos porque la librería no
- * define las variables CSS de las aplicaciones.
- *
- * - Clic en la pastilla: abre un buscador con la lista de personas asignables.
- * - `lockedReason`: si viene, la pastilla muestra un candado, no abre nada
- *   y explica el motivo en el tooltip.
- * - `onAssign(user)`: se llama al elegir a alguien (el padre llama assignUser).
- */
-export default function AssigneePicker({
-  statusLabel,
-  statusTitle,
-  users = [],
-  currentId = null,
-  onAssign,
-  lockedReason = null,
-  roleLabel = "Responsable",
-  loading = false,
-}) {
-  const pillRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState("");
-  // Asignación optimista: se ve de inmediato aunque la tabla tarde en refrescarse.
-  const [pickedId, setPickedId] = useState(null);
-
-  const selectedId = pickedId ?? currentId;
-  const current = useMemo(
-    () => users.find((user) => user.id_user === selectedId) || null,
-    [users, selectedId]
-  );
-
-  // `statusLabel` puede ser texto fijo o una función del asignado actual (para
-  // mostrar el nombre de la persona apenas se elige, sin esperar al padre).
-  const label = typeof statusLabel === "function" ? statusLabel(current) : statusLabel;
-
-  const filtered = useMemo(() => {
-    const text = query.trim().toLowerCase();
-    if (!text) return users;
-    return users.filter((user) => fullName(user).toLowerCase().includes(text));
-  }, [users, query]);
-
-  // Al elegir con Enter, el foco vuelve a la pastilla y el mismo Enter la
-  // volvía a abrir. Se ignoran los clics que llegan justo después de cerrar.
-  const closedAtRef = useRef(0);
-  const close = () => {
-    closedAtRef.current = Date.now();
-    setOpen(false);
-    setQuery("");
-  };
-
-  const pick = (user) => {
-    if (user.id_user !== selectedId) {
-      setPickedId(user.id_user);
-      onAssign?.(user);
-    }
-    close();
-  };
-
-  // Mientras llegan las asignaciones (se piden al desplegar la etapa).
-  if (loading) {
-    return (
-      <Box
-        component="span"
-        role="status"
-        aria-busy="true"
-        aria-label={`Cargando ${roleLabel.toLowerCase()}`}
-        sx={{ ...pillSx, cursor: "progress", pr: 0.75 }}
-      >
-        <Typography component="span" title={statusTitle} sx={statusSx}>
-          {label}
-        </Typography>
-        <Box
-          component="span"
-          sx={{ width: 26, height: 26, display: "inline-flex", alignItems: "center", justifyContent: "center" }}
-        >
-          <CircularProgress size={16} thickness={5} sx={{ color: "#8A6CAA" }} />
-        </Box>
-      </Box>
-    );
-  }
-
-  if (lockedReason) {
-    return (
-      <Tooltip {...whiteTooltipProps} title={lockedReason} arrow placement="left">
-        <Box
-          component="span"
-          role="img"
-          aria-label={`No se puede asignar: ${lockedReason}`}
-          sx={{ ...pillSx, cursor: "not-allowed", pr: 1, opacity: 0.85 }}
-        >
-          <Typography component="span" title={statusTitle} sx={statusSx}>
-            {label}
-          </Typography>
-          <LockOutlinedIcon sx={{ fontSize: 18, color: "#707070" }} />
-        </Box>
-      </Tooltip>
-    );
-  }
-
-  const tooltip = current ? `${roleLabel}: ${fullName(current)}` : `${roleLabel}: por asignar`;
-
-  return (
-    <>
-      <Tooltip {...whiteTooltipProps} title={open ? "" : tooltip} arrow placement="left">
-        <ButtonBase
-          ref={pillRef}
-          onClick={(event) => {
-            event.stopPropagation();
-            if (Date.now() - closedAtRef.current < 400) return;
-            setOpen(true);
-          }}
-          aria-haspopup="dialog"
-          aria-expanded={open}
-          aria-label={`${tooltip}. Cambiar`}
-          sx={{
-            ...pillSx,
-            cursor: "pointer",
-            ...(open && { borderColor: "#E33AA9", backgroundColor: "#F0EEF2" }),
-            "&:hover": { backgroundColor: "#F0EEF2" },
-            "&.Mui-focusVisible": { borderColor: "#E33AA9" },
-          }}
-        >
-          <Typography component="span" title={statusTitle} sx={statusSx}>
-            {label}
-          </Typography>
-          {current ? (
-            <UserAvatar user={current} size={26} />
-          ) : (
-            <Box
-              component="span"
-              sx={{
-                width: 26,
-                height: 26,
-                borderRadius: "50%",
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                border: "1px dashed #8A6CAA",
-                color: "#8A6CAA",
-                backgroundColor: "#FFFFFF",
-              }}
-            >
-              <PersonAddAlt1OutlinedIcon sx={{ fontSize: 15 }} />
-            </Box>
-          )}
-        </ButtonBase>
-      </Tooltip>
-
-      <Popover
-        open={open}
-        anchorEl={pillRef.current}
-        onClose={close}
-        onClick={(event) => event.stopPropagation()}
-        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-        transformOrigin={{ vertical: "top", horizontal: "right" }}
-        PaperProps={{
-          sx: {
-            mt: 0.75,
-            width: 300,
-            maxWidth: "calc(100vw - 32px)",
-            borderRadius: "12px",
-            border: "1px solid #F0EEF2",
-            boxShadow: 6,
-            overflow: "hidden",
-          },
-        }}
-      >
-        <Box sx={{ p: 1.5, pb: 1, display: "flex", flexDirection: "column", gap: 1 }}>
-          <Typography
-            sx={{ fontFamily: "Raleway, sans-serif", fontSize: 13, fontWeight: 600, color: "#503D66" }}
-          >
-            Asignar {roleLabel.toLowerCase()}
-          </Typography>
-          <TextField
-            autoFocus
-            size="small"
-            fullWidth
-            placeholder="Buscar persona…"
-            value={query}
-            onChange={(event) => setQuery(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" && filtered[0]) {
-                event.preventDefault();
-                pick(filtered[0]);
-              }
-            }}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon sx={{ fontSize: 18, color: "#707070" }} />
-                </InputAdornment>
-              ),
-              sx: {
-                borderRadius: "8px",
-                fontFamily: "Lato, sans-serif",
-                fontSize: 13,
-                "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "#E33AA9" },
-              },
-            }}
-          />
-        </Box>
-
-        <List dense disablePadding sx={{ maxHeight: 280, overflowY: "auto", px: 0.75, pb: 0.75 }}>
-          {filtered.map((user) => {
-            const isSelected = user.id_user === selectedId;
-            return (
-              <ListItemButton
-                key={user.id_user}
-                selected={isSelected}
-                onClick={() => pick(user)}
-                sx={{
-                  gap: 1.25,
-                  borderRadius: "8px",
-                  py: 0.75,
-                  "&:hover": { backgroundColor: "#F0EEF2" },
-                  "&.Mui-selected, &.Mui-selected:hover": { backgroundColor: "#F0EEF2" },
-                }}
-              >
-                <UserAvatar user={user} size={30} />
-                <Typography
-                  sx={{
-                    flex: 1,
-                    minWidth: 0,
-                    fontFamily: "Lato, sans-serif",
-                    fontSize: 14,
-                    fontWeight: isSelected ? 700 : 400,
-                    color: isSelected ? "#503D66" : "#262626",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {fullName(user)}
-                </Typography>
-                {isSelected && <CheckIcon sx={{ fontSize: 18, color: "#E33AA9" }} />}
-              </ListItemButton>
-            );
-          })}
-
-          {filtered.length === 0 && (
-            <Typography
-              sx={{ py: 2, textAlign: "center", fontFamily: "Lato, sans-serif", fontSize: 13, color: "#707070" }}
-            >
-              {users.length === 0 ? "No hay personas asignables" : "Sin coincidencias"}
-            </Typography>
-          )}
-        </List>
-      </Popover>
-    </>
-  );
-}

package/src/components/organisms/ServicesWorkspace/ServicesWorkspace.stories.js

@@ -1,61 +0,0 @@
-import ServicesWorkspace from "./index";
-import { withDemoServices, DEMO_USERS } from "./demo";
-
-export default {
-  title: "Components/organisms/ServicesWorkspace",
-  component: ServicesWorkspace,
-  argTypes: { onAssign: { action: "onAssign" }, onOpenEditor: { action: "onOpenEditor" } },
-};
-
-const retailers = [
-  { id_retailer: 4, retailer: "Walmart" },
-  { id_retailer: 9, retailer: "Soriana" },
-  { id_retailer: 12, retailer: "Alsuper" },
-];
-
-// Producto con la forma que deja `normalizeProduct` en la edición.
-const baseProduct = {
-  id_article: 11080102,
-  id_order: 10478,
-  name: "Prueba variantes 2 - hijo de 1",
-  datasheet_status: "AS",
-  description_status: "RA/AS",
-  images_status: "PA",
-  id_datasheet_especialist: 9101,
-  id_datasheet_facilitator: 9103,
-  id_description_especialist: 9102,
-  id_images_especialist: 0,
-  id_auditor: 9104,
-  statusByRetailer: [
-    { service: "datasheet", retailer_id: 4, status: "AS" },
-    { service: "datasheet", retailer_id: 9, status: "CA" },
-    { service: "description", retailer_id: 4, status: "RA/AS" },
-    { service: "description", retailer_id: 12, status: "AC" },
-    { service: "images", retailer_id: 4, status: "PA" },
-  ],
-};
-
-const users = { especialist: DEMO_USERS, facilitator: DEMO_USERS, auditor: DEMO_USERS };
-
-const Template = (args) => (
-  <div style={{ maxWidth: 1100, padding: 24, background: "#FAFAFA" }}>
-    <ServicesWorkspace {...args} />
-  </div>
-);
-
-/** Producto de hoy: solo Ficha técnica, Descripción e Imágenes. */
-export const TresServicios = Template.bind({});
-TresServicios.args = { product: baseProduct, retailers, users, canAssign: true };
-
-/** Con 17 servicios (3 de siempre + 14 de ejemplo). */
-export const DiecisieteServicios = Template.bind({});
-DiecisieteServicios.args = {
-  product: withDemoServices(baseProduct, 14),
-  retailers,
-  users,
-  canAssign: true,
-};
-
-/** Rol que solo consulta (sin asignar). */
-export const SoloConsulta = Template.bind({});
-SoloConsulta.args = { ...DiecisieteServicios.args, canAssign: false };

package/src/components/organisms/ServicesWorkspace/demo.js

@@ -1,58 +0,0 @@
-/*
-  Servicios de ejemplo para revisar el diseño mientras la base solo tiene los
-  tres servicios de siempre. Mismo catálogo que la demo de la tabla de Creators
-  (ServicesCell/demoServices.js), con el tipo de entregable de cada uno.
-
-  Llegan en `product.demo_services` (los pone Creators con ?demoServicios=1) o
-  se generan aquí con `withDemoServices` (historias de Storybook).
-*/
-export const DEMO_CATALOG = [
-  { service_name: "quality", display_name: "Calidad", deliverable_type: "Reporte" },
-  { service_name: "datasheetHeader", display_name: "Header Ficha", deliverable_type: "Texto" },
-  { service_name: "brandstore", display_name: "Brandstore", deliverable_type: "Diseño" },
-  { service_name: "premiumImage", display_name: "Imagen Premium", deliverable_type: "Imágenes" },
-  { service_name: "resize", display_name: "Resize", deliverable_type: "Imágenes" },
-  { service_name: "uploadOnly", display_name: "Solo Carga", deliverable_type: "Carga en cadena" },
-  { service_name: "audit", display_name: "Auditoría", deliverable_type: "Reporte" },
-  { service_name: "photo", display_name: "Foto", deliverable_type: "Imágenes" },
-  { service_name: "edition", display_name: "Edición", deliverable_type: "Imágenes" },
-  { service_name: "aplusPlatinum", display_name: "A+ / Platinum SKU", deliverable_type: "Diseño" },
-  { service_name: "benefitInfographics", display_name: "Infografías Beneficios", deliverable_type: "Diseño" },
-  { service_name: "image360", display_name: "360°", deliverable_type: "Archivos 360" },
-  { service_name: "secodatReview", display_name: "Revisión secodat", deliverable_type: "Reporte" },
-  { service_name: "videos", display_name: "Videos", deliverable_type: "Video" },
-  { service_name: "translation", display_name: "Traducción", deliverable_type: "Texto" },
-  { service_name: "followUp", display_name: "Seguimiento", deliverable_type: "Reporte" },
-];
-
-const DEMO_STATUSES = ["PA", "AS", "CA", "AC", "RA/AS", "AA", "AP", "Ex"];
-
-export const isServicesDemoEnabled = () => {
-  try {
-    return new URLSearchParams(window.location.search).has("demoServicios");
-  } catch (error) {
-    return false;
-  }
-};
-
-/** Copia del producto con `count` servicios de ejemplo (estables por producto). */
-export const withDemoServices = (product, count = 14) => {
-  const seed = String(product?.id_article ?? product?.article?.id_article ?? 7)
-    .split("")
-    .reduce((acc, char) => (acc * 31 + char.charCodeAt(0)) % 9973, 7);
-  const demo = Array.from({ length: Math.min(count, DEMO_CATALOG.length) }, (_, index) => {
-    const service = DEMO_CATALOG[(seed + index) % DEMO_CATALOG.length];
-    return { ...service, status: DEMO_STATUSES[(seed + index * 3) % DEMO_STATUSES.length], has_workflow: true };
-  });
-  return { ...product, demo_services: demo };
-};
-
-/** Usuarios de ejemplo para los selectores. */
-export const DEMO_USERS = [
-  ["Ana", "López"],
-  ["Carlos", "Méndez"],
-  ["Diana", "Ruiz"],
-  ["Eduardo", "Pérez"],
-  ["Fernanda", "Soto"],
-  ["Gabriel", "Torres"],
-].map(([name, lastName], index) => ({ id_user: 9100 + index, name, last_name: lastName }));