website refactor
This commit is contained in:
@@ -1,251 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { StatCard } from '@/ui/StatCard';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { SectionHeader } from '@/ui/SectionHeader';
|
||||
import { InfoBanner } from '@/ui/InfoBanner';
|
||||
import { PageHeader } from '@/ui/PageHeader';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { siteConfig } from '@/lib/siteConfig';
|
||||
import { useSponsorBilling } from "@/hooks/sponsor/useSponsorBilling";
|
||||
import {
|
||||
CreditCard,
|
||||
DollarSign,
|
||||
Calendar,
|
||||
Download,
|
||||
Plus,
|
||||
Check,
|
||||
AlertTriangle,
|
||||
FileText,
|
||||
TrendingUp,
|
||||
Receipt,
|
||||
Building2,
|
||||
Wallet,
|
||||
Clock,
|
||||
ChevronRight,
|
||||
Info,
|
||||
ExternalLink,
|
||||
Percent,
|
||||
Loader2
|
||||
} from 'lucide-react';
|
||||
import type { PaymentMethodDTO, InvoiceDTO } from '@/lib/types/tbd/SponsorBillingDTO';
|
||||
|
||||
// ============================================================================
|
||||
// Components
|
||||
// ============================================================================
|
||||
|
||||
function PaymentMethodCardComponent({
|
||||
method,
|
||||
onSetDefault,
|
||||
onRemove
|
||||
}: {
|
||||
method: PaymentMethodDTO;
|
||||
onSetDefault: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const getIcon = () => {
|
||||
if (method.type === 'sepa') return Building2;
|
||||
return CreditCard;
|
||||
};
|
||||
|
||||
const MethodIcon = getIcon();
|
||||
|
||||
const displayLabel = method.type === 'sepa' && method.bankName
|
||||
? `${method.bankName} •••• ${method.last4}`
|
||||
: `${method.brand} •••• ${method.last4}`;
|
||||
|
||||
const expiryDisplay = method.expiryMonth && method.expiryYear
|
||||
? `${method.expiryMonth}/${method.expiryYear}`
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
|
||||
p={4}
|
||||
rounded="xl"
|
||||
border
|
||||
borderColor={method.isDefault ? 'border-primary-blue/50' : 'border-charcoal-outline'}
|
||||
bg={method.isDefault ? 'bg-gradient-to-r from-primary-blue/10 to-transparent' : 'bg-iron-gray/30'}
|
||||
shadow={method.isDefault ? '0_0_20px_rgba(25,140,255,0.1)' : undefined}
|
||||
hoverBorderColor={!method.isDefault ? 'border-charcoal-outline/80' : undefined}
|
||||
transition-all
|
||||
>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box
|
||||
w="12"
|
||||
h="12"
|
||||
rounded="xl"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg={method.isDefault ? 'bg-primary-blue/20' : 'bg-iron-gray'}
|
||||
>
|
||||
<Icon icon={MethodIcon} size={6} color={method.isDefault ? 'text-primary-blue' : 'text-gray-400'} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Text weight="medium" color="text-white">{displayLabel}</Text>
|
||||
{method.isDefault && (
|
||||
<Box px={2} py={0.5} rounded="full" bg="bg-primary-blue/20">
|
||||
<Text size="xs" color="text-primary-blue" weight="medium">
|
||||
Default
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
{expiryDisplay && (
|
||||
<Text size="sm" color="text-gray-500" block>
|
||||
Expires {expiryDisplay}
|
||||
</Text>
|
||||
)}
|
||||
{method.type === 'sepa' && (
|
||||
<Text size="sm" color="text-gray-500" block>SEPA Direct Debit</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
{!method.isDefault && (
|
||||
<Button variant="secondary" onClick={onSetDefault} size="sm">
|
||||
Set Default
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="secondary" onClick={onRemove} size="sm" color="text-gray-400" hoverTextColor="text-racing-red">
|
||||
Remove
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function InvoiceRowComponent({ invoice, index }: { invoice: InvoiceDTO; index: number }) {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
|
||||
const statusConfig = {
|
||||
paid: {
|
||||
icon: Check,
|
||||
label: 'Paid',
|
||||
color: 'text-performance-green',
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30'
|
||||
},
|
||||
pending: {
|
||||
icon: Clock,
|
||||
label: 'Pending',
|
||||
color: 'text-warning-amber',
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30'
|
||||
},
|
||||
overdue: {
|
||||
icon: AlertTriangle,
|
||||
label: 'Overdue',
|
||||
color: 'text-racing-red',
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30'
|
||||
},
|
||||
failed: {
|
||||
icon: AlertTriangle,
|
||||
label: 'Failed',
|
||||
color: 'text-racing-red',
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30'
|
||||
},
|
||||
};
|
||||
|
||||
const typeLabels = {
|
||||
league: 'League',
|
||||
team: 'Team',
|
||||
driver: 'Driver',
|
||||
race: 'Race',
|
||||
platform: 'Platform',
|
||||
};
|
||||
|
||||
const status = statusConfig[invoice.status as keyof typeof statusConfig];
|
||||
const StatusIcon = status.icon;
|
||||
|
||||
return (
|
||||
<Box
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: shouldReduceMotion ? 0 : 0.2, delay: shouldReduceMotion ? 0 : index * 0.05 }}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="between"
|
||||
p={4}
|
||||
borderBottom
|
||||
borderColor="border-charcoal-outline/50"
|
||||
hoverBg="bg-iron-gray/20"
|
||||
transition-colors
|
||||
group
|
||||
>
|
||||
<Box display="flex" alignItems="center" gap={4} flexGrow={1}>
|
||||
<Box w="10" h="10" rounded="lg" bg="bg-iron-gray" display="flex" alignItems="center" justifyContent="center">
|
||||
<Icon icon={Receipt} size={5} color="text-gray-400" />
|
||||
</Box>
|
||||
<Box flexGrow={1} minWidth="0">
|
||||
<Box display="flex" alignItems="center" gap={2} mb={0.5}>
|
||||
<Text weight="medium" color="text-white" truncate>{invoice.description}</Text>
|
||||
<Box px={2} py={0.5} rounded bg="bg-iron-gray">
|
||||
<Text size="xs" color="text-gray-400">
|
||||
{typeLabels[invoice.sponsorshipType as keyof typeof typeLabels]}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" gap={3}>
|
||||
<Text size="sm" color="text-gray-500">{invoice.invoiceNumber}</Text>
|
||||
<Text size="sm" color="text-gray-500">•</Text>
|
||||
<Text size="sm" color="text-gray-500">
|
||||
{new globalThis.Date(invoice.date).toLocaleDateString()}
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" gap={6}>
|
||||
<Box textAlign="right">
|
||||
<Text weight="semibold" color="text-white" block>
|
||||
${invoice.totalAmount.toFixed(2)}
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-500" block>
|
||||
incl. ${invoice.vatAmount.toFixed(2)} VAT
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box display="flex" alignItems="center" gap={1.5} px={2.5} py={1} rounded="full" bg={status.bg} border borderColor={status.border}>
|
||||
<Icon icon={StatusIcon} size={3} color={status.color} />
|
||||
<Text size="xs" weight="medium" color={status.color}>{status.label}</Text>
|
||||
</Box>
|
||||
|
||||
<Button variant="secondary" size="sm" opacity={0} groupHoverTextColor="opacity-100" transition-opacity icon={<Icon icon={Download} size={3} />}>
|
||||
PDF
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Main Component
|
||||
// ============================================================================
|
||||
import { SponsorBillingTemplate } from "@/templates/SponsorBillingTemplate";
|
||||
import { Box } from "@/ui/Box";
|
||||
import { Text } from "@/ui/Text";
|
||||
import { Button } from "@/ui/Button";
|
||||
import { DollarSign, AlertTriangle, Calendar, TrendingUp } from "lucide-react";
|
||||
|
||||
export default function SponsorBillingPage() {
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const [showAllInvoices, setShowAllInvoices] = useState(false);
|
||||
|
||||
const { data: billingData, isLoading, error, retry } = useSponsorBilling('demo-sponsor-1');
|
||||
|
||||
if (isLoading) {
|
||||
@@ -274,228 +36,68 @@ export default function SponsorBillingPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const data = billingData;
|
||||
|
||||
const handleSetDefault = (methodId: string) => {
|
||||
// In a real app, this would call an API
|
||||
console.log('Setting default payment method:', methodId);
|
||||
};
|
||||
|
||||
const handleRemoveMethod = (methodId: string) => {
|
||||
if (window.confirm('Remove this payment method?')) {
|
||||
// In a real app, this would call an API
|
||||
console.log('Removing payment method:', methodId);
|
||||
}
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: shouldReduceMotion ? 0 : 0.1,
|
||||
},
|
||||
},
|
||||
const handleDownloadInvoice = (invoiceId: string) => {
|
||||
console.log('Downloading invoice:', invoiceId);
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
const billingStats = [
|
||||
{
|
||||
label: 'Total Spent',
|
||||
value: `$${billingData.stats.totalSpent.toFixed(2)}`,
|
||||
subValue: 'All time',
|
||||
icon: DollarSign,
|
||||
variant: 'success' as const,
|
||||
},
|
||||
{
|
||||
label: 'Pending Payments',
|
||||
value: `$${billingData.stats.pendingAmount.toFixed(2)}`,
|
||||
subValue: `${billingData.invoices.filter(i => i.status === 'pending' || i.status === 'overdue').length} invoices`,
|
||||
icon: AlertTriangle,
|
||||
variant: (billingData.stats.pendingAmount > 0 ? 'warning' : 'default') as 'warning' | 'default',
|
||||
},
|
||||
{
|
||||
label: 'Next Payment',
|
||||
value: new Date(billingData.stats.nextPaymentDate).toLocaleDateString(),
|
||||
subValue: `$${billingData.stats.nextPaymentAmount.toFixed(2)}`,
|
||||
icon: Calendar,
|
||||
variant: 'info' as const,
|
||||
},
|
||||
{
|
||||
label: 'Monthly Average',
|
||||
value: `$${billingData.stats.averageMonthlySpend.toFixed(2)}`,
|
||||
subValue: 'Last 6 months',
|
||||
icon: TrendingUp,
|
||||
variant: 'default' as const,
|
||||
},
|
||||
];
|
||||
|
||||
const transactions = billingData.invoices.map(inv => ({
|
||||
id: inv.id,
|
||||
date: inv.date,
|
||||
description: inv.description,
|
||||
amount: inv.totalAmount,
|
||||
status: inv.status as any,
|
||||
invoiceNumber: inv.invoiceNumber,
|
||||
type: inv.sponsorshipType,
|
||||
}));
|
||||
|
||||
return (
|
||||
<Box
|
||||
maxWidth="5xl"
|
||||
mx="auto"
|
||||
py={8}
|
||||
px={4}
|
||||
as={motion.div}
|
||||
// @ts-ignore
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{/* Header */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<PageHeader
|
||||
icon={Wallet}
|
||||
title="Billing & Payments"
|
||||
description="Manage payment methods, view invoices, and track your sponsorship spending"
|
||||
iconGradient="from-warning-amber/20 to-warning-amber/5"
|
||||
iconBorder="border-warning-amber/30"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<Box as={motion.div} variants={itemVariants} display="grid" gridCols={{ base: 1, md: 2, lg: 4 }} gap={4} mb={8}>
|
||||
<StatCard
|
||||
icon={DollarSign}
|
||||
label="Total Spent"
|
||||
value={`$${data.stats.totalSpent.toFixed(2)}`}
|
||||
subValue="All time"
|
||||
variant="green"
|
||||
/>
|
||||
<StatCard
|
||||
icon={AlertTriangle}
|
||||
label="Pending Payments"
|
||||
value={`$${data.stats.pendingAmount.toFixed(2)}`}
|
||||
subValue={`${data.invoices.filter((i: { status: string }) => i.status === 'pending' || i.status === 'overdue').length} invoices`}
|
||||
variant="orange"
|
||||
/>
|
||||
<StatCard
|
||||
icon={Calendar}
|
||||
label="Next Payment"
|
||||
value={new globalThis.Date(data.stats.nextPaymentDate).toLocaleDateString()}
|
||||
subValue={`$${data.stats.nextPaymentAmount.toFixed(2)}`}
|
||||
variant="blue"
|
||||
/>
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="Monthly Average"
|
||||
value={`$${data.stats.averageMonthlySpend.toFixed(2)}`}
|
||||
subValue="Last 6 months"
|
||||
variant="blue"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Payment Methods */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Card mb={8} overflow="hidden">
|
||||
<SectionHeader
|
||||
icon={CreditCard}
|
||||
title="Payment Methods"
|
||||
action={
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={Plus} size={4} />}>
|
||||
Add Payment Method
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Box p={5} display="flex" flexDirection="col" gap={3}>
|
||||
{data.paymentMethods.map((method: PaymentMethodDTO) => (
|
||||
<PaymentMethodCardComponent
|
||||
key={method.id}
|
||||
method={method}
|
||||
onSetDefault={() => handleSetDefault(method.id)}
|
||||
onRemove={() => handleRemoveMethod(method.id)}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Box px={5} pb={5}>
|
||||
<InfoBanner type="info">
|
||||
<Text block mb={1}>We support Visa, Mastercard, American Express, and SEPA Direct Debit.</Text>
|
||||
<Text block>All payment information is securely processed and stored by our payment provider.</Text>
|
||||
</InfoBanner>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Billing History */}
|
||||
<Box as={motion.div} variants={itemVariants}>
|
||||
<Card mb={8} overflow="hidden">
|
||||
<SectionHeader
|
||||
icon={FileText}
|
||||
title="Billing History"
|
||||
color="text-warning-amber"
|
||||
action={
|
||||
<Button variant="secondary" size="sm" icon={<Icon icon={Download} size={4} />}>
|
||||
Export All
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Box>
|
||||
{data.invoices.slice(0, showAllInvoices ? data.invoices.length : 4).map((invoice: InvoiceDTO, index: number) => (
|
||||
<InvoiceRowComponent key={invoice.id} invoice={invoice} index={index} />
|
||||
))}
|
||||
</Box>
|
||||
{data.invoices.length > 4 && (
|
||||
<Box p={4} borderTop borderColor="border-charcoal-outline">
|
||||
<Button
|
||||
variant="secondary"
|
||||
fullWidth
|
||||
onClick={() => setShowAllInvoices(!showAllInvoices)}
|
||||
icon={<Icon icon={ChevronRight} size={4} className={showAllInvoices ? 'rotate-90' : ''} />}
|
||||
flexDirection="row-reverse"
|
||||
>
|
||||
{showAllInvoices ? 'Show Less' : `View All ${data.invoices.length} Invoices`}
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Platform Fee & VAT Information */}
|
||||
<Box as={motion.div} variants={itemVariants} display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
|
||||
{/* Platform Fee */}
|
||||
<Card overflow="hidden">
|
||||
<Box p={5} borderBottom borderColor="border-charcoal-outline" bg="bg-gradient-to-r from-iron-gray/30 to-transparent">
|
||||
<Heading level={3} fontSize="base" weight="semibold" color="text-white" icon={<Box p={2} rounded="lg" bg="bg-iron-gray/50"><Icon icon={Percent} size={4} color="text-primary-blue" /></Box>}>
|
||||
Platform Fee
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box p={5}>
|
||||
<Text size="3xl" weight="bold" color="text-white" block mb={2}>
|
||||
{siteConfig.fees.platformFeePercent}%
|
||||
</Text>
|
||||
<Text size="sm" color="text-gray-400" block mb={4}>
|
||||
{siteConfig.fees.description}
|
||||
</Text>
|
||||
<Box display="flex" flexDirection="col" gap={1}>
|
||||
<Text size="xs" color="text-gray-500" block>• Applied to all sponsorship payments</Text>
|
||||
<Text size="xs" color="text-gray-500" block>• Covers platform maintenance and analytics</Text>
|
||||
<Text size="xs" color="text-gray-500" block>• Ensures quality sponsorship placements</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
|
||||
{/* VAT Information */}
|
||||
<Card overflow="hidden">
|
||||
<Box p={5} borderBottom borderColor="border-charcoal-outline" bg="bg-gradient-to-r from-iron-gray/30 to-transparent">
|
||||
<Heading level={3} fontSize="base" weight="semibold" color="text-white" icon={<Box p={2} rounded="lg" bg="bg-iron-gray/50"><Icon icon={Receipt} size={4} color="text-performance-green" /></Box>}>
|
||||
VAT Information
|
||||
</Heading>
|
||||
</Box>
|
||||
<Box p={5}>
|
||||
<Text size="sm" color="text-gray-400" block mb={4}>
|
||||
{siteConfig.vat.notice}
|
||||
</Text>
|
||||
<Box display="flex" flexDirection="col" gap={3}>
|
||||
<Box display="flex" justifyContent="between" alignItems="center" py={2} borderBottom borderColor="border-charcoal-outline/50">
|
||||
<Text color="text-gray-500">Standard VAT Rate</Text>
|
||||
<Text color="text-white" weight="medium">{siteConfig.vat.standardRate}%</Text>
|
||||
</Box>
|
||||
<Box display="flex" justifyContent="between" alignItems="center" py={2}>
|
||||
<Text color="text-gray-500">B2B Reverse Charge</Text>
|
||||
<Text color="text-performance-green" weight="medium">Available</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Text size="xs" color="text-gray-500" block mt={4}>
|
||||
Enter your VAT ID in Settings to enable reverse charge for B2B transactions.
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
|
||||
{/* Billing Support */}
|
||||
<Box as={motion.div} variants={itemVariants} mt={6}>
|
||||
<Card p={5}>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Box p={3} rounded="xl" bg="bg-iron-gray">
|
||||
<Icon icon={Info} size={5} color="text-gray-400" />
|
||||
</Box>
|
||||
<Box>
|
||||
<Heading level={3} fontSize="base" weight="medium" color="text-white">Need help with billing?</Heading>
|
||||
<Text size="sm" color="text-gray-500" block>
|
||||
Contact our billing support for questions about invoices, payments, or refunds.
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Button variant="secondary" icon={<Icon icon={ExternalLink} size={4} />}>
|
||||
Contact Support
|
||||
</Button>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
<SponsorBillingTemplate
|
||||
viewData={billingData}
|
||||
billingStats={billingStats}
|
||||
transactions={transactions}
|
||||
onSetDefaultPaymentMethod={handleSetDefault}
|
||||
onDownloadInvoice={handleDownloadInvoice}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user