react-native-fpay 0.3.4 → 0.3.6

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

@@ -1,14 +1,24 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components/native';
-import Svg, { Path } from "react-native-svg";
-import { View, Text, TouchableOpacity, StyleSheet, Animated, Easing } from 'react-native';
-import { C, R, S, F, shadow } from '../../../theme';
-import type { FPError, Props, FPSendPaymentRequest } from '../../../../core/types';
-import NearbyUsersService from '../../../../engine/NearbyUsersService';
+import Svg, { Path } from 'react-native-svg';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  Easing,
+} from 'react-native';
+import type {
+  FPError,
+  Props,
+  FPSendPaymentRequest,
+  FPSendWalletPaymentRequest,
+} from '../../../../core/types';
 import { PulseAnimation } from '../../../components/PulseAnimation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import LoadingAnimation from '../../../components/LoadingAnimation';
-
+import { proximityAPI } from '../../../../core/api';
+import Geolocation from '@react-native-community/geolocation';
 
 const Container = styled(View)`
   flex: 1;
@@ -148,7 +158,7 @@ const LCIconContainer = styled(Animated.View)`
   width: 140px;
   height: 140px;
   border-radius: 90px;
-  background-color: #E8F5F1;
+  background-color: #e8f5f1;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
@@ -179,7 +189,7 @@ const StatusSubText = styled.Text`
 `;
 
 const ConnectionStatusBadge = styled.View<{ connected: boolean }>`
-  background-color: ${props => props.connected ? '#0a3d2e' : '#E0E0E0'};
+  background-color: ${(props) => (props.connected ? '#0a3d2e' : '#E0E0E0')};
   border-radius: 20px;
   padding: 8px 16px;
   margin-top: 16px;
@@ -188,44 +198,120 @@ const ConnectionStatusBadge = styled.View<{ connected: boolean }>`
 const ConnectionStatusText = styled.Text<{ connected: boolean }>`
   font-size: 12px;
   font-weight: 600;
-  color: ${props => props.connected ? '#ffffff' : '#666666'};
+  color: ${(props) => (props.connected ? '#ffffff' : '#666666')};
 `;
 
-
-const BluetoothIcon =({ color = "#111", size = 22 })=>(
-    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
-        <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 BluetoothIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <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" color={color}>
-    <Path d="M6.75 8L17.25 16.5L11.75 22V2L17.25 7.5L6.75 16" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
+const BluetoothScanningIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <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>
-)
-
-const ProximityIcon =({ color = "#111", size = 22 })=>(
-    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
-      <Path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z" fill={color} stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M19 19L17.5 17.5" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
-      <Path d="M15.5 15.5L14.5 14.5" stroke={color} strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round"/>
-    </Svg>
-)
+);
 
+const ProximityIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <Path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke={color}
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+      fill={color}
+      stroke={color}
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M19 19L17.5 17.5"
+      stroke={color}
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M15.5 15.5L14.5 14.5"
+      stroke={color}
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
 
-export function ProximitySubScreen({ 
-  amount, 
+export function ProximitySubScreen({
+  psspId,
+  amount,
   currency,
-  onClose, 
-  onProcessTransaction, 
-  onError }: Props) {
-
+  onClose,
+  onProcessTransaction,
+  onError,
+}: Props) {
   const [nearbyUsers, setNearbyUsers] = useState([]);
   const [loading, setLoading] = useState(false);
   const [scanning, setScanning] = useState(false);
@@ -233,29 +319,70 @@ export function ProximitySubScreen({
   const animationRef = useRef<Animated.CompositeAnimation | null>(null);
 
   const handleScan = async () => {
-      try {
-          const users: any = await NearbyUsersService.getNearbyUsers();
-          setNearbyUsers(users);
-      } catch (error) {
-          console.error('Error fetching nearby users:', error);
-      } finally {
+    if (!psspId) {
+      console.warn('No psspId — user not initialized');
+      return;
+    }
+
+    setScanning(true);
+    Geolocation.getCurrentPosition(
+      async (position) => {
+        try {
+          const { latitude, longitude } = position.coords;
+          const users: any = await proximityAPI.discover(
+            psspId,
+            latitude,
+            longitude,
+            1000
+          );
+          if (users.status) {
+            setNearbyUsers(users.payload || []);
+          }
+        } catch (err) {
+          console.error('Discover error:', err);
+        } finally {
           setScanning(false);
-      }
+        }
+      },
+      (error) => {
+        console.error('Location error:', error);
+        setScanning(false);
+      },
+      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
+    );
   };
 
   const handlePayment = async (selected: any) => {
     if (!selected) return;
     try {
-      const payload: FPSendPaymentRequest = { 
-        amount: amount, 
-        currency: currency, 
-        channel: 'proximity',
+      const payload: FPSendWalletPaymentRequest = {
+        sender_id: psspId || '',
+        sender_type: 'USER',
+        recipient: {
+          accountNumber: selected.accountNumber || '',
+          type: selected.userType === 'VIRTUAL_ACCOUNT_USER' ? 'USER' : 'AGENT',
+          accountName: selected.displayName || '',
+          agentId:
+            selected.userType === 'VIRTUAL_ACCOUNT_USER'
+              ? undefined
+              : selected.userId,
+          userId:
+            selected.userType === 'VIRTUAL_ACCOUNT_USER'
+              ? selected.userId
+              : undefined,
+        },
+        amount: Number(amount).toString(),
+        reference: `SEND_${Date.now()}`,
         narration: `Send ${currency}${amount} to ${selected.displayName}`,
-        recipient: selected
-      }
+        currency,
+        isBank: false,
+        channel: 'transfer',
+      };
 
       onProcessTransaction?.(payload);
-    } catch (e) { onError?.(e as FPError); }
+    } catch (e) {
+      onError?.(e as FPError);
+    }
   };
 
   useEffect(() => {
@@ -287,7 +414,7 @@ export function ProximitySubScreen({
     }
 
     return () => {
-        animationRef.current?.stop();
+      animationRef.current?.stop();
     };
   }, [scanning]);
 
@@ -298,75 +425,74 @@ export function ProximitySubScreen({
           <Ionicons name="close" size={24} />
         </HeaderButton>
         <HeaderCenter>
-          <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Proximity</Text>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color: '#FFF' }}>
+            Proximity
+          </Text>
           <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
         </HeaderCenter>
-        
+
         <HeaderRight>
           <HeaderButton>
-              <Ionicons name="ellipsis-vertical" size={22} />
+            <Ionicons name="ellipsis-vertical" size={22} />
           </HeaderButton>
         </HeaderRight>
       </Header>
 
-      {!scanning && !nearbyUsers.length && (
-        <QuickLinksContainer>
-          <QuickLinksIcon onPress={()=>setScanning(true)}>
-          <ProximityIcon size={60} color="#FFF" />
-          </QuickLinksIcon>
-          <QuickLinksText>Tap to Pay</QuickLinksText>
-          <Text style={{ fontSize: 16, color: '#999' }}>
-          No nearby users found
-          </Text>
-        </QuickLinksContainer>
-      )}
-        
       {scanning && (
         <LCAnimationContainer>
           <PulseAnimation />
-          <LCIconContainer style={{ transform: [{ scale: iconScale }], marginTop: 64 }}>
-              <LCIcon>📡</LCIcon>
+          <LCIconContainer
+            style={{ transform: [{ scale: iconScale }], marginTop: 64 }}
+          >
+            <LCIcon>📡</LCIcon>
           </LCIconContainer>
 
           <StatusTextContainer>
-              <StatusText>
-              Searching for nearby users
-              </StatusText>
-              {/* <StatusSubText>Hold devices back-to-back</StatusSubText> */}
+            <StatusText>Searching for nearby users</StatusText>
+            {/* <StatusSubText>Hold devices back-to-back</StatusSubText> */}
           </StatusTextContainer>
         </LCAnimationContainer>
-          
       )}
 
-        {!scanning && nearbyUsers.length > 0 && (
-            <ScrollContainer showsVerticalScrollIndicator={false}>
-              <ContentContainer>
-              <QuickLinksContainerWithDevices>
-                <QuickLinksText>Found {nearbyUsers.length} user(s)</QuickLinksText>
-              </QuickLinksContainerWithDevices>
-              {nearbyUsers.map((user: any) => (
-                <DeviceCard key={user.userId}>
+      {!scanning && !nearbyUsers.length && (
+        <QuickLinksContainer>
+          <QuickLinksIcon onPress={() => setScanning(true)}>
+            <ProximityIcon size={60} color="#FFF" />
+          </QuickLinksIcon>
+          <QuickLinksText>Tap to Pay</QuickLinksText>
+          <Text style={{ fontSize: 16, color: '#999' }}>
+            No nearby users found
+          </Text>
+        </QuickLinksContainer>
+      )}
+
+      {!scanning && nearbyUsers.length > 0 && (
+        <ScrollContainer showsVerticalScrollIndicator={false}>
+          <ContentContainer>
+            <QuickLinksContainerWithDevices>
+              <QuickLinksText>
+                Found {nearbyUsers.length} user(s)
+              </QuickLinksText>
+            </QuickLinksContainerWithDevices>
+            {nearbyUsers.map((user: any) => (
+              <DeviceCard key={user.userId}>
                 <DeviceInfo>
-                  <DeviceName>
-                  {user.userName || user.name}
-                  {user.appName}
-                  </DeviceName>
+                  <DeviceName>{user.displayName}</DeviceName>
                   <DeviceSignal>
-                  Signal: {Math.round(user.distance)}m away
+                    Signal: {Math.round(user.distance)}m away
                   </DeviceSignal>
                 </DeviceInfo>
-                <PayButton 
-                    onPress={() => handlePayment(user)}
-                    activeOpacity={0.8}
+                <PayButton
+                  onPress={() => handlePayment(user)}
+                  activeOpacity={0.8}
                 >
-                    <PayButtonText>Pay</PayButtonText>
+                  <PayButtonText>Pay</PayButtonText>
                 </PayButton>
-                </DeviceCard>
-              ))}  
-              </ContentContainer>
-            </ScrollContainer>
-            
-        )}
+              </DeviceCard>
+            ))}
+          </ContentContainer>
+        </ScrollContainer>
+      )}
     </Container>
   );
 }