89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import styles from '@/styles/screens/reserva/detail.styles';
|
|
import { FontAwesome } from '@expo/vector-icons';
|
|
import { ComponentProps } from 'react';
|
|
import { Text, View } from 'react-native';
|
|
|
|
type StatusType = 'verde' | 'vermelho' | 'roxo' | 'amarelo' | 'neutral';
|
|
type IconName = ComponentProps<typeof FontAwesome>['name'];
|
|
|
|
type Props = {
|
|
statusCode: string;
|
|
};
|
|
|
|
const getStatusType = (statusCode: string): StatusType => {
|
|
if (statusCode === '1' || statusCode === '5') return 'verde';
|
|
if (statusCode === '-5') return 'vermelho';
|
|
if (statusCode === '10' || statusCode === '99') return 'roxo';
|
|
if (statusCode === '-2' || statusCode === '-1' || statusCode === '-3') return 'amarelo';
|
|
return 'neutral';
|
|
};
|
|
|
|
const getStatusColor = (type: StatusType) => {
|
|
switch (type) {
|
|
case 'verde':
|
|
return '#13AE45';
|
|
case 'vermelho':
|
|
return '#E6463B';
|
|
case 'roxo':
|
|
return '#B138E6';
|
|
case 'amarelo':
|
|
return '#C99700';
|
|
default:
|
|
return '#4A6592';
|
|
}
|
|
};
|
|
|
|
const getStatusConfig = (statusCode: string): { label: string; icon: IconName } => {
|
|
switch (statusCode) {
|
|
case '1':
|
|
return { label: 'Confirmada', icon: 'check-circle' };
|
|
case '5':
|
|
return { label: 'Confirmada - Aguarda pagamento total', icon: 'check-circle' };
|
|
case '-5':
|
|
return { label: 'Cancelada', icon: 'times-circle' };
|
|
case '10':
|
|
return { label: 'Em Viagem', icon: 'ship' };
|
|
case '99':
|
|
return { label: 'Viagem Realizada', icon: 'ship' };
|
|
case '-2':
|
|
return { label: 'Pendente de confirmação com Agente', icon: 'clock-o' };
|
|
case '-3':
|
|
return { label: 'Pendente de Confirmação', icon: 'clock-o' };
|
|
case '-1':
|
|
return { label: 'Aguarda pagamento inicial', icon: 'clock-o' };
|
|
default:
|
|
return { label: 'Não definido', icon: 'question-circle' };
|
|
}
|
|
};
|
|
|
|
export function StatusBadge({ statusCode }: Props) {
|
|
const type = getStatusType(statusCode);
|
|
const config = getStatusConfig(statusCode);
|
|
const color = getStatusColor(type);
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.statusBadge,
|
|
type === 'verde' && styles.statusSuccess,
|
|
type === 'vermelho' && styles.statusDanger,
|
|
type === 'roxo' && styles.statusInfo,
|
|
type === 'amarelo' && styles.statusPendente,
|
|
]}>
|
|
<View style={styles.statusBadgeContent}>
|
|
<FontAwesome name={config.icon} size={12} color={color} />
|
|
<Text
|
|
style={[
|
|
styles.statusBadgeText,
|
|
type === 'verde' && styles.statusTextSuccess,
|
|
type === 'vermelho' && styles.statusTextDanger,
|
|
type === 'roxo' && styles.statusTextInfo,
|
|
type === 'amarelo' && styles.statusTextPendente,
|
|
]}>
|
|
{config.label}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|