@trustchex/react-native-sdk 1.354.1 → 1.357.0

package/src/Screens/Static/OTPVerificationScreen.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useContext, useRef, useState } from 'react';
 import {
   SafeAreaView,
   Text,
@@ -18,9 +12,17 @@ import {
   ScrollView,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useRoute, type RouteProp } from '@react-navigation/native';
+import {
+  useRoute,
+  type RouteProp,
+  useFocusEffect,
+} from '@react-navigation/native';
 import AppContext from '../../Shared/Contexts/AppContext';
-import httpClient, { BadRequestError, NotFoundError, TooManyRequestsError } from '../../Shared/Libs/http-client';
+import httpClient, {
+  BadRequestError,
+  NotFoundError,
+  TooManyRequestsError,
+} from '../../Shared/Libs/http-client';
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from '../../Shared/Components/LanguageSelector';
 import NavigationManager, {
@@ -31,9 +33,7 @@ import StyledButton from '../../Shared/Components/StyledButton';
 import StyledTextInput from '../../Shared/Components/StyledTextInput';
 import { useTheme } from '../../Shared/Contexts/ThemeContext';
 import LottieView from 'lottie-react-native';
-import {
-  getSimulatedDemoData,
-} from '../../Shared/Libs/demo.utils';
+import { getSimulatedDemoData } from '../../Shared/Libs/demo.utils';
 import {
   trackError,
   useScreenTracking,
@@ -44,7 +44,8 @@ type OTPVerificationScreenParams = {
 };
 
 const OTPVerificationScreen = () => {
-  const route = useRoute<RouteProp<{ params: OTPVerificationScreenParams }, 'params'>>();
+  const route =
+    useRoute<RouteProp<{ params: OTPVerificationScreenParams }, 'params'>>();
   const sessionId = route.params?.sessionId;
   const [code, setCode] = useState('');
   const [isSendAgainEnabled, setIsSendAgainEnabled] = useState(false);
@@ -62,7 +63,9 @@ const OTPVerificationScreen = () => {
   // Guard: If sessionId is not provided, show error
   if (!sessionId) {
     return (
-      <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]}>
+      <SafeAreaView
+        style={[styles.container, { backgroundColor: theme.colors.background }]}
+      >
         <Text style={[styles.errorText, { color: theme.colors.error }]}>
           {t('general.sessionNotFound')}
         </Text>
@@ -73,10 +76,10 @@ const OTPVerificationScreen = () => {
   const apiUrl = `${appContext.baseUrl}/api/app/mobile`;
 
   const sendVerificationCode = useCallback(
-    async (sessionId: string) => {
+    async (id: string) => {
       try {
         await httpClient.post(
-          `${apiUrl}/verification-sessions/${sessionId}`,
+          `${apiUrl}/verification-sessions/${id}`,
           {},
           appContext.isDemoSession
             ? getSimulatedDemoData('SEND_VERIFICATION_CODE')
@@ -111,21 +114,21 @@ const OTPVerificationScreen = () => {
   );
 
   const getVerifiedSession = useCallback(
-    async (sessionId: string, verificationCode: string) => {
+    async (id: string, verificationCode: string) => {
       try {
         const response = await httpClient.post<
           VerificationSession,
           { code: string }
         >(
-          `${apiUrl}/verification-sessions/${sessionId}`,
+          `${apiUrl}/verification-sessions/${id}`,
           {
             code: verificationCode,
           },
           appContext.isDemoSession
             ? getSimulatedDemoData<
-              VerificationSession | undefined,
-              { code: string }
-            >('GET_VERIFIED_SESSION', { code: verificationCode })
+                VerificationSession | undefined,
+                { code: string }
+              >('GET_VERIFIED_SESSION', { code: verificationCode })
             : undefined
         );
 
@@ -153,12 +156,12 @@ const OTPVerificationScreen = () => {
   );
 
   const sendOTPCode = useCallback(
-    async (sessionId: string) => {
-      if (!sessionId) {
+    async (id: string) => {
+      if (!id) {
         return false;
       }
 
-      const isSent = await sendVerificationCode(sessionId);
+      const isSent = await sendVerificationCode(id);
 
       if (!isSent) {
         return false;
@@ -178,12 +181,14 @@ const OTPVerificationScreen = () => {
     [sendVerificationCode]
   );
 
-  useEffect(() => {
-    if (!initialized.current && sessionId) {
-      initialized.current = true;
-      sendOTPCode(sessionId);
-    }
-  }, [sessionId, sendOTPCode]);
+  useFocusEffect(
+    useCallback(() => {
+      if (!initialized.current && sessionId) {
+        initialized.current = true;
+        sendOTPCode(sessionId);
+      }
+    }, [sessionId, sendOTPCode])
+  );
 
   return (
     <SafeAreaView style={styles.safeAreaContainer}>
@@ -252,7 +257,8 @@ const OTPVerificationScreen = () => {
                               verifiedSession?.identificationId;
                             // Update workflow steps from verified session if available
                             if (verifiedSession.workflowSteps) {
-                              appContext.workflowSteps = verifiedSession.workflowSteps;
+                              appContext.workflowSteps =
+                                verifiedSession.workflowSteps;
                             }
                             setCode('');
                             navigationManagerRef.current?.navigateToNextStep();

package/src/Screens/Static/QrCodeScanningScreen.tsx

@@ -30,9 +30,16 @@ const QrCodeScanningScreen = () => {
     }
   };
 
+  const onClose = () => {
+    navigation.goBack();
+  };
+
   return (
     <SafeAreaView style={styles.container}>
-      <QrCodeScannerCamera onQrCodeScanned={onQrCodeScanned} />
+      <QrCodeScannerCamera
+        onQrCodeScanned={onQrCodeScanned}
+        onClose={onClose}
+      />
     </SafeAreaView>
   );
 };

package/src/Screens/Static/ResultScreen.tsx

@@ -158,7 +158,6 @@ const ResultScreen = () => {
     async (identificationId: string, sessionKey: string) => {
       // Ensure device info is always populated before sending consent
       if (!appContext.identificationInfo.consent.deviceInfo) {
-        console.log('Device info not set, generating now...');
         appContext.identificationInfo.consent.deviceInfo =
           await NativeDeviceInfo.generateHumanReadableIdentifier();
       }
@@ -199,9 +198,6 @@ const ResultScreen = () => {
         personalNumber:
           scannedDocument.mrzFields.personalNumber ||
           scannedDocument.mrzFields.optional1,
-        issueDate: mrzUtils.convertMRZDateToISODate(
-          scannedDocument.mrzFields.issueDate
-        ),
         birthDate: mrzUtils.convertMRZDateToISODate(
           scannedDocument.mrzFields.birthDate
         ),
@@ -391,10 +387,6 @@ const ResultScreen = () => {
           }
           await RNFS.copyFile(livenessVideoPath, videoFilePath);
 
-          // Get original file size
-          const originalStats = await RNFS.stat(videoFilePath);
-          const originalSize = originalStats.size;
-
           // Compress video with maximum compression settings
           const compressedVideoPath = await VideoCompressor.compress(
             videoFilePath,
@@ -413,17 +405,6 @@ const ResultScreen = () => {
           // Convert file:// URI to regular path for RNFS upload
           const normalizedPath = compressedVideoPath.replace('file://', '');
 
-          // Get compressed file size and log difference
-          const compressedStats = await RNFS.stat(normalizedPath);
-          const compressedSize = compressedStats.size;
-          const compressionRatio = (
-            ((originalSize - compressedSize) / originalSize) *
-            100
-          ).toFixed(2);
-          console.log(
-            `Video compression: ${(originalSize / 1024 / 1024).toFixed(2)}MB -> ${(compressedSize / 1024 / 1024).toFixed(2)}MB (${compressionRatio}% reduction)`
-          );
-
           uploadFileOptions.files.push({
             name: 'files',
             filename: 'LIVENESS_VIDEO.mp4',
@@ -495,12 +476,20 @@ const ResultScreen = () => {
         setIsSubmitting(false);
 
         // Track successful verification completion as final funnel step
-        trackFunnelStep('Verification Completed', 5, 5, 'nfc_scanning', true).catch(() => { });
-        analyticsService.trackEvent(
-          AnalyticsEventName.VERIFICATION_SUCCESS,
-          AnalyticsEventCategory.VERIFICATION,
-          { sessionId: appContext.identificationInfo.sessionId || '' }
-        ).catch(() => { });
+        trackFunnelStep(
+          'Verification Completed',
+          5,
+          5,
+          'nfc_scanning',
+          true
+        ).catch(() => {});
+        analyticsService
+          .trackEvent(
+            AnalyticsEventName.VERIFICATION_SUCCESS,
+            AnalyticsEventCategory.VERIFICATION,
+            { sessionId: appContext.identificationInfo.sessionId || '' }
+          )
+          .catch(() => {});
       } catch (error) {
         setIsSubmitting(false);
         setProgress(0);
@@ -514,15 +503,17 @@ const ResultScreen = () => {
           'result_screen',
           'critical',
           { recoverable: false, userAction: 'submit_verification' }
-        ).catch(() => { });
-        analyticsService.trackEvent(
-          AnalyticsEventName.VERIFICATION_FAILED,
-          AnalyticsEventCategory.VERIFICATION,
-          {
-            sessionId: appContext.identificationInfo.sessionId || '',
-            errorMessage,
-          }
-        ).catch(() => { });
+        ).catch(() => {});
+        analyticsService
+          .trackEvent(
+            AnalyticsEventName.VERIFICATION_FAILED,
+            AnalyticsEventCategory.VERIFICATION,
+            {
+              sessionId: appContext.identificationInfo.sessionId || '',
+              errorMessage,
+            }
+          )
+          .catch(() => {});
 
         Alert.alert(t('general.error'), t('resultScreen.submissionFailed'));
         appContext.onError?.(t('resultScreen.submissionFailed'));
@@ -712,7 +703,23 @@ const ResultScreen = () => {
                           {t('eidScannerScreen.mrzText')}
                         </Text>
                         <Text style={styles.mrzTextValue}>
-                          {appContext.identificationInfo.scannedDocument.mrzText}
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .mrzText
+                          }
+                        </Text>
+                      </View>
+                    )}
+
+                    {appContext.identificationInfo.scannedDocument
+                      .barcodeValue && (
+                      <View style={styles.mrzTextContainer}>
+                        <Text style={styles.mrzTextLabel}>Barcode Value</Text>
+                        <Text style={styles.mrzTextValue}>
+                          {
+                            appContext.identificationInfo.scannedDocument
+                              .barcodeValue
+                          }
                         </Text>
                       </View>
                     )}
@@ -724,84 +731,89 @@ const ResultScreen = () => {
                       <View style={styles.imageContainer}>
                         {appContext.identificationInfo.scannedDocument
                           .frontImage && (
-                            <View style={styles.imageItem}>
-                              <Image
-                                style={styles.image}
-                                source={{
-                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
                                     .frontImage
-                                    }`,
-                                }}
-                              />
-                              <Text style={styles.imageText}>
-                                {t('resultScreen.demoImageFront')}
-                              </Text>
-                            </View>
-                          )}
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageFront')}
+                            </Text>
+                          </View>
+                        )}
                         {appContext.identificationInfo.scannedDocument
                           .backImage && (
-                            <View style={styles.imageItem}>
-                              <Image
-                                style={styles.image}
-                                source={{
-                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
                                     .backImage
-                                    }`,
-                                }}
-                              />
-                              <Text style={styles.imageText}>
-                                {t('resultScreen.demoImageBack')}
-                              </Text>
-                            </View>
-                          )}
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageBack')}
+                            </Text>
+                          </View>
+                        )}
                         {appContext.identificationInfo.scannedDocument
                           .faceImage && (
-                            <View style={styles.imageItem}>
-                              <Image
-                                style={styles.image}
-                                source={{
-                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
                                     .faceImage
-                                    }`,
-                                }}
-                              />
-                              <Text style={styles.imageText}>
-                                {t('resultScreen.demoImageFace')}
-                              </Text>
-                            </View>
-                          )}
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageFace')}
+                            </Text>
+                          </View>
+                        )}
                         {appContext.identificationInfo.scannedDocument
                           .secondaryFaceImage && (
-                            <View style={styles.imageItem}>
-                              <Image
-                                style={styles.image}
-                                source={{
-                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
                                     .secondaryFaceImage
-                                    }`,
-                                }}
-                              />
-                              <Text style={styles.imageText}>
-                                {t('resultScreen.demoImageSecondaryFace')}
-                              </Text>
-                            </View>
-                          )}
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageSecondaryFace')}
+                            </Text>
+                          </View>
+                        )}
                         {appContext.identificationInfo.scannedDocument
                           .hologramImage && (
-                            <View style={styles.imageItem}>
-                              <Image
-                                style={styles.image}
-                                source={{
-                                  uri: `data:image/jpeg;base64,${appContext.identificationInfo.scannedDocument
+                          <View style={styles.imageItem}>
+                            <Image
+                              style={styles.image}
+                              source={{
+                                uri: `data:image/jpeg;base64,${
+                                  appContext.identificationInfo.scannedDocument
                                     .hologramImage
-                                    }`,
-                                }}
-                              />
-                              <Text style={styles.imageText}>
-                                {t('resultScreen.demoImageHologram')}
-                              </Text>
-                            </View>
-                          )}
+                                }`,
+                              }}
+                            />
+                            <Text style={styles.imageText}>
+                              {t('resultScreen.demoImageHologram')}
+                            </Text>
+                          </View>
+                        )}
                       </View>
                     </ScrollView>
                   </>
@@ -840,10 +852,30 @@ const ResultScreen = () => {
                                 }}
                               />
                               <Text style={styles.imageText}>
-                                {t(
-                                  'resultScreen.demoInstruction_' +
-                                  instruction.instruction.toLowerCase()
-                                )}
+                                {(() => {
+                                  switch (instruction.instruction) {
+                                    case 'SMILE':
+                                      return t('livenessDetectionScreen.smile');
+                                    case 'LOOK_STRAIGHT_AND_BLINK':
+                                      return t(
+                                        'livenessDetectionScreen.lookStraightAndBlink'
+                                      );
+                                    case 'TURN_HEAD_LEFT':
+                                      return t(
+                                        'livenessDetectionScreen.turnHeadLeft'
+                                      );
+                                    case 'TURN_HEAD_RIGHT':
+                                      return t(
+                                        'livenessDetectionScreen.turnHeadRight'
+                                      );
+                                    case 'LOOK_UP':
+                                      return t(
+                                        'livenessDetectionScreen.lookUp'
+                                      );
+                                    default:
+                                      return instruction.instruction;
+                                  }
+                                })()}
                               </Text>
                             </View>
                           ))}

package/src/Screens/Static/VerificationSessionCheckScreen.tsx

@@ -36,7 +36,7 @@ import {
   getSimulatedDemoData,
   isDemoSession,
 } from '../../Shared/Libs/demo.utils';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import {
   SESSION_CODE_CHARSET_PATTERN,
   SESSION_CODE_VALIDATION_PATTERN,
@@ -80,8 +80,8 @@ const VerificationSessionCheckScreen = () => {
           `${apiUrl}/verification-sessions/${id}`,
           isDemo
             ? getSimulatedDemoData<VerificationSession | undefined, void>(
-              'GET_SESSION'
-            )
+                'GET_SESSION'
+              )
             : undefined
         );
         return response;
@@ -116,8 +116,8 @@ const VerificationSessionCheckScreen = () => {
           `${apiUrl}/verification-sessions?sessionCode=${inputCode.toUpperCase()}`,
           isDemoMode
             ? getSimulatedDemoData<{ id: string } | undefined, void>(
-              'GET_SESSION_BY_CODE'
-            )
+                'GET_SESSION_BY_CODE'
+              )
             : undefined
         );
 
@@ -157,26 +157,54 @@ const VerificationSessionCheckScreen = () => {
     [navigation]
   );
 
+  // Reset initialized flag when screen is focused and sessionId is empty (after reset)
+  useFocusEffect(
+    useCallback(() => {
+      if (!appContext.identificationInfo.sessionId) {
+        initialized.current = false;
+        isCheckingSessionRef.current = false;
+      }
+    }, [appContext.identificationInfo.sessionId])
+  );
+
   useEffect(() => {
     // Only run this effect if sessionId exists AND we're not currently checking a session
     // This prevents race condition when session code is entered
-    if (!initialized.current && appContext.identificationInfo.sessionId && !isCheckingSessionRef.current) {
+    if (
+      !initialized.current &&
+      appContext.identificationInfo.sessionId &&
+      !isCheckingSessionRef.current
+    ) {
       initialized.current = true;
       isCheckingSessionRef.current = true;
       setIsCheckingSession(true);
       getSession(appContext.identificationInfo.sessionId)
         .then((session) => {
-          appContext.workflowSteps = session?.workflowSteps;
-          if (session?.branding) {
+          if (!session) {
+            // Session not found - clear the sessionId and reset flags to allow retry
+            Alert.alert(
+              t('general.error'),
+              t('verificationSessionCheckScreen.noVerificationSessionFound')
+            );
+            appContext.identificationInfo.sessionId = '';
+            if (appContext.setSessionId) {
+              appContext.setSessionId('');
+            }
+            initialized.current = false;
+            return;
+          }
+
+          appContext.workflowSteps = session.workflowSteps;
+          if (session.branding) {
             appContext.branding = appContext.branding || session.branding;
           }
 
-          if (session?.sendOTP) {
+          if (session.sendOTP) {
             navigateToOTPScreen(session.id);
           } else {
-            if (session?.identificationId) {
+            if (session.identificationId) {
               appContext.identificationInfo.identificationId =
-                session?.identificationId;
+                session.identificationId;
             }
             navigationManagerRef.current?.navigateToNextStep();
           }
@@ -193,6 +221,7 @@ const VerificationSessionCheckScreen = () => {
     appContext.identificationInfo.sessionId,
     getSession,
     navigateToOTPScreen,
+    t,
   ]);
 
   return (
@@ -270,10 +299,14 @@ const VerificationSessionCheckScreen = () => {
                                 sessionResponse.id;
                             }
 
-                            const session = await getSession(sessionResponse.id, isDemoMode);
+                            const session = await getSession(
+                              sessionResponse.id,
+                              isDemoMode
+                            );
                             appContext.workflowSteps = session?.workflowSteps;
                             if (session?.branding) {
-                              appContext.branding = appContext.branding || session.branding;
+                              appContext.branding =
+                                appContext.branding || session.branding;
                             }
 
                             if (session?.sendOTP) {