react-native-fpay 0.4.30 → 0.4.33

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

@@ -362,8 +362,6 @@ const SendScreen = ({
             // No address — Django will reverse-geocode
           };
         }
-
-        
       }
       const newTransactionPayload ={...transactionPayload, movement}
       switch (newTransactionPayload?.channel) {
@@ -450,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}
       />
     );
@@ -568,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>
@@ -579,4 +616,4 @@ const SendScreen = ({
   );
 };
 
-export default SendScreen;
+export default SendScreen;

package/src/ui/screens/sub/billPayment/AirtimeScreen.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import styled from 'styled-components/native';
+import { C, F, R, S } from '../../../theme';
+import { billsAPI } from '../../../../core/api';
+import type { FPNetworkCode, FPNetworkOperator, FPAirtimePurchaseRequest } from '../../../../core/types';
+
+// ── Network auto-detect ──────────────────────────────────────
+// Nigerian mobile prefixes — not exhaustive, just enough to make the
+// "auto-detect, allow override" UX work for the common case. Ported
+// numbers will be wrong, which is exactly why manual override exists.
+const PREFIX_MAP: Record<string, FPNetworkCode> = {
+  '0803': 'MTN', '0806': 'MTN', '0703': 'MTN', '0706': 'MTN', '0813': 'MTN', '0816': 'MTN', '0810': 'MTN', '0814': 'MTN', '0903': 'MTN', '0906': 'MTN', '0913': 'MTN', '0916': 'MTN',
+  '0802': 'AIRTEL', '0808': 'AIRTEL', '0708': 'AIRTEL', '0812': 'AIRTEL', '0701': 'AIRTEL', '0902': 'AIRTEL', '0907': 'AIRTEL', '0901': 'AIRTEL', '0911': 'AIRTEL',
+  '0805': 'GLO', '0807': 'GLO', '0815': 'GLO', '0811': 'GLO', '0905': 'GLO', '0915': 'GLO',
+  '0809': '9MOBILE', '0817': '9MOBILE', '0818': '9MOBILE', '0908': '9MOBILE', '0909': '9MOBILE',
+};
+
+function detectNetwork(phone: string): FPNetworkCode | null {
+  const prefix = phone.slice(0, 4);
+  return PREFIX_MAP[prefix] ?? null;
+}
+
+// ── Styled Components ────────────────────────────────────────
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: ${C.white};
+`;
+
+const Body = styled(ScrollView)`
+  flex: 1;
+  padding: ${S.lg}px;
+`;
+
+const FieldLabel = styled(Text)`
+  font-size: ${F.sm}px;
+  font-weight: 600;
+  color: ${C.muted};
+  margin-bottom: ${S.xs}px;
+`;
+
+const InputBox = styled.View`
+  background-color: ${C.surface};
+  border-radius: ${R.lg}px;
+  padding: 0 ${S.md}px;
+  height: 52px;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: ${S.md}px;
+`;
+
+const StyledInput = styled.TextInput`
+  flex: 1;
+  font-size: ${F.md}px;
+  color: ${C.ink};
+`;
+
+const CurrencyPrefix = styled(Text)`
+  font-size: ${F.md}px;
+  color: ${C.muted};
+  margin-right: ${S.xs}px;
+`;
+
+const NetworkRow = styled(View)`
+  flex-direction: row;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.md}px;
+`;
+
+const NetworkChip = styled(TouchableOpacity)<{ selected: boolean; brandColor?: string }>`
+  flex: 1;
+  height: 44px;
+  border-radius: ${R.full}px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props: any) => (props.selected ? (props.brandColor ?? C.brand) : C.surface)};
+`;
+
+const NetworkChipText = styled(Text)<{ selected: boolean }>`
+  font-size: ${F.sm}px;
+  font-weight: 700;
+  color: ${(props: any) => (props.selected ? C.white : C.muted)};
+`;
+
+const AmountRow = styled(View)`
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${S.sm}px;
+  margin-bottom: ${S.lg}px;
+`;
+
+const AmountChip = styled(TouchableOpacity)<{ selected: boolean }>`
+  width: 30%;
+  height: 56px;
+  border-radius: ${R.md}px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props: any) => (props.selected ? C.brand : C.surface)};
+`;
+
+const AmountChipText = styled(Text)<{ selected: boolean }>`
+  font-size: ${F.md}px;
+  font-weight: 700;
+  color: ${(props: any) => (props.selected ? C.white : C.ink)};
+`;
+
+const ContinueButton = styled(TouchableOpacity)<{ disabled?: boolean }>`
+  background-color: ${(props: any) => (props.disabled ? C.ghost : C.brand)};
+  border-radius: ${R.full}px;
+  padding: ${S.md}px 0;
+  align-items: center;
+  margin-top: ${S.sm}px;
+`;
+
+const ContinueButtonText = styled(Text)`
+  color: ${C.white};
+  font-weight: 800;
+  font-size: ${F.md}px;
+`;
+
+const QUICK_AMOUNTS = [100, 200, 500, 1000, 2000, 5000];
+
+// ── Props ─────────────────────────────────────────────────────
+
+interface Props {
+  amount: number;
+  onProcessTransaction: (
+    payload: FPAirtimePurchaseRequest,
+    summaryRows: { label: string; value: string }[]
+  ) => void;
+  onError?: (err: { code: string; message: string }) => void;
+}
+
+export default function AirtimeScreen({ amount, onProcessTransaction, onError }: Props) {
+  const [networks, setNetworks] = useState<FPNetworkOperator[]>([]);
+  const [phone, setPhone] = useState('');
+  const [network, setNetwork] = useState<FPNetworkCode | null>(null);
+  const [networkTouched, setNetworkTouched] = useState(false);
+  const [purchaseAmount, setPurchaseAmount] = useState<string>(amount > 0 ? String(amount) : '');
+
+  useEffect(() => {
+    billsAPI
+      .getNetworks()
+      .then((res: any) => {
+        if (res.status) setNetworks(res.payload.filter((n: FPNetworkOperator) => n.isActive));
+      })
+      .catch(() => {
+        // Non-fatal — chips still render from the static prefix map's
+        // codes even if the live operator list (logos/colors) fails to load
+        onError?.({ code: 'NETWORK_LOAD_FAILED', message: 'Could not load network list' });
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!networkTouched) {
+      const detected = detectNetwork(phone);
+      if (detected) setNetwork(detected);
+    }
+  }, [phone, networkTouched]);
+
+  const isValid =
+    /^0\d{10}$/.test(phone) && !!network && Number(purchaseAmount) >= 50 && Number(purchaseAmount) <= 50000;
+
+  const handleContinue = () => {
+    if (!isValid || !network) return;
+    const amountInKobo = Math.round(Number(purchaseAmount) * 100);
+    onProcessTransaction(
+      {
+        category: 'AIRTIME',
+        phoneNumber: phone,
+        network,
+        amountInKobo,
+        idempotencyKey: `airtime_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      },
+      [
+        { label: 'Phone Number', value: phone },
+        { label: 'Network', value: network },
+      ]
+    );
+  };
+
+  return (
+    <Container>
+      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <Body keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
+          <FieldLabel>Phone Number</FieldLabel>
+          <InputBox>
+            <StyledInput
+              placeholder="080XXXXXXXX"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              maxLength={11}
+              value={phone}
+              onChangeText={setPhone}
+            />
+          </InputBox>
+
+          <FieldLabel>Network</FieldLabel>
+          <NetworkRow>
+            {(['MTN', 'AIRTEL', 'GLO', '9MOBILE'] as FPNetworkCode[]).map((code) => {
+              const op = networks.find((n: any) => n.code === code);
+              return (
+                <NetworkChip
+                  key={code}
+                  selected={network === code}
+                  brandColor={op?.brandColor}
+                  onPress={() => {
+                    setNetworkTouched(true);
+                    setNetwork(code);
+                  }}
+                >
+                  <NetworkChipText selected={network === code}>{code}</NetworkChipText>
+                </NetworkChip>
+              );
+            })}
+          </NetworkRow>
+
+          <FieldLabel>Amount</FieldLabel>
+          <AmountRow>
+            {QUICK_AMOUNTS.map((amt) => (
+              <AmountChip
+                key={amt}
+                selected={Number(purchaseAmount) === amt}
+                onPress={() => setPurchaseAmount(String(amt))}
+              >
+                <AmountChipText selected={Number(purchaseAmount) === amt}>
+                  ₦{amt.toLocaleString()}
+                </AmountChipText>
+              </AmountChip>
+            ))}
+          </AmountRow>
+
+          <InputBox>
+            <CurrencyPrefix>₦</CurrencyPrefix>
+            <StyledInput
+              placeholder="Enter amount"
+              placeholderTextColor={C.ghost}
+              keyboardType="number-pad"
+              value={purchaseAmount}
+              onChangeText={setPurchaseAmount}
+            />
+          </InputBox>
+
+          <ContinueButton disabled={!isValid} onPress={handleContinue} activeOpacity={0.85}>
+            <ContinueButtonText>Continue</ContinueButtonText>
+          </ContinueButton>
+        </Body>
+      </KeyboardAvoidingView>
+    </Container>
+  );
+}