react-native-fpay 0.4.29 → 0.4.31

package/src/ui/screens/ResultScreen.tsx

@@ -1,11 +1,13 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { FC } 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';
+import type { SubscriptionFreq } from '../../core/types';
+import { subscriptionAPI, transferAPI } from '../../core/api';
 import Gradients from '../components/Gradients';
+import RecurringToggle from '../components/RecurringToggle';
 
 // ── Icons ─────────────────────────────────────────────────────
 
@@ -187,7 +189,7 @@ function CountdownRing({ duration }: { duration: number }) {
 
 // ── Row ──────────────────────────────────────────────────────
 
-function Row({ label, value }: { label: string; value: string }) {
+const Row: FC<{ label: string; value: string }> = ({ label, value }) => {
   return (
     <RowWrap>
       <RowLabel>{label}</RowLabel>
@@ -198,37 +200,77 @@ function Row({ label, value }: { label: string; value: string }) {
 
 // ── Main ─────────────────────────────────────────────────────
 
+/**
+ * Generalized props — ResultScreen no longer assumes a "recipient" or that
+ * the underlying transaction came through transferAPI.
+ *   - reference: used to poll status (via statusFetcher, defaults to transferAPI.status)
+ *   - summaryRows: extra rows to render in the detail card (e.g. "To", "Channel")
+ *     beyond the always-present Reference/Date/Status rows
+ *   - allowRecurring: SendScreen keeps the existing recurring-payment upsell;
+ *     domains with no concept of "this recipient" (bills) pass false
+ *   - statusFetcher: which endpoint to poll — defaults to the shared
+ *     agencyTransaction-backed transferAPI.status, which bill transactions
+ *     also live in
+ */
 interface Props {
-  transaction: FPTransaction | any;
+  reference: string;
+  summaryRows?: { label: string; value: string }[];
+  allowRecurring?: boolean;
+  statusFetcher?: (reference: string) => Promise<any>;
   onClose: () => void;
 }
 
-export function ResultScreen({ transaction, onClose }: Props) {
+export function ResultScreen({
+  reference,
+  summaryRows,
+  allowRecurring = true,
+  statusFetcher = transferAPI.status,
+  onClose,
+}: Props) {
   const [loading, setLoading] = useState<boolean>(false);
   const [transactionDetail, setTransactionDetail] = useState<any>(null)
   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 [recurringEnabled, setRecurringEnabled] = useState(false);
+  const [recurringFrequency, setRecurringFrequency] = useState<SubscriptionFreq>('MONTHLY');
+
+
   const isSuccess = transactionDetail?.status.toLowerCase() === 'successful';
   const accentColor = isSuccess ? C.green : C.red;
   const bgColor = isSuccess ? '#E3FCEF' : '#FFEBE6';
 
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const startTimeRef = useRef<number>(Date.now());
+  const remainingTimeRef = useRef<number>(COUNTDOWN_SECONDS * 1000);
+  const isPausedRef = useRef<boolean>(false);
+
+  const startTimer = useCallback((duration: number) => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(onClose, duration);
+  }, [onClose]);
+
+  const pauseTimer = useCallback(() => {
+    if (isPausedRef.current) return;
+    isPausedRef.current = true;
+    if (timerRef.current) clearTimeout(timerRef.current);
+    // Calculate how much time is left
+    const elapsed = Date.now() - startTimeRef.current;
+    remainingTimeRef.current = Math.max(remainingTimeRef.current - elapsed, 0);
+  }, []);
+
+  const resumeTimer = useCallback(() => {
+    if (!isPausedRef.current) return;
+    isPausedRef.current = false;
+    startTimer(remainingTimeRef.current);
+  }, [startTimer]);
+
   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')
     : '—';
@@ -237,7 +279,7 @@ export function ResultScreen({ transaction, onClose }: Props) {
     setLoading(true);
     setTransactionDetail(null);
     try{
-      const response = await transferAPI.status(transaction.reference) as any;
+      const response = await statusFetcher(reference) as any;
       console.log("Transaction payload: ", response);
       if(response.status){
         setTransactionDetail(response.payload);
@@ -250,19 +292,70 @@ export function ResultScreen({ transaction, onClose }: Props) {
       
   }
 
+  const calculateNextDate=(current: Date | string, frequency: SubscriptionFreq): Date=> {
+  const date = new Date(current);
+
+  switch (frequency) {
+    case 'DAILY':
+      date.setDate(date.getDate() + 1);
+      break;
+    case 'WEEKLY':
+      date.setDate(date.getDate() + 7);
+      break;
+    case 'MONTHLY':
+      date.setMonth(date.getMonth() + 1);
+      break;
+    case 'YEARLY':
+      date.setFullYear(date.getFullYear() + 1);
+      break;
+    default:
+      throw new Error(`Unknown frequency: ${frequency}`);
+  }
+
+  return date;
+}
+
+  const handlePayment = async () => {
+    pauseTimer();
+    try {
+      await subscriptionAPI.create({
+        serviceName: summaryRows?.find(r => r.label === 'To')?.value ?? 'Payment',
+        serviceCategory: 'Payment',       // default category
+        amount: transactionDetail.amount,                   // from your existing payment data
+        currency: transactionDetail.currency,
+        frequency: recurringFrequency,
+        accountNumber: transactionDetail.senderAccountNumber,
+        receiverAccountNumber: transactionDetail.destAccountNumber,
+        logoUrl: transactionDetail.recipientLogo ?? '',
+        nextPaymentDate: calculateNextDate(new Date(), recurringFrequency).toISOString(),
+      });
+    } catch {
+      console.warn('Subscription registration failed silently');
+    } finally {
+      resumeTimer();
+    }
+  };
+
   
 
+  // useEffect(() => {
+  //   const timer = setTimeout(onClose, COUNTDOWN_SECONDS * 1000);
+  //   return () => clearTimeout(timer);
+  // }, [onClose]);
+
   useEffect(() => {
-    const timer = setTimeout(onClose, COUNTDOWN_SECONDS * 1000);
-    return () => clearTimeout(timer);
-  }, [onClose]);
+    startTimer(remainingTimeRef.current);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [startTimer])
 
 
   useEffect(()=>{
-    if(transaction){
+    if(reference){
       loadTransaction();
     }
-  }, [transaction]);
+  }, [reference]);
 
 
   if (loading && !transactionDetail) {
@@ -286,13 +379,22 @@ export function ResultScreen({ transaction, onClose }: Props) {
       <Amount>{formatted}</Amount>
 
       <Card>
-        <Row label="To" value={recipientName} />
-        <Row label="Channel" value={channelLabel[transactionDetail?.channel] ?? transaction?.channel} />
+        {summaryRows?.map((row) => (
+          <Row key={row.label} label={row.label} value={row.value} />
+        ))}
         <Row label="Reference" value={transactionDetail?.reference} />
         <Row label="Date" value={dateStr} />
         <Row label="Status" value={transactionDetail?.status?.toUpperCase()} />
       </Card>
-
+      {allowRecurring && (
+        <RecurringToggle
+          onToggle={(enabled, freq) => {
+            setRecurringEnabled(enabled);
+            setRecurringFrequency(freq);
+            handlePayment();
+          }}
+        />
+      )}
       <Footer>
         <CountdownRing duration={COUNTDOWN_SECONDS * 1000} />
         <CloseBtn onPress={onClose} activeOpacity={0.8}>
@@ -301,5 +403,4 @@ export function ResultScreen({ transaction, onClose }: Props) {
       </Footer>
     </Container>
   );
-}
-
+}

package/src/ui/screens/SendScreen.tsx

@@ -35,6 +35,7 @@ import ConfirmScreen from '../components/ConfirmScreen';
 import LoadingAnimation from '../components/LoadingAnimation';
 import { getFPStore } from '../../store/FPStore';
 import { ResultScreen } from './ResultScreen';
+import { useLocation } from '../../hooks/useLocation';
 
 const { height } = Dimensions.get('window');
 
@@ -315,21 +316,22 @@ const SendScreen = ({
   const [channel, setChannel] = useState<Channel>('TRANSFER');
   const [loading, setLoading] = useState<boolean>(false);
   const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(false);
+  const { requestLocation }     = useLocation();
 
   const [completedTx, setCompletedTx] = useState<FPTransaction | null>(null);
 
-  const [transactionPayload, setTransactionPayload] = useState<FPSendPaymentRequest | FPSendWalletPaymentRequest>({} as FPSendPaymentRequest | FPSendWalletPaymentRequest);
+  const [transactionPayload, setTransactionPayload] = useState<FPSendWalletPaymentRequest>({} as FPSendWalletPaymentRequest);
 
   const formatted = `${currency} ${amount.toLocaleString('en-NG', { minimumFractionDigits: 2 })}`;
 
   // { id: result.reference, reference: result.reference, type: 'debit', channel: 'transfer', amount: result.amount, currency: result.currency, status: result.status, recipient: { accountName: result.recipient.accountName }, createdAt: result.createdAt }
 
   const handleContinue = (
-    tx: FPSendPaymentRequest | FPSendWalletPaymentRequest | null
+    tx: FPSendWalletPaymentRequest | null
   ) => {
     console.log('Transaction Payload: ', tx);
     setTransactionPayload(
-      tx as FPSendPaymentRequest | FPSendWalletPaymentRequest
+      tx as FPSendWalletPaymentRequest
     );
     setShowConfirmationModal(true);
   };
@@ -341,74 +343,89 @@ const SendScreen = ({
 
   const handleProcessingTransaction = async (temptId: string) => {
     try {
-    setLoading(true);
-    setShowConfirmationModal(false);
-    let response: any = null;
-
-    const recipient = transactionPayload?.recipient as any;
-
-    switch (transactionPayload?.channel) {
-      case 'transfer':
-      case 'bluetooth':
-      case 'proximity': {
-        // Internal transfer — recipient has id + type (AGENT/TERMINAL)
-        if (recipient?.id && recipient?.type && ['AGENT', 'TERMINAL'].includes(recipient.type)) {
-          response = await transferAPI.sendToWallet(
-            {
-              ...transactionPayload,
-              recipient: {
-                account_number: recipient.accountNumber,
-                agent_id: recipient.id,
-                type:     recipient.type,
-                terminal_id: recipient?.terminalId || '',
+      setLoading(true);
+      setShowConfirmationModal(false);
+      let response: any = null;
+
+      const recipient = transactionPayload?.recipient as any;
+      const isTerminalTransaction = transactionPayload.sender_type === 'AGENT' || recipient.type === 'TERMINAL';
+      let movement: { latitude: number; longitude: number } | undefined;
+
+      if (isTerminalTransaction) {
+        // Always fetch fresh location for terminal transactions
+        const loc = await requestLocation();
+
+        if (loc) {
+          movement = {
+            latitude:  loc.latitude,
+            longitude: loc.longitude,
+            // No address — Django will reverse-geocode
+          };
+        }
+      }
+      const newTransactionPayload ={...transactionPayload, movement}
+      switch (newTransactionPayload?.channel) {
+        case 'transfer':
+        case 'bluetooth':
+        case 'proximity': {
+          // Internal transfer — recipient has id + type (AGENT/TERMINAL)
+          if (recipient?.id && recipient?.type && ['AGENT', 'TERMINAL'].includes(recipient.type)) {
+            response = await transferAPI.sendToWallet(
+              {
+                ...newTransactionPayload,
+                recipient: {
+                  account_number: recipient.accountNumber,
+                  agent_id: recipient.id,
+                  type:     recipient.type,
+                  terminal_id: recipient?.terminalId || '',
+                },
               },
-            },
-            temptId
-          );
+              temptId
+            );
+          }
+          // Bank transfer — recipient has accountNumber + bankCode
+          else if (recipient?.bankCode) {
+            response = await transferAPI.sendToBank(
+              newTransactionPayload as any,
+              temptId
+            );
+          }
+          // Wallet transfer — recipient has accountNumber + userId/agentId
+          else {
+            response = await transferAPI.sendToWallet(
+              newTransactionPayload as FPSendWalletPaymentRequest,
+              temptId
+            );
+          }
+          break;
         }
-        // Bank transfer — recipient has accountNumber + bankCode
-        else if (recipient?.bankCode) {
-          response = await transferAPI.sendToBank(
-            transactionPayload as FPSendPaymentRequest,
+
+        case 'nqr':
+          response = await nqrAPI.pay(
+            {
+              ...newTransactionPayload,
+              narration: `Send ${formatted} to ${recipient?.accountName ?? ''}`,
+              amount: parseFloat(newTransactionPayload.amount)
+            },
             temptId
           );
-        }
-        // Wallet transfer — recipient has accountNumber + userId/agentId
-        else {
-          response = await transferAPI.sendToWallet(
-            transactionPayload as FPSendWalletPaymentRequest,
+          break;
+
+        case 'nfc':
+          response = await nfcAPI.pay(
+            {
+              ...newTransactionPayload,
+              narration: `Send ${formatted} to ${recipient?.accountName ?? ''}`,
+              amount: parseFloat(newTransactionPayload.amount)
+            },
             temptId
           );
-        }
-        break;
-      }
+          break;
 
-      case 'nqr':
-        response = await nqrAPI.pay(
-          {
-            ...transactionPayload,
-            sender:   user ?? undefined,
-            narration: `Send ${formatted} to ${recipient?.accountName ?? ''}`,
-          },
-          temptId
-        );
-        break;
-
-      case 'nfc':
-        response = await nfcAPI.pay(
-          {
-            ...transactionPayload,
-            sender:   user ?? undefined,
-            narration: `Send ${formatted} to ${recipient?.accountName ?? ''}`,
-          },
-          temptId
-        );
-        break;
-
-      default:
-        onError?.({ message: 'Invalid channel' } as FPError);
-        return;
-    }
+        default:
+          onError?.({ message: 'Invalid channel' } as FPError);
+          return;
+      }
 
       
       if (!response?.status) {
@@ -431,10 +448,25 @@ const SendScreen = ({
   };
 
   if (completedTx) {
+    const mergedTx = { ...transactionPayload, ...completedTx } as any;
+    const recipient = mergedTx?.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',
+    };
 
     return (
       <ResultScreen
-        transaction={{...transactionPayload, ...completedTx}}
+        reference={mergedTx.reference}
+        summaryRows={[
+          { label: 'To', value: recipientName },
+          { label: 'Channel', value: channelLabel[mergedTx?.channel] ?? mergedTx?.channel },
+        ]}
+        allowRecurring
         onClose={handleResultClose}
       />
     );
@@ -549,8 +581,32 @@ const SendScreen = ({
             </SheetHeader>
 
             <ConfirmScreen
-              userId={getFPStore().psspId || ''}
-              transaction={transactionPayload}
+              amount={Number(transactionPayload?.amount || 0)}
+              currency={transactionPayload?.currency}
+              subtitle="Double check the transfer details before you proceed. Please note that successful transfers cannot be reversed."
+              summaryRows={(() => {
+                const recipient = transactionPayload?.recipient as any;
+                const recipientName = recipient?.accountName ?? '';
+                const accountNumber = recipient?.accountNumber ?? '';
+                const bankName = (recipient as any)?.bankName;
+                const rows = [{ label: 'Name', value: recipientName }];
+                if (transactionPayload?.isBank) {
+                  if (transactionPayload?.channel === 'transfer') {
+                    rows.push({ label: 'Bank', value: bankName });
+                    rows.push({ label: 'Account No.', value: accountNumber });
+                  }
+                } else {
+                  rows.push({ label: 'Account Number', value: accountNumber });
+                }
+                return rows;
+              })()}
+              validate={(pin: string) =>
+                transferAPI.validateTransfer(
+                  pin,
+                  getFPStore().psspId || '',
+                  (transactionPayload?.recipient as any)?.id
+                )
+              }
               onContinue={handleProcessingTransaction}
             />
           </SheetScrollView>
@@ -560,4 +616,4 @@ const SendScreen = ({
   );
 };
 
-export default SendScreen;
+export default SendScreen;