93 lines
3.2 KiB
TypeScript
93 lines
3.2 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 './customerItemCard.styles';
|
|
import { CustomerItemCardProps } from './customerItemCard.props';
|
|
import { handlePhonePress, handleEmailPress, getInitials } from '@utils';
|
|
|
|
export const CustomerItemCard: React.FC<CustomerItemCardProps> = ({
|
|
item,
|
|
onPress,
|
|
onDelete,
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const displayName = item.company || item.fullname;
|
|
const initials = getInitials(displayName);
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={onPress ? 0.8 : 1}
|
|
onPress={onPress}
|
|
style={styles.customerCard}>
|
|
<View style={styles.cardHeader}>
|
|
<View style={styles.cardHeaderLeft}>
|
|
<View style={styles.avatarCircle}>
|
|
<Text style={styles.avatarInitial}>{initials}</Text>
|
|
</View>
|
|
<View style={styles.cardInfo}>
|
|
<Text style={styles.customerName} numberOfLines={1}>
|
|
{displayName}
|
|
</Text>
|
|
{item.fullname && item.company ? (
|
|
<Text style={styles.contactPerson} numberOfLines={1}>
|
|
{item.fullname}
|
|
</Text>
|
|
) : null}
|
|
{item.city || item.state ? (
|
|
<Text style={styles.location} numberOfLines={1}>
|
|
<Icon name="location-outline" size={11} color={colors.textMuted} />
|
|
{' '}{[item.city, item.state].filter(Boolean).join(', ')}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.cardHeaderRight}>
|
|
<View
|
|
style={[
|
|
styles.badge,
|
|
item.active === '1' ? styles.activeBadge : styles.inactiveBadge,
|
|
]}>
|
|
<Text
|
|
style={[
|
|
styles.badgeText,
|
|
item.active === '1' ? styles.activeBadgeText : styles.inactiveBadgeText,
|
|
]}>
|
|
{item.active === '1' ? 'Active' : 'Inactive'}
|
|
</Text>
|
|
</View>
|
|
{onDelete ? (
|
|
<TouchableOpacity
|
|
style={styles.deleteButton}
|
|
onPress={onDelete}
|
|
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
activeOpacity={0.7}>
|
|
<Icon name="trash-outline" size={18} color="#EF4444" />
|
|
</TouchableOpacity>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
|
|
|
|
<View style={styles.cardFooter}>
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.callButton]}
|
|
onPress={() => handlePhonePress(item.phonenumber)}>
|
|
<Icon name="call" size={15} color={colors.icon} />
|
|
<Text style={styles.callButtonText}>Call</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.actionButton, styles.emailButton]}
|
|
onPress={() => handleEmailPress(item.email)}>
|
|
<Icon name="mail" size={15} color={colors.textSecondary} />
|
|
<Text style={styles.emailButtonText}>Email</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|