react-native-fpay 0.3.5 → 0.3.7

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

@@ -1,13 +1,43 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, TextInput, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator, ScrollView, Animated, Dimensions, Easing, Pressable } from 'react-native';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Animated,
+  Dimensions,
+  Easing,
+  Pressable,
+  Image,
+  Switch,
+} 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, Props, FPSendPaymentRequest } from '../../../../core/types';
+import type {
+  FPError,
+  Props,
+  FPSendPaymentRequest,
+  FPSendWalletPaymentRequest,
+} from '../../../../core/types';
 import styled from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { AnimatedDots } from '../../../components/AnimatedDots';
-import { ButtonContainer, ContentContainer, CTAButton, CTAText, HomeIndicator, InputBox, InputContainer, Label, List, ListText, StyledTextInput } from '../../styles';
+import {
+  ButtonContainer,
+  ContentContainer,
+  CTAButton,
+  CTAText,
+  ErrorLabel,
+  HomeIndicator,
+  InputBox,
+  InputContainer,
+  Label,
+  List,
+  ListGroup,
+  ListText,
+  StyledTextInput,
+} from '../../styles';
+import { getFPStore } from '../../../../store/FPStore';
 
 type Step = 'bank' | 'account' | 'confirm' | 'processing' | 'done';
 const { width, height } = Dimensions.get('window');
@@ -62,8 +92,6 @@ const HeaderRight = styled(View)`
   gap: 8px;
 `;
 
-
-
 const BottomSheet = styled(View)`
   position: absolute;
   bottom: 0;
@@ -99,7 +127,6 @@ const AnimatedBottomSheet = styled(Animated.View)`
   z-index: 9999999999 !important;
 `;
 
-
 const SheetHeader = styled(View)`
   flex-direction: row;
   justify-content: flex-end;
@@ -128,8 +155,6 @@ const SectionTitle = styled(Text)`
   margin-bottom: 16px;
 `;
 
-
-
 const SearchContainer = styled(View)`
   flex-direction: row;
   align-items: center;
@@ -148,11 +173,37 @@ const SearchInput = styled(TextInput)`
   padding: 0;
 `;
 
+const BankLogo = styled(Image)`
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  margin-right: 12px;
+`;
+
+const SwitchGroup = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`;
 
+const SwitchLabel = styled(Text)`
+  font-size: 14px;
+  color: #fff;
+  margin-left: 12px;
+`;
 
-export function TransferSubScreen({ amount, currency, onClose, onProcessTransaction, onError }: Props) {
-  const [searchStr, setSearchStr] = useState<string>("");
-  const [accountNumber, setAccountNumber] = useState<string>("");
+export function TransferSubScreen({
+  amount,
+  currency,
+  onClose,
+  onProcessTransaction,
+  onError,
+}: Props) {
+  const [searchStr, setSearchStr] = useState<string>('');
+  const [accountNumber, setAccountNumber] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [isBank, setIsBank] = useState<boolean>(false);
   const [bank, setBank] = useState<any>({});
   const [accountDetail, setAccountDetail] = useState<any>({});
 
@@ -160,11 +211,10 @@ export function TransferSubScreen({ amount, currency, onClose, onProcessTransact
 
   const [showBankList, setShowBankList] = useState<boolean>(false);
 
-  const [banks, setBanks] = useState<any>([])
+  const [banks, setBanks] = useState<any>(getFPStore().banks);
   const [filteredBanks, setFilteredBanks] = useState<any>([]);
   const slideAnim = React.useRef(new Animated.Value(height)).current;
 
-
   const openSheet = () => {
     setShowBankList(true);
     Animated.timing(slideAnim, {
@@ -187,80 +237,127 @@ export function TransferSubScreen({ amount, currency, onClose, onProcessTransact
   };
 
   const handleSend = async () => {
-    if (!bank || !accountDetail) return;
-      try {
-        const paylaod: FPSendPaymentRequest = { 
-          amount: amount, 
-          currency: currency, 
-          channel: 'transfer',
-          narration: `Send ${currency}${amount} to ${accountDetail.accountName}`,
-          recipient: accountDetail
-        }
-        onProcessTransaction?.(paylaod);
-      } catch (err) {
-        onError?.(err as FPError);
-      } 
-  }
+    if (!accountDetail) return;
+
+    try {
+      const base = {
+        recipient: accountDetail,
+        amount, // keep as number — host app converts if needed
+        currency,
+        narration: `Send ${currency}${amount} to ${accountDetail.accountName}`,
+        reference: `SEND_${Date.now()}`,
+        channel: 'transfer' as const,
+      };
+
+      if (!isBank) {
+        onProcessTransaction?.({
+          ...base,
+          sender_id: getFPStore().psspId ?? '',
+          sender_type: 'USER' as const,
+        });
+      } else if (isBank && bank) {
+        onProcessTransaction?.({
+          ...base,
+          isBank: true,
+        });
+      }
+    } catch (err: any) {
+      onError?.(err);
+    }
+  };
 
   const handleSelectBank = (bank: any) => {
     setBank(bank);
     closeSheet();
   };
 
-
-  useEffect(() => { transferAPI.getBanks().then(setBanks).catch(() => {}); }, []);
+  // useEffect(() => { transferAPI.getBanks().then(setBanks).catch(() => {}); }, []);
 
   useEffect(() => {
-    if (accountNumber.length === 10 && bank) {
-      setIsVerifying(true); 
-      setAccountDetail(null);
-      transferAPI.verifyAccount(accountNumber, bank.code)
-        .then(r => setAccountDetail(r))
-        .catch(() => setAccountDetail(null))
-        .finally(() => setIsVerifying(false));
-    }
-  }, [accountNumber, bank]);
-
-  
+    if (accountNumber.length !== 10) return;
+
+    setIsVerifying(true);
+    setAccountDetail(null);
+    setError('');
+
+    const verify =
+      isBank && bank
+        ? transferAPI.verifyAccount(accountNumber, bank.InstitutionCode)
+        : !isBank
+          ? transferAPI.verifyWalletAccount(accountNumber)
+          : null;
+
+    if (!verify) return; // isBank true but no bank selected yet
+
+    verify
+      .then((r: any) => setAccountDetail(r.payload))
+      .catch((e: any) => {
+        setAccountDetail(null);
+        setError(e.message || 'Failed to verify account');
+      })
+      .finally(() => setIsVerifying(false));
+  }, [accountNumber, bank, isBank]);
 
   useEffect(() => {
     const query = searchStr.trim().toLowerCase();
 
     if (!query) {
-      setFilteredBanks(banks);
+      setFilteredBanks(banks.slice(0, 20));
       return;
     }
 
     const filtered = banks.filter((bank: any) =>
-      bank.name.toLowerCase().includes(query)
+      bank.InstitutionName.toLowerCase().includes(query)
     );
 
     setFilteredBanks(filtered);
   }, [searchStr, banks]);
 
-  return(
+  useEffect(() => {
+    if (getFPStore().banks.length > 0) {
+      setBanks(getFPStore().banks);
+    }
+  }, [getFPStore().banks]);
+
+  return (
     <Container>
       {/* Header */}
       <Header>
         <HeaderButton onPress={onClose}>
           <Ionicons name="close" size={24} />
         </HeaderButton>
-        
+
         <HeaderCenter>
-          <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Bank</Text>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color: '#FFF' }}>
+            Bank
+          </Text>
           <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
         </HeaderCenter>
-        
-        <HeaderRight>
-          
-        </HeaderRight>
+
+        <HeaderRight />
       </Header>
       <FormContainer>
         <InputContainer>
-          <Label>Account Details</Label>
+          <SwitchGroup>
+            <Label>Account Details</Label>
+            <ListGroup>
+              <SwitchLabel>To Banks</SwitchLabel>
+              <Switch
+                trackColor={{ false: '#767577', true: '#FFF' }}
+                thumbColor={isBank ? '#003333' : '#f4f3f4'}
+                ios_backgroundColor="#3e3e3e"
+                value={isBank}
+                onValueChange={() => setIsBank(!isBank)}
+                style={{ transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }] }}
+              />
+            </ListGroup>
+          </SwitchGroup>
+
           <InputBox>
             <StyledTextInput
-              placeholder="Enter account number"
+              placeholder={
+                !isBank ? 'Enter wallet address' : 'Enter account number'
+              }
               placeholderTextColor="#d1d5db"
               value={accountNumber}
               keyboardType="number-pad"
@@ -271,36 +368,51 @@ export function TransferSubScreen({ amount, currency, onClose, onProcessTransact
                 setAccountNumber(numericText);
               }}
             />
-
           </InputBox>
         </InputContainer>
-
+        {isBank && (
+          <InputContainer>
+            <Label>Bank</Label>
+            <InputBox>
+              <StyledTextInput
+                placeholder="Enter Bank"
+                placeholderTextColor="#d1d5db"
+                value={bank?.InstitutionName ?? ''}
+                editable={false}
+                onPress={() => {
+                  openSheet();
+                }}
+              />
+            </InputBox>
+          </InputContainer>
+        )}
         <InputContainer>
-          <Label>Bank</Label>
-          <InputBox>
-            <StyledTextInput
-              placeholder="Enter Bank"
-              placeholderTextColor="#d1d5db"
-              value={bank?.name ?? ''}
-              editable={false}
-              onPress={()=>{openSheet()}}
-            />
-          </InputBox>
-          <View style={{flexDirection: 'row', alignItems: 'center', paddingTop: 16}}>
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingTop: 6,
+            }}
+          >
             {isVerifying && <AnimatedDots />}
-            {!isVerifying && accountDetail && <Label>{accountDetail.name?.toUpperCase()}</Label>}
+            {!isVerifying && accountDetail && (
+              <Label>{accountDetail.accountName?.toUpperCase()}</Label>
+            )}
+            {!isVerifying && error && <ErrorLabel>{error}</ErrorLabel>}
           </View>
-          
-        </InputContainer>  
+        </InputContainer>
         <HomeIndicator />
         <ContentContainer>
           <ButtonContainer>
-            <CTAButton activeOpacity={0.8} disabled={!accountDetail || !accountDetail.name} onPress={handleSend}>
+            <CTAButton
+              activeOpacity={0.8}
+              disabled={!accountDetail || !accountDetail.accountName}
+              onPress={handleSend}
+            >
               <CTAText>Send</CTAText>
             </CTAButton>
-          </ButtonContainer> 
+          </ButtonContainer>
         </ContentContainer>
-        
       </FormContainer>
       {showBankList && (
         <AnimatedBottomSheet
@@ -314,32 +426,40 @@ export function TransferSubScreen({ amount, currency, onClose, onProcessTransact
               <Ionicons name="close" size={22} />
             </Pressable>
           </SheetHeader>
-          
+
           <SheetScrollView showsVerticalScrollIndicator={false}>
             <SearchContainer>
               <Ionicons name="search" size={18} color="#9ca3af" />
               <SearchInput
-                  placeholder="Type a name or phone number to send"
-                  placeholderTextColor="#9ca3af"
-                  value={searchStr}
-                  onChangeText={setSearchStr}
+                placeholder="Type a name or phone number to send"
+                placeholderTextColor="#9ca3af"
+                value={searchStr}
+                onChangeText={setSearchStr}
               />
             </SearchContainer>
             <SectionTitle>Banks</SectionTitle>
-            {filteredBanks && filteredBanks.map((bank: any, index: number)=>{
-              return (
-                <List key={`bank-id-${index}`} onPress={() => handleSelectBank(bank)}>
-                  <ListText>{bank.name}</ListText>
-                  <Ionicons name="chevron-forward" size={20} color="#1f2937" />
-                </List>
-              )
-            })}
+            {filteredBanks &&
+              filteredBanks.map((bank: any, index: number) => {
+                return (
+                  <List
+                    key={`bank-id-${index}`}
+                    onPress={() => handleSelectBank(bank)}
+                  >
+                    <ListGroup>
+                      {bank.logo && <BankLogo source={{ uri: bank.logo }} />}
+                      <ListText>{bank.InstitutionName}</ListText>
+                    </ListGroup>
+                    <Ionicons
+                      name="chevron-forward"
+                      size={20}
+                      color="#1f2937"
+                    />
+                  </List>
+                );
+              })}
           </SheetScrollView>
-        </AnimatedBottomSheet>  
+        </AnimatedBottomSheet>
       )}
-      
     </Container>
   );
 }
-
-

package/src/ui/theme/index.ts

@@ -19,6 +19,18 @@ export const S = { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48 };
 export const F = { xs: 11, sm: 13, md: 15, lg: 17, xl: 20, xxl: 24, hero: 32 };
 
 export const shadow = {
-  sm: { shadowColor: '#0B1D35', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.07, shadowRadius: 6, elevation: 2 },
-  lg: { shadowColor: '#0B1D35', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.12, shadowRadius: 20, elevation: 8 },
+  sm: {
+    shadowColor: '#0B1D35',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.07,
+    shadowRadius: 6,
+    elevation: 2,
+  },
+  lg: {
+    shadowColor: '#0B1D35',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.12,
+    shadowRadius: 20,
+    elevation: 8,
+  },
 };