contentoh-components-library 21.6.61 → 21.6.63

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

@@ -1,229 +0,0 @@
-import { Avatar, Box, Tooltip } from "@mui/material";
-import ListAltOutlinedIcon from "@mui/icons-material/ListAltOutlined";
-import LocalShippingOutlinedIcon from "@mui/icons-material/LocalShippingOutlined";
-import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
-import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
-import TitleOutlinedIcon from "@mui/icons-material/TitleOutlined";
-import TravelExploreOutlinedIcon from "@mui/icons-material/TravelExploreOutlined";
-import TranslateOutlinedIcon from "@mui/icons-material/TranslateOutlined";
-import ImageOutlinedIcon from "@mui/icons-material/ImageOutlined";
-import PhotoCameraOutlinedIcon from "@mui/icons-material/PhotoCameraOutlined";
-import AutoFixHighOutlinedIcon from "@mui/icons-material/AutoFixHighOutlined";
-import AspectRatioOutlinedIcon from "@mui/icons-material/AspectRatioOutlined";
-import DashboardCustomizeOutlinedIcon from "@mui/icons-material/DashboardCustomizeOutlined";
-import WorkspacePremiumOutlinedIcon from "@mui/icons-material/WorkspacePremiumOutlined";
-import MovieOutlinedIcon from "@mui/icons-material/MovieOutlined";
-import ViewInArOutlinedIcon from "@mui/icons-material/ViewInArOutlined";
-import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined";
-import WebOutlinedIcon from "@mui/icons-material/WebOutlined";
-import InsertChartOutlinedIcon from "@mui/icons-material/InsertChartOutlined";
-import VerifiedOutlinedIcon from "@mui/icons-material/VerifiedOutlined";
-import FactCheckOutlinedIcon from "@mui/icons-material/FactCheckOutlined";
-import PlaylistAddCheckOutlinedIcon from "@mui/icons-material/PlaylistAddCheckOutlined";
-import PublishOutlinedIcon from "@mui/icons-material/PublishOutlined";
-import SpaceDashboardOutlinedIcon from "@mui/icons-material/SpaceDashboardOutlined";
-import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
-import EventRepeatOutlinedIcon from "@mui/icons-material/EventRepeatOutlined";
-import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
-import GTranslateOutlinedIcon from "@mui/icons-material/GTranslateOutlined";
-import AutoAwesomeOutlinedIcon from "@mui/icons-material/AutoAwesomeOutlined";
-import ChairOutlinedIcon from "@mui/icons-material/ChairOutlined";
-import RuleOutlinedIcon from "@mui/icons-material/RuleOutlined";
-import ThumbsUpDownOutlinedIcon from "@mui/icons-material/ThumbsUpDownOutlined";
-import FormatListBulletedOutlinedIcon from "@mui/icons-material/FormatListBulletedOutlined";
-import EmojiEventsOutlinedIcon from "@mui/icons-material/EmojiEventsOutlined";
-import ViewCarouselOutlinedIcon from "@mui/icons-material/ViewCarouselOutlined";
-import ThreeDRotationOutlinedIcon from "@mui/icons-material/ThreeDRotationOutlined";
-import ThreeSixtyOutlinedIcon from "@mui/icons-material/ThreeSixtyOutlined";
-import MenuBookOutlinedIcon from "@mui/icons-material/MenuBookOutlined";
-import CloudUploadOutlinedIcon from "@mui/icons-material/CloudUploadOutlined";
-import CameraEnhanceOutlinedIcon from "@mui/icons-material/CameraEnhanceOutlined";
-import PortraitOutlinedIcon from "@mui/icons-material/PortraitOutlined";
-import WeekendOutlinedIcon from "@mui/icons-material/WeekendOutlined";
-import HighQualityOutlinedIcon from "@mui/icons-material/HighQualityOutlined";
-import ImageSearchOutlinedIcon from "@mui/icons-material/ImageSearchOutlined";
-import HandymanOutlinedIcon from "@mui/icons-material/HandymanOutlined";
-
-/*
-  Colores, tipografía y la etiqueta de estatus son los de la edición de
-  Creators (CreatorsProductEdition), para que el prototipo se vea como ella.
-  Si la propuesta se aprueba, estas piezas deberían salir de la página a un
-  lugar compartido.
-*/
-import { COLORS, FONTS, statusColor as statusColorOf } from "../../pages/CreatorsProductEdition/sections/tokens";
-
-export { COLORS, FONTS };
-export { StatusChip } from "../../pages/CreatorsProductEdition/sections/StatusChip";
-
-/**
- * Props de StatusChip para un servicio de la lista. Los de flujo simple del
- * catálogo (casilla, avance) muestran su nombre y su color en lugar del código.
- */
-export const serviceStatusColor = (service) =>
-  (service?.status_flow_type === "simple" && service.status_color) || statusColorOf(service?.status);
-
-export const serviceStatusProps = (service) =>
-  service?.status_flow_type === "simple"
-    ? { status: service.status, label: service.status_label ?? service.status, color: service.status_color ?? undefined }
-    : { status: service?.status };
-export { statusColor, statusName } from "../../pages/CreatorsProductEdition/sections/tokens";
-
-export const FONT_STACK = `${FONTS.Lato}, "Avenir Next", sans-serif`;
-export const TITLE_STACK = `${FONTS.Raleway}, ${FONTS.Lato}, sans-serif`;
-
-const ICONS = {
-  summary: SpaceDashboardOutlinedIcon,
-  // Logística: mismas llaves que cat_service.icon_name.
-  pickup: LocalShippingOutlinedIcon,
-  purchase: ShoppingCartOutlinedIcon,
-  assembly: HandymanOutlinedIcon,
-  datasheet: ListAltOutlinedIcon,
-  description: ArticleOutlinedIcon,
-  header: TitleOutlinedIcon,
-  seo: TravelExploreOutlinedIcon,
-  translation: TranslateOutlinedIcon,
-  images: ImageOutlinedIcon,
-  photo: PhotoCameraOutlinedIcon,
-  edition: AutoFixHighOutlinedIcon,
-  resize: AspectRatioOutlinedIcon,
-  adaptations: DashboardCustomizeOutlinedIcon,
-  premium: WorkspacePremiumOutlinedIcon,
-  video: MovieOutlinedIcon,
-  image360: ThreeSixtyOutlinedIcon,
-  brandstore: StorefrontOutlinedIcon,
-  aplus: WebOutlinedIcon,
-  infographics: InsertChartOutlinedIcon,
-  quality: VerifiedOutlinedIcon,
-  audit: FactCheckOutlinedIcon,
-  secodat: PlaylistAddCheckOutlinedIcon,
-  upload: PublishOutlinedIcon,
-  followUp: EventRepeatOutlinedIcon,
-  maintenance: BuildOutlinedIcon,
-  graphicTranslation: GTranslateOutlinedIcon,
-  visualUpdate: AutoAwesomeOutlinedIcon,
-  ambient: ChairOutlinedIcon,
-  inputReview: RuleOutlinedIcon,
-  clientReview: ThumbsUpDownOutlinedIcon,
-  bullets: FormatListBulletedOutlinedIcon,
-  specialPhoto: CameraEnhanceOutlinedIcon,
-  modelPhoto: PortraitOutlinedIcon,
-  premiumAmbient: WeekendOutlinedIcon,
-  golden: EmojiEventsOutlinedIcon,
-  banner: ViewCarouselOutlinedIcon,
-  render: ThreeDRotationOutlinedIcon,
-  arModel: ViewInArOutlinedIcon,
-  manual: MenuBookOutlinedIcon,
-  visualQuality: HighQualityOutlinedIcon,
-  visualAudit: ImageSearchOutlinedIcon,
-  gdsn: CloudUploadOutlinedIcon,
-  visualMaintenance: HandymanOutlinedIcon,
-};
-
-export const ServiceIcon = ({ icon, sx }) => {
-  const Icon = ICONS[icon] ?? InsertDriveFileOutlinedIcon;
-  return <Icon sx={{ fontSize: 18, ...sx }} />;
-};
-
-/** Punto rosa: «te toca a ti». */
-export const PendingDot = ({ size = 8, withTooltip = true }) => {
-  const dot = (
-    <Box
-      component="span"
-      aria-label="Te toca a ti"
-      sx={{
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        bgcolor: COLORS.magenta_s2,
-        flexShrink: 0,
-        display: "inline-block",
-      }}
-    />
-  );
-  return withTooltip ? (
-    <Tooltip title="Te toca a ti" arrow placement="top">
-      {dot}
-    </Tooltip>
-  ) : (
-    dot
-  );
-};
-
-/** Iniciales de una persona; la persona que está viendo lleva borde rosa. */
-export const PersonAvatar = ({ user, isMe = false, size = 26, title }) => (
-  <Tooltip title={title ?? ""} arrow placement="top" disableHoverListener={!title}>
-    <Avatar
-      sx={{
-        width: size,
-        height: size,
-        fontSize: size * 0.42,
-        fontFamily: FONT_STACK,
-        fontWeight: 700,
-        bgcolor: user ? COLORS.s2 : COLORS.white,
-        color: user ? COLORS.s5 : COLORS.s3,
-        border: `2px solid ${isMe ? COLORS.magenta_s2 : COLORS.white}`,
-        outline: user ? "none" : `1px dashed ${COLORS.s3}`,
-        outlineOffset: -3,
-      }}
-    >
-      {user ? `${user.name?.[0] ?? ""}${user.last_name?.[0] ?? ""}`.toUpperCase() : "?"}
-    </Avatar>
-  </Tooltip>
-);
-
-/** Botones redondeados de la plataforma (rosa lleno y contorno). */
-export const pillButtonSx = {
-  textTransform: "none",
-  borderRadius: "20px",
-  fontFamily: FONT_STACK,
-  fontSize: 13,
-  fontWeight: 700,
-  height: 32,
-  px: 2,
-  boxShadow: "none",
-  whiteSpace: "nowrap",
-};
-
-export const primaryButtonSx = {
-  ...pillButtonSx,
-  bgcolor: COLORS.magenta_s2,
-  color: COLORS.white,
-  "&:hover": { bgcolor: COLORS.secondary_magenta, boxShadow: "none" },
-};
-
-export const outlineButtonSx = {
-  ...pillButtonSx,
-  color: COLORS.s5,
-  border: `1px solid ${COLORS.s3}`,
-  bgcolor: COLORS.white,
-  "&:hover": { bgcolor: COLORS.s2, borderColor: COLORS.s3 },
-  "&.Mui-disabled": { color: COLORS.s3, borderColor: COLORS.s2 },
-};
-
-/** Campo de texto con el foco rosa de la plataforma. */
-export const fieldSx = {
-  "& .MuiOutlinedInput-root": {
-    borderRadius: "6px",
-    fontFamily: FONT_STACK,
-    fontSize: 14,
-    color: COLORS.color_gray,
-    bgcolor: COLORS.white,
-    "& fieldset": { borderColor: COLORS.s3 },
-    "&:hover fieldset": { borderColor: COLORS.s4 },
-    "&.Mui-focused fieldset": { borderColor: COLORS.magenta_s2 },
-  },
-};
-
-export const labelSx = {
-  fontFamily: FONT_STACK,
-  fontSize: 13,
-  fontWeight: 700,
-  color: COLORS.s5,
-  mb: 0.5,
-};
-
-export const captionSx = {
-  fontFamily: FONT_STACK,
-  fontSize: 12,
-  color: COLORS.s4,
-};