68 lines
2.5 KiB
TypeScript
68 lines
2.5 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { View, StyleSheet, Text } from 'react-native';
|
|
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
|
|
import type { ServicesStackParamList } from '../../../navigation/types';
|
|
import { ScreenShell, Card, Input, Button } from '../../../components';
|
|
import { useToast } from '../../../hooks/useToast';
|
|
import { useTheme } from '../../../theme';
|
|
|
|
type Props = NativeStackScreenProps<ServicesStackParamList, 'StopPayment'>;
|
|
|
|
export default function StopPaymentScreen({ navigation }: Props) {
|
|
const theme = useTheme();
|
|
const toast = useToast();
|
|
const [account, setAccount] = useState('0000XXXX1234');
|
|
const [chequeNumber, setChequeNumber] = useState('');
|
|
const [reason, setReason] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const handleSubmit = () => {
|
|
if (!chequeNumber) {
|
|
toast('Cheque number required', 'error', 'Please enter a valid cheque number.');
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
setTimeout(() => {
|
|
setIsLoading(false);
|
|
toast('Payment Stopped', 'success', `Cheque #${chequeNumber} has been blocked.`);
|
|
navigation.goBack();
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<ScreenShell title="Stop Payment" subtitle="Block a specific cheque">
|
|
<Card variant="default" style={styles.card}>
|
|
<View style={styles.formGroup}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>Select Account</Text>
|
|
<Input value={account} onChangeText={setAccount} placeholder="Account Number" />
|
|
</View>
|
|
|
|
<View style={styles.formGroup}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>Cheque Number</Text>
|
|
<Input value={chequeNumber} onChangeText={setChequeNumber} placeholder="6-digit unique number" keyboardType="number-pad" />
|
|
</View>
|
|
|
|
<View style={styles.formGroup}>
|
|
<Text style={[styles.label, { color: theme.colors.textSecondary }]}>Reason (Optional)</Text>
|
|
<Input value={reason} onChangeText={setReason} placeholder="e.g. Lost in transit" />
|
|
</View>
|
|
|
|
<Button
|
|
title="Confirm Stop Payment"
|
|
onPress={handleSubmit}
|
|
loading={isLoading}
|
|
style={styles.submitBtn}
|
|
variant="danger"
|
|
/>
|
|
</Card>
|
|
</ScreenShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: { padding: 16, gap: 16 },
|
|
formGroup: { gap: 8 },
|
|
label: { fontSize: 13, fontWeight: '600' },
|
|
submitBtn: { marginTop: 16 },
|
|
});
|