100 lines
3.2 KiB
TypeScript
100 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 './customerDetailHeader.styles';
|
|
import { CustomerDetailHeaderProps } from './customerDetailHeader.props';
|
|
import { getInitials, formatDate } from '@utils';
|
|
|
|
export const CustomerDetailHeader: React.FC<CustomerDetailHeaderProps> = ({
|
|
company,
|
|
fullname,
|
|
active,
|
|
datecreated,
|
|
email,
|
|
phonenumber,
|
|
website,
|
|
onEmailPress,
|
|
onPhonePress,
|
|
onWebsitePress,
|
|
}) => {
|
|
const { theme: colors } = useTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const displayName = company || fullname || 'Customer';
|
|
const initials = getInitials(displayName);
|
|
|
|
return (
|
|
<View style={styles.card}>
|
|
{/* Top Row: Avatar + Info + Active Badge */}
|
|
<View style={styles.topRow}>
|
|
<View style={styles.avatarCircle}>
|
|
<Text style={styles.avatarInitial}>{initials}</Text>
|
|
</View>
|
|
|
|
<View style={styles.info}>
|
|
<Text style={styles.name} numberOfLines={1}>{displayName}</Text>
|
|
{fullname && company ? (
|
|
<Text style={styles.company} numberOfLines={1}>{fullname}</Text>
|
|
) : null}
|
|
<Text style={styles.contact} numberOfLines={1}>
|
|
<Icon name="call-outline" size={10} color={colors.textMuted} />
|
|
{' '}{phonenumber || 'N/A'}{' '}
|
|
<Icon name="mail-outline" size={10} color={colors.textMuted} />
|
|
{' '}{email || 'N/A'}
|
|
</Text>
|
|
{datecreated ? (
|
|
<Text style={styles.dateText} numberOfLines={1}>
|
|
Added {formatDate(datecreated)}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
active === '1' ? styles.activeBadge : styles.inactiveBadge,
|
|
]}>
|
|
<Text
|
|
style={[
|
|
styles.statusText,
|
|
active === '1' ? styles.activeText : styles.inactiveText,
|
|
]}>
|
|
{active === '1' ? 'Active' : 'Inactive'}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Bottom Row: Action Buttons */}
|
|
<View style={styles.actionRow}>
|
|
{phonenumber ? (
|
|
<TouchableOpacity
|
|
style={[styles.actionBtn, styles.primaryBtn]}
|
|
onPress={onPhonePress}>
|
|
<Icon name="call" size={14} color="#FFFFFF" />
|
|
<Text style={styles.primaryBtnText}>Call</Text>
|
|
</TouchableOpacity>
|
|
) : null}
|
|
|
|
{email ? (
|
|
<TouchableOpacity
|
|
style={[styles.actionBtn, styles.secondaryBtn]}
|
|
onPress={onEmailPress}>
|
|
<Icon name="mail" size={14} color={colors.textSecondary} />
|
|
<Text style={styles.secondaryBtnText}>Email</Text>
|
|
</TouchableOpacity>
|
|
) : null}
|
|
|
|
{website ? (
|
|
<TouchableOpacity
|
|
style={[styles.actionBtn, styles.secondaryBtn]}
|
|
onPress={onWebsitePress}>
|
|
<Icon name="globe" size={14} color={colors.textSecondary} />
|
|
<Text style={styles.secondaryBtnText}>Website</Text>
|
|
</TouchableOpacity>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|