react-native-fpay 0.3.5 → 0.3.7

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

@@ -20,13 +20,22 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import { transferAPI } from '../../../../core/api';
 import { FPButton } from '../../../components/FPButton';
 import { C, R, S, F, shadow } from '../../../theme';
-import type { FPCurrency, FPError, FPSendPaymentRequest, FPTransaction, FintechDevice, Props } from '../../../../core/types';
+import type {
+  FPCurrency,
+  FPError,
+  FPSendPaymentRequest,
+  FPSendWalletPaymentRequest,
+  FPTransaction,
+  FPUserInfo,
+  FintechDevice,
+  Props,
+} from '../../../../core/types';
 
 import { FPEngine } from '../../../../engine/FPEngine';
 
 import { PulseAnimation } from '../../../components/PulseAnimation';
 import InLoading from '../../../components/LoadingAnimation/InLoading';
-
+import { getFPStore } from '../../../../store/FPStore';
 
 const Container = styled(View)`
   flex: 1;
@@ -158,55 +167,100 @@ const BluetoothIconContainer = styled(View)`
 // ── SVG Icons — your originals, unchanged ────────────────────────────────────
 
 const BluetoothIcon = ({ color = '#111', size = 22 }) => (
-  <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none">
-    <Path d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-    <Path d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-    <Path d="M7.52779 15C6.57771 13.9385 6 12.5367 6 11C6 7.68629 8.68629 5 12 5C15.3137 5 18 7.68629 18 11C18 12.5367 17.4223 13.9385 16.4722 15" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-    <Path fillRule="evenodd" clipRule="evenodd" d="M9.25 11C9.25 9.48122 10.4812 8.25 12 8.25C13.5188 8.25 14.75 9.48122 14.75 11C14.75 12.5188 13.5188 13.75 12 13.75C10.4812 13.75 9.25 12.5188 9.25 11Z" fill="#fff" />
-    <Path d="M15.0776 21.4865C14.8566 22.8126 13.7093 23.7844 12.365 23.7844H11.7536C10.4093 23.7844 9.262 22.8126 9.041 21.4865L8.53213 18.4333C8.29232 16.9946 9.43086 15.8854 10.5339 15.15C11.9123 14.231 12.3864 14.3406 13.5847 15.1396C14.6421 15.8445 15.8263 16.9946 15.5865 18.4333L15.0776 21.4865Z" fill="#fff" />
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M7.52779 15C6.57771 13.9385 6 12.5367 6 11C6 7.68629 8.68629 5 12 5C15.3137 5 18 7.68629 18 11C18 12.5367 17.4223 13.9385 16.4722 15"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.25 11C9.25 9.48122 10.4812 8.25 12 8.25C13.5188 8.25 14.75 9.48122 14.75 11C14.75 12.5188 13.5188 13.75 12 13.75C10.4812 13.75 9.25 12.5188 9.25 11Z"
+      fill="#fff"
+    />
+    <Path
+      d="M15.0776 21.4865C14.8566 22.8126 13.7093 23.7844 12.365 23.7844H11.7536C10.4093 23.7844 9.262 22.8126 9.041 21.4865L8.53213 18.4333C8.29232 16.9946 9.43086 15.8854 10.5339 15.15C11.9123 14.231 12.3864 14.3406 13.5847 15.1396C14.6421 15.8445 15.8263 16.9946 15.5865 18.4333L15.0776 21.4865Z"
+      fill="#fff"
+    />
   </Svg>
 );
 
 const BluetoothScanningIcon = ({ color = '#111', size = 22 }) => (
-  <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none">
-    <Path d="M6.75 8L17.25 16.5L11.75 22V2L17.25 7.5L6.75 16" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <Path
+      d="M6.75 8L17.25 16.5L11.75 22V2L17.25 7.5L6.75 16"
+      stroke={color}
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
   </Svg>
 );
 
-
 type Phase =
-  | 'idle'          // nothing happening
-  | 'scanning'      // BLE scan running
-  | 'selected'      // device chosen, ready to send
-  | 'requesting'    // request sent, waiting for receiver
-  | 'transferring'  // BLE accepted, calling transfer API
+  | 'idle' // nothing happening
+  | 'scanning' // BLE scan running
+  | 'selected' // device chosen, ready to send
+  | 'requesting' // request sent, waiting for receiver
+  | 'transferring' // BLE accepted, calling transfer API
   | 'done'
   | 'declined'
   | 'error';
 
 const PHASE_LABEL: Record<Phase, string> = {
-  idle:         'Ready',
-  scanning:     'Scanning for nearby FPay devices...',
-  selected:     'Device selected — ready to send',
-  requesting:   'Waiting for receiver to respond...',
+  idle: 'Ready',
+  scanning: 'Scanning for nearby FPay devices...',
+  selected: 'Device selected — ready to send',
+  requesting: 'Waiting for receiver to respond...',
   transferring: 'Processing transfer...',
-  done:         'Payment sent!',
-  declined:     'Request was declined',
-  error:        'Something went wrong',
+  done: 'Payment sent!',
+  declined: 'Request was declined',
+  error: 'Something went wrong',
 };
 
 export function BluetoothSubScreen({
-  amount, 
+  amount,
   currency,
-  onClose, 
-  onProcessTransaction, 
+  onClose,
+  onProcessTransaction,
   onError,
 }: Props) {
   const [devices, setDevices] = useState<FintechDevice[]>([]);
   const [scanning, setScanning] = useState(false);
   const [status, setStatus] = useState('Ready to scan');
-  const [currentDevice, setCurrentDevice] = useState<FintechDevice | null>(null);
-  
+  const [currentDevice, setCurrentDevice] = useState<FintechDevice | null>(
+    null
+  );
+
   // ── 1. Scan ───────────────────────────────────────────────
 
   const handleScan = async () => {
@@ -219,14 +273,14 @@ export function BluetoothSubScreen({
         (device) => {
           setDevices((prevDevices) => {
             // Avoid duplicates
-            const exists = prevDevices.find(d => d.id === device.id);
+            const exists = prevDevices.find((d) => d.id === device.id);
             if (exists) return prevDevices;
             return [...prevDevices, device];
           });
         },
         5000 // Scan for 5 seconds
       );
-      
+
       setScanning(false);
       setStatus(`Found ${devices.length} user(s) nearby`);
     } catch (error) {
@@ -234,7 +288,7 @@ export function BluetoothSubScreen({
       setScanning(false);
       setStatus('Scan failed');
       Alert.alert('Error', 'Failed to scan for devices');
-    }finally{
+    } finally {
       setScanning(false);
     }
   };
@@ -256,35 +310,41 @@ export function BluetoothSubScreen({
       ]
     );
   };
-  
+
+  const fullName = (user: FPUserInfo): string => {
+    if (!user) return '';
+    return `${user.firstName} ${user.lastName}`;
+  };
 
   const initiatePayment = async (device: FintechDevice) => {
     try {
       setCurrentDevice(device);
       // Connect to the device
-      const user = FPEngine.getUser();
+      const user: any = FPEngine.getUser();
       await FPEngine.deviceConnection(device.id);
-      
+
       // Create payment request
       const request: any = {
         amount,
         currency,
-        senderId:   user?.userId ?? 'unknown',
-        senderName: user?.name ?? 'FountainPay User',
+        senderId: user?.userId ?? 'unknown',
+        senderName: fullName(user) ?? 'FountainPay User',
         senderPhone: user?.phone ?? 'unknown',
         senderEmail: user?.email ?? 'unknown',
-        timestamp:  Date.now(),
+        timestamp: Date.now(),
       };
 
       setStatus(`Sending payment request...`);
-      
-      
+
       // Send the payment request
-      console.log("Payment Request: ", request)
-      const response: any = await await FPEngine.sendBluetoothPaymentRequest(device.id, request);
+      console.log('Payment Request: ', request);
+      const response: any = await await FPEngine.sendBluetoothPaymentRequest(
+        device.id,
+        request
+      );
+
+      console.log('Component response: ', response);
 
-      console.log("Component response: ", response)
-      
       if (!response.accepted) {
         Alert.alert(
           'Payment Declined',
@@ -301,13 +361,30 @@ export function BluetoothSubScreen({
         } as FPError;
       }
 
-      const payload: FPSendPaymentRequest = { 
-        amount: amount, 
-        currency: currency, 
+      const payload: FPSendWalletPaymentRequest = {
+        sender_id: getFPStore().psspId ?? '',
+        sender_type: 'USER',
+        recipient: {
+          accountName: response.accountDetails.accountName,
+          accountNumber: response.accountDetails.accountNumber,
+          userId: response.accountDetails.userId,
+          type: response.accountDetails.receiverType ?? 'USER',
+        },
+        amount: request.amount.toString(),
+        reference: response.transactionId ?? `BT_${Date.now()}`,
+        narration: `Bluetooth payment to ${response.accountDetails.accountName}`,
+        currency: request.currency,
+        isBank: false,
         channel: 'bluetooth',
-        narration: `Send ${currency}${amount} to ${response.accountDetails.accountName}`,
-        recipient: response.accountDetails
-      }
+      };
+
+      // const payload: FPSendPaymentRequest = {
+      //   amount: amount,
+      //   currency: currency,
+      //   channel: 'bluetooth',
+      //   narration: `Send ${currency}${amount} to ${response.accountDetails.accountName}`,
+      //   recipient: response.accountDetails
+      // }
 
       onProcessTransaction?.(payload);
       setCurrentDevice(null);
@@ -328,7 +405,6 @@ export function BluetoothSubScreen({
     }
   };
 
-
   return (
     <Container>
       {/* Status Bar */}
@@ -338,12 +414,13 @@ export function BluetoothSubScreen({
           <Ionicons name="close" size={24} />
         </HeaderButton>
         <HeaderCenter>
-          <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Bluetooth</Text>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color: '#FFF' }}>
+            Bluetooth
+          </Text>
           <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
         </HeaderCenter>
-        
+
         <HeaderRight>
-          
           <HeaderButton>
             <Ionicons name="ellipsis-vertical" size={22} />
           </HeaderButton>
@@ -364,41 +441,34 @@ export function BluetoothSubScreen({
 
       {scanning && (
         <>
-          
           <QuickLinksContainer>
             <PulseAnimation />
             <BluetoothIconContainer>
               <BluetoothScanningIcon size={40} color="#FFF" />
               <QuickLinksText>Scanning...</QuickLinksText>
             </BluetoothIconContainer>
-            
           </QuickLinksContainer>
         </>
-        
       )}
-      
-      
+
       {!scanning && devices.length > 0 && (
         <ScrollContainer showsVerticalScrollIndicator={false}>
           <ContentContainer>
             <QuickLinksContainerWithDevices>
               <QuickLinksText>Found {devices.length} user(s)</QuickLinksText>
             </QuickLinksContainerWithDevices>
-            {devices.map(device => (
+            {devices.map((device) => (
               <DeviceCard key={device.id}>
                 <DeviceInfo>
                   <DeviceName>
                     {device.appName}: {device.userName || device.name}
-                    
                   </DeviceName>
-                  <DeviceSignal>
-                    Signal: {device.rssi} dBm
-                  </DeviceSignal>
+                  <DeviceSignal>Signal: {device.rssi} dBm</DeviceSignal>
                 </DeviceInfo>
                 {currentDevice?.id === device.id ? (
                   <InLoading size={40} text="" />
                 ) : (
-                  <PayButton 
+                  <PayButton
                     onPress={() => handlePayment(device)}
                     activeOpacity={0.8}
                   >
@@ -406,11 +476,9 @@ export function BluetoothSubScreen({
                   </PayButton>
                 )}
               </DeviceCard>
-            ))}  
+            ))}
           </ContentContainer>
-          
         </ScrollContainer>
-        
       )}
     </Container>
   );