368 lines
14 KiB
TypeScript
368 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import Button from '@/ui/Button';
|
|
import Card from '@/ui/Card';
|
|
import { useInject } from '@/lib/di/hooks/useInject';
|
|
import { SPONSOR_SERVICE_TOKEN } from '@/lib/di/tokens';
|
|
import {
|
|
Activity,
|
|
Check,
|
|
Loader2,
|
|
MessageCircle,
|
|
Shield,
|
|
Target
|
|
} from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useCallback, useState } from 'react';
|
|
import { SponsorMetric, SponsorshipSlot } from './SponsorInsightsCardTypes';
|
|
import { getTierStyles, getEntityLabel, getEntityIcon, getSponsorshipTagline } from './SponsorInsightsCardHelpers';
|
|
|
|
// ============================================================================
|
|
// TYPES
|
|
// ============================================================================
|
|
|
|
export type EntityType = 'league' | 'race' | 'driver' | 'team';
|
|
|
|
export interface SponsorInsightsProps {
|
|
// Entity info
|
|
entityType: EntityType;
|
|
entityId: string;
|
|
entityName: string;
|
|
|
|
// Tier classification
|
|
tier: 'premium' | 'standard' | 'starter';
|
|
|
|
// Key metrics (shown in grid)
|
|
metrics: SponsorMetric[];
|
|
|
|
// Sponsorship availability
|
|
slots: SponsorshipSlot[];
|
|
|
|
// Optional: additional stats section
|
|
additionalStats?: {
|
|
label: string;
|
|
items: Array<{ label: string; value: string | number }>;
|
|
};
|
|
|
|
// Optional: trust indicators
|
|
trustScore?: number;
|
|
discordMembers?: number;
|
|
monthlyActivity?: number;
|
|
|
|
// CTA customization
|
|
ctaLabel?: string;
|
|
ctaHref?: string;
|
|
|
|
// Optional: current sponsor ID (if logged in as sponsor)
|
|
currentSponsorId?: string;
|
|
|
|
// Optional: callback when sponsorship request is submitted
|
|
onSponsorshipRequested?: (tier: 'main' | 'secondary') => void;
|
|
}
|
|
|
|
// ============================================================================
|
|
// COMPONENT
|
|
// ============================================================================
|
|
|
|
export default function SponsorInsightsCard({
|
|
entityType,
|
|
entityId,
|
|
entityName,
|
|
tier,
|
|
metrics,
|
|
slots,
|
|
additionalStats,
|
|
trustScore,
|
|
discordMembers,
|
|
monthlyActivity,
|
|
ctaLabel,
|
|
ctaHref,
|
|
currentSponsorId,
|
|
onSponsorshipRequested,
|
|
}: SponsorInsightsProps) {
|
|
// TODO components should not fetch any data
|
|
const router = useRouter();
|
|
const sponsorshipService = useInject(SPONSOR_SERVICE_TOKEN);
|
|
const tierStyles = getTierStyles(tier);
|
|
const EntityIcon = getEntityIcon(entityType);
|
|
|
|
// State for sponsorship application
|
|
const [applyingTier, setApplyingTier] = useState<'main' | 'secondary' | null>(null);
|
|
const [appliedTiers, setAppliedTiers] = useState<Set<'main' | 'secondary'>>(new Set());
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const mainSlot = slots.find(s => s.tier === 'main');
|
|
const secondarySlots = slots.filter(s => s.tier === 'secondary');
|
|
const availableSecondary = secondarySlots.filter(s => s.available).length;
|
|
|
|
// Map EntityType to SponsorableEntityType
|
|
const getSponsorableEntityType = useCallback((type: EntityType): 'driver' | 'team' | 'race' | 'season' => {
|
|
switch (type) {
|
|
case 'league': return 'season'; // Leagues are sponsored via their seasons
|
|
case 'race': return 'race';
|
|
case 'driver': return 'driver';
|
|
case 'team': return 'team';
|
|
}
|
|
}, []);
|
|
|
|
const handleSponsorClick = useCallback(async (slotTier: 'main' | 'secondary') => {
|
|
// If no sponsor ID, redirect to sponsor signup/login
|
|
if (!currentSponsorId) {
|
|
const href = ctaHref || `/sponsor/${entityType}s/${entityId}?tier=${slotTier}`;
|
|
router.push(href);
|
|
return;
|
|
}
|
|
|
|
// If already applied for this tier, show details page
|
|
if (appliedTiers.has(slotTier)) {
|
|
router.push(`/sponsor/dashboard`);
|
|
return;
|
|
}
|
|
|
|
// Apply for sponsorship using service
|
|
setApplyingTier(slotTier);
|
|
setError(null);
|
|
|
|
try {
|
|
const slot = slotTier === 'main' ? mainSlot : secondarySlots[0];
|
|
const slotPrice = slot?.price ?? 0;
|
|
|
|
// Note: The sponsorship service would need a method to submit sponsorship requests
|
|
// For now, we'll use a placeholder since the exact API may not be available
|
|
const request = {
|
|
sponsorId: currentSponsorId,
|
|
entityType: getSponsorableEntityType(entityType),
|
|
entityId,
|
|
tier: slotTier,
|
|
offeredAmount: slotPrice * 100, // Convert to cents
|
|
currency: (slot?.currency as 'USD' | 'EUR' | 'GBP') ?? 'USD',
|
|
message: `Interested in sponsoring ${entityName} as ${slotTier} sponsor.`,
|
|
};
|
|
|
|
// This would be: await sponsorshipService.submitSponsorshipRequest(request);
|
|
// For now, we'll log it as a placeholder
|
|
console.log('Sponsorship request:', request);
|
|
|
|
// Mark as applied
|
|
setAppliedTiers(prev => new Set([...prev, slotTier]));
|
|
|
|
// Call callback if provided
|
|
onSponsorshipRequested?.(slotTier);
|
|
|
|
} catch (err) {
|
|
console.error('Failed to apply for sponsorship:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to submit sponsorship request');
|
|
} finally {
|
|
setApplyingTier(null);
|
|
}
|
|
}, [currentSponsorId, ctaHref, entityType, entityId, entityName, router, mainSlot, secondarySlots, appliedTiers, getSponsorableEntityType, onSponsorshipRequested]);
|
|
|
|
return (
|
|
<Card className={`mb-6 border-primary-blue/30 bg-gradient-to-r ${tierStyles.gradient}`}>
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<Target className="w-5 h-5 text-primary-blue" />
|
|
<h3 className="text-lg font-semibold text-white">Sponsorship Opportunity</h3>
|
|
</div>
|
|
<p className="text-gray-400 text-sm">
|
|
{getSponsorshipTagline(entityType)}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className={`px-2 py-1 rounded text-xs font-medium border ${tierStyles.badge}`}>
|
|
{tier.charAt(0).toUpperCase() + tier.slice(1)} {getEntityLabel(entityType)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Key Metrics Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
|
|
{metrics.slice(0, 4).map((metric, index) => {
|
|
const Icon = metric.icon as React.ComponentType<{ className?: string }>;
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="bg-iron-gray/50 rounded-lg p-3 border border-charcoal-outline"
|
|
>
|
|
<div className={`flex items-center gap-1.5 ${metric.color || 'text-primary-blue'} mb-1`}>
|
|
<Icon className="w-4 h-4" />
|
|
<span className="text-xs font-medium">{metric.label}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-2">
|
|
<div className="text-xl font-bold text-white">
|
|
{typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
|
|
</div>
|
|
{metric.trend && (
|
|
<span className={`text-xs ${metric.trend.isPositive ? 'text-performance-green' : 'text-red-400'}`}>
|
|
{metric.trend.isPositive ? '+' : ''}{metric.trend.value}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Trust & Activity Indicators */}
|
|
{(trustScore !== undefined || discordMembers !== undefined || monthlyActivity !== undefined) && (
|
|
<div className="flex flex-wrap gap-4 mb-4 pb-4 border-b border-charcoal-outline/50">
|
|
{trustScore !== undefined && (
|
|
<div className="flex items-center gap-2">
|
|
<Shield className="w-4 h-4 text-performance-green" />
|
|
<span className="text-sm text-gray-400">Trust Score:</span>
|
|
<span className="text-sm font-semibold text-white">{trustScore}/100</span>
|
|
</div>
|
|
)}
|
|
{discordMembers !== undefined && (
|
|
<div className="flex items-center gap-2">
|
|
<MessageCircle className="w-4 h-4 text-purple-400" />
|
|
<span className="text-sm text-gray-400">Discord:</span>
|
|
<span className="text-sm font-semibold text-white">{discordMembers.toLocaleString()}</span>
|
|
</div>
|
|
)}
|
|
{monthlyActivity !== undefined && (
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="w-4 h-4 text-neon-aqua" />
|
|
<span className="text-sm text-gray-400">Monthly Activity:</span>
|
|
<span className="text-sm font-semibold text-white">{monthlyActivity}%</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Sponsorship Slots */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
|
|
{/* Main Sponsor Slot */}
|
|
{mainSlot && (
|
|
<div className={`p-3 rounded-lg border ${
|
|
mainSlot.available
|
|
? 'bg-performance-green/10 border-performance-green/30'
|
|
: 'bg-iron-gray/30 border-charcoal-outline'
|
|
}`}>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-sm font-medium text-white">Main Sponsor Slot</span>
|
|
<span className={`text-xs ${mainSlot.available ? 'text-performance-green' : 'text-gray-500'}`}>
|
|
{mainSlot.available ? 'Available' : 'Taken'}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400 mb-2">{mainSlot.benefits.join(' • ')}</p>
|
|
{mainSlot.available && (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-lg font-bold text-white">
|
|
${mainSlot.price.toLocaleString()}/season
|
|
</span>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => handleSponsorClick('main')}
|
|
disabled={applyingTier === 'main'}
|
|
className="text-xs px-3 py-1"
|
|
>
|
|
{applyingTier === 'main' ? (
|
|
<>
|
|
<Loader2 className="w-3 h-3 mr-1 animate-spin" />
|
|
Applying...
|
|
</>
|
|
) : appliedTiers.has('main') ? (
|
|
<>
|
|
<Check className="w-3 h-3 mr-1" />
|
|
Applied
|
|
</>
|
|
) : (
|
|
'Apply to Sponsor'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Secondary Slots */}
|
|
{secondarySlots.length > 0 && (
|
|
<div className={`p-3 rounded-lg border ${
|
|
availableSecondary > 0
|
|
? 'bg-purple-500/10 border-purple-500/30'
|
|
: 'bg-iron-gray/30 border-charcoal-outline'
|
|
}`}>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<span className="text-sm font-medium text-white">Secondary Slots</span>
|
|
<span className={`text-xs ${availableSecondary > 0 ? 'text-purple-400' : 'text-gray-500'}`}>
|
|
{availableSecondary}/{secondarySlots.length} Available
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-gray-400 mb-2">
|
|
{secondarySlots[0]?.benefits.join(' • ') || 'Logo placement on page'}
|
|
</p>
|
|
{availableSecondary > 0 && (
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-lg font-bold text-white">
|
|
${secondarySlots[0]?.price.toLocaleString()}/season
|
|
</span>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => handleSponsorClick('secondary')}
|
|
disabled={applyingTier === 'secondary'}
|
|
className="text-xs px-3 py-1"
|
|
>
|
|
{applyingTier === 'secondary' ? (
|
|
<>
|
|
<Loader2 className="w-3 h-3 mr-1 animate-spin" />
|
|
Applying...
|
|
</>
|
|
) : appliedTiers.has('secondary') ? (
|
|
<>
|
|
<Check className="w-3 h-3 mr-1" />
|
|
Applied
|
|
</>
|
|
) : (
|
|
'Apply to Sponsor'
|
|
)}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Additional Stats */}
|
|
{additionalStats && (
|
|
<div className="mb-4 pb-4 border-b border-charcoal-outline/50">
|
|
<h4 className="text-sm font-medium text-gray-400 mb-2">{additionalStats.label}</h4>
|
|
<div className="flex flex-wrap gap-4">
|
|
{additionalStats.items.map((item, index) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<span className="text-sm text-gray-500">{item.label}:</span>
|
|
<span className="text-sm font-semibold text-white">
|
|
{typeof item.value === 'number' ? item.value.toLocaleString() : item.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
|
<p className="text-sm text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-between pt-3 border-t border-charcoal-outline/50">
|
|
<p className="text-xs text-gray-500">
|
|
10% platform fee applies • Logos burned on all liveries • Sponsorships are attached to seasons, so you can change partners from season to season
|
|
{appliedTiers.size > 0 && ' • Application pending review'}
|
|
</p>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => router.push(ctaHref || `/sponsor/${entityType}s/${entityId}`)}
|
|
className="text-xs"
|
|
>
|
|
{ctaLabel || 'View Full Details'}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |