react-native-fpay 0.3.5 → 0.3.7

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

@@ -1,10 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import { View, Text, StyleSheet, ActivityIndicator, Image, TouchableOpacity, Dimensions, Animated, Easing, Alert, Vibration, Linking } from 'react-native';
+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 {
+  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';
@@ -122,8 +140,8 @@ const CornerBorder = styled(View)<{ position: string }>`
   position: absolute;
   width: 40px;
   height: 40px;
-  ${props => {
-    switch(props.position) {
+  ${(props) => {
+    switch (props.position) {
       case 'topLeft':
         return 'top: 0; left: 0; border-top-width: 4px; border-left-width: 4px;';
       case 'topRight':
@@ -184,36 +202,32 @@ const ScannedDataText = styled(Text)`
   font-weight: 600;
 `;
 
-
-export function NQRSubScreen({ 
-  amount, 
+export function NQRSubScreen({
+  amount,
   currency,
-  onClose, 
-  onProcessTransaction, 
-  onError
- }: Props) {
+  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);
     };
@@ -221,50 +235,65 @@ export function NQRSubScreen({
 
   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();
+    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);
+    if (hasPermission && device && isForeground) {
+      const timer = setTimeout(() => {
+        setIsActive(true);
+      }, 500);
 
-    return () => clearTimeout(timer);
-  }
+      return () => clearTimeout(timer);
+    }
 
-  return undefined;
-}, [hasPermission, device, isForeground]);
+    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 {
+        return;
+      }
+
+      if (permission === 'not-determined') {
+        // Request must be awaited — iOS shows dialog here
+        const result = await Camera.requestCameraPermission();
+        console.log('Permission result:', result);
+        setHasPermission(result === 'granted');
+        return;
+      }
+
+      if (permission === 'denied' || permission === 'restricted') {
         setHasPermission(false);
+        Alert.alert(
+          'Camera Permission Required',
+          'Please enable camera access in your device settings to scan QR codes.',
+          [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Open Settings', onPress: () => Linking.openSettings() },
+          ]
+        );
       }
     } catch (error) {
       console.error('Permission check error:', error);
@@ -276,14 +305,14 @@ export function NQRSubScreen({
     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() }
+            { text: 'Open Settings', onPress: () => Linking.openSettings() },
           ]
         );
         setHasPermission(false);
@@ -296,19 +325,19 @@ export function NQRSubScreen({
     }
   };
 
-  const handleQrData=(data: any)=>{
+  const handleQrData = (data: any) => {
     console.log('QR Code Data:', data);
-    const payload={
+    const payload = {
       accountNo: data?.accountNo,
       bank: data?.bankName,
       accountDetail: data?.accountName,
       channel: 'qr',
       amount: data?.amount,
-      remark: data?.description
-    }
+      remark: data?.description,
+    };
     console.log('Qr details:', payload);
     onProcessTransaction?.(payload as any);
-  }
+  };
 
   const scanQrFromGallery = async () => {
     try {
@@ -326,17 +355,16 @@ export function NQRSubScreen({
       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)
+        Alert.alert('Error:', barcodes?.message);
       }
     } catch (error) {
       console.error('QR Scan Error:', error);
     }
   };
 
-
   const codeScanner = useCodeScanner({
     codeTypes: ['qr', 'ean-13'],
     onCodeScanned: (codes: any) => {
@@ -344,7 +372,7 @@ export function NQRSubScreen({
         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));
@@ -361,8 +389,15 @@ export function NQRSubScreen({
   // }, []);
 
   const renderCamera = () => {
-    console.log('Render camera - hasPermission:', hasPermission, 'device:', !!device, 'isActive:', isActive);
-    
+    console.log(
+      'Render camera - hasPermission:',
+      hasPermission,
+      'device:',
+      !!device,
+      'isActive:',
+      isActive
+    );
+
     if (hasPermission === null) {
       return (
         <CameraPlaceholder>
@@ -413,18 +448,19 @@ export function NQRSubScreen({
 
   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={{ 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} />
@@ -434,10 +470,10 @@ export function NQRSubScreen({
           </HeaderButton>
         </HeaderRight>
       </Header>
-      
+
       <CameraContainer onLayout={() => setLayoutReady(true)}>
         {renderCamera()}
-        
+
         {/* Scan Overlay*/}
         {hasPermission && device && isActive && (
           <ScanOverlay pointerEvents="none">
@@ -462,22 +498,19 @@ export function NQRSubScreen({
         )}
 
         {/* Scanned Data Display */}
-        {scannedData && ( 
+        {scannedData && (
           <ScannedDataContainer>
             <ScannedDataText>Scanned: {scannedData}</ScannedDataText>
           </ScannedDataContainer>
-        )} 
+        )}
       </CameraContainer>
       {/* <StatusBarBlurBackground /> */}
-
-     
     </Container>
   );
 }
 
 const qrSize = width * 0.75;
 const styles = StyleSheet.create({
- 
   scanningLine: {
     height: qrSize,
     width: 2,