104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity } from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './leadDetailHeader.styles';
|
|
import { LeadDetailHeaderProps } from './leadDetailHeader.props';
|
|
|
|
export const LeadDetailHeader: React.FC<LeadDetailHeaderProps> = ({
|
|
name,
|
|
company,
|
|
email,
|
|
phonenumber,
|
|
statusName,
|
|
statusColor,
|
|
avatarColor,
|
|
onStatusPress,
|
|
onEmailPress,
|
|
onPhonePress,
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
// Get initials from name
|
|
const getInitials = (name: string): string => {
|
|
if (!name) return '?';
|
|
const nameParts = name.trim().split(' ');
|
|
if (nameParts.length >= 2) {
|
|
return (nameParts[0][0] + nameParts[1][0]).toUpperCase();
|
|
}
|
|
return name.substring(0, 2).toUpperCase();
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* Avatar */}
|
|
<View
|
|
style={[
|
|
styles.avatar,
|
|
{ backgroundColor: avatarColor || statusColor || '#1565C0' },
|
|
]}>
|
|
<Text style={styles.avatarText}>{getInitials(name)}</Text>
|
|
</View>
|
|
|
|
{/* Name and Status Row */}
|
|
<View style={styles.nameRow}>
|
|
<Text style={styles.name}>{name || 'No Name'}</Text>
|
|
<TouchableOpacity
|
|
onPress={onStatusPress}
|
|
activeOpacity={onStatusPress ? 0.7 : 1}
|
|
disabled={!onStatusPress}>
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: `${statusColor || '#6B7280'}20` },
|
|
]}>
|
|
<Text
|
|
style={[
|
|
styles.statusText,
|
|
{ color: statusColor || '#6B7280' },
|
|
]}>
|
|
{statusName || 'No Status'}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* Company */}
|
|
{company && <Text style={styles.company}>{company}</Text>}
|
|
|
|
{/* Email Row */}
|
|
{email && (
|
|
<View style={styles.contactRow}>
|
|
<Text style={styles.contactLabel}>Email:</Text>
|
|
<Text style={styles.contactText}>{email}</Text>
|
|
{onEmailPress && (
|
|
<TouchableOpacity
|
|
style={styles.iconButton}
|
|
onPress={onEmailPress}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="send" size={18} color={colors.icon} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
)}
|
|
|
|
{/* Phone Row */}
|
|
{phonenumber && (
|
|
<View style={styles.contactRow}>
|
|
<Text style={styles.contactLabel}>Phone:</Text>
|
|
<Text style={styles.contactText}>{phonenumber}</Text>
|
|
{onPhonePress && (
|
|
<TouchableOpacity
|
|
style={styles.iconButton}
|
|
onPress={onPhonePress}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="call" size={18} color={colors.icon} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|