react-native-fpay 0.4.29 → 0.4.31

package/src/ui/components/ConfirmScreen.tsx

@@ -14,15 +14,6 @@ import {
 import styled from 'styled-components/native';
 import OTPInputs from './OtpInput';
 import InLoading from './LoadingAnimation/InLoading';
-import type {
-  FPInternalTransferRecipient,
-  FPSendPaymentRequest,
-  FPSendWalletPaymentRequest,
-  FPTransferRecipient,
-} from '../../core/types';
-import { transferAPI } from '../../core/api';
-
-const { width } = Dimensions.get('window');
 
 // ─── Styled Components ───────────────────────────────────────────────────────
 
@@ -178,11 +169,31 @@ const ProcessingRow = styled.View`
   align-items: center;
 `;
 
+const ErrorText = styled(Text)`
+  color: #de350b;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 10px;
+`;
+
 // ─── Types ───────────────────────────────────────────────────────────────────
 
-interface TransferReminderScreenProps {
-  userId: string;
-  transaction: any;
+/**
+ * Generalized props — ConfirmScreen no longer knows what a "transaction" or
+ * "recipient" is. The caller (SendScreen, BillsScreen, etc.) supplies:
+ *   - summaryRows: what to show in the detail card
+ *   - amount/currency: for the amount display
+ *   - subtitle: the warning/info line under the header
+ *   - validate: the PIN-check call to make (different endpoint per domain)
+ *   - onContinue: called with the temp_id once PIN validation succeeds
+ */
+interface ConfirmScreenProps {
+  summaryRows: { label: string; value: string }[];
+  amount: number;
+  currency?: string;
+  subtitle?: string;
+  validate: (pin: string) => Promise<{ status: boolean; message: string; payload?: { temp_id: string } }>;
   onContinue: (tempId: string) => void;
 }
 
@@ -248,9 +259,12 @@ const DetailRow: React.FC<{ label: string; value: string }> = ({
 
 // ─── Main Component ──────────────────────────────────────────────────────────
 
-const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
-  userId,
-  transaction,
+const ConfirmScreen: React.FC<ConfirmScreenProps> = ({
+  summaryRows,
+  amount,
+  currency,
+  subtitle,
+  validate,
   onContinue,
 }) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
@@ -263,24 +277,19 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
   const [errText, setErrText] = useState<string>('');
   const [otp, setOtp] = useState<string>('');
 
-  const isWalletTransfer = !transaction?.isBank;
-  const recipientName = transaction?.recipient.accountName ?? '';
-  const accountNumber = transaction?.recipient.accountNumber ?? '';
-  const bankName = !isWalletTransfer
-    ? (transaction?.recipient as any)?.bankName
-    : undefined;
-
   const handleContinue = async () => {
     setProcessing(true);
+    setErrText('');
     try {
-      const response: any = await transferAPI.validateTransfer(otp, userId, transaction?.recipient.id);
+      const response = await validate(otp);
       console.log('Validate: ', response);
-      if (!response.status) {
+      if (!response.status || !response.payload?.temp_id) {
         Vibration.vibrate(100);
         setErrText(response.message);
         return;
       }
       console.log('Continue: ', response.payload.temp_id);
+
       onContinue(response.payload.temp_id);
     } catch (error: any) {
       setErrText(error.message);
@@ -324,8 +333,8 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
     ]).start();
   }, []);
 
-  const formattedAmount = `${transaction?.currency ?? '₦'}${Number(transaction?.amount || 0).toFixed(2)}`;
-  const amountWords = getAmountInWords(Number(transaction?.amount || 0));
+  const formattedAmount = `${currency ?? '₦'}${Number(amount || 0).toFixed(2)}`;
+  const amountWords = getAmountInWords(Number(amount || 0));
 
   return (
     <Container>
@@ -348,8 +357,8 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
             >
               <Header>
                 <SubTitle>
-                  Double check the transfer details before you proceed. Please
-                  note that successful transfers cannot be reversed.
+                  {subtitle ??
+                    'Double check the details before you proceed. Please note that successful transactions cannot be reversed.'}
                 </SubTitle>
               </Header>
             </Animated.View>
@@ -363,28 +372,9 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
             >
               <Card>
                 <CardTitle>Transaction Details</CardTitle>
-                {transaction?.isBank ? (
-                  <>
-                    <DetailRow label="Name" value={recipientName} />
-                    {transaction?.channel === 'transfer' && (
-                      <>
-                        <Row>
-                          <RowLabel>Bank</RowLabel>
-                          <RowValue>{bankName}</RowValue>
-                        </Row>
-                        <Row>
-                          <RowLabel>Account No.</RowLabel>
-                          <RowValue>{accountNumber}</RowValue>
-                        </Row>
-                      </>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    <DetailRow label="Name" value={recipientName} />
-                    <DetailRow label="Account Number" value={accountNumber} />
-                  </>
-                )}
+                {summaryRows.map((row) => (
+                  <DetailRow key={row.label} label={row.label} value={row.value} />
+                ))}
 
                 <AmountRow>
                   <AmountLabelContainer>
@@ -400,9 +390,12 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
               </Card>
 
               {!processing && (
-                <AmountRow>
-                  <OTPInputs count={4} callBack={setOtp} />
-                </AmountRow>
+                <>
+                  <AmountRow>
+                    <OTPInputs count={4} callBack={setOtp} />
+                  </AmountRow>
+                  {!!errText && <ErrorText>{errText}</ErrorText>}
+                </>
               )}
             </Animated.View>
           </View>
@@ -432,4 +425,4 @@ const ConfirmScreen: React.FC<TransferReminderScreenProps> = ({
   );
 };
 
-export default ConfirmScreen;
+export default ConfirmScreen;

package/src/ui/components/RecurringToggle.tsx

@@ -0,0 +1,106 @@
+// components/RecurringToggle.tsx
+import React, { useState } from 'react';
+import { Switch } from 'react-native';
+import styled from 'styled-components/native';
+import type { SubscriptionFreq } from '../../core/types';
+
+interface Props {
+  onToggle: (enabled: boolean, frequency: SubscriptionFreq) => void;
+}
+
+const Wrapper = styled.View`
+  background-color: #f5f3ff;
+  border-radius: 14px;
+  padding: 14px 16px;
+  margin-top: 12px;
+  border-width: 1px;
+  border-color: #ede9fe;
+`;
+
+const TopRow = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const TextBlock = styled.View`flex: 1; margin-right: 12px;`;
+
+const ToggleLabel = styled.Text`
+  font-size: 14px;
+  font-weight: 600;
+  color: #4f46e5;
+`;
+
+const ToggleSubtext = styled.Text`
+  font-size: 12px;
+  color: #7c6fcd;
+  margin-top: 2px;
+`;
+
+const FreqRow = styled.View`
+  flex-direction: row;
+  gap: 8px;
+  margin-top: 12px;
+`;
+
+const FreqBtn = styled.TouchableOpacity<{ selected?: boolean }>`
+  flex: 1;
+  padding: 8px 4px;
+  border-radius: 8px;
+  align-items: center;
+  background-color: ${p => p.selected ? '#4f46e5' : '#fff'};
+  border-width: 1px;
+  border-color: ${p => p.selected ? '#4f46e5' : '#ddd6fe'};
+`;
+
+const FreqText = styled.Text<{ selected?: boolean }>`
+  font-size: 11px;
+  font-weight: 600;
+  color: ${p => p.selected ? '#fff' : '#7c6fcd'};
+`;
+
+const FREQUENCIES: SubscriptionFreq[] = ['DAILY', 'WEEKLY', 'MONTHLY', 'YEARLY'];
+
+export default function RecurringToggle({ onToggle }: Props) {
+  const [enabled, setEnabled] = useState(false);
+  const [frequency, setFrequency] = useState<SubscriptionFreq>('MONTHLY');
+
+  const handleSwitch = (val: boolean) => {
+    setEnabled(val);
+    onToggle(val, frequency);
+  };
+
+  const handleFreq = (freq: SubscriptionFreq) => {
+    setFrequency(freq);
+    if (enabled) onToggle(true, freq);
+  };
+
+  return (
+    <Wrapper>
+      <TopRow>
+        <TextBlock>
+          <ToggleLabel>🔁 Make this recurring</ToggleLabel>
+          <ToggleSubtext>Auto-pay this on a schedule</ToggleSubtext>
+        </TextBlock>
+        <Switch
+          value={enabled}
+          onValueChange={handleSwitch}
+          trackColor={{ false: '#ddd', true: '#818cf8' }}
+          thumbColor={enabled ? '#4f46e5' : '#f4f3f4'}
+        />
+      </TopRow>
+
+      {enabled && (
+        <FreqRow>
+          {FREQUENCIES.map(freq => (
+            <FreqBtn key={freq} selected={frequency === freq} onPress={() => handleFreq(freq)}>
+              <FreqText selected={frequency === freq}>
+                {freq[0] + freq.slice(1).toLowerCase()}
+              </FreqText>
+            </FreqBtn>
+          ))}
+        </FreqRow>
+      )}
+    </Wrapper>
+  );
+}

package/src/ui/modals/FPShell.tsx

@@ -16,23 +16,25 @@ import {
 import { _onEvent } from '../../engine/FPEngine';
 import SendScreen from '../screens/SendScreen';
 import ReceiveScreen from '../screens/ReceiveScreen';
+import BillsScreen from '../screens/BillsScreen';
 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 type { FPCurrency, FPUserInfo, FPBillCategory } from '../../core/types';
 import { useFPStore } from '../../store/FPStore';
 
 const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
 
-type SheetMode = 'send' | 'receive' | null;
+type SheetMode = 'send' | 'receive' | 'bills' | null;
 
 interface SheetState {
   user?: FPUserInfo;
   mode: SheetMode;
   amount?: number;
   currency?: FPCurrency;
+  category?: FPBillCategory;
 }
 
 export function FPShell() {
@@ -83,11 +85,23 @@ export function FPShell() {
         currency: data?.currency,
       });
     });
+    const unsubBills = _onEvent('show_bills', (d: unknown) => {
+      const data = d as any;
+      open({
+        mode: 'bills',
+        user: data?.user,
+        amount: data?.amount,
+        category: data?.category,
+      });
+    });
     const unsubClose = _onEvent('close_send', () => close());
+    const unsubCloseBills = _onEvent('close_bills', () => close());
     return () => {
       unsubSend();
       unsubReceive();
+      unsubBills();
       unsubClose();
+      unsubCloseBills();
     };
   }, [open, close]);
 
@@ -134,6 +148,15 @@ export function FPShell() {
                 onError={FPEngine.getCallbacks().onError}
               />
             )}
+            {sheet.mode === 'bills' && sheet.category && (
+              <BillsScreen
+                category={sheet.category}
+                amount={sheet.amount ?? 0}
+                user={user ?? null}
+                onClose={close}
+                onError={FPEngine.getCallbacks().onError}
+              />
+            )}
           </View>
         </Animated.View>
       )}
@@ -211,4 +234,4 @@ const st = StyleSheet.create({
     flex: 1,
     backgroundColor: C.surface,
   },
-});
+});

package/src/ui/screens/BillsScreen.tsx

@@ -0,0 +1,197 @@
+// ─────────────────────────────────────────────
+// Bills Screen
+// Renders the category-specific sub-screen
+// (Airtime / Data / Electricity / Cable), then
+// runs the same Confirm (PIN) → Loading →
+// Result flow SendScreen uses, generalized.
+// ─────────────────────────────────────────────
+import { useState } from 'react';
+import { View, TouchableOpacity, Text } from 'react-native';
+import styled from 'styled-components/native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import AirtimeSubScreen from './sub/billPayment/AirtimeScreen';
+import DataSubScreen from './sub/billPayment/DataScreen';
+import ElectricitySubScreen from './sub/billPayment/ElectricityScreen';
+import CableSubScreen from './sub/billPayment/CableScreen';
+import ConfirmScreen from '../components/ConfirmScreen';
+import { ResultScreen } from './ResultScreen';
+import LoadingAnimation from '../components/LoadingAnimation';
+import { billsAPI } from '../../core/api';
+import { getFPStore } from '../../store/FPStore';
+import { C, F, S } from '../theme';
+import type {
+  FPBillCategory,
+  FPBillPurchaseRequest,
+  FPBillTransaction,
+  FPCallbacks,
+  FPError,
+  FPUserInfo,
+  FPSummaryRow,
+} from '../../core/types';
+
+const Container = styled(View)`
+  flex: 1;
+  background-color: ${C.white};
+`;
+
+const Header = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${S.md}px ${S.lg}px;
+`;
+
+const HeaderTitle = styled(Text)`
+  font-size: ${F.lg}px;
+  font-weight: 800;
+  color: ${C.ink};
+`;
+
+const CloseBtn = styled(TouchableOpacity)`
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  background-color: ${C.surface};
+  align-items: center;
+  justify-content: center;
+`;
+
+const CATEGORY_TITLES: Record<FPBillCategory, string> = {
+  AIRTIME: 'Buy Airtime',
+  DATA: 'Buy Data',
+  ELECTRICITY: 'Pay Electricity Bill',
+  CABLE: 'Pay TV Subscription',
+};
+
+interface Props extends Pick<FPCallbacks, 'onError'> {
+  category: FPBillCategory;
+  amount: number;
+  user: FPUserInfo | null;
+  onClose: () => void;
+}
+
+type FlowStage = 'FORM' | 'CONFIRM' | 'RESULT';
+
+export default function BillsScreen({ category, amount, user, onClose, onError }: Props) {
+  const [stage, setStage] = useState<FlowStage>('FORM');
+  const [loading, setLoading] = useState(false);
+  const [pendingPayload, setPendingPayload] = useState<FPBillPurchaseRequest | null>(null);
+  const [pendingSummaryRows, setPendingSummaryRows] = useState<FPSummaryRow[]>([]);
+  const [completedTx, setCompletedTx] = useState<FPBillTransaction | null>(null);
+
+  const handleFormContinue = (payload: FPBillPurchaseRequest, summaryRows: FPSummaryRow[]) => {
+    setPendingPayload(payload);
+    setPendingSummaryRows(summaryRows);
+    setStage('CONFIRM');
+  };
+
+  const handleResultClose = () => {
+    setCompletedTx(null);
+    setStage('FORM');
+    onClose();
+  };
+
+  const handlePinAuthorized = async (tempId: string) => {
+    if (!pendingPayload) return;
+    setLoading(true);
+    try {
+      let response;
+      switch (pendingPayload.category) {
+        case 'AIRTIME':
+          response = await billsAPI.purchaseAirtime(pendingPayload, tempId);
+          break;
+        case 'DATA':
+          response = await billsAPI.purchaseData(pendingPayload, tempId);
+          break;
+        case 'ELECTRICITY':
+          response = await billsAPI.purchaseElectricity(pendingPayload, tempId);
+          break;
+        case 'CABLE':
+          response = await billsAPI.purchaseCable(pendingPayload, tempId);
+          break;
+      }
+
+      if (!response?.status) {
+        onError?.({ code: 'PURCHASE_FAILED', message: response?.message ?? 'Purchase failed' } as FPError);
+        // Still show the result screen — ResultScreen polls status itself
+        // and renders the failed state, same pattern SendScreen uses.
+      }
+      setCompletedTx(response?.payload ?? null);
+      setStage('RESULT');
+    } catch (error) {
+      onError?.(error as FPError);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderForm = () => {
+    switch (category) {
+      case 'AIRTIME':
+        return <AirtimeSubScreen amount={amount} onProcessTransaction={handleFormContinue} onError={onError} />;
+      case 'DATA':
+        return <DataSubScreen onProcessTransaction={handleFormContinue} onError={onError} />;
+      case 'ELECTRICITY':
+        return (
+          <ElectricitySubScreen
+            amount={amount}
+            user={user}
+            onProcessTransaction={handleFormContinue}
+            onError={onError}
+          />
+        );
+      case 'CABLE':
+        return <CableSubScreen onProcessTransaction={handleFormContinue} onError={onError} />;
+    }
+  };
+
+  if (stage === 'RESULT' && completedTx) {
+    return (
+      <ResultScreen
+        reference={completedTx.reference}
+        summaryRows={pendingSummaryRows}
+        allowRecurring={false}
+        statusFetcher={billsAPI.status}
+        onClose={handleResultClose}
+      />
+      
+    );
+  }
+
+  return (
+    <Container>
+      {loading && <LoadingAnimation text="Processing..." />}
+
+      {stage === 'FORM' && (
+        <>
+          <Header>
+            <HeaderTitle>{CATEGORY_TITLES[category]}</HeaderTitle>
+            <CloseBtn onPress={onClose}>
+              <Ionicons name="close" size={20} color={C.ink} />
+            </CloseBtn>
+          </Header>
+          {renderForm()}
+        </>
+      )}
+
+      {stage === 'CONFIRM' && pendingPayload && (
+        <>
+          <Header>
+            <HeaderTitle>Confirm Purchase</HeaderTitle>
+            <CloseBtn onPress={() => setStage('FORM')}>
+              <Ionicons name="close" size={20} color={C.ink} />
+            </CloseBtn>
+          </Header>
+          <ConfirmScreen
+            amount={pendingPayload.amountInKobo / 100}
+            currency="₦"
+            subtitle="Double check the details before you proceed. Please note that successful bill payments cannot be reversed."
+            summaryRows={pendingSummaryRows}
+            validate={(pin: string) => billsAPI.validateBillPin(pin, getFPStore().psspId || '')}
+            onContinue={handlePinAuthorized}
+          />
+        </>
+      )}
+    </Container>
+  );
+}