react-native-fpay 0.4.14 → 0.4.16

package/src/FountainPayProvider.tsx

@@ -63,7 +63,8 @@ export function useFountainPay(): FPInstance {
 // ── Provider ──────────────────────────────────────────────────────────────────
 
 interface ProviderProps {
-  apiKey: string;
+  apiKey?: string;
+  accessToken?: string;
   options?: FPSDKOptions;
   children: ReactNode;
   onAuthReady?: () => void;
@@ -72,6 +73,7 @@ interface ProviderProps {
 
 export function FountainPayProvider({
   apiKey,
+  accessToken,
   options,
   children,
   onAuthReady,
@@ -87,6 +89,9 @@ export function FountainPayProvider({
   const account = useFPStore((s) => s.account);
   const user = useFPStore((s) => s.user);
   const balance = useFPStore((s) => s.balance);
+  // const resetToken = useFPStore((s) => s.clearAccessToken);
+  // const clearUser = useFPStore((s) => s.clearUser);
+
 
 
   useEffect(() => {
@@ -95,18 +100,96 @@ export function FountainPayProvider({
     // Make sure client is initialized before any API call
     console.log('[FountainPay] Provider mounted. HTTP client ready.', options);
     if (!clientBooted.current) {
-      initClient(apiKey, {
-        baseUrl: options?.baseUrl,
+      // For AGENT mode — store the token before booting the client
+      // so the request interceptor picks it up immediately
+      if (options?.userType === 'AGENT' && accessToken) {
+        getFPStore().setAccessToken(accessToken);
+      }
+
+      initClient(apiKey ?? '', {
+        baseUrl:     options?.baseUrl,
         environment: options?.environment,
       });
+
       clientBooted.current = true;
-      console.log(
-        '[FountainPay] Provider mounted. HTTP client ready.: ',
-        options
-      );
+      console.log('[FountainPay] HTTP client ready. Mode:', options?.userType ?? 'USER');
     }
 
     const authenticate = async () => {
+      // await resetToken();
+      // await clearUser();
+       const userType = options?.userType ?? 'USER';
+
+      // ── AGENT mode ────────────────────────────────────────
+      if (userType === 'AGENT') {
+        if (!accessToken) {
+          onAuthError?.('accessToken is required for AGENT mode');
+          return;
+        }
+
+        try {
+          console.log('[FountainPay] Agent mode — validating token...');
+
+          // Store the token first so the HTTP interceptor picks it up
+          getFPStore().setAccessToken(accessToken);
+
+          // Fetch agent profile from backend
+          const response = await authenticateAPI.validateToken();
+          if (cancelled) return;
+
+          if (response.status) {
+            const agent = response.payload;
+
+            // Build FPUserInfo from agent model
+            const user: FPUserInfo = {
+              firstName: agent.firstName,
+              lastName:  agent.lastName,
+              email:     agent.email,
+              phone:     agent.phone ?? '',
+              bvn:       agent.bvn,
+              userId:    agent.id,
+            };
+
+            // Build FPAccount from agent model
+            const account: FPAccount = {
+              id:            agent.id,
+              firstName: agent.firstName,
+              lastName: agent.lastName,
+              phone: agent.phone,
+              accountName:   `${agent.firstName} ${agent.lastName}`.toUpperCase(),
+              accountNumber: agent.accountNumber,
+              bankName:      agent.bankName,
+              bankCode:      agent.bankCode,   // populate if backend returns it
+            };
+
+            // Store everything — no need to call _resolveAccount
+            getFPStore().setUser(user);
+            getFPStore().setPsspId(agent.id);
+            getFPStore().setAccount(account);
+
+            const banks: any = await transferAPI.getBanks();
+            if (banks.status) {
+              getFPStore().setBanks(banks.payload);
+            }
+            
+            setAuthenticated(true);
+            console.log('[FountainPay] Agent validated:', agent.firstName, agent.lastName);
+            onAuthReady?.();
+          } else {
+            getFPStore().clearAccessToken();
+            setAuthenticated(false, response.message);
+            onAuthError?.(response.message);
+          }
+        } catch (err: any) {
+          if (cancelled) return;
+          getFPStore().clearAccessToken();
+          setAuthenticated(false, err.message);
+          onAuthError?.(err.message);
+        }
+
+        return;  // ← don't fall through to PSSP auth
+      }
+      
       if (isTokenValid()) {
         console.log('[FountainPay] Valid token found — skipping auth.');
         setAuthenticated(true);
@@ -116,7 +199,7 @@ export function FountainPayProvider({
 
       try {
         console.log('[FountainPay] Verifying API key...');
-        const response = await authenticateAPI.login(apiKey);
+        const response = await authenticateAPI.login(apiKey || "");
         if (cancelled) return;
 
         if (response.status) {
@@ -152,14 +235,35 @@ export function FountainPayProvider({
     return () => {
       cancelled = true;
     };
-  }, [apiKey]);
+  }, [apiKey, accessToken]);
+
+  useEffect(() => {
+    if (options?.userType !== 'AGENT') return;
+    if (!isAuthenticated) return;
+
+    const autoInitialize = async () => {
+      const store = getFPStore();
+      if (!store.user || !store.account) return;
+
+      console.log('[FountainPay] Agent mode — auto-initializing from stored data...');
+      await FPEngine.initialize(
+        accessToken ?? '',
+        store.user,
+        options ?? {},
+        {}   // empty callbacks — host app sets these via initializeSDK if they want
+      );
+      console.log('[FountainPay] Agent auto-initialized.');
+    };
+
+    autoInitialize();
+  }, [isAuthenticated, options?.userType]);
 
   // Build the instance once per provider lifetime.
   // All components that call useFountainPay() share this exact object.
   const instance = useMemo<FPInstance>(() => {
     console.log(
       '[FountainPay] Creating shared FPInstance for apiKey:',
-      apiKey.slice(0, 8) + '...'
+      apiKey?.toString().slice(0, 8) + '...'
     );
 
     return {
@@ -175,14 +279,17 @@ export function FountainPayProvider({
           '[FountainPay] initializeSDK() called for user:',
           user.firstName
         );
+
+        if (options?.userType === 'AGENT') {
+          if (callbacks) {
+            FPEngine.updateCallbacks(callbacks);  // just register callbacks
+          }
+          console.log('[FountainPay] Agent already initialized — callbacks updated.');
+          return;
+        }
         try {
-          // await FPEngine.initialize(
-          //   apiKey,
-          //   user,
-          //   options ?? {},
-          //   callbacks ?? {}
-          // );
-          await FPEngine.initialize(apiKey, user, options ?? {}, {
+          
+          await FPEngine.initialize(apiKey || '', user, options ?? {}, {
             ...callbacks,
             onPaymentSent: async (tx) => {
               callbacks?.onPaymentSent?.(tx);

package/src/core/api/client.ts

@@ -7,7 +7,7 @@ import type { FPError } from '../types';
 import { getFPStore } from '../../store/FPStore';
 
 const DEFAULT_BASE_URL =
-  'https://kenisha-happiest-nan.ngrok-free.dev/sdk/v1/fpip/';
+  'https://kenisha-happiest-nan.ngrok-free.dev/modal/sdk/v1/fpip/';
 
 let _client: AxiosInstance | null = null;
 let _isRefreshing = false;

package/src/core/api/index.ts

@@ -41,6 +41,24 @@ export const authenticateAPI = {
     http()
       .post<{ Response: any }>('/verify-otp', { otp, email })
       .then((r) => r.data),
+
+  validateToken: () =>
+    http().get<{
+      status:  boolean;
+      message: string;
+      payload: {
+        id:                 string;
+        firstName:            string;
+        lastName:             string;
+        email:                string;
+        phone:                string;
+        bvn?:                 string;
+        accountNumber:        string;
+        bankName:             string;
+        bankCode?:            string;
+        tradeName?:           string;
+      };
+    }>('/auth/agent/validate-token').then(r => r.data),
 };
 
 export const accountAPI = {

package/src/core/types/index.ts

@@ -28,6 +28,7 @@ export interface FPSDKOptions {
   environment?: 'sandbox' | 'production';
   proximityRadius?: number;
   bluetoothDisplayName?: string;
+  userType?: 'USER' | 'AGENT';
 }
 
 export interface FPTransferRecipient {
@@ -43,6 +44,7 @@ export interface FPWalletTransferRecipient {
   accountName: string;
   agentId?: string;
   userId?: string;
+  terminalId?: string;
 }
 
 export interface FPNfcRecipient {

package/src/engine/BLESenderService.ts

@@ -195,9 +195,10 @@ class BLESenderService {
         rawDevice: device,
       };
     } catch (err) {
-      try {
-        await this.bleManager.cancelDeviceConnection(device.id);
-      } catch {}
+      console.log("Read Device Info Error: ", err)
+      // try {
+      //   await this.bleManager.cancelDeviceConnection(device.id);
+      // } catch {}
       return null;
     }
   }
@@ -233,10 +234,14 @@ class BLESenderService {
   ): Promise<BLESendPaymentResponse> {
     let responseReceived = false;
 
+    
     try {
+      this.bleManager.stopDeviceScan();
+
       let device = this.connectedDevices.get(deviceId);
       if (!device) device = await this.connectToDevice(deviceId);
 
+
       // Start polling BEFORE writing the request, so we don't miss a fast response
       const responsePromise = new Promise<BLESendPaymentResponse>(
         async (resolve, reject) => {
@@ -257,6 +262,9 @@ class BLESenderService {
                 await new Promise((r) => setTimeout(r, 1000));
                 if (responseReceived) break;
 
+                // iOS caches BLE reads — force re-discovery to get fresh values
+
+
                 console.log(
                   '[FPay BLE Sender] Polling response characteristic...'
                 );
@@ -292,6 +300,7 @@ class BLESenderService {
                 }
               } catch (pollErr: any) {
                 // errorCode 205 = device disconnected — abort immediately
+                console.log('[FPay BLE Sender] Poll error:', pollErr);
                 if (pollErr.errorCode === 205) {
                   reject(new Error('[FPay BLE Sender] Device disconnected'));
                   break;
@@ -314,22 +323,40 @@ class BLESenderService {
       console.log('[FPay BLE Sender] Writing payment request...');
 
       try {
-        await device.writeCharacteristicWithoutResponseForService(
-          FP_SERVICE_UUID,
-          FP_REQUEST_CHAR_UUID,
-          base64
-        );
-        console.log('[FPay BLE Sender] Written without response (preferred)');
-      } catch {
-        console.log('[FPay BLE Sender] Retrying with response...');
-        await device.writeCharacteristicWithResponseForService(
-          FP_SERVICE_UUID,
-          FP_REQUEST_CHAR_UUID,
-          base64
-        );
-        console.log('[FPay BLE Sender] Written with response');
+          await device.writeCharacteristicWithResponseForService(
+              FP_SERVICE_UUID,
+              FP_REQUEST_CHAR_UUID,
+              base64
+          );
+          console.log('[FPay BLE Sender] Written with response');
+      } catch (e: any) {
+          console.log('[FPay BLE Sender] Write with response failed:', e.message);
+          console.log('[FPay BLE Sender] Retrying without response...');
+          await device.writeCharacteristicWithoutResponseForService(
+              FP_SERVICE_UUID,
+              FP_REQUEST_CHAR_UUID,
+              base64
+          );
+          console.log('[FPay BLE Sender] Written without response');
       }
 
+      // try {
+      //   await device.writeCharacteristicWithoutResponseForService(
+      //     FP_SERVICE_UUID,
+      //     FP_REQUEST_CHAR_UUID,
+      //     base64
+      //   );
+      //   console.log('[FPay BLE Sender] Written without response (preferred)');
+      // } catch {
+      //   console.log('[FPay BLE Sender] Retrying with response...');
+      //   await device.writeCharacteristicWithResponseForService(
+      //     FP_SERVICE_UUID,
+      //     FP_REQUEST_CHAR_UUID,
+      //     base64
+      //   );
+      //   console.log('[FPay BLE Sender] Written with response');
+      // }
+
       console.log(
         '[FPay BLE Sender] Request sent. Waiting for accept/decline...'
       );

package/src/engine/FPEngine.ts

@@ -3,6 +3,7 @@
 // This replaces AlwaysOnPaymentListener entirely — all its logic lives here.
 
 import {
+  Alert,
   AppState,
   type AppStateStatus,
   Vibration,
@@ -434,6 +435,16 @@ export const FPEngine = {
     _isReady = true;
     console.log('[FPay Engine] Initialized. Advertising as:', displayName);
 
+    // AGENT — account already stored by provider, skip resolve
+    if (options.userType === 'AGENT') {
+      const account = getFPStore().account;
+      if (account) {
+        callbacks.onAccountReady?.(account);
+        _fetchBalance();
+      }
+      return;
+    }
+
     // Resolve account first — sets psspId in store
     // Then broadcast proximity — needs psspId to be set
     await _resolveAccount(user, callbacks);
@@ -563,6 +574,11 @@ export const FPEngine = {
     return BLESenderService.sendPaymentRequest(deviceId, request);
   },
 
+  async updateCallbacks(callbacks: FPCallbacks): Promise<void> {
+    _callbacks = { ..._callbacks, ...callbacks };
+    console.log('[FPay Engine] Callbacks updated.');
+  },
+
   // ── Other SDK actions ──────────────────────────────────────
 
   async generateAccount(req: FPUserInfo): Promise<FPAccount> {

package/src/ui/components/Gradients/Skeleton.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated, View, StyleSheet } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Skeleton = ({ width, height, borderRadius = 8, style }: any) => {
+  const translateX = useRef(new Animated.Value(-100)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(translateX, {
+        toValue: 300,
+        duration: 1200,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, []);
+
+  return (
+    <View
+      style={[
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: '#e0e0e0',
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      <Animated.View
+        style={{
+          ...StyleSheet.absoluteFillObject,
+          transform: [{ translateX }],
+        }}
+      >
+        <LinearGradient
+          colors={['#e0e0e0', '#f5f5f5', '#e0e0e0']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={{ flex: 1 }}
+        />
+      </Animated.View>
+    </View>
+  );
+};
+
+export default Skeleton;

package/src/ui/components/Gradients/index.tsx

@@ -0,0 +1,94 @@
+import { Animated, View } from "react-native";
+import { C, R, S } from "../../theme";
+import Skeleton from "./Skeleton";
+import styled from "styled-components/native";
+
+
+
+const Container = styled(Animated.View)`
+  flex: 1;
+  background-color: ${C.white};
+  padding: ${S.xxl}px ${S.lg}px ${S.xl}px;
+  align-items: center;
+`;
+
+
+const Card = styled.View`
+  width: 100%;
+  background-color: ${C.surface};
+  border-radius: ${R.xl}px;
+  padding: ${S.md}px ${S.lg}px;
+  margin-bottom: ${S.xl}px;
+`;
+
+const Footer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: auto;
+`;
+
+
+const Gradients = () => {
+  return (
+    <Container>
+      {/* Icon */}
+      <Skeleton
+        width={80}
+        height={80}
+        borderRadius={40}
+        style={{ alignSelf: 'center', marginBottom: 20 }}
+      />
+
+      {/* Status Text */}
+      <Skeleton
+        width={200}
+        height={20}
+        style={{ alignSelf: 'center', marginBottom: 16 }}
+      />
+
+      {/* Amount */}
+      <Skeleton
+        width={180}
+        height={30}
+        style={{ alignSelf: 'center', marginBottom: 24 }}
+      />
+
+      {/* Card */}
+      <Card>
+        {[...Array(5)].map((_, i) => (
+          <View
+            key={i}
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              marginBottom: 14,
+            }}
+          >
+            <Skeleton width={100} height={14} />
+            <Skeleton width={140} height={14} />
+          </View>
+        ))}
+      </Card>
+
+      {/* Footer */}
+      <Footer style={{ marginTop: 30 }}>
+        {/* Countdown ring placeholder */}
+        <Skeleton
+          width={60}
+          height={60}
+          borderRadius={30}
+          style={{ marginBottom: 20 }}
+        />
+
+        {/* Button */}
+        <Skeleton
+          width={'100%'}
+          height={50}
+          borderRadius={25}
+        />
+      </Footer>
+    </Container>
+  );
+};
+
+export default Gradients;

package/src/ui/screens/ResultScreen.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components/native';
 import { C, F, R, S } from '../theme';
 import type { FPTransaction } from '../../core/types';
 import { transferAPI } from '../../core/api';
+import Gradients from '../components/Gradients';
 
 // ── Icons ─────────────────────────────────────────────────────
 
@@ -203,6 +204,7 @@ interface Props {
 }
 
 export function ResultScreen({ transaction, onClose }: Props) {
+  const [loading, setLoading] = useState<boolean>(false);
   const [transactionDetail, setTransactionDetail] = useState<any>(null)
   const slideAnim = useRef(new Animated.Value(60)).current;
   const opacAnim = useRef(new Animated.Value(0)).current;
@@ -232,11 +234,20 @@ export function ResultScreen({ transaction, onClose }: Props) {
     : '—';
 
   const loadTransaction = async()=>{
-    const response = await transferAPI.status(transaction.reference) as any;
-    console.log("Transaction payload: ", response);
-    if(response.status){
-      setTransactionDetail(response.payload);
+    setLoading(true);
+    setTransactionDetail(null);
+    try{
+      const response = await transferAPI.status(transaction.reference) as any;
+      console.log("Transaction payload: ", response);
+      if(response.status){
+        setTransactionDetail(response.payload);
+      }
+    }catch(err: any){
+      console.error("Error loading transactions status")
+    }finally{
+      setLoading(false);
     }
+      
   }
 
   useEffect(() => {
@@ -256,10 +267,16 @@ export function ResultScreen({ transaction, onClose }: Props) {
     if(transaction){
       loadTransaction();
     }
-  }, [transaction])
+  }, [transaction]);
+
+
+  if (loading && !transactionDetail) {
+    return <Gradients />;
+  }
 
   return (
     <Container style={{ opacity: opacAnim, transform: [{ translateY: slideAnim }] }}>
+
       <IconWrap style={{ transform: [{ scale: scaleAnim }] }}>
         <IconBg bg={bgColor}>
           {isSuccess ? <SuccessIcon /> : <FailedIcon />}
@@ -282,7 +299,7 @@ export function ResultScreen({ transaction, onClose }: Props) {
 
       <Footer>
         <CountdownRing duration={COUNTDOWN_SECONDS * 1000} />
-        <CloseBtn onPress={loadTransaction} activeOpacity={0.8}>
+        <CloseBtn onPress={onClose} activeOpacity={0.8}>
           <CloseBtnText>Close</CloseBtnText>
         </CloseBtn>
       </Footer>

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

@@ -17,15 +17,9 @@ import styled from 'styled-components/native';
 import Svg, { Path } from 'react-native-svg';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-import { transferAPI } from '../../../../core/api';
-import { FPButton } from '../../../components/FPButton';
-import { C, R, S, F, shadow } from '../../../theme';
 import type {
-  FPCurrency,
   FPError,
-  FPSendPaymentRequest,
   FPSendWalletPaymentRequest,
-  FPTransaction,
   FPUserInfo,
   FintechDevice,
   Props,
@@ -61,7 +55,7 @@ const Header = styled(View)`
 
 const HeaderButton = styled(TouchableOpacity)`
   padding: 8px;
-  background-color: #fff;
+  background-color: transparent;
   width: 40px;
   height: 40px;
   border-radius: 50px;
@@ -79,6 +73,7 @@ const HeaderRight = styled(View)`
   flex-direction: row;
   align-items: center;
   gap: 8px;
+  width: 25%;
 `;
 
 const QuickLinksContainer = styled(View)`
@@ -343,6 +338,8 @@ export function BluetoothSubScreen({
         request
       );
 
+      await FPEngine.stopListening();
+
       console.log('Component response: ', response);
 
       if (!response.accepted) {
@@ -367,8 +364,10 @@ export function BluetoothSubScreen({
         recipient: {
           accountName: response.accountDetails.accountName,
           accountNumber: response.accountDetails.accountNumber,
-          userId: response.accountDetails.userId,
+          userId: response.accountDetails.userId || "",
+          agentId: response.accountDetails.agentId || "",
           type: response.accountDetails.receiverType ?? 'USER',
+          terminalId: response.accountDetails.terminalId || ''
         },
         amount: request.amount.toString(),
         reference: response.transactionId ?? `BT_${Date.now()}`,
@@ -402,6 +401,8 @@ export function BluetoothSubScreen({
         Alert.alert('Error', 'Failed to send payment request');
       }
       onError?.(fp);
+    }finally{
+      await FPEngine.startListening();
     }
   };
 
@@ -422,7 +423,7 @@ export function BluetoothSubScreen({
 
         <HeaderRight>
           <HeaderButton>
-            <Ionicons name="ellipsis-vertical" size={22} />
+            {/* <Ionicons name="ellipsis-vertical" size={22} /> */}
           </HeaderButton>
         </HeaderRight>
       </Header>