118 lines
3.4 KiB
TypeScript
118 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Linking,
|
|
Platform,
|
|
} from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import { useTheme } from '@theme';
|
|
import { getStyles } from './leadItemCard.styles';
|
|
import { LeadItemCardProps } from './leadItemCard.props';
|
|
|
|
export const LeadItemCard: React.FC<LeadItemCardProps> = ({
|
|
item,
|
|
onPress,
|
|
}) => {
|
|
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();
|
|
};
|
|
|
|
// Handle email press
|
|
const handleEmailPress = () => {
|
|
if (item.email) {
|
|
Linking.openURL(`mailto:${item.email}`).catch(err =>
|
|
console.error('Error opening email:', err),
|
|
);
|
|
}
|
|
};
|
|
|
|
// Handle phone press
|
|
const handlePhonePress = () => {
|
|
if (item.phonenumber) {
|
|
const phoneUrl =
|
|
Platform.OS === 'ios'
|
|
? `telprompt:${item.phonenumber}`
|
|
: `tel:${item.phonenumber}`;
|
|
Linking.openURL(phoneUrl).catch(err =>
|
|
console.error('Error opening phone:', err),
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.card}
|
|
onPress={onPress}
|
|
activeOpacity={0.7}>
|
|
{/* Left side - Avatar/Initials */}
|
|
<View style={[styles.avatarContainer, { backgroundColor: item.color || '#1565C0' }]}>
|
|
<Text style={styles.avatarText}>{getInitials(item.name)}</Text>
|
|
</View>
|
|
|
|
{/* Right side - Content */}
|
|
<View style={styles.contentContainer}>
|
|
{/* Name and Status Row */}
|
|
<View style={styles.headerRow}>
|
|
<Text style={styles.name} numberOfLines={1}>
|
|
{item.name || 'No Name'}
|
|
</Text>
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
{ backgroundColor: `${item.color || '#6B7280'}20` },
|
|
]}>
|
|
<Text
|
|
style={[
|
|
styles.statusText,
|
|
{ color: item.color || '#6B7280' },
|
|
]}>
|
|
{item.status_name || item.status || 'No Status'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Email Row */}
|
|
{item.email ? (
|
|
<View style={styles.contactRow}>
|
|
<Text style={styles.contactText} numberOfLines={1}>
|
|
{item.email}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.contactIconButton}
|
|
onPress={handleEmailPress}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="mail" size={20} color={colors.icon} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : null}
|
|
|
|
{/* Phone Row */}
|
|
{item.phonenumber ? (
|
|
<View style={styles.contactRow}>
|
|
<Text style={styles.contactText} numberOfLines={1}>
|
|
{item.phonenumber}
|
|
</Text>
|
|
<TouchableOpacity
|
|
style={styles.contactIconButton}
|
|
onPress={handlePhonePress}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
|
<Icon name="call" size={20} color={colors.icon} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : null}
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|