293 lines
10 KiB
TypeScript
293 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Input } from '@/ui/Input';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { StatBox } from '@/ui/StatBox';
|
|
import { Text } from '@/ui/Text';
|
|
import { Award, DollarSign, Star, X } from 'lucide-react';
|
|
import { useState } from 'react';
|
|
import { PendingSponsorshipRequests } from '../sponsors/PendingSponsorshipRequests';
|
|
|
|
import { useLeagueSeasons } from "@/hooks/league/useLeagueSeasons";
|
|
import { useSponsorshipRequests } from "@/hooks/league/useSponsorshipRequests";
|
|
import { useEffectiveDriverId } from "@/hooks/useEffectiveDriverId";
|
|
import { useInject } from '@/lib/di/hooks/useInject';
|
|
import { SPONSOR_SERVICE_TOKEN } from '@/lib/di/tokens';
|
|
|
|
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 sponsorshipService = useInject(SPONSOR_SERVICE_TOKEN);
|
|
|
|
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>('');
|
|
|
|
// Load season ID if not provided
|
|
const { data: seasonsResult } = useLeagueSeasons(leagueId);
|
|
const seasons = seasonsResult?.isOk() ? seasonsResult.unwrap() : [];
|
|
const activeSeason = seasons.find((s: any) => s.status === 'active') ?? seasons[0];
|
|
const seasonId = propSeasonId || activeSeason?.seasonId;
|
|
|
|
// Load pending sponsorship requests
|
|
const { data: pendingRequestsData, isLoading: requestsLoading, refetch: refetchRequests } = useSponsorshipRequests('season', seasonId || '');
|
|
const pendingRequests = pendingRequestsData?.requests || [];
|
|
|
|
const handleAcceptRequest = async (requestId: string) => {
|
|
if (!currentDriverId) return;
|
|
|
|
try {
|
|
await (sponsorshipService as any).acceptSponsorshipRequest(requestId, currentDriverId);
|
|
await refetchRequests();
|
|
} 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) => {
|
|
if (!currentDriverId) return;
|
|
|
|
try {
|
|
await (sponsorshipService as any).rejectSponsorshipRequest(requestId, currentDriverId, reason);
|
|
await refetchRequests();
|
|
} 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;
|
|
|
|
return (
|
|
<Stack gap={6}>
|
|
{/* Header */}
|
|
<Stack display="flex" alignItems="center" justifyContent="between">
|
|
<Stack>
|
|
<Heading level={3}>Sponsorships</Heading>
|
|
<Text size="sm" color="text-gray-400" mt={1} block>
|
|
Define pricing for sponsor slots in this league. Sponsors pay per season.
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" mt={1} block>
|
|
These sponsors are attached to seasons in this league, so you can change partners from season to season.
|
|
</Text>
|
|
</Stack>
|
|
{!readOnly && (
|
|
<Stack display="flex" alignItems="center" gap={2} px={3} py={1.5} rounded="full" bg="bg-primary-blue/10" border borderColor="border-primary-blue/30">
|
|
<Icon icon={DollarSign} size={4} color="var(--primary-blue)" />
|
|
<Text size="xs" weight="medium" color="text-primary-blue">
|
|
{availableSlots} slot{availableSlots !== 1 ? 's' : ''} available
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
|
|
{/* Revenue Summary */}
|
|
{totalRevenue > 0 && (
|
|
<Stack display="grid" gridCols={3} gap={4}>
|
|
<StatBox
|
|
icon={DollarSign}
|
|
label="Total Revenue"
|
|
value={`$${totalRevenue.toFixed(2)}`}
|
|
color="var(--primary-blue)"
|
|
/>
|
|
<StatBox
|
|
icon={DollarSign}
|
|
label="Platform Fee (10%)"
|
|
value={`-$${platformFee.toFixed(2)}`}
|
|
color="var(--warning-amber)"
|
|
/>
|
|
<StatBox
|
|
icon={DollarSign}
|
|
label="Net Revenue"
|
|
value={`$${netRevenue.toFixed(2)}`}
|
|
color="var(--performance-green)"
|
|
/>
|
|
</Stack>
|
|
)}
|
|
|
|
{/* Sponsorship Slots */}
|
|
<Stack gap={3}>
|
|
{slots.map((slot, index) => {
|
|
const isEditing = editingIndex === index;
|
|
const IconComp = slot.tier === 'main' ? Star : Award;
|
|
|
|
return (
|
|
<Stack
|
|
key={index}
|
|
rounded="lg"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
bg="bg-deep-graphite/70"
|
|
p={4}
|
|
>
|
|
<Stack display="flex" alignItems="center" justifyContent="between" gap={4}>
|
|
<Stack display="flex" alignItems="center" gap={3} flexGrow={1}>
|
|
<Stack
|
|
display="flex"
|
|
h="10"
|
|
w="10"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="lg"
|
|
bg={slot.tier === 'main' ? 'bg-primary-blue/10' : 'bg-gray-500/10'}
|
|
>
|
|
<Icon icon={IconComp} size={5} color={slot.tier === 'main' ? 'var(--primary-blue)' : 'var(--gray-400)'} />
|
|
</Stack>
|
|
|
|
<Stack flexGrow={1}>
|
|
<Stack display="flex" alignItems="center" gap={2}>
|
|
<Heading level={4}>
|
|
{slot.tier === 'main' ? 'Main Sponsor' : 'Secondary Sponsor'}
|
|
</Heading>
|
|
{slot.isOccupied && (
|
|
<Badge variant="success">
|
|
Occupied
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
<Text size="xs" color="text-gray-500" mt={0.5} block>
|
|
{slot.tier === 'main'
|
|
? 'Big livery slot • League page logo • Name in league title'
|
|
: 'Small livery slot • League page logo'}
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack display="flex" alignItems="center" gap={3}>
|
|
{isEditing ? (
|
|
<Stack display="flex" alignItems="center" gap={2}>
|
|
<Input
|
|
type="number"
|
|
value={tempPrice}
|
|
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTempPrice(e.target.value)}
|
|
placeholder="Price"
|
|
// eslint-disable-next-line gridpilot-rules/component-classification
|
|
className="w-32"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => handleSavePrice(index)}
|
|
size="sm"
|
|
>
|
|
Save
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
onClick={handleCancelEdit}
|
|
size="sm"
|
|
>
|
|
<Icon icon={X} size={4} />
|
|
</Button>
|
|
</Stack>
|
|
) : (
|
|
<>
|
|
<Stack textAlign="right">
|
|
<Text size="lg" weight="bold" color="text-white" block>
|
|
${slot.price.toFixed(2)}
|
|
</Text>
|
|
<Text size="xs" color="text-gray-500" block>per season</Text>
|
|
</Stack>
|
|
{!readOnly && !slot.isOccupied && (
|
|
<Button
|
|
variant="secondary"
|
|
onClick={() => handleEditPrice(index)}
|
|
size="sm"
|
|
>
|
|
Edit Price
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
|
|
{/* Pending Sponsorship Requests */}
|
|
{!readOnly && (pendingRequests.length > 0 || requestsLoading) && (
|
|
<Stack mt={8} pt={6} borderTop borderColor="border-charcoal-outline">
|
|
<PendingSponsorshipRequests
|
|
entityType="season"
|
|
entityId={seasonId || ''}
|
|
entityName="this league"
|
|
requests={pendingRequests}
|
|
onAccept={handleAcceptRequest}
|
|
onReject={handleRejectRequest}
|
|
isLoading={requestsLoading}
|
|
/>
|
|
</Stack>
|
|
)}
|
|
|
|
{/* Alpha Notice */}
|
|
<Stack rounded="lg" bg="bg-warning-amber/10" border borderColor="border-warning-amber/30" p={4}>
|
|
<Text size="xs" color="text-gray-400" block>
|
|
<Text weight="bold" color="text-warning-amber">Alpha Note:</Text> Sponsorship management is demonstration-only.
|
|
In production, sponsors can browse leagues, select slots, and complete payment integration.
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|