478 lines
18 KiB
TypeScript
478 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import {
|
|
BarChart3,
|
|
ChevronDown,
|
|
CreditCard,
|
|
Handshake,
|
|
LogOut,
|
|
Megaphone,
|
|
Paintbrush,
|
|
Settings,
|
|
Shield
|
|
} from 'lucide-react';
|
|
import { useAuth } from '@/lib/auth/AuthContext';
|
|
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
|
import { DriverViewModel as DriverViewModelClass } from '@/lib/view-models/DriverViewModel';
|
|
import { useFindDriverById } from '@/hooks/driver/useFindDriverById';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Image } from '@/ui/Image';
|
|
|
|
// Hook to detect demo user mode based on session
|
|
function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
|
|
const { session } = useAuth();
|
|
const [demoMode, setDemoMode] = useState({ isDemo: false, demoRole: null as string | null });
|
|
|
|
// Check if this is a demo user
|
|
useEffect(() => {
|
|
if (!session?.user) {
|
|
setDemoMode({ isDemo: false, demoRole: null });
|
|
return;
|
|
}
|
|
|
|
const email = session.user.email?.toLowerCase() || '';
|
|
const displayName = session.user.displayName?.toLowerCase() || '';
|
|
const primaryDriverId = session.user.primaryDriverId || '';
|
|
const role = 'role' in session.user ? (session.user as { role?: string }).role : undefined;
|
|
|
|
// Check if this is a demo user
|
|
if (email.includes('demo') ||
|
|
displayName.includes('demo') ||
|
|
primaryDriverId.startsWith('demo-')) {
|
|
|
|
// Use role from session if available, otherwise derive from email
|
|
let roleToUse = role;
|
|
if (!roleToUse) {
|
|
if (email.includes('sponsor')) roleToUse = 'sponsor';
|
|
else if (email.includes('league-owner') || displayName.includes('owner')) roleToUse = 'league-owner';
|
|
else if (email.includes('league-steward') || displayName.includes('steward')) roleToUse = 'league-steward';
|
|
else if (email.includes('league-admin') || displayName.includes('admin')) roleToUse = 'league-admin';
|
|
else if (email.includes('system-owner') || displayName.includes('system owner')) roleToUse = 'system-owner';
|
|
else if (email.includes('super-admin') || displayName.includes('super admin')) roleToUse = 'super-admin';
|
|
else roleToUse = 'driver';
|
|
}
|
|
|
|
setDemoMode({ isDemo: true, demoRole: roleToUse });
|
|
} else {
|
|
setDemoMode({ isDemo: false, demoRole: null });
|
|
}
|
|
}, [session]);
|
|
|
|
return demoMode;
|
|
}
|
|
|
|
// Helper to check if user has admin access (Owner or Super Admin)
|
|
function useHasAdminAccess(): boolean {
|
|
const { session } = useAuth();
|
|
const { isDemo, demoRole } = useDemoUserMode();
|
|
|
|
// Demo users with system-owner or super-admin roles
|
|
if (isDemo && (demoRole === 'system-owner' || demoRole === 'super-admin')) {
|
|
return true;
|
|
}
|
|
|
|
// Real users - would need role information from session
|
|
// For now, we'll check if the user has any admin-related capabilities
|
|
// This can be enhanced when the API includes role information
|
|
if (!session?.user) return false;
|
|
|
|
// Check for admin-related email patterns as a temporary measure
|
|
const email = session.user.email?.toLowerCase() || '';
|
|
const displayName = session.user.displayName?.toLowerCase() || '';
|
|
|
|
return email.includes('system-owner') ||
|
|
email.includes('super-admin') ||
|
|
displayName.includes('system owner') ||
|
|
displayName.includes('super admin');
|
|
}
|
|
|
|
export function UserPill() {
|
|
const { session } = useAuth();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const { isDemo, demoRole } = useDemoUserMode();
|
|
|
|
const primaryDriverId = useEffectiveDriverId();
|
|
|
|
// Use React-Query hook for driver data (only for non-demo users)
|
|
const { data: driverDto } = useFindDriverById(primaryDriverId || '', {
|
|
enabled: !!primaryDriverId && !isDemo,
|
|
});
|
|
|
|
// Transform DTO to ViewModel
|
|
const driver = useMemo(() => {
|
|
if (!driverDto) return null;
|
|
return new DriverViewModelClass({ ...driverDto, avatarUrl: driverDto.avatarUrl ?? null });
|
|
}, [driverDto]);
|
|
|
|
// Close menu when clicking outside
|
|
useEffect(() => {
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (isMenuOpen) {
|
|
const target = e.target as HTMLElement;
|
|
if (!target.closest('[data-user-pill]')) {
|
|
setIsMenuOpen(false);
|
|
}
|
|
}
|
|
};
|
|
document.addEventListener('click', handleClickOutside);
|
|
return () => document.removeEventListener('click', handleClickOutside);
|
|
}, [isMenuOpen]);
|
|
|
|
// Logout handler for demo users
|
|
const handleLogout = async () => {
|
|
try {
|
|
// Call the logout API
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
// Redirect to home
|
|
window.location.href = '/';
|
|
} catch (error) {
|
|
console.error('Logout failed:', error);
|
|
window.location.href = '/';
|
|
}
|
|
};
|
|
|
|
// Call hooks unconditionally before any returns
|
|
const hasAdminAccess = useHasAdminAccess();
|
|
|
|
// Handle unauthenticated users
|
|
if (!session) {
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Link
|
|
href={routes.auth.login}
|
|
variant="secondary"
|
|
rounded="full"
|
|
px={4}
|
|
py={1.5}
|
|
size="xs"
|
|
hoverTextColor="text-white"
|
|
hoverBorderColor="border-gray-500"
|
|
>
|
|
Sign In
|
|
</Link>
|
|
<Link
|
|
href={routes.auth.signup}
|
|
variant="primary"
|
|
rounded="full"
|
|
px={4}
|
|
py={1.5}
|
|
size="xs"
|
|
shadow="0 0 12px rgba(25,140,255,0.5)"
|
|
hoverBg="rgba(25,140,255,0.9)"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// For all authenticated users (demo or regular), show the user pill
|
|
// Determine what to show in the pill
|
|
const displayName = driver?.name || session.user.displayName || session.user.email || 'User';
|
|
const avatarUrl = session.user.avatarUrl;
|
|
const roleLabel = isDemo ? ({
|
|
'driver': 'Driver',
|
|
'sponsor': 'Sponsor',
|
|
'league-owner': 'League Owner',
|
|
'league-steward': 'League Steward',
|
|
'league-admin': 'League Admin',
|
|
'system-owner': 'System Owner',
|
|
'super-admin': 'Super Admin',
|
|
} as Record<string, string>)[demoRole || 'driver'] : null;
|
|
|
|
const roleColor = isDemo ? ({
|
|
'driver': 'text-primary-blue',
|
|
'sponsor': 'text-performance-green',
|
|
'league-owner': 'text-purple-400',
|
|
'league-steward': 'text-warning-amber',
|
|
'league-admin': 'text-red-400',
|
|
'system-owner': 'text-indigo-400',
|
|
'super-admin': 'text-pink-400',
|
|
} as Record<string, string>)[demoRole || 'driver'] : null;
|
|
|
|
return (
|
|
<Box position="relative" display="inline-flex" alignItems="center" data-user-pill>
|
|
<Box
|
|
as="button"
|
|
type="button"
|
|
onClick={() => setIsMenuOpen((open) => !open)}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={3}
|
|
rounded="full"
|
|
border
|
|
px={3}
|
|
py={1.5}
|
|
transition
|
|
cursor="pointer"
|
|
bg="linear-gradient(to r, var(--iron-gray), var(--deep-graphite))"
|
|
borderColor={isMenuOpen ? 'border-primary-blue/50' : 'border-charcoal-outline'}
|
|
transform={isMenuOpen ? 'scale(1.02)' : 'scale(1)'}
|
|
>
|
|
{/* Avatar */}
|
|
<Box position="relative">
|
|
{avatarUrl ? (
|
|
<Box w="8" h="8" rounded="full" overflow="hidden" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" border borderColor="border-charcoal-outline/80">
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={displayName}
|
|
objectFit="cover"
|
|
fill
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<Box w="8" h="8" rounded="full" bg="bg-primary-blue/20" border borderColor="border-primary-blue/30" display="flex" alignItems="center" justifyContent="center">
|
|
<Text size="xs" weight="bold" color="text-primary-blue">
|
|
{displayName[0]?.toUpperCase() || 'U'}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
<Box position="absolute" bottom="-0.5" right="-0.5" w="3" h="3" rounded="full" bg="bg-primary-blue" border borderColor="border-deep-graphite" borderWidth="2px" />
|
|
</Box>
|
|
|
|
{/* Info */}
|
|
<Box display={{ base: 'none', sm: 'flex' }} flexDirection="col" alignItems="start">
|
|
<Text size="xs" weight="semibold" color="text-white" truncate maxWidth="100px" block>
|
|
{displayName}
|
|
</Text>
|
|
{roleLabel && (
|
|
<Text size="xs" color={roleColor || 'text-gray-400'} weight="medium" fontSize="10px">
|
|
{roleLabel}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Chevron */}
|
|
<Icon icon={ChevronDown} size={3.5} color="rgb(107, 114, 128)" groupHoverTextColor="text-gray-300" />
|
|
</Box>
|
|
|
|
<AnimatePresence>
|
|
{isMenuOpen && (
|
|
<Box
|
|
as={motion.div}
|
|
initial={{ opacity: 0, y: -10, scale: 0.95 }}
|
|
animate={{ opacity: 1, y: 0, scale: 1 }}
|
|
exit={{ opacity: 0, y: -10, scale: 0.95 }}
|
|
transition={{ duration: 0.15 }}
|
|
position="absolute"
|
|
right={0}
|
|
top="100%"
|
|
mt={2}
|
|
zIndex={50}
|
|
>
|
|
<Box w="56" rounded="xl" bg="bg-deep-graphite" border borderColor="border-charcoal-outline" shadow="xl" overflow="hidden">
|
|
{/* Header */}
|
|
<Box p={4} borderBottom borderColor="border-charcoal-outline" bg={`linear-gradient(to r, ${isDemo ? 'rgba(59, 130, 246, 0.1)' : 'rgba(38, 38, 38, 0.2)'}, transparent)`}>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
{avatarUrl ? (
|
|
<Box w="10" h="10" rounded="lg" overflow="hidden" bg="bg-charcoal-outline" display="flex" alignItems="center" justifyContent="center" border borderColor="border-charcoal-outline/80">
|
|
<Image
|
|
src={avatarUrl}
|
|
alt={displayName}
|
|
objectFit="cover"
|
|
fill
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<Box w="10" h="10" rounded="lg" bg="bg-primary-blue/20" border borderColor="border-primary-blue/30" display="flex" alignItems="center" justifyContent="center">
|
|
<Text size="xs" weight="bold" color="text-primary-blue">
|
|
{displayName[0]?.toUpperCase() || 'U'}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
<Box>
|
|
<Text size="sm" weight="semibold" color="text-white" block>{displayName}</Text>
|
|
{roleLabel && (
|
|
<Text size="xs" color={roleColor || 'text-gray-400'} block>{roleLabel}</Text>
|
|
)}
|
|
{isDemo && (
|
|
<Text size="xs" color="text-gray-500" block>Demo Account</Text>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
{isDemo && (
|
|
<Text size="xs" color="text-gray-500" block mt={2}>
|
|
Development account - not for production use
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Menu Items */}
|
|
<Box py={1}>
|
|
{/* Admin link for Owner/Super Admin users */}
|
|
{hasAdminAccess && (
|
|
<Link
|
|
href="/admin"
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={Shield} size={4} color="rgb(129, 140, 248)" mr={3} />
|
|
<Text size="sm" color="text-gray-200">Admin Area</Text>
|
|
</Link>
|
|
)}
|
|
|
|
{/* Sponsor portal link for demo sponsor users */}
|
|
{isDemo && demoRole === 'sponsor' && (
|
|
<>
|
|
<Link
|
|
href="/sponsor"
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={BarChart3} size={4} color="rgb(16, 185, 129)" mr={3} />
|
|
<Text size="sm" color="text-gray-200">Dashboard</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.sponsor.campaigns}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={Megaphone} size={4} color="rgb(59, 130, 246)" mr={3} />
|
|
<Text size="sm" color="text-gray-200">My Sponsorships</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.sponsor.billing}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={CreditCard} size={4} color="rgb(245, 158, 11)" mr={3} />
|
|
<Text size="sm" color="text-gray-200">Billing</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.sponsor.settings}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={Settings} size={4} color="rgb(156, 163, 175)" mr={3} />
|
|
<Text size="sm" color="text-gray-200">Settings</Text>
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{/* Regular user profile links */}
|
|
<Link
|
|
href={routes.protected.profile}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Text size="sm" color="text-gray-200">Profile</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.protected.profileLeagues}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Text size="sm" color="text-gray-200">Manage leagues</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.protected.profileLiveries}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={Paintbrush} size={4} mr={2} />
|
|
<Text size="sm" color="text-gray-200">Liveries</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.protected.profileSponsorshipRequests}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={Handshake} size={4} color="rgb(16, 185, 129)" mr={2} />
|
|
<Text size="sm" color="text-gray-200">Sponsorship Requests</Text>
|
|
</Link>
|
|
<Link
|
|
href={routes.protected.profileSettings}
|
|
block
|
|
px={4}
|
|
py={2.5}
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Icon icon={Settings} size={4} mr={2} />
|
|
<Text size="sm" color="text-gray-200">Settings</Text>
|
|
</Link>
|
|
|
|
{/* Demo-specific info */}
|
|
{isDemo && (
|
|
<Box px={4} py={2} borderTop borderColor="border-charcoal-outline/50" mt={1}>
|
|
<Text size="xs" color="text-gray-500" italic>Demo users have limited profile access</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
<Box borderTop borderColor="border-charcoal-outline">
|
|
{isDemo ? (
|
|
<Box
|
|
as="button"
|
|
type="button"
|
|
onClick={handleLogout}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
fullWidth
|
|
px={4}
|
|
py={3}
|
|
cursor="pointer"
|
|
transition
|
|
bg="transparent"
|
|
hoverBg="rgba(239, 68, 68, 0.05)"
|
|
hoverColor="text-racing-red"
|
|
>
|
|
<Text size="sm" color="text-gray-500">Logout</Text>
|
|
<Icon icon={LogOut} size={4} color="rgb(107, 114, 128)" />
|
|
</Box>
|
|
) : (
|
|
<Box as="form" action="/auth/logout" method="POST">
|
|
<Box
|
|
as="button"
|
|
type="submit"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
fullWidth
|
|
px={4}
|
|
py={3}
|
|
cursor="pointer"
|
|
transition
|
|
bg="transparent"
|
|
hoverBg="rgba(239, 68, 68, 0.1)"
|
|
hoverColor="text-red-400"
|
|
>
|
|
<Text size="sm" color="text-gray-500">Logout</Text>
|
|
<Icon icon={LogOut} size={4} color="rgb(107, 114, 128)" />
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</AnimatePresence>
|
|
</Box>
|
|
);
|
|
}
|