73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
|
import Ionicons from '@react-native-vector-icons/ionicons';
|
|
import { useTheme, fontFamily } from '../../../theme';
|
|
import type { LoanPaymentMethod } from '../../../types/app';
|
|
|
|
interface PaymentMethodTileProps {
|
|
method: LoanPaymentMethod;
|
|
selected: boolean;
|
|
onPress: () => void;
|
|
}
|
|
|
|
const METHOD_CONFIG: Record<LoanPaymentMethod, { icon: string; label: string; description: string }> = {
|
|
'UPI': { icon: 'phone-portrait-outline', label: 'UPI', description: 'Pay via Google Pay, PhonePe, etc.' },
|
|
'Net Banking': { icon: 'globe-outline', label: 'Net Banking', description: 'Pay from your bank account' },
|
|
'Wallet': { icon: 'wallet-outline', label: 'Wallet', description: 'Pay from BankCBS Wallet' },
|
|
};
|
|
|
|
const PaymentMethodTileComponent = ({ method, selected, onPress }: PaymentMethodTileProps) => {
|
|
const theme = useTheme();
|
|
const config = METHOD_CONFIG[method];
|
|
|
|
return (
|
|
<Pressable onPress={onPress}>
|
|
<View
|
|
style={[
|
|
styles.tile,
|
|
{
|
|
borderColor: selected ? theme.colors.primary : theme.colors.cardBorder,
|
|
backgroundColor: selected ? `${theme.colors.primary}06` : theme.colors.surface,
|
|
borderWidth: selected ? 2 : 1,
|
|
},
|
|
]}
|
|
>
|
|
<View style={[styles.icon, { backgroundColor: selected ? `${theme.colors.primary}14` : theme.colors.surfaceMuted }]}>
|
|
<Ionicons name={config.icon as any} size={22} color={selected ? theme.colors.primary : theme.colors.textSecondary} />
|
|
</View>
|
|
<View style={styles.copy}>
|
|
<Text style={[styles.label, { color: theme.colors.textPrimary }]}>{config.label}</Text>
|
|
<Text style={[styles.description, { color: theme.colors.textMuted }]}>{config.description}</Text>
|
|
</View>
|
|
<Ionicons
|
|
name={selected ? 'radio-button-on' : 'radio-button-off'}
|
|
size={22}
|
|
color={selected ? theme.colors.primary : theme.colors.textMuted}
|
|
/>
|
|
</View>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
tile: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
borderRadius: 16,
|
|
gap: 14,
|
|
},
|
|
icon: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
copy: { flex: 1, gap: 2 },
|
|
label: { fontSize: 15, fontFamily: fontFamily.bold },
|
|
description: { fontSize: 12 },
|
|
});
|
|
|
|
export const PaymentMethodTile = memo(PaymentMethodTileComponent);
|