react-native-fpay 0.2.9 → 0.3.2

package/src/ui/screens/sub/TransferSubScreen.tsx

@@ -1,147 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { View, Text, TextInput, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native';
-import { transferAPI } from '../../../core/api';
-import { FPButton } from '../../components/FPButton';
-import { C, R, S, F, shadow } from '../../theme';
-import type { FPCurrency, FPTransaction, FPError } from '../../../core/types';
-
-type Step = 'bank' | 'account' | 'confirm' | 'processing' | 'done';
-
-interface Props {
-  amount: number; 
-  currency: FPCurrency;
-  onDone: () => void;
-  onSuccess?: (tx: FPTransaction) => void; 
-  onError?: (err: FPError) => void;
-}
-
-export function TransferSubScreen({ amount, currency, onDone, onSuccess, onError }: Props) {
-  const [step, setStep] = useState<Step>('bank');
-  const [banks, setBanks] = useState<{ name: string; code: string }[]>([]);
-  const [search, setSearch] = useState('');
-  const [selectedBank, setSelectedBank] = useState<{ name: string; code: string } | null>(null);
-  const [accountNumber, setAccountNumber] = useState('');
-  const [verifiedName, setVerifiedName] = useState('');
-  const [isVerifying, setIsVerifying] = useState(false);
-  const [narration, setNarration] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  useEffect(() => { transferAPI.getBanks().then(setBanks).catch(() => {}); }, []);
-
-  useEffect(() => {
-    if (accountNumber.length === 10 && selectedBank) {
-      setIsVerifying(true); setVerifiedName('');
-      transferAPI.verifyAccount(accountNumber, selectedBank.code)
-        .then(r => setVerifiedName(r.accountName))
-        .catch(() => setVerifiedName(''))
-        .finally(() => setIsVerifying(false));
-    }
-  }, [accountNumber, selectedBank]);
-
-  const handleSend = async () => {
-    if (!selectedBank || !verifiedName) return;
-    setLoading(true); setStep('processing');
-    try {
-      const result = await transferAPI.send({ accountNumber, bankCode: selectedBank.code, amount: amount * 100, narration });
-      onSuccess?.({ id: result.reference, reference: result.reference, type: 'debit', channel: 'transfer', amount: result.amount, currency: result.currency, status: result.status, recipient: { accountName: result.recipient.accountName }, createdAt: result.createdAt });
-      setStep('done');
-    } catch (err) {
-      setError((err as FPError).message); setStep('confirm');
-      onError?.(err as FPError);
-    } finally { setLoading(false); }
-  };
-
-  const filtered = banks.filter(b => b.name.toLowerCase().includes(search.toLowerCase()));
-
-  if (step === 'bank') return (
-    <View style={st.wrap}>
-      <Text style={st.title}>Select Bank</Text>
-      <TextInput style={st.input} placeholder="Search..." value={search} onChangeText={setSearch} placeholderTextColor={C.ghost} />
-      <FlatList data={filtered} keyExtractor={i => i.code}
-        renderItem={({ item }) => (
-          <TouchableOpacity style={st.bankRow} onPress={() => { setSelectedBank(item); setStep('account'); }}>
-            <Text style={st.bankName}>{item.name}</Text><Text style={st.arrow}>{">"}</Text>
-          </TouchableOpacity>
-        )}
-        ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: C.border }} />}
-      />
-    </View>
-  );
-
-  if (step === 'account') return (
-    <View style={st.wrap}>
-      <TouchableOpacity onPress={() => setStep('bank')} style={st.back}><Text style={st.backText}>{selectedBank?.name}</Text></TouchableOpacity>
-      <Text style={st.title}>Account Number</Text>
-      <TextInput style={st.bigInput} placeholder="0000000000" value={accountNumber}
-        onChangeText={v => setAccountNumber(v.replace(/[^0-9]/g, '').slice(0, 10))}
-        keyboardType="number-pad" maxLength={10} placeholderTextColor={C.ghost} />
-      {isVerifying && <ActivityIndicator color={C.brand} />}
-      {verifiedName ? <View style={st.verified}><Text style={st.verifiedText}>Verified: {verifiedName}</Text></View> : null}
-      <FPButton label="Continue" onPress={() => setStep('confirm')} disabled={!verifiedName} style={st.btn} />
-    </View>
-  );
-
-  if (step === 'confirm') return (
-    <View style={st.wrap}>
-      <TouchableOpacity onPress={() => setStep('account')} style={st.back}><Text style={st.backText}>Back</Text></TouchableOpacity>
-      <Text style={st.title}>Confirm Transfer</Text>
-      <View style={st.card}>
-        <Row label="Recipient" value={verifiedName} />
-        <Row label="Bank" value={selectedBank?.name ?? ''} />
-        <Row label="Account" value={accountNumber} />
-        <Row label="Amount" value={currency + ' ' + amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })} bold />
-      </View>
-      <TextInput style={st.input} placeholder="Add a note (optional)" value={narration} onChangeText={setNarration} placeholderTextColor={C.ghost} />
-      {error ? <Text style={st.error}>{error}</Text> : null}
-      <FPButton label="Send Money" onPress={handleSend} loading={loading} style={st.btn} />
-    </View>
-  );
-
-  if (step === 'processing') return (
-    <View style={[st.wrap, st.centered]}>
-      <ActivityIndicator size="large" color={C.brand} />
-      <Text style={st.title}>Sending...</Text>
-    </View>
-  );
-
-  if (step === 'done') return (
-    <View style={[st.wrap, st.centered]}>
-      <View style={st.successCircle}><Text style={{ fontSize: 28, color: C.green }}>OK</Text></View>
-      <Text style={st.title}>Sent!</Text>
-      <Text style={st.sub}>{currency} {amount.toLocaleString()} to {verifiedName}</Text>
-      <FPButton label="Done" onPress={onDone} style={st.btn} />
-    </View>
-  );
-
-  return null;
-}
-
-function Row({ label, value, bold }: { label: string; value: string; bold?: boolean }) {
-  return (
-    <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: S.sm, borderBottomWidth: 1, borderBottomColor: C.border }}>
-      <Text style={{ color: C.muted, fontSize: F.sm }}>{label}</Text>
-      <Text style={{ color: C.ink, fontWeight: bold ? '800' : '600', fontSize: F.sm }}>{value}</Text>
-    </View>
-  );
-}
-
-const st = StyleSheet.create({
-  wrap: { flex: 1, padding: S.lg },
-  centered: { justifyContent: 'center', alignItems: 'center' },
-  back: { marginBottom: S.md },
-  backText: { color: C.brand, fontSize: F.md, fontWeight: '600' },
-  title: { fontSize: F.xl, fontWeight: '800', color: C.ink, marginBottom: S.lg },
-  input: { backgroundColor: C.surface, borderRadius: R.md, padding: S.md, fontSize: F.md, color: C.ink, borderWidth: 1, borderColor: C.border, marginBottom: S.md },
-  bigInput: { backgroundColor: C.surface, borderRadius: R.md, padding: S.md, fontSize: 28, fontWeight: '800', color: C.ink, textAlign: 'center', letterSpacing: 3, borderWidth: 1, borderColor: C.border, marginBottom: S.md },
-  verified: { backgroundColor: C.greenLight, borderRadius: R.md, padding: S.sm, marginBottom: S.md },
-  verifiedText: { color: C.green, fontWeight: '700', fontSize: F.sm },
-  btn: { marginTop: S.sm },
-  bankRow: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: S.md, alignItems: 'center' },
-  bankName: { fontSize: F.md, color: C.ink },
-  arrow: { color: C.ghost, fontSize: F.lg },
-  card: { backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, marginBottom: S.md },
-  error: { color: C.red, fontSize: F.sm, marginBottom: S.sm },
-  successCircle: { width: 80, height: 80, borderRadius: 40, backgroundColor: C.greenLight, justifyContent: 'center', alignItems: 'center', marginBottom: S.lg },
-  sub: { color: C.muted, fontSize: F.md, marginBottom: S.xl },
-});