Fix form keyboard issues and sticky footers in agent screens

2026-05-26 16:34:05 +05:30
commit 9ac5e95d52
410 changed files with 86650 additions and 0 deletions
@@ -0,0 +1,67 @@
+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 },
+});