73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
import CircleCheckIcon from '@/assets/icons/circle-check-solid.svg';
|
|
import { colors } from '@/assets/styles/colors';
|
|
import { ReservaData } from '@/assets/types';
|
|
import styles from '@/styles/screens/reserva/detail.styles';
|
|
import { Text, View } from 'react-native';
|
|
|
|
type Props = {
|
|
reserva: ReservaData;
|
|
};
|
|
|
|
const formatEuro = (value: string) => {
|
|
const n = parseFloat(value || '0');
|
|
return `€${n.toLocaleString('pt-PT', {
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0,
|
|
})}`;
|
|
};
|
|
|
|
export function ValorReservaCard({ reserva }: Props) {
|
|
const total = parseFloat(reserva.precoTotalFinal || '0');
|
|
const pago = parseFloat(reserva.valorPago || '0');
|
|
const emFalta = parseFloat(reserva.valorAPagar || '0');
|
|
const isFullyPaid = emFalta <= 0;
|
|
const percent = isFullyPaid
|
|
? 100
|
|
: total > 0
|
|
? Math.min(100, Math.max(0, (pago / total) * 100))
|
|
: 0;
|
|
|
|
return (
|
|
<View style={styles.valorSection}>
|
|
<Text style={styles.sectionTitle}>Valor da Reserva</Text>
|
|
|
|
<View style={styles.valorInnerCard}>
|
|
<Text style={styles.valorAmount}>{formatEuro(reserva.precoTotalFinal)}</Text>
|
|
<Text style={styles.valorAmountLabel}>Valor Total</Text>
|
|
|
|
<Text style={styles.valorPagoLine}>Pago {formatEuro(reserva.valorPago)}</Text>
|
|
|
|
<View style={styles.valorProgressTrack}>
|
|
{percent > 0 && (
|
|
<View
|
|
style={[
|
|
styles.valorProgressFill,
|
|
{ width: `${percent}%`, minWidth: 14 },
|
|
]}>
|
|
<View style={styles.valorProgressDot} />
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={[styles.valorFaltaRow, isFullyPaid && styles.valorFaltaRowPago]}>
|
|
{isFullyPaid ? (
|
|
<View style={styles.valorPagoStatus}>
|
|
<CircleCheckIcon width={18} height={18} fill={colors.success} />
|
|
<Text style={styles.valorFaltaLabel}>Pago</Text>
|
|
</View>
|
|
) : (
|
|
<>
|
|
<Text style={styles.valorFaltaLabel}>Em Falta</Text>
|
|
<View style={styles.valorFaltaBadge}>
|
|
<Text style={styles.valorFaltaBadgeText}>
|
|
{formatEuro(reserva.valorAPagar)}
|
|
</Text>
|
|
</View>
|
|
</>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|