react-native-fpay 0.4.13 → 0.4.15

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,91 @@ 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);
+
+            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 +194,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 +230,14 @@ export function FountainPayProvider({
     return () => {
       cancelled = true;
     };
-  }, [apiKey]);
+  }, [apiKey, accessToken]);
 
   // 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 {
@@ -182,7 +260,7 @@ export function FountainPayProvider({
           //   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

@@ -11,6 +11,7 @@ import type {
   FPAccount,
   FPSendWalletPaymentRequest,
   FPTransactionResponse,
+  FPBalance,
 } from '../types';
 
 export const healthAPI = {
@@ -40,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 = {
@@ -71,10 +90,10 @@ export const accountAPI = {
   // Get balance using PSSP id
   getBalance: (psspId: string) =>
     http()
-      .get<{ payload: { balance: number; currency: string, daily_limit: number, single_txn_limit: number, max_balance: number } }>(
+      .get<{ payload: FPBalance }>(
         `/get-balance/${psspId}`
       )
-      .then((r) => r.data.payload),
+      .then((r) => r.data.payload as FPBalance),
 };
 
 export const transferAPI = {

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 {
@@ -68,9 +70,9 @@ export interface FPParty {
 export interface FPBalance {
   balance: number;
   currency: string;
-  daily_limit: number;
-  single_txn_limit: number;
-  max_balance: number;
+  dailyLimit: number;
+  singleTxnLimit: number;
+  maxBalance: number;
 };
 
 export interface FPSendPaymentRequest {
@@ -172,7 +174,7 @@ export interface FPAccount {
   phone: string;
   bankName?: string;
   bankCode?: string;
-  balance?: FPBalance;
+  balance?: FPBalance | null;
   currency?: string;
 }
 

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);

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,
@@ -343,6 +337,8 @@ export function BluetoothSubScreen({
         request
       );
 
+      await FPEngine.stopListening();
+
       console.log('Component response: ', response);
 
       if (!response.accepted) {
@@ -367,8 +363,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 +400,8 @@ export function BluetoothSubScreen({
         Alert.alert('Error', 'Failed to send payment request');
       }
       onError?.(fp);
+    }finally{
+      await FPEngine.startListening();
     }
   };