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

package/src/components/common/Header.tsx

@@ -1,8 +1,7 @@
-import { Image, StyleProp, View, ViewStyle, ImageSourcePropType } from 'react-native';
+import { Image, StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
 import { useOrientation } from '../../hooks/useOrientation';
 import { useIDM } from '../../context/IDMConfigurationContext';
-import { useEffect, useState } from 'react';
 import getStyles from '../../styles/HeaderStyles';
 
 interface HeaderProps {
@@ -15,19 +14,17 @@ export default function Header({ style }: HeaderProps) {
   const { idmConf } = useIDM();
   const styles = getStyles(theme, orientation);
 
-  const defaultLogo = require('../../../assets/images/logo.png');
-  const [logoSource, setLogoSource] = useState<ImageSourcePropType>(defaultLogo);
+  // Get logo from configuration - never show default logo
+  const logo = idmConf?.configuration?.logo;
 
-  useEffect(() => {
-    const logo = idmConf?.configuration?.logo;
-    if (logo?.startsWith('data:image')) {
-      setLogoSource({ uri: logo });
-    }
-  }, [idmConf]);
+  // Only render if logo is available from configuration
+  if (!logo || !logo.startsWith('data:image')) {
+    return null;
+  }
 
   return (
     <View style={[styles.container, style]}>
-      <Image source={logoSource} style={styles.logo} resizeMode="contain" />
+      <Image source={{ uri: logo }} style={styles.logo} resizeMode="contain" />
     </View>
   );
 }

package/src/context/FailedCountContext.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+
+// Define the context shape
+interface FailedCountContextType {
+  failedCount: number;
+  setFailedCount: React.Dispatch<React.SetStateAction<number>>;
+}
+
+// Create the context
+const FailedCountContext = createContext<FailedCountContextType | undefined>(undefined);
+
+// Custom hook to consume the context
+export const useFailedCount = () => {
+  const context = useContext(FailedCountContext);
+  if (!context) {
+    throw new Error('useFailedCount must be used within a FailedCountProvider');
+  }
+  return context;
+};
+
+// Provider props interface
+interface FailedCountProviderProps {
+  children: ReactNode;
+}
+
+// Provider component
+export const FailedCountProvider: React.FC<FailedCountProviderProps> = ({ children }) => {
+  const [failedCount, setFailedCount] = useState<number>(0);
+
+  return (
+    <FailedCountContext.Provider value={{ failedCount, setFailedCount }}>
+      {children}
+    </FailedCountContext.Provider>
+  );
+};

package/src/context/IDMConfigurationContext.tsx

@@ -17,9 +17,19 @@ interface IDMProviderProps {
 export function IDMProvider({ children, initialConf }: IDMProviderProps) {
   const [idmConf, setIDMConf] = useState<IDMConf>(initialConf);
 
-  // Optimized partial update function
+  // Optimized partial update function that preserves configuration
   const updateIDMConf = useCallback((updates: Partial<IDMConf>) => {
-    setIDMConf((prev) => ({ ...prev, ...updates }));
+    setIDMConf((prev) => {
+      // Ensure configuration is preserved during updates
+      const newConf = { ...prev, ...updates };
+      
+      // If configuration exists in prev but not in updates, preserve it
+      if (prev.configuration && !updates.configuration) {
+        newConf.configuration = prev.configuration;
+      }
+      
+      return newConf;
+    });
   }, []);
 
   // Memoize context value to prevent unnecessary re-renders

package/src/index.tsx

@@ -23,6 +23,7 @@ import { themes } from './context/themes';
 import { IDMConf } from './types/IDMConf';
 import { IDMProvider, useIDM } from './context/IDMConfigurationContext';
 import { KeyboardProvider, useKeyboard } from './context/KeyboardContext';
+import { FailedCountProvider } from './context/FailedCountContext';
 import Footer from './components/common/Footer';
 import Header from './components/common/Header';
 import Loader from './components/common/Loader';
@@ -31,7 +32,7 @@ import {
   generateAccessToken,
   generateRequest,
   getConfiguration,
-  getCountries,
+  countryMetaData,
 } from './apis';
 
 const Stack = createNativeStackNavigator();
@@ -54,11 +55,13 @@ interface IDMScanProps {
 
 export default function IDMScan({ idmConf }: IDMScanProps) {
   return (
-    <IDMProvider initialConf={idmConf}>
-      <KeyboardProvider>
-        <IDMScanContent />
-      </KeyboardProvider>
-    </IDMProvider>
+    <FailedCountProvider>
+      <IDMProvider initialConf={idmConf}>
+        <KeyboardProvider>
+          <IDMScanContent />
+        </KeyboardProvider>
+      </IDMProvider>
+    </FailedCountProvider>
   );
 }
 
@@ -69,6 +72,7 @@ function IDMScanContent() {
   const [currentRoute, setCurrentRoute] = useState<string | undefined>();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [isActivityReady, setIsActivityReady] = useState(false);
 
   // Memoize theme calculation
   const theme = useMemo(
@@ -102,35 +106,40 @@ function IDMScanContent() {
         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);
+            const token = await generateAccessToken({ ...idmConf, userDetails: userData });
 
             // 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);
+            const requestResult = await generateRequest(
+              { ...idmConf, userDetails: userData, accessToken: token },
+              idmConf.requestData
+            );
 
             // Step 4: Get configuration
             console.log('Fetching configuration...');
             const fetchedConfig = await getConfiguration(
-              confWithVerifyCode,
+              { ...idmConf, userDetails: userData, accessToken: token, verificationCode: requestResult.verificationCode },
               requestResult.verificationCode
             );
+
+            // Update all at once to prevent state loss
             setIDMConf({
-              ...confWithVerifyCode,
+              ...idmConf,
+              userDetails: userData,
+              accessToken: token,
+              verificationCode: requestResult.verificationCode,
               configuration: fetchedConfig,
             });
+          } else {
+            // Only update user data if token already exists
+            setIDMConf({
+              ...idmConf,
+              userDetails: userData,
+            });
           }
         }
       } catch (err: any) {
@@ -138,20 +147,23 @@ function IDMScanContent() {
         setError(err.message || 'Failed to initialize SDK');
       } finally {
         setLoading(false);
+        // Add delay to ensure Activity is fully ready before showing permission screen
+        setTimeout(() => {
+          setIsActivityReady(true);
+        }, 1000);
       }
     };
 
     initializeSDK();
   }, []); // Run once on mount
 
-  // Fetch countries when access token and verification code are available
+  // Load static country metadata when access token and verification code are available
   useEffect(() => {
-    const fetchCountriesData = async () => {
+    const loadCountriesData = () => {
       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 || [];
+          console.log('Loading countries from static metadata...');
+          const countriesArray = countryMetaData || [];
           
           const mapped = countriesArray.map((singleCountry: any) => ({
             label: singleCountry.country,
@@ -164,12 +176,12 @@ function IDMScanContent() {
             countryDetails: mapped,
           });
         } catch (err: any) {
-          console.error('Error fetching countries:', err);
+          console.error('Error loading countries:', err);
         }
       }
     };
 
-    fetchCountriesData();
+    loadCountriesData();
   }, [idmConf.accessToken, idmConf.verificationCode]);
 
   // Determine initial route based on permissions
@@ -180,7 +192,7 @@ function IDMScanContent() {
     return 'LocationPermission';
   }, [idmConf.userDetails?.permissionGranted]);
 
-  if (loading) {
+  if (loading || !isActivityReady) {
     return (
       <ThemeProvider theme={theme}>
         <Loader />

package/src/screens/BackDocumentAdvice.tsx

@@ -1,21 +1,21 @@
 import { useNavigation } from '@react-navigation/native';
-import { Image, ScrollView, View } from 'react-native';
+import { Image, ScrollView } from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/DocumentAdviceStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
+import { useIDM } from '../context/IDMConfigurationContext';
 import { useMemo } from 'react';
+import { getCardScanImageBack } from '../utils/imagesHelper';
 
 export default function BackDocumentAdvice() {
   const { theme } = useTheme();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const navigation = useNavigation();
 
-  const styles = useMemo(
-    () => getStyles(theme, orientation),
-    [theme, orientation]
-  );
+  const styles = useMemo(() => getStyles(theme, orientation), [theme, orientation]);
 
   const handleRedirect = () => {
     navigation.navigate('DocumentCaptureBack' as never);
@@ -27,19 +27,14 @@ export default function BackDocumentAdvice() {
         Capture Your ID Back
       </ThemedText>
 
-      {/* Placeholder for ID card back image */}
-      <View
-        style={[
-          styles.idcard,
-          {
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}
-      >
-        <ThemedText>ID Back Image</ThemedText>
-      </View>
+      <Image
+        source={getCardScanImageBack(
+          idmConf?.selectedCountryDetails?.selectedMetaData?.type,
+          idmConf?.selectedCountryDetails?.selectedMetaData?.countryCode
+        )}
+        style={styles.idcard}
+        resizeMode="contain"
+      />
 
       <Button
         title="Take a photo"

package/src/screens/BarcodeAdvice.tsx

@@ -1,17 +1,22 @@
 import { useNavigation } from '@react-navigation/native';
-import { ScrollView, View } from 'react-native';
+import { Image, ScrollView } from 'react-native';
 import Button from '../components/ui/Button';
 import ThemedText from '../components/ui/ThemedText';
 import getStyles from '../styles/BarcodeAdviceStyles';
 import { useTheme } from '../context/ThemeContext';
 import { useOrientation } from '../hooks/useOrientation';
-import { useMemo } from 'react';
+import { useIDM } from '../context/IDMConfigurationContext';
+import { useEffect, useState, useMemo } from 'react';
 
 export default function BarcodeAdvice() {
   const { theme } = useTheme();
+  const { idmConf } = useIDM();
   const orientation = useOrientation();
   const navigation = useNavigation();
 
+  const [barcodeType, setBarcodeType] = useState<string | null>('PDF417 B');
+
+  // Memoize styles to avoid recalculation on every render
   const styles = useMemo(
     () => getStyles(theme, orientation),
     [theme, orientation]
@@ -21,25 +26,40 @@ export default function BarcodeAdvice() {
     navigation.navigate('BarcodeCapture' as never);
   };
 
+  useEffect(() => {
+    const metadata = idmConf?.selectedCountryDetails?.selectedMetaData;
+    if (metadata?.barcode === 'PDF417F') {
+      setBarcodeType('PDF417F');
+    } else {
+      setBarcodeType('PDF417 B');
+    }
+  }, [idmConf]);
+
   return (
     <ScrollView contentContainerStyle={styles.container}>
-      <ThemedText style={styles.maintitle} type="title">
-        Scan the barcode on the back of your ID
-      </ThemedText>
-
-      {/* Placeholder for barcode image */}
-      <View
-        style={[
-          styles.idcard,
-          {
-            backgroundColor: '#f0f0f0',
-            justifyContent: 'center',
-            alignItems: 'center',
-          },
-        ]}
-      >
-        <ThemedText>Barcode Image</ThemedText>
-      </View>
+      {barcodeType === 'PDF417 B' ? (
+        <ThemedText style={styles.maintitle} type="title">
+          Scan the barcode on the back of your ID
+        </ThemedText>
+      ) : (
+        <ThemedText style={styles.maintitle} type="title">
+          Scan the barcode on the front of your ID
+        </ThemedText>
+      )}
+
+      {barcodeType === 'PDF417 B' ? (
+        <Image
+          source={require('../../assets/images/card-scan-back-icon.jpg')}
+          style={styles.idcard}
+          resizeMode="contain"
+        />
+      ) : (
+        <Image
+          source={require('../../assets/images/card-scan-front-icon.png')}
+          style={styles.idcard}
+          resizeMode="contain"
+        />
+      )}
 
       <Button
         title="Scan"