134 lines
3.8 KiB
TypeScript
134 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
|
|
import { ShieldCheck, X } from 'lucide-react-native';
|
|
import { useTheme } from '../../../Hooks/useTheme';
|
|
import AppText from '../../../components/AppText';
|
|
|
|
interface Props {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
bidAmount: number;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const ConfirmBidModal = ({ visible, onClose, onConfirm, bidAmount, isLoading }: Props) => {
|
|
const { colors, shadows } = useTheme();
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<View style={styles.overlay}>
|
|
<View style={[styles.modalCard, { backgroundColor: colors.surface, ...shadows.large }]}>
|
|
|
|
<TouchableOpacity style={[styles.closeBtn, { backgroundColor: colors.background }]} onPress={onClose} disabled={isLoading}>
|
|
<X size={18} color={colors.textSecondary} strokeWidth={2.5} />
|
|
</TouchableOpacity>
|
|
|
|
<View style={[styles.iconBox, { backgroundColor: `${colors.primary}15` }]}>
|
|
<ShieldCheck size={32} color={colors.primary} strokeWidth={2} />
|
|
</View>
|
|
|
|
<AppText variant="h3" color={colors.text} bold centered style={styles.title}>
|
|
Confirm Your Bid
|
|
</AppText>
|
|
<AppText variant="body" color={colors.textSecondary} centered style={styles.subtitle}>
|
|
Are you sure you want to place this bid? This action cannot be undone.
|
|
</AppText>
|
|
|
|
<View style={[styles.amountBox, { backgroundColor: `${colors.primary}10`, borderColor: `${colors.primary}30` }]}>
|
|
<AppText variant="caption" color={colors.primary} bold>
|
|
BID AMOUNT
|
|
</AppText>
|
|
<AppText variant="h1" color={colors.primary} bold>
|
|
₹{bidAmount?.toLocaleString('en-IN') || 0}
|
|
</AppText>
|
|
</View>
|
|
|
|
<View style={styles.btnRow}>
|
|
<TouchableOpacity style={[styles.btn, styles.cancelBtn, { backgroundColor: colors.background }]} onPress={onClose} disabled={isLoading}>
|
|
<AppText variant="button" color={colors.text} bold>Cancel</AppText>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={[styles.btn, styles.confirmBtn, { backgroundColor: colors.primary }]} onPress={onConfirm} disabled={isLoading}>
|
|
{isLoading ? (
|
|
<ActivityIndicator color="#fff" size="small" />
|
|
) : (
|
|
<AppText variant="button" color="#fff" bold>Submit Bid</AppText>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ConfirmBidModal;
|
|
|
|
const styles = StyleSheet.create({
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 24,
|
|
zIndex: 9999,
|
|
elevation: 9999,
|
|
},
|
|
modalCard: {
|
|
width: '100%',
|
|
borderRadius: 24,
|
|
padding: 24,
|
|
alignItems: 'center',
|
|
},
|
|
closeBtn: {
|
|
position: 'absolute',
|
|
top: 16,
|
|
right: 16,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
iconBox: {
|
|
width: 64,
|
|
height: 64,
|
|
borderRadius: 32,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
title: {
|
|
marginBottom: 8,
|
|
},
|
|
subtitle: {
|
|
marginBottom: 24,
|
|
paddingHorizontal: 10,
|
|
},
|
|
amountBox: {
|
|
width: '100%',
|
|
paddingVertical: 16,
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: 24,
|
|
gap: 4,
|
|
},
|
|
btnRow: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
width: '100%',
|
|
},
|
|
btn: {
|
|
flex: 1,
|
|
height: 50,
|
|
borderRadius: 16,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
cancelBtn: {},
|
|
confirmBtn: {},
|
|
});
|