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 | 9x 37x 37x 2x 37x 62x 62x 62x 185x 185x | import React from 'react';
import {
FormControl,
InputLabel,
Select,
MenuItem,
FormHelperText,
SelectChangeEvent,
Box,
Typography,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { PARTNERSHIP_TIERS, PartnershipLevel } from './partnershipTiers.constants';
interface PartnershipTierSelectProps {
value: string;
onChange: (value: string) => void;
error?: string;
disabled?: boolean;
required?: boolean;
}
/**
* Partnership Tier Select Component
*
* Displays a dropdown with all partnership tiers, including emoji icons and labels.
* Supports validation, error display, and accessibility features.
*
* @component
* @example
* ```tsx
* <PartnershipTierSelect
* value={tier}
* onChange={setTier}
* error={errors.tier}
* />
* ```
*/
export const PartnershipTierSelect: React.FC<PartnershipTierSelectProps> = ({
value,
onChange,
error,
disabled = false,
required = true,
}) => {
const { t } = useTranslation('partners');
const handleChange = (event: SelectChangeEvent) => {
onChange(event.target.value);
};
return (
<FormControl fullWidth error={!!error} disabled={disabled} required={required}>
<InputLabel id="partnership-tier-label">{t('detail.overviewTab.tier')}</InputLabel>
<Select
labelId="partnership-tier-label"
id="partnership-tier-select"
value={value}
label={t('detail.overviewTab.tier')}
onChange={handleChange}
data-testid="partnership-tier-select"
renderValue={(selected) => {
Iif (!selected) return '';
const tier = PARTNERSHIP_TIERS[selected as PartnershipLevel];
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<span>{tier.emoji}</span>
<span>{tier.label}</span>
</Box>
);
}}
>
{(Object.keys(PARTNERSHIP_TIERS) as PartnershipLevel[]).map((tierKey) => {
const tier = PARTNERSHIP_TIERS[tierKey];
return (
<MenuItem key={tierKey} value={tierKey} data-testid={`tier-select-option-${tierKey}`}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
<Typography component="span" sx={{ fontSize: '1.25rem' }}>
{tier.emoji}
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography component="span" variant="body1">
{tier.label}
</Typography>
<Typography component="span" variant="caption" color="text.secondary">
{tier.description}
</Typography>
</Box>
</Box>
</MenuItem>
);
})}
</Select>
{error && <FormHelperText>{error}</FormHelperText>}
</FormControl>
);
};
|