Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | 5x 5x 52x 52x 52x 52x 52x 26x 26x 26x 52x 1x 52x 52x 52x 52x 5x | /**
* PartnerCard Component
*
* Story 2.8.1 - Task 4b (GREEN Phase)
* AC: 3 (Partner Cards)
*
* Displays individual partner card with:
* - Company logo (with fallback to initials avatar)
* - Partnership tier badge with emoji
* - Company information (name, industry)
* - Primary contact information
* - Quick action buttons
*/
import React, { useState, useEffect, useRef } from 'react';
import { Box, Card, CardContent, Typography, Chip } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import type { PartnerResponse } from '@/services/api/partnerApi';
interface PartnerCardProps {
partner: PartnerResponse;
}
// Tier emoji mapping - UPPER_CASE per coding standards
const TIER_EMOJIS: Record<string, string> = {
STRATEGIC: '🏆',
PLATINUM: '💎',
GOLD: '🥇',
SILVER: '🥈',
BRONZE: '🥉',
};
const PartnerCardComponent: React.FC<PartnerCardProps> = ({ partner }) => {
const { t } = useTranslation('partners');
const navigate = useNavigate();
const [isVisible, setIsVisible] = useState(false);
const cardRef = useRef<HTMLDivElement>(null);
// Intersection Observer for lazy loading
useEffect(() => {
// In test environment or if IntersectionObserver is not available, load immediately
Eif (
typeof window === 'undefined' ||
!('IntersectionObserver' in window) ||
import.meta.env.MODE === 'test'
) {
setIsVisible(true);
return;
}
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
});
},
{ rootMargin: '50px' } // Load 50px before entering viewport
);
if (cardRef.current) {
observer.observe(cardRef.current);
}
return () => observer.disconnect();
}, []);
const handleViewDetails = () => {
navigate(`/organizer/partners/${partner.companyName}`);
};
const logoUrl = partner.company?.logoUrl;
const primaryContact = partner.contacts?.[0];
const tierEmoji = TIER_EMOJIS[partner.partnershipLevel.toUpperCase()] || '';
return (
<Card
ref={cardRef}
data-testid="partner-card"
className="mobile"
onClick={handleViewDetails}
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
cursor: 'pointer',
'&:hover': { boxShadow: 6 },
}}
>
<CardContent sx={{ flexGrow: 1 }}>
{/* Logo and Tier Badge */}
<Box display="flex" alignItems="center" gap={2} mb={2}>
{logoUrl && isVisible && (
<Box
component="img"
src={logoUrl}
alt={partner.companyName}
loading="lazy"
sx={{ maxWidth: 60, maxHeight: 60, objectFit: 'contain', flexShrink: 0 }}
/>
)}
<Box flexGrow={1}>
<Chip
label={`${tierEmoji} ${t(`tiers.${partner.partnershipLevel.toLowerCase()}`)}`}
color="primary"
size="small"
sx={{ mb: 0.5 }}
/>
<Typography variant="h6">{partner.companyName}</Typography>
</Box>
</Box>
{/* Company Industry */}
<Typography variant="body2" color="text.secondary" gutterBottom>
🏢 {partner.company?.industry || 'N/A'}
</Typography>
{/* Primary Contact */}
{primaryContact && (
<Typography variant="body2" color="text.secondary" gutterBottom>
👤 {primaryContact.firstName} {primaryContact.lastName} ({primaryContact.email})
</Typography>
)}
</CardContent>
</Card>
);
};
// Memoized export for performance optimization (AC8: Performance)
// Prevents re-renders when parent re-renders but partner prop hasn't changed
export const PartnerCard = React.memo(PartnerCardComponent);
|