react-native-fpay 0.3.13 → 0.3.16

package/src/ui/screens/ResultScreen.tsx

@@ -0,0 +1,291 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, TouchableOpacity } from 'react-native';
+import Svg, { Path, Circle } from 'react-native-svg';
+import styled from 'styled-components/native';
+import { C, F, R, S } from '../theme';
+import type { FPTransaction } from '../../core/types';
+import { transferAPI } from '../../core/api';
+
+// ── Icons ─────────────────────────────────────────────────────
+
+const SuccessIcon = () => (
+  <Svg width={64} height={64} viewBox="0 0 64 64" fill="none">
+    <Circle cx="32" cy="32" r="32" fill="#00875A" />
+    <Path d="M20 33L28 41L44 24" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" />
+  </Svg>
+);
+
+const FailedIcon = () => (
+  <Svg width={64} height={64} viewBox="0 0 64 64" fill="none">
+    <Circle cx="32" cy="32" r="32" fill="#DE350B" />
+    <Path d="M22 22L42 42M42 22L22 42" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" />
+  </Svg>
+);
+
+// ── Styled Components ─────────────────────────────────────────
+
+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 IconWrap = styled(Animated.View)`
+  margin-bottom: ${S.lg}px;
+`;
+
+const IconBg = styled.View<{ bg: string }>`
+  width: 112px;
+  height: 112px;
+  border-radius: 56px;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ bg }) => bg};
+`;
+
+const StatusText = styled.Text<{ color: string }>`
+  font-size: ${F.xl}px;
+  font-weight: 800;
+  margin-bottom: ${S.sm}px;
+  text-align: center;
+  color: ${({ color }) => color};
+`;
+
+const Amount = styled.Text`
+  font-size: ${F.hero}px;
+  font-weight: 900;
+  color: ${C.ink};
+  margin-bottom: ${S.xl}px;
+  letter-spacing: -1px;
+`;
+
+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 RowWrap = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${S.sm}px 0;
+  border-bottom-width: 1px;
+  border-bottom-color: ${C.border};
+`;
+
+const RowLabel = styled.Text`
+  font-size: ${F.sm}px;
+  color: ${C.muted};
+  font-weight: 500;
+`;
+
+const RowValue = styled.Text`
+  font-size: ${F.sm}px;
+  color: ${C.ink};
+  font-weight: 700;
+  max-width: 60%;
+  text-align: right;
+`;
+
+const Footer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: auto;
+`;
+
+const CloseBtn = styled(TouchableOpacity)`
+  flex: 1;
+  background-color: ${C.brand};
+  border-radius: ${R.full}px;
+  padding: ${S.md}px 0;
+  align-items: center;
+  margin-left: ${S.md}px;
+`;
+
+const CloseBtnText = styled.Text`
+  color: ${C.white};
+  font-weight: 800;
+  font-size: ${F.md}px;
+`;
+
+const RingWrap = styled.View`
+  width: 48px;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const RingLabel = styled.Text`
+  position: absolute;
+  font-size: 8px;
+  color: ${C.muted};
+  text-align: center;
+  font-weight: 600;
+`;
+
+// ── Countdown ────────────────────────────────────────────────
+
+const COUNTDOWN_SECONDS = 5;
+const RING_SIZE = 48;
+const STROKE_WIDTH = 3;
+const RADIUS = (RING_SIZE - STROKE_WIDTH) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+function CountdownRing({ duration }: { duration: number }) {
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: 1,
+      duration,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  }, [duration, progress]);
+
+  const strokeDashoffset = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, CIRCUMFERENCE],
+  });
+
+  return (
+    <RingWrap>
+      <Svg width={RING_SIZE} height={RING_SIZE}>
+        <Circle
+          cx={RING_SIZE / 2}
+          cy={RING_SIZE / 2}
+          r={RADIUS}
+          stroke={C.border}
+          strokeWidth={STROKE_WIDTH}
+          fill="none"
+        />
+        <AnimatedCircle
+          cx={RING_SIZE / 2}
+          cy={RING_SIZE / 2}
+          r={RADIUS}
+          stroke={C.brand}
+          strokeWidth={STROKE_WIDTH}
+          fill="none"
+          strokeDasharray={`${CIRCUMFERENCE} ${CIRCUMFERENCE}`}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+          rotation="-90"
+          origin={`${RING_SIZE / 2}, ${RING_SIZE / 2}`}
+        />
+      </Svg>
+      <RingLabel>{`Auto\nclose`}</RingLabel>
+    </RingWrap>
+  );
+}
+
+// ── Row ──────────────────────────────────────────────────────
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <RowWrap>
+      <RowLabel>{label}</RowLabel>
+      <RowValue>{value}</RowValue>
+    </RowWrap>
+  );
+}
+
+// ── Main ─────────────────────────────────────────────────────
+
+interface Props {
+  transaction: FPTransaction | any;
+  onClose: () => void;
+}
+
+export function ResultScreen({ transaction, onClose }: Props) {
+  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 isSuccess = transactionDetail?.status.toLowerCase() === 'successful';
+  const accentColor = isSuccess ? C.green : C.red;
+  const bgColor = isSuccess ? '#E3FCEF' : '#FFEBE6';
+
+  const formatted = `${transactionDetail?.currency || 'NGN'} ${Number(transactionDetail?.amount).toLocaleString('en-NG', {
+    minimumFractionDigits: 2,
+  })}`;
+
+  const recipient = transaction?.recipient as any;
+  const recipientName = recipient?.accountName ?? recipient?.name ?? '—';
+
+  const channelLabel: Record<string, string> = {
+    transfer: 'Bank Transfer',
+    bluetooth: 'Bluetooth',
+    proximity: 'Nearby',
+    nqr: 'QR Code',
+    nfc: 'NFC Tap',
+  };
+
+  const dateStr = transactionDetail?.createdAt
+    ? new Date(transactionDetail?.createdAt).toLocaleString('en-NG')
+    : '—';
+
+  const loadTransaction = async()=>{
+    const response = await transferAPI.status(transaction.reference) as any;
+    console.log("Transaction payload: ", response);
+    if(response.status){
+      setTransactionDetail(response.payload);
+    }
+  }
+
+  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();
+    }
+  }, [transaction])
+
+  return (
+    <Container style={{ opacity: opacAnim, transform: [{ translateY: slideAnim }] }}>
+      <IconWrap style={{ transform: [{ scale: scaleAnim }] }}>
+        <IconBg bg={bgColor}>
+          {isSuccess ? <SuccessIcon /> : <FailedIcon />}
+        </IconBg>
+      </IconWrap>
+
+      <StatusText color={accentColor}>
+        {isSuccess ? 'Payment Successful' : 'Payment Failed'}
+      </StatusText>
+
+      <Amount>{formatted}</Amount>
+
+      <Card>
+        <Row label="To" value={recipientName} />
+        <Row label="Channel" value={channelLabel[transactionDetail?.channel] ?? transaction?.channel} />
+        <Row label="Reference" value={transactionDetail?.reference} />
+        <Row label="Date" value={dateStr} />
+        <Row label="Status" value={transactionDetail?.status?.toUpperCase()} />
+      </Card>
+
+      <Footer>
+        <CountdownRing duration={COUNTDOWN_SECONDS * 1000} />
+        <CloseBtn onPress={loadTransaction} activeOpacity={0.8}>
+          <CloseBtnText>Close</CloseBtnText>
+        </CloseBtn>
+      </Footer>
+    </Container>
+  );
+}

package/src/ui/screens/SendScreen.tsx

@@ -3,18 +3,14 @@
 // Shows channel selection, then opens the
 // relevant sub-screen in the same modal sheet
 // ─────────────────────────────────────────────
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   View,
   Text,
   TouchableOpacity,
-  StyleSheet,
   ScrollView,
   Dimensions,
-  TextInput,
 } from 'react-native';
-import { C, R, S, F, shadow } from '../theme';
-import { FPButton } from '../components/FPButton';
 import { TransferSubScreen } from './sub/sendPayment/TransferSubScreen';
 import { NQRSubScreen } from './sub/sendPayment/NQRSubScreen';
 import { ProximitySubScreen } from './sub/sendPayment/ProximitySubScreen';
@@ -29,27 +25,17 @@ import type {
   FPUserInfo,
   FPTransferRecipient,
   FPSendWalletPaymentRequest,
-  FPTransactionResponse,
 } from '../../core/types';
 import styled from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import Svg, { Path } from 'react-native-svg';
 import { nfcAPI, nqrAPI, transferAPI } from '../../core/api';
-import {
-  ButtonContainer,
-  ContentContainer,
-  CTAButton,
-  CTAText,
-  InputBox,
-  InputContainer,
-  StyledTextInput,
-} from './styles';
-import OTPInputs from '../components/OtpInput';
 import ConfirmScreen from '../components/ConfirmScreen';
 import LoadingAnimation from '../components/LoadingAnimation';
 import { getFPStore } from '../../store/FPStore';
+import { ResultScreen } from './ResultScreen';
 
-const { width, height } = Dimensions.get('window');
+const { height } = Dimensions.get('window');
 
 type Channel = 'TRANSFER' | 'QRCODE' | 'NFC' | 'BTH' | 'PXTR';
 
@@ -150,143 +136,6 @@ const ActionLabel = styled(Text)`
   line-height: 14px;
 `;
 
-const SearchContainer = styled(View)`
-  flex-direction: row;
-  align-items: center;
-  background-color: #f9fafb;
-  border-radius: 12px;
-  padding: 14px 16px;
-  margin-bottom: 24px;
-  border: 1px solid #e5e7eb;
-`;
-
-const SearchInput = styled(TextInput)`
-  flex: 1;
-  margin-left: 10px;
-  font-size: 14px;
-  color: #1f2937;
-  padding: 0;
-`;
-
-const AddContactButton = styled.TouchableOpacity`
-  align-items: center;
-  margin-right: 20px;
-
-  flex-direction: row;
-  gap: 20px;
-`;
-
-const Icon = styled(Text)<{ size?: number; color?: string }>`
-  font-size: ${(props) => props.size || 24}px;
-  color: ${(props) => props.color || '#000000'};
-`;
-
-const AddCircle = styled.View`
-  width: 44px;
-  height: 44px;
-  border-radius: 32px;
-  background-color: #fff;
-  border-width: 2px;
-  border-color: #e0e0e0;
-  border-style: dashed;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 8px;
-`;
-
-const PrxyIconContainer = styled(View)<{ color: string }>`
-  width: 44px;
-  height: 44px;
-  border-radius: 100%;
-  background-color: ${(props) => props.color};
-  justify-content: center;
-  align-items: center;
-  elevation: 3;
-  shadow-color: #000;
-  shadow-offset: 0px 2px;
-  shadow-opacity: 0.12;
-  shadow-radius: 4px;
-`;
-
-const ContactName = styled.Text`
-  font-size: 12px;
-  color: #000;
-`;
-
-const ScanIcon = ({ color = '#111', size = 22 }) => (
-  <Svg
-    width={size}
-    height={size}
-    strokeWidth="0.9"
-    viewBox="0 0 24 24"
-    fill="none"
-    color={color}
-  >
-    <Path
-      d="M6 3H3V6"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M2 12H12L22 12"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M9 19V17V15"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M12 16V15.5V15"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M15 17V16V15"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M12 21V19.5V18"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M18 3H21V6"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M6 21H3V18"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <Path
-      d="M18 21H21V18"
-      stroke="#000000"
-      strokeWidth="0.9"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </Svg>
-);
 
 const BluetoothIcon = ({ color = '#111', size = 22 }) => (
   <Svg
@@ -464,15 +313,11 @@ const SendScreen = ({
   onError,
 }: Props) => {
   const [channel, setChannel] = useState<Channel>('TRANSFER');
-  const [transactionAmount, setTransactionAmount] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
-  const [showAmountModal, setShowAmountModal] = useState<boolean>(false);
-  const [showConfirmationModal, setShowConfirmationModal] =
-    useState<boolean>(false);
+  const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(false);
+  const [completedTx, setCompletedTx] = useState<FPTransaction | null>(null);
 
-  const [transactionPayload, setTransactionPayload] = useState<
-    FPSendPaymentRequest | FPSendWalletPaymentRequest
-  >({} as FPSendPaymentRequest | FPSendWalletPaymentRequest);
+  const [transactionPayload, setTransactionPayload] = useState< FPSendPaymentRequest | FPSendWalletPaymentRequest>({} as FPSendPaymentRequest | FPSendWalletPaymentRequest);
 
   const formatted = `${currency} ${amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })}`;
 
@@ -488,26 +333,31 @@ const SendScreen = ({
     setShowConfirmationModal(true);
   };
 
+  const handleResultClose = () => {
+    setCompletedTx(null);
+    onClose();                   // close the entire shell
+  };
+
   const handleProcessingTransaction = async (temptId: string) => {
     console.log('Got in here for processing');
     try {
       setLoading(true);
       setShowConfirmationModal(false);
-      let response: FPTransactionResponse | null = null;
+      let response: any = null;
       switch (transactionPayload?.channel) {
         case 'transfer':
         case 'bluetooth':
         case 'proximity':
           if ('isBank' in transactionPayload && transactionPayload.isBank) {
-            response = await transferAPI.sendToBank(
+            response = (await transferAPI.sendToBank(
               transactionPayload as FPSendPaymentRequest,
               temptId
-            );
+            )) || null;
           } else {
-            response = await transferAPI.sendToWallet(
+            response = (await transferAPI.sendToWallet(
               transactionPayload as FPSendWalletPaymentRequest,
               temptId
-            );
+            )) || null;
           }
           break;
         case 'nqr':
@@ -534,15 +384,19 @@ const SendScreen = ({
           onError?.({ message: 'Invalid channel' } as FPError);
           break;
       }
-
-      if (response?.status) {
-        onError?.({
-          message: response?.message || 'Transaction failed',
-        } as FPError);
-        return;
+      
+      if (!response?.status) {
+        // Show failed result screen
+        setCompletedTx({
+          ...(response?.payload ?? {}),
+          status: 'failed',
+        } as FPTransaction);
+        return;  // ← don't call onError — let result screen handle it
       }
 
-      onPaymentSent?.(response?.payload as FPTransaction);
+      // Success — show result screen, notify host app
+      setCompletedTx(response.payload as FPTransaction);
+      onPaymentSent?.(response.payload as FPTransaction); 
     } catch (error) {
       onError?.(error as FPError);
     } finally {
@@ -550,6 +404,16 @@ const SendScreen = ({
     }
   };
 
+  if (completedTx) {
+    console.log("Completed Tx: ", completedTx)
+    return (
+      <ResultScreen
+        transaction={{...transactionPayload, ...completedTx}}
+        onClose={handleResultClose}
+      />
+    );
+  }
+
   return (
     <Container>
       {loading && <LoadingAnimation />}

package/src/ui/theme/index.ts

@@ -1,6 +1,6 @@
 export const C = {
   ink: '#0B1D35',
-  brand: '#0052CC',
+  brand: '#003333',
   brandLight: '#E8F0FE',
   green: '#00875A',
   greenLight: '#E3FCEF',