react-native-fpay 0.4.20 → 0.4.21

package/src/store/FPStore.ts

@@ -30,7 +30,8 @@ export interface FPStoreState {
   tokenExpiresAt: number | null; // unix ms — null means no expiry info
 
   // User set via initializeSDK()
-  user: FPUserInfo | null;
+  user: any | null;
+  tempId: string;
 
   // Account details set via setAccountDetails()
   accountDetails: FPTransferRecipient | null;
@@ -50,7 +51,7 @@ export interface FPStoreState {
 
   lastBroadcastPosition: { latitude: number; longitude: number } | null;
 
-  apiKey: string | null;
+  appId: string | null;
 }
 
 // ── Actions shape ─────────────────────────────────────────────────────────────
@@ -59,8 +60,11 @@ export interface FPStoreActions {
   setAccessToken: (token: string, expiresInSeconds?: number) => void;
   clearAccessToken: () => void;
 
-  setUser: (user: FPUserInfo) => void;
+  setUser: (user: any) => void;
   clearUser: () => void;
+  
+  setTempId: (temp: string) => void;
+  clearTempId: () => void;
 
   setAccountDetails: (account: FPTransferRecipient) => void;
   setBalance: (payload: FPBalance) => void;
@@ -80,7 +84,7 @@ export interface FPStoreActions {
   // Full reset — call on logout
   reset: () => void;
 
-  setApiKey: (key: string) => void;
+  setAppId: (id: string) => void;
 }
 
 export type FPStore = FPStoreState & FPStoreActions;
@@ -101,7 +105,8 @@ const initialState: FPStoreState = {
   psspId: null,
   account: null,
   lastBroadcastPosition: null,
-  apiKey: null,
+  appId: null,
+  tempId: ''
 };
 
 // ── Store ─────────────────────────────────────────────────────────────────────
@@ -126,9 +131,11 @@ export const useFPStore = create<FPStore>()(
         }),
 
       setUser: (user) => set({ user }),
-
       clearUser: () => set({ user: null }),
 
+      setTempId: (temp) => set({ tempId: temp }),
+      clearTempId: () => set({ tempId: "" }),
+
       setAccountDetails: (accountDetails) => set({ accountDetails }),
       setBalance: (payload) => set({ balance: payload, balanceFetchedAt: Date.now() }),
       clearBalance: () => set({ balance: null, balanceFetchedAt: null }),
@@ -162,7 +169,7 @@ export const useFPStore = create<FPStore>()(
 
       reset: () => set(initialState),
 
-      setApiKey: (key: string) => set({ apiKey: key }),
+      setAppId: (id: string) => set({ appId: id }),
     }),
     {
       name: '@fp_store', // AsyncStorage key
@@ -180,7 +187,7 @@ export const useFPStore = create<FPStore>()(
         psspId: state.psspId,
         account: state.account,
         balance: state.balance,
-        apiKey: state.apiKey,
+        appId: state.appId,
         balanceFetchedAt: state.balanceFetchedAt,
         lastBroadcastPosition: state.lastBroadcastPosition,
         // isAuthenticated and authError are NOT persisted —

package/src/ui/components/ConfirmScreen.tsx

@@ -15,6 +15,7 @@ import styled from 'styled-components/native';
 import OTPInputs from './OtpInput';
 import InLoading from './LoadingAnimation/InLoading';
 import type {
+  FPInternalTransferRecipient,
   FPSendPaymentRequest,
   FPSendWalletPaymentRequest,
   FPTransferRecipient,
@@ -181,7 +182,7 @@ const ProcessingRow = styled.View`
 
 interface TransferReminderScreenProps {
   userId: string;
-  transaction: FPSendPaymentRequest | FPSendWalletPaymentRequest | null;
+  transaction: any;
   onContinue: (tempId: string) => void;
 }
 
@@ -266,13 +267,13 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
   const recipientName = transaction?.recipient.accountName ?? '';
   const accountNumber = transaction?.recipient.accountNumber ?? '';
   const bankName = !isWalletTransfer
-    ? (transaction?.recipient as FPTransferRecipient).bankName
+    ? (transaction?.recipient as any)?.bankName
     : undefined;
 
   const handleContinue = async () => {
     setProcessing(true);
     try {
-      const response: any = await transferAPI.validateTransfer(otp, userId);
+      const response: any = await transferAPI.validateTransfer(otp, userId, transaction?.recipient.id);
       console.log('Validate: ', response);
       if (!response.status) {
         Vibration.vibrate(100);

package/src/ui/modals/FPCreatePin.tsx

@@ -0,0 +1,206 @@
+import React from "react";
+import { useState } from "react";
+import { Animated, Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native"
+
+import { C, R, S, F, shadow } from '../theme';
+import OTPInputs from "../components/OtpInput";
+import styled from "styled-components/native";
+import InLoading from "../components/LoadingAnimation/InLoading";
+import { FPEngine } from "../../engine/FPEngine";
+
+
+
+
+const ProcessingRow = styled.View`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ButtonRow = styled(View)`
+  flex-direction: row;
+  gap: 12px;
+  margin-top: 32px;
+`;
+
+const ContinueButton = styled(TouchableOpacity)`
+  flex: 1;
+  background-color: #003333;
+  border-radius: 50px;
+  padding-vertical: 17px;
+  align-items: center;
+  justify-content: center;
+  shadow-color: #fff;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.3;
+  shadow-radius: 10px;
+  elevation: 6;
+`;
+
+const ContinueButtonText = styled(Text)`
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+`;
+
+const SubText = styled(Text)`
+  width: 90%;
+  font-size: 11px;
+  color: #666;
+`;
+
+const Container = styled(View)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`
+
+
+const FPCreatePin = () => {
+    const [processing, setProcessing] = useState(false);
+    const [otp, setOtp] = useState<string>('');
+    const scale = React.useRef(new Animated.Value(0.85)).current;
+    const buttonAnim = React.useRef(new Animated.Value(0)).current;
+    const [error, setError] = useState("")
+
+
+    const handleCreatePin = async() => {
+      setError("");
+      setProcessing(true);
+      try{
+        await FPEngine.createUserTransactionPin({pin: otp});
+      } catch (error: any) {
+        console.error('Error creating PIN:', error);
+        setError(error.message || "Error creating PIN")
+      } finally {
+        setProcessing(false);
+      }
+    }
+
+      
+    React.useEffect(() => {
+      Animated.sequence([
+        Animated.timing(buttonAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }, []);
+
+    return (
+        <Modal
+            visible
+            transparent
+            animationType="slide"
+            statusBarTranslucent
+            >
+            <View
+                style={{
+                flex: 1,
+                backgroundColor: 'rgba(0,0,0,0.5)',
+                justifyContent: 'center',
+                alignItems: 'center',
+                }}
+            >
+                <Animated.View style={{ transform: [{ scale }] }}>
+                    <View
+                    style={[st.card, {
+                        borderRadius: 20,
+                        padding: 30,
+                    }]}
+                    >
+                      <Container>
+                        <Text style={{ color: C.brand, fontSize: 16, fontWeight: '600', marginBottom: 16 }}>
+                          Create PIN
+                        </Text>
+                        <OTPInputs count={4} callBack={setOtp} />
+                        <SubText>Create your preferred pin to authorize transactions</SubText>  
+                        {error && <Text style={{ color: 'red', fontSize: 12, marginTop: 6 }}>{error}</Text>}
+                      </Container>
+                      
+                      {processing ? (
+                        <ProcessingRow>
+                          <ButtonRow>
+                            <InLoading />
+                          </ButtonRow>
+                        </ProcessingRow>
+                      ) : (
+                        <ButtonRow>
+                          <ContinueButton
+                            disabled={!otp}
+                            onPress={handleCreatePin}
+                            activeOpacity={0.85}
+                          >
+                            <ContinueButtonText>Create Pin</ContinueButtonText>
+                          </ContinueButton>
+                        </ButtonRow>
+                      )}
+                    </View>
+                </Animated.View>
+            </View>
+        </Modal>
+    );
+};
+
+const st = StyleSheet.create({
+  scrim: {
+    flex: 1,
+    backgroundColor: 'rgba(11,29,53,0.6)',
+    justifyContent: 'flex-end',
+    padding: S.lg,
+    paddingBottom: 48,
+  },
+  card: {
+    backgroundColor: C.white,
+    borderRadius: 28,
+    padding: S.xl,
+    alignItems: 'center',
+    ...shadow.lg,
+  },
+  avatar: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: C.brandLight,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: S.md,
+  },
+  avatarText: { fontSize: 28, fontWeight: '800', color: C.brand },
+  headline: {
+    fontSize: F.sm,
+    fontWeight: '700',
+    color: C.muted,
+    letterSpacing: 0.8,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  sender: { fontSize: F.xl, fontWeight: '800', color: C.ink },
+  sub: { fontSize: F.md, color: C.muted, marginBottom: S.sm },
+  amount: { fontSize: 40, fontWeight: '800', color: C.ink, marginBottom: S.md },
+  noteBox: {
+    backgroundColor: C.surface,
+    borderRadius: R.md,
+    padding: S.md,
+    width: '100%',
+    marginBottom: S.md,
+  },
+  noteLabel: { fontSize: F.xs, color: C.muted, marginBottom: 2 },
+  note: { fontSize: F.md, color: C.ink },
+  disclaimer: {
+    fontSize: F.sm,
+    color: C.muted,
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: S.lg,
+  },
+  btnRow: { flexDirection: 'row', gap: S.sm, width: '100%' },
+  declineBtn: { flex: 1 },
+  acceptBtn: { flex: 1 },
+});
+export default FPCreatePin;

package/src/ui/modals/FPShell.tsx

@@ -16,10 +16,13 @@ import {
 import { _onEvent } from '../../engine/FPEngine';
 import SendScreen from '../screens/SendScreen';
 import ReceiveScreen from '../screens/ReceiveScreen';
+import FPValidateBvn from '../modals/FPValidateBvn';
+import FPCreatePin from '../modals/FPCreatePin';
 import { FPPaymentRequestModal } from './FPPaymentRequestModal';
 import { FPEngine } from '../../engine/FPEngine';
 import { C, S, F } from '../theme';
 import type { FPCurrency, FPUserInfo } from '../../core/types';
+import { useFPStore } from '../../store/FPStore';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
@@ -37,6 +40,8 @@ export function FPShell() {
   const [visible, setVisible] = useState(false);
   const slide = useRef(new Animated.Value(SCREEN_H)).current;
 
+  const user = useFPStore(s => s.user);
+
   const open = (state: SheetState) => {
     setSheet(state);
     setVisible(true);
@@ -89,6 +94,15 @@ export function FPShell() {
   return (
     <>
       {/* Always-on BT payment request modal */}
+      {user && user?.verifyBvn === false && (
+        <FPValidateBvn />
+      )}
+
+      {/* PIN creation — shown after BVN verified but no PIN yet */}
+      {user && user.verifyBvn === true && user.hasPin === false && (
+        <FPCreatePin />
+      )}
+
       <FPPaymentRequestModal />
 
       {visible && (
@@ -98,7 +112,7 @@ export function FPShell() {
           <View style={st.content}>
             {sheet.mode === 'send' && (
               <SendScreen
-                user={FPEngine.getUser() ?? null}
+                user={user ?? null}
                 account={FPEngine.getAccount() ?? null}
                 amount={sheet.amount ?? 0}
                 currency={sheet.currency ?? 'NGN'}
@@ -113,7 +127,7 @@ export function FPShell() {
               <ReceiveScreen
                 amount={sheet.amount}
                 currency={sheet.currency}
-                user={FPEngine.getUser() ?? null}
+                user={user ?? null}
                 account={FPEngine.getAccount() ?? null}
                 onClose={close}
                 onPaymentReceived={FPEngine.getCallbacks().onPaymentReceived}

package/src/ui/modals/FPValidateBvn.tsx

@@ -0,0 +1,229 @@
+import React from "react";
+import { useState } from "react";
+import { Animated, Modal, StyleSheet, Text, TouchableOpacity, View } from "react-native"
+
+import { C, R, S, F, shadow } from '../theme';
+import OTPInputs from "../components/OtpInput";
+import styled from "styled-components/native";
+import InLoading from "../components/LoadingAnimation/InLoading";
+import { FPEngine } from "../../engine/FPEngine";
+import { getFPStore } from "../../store/FPStore";
+
+
+
+const ProcessingRow = styled.View`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ButtonRow = styled(View)`
+  flex-direction: row;
+  gap: 12px;
+  margin-top: 32px;
+`;
+
+const ContinueButton = styled(TouchableOpacity)`
+  flex: 1;
+  background-color: #003333;
+  border-radius: 50px;
+  padding-vertical: 17px;
+  align-items: center;
+  justify-content: center;
+  shadow-color: #fff;
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.3;
+  shadow-radius: 10px;
+  elevation: 6;
+`;
+
+const ContinueButtonText = styled(Text)`
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+`;
+
+const SubText = styled(Text)`
+  width: 90%;
+  font-size: 11px;
+  color: #666;
+`;
+
+const Container = styled(View)`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+`
+
+const FPValidateBvn = () => {
+    const [processing, setProcessing] = useState(false);
+    const scale = React.useRef(new Animated.Value(0.85)).current;
+    const buttonAnim = React.useRef(new Animated.Value(0)).current;
+    const [otp, setOtp] = useState<string>('');
+    const [error, setError] = useState("")
+
+
+    const resendSms = async()=>{
+      setError("");
+      setProcessing(true);
+      try{
+        // TODO: Implement BVN validation logic here
+        await FPEngine.verifyBvn();
+      } catch (error: any) {
+        console.error('Error validating BVN:', error);
+        setError(error.message || "BVN not found")
+      } finally {
+        setProcessing(false);
+      }
+    }
+
+    const handleValidateBvn = async() => {
+      setProcessing(true);
+      setError("");
+      try{
+        // TODO: Implement BVN validation logic here
+        const values: any = {
+          otp,
+          temp_id: getFPStore().tempId
+        };
+        await FPEngine.verifySmsOtp(values);
+      } catch (error: any) {
+        console.error('Error validating BVN:', error);
+        setError(error.message || "Invalid token")
+      } finally {
+        setProcessing(false);
+      }
+    }
+      
+    React.useEffect(() => {
+      resendSms();
+      Animated.sequence([
+        Animated.timing(buttonAnim, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }, []);
+    return (
+        <Modal
+            visible
+            transparent
+            animationType="slide"
+            statusBarTranslucent
+            >
+            <View
+                style={{
+                flex: 1,
+                backgroundColor: 'rgba(0,0,0,0.5)',
+                justifyContent: 'center',
+                alignItems: 'center',
+                }}
+            >
+              <Animated.View style={{ transform: [{ scale }] }}>
+                <View
+                style={[st.card, {
+                    borderRadius: 20,
+                    padding: 30,
+                }]}
+                >
+                    
+                    <Container>
+                      <Text style={{ color: C.brand, fontSize: 16, fontWeight: '600', marginBottom: 6 }}>
+                          Validate your BVN
+                      </Text>
+                      <OTPInputs count={4} callBack={setOtp} />
+                      <SubText>SMS has been sent to the phone number tied to your BVN</SubText>  
+                      <TouchableOpacity onPress={resendSms}>
+                        <Text>Resend token</Text>
+                      </TouchableOpacity>
+                      {error && <Text style={{ color: 'red', fontSize: 12, marginTop: 6 }}>{error}</Text>}
+                    </Container>
+                      
+                    
+                    {processing ? (
+                      <ProcessingRow>
+                        <ButtonRow>
+                          <InLoading />
+                        </ButtonRow>
+                      </ProcessingRow>
+                    ) : (
+                      <ButtonRow>
+                        <ContinueButton
+                          disabled={!otp}
+                          onPress={handleValidateBvn}
+                          activeOpacity={0.85}
+                        >
+                          <ContinueButtonText>Verify Me</ContinueButtonText>
+                        </ContinueButton>
+                      </ButtonRow>
+                    )}
+                </View>
+              </Animated.View>
+            </View>
+        </Modal>
+    );
+};
+
+const st = StyleSheet.create({
+  scrim: {
+    flex: 1,
+    backgroundColor: 'rgba(11,29,53,0.6)',
+    justifyContent: 'flex-end',
+    padding: S.lg,
+    paddingBottom: 48,
+  },
+  card: {
+    width: '70%',
+    backgroundColor: C.white,
+    borderRadius: 28,
+    padding: S.xl,
+    alignItems: 'center',
+    ...shadow.lg,
+  },
+  avatar: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    backgroundColor: C.brandLight,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: S.md,
+  },
+  avatarText: { fontSize: 28, fontWeight: '800', color: C.brand },
+  headline: {
+    fontSize: F.sm,
+    fontWeight: '700',
+    color: C.muted,
+    letterSpacing: 0.8,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  sender: { fontSize: F.xl, fontWeight: '800', color: C.ink },
+  sub: { fontSize: F.md, color: C.muted, marginBottom: S.sm },
+  amount: { fontSize: 40, fontWeight: '800', color: C.ink, marginBottom: S.md },
+  noteBox: {
+    backgroundColor: C.surface,
+    borderRadius: R.md,
+    padding: S.md,
+    width: '100%',
+    marginBottom: S.md,
+  },
+  noteLabel: { fontSize: F.xs, color: C.muted, marginBottom: 2 },
+  note: { fontSize: F.md, color: C.ink },
+  disclaimer: {
+    fontSize: F.sm,
+    color: C.muted,
+    textAlign: 'center',
+    lineHeight: 20,
+    marginBottom: S.lg,
+  },
+  btnRow: { flexDirection: 'row', gap: S.sm, width: '100%' },
+  declineBtn: { flex: 1 },
+  acceptBtn: { flex: 1 },
+});
+export default FPValidateBvn;

package/src/ui/screens/ResultScreen.tsx

@@ -206,9 +206,9 @@ 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;
-  const scaleAnim = useRef(new Animated.Value(0.5)).current;
+  const opacAnim  = useRef(new Animated.Value(1)).current;  // ← start visible
+  const slideAnim = useRef(new Animated.Value(0)).current;  // ← start in place
+  const scaleAnim = useRef(new Animated.Value(1)).current;  // ← start full size
 
   const isSuccess = transactionDetail?.status.toLowerCase() === 'successful';
   const accentColor = isSuccess ? C.green : C.red;
@@ -250,19 +250,14 @@ export function ResultScreen({ transaction, onClose }: Props) {
       
   }
 
-  useEffect(() => {
-    Animated.parallel([
-      Animated.spring(scaleAnim, { toValue: 1, useNativeDriver: true }),
-      Animated.timing(opacAnim, { toValue: 1, duration: 300, useNativeDriver: true }),
-      Animated.timing(slideAnim, { toValue: 0, duration: 350, useNativeDriver: true }),
-    ]).start();
-  }, [scaleAnim, opacAnim, slideAnim]);
+  
 
   useEffect(() => {
     const timer = setTimeout(onClose, COUNTDOWN_SECONDS * 1000);
     return () => clearTimeout(timer);
   }, [onClose]);
 
+
   useEffect(()=>{
     if(transaction){
       loadTransaction();
@@ -274,6 +269,7 @@ export function ResultScreen({ transaction, onClose }: Props) {
     return <Gradients />;
   }
 
+
   return (
     <Container style={{ opacity: opacAnim, transform: [{ translateY: slideAnim }] }}>