@test-web/react-native-sdk 1.0.1 → 2.1.0

package/src/components/common/Loader.tsx

@@ -1,13 +1,22 @@
 import React, { memo } from 'react';
-import { View, ActivityIndicator, StyleSheet } from 'react-native';
+import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
 
-function Loader() {
+interface LoaderProps {
+  message?: string;
+}
+
+function Loader({ message }: LoaderProps) {
   const { theme } = useTheme();
 
   return (
     <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
       <ActivityIndicator size="large" color={theme.colors.primary} />
+      {message && (
+        <Text style={[styles.message, { color: theme.colors.text }]}>
+          {message}
+        </Text>
+      )}
     </View>
   );
 }
@@ -18,6 +27,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  message: {
+    marginTop: 16,
+    fontSize: 16,
+    textAlign: 'center',
+  },
 });
 
 export default memo(Loader);

package/src/config/apiConfig.ts

@@ -0,0 +1,6 @@
+export const SANDBOX_BASE_URL = 'https://sandbox-api.idmerit.com';
+export const PRODUCTION_BASE_URL = 'https://api.idmerit.com';
+
+export const getBaseURL = (environment: 'sandbox' | 'production'): string => {
+  return environment?.toLowerCase() === 'sandbox' ? SANDBOX_BASE_URL : PRODUCTION_BASE_URL;
+};

package/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import BarcodeCapture from './screens/BarcodeCapture';
@@ -21,10 +21,18 @@ import MrzAdvice from './screens/MrzAdvice';
 import { ThemeProvider } from './context/ThemeContext';
 import { themes } from './context/themes';
 import { IDMConf } from './types/IDMConf';
-import { IDMProvider } from './context/IDMConfigurationContext';
+import { IDMProvider, useIDM } from './context/IDMConfigurationContext';
 import { KeyboardProvider, useKeyboard } from './context/KeyboardContext';
 import Footer from './components/common/Footer';
 import Header from './components/common/Header';
+import Loader from './components/common/Loader';
+import {
+  getUserDataAPI,
+  generateAccessToken,
+  generateRequest,
+  getConfiguration,
+  getCountries,
+} from './apis';
 
 const Stack = createNativeStackNavigator();
 
@@ -41,23 +49,26 @@ const HIDE_HEADER_FOOTER_ROUTES = new Set([
 ]);
 
 interface IDMScanProps {
-  idmConf?: IDMConf;
+  idmConf: IDMConf;
 }
 
-export default function IDMScan({ idmConf = {} }: IDMScanProps) {
+export default function IDMScan({ idmConf }: IDMScanProps) {
   return (
     <IDMProvider initialConf={idmConf}>
       <KeyboardProvider>
-        <IDMScanContent idmConf={idmConf} />
+        <IDMScanContent />
       </KeyboardProvider>
     </IDMProvider>
   );
 }
 
-function IDMScanContent({ idmConf }: { idmConf: IDMConf }) {
+function IDMScanContent() {
   const { isKeyboardVisible } = useKeyboard();
+  const { idmConf, setIDMConf } = useIDM();
   const navigationRef = useNavigationContainerRef();
   const [currentRoute, setCurrentRoute] = useState<string | undefined>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   // Memoize theme calculation
   const theme = useMemo(
@@ -80,11 +91,116 @@ function IDMScanContent({ idmConf }: { idmConf: IDMConf }) {
     setCurrentRoute(route?.name);
   }, [navigationRef]);
 
+  // Dynamic initialization flow
+  useEffect(() => {
+    const initializeSDK = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // Step 1: Get user data if not provided
+        if (!idmConf.userDetails) {
+          console.log('Fetching user data...');
+          const userData = await getUserDataAPI();
+          const updatedConf = { ...idmConf, userDetails: userData };
+          setIDMConf(updatedConf);
+
+          // Step 2: Generate access token if not provided
+          if (!idmConf.accessToken) {
+            console.log('Generating access token...');
+            const token = await generateAccessToken(updatedConf);
+            const confWithToken = { ...updatedConf, accessToken: token };
+            setIDMConf(confWithToken);
+
+            // Step 3: Generate verification request
+            console.log('Generating verification request...');
+            const requestResult = await generateRequest(confWithToken, idmConf.requestData);
+            const confWithVerifyCode = {
+              ...confWithToken,
+              verificationCode: requestResult.verificationCode,
+            };
+            setIDMConf(confWithVerifyCode);
+
+            // Step 4: Get configuration
+            console.log('Fetching configuration...');
+            const fetchedConfig = await getConfiguration(
+              confWithVerifyCode,
+              requestResult.verificationCode
+            );
+            setIDMConf({
+              ...confWithVerifyCode,
+              configuration: fetchedConfig,
+            });
+          }
+        }
+      } catch (err: any) {
+        console.error('SDK initialization error:', err);
+        setError(err.message || 'Failed to initialize SDK');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    initializeSDK();
+  }, []); // Run once on mount
+
+  // Fetch countries when access token and verification code are available
+  useEffect(() => {
+    const fetchCountriesData = async () => {
+      if (idmConf.accessToken && idmConf.verificationCode && !idmConf.countryDetails) {
+        try {
+          console.log('Fetching countries...');
+          const response = await getCountries(idmConf);
+          const countriesArray = Array.isArray(response) ? response : response?.data || [];
+          
+          const mapped = countriesArray.map((singleCountry: any) => ({
+            label: singleCountry.country,
+            value: singleCountry.index,
+            metadata: singleCountry.metadata || [],
+          }));
+
+          setIDMConf({
+            ...idmConf,
+            countryDetails: mapped,
+          });
+        } catch (err: any) {
+          console.error('Error fetching countries:', err);
+        }
+      }
+    };
+
+    fetchCountriesData();
+  }, [idmConf.accessToken, idmConf.verificationCode]);
+
+  // Determine initial route based on permissions
+  const initialRouteName = useMemo(() => {
+    if (idmConf.userDetails?.permissionGranted) {
+      return 'VerifyIdentity';
+    }
+    return 'LocationPermission';
+  }, [idmConf.userDetails?.permissionGranted]);
+
+  if (loading) {
+    return (
+      <ThemeProvider theme={theme}>
+        <Loader />
+      </ThemeProvider>
+    );
+  }
+
+  if (error) {
+    return (
+      <ThemeProvider theme={theme}>
+        <Loader message={`Error: ${error}`} />
+      </ThemeProvider>
+    );
+  }
+
   return (
     <ThemeProvider theme={theme}>
       {shouldShowHeaderFooter && <Header />}
       <NavigationContainer ref={navigationRef} onStateChange={handleStateChange}>
-        <Stack.Navigator initialRouteName="VerifyIdentity" screenOptions={SCREEN_OPTIONS}>
+        <Stack.Navigator initialRouteName={initialRouteName} screenOptions={SCREEN_OPTIONS}>
           <Stack.Screen name="VerifyIdentity" component={VerifyIdentity} />
           <Stack.Screen name="SelfieAdvice" component={SelfieAdvice} />
           <Stack.Screen name="SelfieCapture" component={SelfieCapture} />

package/src/screens/BarcodeCapture.tsx

@@ -1,30 +1,70 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import getStyles from '../styles/ScannerStyles';
 import Loader from '../components/common/Loader';
+import { captureBarcode } from '../apis';
 
 export default function BarcodeCapture() {
   const { theme } = useTheme();
+  const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
   const navigation = useNavigation();
   const [loading, setLoading] = useState(false);
+  const [scannedData, setScannedData] = useState<string | null>(null);
 
-  // Static implementation - simulate barcode scanning
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
+  // Handle barcode scan
+  const handleBarcodeScan = async (barcodeText: string) => {
+    if (loading || !barcodeText) return;
+
+    try {
       setLoading(true);
-      setTimeout(() => {
-        setLoading(false);
+
+      const barcodeData = {
+        token: String(idmConf.verificationCode || ''),
+        text: barcodeText,
+      };
+
+      // Call API to submit barcode
+      const result = await captureBarcode(idmConf, barcodeData);
+
+      if (result.status) {
+        // Update configuration with response
+        setIDMConf({
+          ...idmConf,
+          requestConfiguration: { ...idmConf.requestConfiguration, ...result },
+        });
+
+        // Navigate to ThankYou
         navigation.navigate('ThankYou' as never);
-      }, 2000);
+      } else {
+        Alert.alert('Error', result.errorMessage || 'Failed to process barcode');
+        setLoading(false);
+      }
+    } catch (error: any) {
+      console.error('Error processing barcode:', error);
+      Alert.alert('Error', 'Failed to process barcode');
+      setLoading(false);
+    }
+  };
+
+  // Simulate barcode scanning (replace with actual barcode scanner library)
+  useEffect(() => {
+    // TODO: Integrate actual barcode scanning library (e.g., react-native-vision-camera with barcode plugin)
+    // For now, simulate scanning after 3 seconds
+    const timer = setTimeout(() => {
+      const simulatedBarcode = 'SIMULATED_BARCODE_DATA_' + Date.now();
+      setScannedData(simulatedBarcode);
+      handleBarcodeScan(simulatedBarcode);
     }, 3000);
 
     return () => clearTimeout(timer);
-  }, [navigation]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <View style={styles.container}>
@@ -32,7 +72,7 @@ export default function BarcodeCapture() {
         Fill the box with the barcode{'\n'}until it turns green
       </Text>
 
-      {/* Camera placeholder */}
+      {/* Camera placeholder - Replace with actual camera view */}
       <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
         <Text
           style={{
@@ -42,8 +82,20 @@ export default function BarcodeCapture() {
             fontSize: 16,
           }}
         >
-          Barcode Scanner (Static)
+          {loading ? 'Processing...' : 'Scanning for barcode...'}
         </Text>
+        {scannedData && (
+          <Text
+            style={{
+              color: '#0f0',
+              textAlign: 'center',
+              marginTop: 20,
+              fontSize: 12,
+            }}
+          >
+            Detected: {scannedData.substring(0, 30)}...
+          </Text>
+        )}
       </View>
 
       {/* Barcode overlay box */}
@@ -55,7 +107,7 @@ export default function BarcodeCapture() {
           width: 350,
           height: 100,
           borderWidth: 2,
-          borderColor: '#00ff00',
+          borderColor: scannedData ? '#00ff00' : '#ffffff',
           backgroundColor: 'transparent',
         }}
       />

package/src/screens/DocumentCaptureBack.tsx

@@ -1,54 +1,163 @@
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Image, Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import getStyles from '../styles/DocumentCaptureStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import Loader from '../components/common/Loader';
+import { captureDocumentBack } from '../apis';
+import { processImageToBase64, validateImagePath } from '../utils/imageProcessor';
+import { createFlowManager } from '../utils/flowManager';
 
 export default function DocumentCaptureBack() {
   const { theme } = useTheme();
+  const { idmConf, setIDMConf } = useIDM();
   const orientation = useOrientation();
   const styles = getStyles(theme, orientation);
   const navigation = useNavigation();
   const [loading, setLoading] = useState(false);
+  const [hasPermission, setHasPermission] = useState(false);
+  const [device, setDevice] = useState<any>(null);
+  const cameraRef = useRef<any>(null);
+
+  // 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);
+        
+        const backDevice = useCameraDevice('back');
+        if (!backDevice) {
+          navigation.navigate('NoCameraFound' as never);
+          return;
+        }
+        
+        setDevice(backDevice);
+      } catch (error) {
+        console.warn('Camera initialization failed:', error);
+        setHasPermission(true);
+      }
+    };
+
+    initializeCamera();
+  }, [navigation]);
+
+  // Determine next navigation step based on metadata
+  const handleNextStep = () => {
+    const metaData = idmConf?.selectedCountryDetails?.selectedMetaData;
+    
+    if (!metaData) {
+      navigation.navigate('ThankYou' as never);
+      return;
+    }
+
+    const flowManager = createFlowManager(metaData);
+    const nextScreen = flowManager.getNextScreenAfterBack();
+    navigation.navigate(nextScreen as never);
+  };
 
   const takePhoto = async () => {
+    if (!cameraRef.current) {
+      Alert.alert('Camera Not Available', 'Camera is not available in this environment.');
+      return;
+    }
+
     try {
       setLoading(true);
-      // Static implementation - simulate photo capture
-      setTimeout(() => {
+      
+      const photo = await cameraRef.current.takePhoto();
+
+      if (!validateImagePath(photo?.path)) {
+        Alert.alert('Error', 'Failed to capture image');
         setLoading(false);
-        // Navigate to ThankYou after capturing back
-        navigation.navigate('ThankYou' as never);
-      }, 1000);
-    } catch (error) {
+        return;
+      }
+
+      // Process image to base64
+      const base64Image = await processImageToBase64(photo.path);
+
+      // Prepare photo data for API
+      const photoData = {
+        token: String(idmConf.verificationCode || ''),
+        file: base64Image,
+      };
+
+      // Call API to capture document back
+      const result = await captureDocumentBack(idmConf, photoData);
+
+      if (result.status) {
+        // Update configuration with response
+        setIDMConf({
+          ...idmConf,
+          requestConfiguration: { ...idmConf.requestConfiguration, ...result },
+        });
+
+        // Navigate to next step based on metadata
+        handleNextStep();
+      } else {
+        navigation.navigate('RetakeSelfie' as never, {
+          errorMessage: result.errorMessage || 'Failed to process document',
+        });
+      }
+    } catch (error: any) {
       console.error('Error taking photo:', error);
+      Alert.alert('Error', 'Failed to capture or process the image.');
+    } finally {
       setLoading(false);
     }
   };
 
+  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);
+    }
+
+    return (
+      <View style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}>
+        <Text style={{ color: '#fff', textAlign: 'center', marginTop: 100 }}>
+          Camera Preview
+        </Text>
+      </View>
+    );
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.topLabel}>Document Back Side</Text>
 
-      {/* Camera placeholder */}
-      <View style={StyleSheet.absoluteFill}>
-        <View
-          style={[StyleSheet.absoluteFill, { backgroundColor: '#000' }]}
-        ></View>
-      </View>
+      {renderCamera()}
 
-      {/* Card overlay placeholder */}
-      <View
-        style={[
-          styles.cardoverlay,
-          {
-            borderWidth: 2,
-            borderColor: '#fff',
-            backgroundColor: 'transparent',
-          },
-        ]}
+      <Image
+        source={require('../../assets/images/card-overlay-back.png')}
+        style={styles.cardoverlay}
+        resizeMode="cover"
       />
 
       <Text style={styles.bottomLabel}>