contentoh-components-library 21.6.60 → 21.6.61

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

@@ -0,0 +1,229 @@
+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,
+};