react-native-fpay 0.2.9 → 0.3.2

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

@@ -0,0 +1,490 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, Image, TouchableOpacity, Dimensions, Animated, Easing, Alert, Vibration, Linking } from 'react-native';
+import { nqrAPI } from '../../../../core/api';
+import { FPButton } from '../../../components/FPButton';
+import { C, R, S, F, shadow } from '../../../theme';
+import type { FPCurrency, FPError, Props } from '../../../../core/types';
+import { Camera, useCameraDevice, useCameraDevices, useCodeScanner } from 'react-native-vision-camera';
+import styled from 'styled-components/native';
+import { launchImageLibrary } from 'react-native-image-picker';
+import QRKit from 'react-native-qr-kit';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { useIsForeground } from '../../../../engine/useIsForeground';
+
+const { width, height } = Dimensions.get('window');
+
+// Styled Components
+const Container = styled(View)`
+  flex: 1;
+  background-color: #000000;
+`;
+
+const Header = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  position: absolute !important;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  elevation: 4;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.1;
+  shadow-radius: 4px;
+  z-index: 9999999999 !important;
+`;
+
+const HeaderButton = styled(TouchableOpacity)`
+  padding: 8px;
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const HeaderCenter = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const HeaderRight = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const CameraContainer = styled(View)`
+  flex: 1;
+`;
+
+const StyledCamera = styled(Camera)`
+  flex: 1;
+`;
+
+const CameraPlaceholder = styled(View)`
+  flex: 1;
+  background-color: #1a1a1a;
+  justify-content: center;
+  align-items: center;
+`;
+
+const PlaceholderText = styled(Text)`
+  color: #ffffff;
+  font-size: 16px;
+  text-align: center;
+  padding: 20px;
+`;
+
+const PermissionButton = styled(TouchableOpacity)`
+  background-color: #10b981;
+  padding: 12px 24px;
+  border-radius: 12px;
+  margin-top: 16px;
+`;
+
+const PermissionButtonText = styled(Text)`
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+const ScanOverlay = styled(View)`
+  position: absolute;
+  top: 150px;
+  left: 0;
+  right: 0;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ScanOverlays = styled(View)`
+  position: absolute;
+  top: 200px;
+  left: 0;
+  right: 0;
+  bottom: ${height * 0.5}px;
+  justify-content: center;
+  align-items: center;
+`;
+const ScanFrame = styled(View)`
+  width: ${width * 0.75}px;
+  height: ${width * 0.75}px;
+  position: relative;
+`;
+
+const CornerBorder = styled(View)<{ position: string }>`
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  ${props => {
+    switch(props.position) {
+      case 'topLeft':
+        return 'top: 0; left: 0; border-top-width: 4px; border-left-width: 4px;';
+      case 'topRight':
+        return 'top: 0; right: 0; border-top-width: 4px; border-right-width: 4px;';
+      case 'bottomLeft':
+        return 'bottom: 0; left: 0; border-bottom-width: 4px; border-left-width: 4px;';
+      case 'bottomRight':
+        return 'bottom: 0; right: 0; border-bottom-width: 4px; border-right-width: 4px;';
+      default:
+        return '';
+    }
+  }}
+  border-color: #10b981;
+`;
+
+const ScanLineContainer = styled(View)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const ScanLine = styled(View)`
+  width: 100%;
+  height: 2px;
+  background-color: #10b981;
+  shadow-color: #10b981;
+  shadow-offset: 0px 0px;
+  shadow-opacity: 0.8;
+  shadow-radius: 4px;
+  elevation: 5;
+`;
+
+const ScanInstructionText = styled(Text)`
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  margin-top: 24px;
+  text-shadow-color: rgba(0, 0, 0, 0.75);
+  text-shadow-offset: 0px 1px;
+  text-shadow-radius: 3px;
+`;
+
+const ScannedDataContainer = styled(View)`
+  position: absolute;
+  top: 100px;
+  left: 20px;
+  right: 20px;
+  background-color: rgba(16, 185, 129, 0.95);
+  padding: 16px;
+  border-radius: 12px;
+  z-index: 5;
+`;
+
+const ScannedDataText = styled(Text)`
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+`;
+
+
+export function NQRSubScreen({ 
+  amount, 
+  currency,
+  onClose, 
+  onProcessTransaction, 
+  onError
+ }: Props) {
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const [scannedData, setScannedData] = useState<string | null>(null);
+  const [isScanning, setIsScanning] = useState(true);
+  const [torch, setTorch] = useState(false);
+  const [layoutReady, setLayoutReady] = useState(false);
+  
+
+  const [isActive, setIsActive] = useState(false);
+  const isForeground = useIsForeground();
+
+
+  const lineAnim = React.useRef(new Animated.Value(0)).current;
+  const lineWidth = 2;
+
+  
+  const device = useCameraDevice('back', {
+    physicalDevices: ['wide-angle-camera'],
+  });
+
+  useEffect(() => {
+    checkCameraPermission();
+    
+    return () => {
+      setIsActive(false);
+    };
+  }, []);
+
+  useEffect(() => {
+    // if (scanned) {
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(lineAnim, {
+            toValue: qrSize - lineWidth, // Move to right edge
+            duration: 1500,
+            easing: Easing.inOut(Easing.linear),
+            useNativeDriver: true,
+          }),
+          Animated.timing(lineAnim, {
+            toValue: 0, // Move back to left
+            duration: 1500,
+            easing: Easing.inOut(Easing.linear),
+            useNativeDriver: true,
+          }),
+        ])
+      ).start();
+    // }
+  }, []);
+
+  useEffect(() => {
+  if (hasPermission && device && isForeground) {
+    const timer = setTimeout(() => {
+      setIsActive(true);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }
+
+  return undefined;
+}, [hasPermission, device, isForeground]);
+
+  const checkCameraPermission = async () => {
+    try {
+      const permission = await Camera.getCameraPermissionStatus();
+      console.log('Current permission status:', permission);
+      
+      if (permission === 'granted') {
+        setHasPermission(true);
+      } else if (permission === 'not-determined') {
+        const newPermission = await Camera.requestCameraPermission();
+        console.log('New permission status:', newPermission);
+        setHasPermission(newPermission === 'granted');
+      } else {
+        setHasPermission(false);
+      }
+    } catch (error) {
+      console.error('Permission check error:', error);
+      setHasPermission(false);
+    }
+  };
+
+  const requestPermission = async () => {
+    try {
+      const permission = await Camera.requestCameraPermission();
+      console.log('Requested permission:', permission);
+      
+      if (permission === 'denied') {
+        Alert.alert(
+          'Permission Required',
+          'Camera permission is required to scan QR codes. Please enable it in settings.',
+          [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Open Settings', onPress: () => Linking.openSettings() }
+          ]
+        );
+        setHasPermission(false);
+      } else if (permission === 'granted') {
+        setHasPermission(true);
+      }
+    } catch (error) {
+      console.error('Permission request error:', error);
+      setHasPermission(false);
+    }
+  };
+
+  const handleQrData=(data: any)=>{
+    console.log('QR Code Data:', data);
+    const payload={
+      accountNo: data?.accountNo,
+      bank: data?.bankName,
+      accountDetail: data?.accountName,
+      channel: 'qr',
+      amount: data?.amount,
+      remark: data?.description
+    }
+    console.log('Qr details:', payload);
+    onProcessTransaction?.(payload as any);
+  }
+
+  const scanQrFromGallery = async () => {
+    try {
+      // Open gallery
+      const result: any = await launchImageLibrary({
+        mediaType: 'photo',
+        quality: 1,
+      });
+
+      if (result.didCancel || !result.assets || !result.assets[0].uri) {
+        return;
+      }
+
+      const imageUri = result.assets[0].uri;
+      const barcodes: any = await QRKit.decodeQR(imageUri);
+      if (barcodes?.success) {
+        Vibration.vibrate(100);
+        
+        await handleQrData(JSON.parse(barcodes?.data));
+      } else {
+        Alert.alert('Error:', barcodes?.message)
+      }
+    } catch (error) {
+      console.error('QR Scan Error:', error);
+    }
+  };
+
+
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr', 'ean-13'],
+    onCodeScanned: (codes: any) => {
+      if (isScanning && codes.length > 0) {
+        const qrData: any = codes[0].value;
+        setScannedData(qrData);
+        setIsScanning(false);
+        
+        // Vibrate on scan (optional)
+        Vibration.vibrate(100);
+        console.log('Scanned QR Code:', JSON.parse(qrData));
+        // Show alert with scanned data
+        handleQrData(JSON.parse(qrData));
+      }
+    },
+  });
+
+  // useEffect(() => {
+  //   setLoading(true);
+  //   nqrAPI.generate({ amount: amount ? amount * 100 : undefined, currency })
+  //       .then(setQr).catch(e => onError?.(e)).finally(() => setLoading(false));
+  // }, []);
+
+  const renderCamera = () => {
+    console.log('Render camera - hasPermission:', hasPermission, 'device:', !!device, 'isActive:', isActive);
+    
+    if (hasPermission === null) {
+      return (
+        <CameraPlaceholder>
+          <PlaceholderText>Checking camera permission...</PlaceholderText>
+        </CameraPlaceholder>
+      );
+    }
+
+    if (!hasPermission) {
+      return (
+        <CameraPlaceholder>
+          <PlaceholderText>
+            Camera permission is required to scan QR codes
+          </PlaceholderText>
+          <PermissionButton onPress={requestPermission}>
+            <PermissionButtonText>Grant Permission</PermissionButtonText>
+          </PermissionButton>
+        </CameraPlaceholder>
+      );
+    }
+
+    if (!device) {
+      return (
+        <CameraPlaceholder>
+          <PlaceholderText>Loading camera...</PlaceholderText>
+        </CameraPlaceholder>
+      );
+    }
+
+    if (!isActive) {
+      return (
+        <CameraPlaceholder>
+          <PlaceholderText>Initializing camera...</PlaceholderText>
+        </CameraPlaceholder>
+      );
+    }
+
+    return (
+      <StyledCamera
+        device={device}
+        isActive={true}
+        codeScanner={codeScanner}
+        enableZoomGesture={true}
+        torch={torch ? 'on' : 'off'}
+      />
+    );
+  };
+
+  return (
+    <Container>
+      
+      {/* Header */}
+      <Header>
+        <HeaderButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </HeaderButton>
+        
+        <HeaderCenter>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>QRIS</Text>
+          <Text style={{ fontSize: 10, color: '#FFF' }}>QB Code Standar</Text>
+        </HeaderCenter>
+        
+        <HeaderRight>
+          <HeaderButton onPress={scanQrFromGallery}>
+            <Ionicons name="image-outline" size={22} />
+          </HeaderButton>
+          <HeaderButton>
+            <Ionicons name="settings-outline" size={22} />
+          </HeaderButton>
+        </HeaderRight>
+      </Header>
+      
+      <CameraContainer onLayout={() => setLayoutReady(true)}>
+        {renderCamera()}
+        
+        {/* Scan Overlay*/}
+        {hasPermission && device && isActive && (
+          <ScanOverlay pointerEvents="none">
+            <ScanFrame>
+              <CornerBorder position="topLeft" />
+              <CornerBorder position="topRight" />
+              <CornerBorder position="bottomLeft" />
+              <CornerBorder position="bottomRight" />
+              <Animated.View
+                style={[
+                  styles.scanningLine,
+                  {
+                    transform: [{ translateX: lineAnim }],
+                  },
+                ]}
+              />
+            </ScanFrame>
+            <ScanInstructionText>
+              {isScanning ? 'Point camera at QR code' : 'QR Code Detected!'}
+            </ScanInstructionText>
+          </ScanOverlay>
+        )}
+
+        {/* Scanned Data Display */}
+        {scannedData && ( 
+          <ScannedDataContainer>
+            <ScannedDataText>Scanned: {scannedData}</ScannedDataText>
+          </ScannedDataContainer>
+        )} 
+      </CameraContainer>
+      {/* <StatusBarBlurBackground /> */}
+
+     
+    </Container>
+  );
+}
+
+const qrSize = width * 0.75;
+const styles = StyleSheet.create({
+ 
+  scanningLine: {
+    height: qrSize,
+    width: 2,
+    backgroundColor: '#10b981',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    borderRadius: 1,
+  },
+});

package/src/ui/screens/sub/{ProximitySubScreen.tsx → sendPayment/ProximitySubScreen.tsx}

@@ -1,16 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components/native';
 import Svg, { Path } from "react-native-svg";
-import { View, Text, FlatList, TouchableOpacity, StyleSheet, ActivityIndicator, TextInput, Animated, Easing } from 'react-native';
-import { proximityAPI, transferAPI } from '../../../core/api';
-import { FPButton } from '../../components/FPButton';
-import { C, R, S, F, shadow } from '../../theme';
-import type { FPCurrency, FPProximityPeer, FPError, FPTransaction } from '../../../core/types';
-import { FPEngine } from '../../../engine/FPEngine';
-import NearbyUsersService from '../../../engine/NearbyUsersService';
-import { PulseAnimation } from '../../components/PulseAnimation';
+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 { PulseAnimation } from '../../../components/PulseAnimation';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import LoadingAnimation from '../../components/LoadingAnimation';
+import LoadingAnimation from '../../../components/LoadingAnimation';
 
 
 const Container = styled(View)`
@@ -221,15 +218,13 @@ const ProximityIcon =({ color = "#111", size = 22 })=>(
     </Svg>
 )
 
-interface Props {
-  amount: number; 
-  currency: FPCurrency;
-  onDone: () => void;
-  onSuccess?: (tx: FPTransaction) => void; 
-  onError?: (err: FPError) => void;
-}
 
-export function ProximitySubScreen({ amount, currency, onDone, onSuccess, onError }: Props) {
+export function ProximitySubScreen({ 
+  amount, 
+  currency,
+  onClose, 
+  onProcessTransaction, 
+  onError }: Props) {
 
   const [nearbyUsers, setNearbyUsers] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -250,14 +245,17 @@ export function ProximitySubScreen({ amount, currency, onDone, onSuccess, onErro
 
   const handlePayment = async (selected: any) => {
     if (!selected) return;
-
-    setLoading(true);
     try {
-      const result = await transferAPI.send({ accountNumber: selected.accountNumber, bankCode: selected.bankCode, amount: amount * 100, narration: 'Proximity payment' });
-      onSuccess?.({ id: result.reference, reference: result.reference, type: 'debit', channel: 'proximity', amount: result.amount, currency: result.currency, status: result.status, recipient: { accountName: selected.displayName }, createdAt: result.createdAt });
-      onDone();
+      const payload: FPSendPaymentRequest = { 
+        amount: amount, 
+        currency: currency, 
+        channel: 'proximity',
+        narration: `Send ${currency}${amount} to ${selected.displayName}`,
+        recipient: selected
+      }
+
+      onProcessTransaction?.(payload);
     } catch (e) { onError?.(e as FPError); }
-    finally { setLoading(false); }
   };
 
   useEffect(() => {
@@ -295,11 +293,10 @@ export function ProximitySubScreen({ amount, currency, onDone, onSuccess, onErro
 
   return (
     <Container>
-            {/* Status Bar */}
-      {loading && (
-        <LoadingAnimation />
-      )}
       <Header>
+        <HeaderButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </HeaderButton>
         <HeaderCenter>
           <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Proximity</Text>
           <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
@@ -373,20 +370,3 @@ export function ProximitySubScreen({ amount, currency, onDone, onSuccess, onErro
     </Container>
   );
 }
-
-const st = StyleSheet.create({
-  wrap: { flex: 1, padding: S.lg },
-  back: { color: C.brand, fontSize: F.md, fontWeight: '600', marginBottom: S.md },
-  title: { fontSize: F.xl, fontWeight: '800', color: C.ink, marginBottom: S.lg },
-  peerCard: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.surface, borderRadius: R.lg, padding: S.md, borderWidth: 2, borderColor: 'transparent' },
-  peerSelected: { borderColor: C.brand, backgroundColor: '#EEF4FF' },
-  avatar: { width: 44, height: 44, borderRadius: 22, backgroundColor: C.brand, justifyContent: 'center', alignItems: 'center', marginRight: S.md },
-  avatarText: { color: C.white, fontWeight: '800', fontSize: F.lg },
-  peerName: { fontSize: F.md, fontWeight: '700', color: C.ink },
-  peerBank: { fontSize: F.sm, color: C.muted },
-  dist: { fontSize: F.xs, color: C.brand },
-  check: { color: C.brand, fontWeight: '800' },
-  empty: { textAlign: 'center', color: C.muted, padding: S.xl },
-  footer: { backgroundColor: C.surface, borderRadius: R.lg, padding: S.lg, marginTop: S.md },
-  footerText: { fontSize: F.md, color: C.ink, fontWeight: '600', marginBottom: S.md },
-});