website refactor

apps/website/components/sponsors/PendingSponsorshipRequests.tsx

@@ -1,21 +1,26 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import Card from '@/ui/Card';
-import Button from '@/ui/Button';
-import { Clock, Check, X, DollarSign, MessageCircle, User, Building } from 'lucide-react';
+import React, { useState } from 'react';
+import { Building } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { Badge } from '@/ui/Badge';
+import { SponsorshipRequestItem } from '@/ui/SponsorshipRequestItem';
 
 export interface PendingRequestDTO {
   id: string;
   sponsorId: string;
   sponsorName: string;
   sponsorLogo?: string | undefined;
-  tier: 'main' | 'secondary';
+  tier: string;
   offeredAmount: number;
   currency: string;
   formattedAmount: string;
   message?: string | undefined;
-  createdAt: Date;
+  createdAt: string | Date;
   platformFee: number;
   netAmount: number;
 }
@@ -30,10 +35,8 @@ interface PendingSponsorshipRequestsProps {
   isLoading?: boolean;
 }
 
-export default function PendingSponsorshipRequests({
+export function PendingSponsorshipRequests({
   entityType,
-  entityId,
-  entityName,
   requests,
   onAccept,
   onReject,
@@ -65,177 +68,67 @@ export default function PendingSponsorshipRequests({
 
   if (isLoading) {
     return (
-      <div className="text-center py-8 text-gray-400">
-        <div className="animate-pulse">Loading sponsorship requests...</div>
-      </div>
+      <Box textAlign="center" py={8}>
+        <Text color="text-gray-400" animate="pulse">Loading sponsorship requests...</Text>
+      </Box>
     );
   }
 
   if (requests.length === 0) {
     return (
-      <div className="text-center py-8">
-        <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-iron-gray/50 flex items-center justify-center">
-          <Building className="w-6 h-6 text-gray-500" />
-        </div>
-        <p className="text-gray-400 text-sm">No pending sponsorship requests</p>
-        <p className="text-gray-500 text-xs mt-1">
+      <Box textAlign="center" py={8}>
+        <Box w="12" h="12" mx="auto" mb={3} rounded="full" bg="bg-iron-gray/50" display="flex" alignItems="center" justifyContent="center">
+          <Icon icon={Building} size={6} color="rgb(115, 115, 115)" />
+        </Box>
+        <Text color="text-gray-400" size="sm" block>No pending sponsorship requests</Text>
+        <Text color="text-gray-500" size="xs" mt={1} block>
           When sponsors apply to sponsor this {entityType}, their requests will appear here. Sponsorships are attached to seasons, so you can change partners from season to season.
-        </p>
-      </div>
+        </Text>
+      </Box>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-white">Sponsorship Requests</h3>
-        <span className="px-2 py-1 text-xs bg-primary-blue/20 text-primary-blue rounded-full">
+    <Stack gap={4}>
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Heading level={3}>Sponsorship Requests</Heading>
+        <Badge variant="primary">
           {requests.length} pending
-        </span>
-      </div>
+        </Badge>
+      </Box>
 
-      <div className="space-y-3">
-        {requests.map((request) => {
-          const isProcessing = processingId === request.id;
-          const isRejecting = rejectModalId === request.id;
+      <Stack gap={3}>
+        {requests.map((request) => (
+          <SponsorshipRequestItem
+            key={request.id}
+            sponsorName={request.sponsorName}
+            sponsorLogo={request.sponsorLogo}
+            tier={request.tier}
+            formattedAmount={request.formattedAmount}
+            netAmount={request.netAmount}
+            createdAt={typeof request.createdAt === 'string' ? new Date(request.createdAt) : request.createdAt}
+            message={request.message}
+            isProcessing={processingId === request.id}
+            isRejecting={rejectModalId === request.id}
+            rejectReason={rejectReason}
+            onAccept={() => handleAccept(request.id)}
+            onRejectClick={() => setRejectModalId(request.id)}
+            onRejectConfirm={() => handleReject(request.id)}
+            onRejectCancel={() => {
+              setRejectModalId(null);
+              setRejectReason('');
+            }}
+            onRejectReasonChange={setRejectReason}
+          />
+        ))}
+      </Stack>
 
-          return (
-            <div
-              key={request.id}
-              className="rounded-lg border border-charcoal-outline bg-deep-graphite/70 p-4"
-            >
-              {/* Reject Modal */}
-              {isRejecting && (
-                <div className="mb-4 p-4 rounded-lg bg-iron-gray/50 border border-red-500/30">
-                  <h4 className="text-sm font-medium text-white mb-2">
-                    Reject sponsorship from {request.sponsorName}?
-                  </h4>
-                  <textarea
-                    value={rejectReason}
-                    onChange={(e) => setRejectReason(e.target.value)}
-                    placeholder="Optional: Provide a reason for rejection..."
-                    rows={2}
-                    className="w-full rounded-lg border border-charcoal-outline bg-iron-gray/80 px-3 py-2 text-sm text-white placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-red-500 mb-3"
-                  />
-                  <div className="flex gap-2">
-                    <Button
-                      variant="secondary"
-                      onClick={() => {
-                        setRejectModalId(null);
-                        setRejectReason('');
-                      }}
-                      className="px-3 py-1 text-xs"
-                    >
-                      Cancel
-                    </Button>
-                    <Button
-                      variant="primary"
-                      onClick={() => handleReject(request.id)}
-                      disabled={isProcessing}
-                      className="px-3 py-1 text-xs bg-red-600 hover:bg-red-700"
-                    >
-                      {isProcessing ? 'Rejecting...' : 'Confirm Reject'}
-                    </Button>
-                  </div>
-                </div>
-              )}
-
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex items-start gap-3 flex-1">
-                  {/* Sponsor Logo */}
-                  <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-iron-gray/50 shrink-0">
-                    {request.sponsorLogo ? (
-                      <img
-                        src={request.sponsorLogo}
-                        alt={request.sponsorName}
-                        className="w-8 h-8 object-contain"
-                      />
-                    ) : (
-                      <Building className="w-6 h-6 text-gray-400" />
-                    )}
-                  </div>
-
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-1">
-                      <h4 className="text-sm font-semibold text-white truncate">
-                        {request.sponsorName}
-                      </h4>
-                      <span
-                        className={`px-2 py-0.5 text-xs rounded-full ${
-                          request.tier === 'main'
-                            ? 'bg-primary-blue/20 text-primary-blue'
-                            : 'bg-gray-500/20 text-gray-400'
-                        }`}
-                      >
-                        {request.tier === 'main' ? 'Main Sponsor' : 'Secondary'}
-                      </span>
-                    </div>
-
-                    {/* Offer Details */}
-                    <div className="flex flex-wrap gap-3 text-xs mb-2">
-                      <div className="flex items-center gap-1 text-performance-green">
-                        <DollarSign className="w-3 h-3" />
-                        <span className="font-semibold">{request.formattedAmount}</span>
-                      </div>
-                      <div className="flex items-center gap-1 text-gray-500">
-                        <span>Net: ${(request.netAmount / 100).toFixed(2)}</span>
-                      </div>
-                      <div className="flex items-center gap-1 text-gray-500">
-                        <Clock className="w-3 h-3" />
-                        <span>
-                          {new Date(request.createdAt).toLocaleDateString('en-US', {
-                            month: 'short',
-                            day: 'numeric',
-                          })}
-                        </span>
-                      </div>
-                    </div>
-
-                    {/* Message */}
-                    {request.message && (
-                      <div className="flex items-start gap-1.5 text-xs text-gray-400 bg-iron-gray/30 rounded p-2">
-                        <MessageCircle className="w-3 h-3 mt-0.5 shrink-0" />
-                        <span className="line-clamp-2">{request.message}</span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                {/* Actions */}
-                {!isRejecting && (
-                  <div className="flex gap-2 shrink-0">
-                    <Button
-                      variant="primary"
-                      onClick={() => handleAccept(request.id)}
-                      disabled={isProcessing}
-                      className="px-3 py-1.5 text-xs"
-                    >
-                      <Check className="w-3 h-3 mr-1" />
-                      {isProcessing ? 'Accepting...' : 'Accept'}
-                    </Button>
-                    <Button
-                      variant="secondary"
-                      onClick={() => setRejectModalId(request.id)}
-                      disabled={isProcessing}
-                      className="px-3 py-1.5 text-xs"
-                    >
-                      <X className="w-3 h-3 mr-1" />
-                      Reject
-                    </Button>
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      <div className="text-xs text-gray-500 mt-4">
-        <p>
-          <strong className="text-gray-400">Note:</strong> Accepting a request will activate the sponsorship.
-          The sponsor will be charged per season and you'll receive the payment minus 10% platform fee.
-        </p>
-      </div>
-    </div>
+      <Box mt={4}>
+        <Text size="xs" color="text-gray-500" block>
+          <Text weight="bold" color="text-gray-400">Note:</Text> Accepting a request will activate the sponsorship.
+          The sponsor will be charged per season and you&apos;ll receive the payment minus 10% platform fee.
+        </Text>
+      </Box>
+    </Stack>
   );
 }