@test-web/react-native-sdk 2.3.0 → 2.4.0

package/src/screens/SelfieCapture.tsx

@@ -1,148 +1,180 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import { TouchableOpacity, View, StyleSheet, Text, Alert } from 'react-native';
+import { TouchableOpacity, View, StyleSheet, Image, ScrollView, Text } from 'react-native';
+import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
+import ImageResizer from 'react-native-image-resizer';
 import getStyles from '../styles/SelfieCaptureStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
 import { useIDM } from '../context/IDMConfigurationContext';
 import Loader from '../components/common/Loader';
-import { processImageToBase64, validateImagePath } from '../utils/imageProcessor';
+import { checkLiveness } from '../apis';
+import Button from '../components/ui/Button';
+import ThemedText from '../components/ui/ThemedText';
+import getPermissionStyles from '../styles/PermissionStyle';
+import Header from '../components/common/Header';
+import { useFailedCount } from '../context/FailedCountContext';
 
 export default function SelfieCapture() {
   const { theme } = useTheme();
-  const { idmConf, setIDMConf } = useIDM();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
+  const permissionStyles = getPermissionStyles(theme, orientation);
   const navigation = useNavigation();
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('front');
+  const cameraRef = useRef<Camera>(null);
   const [loading, setLoading] = useState(false);
-  const [hasPermission, setHasPermission] = useState(false);
-  const [device, setDevice] = useState<any>(null);
-  const cameraRef = useRef<any>(null);
+  const { failedCount, setFailedCount } = useFailedCount();
 
-  // Initialize camera
   useEffect(() => {
-    const initializeCamera = async () => {
-      try {
-        const { Camera, useCameraDevice, useCameraPermission } = require('react-native-vision-camera');
-        
-        const { hasPermission: hasPerm, requestPermission } = useCameraPermission();
-        
-        if (!hasPerm) {
-          const granted = await requestPermission();
-          if (!granted) {
-            navigation.navigate('CameraPermission' as never);
-            return;
-          }
-        }
-        
-        setHasPermission(true);
-        
-        // Get front camera for selfie
-        const frontDevice = useCameraDevice('front');
-        if (!frontDevice) {
-          navigation.navigate('NoCameraFound' as never);
-          return;
-        }
+    if (device == null) {
+      navigation.navigate('NoCameraFound' as never);
+    }
+  }, [device, navigation]);
+
+  // Show permission request screen if camera permission is not granted
+  if (!hasPermission) {
+    return (
+      <ScrollView contentContainerStyle={permissionStyles.container}>
+        <Header />
         
-        setDevice(frontDevice);
-      } catch (error) {
-        console.warn('Camera initialization failed:', error);
-        setHasPermission(true);
-      }
-    };
+        <ThemedText style={permissionStyles.maintitle} type="title">
+          Camera Access Required
+        </ThemedText>
+
+        <View style={{ padding: 20 }}>
+          <Text style={{ color: theme.colors.text, textAlign: 'center', marginBottom: 20 }}>
+            This app needs access to your camera to take selfies. Please grant camera permission.
+          </Text>
+        </View>
+
+        <Button
+          title="Grant Permission"
+          style={permissionStyles.buttonplace}
+          textStyle={permissionStyles.button}
+          onPress={async () => {
+            const granted = await requestPermission();
+            if (!granted) {
+              // Permission denied, stay on this screen
+              console.log('Camera permission denied');
+            }
+          }}
+        />
+      </ScrollView>
+    );
+  }
 
-    initializeCamera();
-  }, [navigation]);
+  if (!device) return null;
 
-  const takePhoto = useCallback(async () => {
-    if (!cameraRef.current) {
-      // Fallback for testing without camera
-      Alert.alert('Camera Not Available', 'Camera is not available. Proceeding to next step.');
-      navigation.navigate('SelectDocuments' as never);
+  async function takePhoto() {
+    if (!cameraRef.current || loading) {
       return;
     }
 
     try {
       setLoading(true);
-      
-      const photo = await cameraRef.current.takePhoto();
 
-      if (!validateImagePath(photo?.path)) {
-        Alert.alert('Error', 'Failed to capture selfie');
+      const photo = await cameraRef.current.takePhoto({
+        quality: '100',
+      });
+
+      if (!photo.path) {
+        console.error('No photo path available');
         setLoading(false);
         return;
       }
 
-      // Process image to base64
-      const base64Image = await processImageToBase64(photo.path);
-
-      // TODO: Integrate with liveness detection API
-      // For now, just store the selfie and proceed
-      setIDMConf({
-        ...idmConf,
-        userDetails: {
-          ...idmConf.userDetails,
-          selfieImage: base64Image,
-        },
-      });
+      let photoData;
 
-      // Navigate to document selection
-      navigation.navigate('SelectDocuments' as never);
+      try {
+        // ✅ Force resize to exactly 480 × 640
+        const resizedImage = await ImageResizer.createResizedImage(
+          photo.path,
+          480,
+          640,
+          'JPEG',
+          80,
+          270,
+          undefined,
+          undefined,
+          { mode: 'stretch', onlyScaleDown: true }
+        );
+
+        // handle uri/path safely
+        const fileUri = resizedImage.uri || `file://${resizedImage.path}`;
+
+        photoData = {
+          latitude: String(idmConf.userDetails?.location?.coords.latitude || ''),
+          longitude: String(idmConf.userDetails?.location?.coords.longitude || ''),
+          token: String(idmConf.verificationCode || ''),
+          file: {
+            uri: fileUri,
+            type: 'image/jpeg',
+            name: 'selfie.jpg',
+          },
+        };
+      } catch (resizeError: any) {
+        console.warn('Image resizing failed, using original image:', resizeError.message);
+        photoData = {
+          latitude: String(idmConf.userDetails?.location?.coords.latitude || ''),
+          longitude: String(idmConf.userDetails?.location?.coords.longitude || ''),
+          token: String(idmConf.verificationCode || ''),
+          file: {
+            uri: `file://${photo.path}`,
+            type: 'image/jpeg',
+            name: 'selfie.jpg',
+          },
+        };
+      }
+
+      const livenessResult = await checkLiveness(idmConf, photoData);
+
+      if (livenessResult.status) {
+        // Failed liveness check
+        setFailedCount((prev) => prev + 1);
+        if (failedCount >= 4) {
+          // After 5 failed attempts (0-4), reset and proceed to next page
+          setFailedCount(0);
+          navigation.navigate('SelectDocuments' as never);
+        } else {
+          navigation.navigate('RetakeSelfie' as never, {
+            errorMessage: livenessResult.errorMessage,
+          });
+        }
+      } else {
+        // Success - reset failed count and proceed
+        setFailedCount(0);
+        navigation.navigate('SelectDocuments' as never);
+      }
     } catch (error: any) {
-      console.error('Error taking selfie:', error);
-      Alert.alert('Error', 'Failed to capture selfie');
+      console.error('Failed to take photo, resize image, or perform liveness check:', error.message);
     } finally {
       setLoading(false);
     }
-  }, [idmConf, setIDMConf, navigation]);
-
-  // Render camera if available
-  const renderCamera = () => {
-    try {
-      const { Camera } = require('react-native-vision-camera');
-      
-      if (hasPermission && device) {
-        return (
-          <Camera
-            ref={cameraRef}
-            style={StyleSheet.absoluteFill}
-            device={device}
-            isActive={true}
-            photo={true}
-          />
-        );
-      }
-    } catch (error) {
-      console.warn('Camera render failed:', error);
-    }
-
-    // Fallback placeholder
-    return (
-      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
-        <Text style={[styles.text, { color: '#fff', marginTop: 100 }]}>
-          Camera Preview
-        </Text>
-      </View>
-    );
-  };
+  }
 
   return (
     <View style={styles.container}>
-      {renderCamera()}
-
-      {/* Camera overlay - Add your overlay image to assets/images/photo-overlay.png */}
-      {/* <Image
+      {device && (
+        <Camera
+          ref={cameraRef}
+          style={StyleSheet.absoluteFill}
+          device={device}
+          isActive={true}
+          photo={true}
+        />
+      )}
+      <Image
         source={require('../../assets/images/photo-overlay.png')}
         style={styles.cameraoverlay}
-        resizeMode="contain"
-      /> */}
-
-      {/* Capture button */}
+      />
       <View style={styles.buttonplace}>
         <TouchableOpacity 
           style={styles.captureButton} 
           onPress={takePhoto}
-          activeOpacity={0.7}
+          disabled={loading}
         />
       </View>
 

package/src/screens/ThankYou.tsx

@@ -1,56 +1,50 @@
-import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, StyleProp, ViewStyle } from 'react-native';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/ThankYouStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
 import { useIDM } from '../context/IDMConfigurationContext';
-import Loader from '../components/common/Loader';
 import { completeVerification } from '../apis';
 
 export default function ThankYou() {
   const { theme } = useTheme();
-  const { idmConf } = useIDM();
   const orientation = useOrientation();
+  const { idmConf } = useIDM();
   const styles = getStyles(theme, orientation);
-  const [loading, setLoading] = useState(false);
-  const [completed, setCompleted] = useState(false);
 
-  // Call complete verification API
   useEffect(() => {
-    const finalizeVerification = async () => {
-      if (completed || !idmConf.verificationCode) return;
-
-      try {
-        setLoading(true);
-        const result = await completeVerification(idmConf);
-        console.log('Verification completed:', result);
-        setCompleted(true);
-      } catch (error: any) {
-        console.error('Error completing verification:', error);
-        // Don't show error to user, just log it
-      } finally {
-        setLoading(false);
+    async function verify() {
+      if (idmConf?.verificationCode && idmConf?.accessToken) {
+        try {
+          const result = await completeVerification(idmConf);
+          console.log('Verification completed successfully:', result);
+        } catch (error: any) {
+          // Silently handle errors - verification may already be completed
+          // 400 error typically means verification was already processed or not ready
+          if (error.message?.includes('400')) {
+            console.log('Verification not ready or already completed (400 error)');
+          } else {
+            console.error('Error completing verification:', error.message);
+          }
+        }
       }
-    };
-
-    // Call after a short delay to ensure all data is submitted
-    const timer = setTimeout(() => {
-      finalizeVerification();
-    }, 1000);
-
-    return () => clearTimeout(timer);
-  }, [idmConf, completed]);
+    }
+    
+    // Only call verify if we have the required credentials
+    if (idmConf?.verificationCode && idmConf?.accessToken) {
+      verify();
+    }
+  }, [idmConf?.verificationCode, idmConf?.accessToken]);
 
   return (
-    <View style={styles.container}>
+    <View style={styles.container as StyleProp<ViewStyle>}>
       <ThemedText style={styles.maintitle} type="title">
         Thank You!
       </ThemedText>
       <ThemedText style={styles.subtitle} type="title">
         Your information{'\n'}has been uploaded
       </ThemedText>
-      {loading && <Loader />}
     </View>
   );
 }

package/src/screens/VerifyIdentity.tsx

@@ -47,6 +47,7 @@ export default function VerifyIdentity() {
         title="Let's Verify"
         style={styles.buttonplace}
         textStyle={styles.button}
+        // onPress={() => navigation.navigate('SelfieAdvice' as never)}
         onPress={() => navigation.navigate('SelfieAdvice' as never)}
       />
     </ScrollView>

package/src/styles/BarcodeAdviceStyles.ts

@@ -16,14 +16,14 @@ export default (theme: Theme, orientation: Orientation) => {
     maintitle: {
       textAlign: 'center',
       fontWeight: '300',
-      marginBottom: isPortrait ? 30 : 15,
+      marginBottom: 0,
       color: theme.colors.text,
     },
     idcard: {
-      marginTop: isPortrait ? 20 : 10,
+      marginTop: isPortrait ? 30 : 10,
       marginBottom: 0,
-      width: isPortrait ? 300 : 200,
-      height: isPortrait ? 200 : 150,
+      width: isPortrait ? 300 : 150,
+      height: isPortrait ? 280 : 90,
     },
     buttonplace: {
       position: 'absolute',
@@ -36,8 +36,8 @@ export default (theme: Theme, orientation: Orientation) => {
       color: theme.colors.buttonText,
       fontSize: 16,
       fontWeight: 'bold',
-      paddingVertical: 6,
-      paddingHorizontal: 15,
+      paddingVertical: 3,
+      paddingHorizontal: 30,
       borderRadius: 5,
       textAlign: 'center',
     },

package/src/styles/DocumentCaptureBackStyle.ts

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types/idmerit-sdk';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background,
+      position: 'relative',
+    },
+    topLabel: {
+      position: 'absolute',
+      top: isPortrait ? 60 : 20,
+      fontSize: 18,
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
+    },
+    bottomLabel: {
+      position: 'absolute',
+      bottom: isPortrait ? 140 : 20,
+      fontSize: 16,
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
+    },
+    camera: {
+      flex: 1,
+    },
+    button: {
+      width: 100,
+      height: 50,
+    },
+    cardoverlay: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 50 : 20,
+      left: '50%',
+      marginLeft: -35,
+    },
+    captureButton: {
+      width: 70,
+      height: 70,
+      backgroundColor: 'white',
+      borderRadius: 35,
+      borderWidth: 4,
+      borderColor: '#ccc',
+    },
+    text: {
+      color: '#fff',
+      fontSize: 16,
+      textAlign: 'center',
+      marginBottom: 20,
+    },
+  });
+};

package/src/styles/DocumentCaptureFrontStyle.ts

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../types';
+import { Orientation } from '../hooks/useOrientation';
+
+export default (theme: Theme, orientation: Orientation) => {
+  const isPortrait = orientation === 'portrait';
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background,
+      position: 'relative',
+    },
+    topLabel: {
+      position: 'absolute',
+      top: isPortrait ? 60 : 20,
+      fontSize: 18,
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
+    },
+    bottomLabel: {
+      position: 'absolute',
+      bottom: isPortrait ? 140 : 20,
+      fontSize: 16,
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
+    },
+    camera: {
+      flex: 1,
+    },
+    button: {
+      width: 100,
+      height: 50,
+    },
+    cardoverlay: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    buttonplace: {
+      position: 'absolute',
+      bottom: isPortrait ? 50 : 20,
+      left: '50%',
+      marginLeft: -35,
+    },
+    captureButton: {
+      width: 70,
+      height: 70,
+      backgroundColor: 'white',
+      borderRadius: 35,
+      borderWidth: 4,
+      borderColor: '#ccc',
+    },
+    text: {
+      color: '#fff',
+      fontSize: 16,
+      textAlign: 'center',
+      marginBottom: 20,
+    },
+  });
+};

package/src/styles/FooterStyles.ts

@@ -6,13 +6,22 @@ export default (theme: Theme, orientation: Orientation) =>
   StyleSheet.create({
     footer: {
       position: 'absolute',
-      bottom: 50,
+      bottom: 25,
       left: 0,
       right: 0,
       alignItems: 'center',
     },
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
     text: {
       fontSize: 14,
+      fontWeight:700,
       color: theme.colors.text,
     },
+    logo: {
+      width: 40,
+      height: 35,
+    },
   });

package/src/styles/ScannerStyles.ts

@@ -8,21 +8,58 @@ export default (theme: Theme, orientation: Orientation) => {
   return StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: '#000',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background,
+      position: 'relative',
+    },
+    topLabel: {
+      position: 'absolute',
+      top: isPortrait ? 80 : 20,
+      fontSize: 18,
+      fontWeight: '700',
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
+    },
+    bottomLabel: {
+      position: 'absolute',
+      bottom: isPortrait ? 140 : 20,
+      fontSize: 16,
+      width: '100%',
+      textAlign: 'center',
+      zIndex: 5,
+      color: '#fff',
     },
     camera: {
       flex: 1,
     },
-    topLabel: {
+    overlay: {
       position: 'absolute',
-      top: isPortrait ? 60 : 30,
-      alignSelf: 'center',
-      color: '#fff',
-      fontSize: 18,
-      fontWeight: 'bold',
-      zIndex: 10,
+      width: '100%',
+      height: '50%',
+      top: '20%',
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    captureButton: {
+      position: 'absolute',
+      bottom: isPortrait ? 50 : 20,
+      left: '50%',
+      marginLeft: -35,
+      width: 70,
+      height: 70,
+      backgroundColor: 'white',
+      borderRadius: 35,
+      borderWidth: 4,
+      borderColor: '#ccc',
+    },
+    text: {
+      color: theme.colors.text,
+      fontSize: 16,
       textAlign: 'center',
-      paddingHorizontal: 20,
+      marginBottom: 20,
     },
   });
 };

package/src/styles/ThankYouStyles.ts

@@ -2,30 +2,27 @@ import { StyleSheet } from 'react-native';
 import { Theme } from '../types';
 import { Orientation } from '../hooks/useOrientation';
 
-export default (theme: Theme, orientation: Orientation) => {
-  const isPortrait = orientation === 'portrait';
-
-  return StyleSheet.create({
+export default (theme: Theme, orientation: Orientation) =>
+  StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: theme.colors.background,
       alignItems: 'center',
-      justifyContent: 'center',
       paddingHorizontal: 20,
+      paddingTop: 0,
+      justifyContent: 'center',
     },
     maintitle: {
       textAlign: 'center',
-      fontWeight: 'bold',
-      marginBottom: 20,
+      fontWeight: '700',
+      marginBottom: 0,
       color: theme.colors.text,
-      fontSize: 32,
     },
     subtitle: {
-      textAlign: 'center',
       fontWeight: '300',
-      color: theme.colors.subtitle,
       fontSize: 20,
+      color: theme.colors.subtitle,
+      textAlign: 'center',
       lineHeight: 30,
     },
   });
-};