auth rework
This commit is contained in:
@@ -2,28 +2,63 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import Input from '@/components/ui/Input';
|
||||
import {
|
||||
Settings,
|
||||
Building2,
|
||||
Mail,
|
||||
import Toggle from '@/components/ui/Toggle';
|
||||
import SectionHeader from '@/components/ui/SectionHeader';
|
||||
import FormField from '@/components/ui/FormField';
|
||||
import PageHeader from '@/components/ui/PageHeader';
|
||||
import {
|
||||
Settings,
|
||||
Building2,
|
||||
Mail,
|
||||
Globe,
|
||||
Upload,
|
||||
Save,
|
||||
Bell,
|
||||
Shield,
|
||||
Eye,
|
||||
Trash2
|
||||
Trash2,
|
||||
CheckCircle,
|
||||
User,
|
||||
Phone,
|
||||
MapPin,
|
||||
FileText,
|
||||
Link as LinkIcon,
|
||||
Image as ImageIcon,
|
||||
Lock,
|
||||
Key,
|
||||
Smartphone,
|
||||
AlertCircle
|
||||
} from 'lucide-react';
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
interface SponsorProfile {
|
||||
name: string;
|
||||
email: string;
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
contactEmail: string;
|
||||
contactPhone: string;
|
||||
website: string;
|
||||
description: string;
|
||||
logoUrl: string | null;
|
||||
industry: string;
|
||||
address: {
|
||||
street: string;
|
||||
city: string;
|
||||
country: string;
|
||||
postalCode: string;
|
||||
};
|
||||
taxId: string;
|
||||
socialLinks: {
|
||||
twitter: string;
|
||||
linkedin: string;
|
||||
instagram: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface NotificationSettings {
|
||||
@@ -31,15 +66,42 @@ interface NotificationSettings {
|
||||
emailWeeklyReport: boolean;
|
||||
emailRaceAlerts: boolean;
|
||||
emailPaymentAlerts: boolean;
|
||||
emailNewOpportunities: boolean;
|
||||
emailContractExpiry: boolean;
|
||||
}
|
||||
|
||||
// Mock data
|
||||
interface PrivacySettings {
|
||||
publicProfile: boolean;
|
||||
showStats: boolean;
|
||||
showActiveSponsorships: boolean;
|
||||
allowDirectContact: boolean;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Mock Data
|
||||
// ============================================================================
|
||||
|
||||
const MOCK_PROFILE: SponsorProfile = {
|
||||
name: 'Acme Racing Co.',
|
||||
email: 'sponsor@acme-racing.com',
|
||||
companyName: 'Acme Racing Co.',
|
||||
contactName: 'John Smith',
|
||||
contactEmail: 'sponsor@acme-racing.com',
|
||||
contactPhone: '+1 (555) 123-4567',
|
||||
website: 'https://acme-racing.com',
|
||||
description: 'Premium sim racing equipment and accessories for competitive drivers.',
|
||||
description: 'Premium sim racing equipment and accessories for competitive drivers. We specialize in high-performance steering wheels, pedals, and cockpit systems used by professionals worldwide.',
|
||||
logoUrl: null,
|
||||
industry: 'Racing Equipment',
|
||||
address: {
|
||||
street: '123 Racing Boulevard',
|
||||
city: 'Indianapolis',
|
||||
country: 'United States',
|
||||
postalCode: '46222',
|
||||
},
|
||||
taxId: 'US12-3456789',
|
||||
socialLinks: {
|
||||
twitter: '@acmeracing',
|
||||
linkedin: 'acme-racing-co',
|
||||
instagram: '@acmeracing',
|
||||
},
|
||||
};
|
||||
|
||||
const MOCK_NOTIFICATIONS: NotificationSettings = {
|
||||
@@ -47,35 +109,63 @@ const MOCK_NOTIFICATIONS: NotificationSettings = {
|
||||
emailWeeklyReport: true,
|
||||
emailRaceAlerts: false,
|
||||
emailPaymentAlerts: true,
|
||||
emailNewOpportunities: true,
|
||||
emailContractExpiry: true,
|
||||
};
|
||||
|
||||
function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (checked: boolean) => void; label: string }) {
|
||||
const MOCK_PRIVACY: PrivacySettings = {
|
||||
publicProfile: true,
|
||||
showStats: false,
|
||||
showActiveSponsorships: true,
|
||||
allowDirectContact: true,
|
||||
};
|
||||
|
||||
const INDUSTRY_OPTIONS = [
|
||||
'Racing Equipment',
|
||||
'Automotive',
|
||||
'Technology',
|
||||
'Gaming & Esports',
|
||||
'Energy Drinks',
|
||||
'Apparel',
|
||||
'Financial Services',
|
||||
'Other',
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
// Components
|
||||
// ============================================================================
|
||||
|
||||
function SavedIndicator({ visible }: { visible: boolean }) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
return (
|
||||
<label className="flex items-center justify-between cursor-pointer">
|
||||
<span className="text-gray-300">{label}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`relative w-11 h-6 rounded-full transition-colors ${checked ? 'bg-primary-blue' : 'bg-iron-gray'}`}
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
</label>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: visible ? 1 : 0, x: visible ? 0 : 20 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
||||
className="flex items-center gap-2 text-performance-green"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
<span className="text-sm font-medium">Changes saved</span>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
|
||||
export default function SponsorSettingsPage() {
|
||||
const router = useRouter();
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [profile, setProfile] = useState(MOCK_PROFILE);
|
||||
const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
|
||||
const [privacy, setPrivacy] = useState(MOCK_PRIVACY);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const handleSaveProfile = async () => {
|
||||
setSaving(true);
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 800));
|
||||
setSaving(false);
|
||||
setSaved(true);
|
||||
@@ -83,251 +173,498 @@ export default function SponsorSettingsPage() {
|
||||
};
|
||||
|
||||
const handleDeleteAccount = () => {
|
||||
if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone.')) {
|
||||
// Clear demo cookies and redirect
|
||||
if (confirm('Are you sure you want to delete your sponsor account? This action cannot be undone. All sponsorship data will be permanently removed.')) {
|
||||
document.cookie = 'gridpilot_demo_mode=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
document.cookie = 'gridpilot_sponsor_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
|
||||
router.push('/');
|
||||
}
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: shouldReduceMotion ? 0 : 0.1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto py-8 px-4">
|
||||
<motion.div
|
||||
className="max-w-4xl mx-auto py-8 px-4"
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-white flex items-center gap-3">
|
||||
<Settings className="w-7 h-7 text-gray-400" />
|
||||
Sponsor Settings
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-1">Manage your sponsor profile and preferences</p>
|
||||
</div>
|
||||
<motion.div variants={itemVariants}>
|
||||
<PageHeader
|
||||
icon={Settings}
|
||||
title="Sponsor Settings"
|
||||
description="Manage your company profile, notifications, and security preferences"
|
||||
action={<SavedIndicator visible={saved} />}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Company Profile */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Building2 className="w-5 h-5 text-primary-blue" />
|
||||
Company Profile
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Company Name</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.name}
|
||||
onChange={(e) => setProfile({ ...profile, name: e.target.value })}
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4 text-gray-500" />
|
||||
Contact Email
|
||||
</div>
|
||||
</label>
|
||||
<Input
|
||||
type="email"
|
||||
value={profile.email}
|
||||
onChange={(e) => setProfile({ ...profile, email: e.target.value })}
|
||||
placeholder="sponsor@company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="w-4 h-4 text-gray-500" />
|
||||
Website
|
||||
</div>
|
||||
</label>
|
||||
<Input
|
||||
type="url"
|
||||
value={profile.website}
|
||||
onChange={(e) => setProfile({ ...profile, website: e.target.value })}
|
||||
placeholder="https://company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">Company Description</label>
|
||||
<textarea
|
||||
value={profile.description}
|
||||
onChange={(e) => setProfile({ ...profile, description: e.target.value })}
|
||||
placeholder="Tell leagues about your company..."
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Upload className="w-4 h-4 text-gray-500" />
|
||||
Company Logo
|
||||
</div>
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-lg bg-iron-gray border border-charcoal-outline flex items-center justify-center">
|
||||
<Building2 className="w-8 h-8 text-gray-500" />
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/svg+xml"
|
||||
className="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-primary-blue/10 file:text-primary-blue hover:file:bg-primary-blue/20"
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Building2}
|
||||
title="Company Profile"
|
||||
description="Your public-facing company information"
|
||||
/>
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Company Basic Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField label="Company Name" icon={Building2} required>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.companyName}
|
||||
onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">PNG, JPEG, or SVG. Max 2MB.</p>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Industry">
|
||||
<select
|
||||
value={profile.industry}
|
||||
onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
|
||||
className="w-full px-3 py-2 bg-iron-gray border border-charcoal-outline rounded-lg text-white focus:outline-none focus:border-primary-blue"
|
||||
>
|
||||
{INDUSTRY_OPTIONS.map(industry => (
|
||||
<option key={industry} value={industry}>{industry}</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
||||
Contact Information
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<FormField label="Contact Name" icon={User} required>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.contactName}
|
||||
onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
|
||||
placeholder="Full name"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Contact Email" icon={Mail} required>
|
||||
<Input
|
||||
type="email"
|
||||
value={profile.contactEmail}
|
||||
onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
|
||||
placeholder="sponsor@company.com"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Phone Number" icon={Phone}>
|
||||
<Input
|
||||
type="tel"
|
||||
value={profile.contactPhone}
|
||||
onChange={(e) => setProfile({ ...profile, contactPhone: e.target.value })}
|
||||
placeholder="+1 (555) 123-4567"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Website" icon={Globe}>
|
||||
<Input
|
||||
type="url"
|
||||
value={profile.website}
|
||||
onChange={(e) => setProfile({ ...profile, website: e.target.value })}
|
||||
placeholder="https://company.com"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-charcoal-outline flex items-center justify-between">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSaveProfile}
|
||||
disabled={saving}
|
||||
>
|
||||
{saving ? (
|
||||
'Saving...'
|
||||
) : saved ? (
|
||||
<>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Saved!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save Changes
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{/* Address */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
||||
Business Address
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="md:col-span-2">
|
||||
<FormField label="Street Address" icon={MapPin}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.street}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, street: e.target.value }
|
||||
})}
|
||||
placeholder="123 Main Street"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<FormField label="City">
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.city}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, city: e.target.value }
|
||||
})}
|
||||
placeholder="City"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Postal Code">
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.postalCode}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, postalCode: e.target.value }
|
||||
})}
|
||||
placeholder="12345"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Country">
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.address.country}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
address: { ...profile.address, country: e.target.value }
|
||||
})}
|
||||
placeholder="Country"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Tax ID / VAT Number" icon={FileText}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.taxId}
|
||||
onChange={(e) => setProfile({ ...profile, taxId: e.target.value })}
|
||||
placeholder="XX12-3456789"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<FormField label="Company Description">
|
||||
<textarea
|
||||
value={profile.description}
|
||||
onChange={(e) => setProfile({ ...profile, description: e.target.value })}
|
||||
placeholder="Tell potential sponsorship partners about your company, products, and what you're looking for in sponsorship opportunities..."
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 bg-iron-gray border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-primary-blue resize-none"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
This description appears on your public sponsor profile.
|
||||
</p>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
|
||||
Social Media
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<FormField label="Twitter / X" icon={LinkIcon}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.socialLinks.twitter}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
socialLinks: { ...profile.socialLinks, twitter: e.target.value }
|
||||
})}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="LinkedIn" icon={LinkIcon}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.socialLinks.linkedin}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
socialLinks: { ...profile.socialLinks, linkedin: e.target.value }
|
||||
})}
|
||||
placeholder="company-name"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Instagram" icon={LinkIcon}>
|
||||
<Input
|
||||
type="text"
|
||||
value={profile.socialLinks.instagram}
|
||||
onChange={(e) => setProfile({
|
||||
...profile,
|
||||
socialLinks: { ...profile.socialLinks, instagram: e.target.value }
|
||||
})}
|
||||
placeholder="@username"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logo Upload */}
|
||||
<div className="pt-4 border-t border-charcoal-outline/50">
|
||||
<FormField label="Company Logo" icon={ImageIcon}>
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="w-24 h-24 rounded-xl bg-gradient-to-br from-iron-gray to-deep-graphite border-2 border-dashed border-charcoal-outline flex items-center justify-center overflow-hidden">
|
||||
{profile.logoUrl ? (
|
||||
<img src={profile.logoUrl} alt="Company logo" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<Building2 className="w-10 h-10 text-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="cursor-pointer">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/svg+xml"
|
||||
className="hidden"
|
||||
/>
|
||||
<div className="px-4 py-2 rounded-lg bg-iron-gray border border-charcoal-outline text-gray-300 hover:bg-charcoal-outline transition-colors flex items-center gap-2">
|
||||
<Upload className="w-4 h-4" />
|
||||
Upload Logo
|
||||
</div>
|
||||
</label>
|
||||
{profile.logoUrl && (
|
||||
<Button variant="secondary" className="text-sm text-gray-400">
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
PNG, JPEG, or SVG. Max 2MB. Recommended size: 400x400px.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
{/* Save Button */}
|
||||
<div className="pt-6 border-t border-charcoal-outline flex items-center justify-end gap-4">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSaveProfile}
|
||||
disabled={saving}
|
||||
className="min-w-[160px]"
|
||||
>
|
||||
{saving ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
Saving...
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Save className="w-4 h-4" />
|
||||
Save Profile
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Notification Preferences */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Bell className="w-5 h-5 text-warning-amber" />
|
||||
Notifications
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<Toggle
|
||||
checked={notifications.emailNewSponsorships}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
|
||||
label="Email when a sponsorship is approved"
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Bell}
|
||||
title="Email Notifications"
|
||||
description="Control which emails you receive from GridPilot"
|
||||
color="text-warning-amber"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailWeeklyReport}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
|
||||
label="Weekly analytics report"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailRaceAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
|
||||
label="Race day alerts for sponsored leagues"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailPaymentAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
|
||||
label="Payment and invoice notifications"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="p-6">
|
||||
<div className="space-y-1">
|
||||
<Toggle
|
||||
checked={notifications.emailNewSponsorships}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
|
||||
label="Sponsorship Approvals"
|
||||
description="Receive confirmation when your sponsorship requests are approved"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailWeeklyReport}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
|
||||
label="Weekly Analytics Report"
|
||||
description="Get a weekly summary of your sponsorship performance"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailRaceAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailRaceAlerts: checked })}
|
||||
label="Race Day Alerts"
|
||||
description="Be notified when sponsored leagues have upcoming races"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailPaymentAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
|
||||
label="Payment & Invoice Notifications"
|
||||
description="Receive invoices and payment confirmations"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailNewOpportunities}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewOpportunities: checked })}
|
||||
label="New Sponsorship Opportunities"
|
||||
description="Get notified about new leagues and drivers seeking sponsors"
|
||||
/>
|
||||
<Toggle
|
||||
checked={notifications.emailContractExpiry}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailContractExpiry: checked })}
|
||||
label="Contract Expiry Reminders"
|
||||
description="Receive reminders before your sponsorship contracts expire"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Privacy & Visibility */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Eye className="w-5 h-5 text-performance-green" />
|
||||
Privacy & Visibility
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Public Profile</p>
|
||||
<p className="text-sm text-gray-500">Allow leagues to see your sponsor profile</p>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Eye}
|
||||
title="Privacy & Visibility"
|
||||
description="Control how your profile appears to others"
|
||||
color="text-performance-green"
|
||||
/>
|
||||
<div className="p-6">
|
||||
<div className="space-y-1">
|
||||
<Toggle
|
||||
checked={privacy.publicProfile}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, publicProfile: checked })}
|
||||
label="Public Profile"
|
||||
description="Allow leagues, teams, and drivers to view your sponsor profile"
|
||||
/>
|
||||
<Toggle
|
||||
checked={privacy.showStats}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, showStats: checked })}
|
||||
label="Show Sponsorship Statistics"
|
||||
description="Display your total sponsorships and investment amounts"
|
||||
/>
|
||||
<Toggle
|
||||
checked={privacy.showActiveSponsorships}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, showActiveSponsorships: checked })}
|
||||
label="Show Active Sponsorships"
|
||||
description="Let others see which leagues and teams you currently sponsor"
|
||||
/>
|
||||
<Toggle
|
||||
checked={privacy.allowDirectContact}
|
||||
onChange={(checked) => setPrivacy({ ...privacy, allowDirectContact: checked })}
|
||||
label="Allow Direct Contact"
|
||||
description="Enable leagues and teams to send you sponsorship proposals"
|
||||
/>
|
||||
</div>
|
||||
<Toggle checked={true} onChange={() => {}} label="" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Show Sponsorship Stats</p>
|
||||
<p className="text-sm text-gray-500">Display your total sponsorships and investment on profile</p>
|
||||
</div>
|
||||
<Toggle checked={false} onChange={() => {}} label="" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Security */}
|
||||
<Card className="mb-6">
|
||||
<div className="p-4 border-b border-charcoal-outline">
|
||||
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-primary-blue" />
|
||||
Security
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Change Password</p>
|
||||
<p className="text-sm text-gray-500">Update your account password</p>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="mb-6 overflow-hidden">
|
||||
<SectionHeader
|
||||
icon={Shield}
|
||||
title="Account Security"
|
||||
description="Protect your sponsor account"
|
||||
color="text-primary-blue"
|
||||
/>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-iron-gray">
|
||||
<Key className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Password</p>
|
||||
<p className="text-sm text-gray-500">Last changed 3 months ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
Change Password
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
Change
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Two-Factor Authentication</p>
|
||||
<p className="text-sm text-gray-500">Add an extra layer of security</p>
|
||||
|
||||
<div className="flex items-center justify-between py-3 border-b border-charcoal-outline/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-iron-gray">
|
||||
<Smartphone className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Two-Factor Authentication</p>
|
||||
<p className="text-sm text-gray-500">Add an extra layer of security to your account</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
Enable 2FA
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-iron-gray">
|
||||
<Lock className="w-5 h-5 text-gray-400" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Active Sessions</p>
|
||||
<p className="text-sm text-gray-500">Manage devices where you're logged in</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary">
|
||||
View Sessions
|
||||
</Button>
|
||||
</div>
|
||||
<Button variant="secondary" className="text-sm">
|
||||
Enable
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<Card className="border-racing-red/30">
|
||||
<div className="p-4 border-b border-racing-red/30">
|
||||
<h2 className="text-lg font-semibold text-racing-red flex items-center gap-2">
|
||||
<Trash2 className="w-5 h-5" />
|
||||
Danger Zone
|
||||
</h2>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-300">Delete Sponsor Account</p>
|
||||
<p className="text-sm text-gray-500">Permanently delete your account and all sponsorship data</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleDeleteAccount}
|
||||
className="text-sm text-racing-red border-racing-red/30 hover:bg-racing-red/10"
|
||||
>
|
||||
Delete Account
|
||||
</Button>
|
||||
<motion.div variants={itemVariants}>
|
||||
<Card className="border-racing-red/30 overflow-hidden">
|
||||
<div className="p-5 border-b border-racing-red/30 bg-gradient-to-r from-racing-red/10 to-transparent">
|
||||
<h2 className="text-lg font-semibold text-racing-red flex items-center gap-3">
|
||||
<div className="p-2 rounded-lg bg-racing-red/10">
|
||||
<AlertCircle className="w-5 h-5 text-racing-red" />
|
||||
</div>
|
||||
Danger Zone
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Alpha Notice */}
|
||||
<div className="mt-6 rounded-lg bg-warning-amber/10 border border-warning-amber/30 p-4">
|
||||
<p className="text-xs text-gray-400">
|
||||
<strong className="text-warning-amber">Alpha Note:</strong> Settings are demonstration-only and won't persist.
|
||||
Full account management will be available when the system is fully implemented.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-2 rounded-lg bg-racing-red/10">
|
||||
<Trash2 className="w-5 h-5 text-racing-red" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-200 font-medium">Delete Sponsor Account</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Permanently delete your account and all associated sponsorship data.
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={handleDeleteAccount}
|
||||
className="text-racing-red border-racing-red/30 hover:bg-racing-red/10"
|
||||
>
|
||||
Delete Account
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user