328 lines
11 KiB
TypeScript
328 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import Button from '../ui/Button';
|
|
import Input from '../ui/Input';
|
|
import { DollarSign, Star, Award, Plus, X, Bell } from 'lucide-react';
|
|
import PendingSponsorshipRequests, { type PendingRequestDTO } from '../sponsors/PendingSponsorshipRequests';
|
|
import {
|
|
getGetPendingSponsorshipRequestsUseCase,
|
|
getAcceptSponsorshipRequestUseCase,
|
|
getRejectSponsorshipRequestUseCase,
|
|
getSeasonRepository,
|
|
} from '@/lib/di-container';
|
|
import { PendingSponsorshipRequestsPresenter } from '@/lib/presenters/PendingSponsorshipRequestsPresenter';
|
|
import { useEffectiveDriverId } from '@/lib/currentDriver';
|
|
|
|
interface SponsorshipSlot {
|
|
tier: 'main' | 'secondary';
|
|
sponsorName?: string;
|
|
logoUrl?: string;
|
|
price: number;
|
|
isOccupied: boolean;
|
|
}
|
|
|
|
interface LeagueSponsorshipsSectionProps {
|
|
leagueId: string;
|
|
seasonId?: string;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
export function LeagueSponsorshipsSection({
|
|
leagueId,
|
|
seasonId: propSeasonId,
|
|
readOnly = false
|
|
}: LeagueSponsorshipsSectionProps) {
|
|
const currentDriverId = useEffectiveDriverId();
|
|
const [slots, setSlots] = useState<SponsorshipSlot[]>([
|
|
{ tier: 'main', price: 500, isOccupied: false },
|
|
{ tier: 'secondary', price: 200, isOccupied: false },
|
|
{ tier: 'secondary', price: 200, isOccupied: false },
|
|
]);
|
|
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
|
const [tempPrice, setTempPrice] = useState<string>('');
|
|
const [pendingRequests, setPendingRequests] = useState<PendingRequestDTO[]>([]);
|
|
const [requestsLoading, setRequestsLoading] = useState(false);
|
|
const [seasonId, setSeasonId] = useState<string | undefined>(propSeasonId);
|
|
|
|
// Load season ID if not provided
|
|
useEffect(() => {
|
|
async function loadSeasonId() {
|
|
if (propSeasonId) {
|
|
setSeasonId(propSeasonId);
|
|
return;
|
|
}
|
|
try {
|
|
const seasonRepo = getSeasonRepository();
|
|
const seasons = await seasonRepo.findByLeagueId(leagueId);
|
|
const activeSeason = seasons.find(s => s.status === 'active') ?? seasons[0];
|
|
if (activeSeason) {
|
|
setSeasonId(activeSeason.id);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load season:', err);
|
|
}
|
|
}
|
|
loadSeasonId();
|
|
}, [leagueId, propSeasonId]);
|
|
|
|
// Load pending sponsorship requests
|
|
const loadPendingRequests = useCallback(async () => {
|
|
if (!seasonId) return;
|
|
|
|
setRequestsLoading(true);
|
|
try {
|
|
const useCase = getGetPendingSponsorshipRequestsUseCase();
|
|
const presenter = new PendingSponsorshipRequestsPresenter();
|
|
|
|
await useCase.execute(
|
|
{
|
|
entityType: 'season',
|
|
entityId: seasonId,
|
|
},
|
|
presenter,
|
|
);
|
|
|
|
const viewModel = presenter.getViewModel();
|
|
setPendingRequests(viewModel?.requests ?? []);
|
|
} catch (err) {
|
|
console.error('Failed to load pending requests:', err);
|
|
} finally {
|
|
setRequestsLoading(false);
|
|
}
|
|
}, [seasonId]);
|
|
|
|
useEffect(() => {
|
|
loadPendingRequests();
|
|
}, [loadPendingRequests]);
|
|
|
|
const handleAcceptRequest = async (requestId: string) => {
|
|
try {
|
|
const useCase = getAcceptSponsorshipRequestUseCase();
|
|
await useCase.execute({
|
|
requestId,
|
|
respondedBy: currentDriverId,
|
|
});
|
|
await loadPendingRequests();
|
|
} catch (err) {
|
|
console.error('Failed to accept request:', err);
|
|
alert(err instanceof Error ? err.message : 'Failed to accept request');
|
|
}
|
|
};
|
|
|
|
const handleRejectRequest = async (requestId: string, reason?: string) => {
|
|
try {
|
|
const useCase = getRejectSponsorshipRequestUseCase();
|
|
await useCase.execute({
|
|
requestId,
|
|
respondedBy: currentDriverId,
|
|
...(reason ? { reason } : {}),
|
|
});
|
|
await loadPendingRequests();
|
|
} catch (err) {
|
|
console.error('Failed to reject request:', err);
|
|
alert(err instanceof Error ? err.message : 'Failed to reject request');
|
|
}
|
|
};
|
|
|
|
const handleEditPrice = (index: number) => {
|
|
const slot = slots[index];
|
|
if (!slot) return;
|
|
setEditingIndex(index);
|
|
setTempPrice(slot.price.toString());
|
|
};
|
|
|
|
const handleSavePrice = (index: number) => {
|
|
const price = parseFloat(tempPrice);
|
|
if (!isNaN(price) && price > 0) {
|
|
const updated = [...slots];
|
|
const slot = updated[index];
|
|
if (slot) {
|
|
slot.price = price;
|
|
setSlots(updated);
|
|
}
|
|
}
|
|
setEditingIndex(null);
|
|
setTempPrice('');
|
|
};
|
|
|
|
const handleCancelEdit = () => {
|
|
setEditingIndex(null);
|
|
setTempPrice('');
|
|
};
|
|
|
|
const totalRevenue = slots.reduce((sum, slot) =>
|
|
slot.isOccupied ? sum + slot.price : sum, 0
|
|
);
|
|
const platformFee = totalRevenue * 0.10;
|
|
const netRevenue = totalRevenue - platformFee;
|
|
|
|
const availableSlots = slots.filter(s => !s.isOccupied).length;
|
|
const occupiedSlots = slots.filter(s => s.isOccupied).length;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-semibold text-white">Sponsorships</h3>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
Define pricing for main and secondary sponsor slots
|
|
</p>
|
|
</div>
|
|
{!readOnly && (
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/30">
|
|
<DollarSign className="w-4 h-4 text-primary-blue" />
|
|
<span className="text-xs font-medium text-primary-blue">
|
|
{availableSlots} slot{availableSlots !== 1 ? 's' : ''} available
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Revenue Summary */}
|
|
{totalRevenue > 0 && (
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
|
<div className="text-xs text-gray-400 mb-1">Total Revenue</div>
|
|
<div className="text-xl font-bold text-white">
|
|
${totalRevenue.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
|
<div className="text-xs text-gray-400 mb-1">Platform Fee (10%)</div>
|
|
<div className="text-xl font-bold text-warning-amber">
|
|
-${platformFee.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg bg-iron-gray/50 border border-charcoal-outline p-4">
|
|
<div className="text-xs text-gray-400 mb-1">Net Revenue</div>
|
|
<div className="text-xl font-bold text-performance-green">
|
|
${netRevenue.toFixed(2)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Sponsorship Slots */}
|
|
<div className="space-y-3">
|
|
{slots.map((slot, index) => {
|
|
const isEditing = editingIndex === index;
|
|
const Icon = slot.tier === 'main' ? Star : Award;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4"
|
|
>
|
|
<div className="flex items-center justify-between gap-4">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<div className={`flex h-10 w-10 items-center justify-center rounded-lg ${
|
|
slot.tier === 'main'
|
|
? 'bg-primary-blue/10'
|
|
: 'bg-gray-500/10'
|
|
}`}>
|
|
<Icon className={`w-5 h-5 ${
|
|
slot.tier === 'main'
|
|
? 'text-primary-blue'
|
|
: 'text-gray-400'
|
|
}`} />
|
|
</div>
|
|
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="text-sm font-semibold text-white">
|
|
{slot.tier === 'main' ? 'Main Sponsor' : 'Secondary Sponsor'}
|
|
</h4>
|
|
{slot.isOccupied && (
|
|
<span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
|
|
Occupied
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
{slot.tier === 'main'
|
|
? 'Big livery slot • League page logo • Name in league title'
|
|
: 'Small livery slot • League page logo'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{isEditing ? (
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
value={tempPrice}
|
|
onChange={(e) => setTempPrice(e.target.value)}
|
|
placeholder="Price"
|
|
className="w-32"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => handleSavePrice(index)}
|
|
className="px-3 py-1"
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={handleCancelEdit}
|
|
className="px-3 py-1"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="text-right">
|
|
<div className="text-lg font-bold text-white">
|
|
${slot.price.toFixed(2)}
|
|
</div>
|
|
<div className="text-xs text-gray-500">per season</div>
|
|
</div>
|
|
{!readOnly && !slot.isOccupied && (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => handleEditPrice(index)}
|
|
className="px-3 py-1"
|
|
>
|
|
Edit Price
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Pending Sponsorship Requests */}
|
|
{!readOnly && (pendingRequests.length > 0 || requestsLoading) && (
|
|
<div className="mt-8 pt-6 border-t border-charcoal-outline">
|
|
<PendingSponsorshipRequests
|
|
entityType="season"
|
|
entityId={seasonId || ''}
|
|
entityName="this league"
|
|
requests={pendingRequests}
|
|
onAccept={handleAcceptRequest}
|
|
onReject={handleRejectRequest}
|
|
isLoading={requestsLoading}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Alpha Notice */}
|
|
<div className="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> Sponsorship management is demonstration-only.
|
|
In production, sponsors can browse leagues, select slots, and complete payment integration.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |