484 lines
19 KiB
TypeScript
484 lines
19 KiB
TypeScript
'use client';
|
|
|
|
import { useAuth } from '@/lib/auth/AuthContext';
|
|
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
|
|
import { BarChart3, Building2, ChevronDown, CreditCard, Handshake, LogOut, Megaphone, Paintbrush, Settings, TrendingUp, Trophy, Shield } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
|
|
import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
|
|
import { CapabilityGate } from '@/components/shared/CapabilityGate';
|
|
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
|
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
|
|
import { DriverViewModel as DriverViewModelClass } from '@/lib/view-models/DriverViewModel';
|
|
import { useFindDriverById } from '@/hooks/driver/useFindDriverById';
|
|
|
|
// 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 as any).primaryDriverId || '';
|
|
const role = (session.user as any).role;
|
|
|
|
// 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');
|
|
}
|
|
|
|
// Sponsor Pill Component - matches the style of DriverSummaryPill
|
|
function SponsorSummaryPill({
|
|
onClick,
|
|
companyName = 'Acme Racing Co.',
|
|
activeSponsors = 7,
|
|
impressions = 127,
|
|
}: {
|
|
onClick: () => void;
|
|
companyName?: string;
|
|
activeSponsors?: number;
|
|
impressions?: number;
|
|
}) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<motion.button
|
|
onClick={onClick}
|
|
className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-performance-green/50 transition-all duration-200"
|
|
whileHover={shouldReduceMotion ? {} : { scale: 1.02 }}
|
|
whileTap={shouldReduceMotion ? {} : { scale: 0.98 }}
|
|
>
|
|
{/* Avatar/Logo */}
|
|
<div className="relative">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-performance-green/20 to-performance-green/5 border border-performance-green/30 flex items-center justify-center">
|
|
<Building2 className="w-4 h-4 text-performance-green" />
|
|
</div>
|
|
{/* Active indicator */}
|
|
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-performance-green border-2 border-deep-graphite" />
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="hidden sm:flex flex-col items-start">
|
|
<span className="text-xs font-semibold text-white truncate max-w-[100px]">
|
|
{companyName.split(' ')[0]}
|
|
</span>
|
|
<div className="flex items-center gap-1.5 text-[10px] text-gray-500">
|
|
<span className="flex items-center gap-0.5">
|
|
<Trophy className="w-2.5 h-2.5 text-performance-green" />
|
|
{activeSponsors}
|
|
</span>
|
|
<span className="text-gray-600">•</span>
|
|
<span className="flex items-center gap-0.5">
|
|
<TrendingUp className="w-2.5 h-2.5 text-primary-blue" />
|
|
{impressions}k
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chevron */}
|
|
<ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
|
|
</motion.button>
|
|
);
|
|
}
|
|
|
|
export default function UserPill() {
|
|
const { session } = useAuth();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
const { isDemo, demoRole } = useDemoUserMode();
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
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 as any).avatarUrl ?? null });
|
|
}, [driverDto]);
|
|
|
|
const data = useMemo(() => {
|
|
if (!session?.user) {
|
|
return null;
|
|
}
|
|
|
|
// Demo users don't have real driver data
|
|
if (isDemo) {
|
|
return {
|
|
isDemo: true,
|
|
demoRole,
|
|
displayName: session.user.displayName,
|
|
email: session.user.email,
|
|
avatarUrl: session.user.avatarUrl,
|
|
};
|
|
}
|
|
|
|
if (!primaryDriverId || !driver) {
|
|
return null;
|
|
}
|
|
|
|
// Driver rating + rank are not exposed by the current API contract for the lightweight
|
|
// driver DTO used in the header. Keep it null until the API provides it.
|
|
const rating: number | null = null;
|
|
const rank: number | null = null;
|
|
|
|
const avatarSrc = driver.avatarUrl;
|
|
|
|
return {
|
|
driver,
|
|
avatarSrc,
|
|
rating,
|
|
rank,
|
|
isDemo: false,
|
|
demoRole: null,
|
|
};
|
|
}, [session, driver, primaryDriverId, isDemo, demoRole]);
|
|
|
|
// 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 (
|
|
<div className="flex items-center gap-2">
|
|
<Link
|
|
href="/auth/login"
|
|
className="inline-flex items-center gap-2 rounded-full bg-iron-gray border border-charcoal-outline px-4 py-1.5 text-xs font-medium text-gray-300 hover:text-white hover:border-gray-500 transition-all"
|
|
>
|
|
Sign In
|
|
</Link>
|
|
<Link
|
|
href="/auth/signup"
|
|
className="inline-flex items-center gap-2 rounded-full bg-primary-blue px-4 py-1.5 text-xs font-semibold text-white shadow-[0_0_12px_rgba(25,140,255,0.5)] hover:bg-primary-blue/90 hover:shadow-[0_0_18px_rgba(25,140,255,0.8)] transition-all"
|
|
>
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 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',
|
|
}[demoRole || 'driver'] : null;
|
|
|
|
const roleColor = isDemo ? {
|
|
'driver': 'text-primary-blue',
|
|
'sponsor': 'text-performance-green',
|
|
'league-owner': 'text-purple-400',
|
|
'league-steward': 'text-amber-400',
|
|
'league-admin': 'text-red-400',
|
|
'system-owner': 'text-indigo-400',
|
|
'super-admin': 'text-pink-400',
|
|
}[demoRole || 'driver'] : null;
|
|
|
|
return (
|
|
<div className="relative inline-flex items-center" data-user-pill>
|
|
<motion.button
|
|
onClick={() => setIsMenuOpen((open) => !open)}
|
|
className="group flex items-center gap-3 rounded-full bg-gradient-to-r from-iron-gray to-deep-graphite border border-charcoal-outline px-3 py-1.5 hover:border-primary-blue/50 transition-all duration-200"
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
{/* Avatar */}
|
|
<div className="relative">
|
|
{avatarUrl ? (
|
|
<div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
|
<img
|
|
src={avatarUrl}
|
|
alt={displayName}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
|
<span className="text-xs font-bold text-primary-blue">
|
|
{displayName[0]?.toUpperCase() || 'U'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full bg-primary-blue border-2 border-deep-graphite" />
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="hidden sm:flex flex-col items-start">
|
|
<span className="text-xs font-semibold text-white truncate max-w-[100px]">
|
|
{displayName}
|
|
</span>
|
|
{roleLabel && (
|
|
<span className={`text-[10px] ${roleColor} font-medium`}>
|
|
{roleLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Chevron */}
|
|
<ChevronDown className="w-3.5 h-3.5 text-gray-500 group-hover:text-gray-300 transition-colors" />
|
|
</motion.button>
|
|
|
|
<AnimatePresence>
|
|
{isMenuOpen && (
|
|
<motion.div
|
|
className="absolute right-0 top-full mt-2 w-56 rounded-xl bg-deep-graphite border border-charcoal-outline shadow-xl shadow-black/30 z-50 overflow-hidden"
|
|
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 }}
|
|
>
|
|
{/* Header */}
|
|
<div className={`p-4 bg-gradient-to-r ${isDemo ? 'from-primary-blue/10' : 'from-iron-gray/20'} to-transparent border-b border-charcoal-outline`}>
|
|
<div className="flex items-center gap-3">
|
|
{avatarUrl ? (
|
|
<div className="w-10 h-10 rounded-lg overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
|
|
<img
|
|
src={avatarUrl}
|
|
alt={displayName}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-blue/20 to-primary-blue/5 border border-primary-blue/30 flex items-center justify-center">
|
|
<span className="text-xs font-bold text-primary-blue">
|
|
{displayName[0]?.toUpperCase() || 'U'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="text-sm font-semibold text-white">{displayName}</p>
|
|
{roleLabel && (
|
|
<p className={`text-xs ${roleColor}`}>{roleLabel}</p>
|
|
)}
|
|
{isDemo && (
|
|
<p className="text-xs text-gray-500">Demo Account</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{isDemo && (
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
Development account - not for production use
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Menu Items */}
|
|
<div className="py-1 text-sm text-gray-200">
|
|
{/* Admin link for Owner/Super Admin users */}
|
|
{hasAdminAccess && (
|
|
<Link
|
|
href="/admin"
|
|
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Shield className="h-4 w-4 text-indigo-400" />
|
|
<span>Admin Area</span>
|
|
</Link>
|
|
)}
|
|
|
|
{/* Sponsor portal link for demo sponsor users */}
|
|
{isDemo && demoRole === 'sponsor' && (
|
|
<>
|
|
<Link
|
|
href="/sponsor"
|
|
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<BarChart3 className="h-4 w-4 text-performance-green" />
|
|
<span>Dashboard</span>
|
|
</Link>
|
|
<Link
|
|
href="/sponsor/campaigns"
|
|
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Megaphone className="h-4 w-4 text-primary-blue" />
|
|
<span>My Sponsorships</span>
|
|
</Link>
|
|
<Link
|
|
href="/sponsor/billing"
|
|
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<CreditCard className="h-4 w-4 text-warning-amber" />
|
|
<span>Billing</span>
|
|
</Link>
|
|
<Link
|
|
href="/sponsor/settings"
|
|
className="flex items-center gap-3 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Settings className="h-4 w-4 text-gray-400" />
|
|
<span>Settings</span>
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{/* Regular user profile links */}
|
|
<Link
|
|
href="/profile"
|
|
className="block px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Profile
|
|
</Link>
|
|
<Link
|
|
href="/profile/leagues"
|
|
className="block px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
Manage leagues
|
|
</Link>
|
|
<Link
|
|
href="/profile/liveries"
|
|
className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Paintbrush className="h-4 w-4" />
|
|
<span>Liveries</span>
|
|
</Link>
|
|
<Link
|
|
href="/profile/sponsorship-requests"
|
|
className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Handshake className="h-4 w-4 text-performance-green" />
|
|
<span>Sponsorship Requests</span>
|
|
</Link>
|
|
<Link
|
|
href="/profile/settings"
|
|
className="flex items-center gap-2 px-4 py-2.5 hover:bg-iron-gray/50 transition-colors"
|
|
onClick={() => setIsMenuOpen(false)}
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
<span>Settings</span>
|
|
</Link>
|
|
|
|
{/* Demo-specific info */}
|
|
{isDemo && (
|
|
<div className="px-4 py-2 text-xs text-gray-500 italic border-t border-charcoal-outline/50 mt-1">
|
|
Demo users have limited profile access
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-charcoal-outline">
|
|
{isDemo ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleLogout}
|
|
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-racing-red hover:bg-racing-red/5 transition-colors"
|
|
>
|
|
<span>Logout</span>
|
|
<LogOut className="h-4 w-4" />
|
|
</button>
|
|
) : (
|
|
<form action="/auth/logout" method="POST">
|
|
<button
|
|
type="submit"
|
|
className="flex w-full items-center justify-between px-4 py-3 text-sm text-gray-500 hover:text-red-400 hover:bg-red-500/10 transition-colors"
|
|
>
|
|
<span>Logout</span>
|
|
<LogOut className="h-4 w-4" />
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
} |