react-native-fpay 0.4.31 → 0.4.34

package/src/ui/screens/BillsScreen.tsx

@@ -1,10 +1,3 @@
-// ─────────────────────────────────────────────
-// 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';
@@ -18,6 +11,7 @@ import { ResultScreen } from './ResultScreen';
 import LoadingAnimation from '../components/LoadingAnimation';
 import { billsAPI } from '../../core/api';
 import { getFPStore } from '../../store/FPStore';
+import { useLocation } from '../../hooks/useLocation';
 import { C, F, S } from '../theme';
 import type {
   FPBillCategory,
@@ -28,6 +22,7 @@ import type {
   FPUserInfo,
   FPSummaryRow,
 } from '../../core/types';
+import type { FPBillPurchaseContext } from '../../core/api';
 
 const Container = styled(View)`
   flex: 1;
@@ -72,14 +67,29 @@ interface Props extends Pick<FPCallbacks, 'onError'> {
 
 type FlowStage = 'FORM' | 'CONFIRM' | 'RESULT';
 
-export default function BillsScreen({ category, amount, user, onClose, onError }: Props) {
+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 [pendingPayload, setPendingPayload] =
+    useState<FPBillPurchaseRequest | null>(null);
+  const [pendingSummaryRows, setPendingSummaryRows] = useState<FPSummaryRow[]>(
+    []
+  );
+  const [completedTx, setCompletedTx] = useState<FPBillTransaction | null>(
+    null
+  );
+  const { requestLocation } = useLocation();
 
-  const handleFormContinue = (payload: FPBillPurchaseRequest, summaryRows: FPSummaryRow[]) => {
+  const handleFormContinue = (
+    payload: FPBillPurchaseRequest,
+    summaryRows: FPSummaryRow[]
+  ) => {
     setPendingPayload(payload);
     setPendingSummaryRows(summaryRows);
     setStage('CONFIRM');
@@ -95,26 +105,59 @@ export default function BillsScreen({ category, amount, user, onClose, onError }
     if (!pendingPayload) return;
     setLoading(true);
     try {
+      const isTerminalTransaction = !!user?.terminalId;
+      let geoLocation: { latitude: number; longitude: number } | undefined;
+      if (isTerminalTransaction) {
+        const loc = await requestLocation();
+        if (loc) {
+          geoLocation = { latitude: loc.latitude, longitude: loc.longitude };
+        }
+      }
+
+      const ctx: FPBillPurchaseContext = {
+        agentId: getFPStore().psspId || '',
+        terminalId: user?.terminalId,
+        geoLocation,
+        currency: 'NGN',
+        tnxRef: `bill_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+        forSelf:
+          pendingPayload.category === 'ELECTRICITY'
+            ? pendingPayload.forSelf
+            : true,
+        agentName: user ? `${user.firstName} ${user.lastName}` : undefined,
+        agentEmail: user?.email,
+        agentPhone: user?.phone,
+      };
+
       let response;
       switch (pendingPayload.category) {
         case 'AIRTIME':
-          response = await billsAPI.purchaseAirtime(pendingPayload, tempId);
+          response = await billsAPI.purchaseAirtime(
+            pendingPayload,
+            ctx,
+            tempId
+          );
           break;
         case 'DATA':
-          response = await billsAPI.purchaseData(pendingPayload, tempId);
+          response = await billsAPI.purchaseData(pendingPayload, ctx, tempId);
           break;
         case 'ELECTRICITY':
-          response = await billsAPI.purchaseElectricity(pendingPayload, tempId);
+          response = await billsAPI.purchaseElectricity(
+            pendingPayload,
+            ctx,
+            tempId
+          );
           break;
         case 'CABLE':
-          response = await billsAPI.purchaseCable(pendingPayload, tempId);
+          response = await billsAPI.purchaseCable(pendingPayload, ctx, 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.
+        onError?.({
+          code: 'PURCHASE_FAILED',
+          message: response?.message ?? 'Purchase failed',
+        } as FPError);
       }
       setCompletedTx(response?.payload ?? null);
       setStage('RESULT');
@@ -128,9 +171,20 @@ export default function BillsScreen({ category, amount, user, onClose, onError }
   const renderForm = () => {
     switch (category) {
       case 'AIRTIME':
-        return <AirtimeSubScreen amount={amount} onProcessTransaction={handleFormContinue} onError={onError} />;
+        return (
+          <AirtimeSubScreen
+            amount={amount}
+            onProcessTransaction={handleFormContinue}
+            onError={onError}
+          />
+        );
       case 'DATA':
-        return <DataSubScreen onProcessTransaction={handleFormContinue} onError={onError} />;
+        return (
+          <DataSubScreen
+            onProcessTransaction={handleFormContinue}
+            onError={onError}
+          />
+        );
       case 'ELECTRICITY':
         return (
           <ElectricitySubScreen
@@ -141,7 +195,12 @@ export default function BillsScreen({ category, amount, user, onClose, onError }
           />
         );
       case 'CABLE':
-        return <CableSubScreen onProcessTransaction={handleFormContinue} onError={onError} />;
+        return (
+          <CableSubScreen
+            onProcessTransaction={handleFormContinue}
+            onError={onError}
+          />
+        );
     }
   };
 
@@ -154,7 +213,6 @@ export default function BillsScreen({ category, amount, user, onClose, onError }
         statusFetcher={billsAPI.status}
         onClose={handleResultClose}
       />
-      
     );
   }
 
@@ -187,11 +245,13 @@ export default function BillsScreen({ category, amount, user, onClose, onError }
             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 || '')}
+            validate={(pin: string) =>
+              billsAPI.validateBillPin(pin, getFPStore().psspId || '')
+            }
             onContinue={handlePinAuthorized}
           />
         </>
       )}
     </Container>
   );
-}
+}

package/src/ui/screens/styles.ts

@@ -1,5 +1,6 @@
 import { Text, TouchableOpacity } from 'react-native';
 import styled from 'styled-components/native';
+import { C } from '../theme';
 
 export const ButtonContainer = styled.View`
   width: 100%;
@@ -84,7 +85,7 @@ export const AccountText = styled.Text`
 `;
 
 export const Label = styled.Text`
-  color: #fff;
+  color: ${C.muted};
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 12px;

package/src/ui/screens/sub/sendPayment/TransferSubScreen.tsx

@@ -33,12 +33,13 @@ import {
   StyledTextInput,
 } from '../../styles';
 import { getFPStore } from '../../../../store/FPStore';
+import { C } from '../../../theme';
 
 const { height } = Dimensions.get('window');
 
 const Container = styled(View)`
   flex: 1;
-  background-color: #000000;
+  background-color: ${C.white};
 `;
 
 const FormContainer = styled(View)`
@@ -66,7 +67,7 @@ const Header = styled(View)`
 
 const HeaderButton = styled(TouchableOpacity)`
   padding: 8px;
-  background-color: #fff;
+  background-color: ${C.surface};
   width: 40px;
   height: 40px;
   border-radius: 50%;
@@ -165,7 +166,7 @@ const SwitchGroup = styled(View)`
 
 const SwitchLabel = styled(Text)`
   font-size: 14px;
-  color: #fff;
+  color: ${C.muted};
   margin-left: 12px;
 `;
 
@@ -308,14 +309,14 @@ export function TransferSubScreen({
       {/* Header */}
       <Header>
         <HeaderButton onPress={onClose}>
-          <Ionicons name="close" size={24} />
+          <Ionicons name="close" size={24} color={C.ink} />
         </HeaderButton>
 
         <HeaderCenter>
-          <Text style={{ fontWeight: 'bold', fontSize: 16, color: '#FFF' }}>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color: C.ink }}>
             Bank
           </Text>
-          <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
+          <Text style={{ fontSize: 10, color: C.ink }}>Transfer</Text>
         </HeaderCenter>
 
         <HeaderRight />
@@ -323,11 +324,11 @@ export function TransferSubScreen({
       <FormContainer>
         <InputContainer>
           <SwitchGroup>
-            <Label>Account Details</Label>
+            <Label>{isBank ? 'Bank Account Number' : 'Wallet Number'}</Label>
             <ListGroup>
               <SwitchLabel>To Banks</SwitchLabel>
               <Switch
-                trackColor={{ false: '#767577', true: '#FFF' }}
+                trackColor={{ false: '#767577', true: C.ink }}
                 thumbColor={isBank ? '#003333' : '#f4f3f4'}
                 ios_backgroundColor="#3e3e3e"
                 value={isBank}