react-native-fpay 0.2.9 → 0.3.2

package/src/ui/components/ConfirmScreen.tsx

@@ -0,0 +1,421 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  StatusBar,
+  Dimensions,
+  SafeAreaView,
+  Vibration,
+} from "react-native";
+import styled from "styled-components/native";
+import OTPInputs from "./OtpInput";
+import { transactionAPI } from "../../core/api";
+import InLoading from "./LoadingAnimation/InLoading";
+import type { FPSendPaymentRequest } from "../../core/types";
+
+const { width } = Dimensions.get("window");
+
+// ─── Styled Components ───────────────────────────────────────────────────────
+
+const SafeContainer = styled(SafeAreaView)`
+  flex: 1;
+  background-color: #ffffff;
+`;
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: #ffffff;
+  padding-horizontal: 24px;
+  padding-top: 32px;
+  padding-bottom: 24px;
+  justify-content: space-between;
+`;
+
+const Header = styled(View)`
+  align-items: center;
+  margin-bottom: 28px;
+`;
+
+const Title = styled(Text)`
+  font-size: 26px;
+  font-weight: 700;
+  color: #111827;
+  letter-spacing: -0.5px;
+  margin-bottom: 12px;
+  font-family: "System";
+`;
+
+const SubTitle = styled(Text)`
+  font-size: 15px;
+  color: #6b7280;
+  text-align: center;
+  line-height: 22px;
+  max-width: 300px;
+`;
+
+const Card = styled(View)`
+  background-color: #f9fafb;
+  border-radius: 20px;
+  padding: 24px;
+  border-width: 1px;
+  border-color: #f0f0f0;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.04;
+  shadow-radius: 8px;
+  elevation: 2;
+`;
+
+const CardTitle = styled(Text)`
+  font-size: 16px;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 20px;
+  letter-spacing: -0.2px;
+`;
+
+const Divider = styled(View)`
+  height: 1px;
+  background-color: #e5e7eb;
+  margin-vertical: 14px;
+`;
+
+const Row = styled(View)`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const RowLabel = styled(Text)`
+  font-size: 14px;
+  color: #9ca3af;
+  font-weight: 500;
+  flex: 1;
+`;
+
+const RowValue = styled(Text)`
+  font-size: 14px;
+  color: #111827;
+  font-weight: 600;
+  flex: 1.5;
+  text-align: right;
+`;
+
+const AmountBadge = styled(View)`
+  background-color: #374151;
+  border-radius: 6px;
+  padding-horizontal: 10px;
+  padding-vertical: 4px;
+  align-self: flex-end;
+  margin-bottom: 4px;
+`;
+
+const AmountBadgeText = styled(Text)`
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+`;
+
+const AmountValue = styled(Text)`
+  font-size: 22px;
+  color: #111827;
+  font-weight: 800;
+  text-align: right;
+  letter-spacing: -0.5px;
+`;
+
+const AmountRow = styled(View)`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+`;
+
+const AmountLabelContainer = styled(View)`
+  justify-content: flex-end;
+  padding-bottom: 2px;
+`;
+
+const AmountRightContainer = styled(View)`
+  align-items: flex-end;
+`;
+
+const ButtonRow = styled(View)`
+  flex-direction: row;
+  gap: 12px;
+  margin-top: 32px;
+`;
+
+interface RecheckButtonProps {
+  disabled?: boolean;
+}
+
+const RecheckButton = styled(TouchableOpacity)<RecheckButtonProps>`
+  flex: 1;
+  background-color: #dcfce7;
+  border-radius: 50px;
+  padding-vertical: 17px;
+  align-items: center;
+  justify-content: center;
+`;
+
+const RecheckButtonText = styled(Text)`
+  color: #16a34a;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+`;
+
+const ContinueButton = styled(TouchableOpacity)`
+  flex: 1;
+  background-color: #16a34a;
+  border-radius: 50px;
+  padding-vertical: 17px;
+  align-items: center;
+  justify-content: center;
+  shadow-color: #16a34a;
+  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;
+`;
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface TransferReminderScreenProps {
+  transaction: FPSendPaymentRequest;
+  onRecheck: () => void;
+  onContinue: () => void;
+}
+
+const getAmountInWords=(amount: number): string=> {
+  const ones = [
+    "One",
+    "Two",
+    "Three",
+    "Four",
+    "Five",
+    "Six",
+    "Seven",
+    "Eight",
+    "Nine",
+    "Ten",
+    "Eleven",
+    "Twelve",
+    "Thirteen",
+    "Fourteen",
+    "Fifteen",
+    "Sixteen",
+    "Seventeen",
+    "Eighteen",
+    "Nineteen",
+  ];
+  const tens = [
+    "",
+    "",
+    "Twenty",
+    "Thirty",
+    "Forty",
+    "Fifty",
+    "Sixty",
+    "Seventy",
+    "Eighty",
+    "Ninety",
+  ];
+
+  const integer = Math.floor(amount);
+
+  if (integer === 0) return "Zero";
+  if (integer < 20) return ones[integer] || "";
+  if (integer < 100)
+    return `${tens[Math.floor(integer / 10)]}${integer % 10 ? " " + ones[integer % 10] : ""}`;
+  if (integer < 1000)
+    return `${ones[Math.floor(integer / 100)]} Hundred${integer % 100 ? " " + getAmountInWords(integer % 100) : ""}`;
+
+  return `${integer.toLocaleString()}`;
+}
+// ─── Sub-components ──────────────────────────────────────────────────────────
+const DetailRow: React.FC<{ label: string; value: string }> = ({
+  label,
+  value,
+}) => (
+  <>
+    <Row>
+      <RowLabel>{label}</RowLabel>
+      <RowValue>{value}</RowValue>
+    </Row>
+    <Divider />
+  </>
+);
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+
+const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
+  transaction,
+  onRecheck,
+  onContinue,
+}) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const slideAnim = useRef(new Animated.Value(30)).current;
+  const cardAnim = useRef(new Animated.Value(0)).current;
+  const cardSlideAnim = useRef(new Animated.Value(20)).current;
+  const buttonAnim = useRef(new Animated.Value(0)).current;
+
+  const [processing, setProcessing] = useState<boolean>(false);
+  const [errText, setErrText] = useState<string>("");
+  const [otp, setOtp] = useState<string>("");
+
+  const handleContinue=async()=>{
+    setProcessing(true);
+    try{
+      const response: any = await transactionAPI.validateOtp(otp, transaction?.sender?.email ?? '' );
+      if(!response.status){
+        Vibration.vibrate(100);
+        setErrText(response.message);
+        return;
+      }
+      onContinue();
+    }catch(error: any){
+      setErrText(error.message);
+    }finally{
+      setProcessing(true);
+    }
+    
+  }
+
+  useEffect(() => {
+    Animated.sequence([
+      Animated.parallel([
+        Animated.timing(fadeAnim, {
+          toValue: 1,
+          duration: 400,
+          useNativeDriver: true,
+        }),
+        Animated.timing(slideAnim, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true,
+        }),
+      ]),
+      Animated.parallel([
+        Animated.timing(cardAnim, {
+          toValue: 1,
+          duration: 350,
+          useNativeDriver: true,
+        }),
+        Animated.timing(cardSlideAnim, {
+          toValue: 0,
+          duration: 350,
+          useNativeDriver: true,
+        }),
+      ]),
+      Animated.timing(buttonAnim, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  const formattedAmount = `${transaction?.currency ?? "₦"}${transaction?.amount.toFixed(2)}`;
+  const amountWords = getAmountInWords(transaction?.amount || 0);
+
+  return (
+      <Container>
+        <View>
+          <Animated.View
+            style={{
+              opacity: fadeAnim,
+              transform: [{ translateY: slideAnim }],
+            }}
+          >
+            <Header>
+              <Title>Reminder</Title>
+              <SubTitle>
+                Double check the transfer details before you proceed. Please
+                note that successful transfers cannot be reversed.
+              </SubTitle>
+            </Header>
+          </Animated.View>
+
+          {/* Card */}
+          <Animated.View
+            style={{
+              opacity: cardAnim,
+              transform: [{ translateY: cardSlideAnim }],
+            }}
+          >
+            <Card>
+              <CardTitle>Transaction Details</CardTitle>
+
+              <DetailRow label="Name" value={transaction?.recipient.accountName || ""} />
+              {transaction?.channel === 'transfer' && (
+                <>
+                  <Row>
+                    <RowLabel>Bank</RowLabel>
+                    <RowValue>{transaction?.recipient?.bankName}</RowValue>
+                  </Row>
+                  <Row>
+                    <RowLabel>Account No.</RowLabel>
+                    <RowValue>{transaction?.recipient?.accountNumber}</RowValue>
+                  </Row>
+                </>
+              )}
+              
+              <Divider />
+
+              <AmountRow>
+                <AmountLabelContainer>
+                  <RowLabel>Amount</RowLabel>
+                </AmountLabelContainer>
+                <AmountRightContainer>
+                  <AmountBadge>
+                    <AmountBadgeText>{amountWords}</AmountBadgeText>
+                  </AmountBadge>
+                  <AmountValue>{formattedAmount}</AmountValue>
+                </AmountRightContainer>
+              </AmountRow>
+            </Card>
+
+            <Card>
+                <OTPInputs callBack={setOtp} />
+            </Card>
+          </Animated.View>
+        </View>
+
+        {/* Buttons */}
+        <Animated.View style={{ opacity: buttonAnim }}>
+          {processing ? (
+            <ButtonRow>
+              <InLoading />
+            </ButtonRow>
+          ) : (
+            <ButtonRow>
+              <RecheckButton onPress={onRecheck} activeOpacity={0.75}>
+                <RecheckButtonText>Cancel</RecheckButtonText>
+              </RecheckButton>
+              <ContinueButton disabled={!otp} onPress={handleContinue} activeOpacity={0.85}>
+                <ContinueButtonText>Confirm</ContinueButtonText>
+              </ContinueButton>
+            </ButtonRow>
+          )}
+          
+        </Animated.View>
+      </Container>
+  );
+};
+
+
+
+
+export default ConfirmScreen;

package/src/ui/modals/FPPaymentRequestModal.tsx

@@ -3,13 +3,16 @@ import { View, Text, Modal, StyleSheet, Animated, TouchableOpacity } from 'react
 import { FPEngine, _onEvent } from '../../engine/FPEngine';
 import { FPButton } from '../components/FPButton';
 import { C, R, S, F, shadow } from '../theme';
-import type { FPBluetoothPaymentRequest } from '../../core/types';
+import type { FPBluetoothPaymentRequest, FPTransferRecipient, FPUserInfo } from '../../core/types';
 
 export function FPPaymentRequestModal() {
   const [request, setRequest] = useState<FPBluetoothPaymentRequest | null>(null);
   const [loading, setLoading] = useState(false);
   const scale = React.useRef(new Animated.Value(0.85)).current;
 
+  const recipient: FPUserInfo | null = FPEngine.getUser() ?? null;
+  const recipientAccount: FPTransferRecipient | null = FPEngine.getAccount() ?? null;
+
   useEffect(() => {
     const unsub = _onEvent('incoming_payment_request', (req: unknown) => {
       setRequest(req as FPBluetoothPaymentRequest);
@@ -36,8 +39,6 @@ export function FPPaymentRequestModal() {
 
   if (!request) return null;
 
-  const user = FPEngine.getUser();
-  const amountFormatted = (request.amount / 100).toLocaleString('en-NG', { minimumFractionDigits: 2 });
 
   return (
     <Modal
@@ -64,7 +65,7 @@ export function FPPaymentRequestModal() {
           <Animated.View style={[st.card, { transform: [{ scale }] }]}>
             <View style={st.avatar}>
               <Text style={st.avatarText}>
-                {(request?.sender.accountName ?? request?.sender.deviceName ?? '?').charAt(0).toUpperCase()}
+                {(request?.sender.name ?? request?.sender.deviceName ?? '?').charAt(0).toUpperCase()}
               </Text>
             </View>
             <Text style={st.headline}>Payment Request</Text>
@@ -88,7 +89,7 @@ export function FPPaymentRequestModal() {
                   marginBottom: 20,
                 }}
               >
-                {request.sender.accountName ?? request.sender.deviceName ?? 'Someone'}
+                {request.sender.name ?? request.sender.deviceName ?? 'Someone'}
               </Text>
               <Text style={st.sub}>wants to send you</Text>
               {request.amount &&(
@@ -123,7 +124,7 @@ export function FPPaymentRequestModal() {
               ) : null}
               <Text style={st.disclaimer}>
                 Accepting will receive into{'\n'}
-                <Text style={{ fontWeight: '700' }}>{user?.accountName}</Text> ({user?.accountNumber})
+                <Text style={{ fontWeight: '700' }}>{recipientAccount?.accountName}</Text> ({recipientAccount?.accountNumber})
               </Text>
             </View>
 

package/src/ui/modals/FPShell.tsx

@@ -8,17 +8,18 @@ import React, { useEffect, useState, useRef } from 'react';
 import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated, Dimensions, SafeAreaView, StatusBar, Platform } from 'react-native';
 import { _onEvent } from '../../engine/FPEngine';
 import SendScreen from '../screens/SendScreen';
-import { ReceiveScreen } from '../screens/ReceiveScreen';
+import ReceiveScreen from '../screens/ReceiveScreen';
 import { FPPaymentRequestModal } from './FPPaymentRequestModal';
 import { FPEngine } from '../../engine/FPEngine';
 import { C, S, F, shadow } from '../theme';
-import type { FPCurrency } from '../../core/types';
+import type { FPCurrency, FPUserInfo } from '../../core/types';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
 type SheetMode = 'send' | 'receive' | null;
 
 interface SheetState {
+  user?: FPUserInfo;
   mode: SheetMode;
   amount?: number;
   currency?: FPCurrency;
@@ -54,19 +55,15 @@ export function FPShell() {
   useEffect(() => {
     const unsubSend = _onEvent('show_send', (d: unknown) => {
       const data = d as any;
-      open({ mode: 'send', amount: data?.amount, currency: data?.currency });
+      open({ mode: 'send', user: data?.user, amount: data?.amount, currency: data?.currency });
     });
     const unsubReceive = _onEvent('show_receive', (d: unknown) => {
       const data = d as any;
-      open({ mode: 'receive', amount: data?.amount, currency: data?.currency });
+      open({ mode: 'receive', user: data?.user, amount: data?.amount, currency: data?.currency });
     });
     return () => { unsubSend(); unsubReceive(); };
   }, []);
 
-  const title = sheet.mode === 'send' ? 'Send Money' : 'Receive Money';
-  const accentColor = sheet.mode === 'send' ? C.brand : C.green;
-
-
   return (
     <>
       {/* Always-on BT payment request modal */}
@@ -79,6 +76,8 @@ export function FPShell() {
             <View style={st.content}>
               {sheet.mode === 'send' && (
                 <SendScreen
+                  user={FPEngine.getUser() ?? null}
+                  account={FPEngine.getAccount() ?? null}
                   amount={sheet.amount ?? 0}
                   currency={sheet.currency ?? 'NGN'}
                   onClose={close}
@@ -93,7 +92,8 @@ export function FPShell() {
                 <ReceiveScreen
                   amount={sheet.amount}
                   currency={sheet.currency}
-                  user={FPEngine.getUser() ?? undefined}
+                  user={FPEngine.getUser() ?? null}
+                  account={FPEngine.getAccount() ?? null}
                   onClose={close}
                   onPaymentReceived={FPEngine.getCallbacks().onPaymentReceived}
                   onError={FPEngine.getCallbacks().onError}