@trustchex/react-native-sdk 1.334.0 → 1.354.1

package/lib/module/Screens/Static/ResultScreen.js

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Alert, Image, Platform, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from "../../Shared/Contexts/AppContext.js";
 import httpClient from "../../Shared/Libs/http-client.js";
 import RNFS from 'react-native-fs';
@@ -30,9 +31,37 @@ const ResultScreen = () => {
   const {
     t
   } = useTranslation();
+  const insets = useSafeAreaInsets();
 
   // Track screen view and exit
   useScreenTracking('result_screen');
+  const formatDate = useCallback(dateStr => {
+    if (!dateStr) return '';
+    try {
+      // Check if it's YYMMDD format (6 digits)
+      if (dateStr.length === 6 && /^\d{6}$/.test(dateStr)) {
+        const yy = dateStr.substring(0, 2);
+        const mm = dateStr.substring(2, 4);
+        const dd = dateStr.substring(4, 6);
+
+        // Assume 19xx if YY >= 50, else 20xx
+        const year = parseInt(yy) >= 50 ? `19${yy}` : `20${yy}`;
+        return `${dd}/${mm}/${year}`;
+      }
+
+      // Otherwise try to parse as ISO 8601
+      const date = new Date(dateStr);
+      if (!isNaN(date.getTime())) {
+        const day = String(date.getDate()).padStart(2, '0');
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+      }
+      return dateStr;
+    } catch {
+      return dateStr;
+    }
+  }, []);
   const apiUrl = useMemo(() => `${appContext.baseUrl}/api/app/mobile`, [appContext.baseUrl]);
   useEffect(() => {
     if (appContext.isDemoSession) {
@@ -414,7 +443,7 @@ const ResultScreen = () => {
                     children: [t('eidScannerScreen.birthDate'), ":"]
                   }), /*#__PURE__*/_jsx(Text, {
                     style: styles.mrzInfoText,
-                    children: appContext.identificationInfo.scannedDocument.mrzFields?.birthDate
+                    children: formatDate(appContext.identificationInfo.scannedDocument.mrzFields?.birthDate)
                   })]
                 }), /*#__PURE__*/_jsxs(View, {
                   style: styles.mrzInfoItem,
@@ -432,18 +461,18 @@ const ResultScreen = () => {
                     children: [t('eidScannerScreen.expirationDate'), ":"]
                   }), /*#__PURE__*/_jsx(Text, {
                     style: styles.mrzInfoText,
-                    children: appContext.identificationInfo.scannedDocument.mrzFields?.expirationDate
-                  })]
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.mrzInfoItem,
-                  children: [/*#__PURE__*/_jsxs(Text, {
-                    style: styles.mrzInfoLabel,
-                    children: [t('eidScannerScreen.mrzText'), ":"]
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.mrzInfoText,
-                    children: appContext.identificationInfo.scannedDocument.mrzText
+                    children: formatDate(appContext.identificationInfo.scannedDocument.mrzFields?.expirationDate)
                   })]
                 })]
+              }), appContext.identificationInfo.scannedDocument.mrzText && /*#__PURE__*/_jsxs(View, {
+                style: styles.mrzTextContainer,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: styles.mrzTextLabel,
+                  children: t('eidScannerScreen.mrzText')
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.mrzTextValue,
+                  children: appContext.identificationInfo.scannedDocument.mrzText
+                })]
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.sectionText,
                 children: t('resultScreen.demoImages')
@@ -547,13 +576,18 @@ const ResultScreen = () => {
               })]
             })]
           })
-        }), /*#__PURE__*/_jsx(StyledButton, {
-          mode: "contained",
-          onPress: () => {
-            appContext.onCompleted?.();
-            navigationManagerRef.current?.reset();
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            paddingBottom: insets.bottom
           },
-          children: t('resultScreen.demoStartOver')
+          children: /*#__PURE__*/_jsx(StyledButton, {
+            mode: "contained",
+            onPress: () => {
+              appContext.onCompleted?.();
+              navigationManagerRef.current?.reset();
+            },
+            children: t('resultScreen.demoStartOver')
+          })
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(LottieView, {
@@ -582,9 +616,11 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     display: 'flex',
-    padding: 20,
+    paddingVertical: 20,
+    paddingHorizontal: 10,
     justifyContent: 'center',
-    gap: 20
+    gap: 20,
+    backgroundColor: 'white'
   },
   sectionAnimation: {
     width: 192,
@@ -627,18 +663,20 @@ const styles = StyleSheet.create({
   image: {
     width: 100,
     height: 100,
-    objectFit: 'contain'
+    objectFit: 'contain',
+    borderRadius: 8
   },
   imageItem: {
     display: 'flex',
     flexDirection: 'column',
-    gap: 10,
+    gap: 8,
     alignItems: 'center'
   },
   imageContainer: {
     display: 'flex',
     flexDirection: 'row',
-    gap: 10
+    gap: 10,
+    paddingVertical: 8
   },
   imageText: {
     fontSize: 10,
@@ -648,14 +686,19 @@ const styles = StyleSheet.create({
   },
   mrzInfo: {
     flexDirection: 'column',
-    width: '100%'
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#D1D5DB',
+    borderRadius: 8,
+    overflow: 'hidden'
   },
   mrzInfoItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    borderBottomColor: 'lightgray',
+    borderBottomColor: '#D1D5DB',
     borderBottomWidth: 1,
-    paddingVertical: 5
+    paddingVertical: 8,
+    paddingHorizontal: 12
   },
   mrzInfoLabel: {
     color: 'black',
@@ -664,7 +707,28 @@ const styles = StyleSheet.create({
   },
   mrzInfoText: {
     color: 'black',
-    fontSize: 10
+    fontSize: 10,
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace'
+  },
+  mrzTextContainer: {
+    padding: 12,
+    backgroundColor: '#F3F4F6',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#D1D5DB'
+  },
+  mrzTextLabel: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280',
+    marginBottom: 8
+  },
+  mrzTextValue: {
+    fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+    fontSize: 10,
+    letterSpacing: 1,
+    lineHeight: 14,
+    color: '#1F2937'
   },
   trustchexLogo: {
     width: 150,

package/lib/module/Screens/Static/VerificationSessionCheckScreen.js

@@ -4,7 +4,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import { SafeAreaView, Text, StyleSheet, Alert, View, Image, Dimensions, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from "../../Shared/Contexts/AppContext.js";
-import httpClient, { BadRequestError, NotFoundError, TooManyRequestsError } from "../../Shared/Libs/http-client.js";
+import httpClient, { NotFoundError } from "../../Shared/Libs/http-client.js";
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from "../../Shared/Components/LanguageSelector.js";
 import NavigationManager from "../../Shared/Components/NavigationManager.js";
@@ -20,11 +20,8 @@ import { trackError, trackFunnelStep, useScreenTracking } from "../../Shared/Lib
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const VerificationSessionCheckScreen = () => {
   const [sessionCode, setSessionCode] = useState('');
-  const [code, setCode] = useState('');
   const [isCheckingSession, setIsCheckingSession] = useState(false);
-  const [isSendAgainEnabled, setIsSendAgainEnabled] = useState(false);
-  const [isCodeSent, setIsCodeSent] = useState(false);
-  const [isCodeGettingVerified, setIsCodeGettingVerified] = useState(false);
+  const isCheckingSessionRef = useRef(false);
   const appContext = useContext(AppContext);
   const {
     t
@@ -42,9 +39,10 @@ const VerificationSessionCheckScreen = () => {
   const validateSessionCode = useCallback(value => {
     return SESSION_CODE_VALIDATION_PATTERN.test(value.toUpperCase());
   }, []);
-  const getSession = useCallback(async id => {
+  const getSession = useCallback(async (id, isDemoMode) => {
+    const isDemo = isDemoMode ?? appContext.isDemoSession;
     try {
-      const response = await httpClient.get(`${apiUrl}/verification-sessions/${id}`, appContext.isDemoSession ? getSimulatedDemoData('GET_SESSION') : undefined);
+      const response = await httpClient.get(`${apiUrl}/verification-sessions/${id}`, isDemo ? getSimulatedDemoData('GET_SESSION') : undefined);
       return response;
     } catch (error) {
       if (error instanceof NotFoundError) {
@@ -60,9 +58,10 @@ const VerificationSessionCheckScreen = () => {
   }, [apiUrl, appContext.isDemoSession, t]);
   const getSessionByCode = useCallback(async inputCode => {
     try {
-      appContext.isDemoSession = isDemoSession(inputCode);
-      analyticsService.setDemoSession(appContext.isDemoSession);
-      const response = await httpClient.get(`${apiUrl}/verification-sessions?sessionCode=${inputCode.toUpperCase()}`, appContext.isDemoSession ? getSimulatedDemoData('GET_SESSION_BY_CODE') : undefined);
+      const isDemoMode = isDemoSession(inputCode);
+      appContext.setIsDemoSession?.(isDemoMode);
+      analyticsService.setDemoSession(isDemoMode);
+      const response = await httpClient.get(`${apiUrl}/verification-sessions?sessionCode=${inputCode.toUpperCase()}`, isDemoMode ? getSimulatedDemoData('GET_SESSION_BY_CODE') : undefined);
       if (!response || !response.id) {
         throw new NotFoundError();
       }
@@ -82,68 +81,17 @@ const VerificationSessionCheckScreen = () => {
       }
     }
   }, [apiUrl, appContext, t]);
-  const sendVerificationCode = useCallback(async sessionId => {
-    try {
-      await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {}, appContext.isDemoSession ? getSimulatedDemoData('SEND_VERIFICATION_CODE') : undefined);
-      return true;
-    } catch (error) {
-      if (error instanceof NotFoundError) {
-        // Session expired or invalid - expected behavior, not actionable
-        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.noVerificationSessionFound'));
-      } else if (error instanceof TooManyRequestsError) {
-        // Code was already sent recently - this is expected behavior
-        // Return true since the code was already sent
-        return true;
-      } else {
-        trackError('VERIFICATION_CODE_SEND_FAILED', 'Failed to send verification code', 'verification_session_check', 'high', {
-          recoverable: true,
-          userAction: 'send_verification_code'
-        });
-        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.cannotSendVerificationCode'));
-      }
-    }
-    return false;
-  }, [apiUrl, appContext.isDemoSession, t]);
-  const getVerifiedSession = useCallback(async (sessionId, verificationCode) => {
-    try {
-      const response = await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {
-        code: verificationCode
-      }, appContext.isDemoSession ? getSimulatedDemoData('GET_VERIFIED_SESSION', {
-        code: verificationCode
-      }) : undefined);
-      return response;
-    } catch (error) {
-      if (error instanceof NotFoundError) {
-        // Session expired or invalid - expected behavior, not actionable
-        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.noVerificationSessionFound'));
-      } else if (error instanceof BadRequestError) {
-        // Wrong OTP code - expected user behavior, not actionable
-      } else {
-        trackError('VERIFIED_SESSION_CHECK_ERROR', error instanceof Error ? error.message : 'Unknown error', 'verification_session_check', 'high', {
-          recoverable: false,
-          userAction: 'check_verified_session'
-        });
-      }
-    }
-  }, [apiUrl, appContext.isDemoSession, t]);
-  const sendOTPCode = useCallback(async sessionId => {
-    if (!sessionId) {
-      return false;
-    }
-    const isSent = await sendVerificationCode(sessionId);
-    if (!isSent) {
-      return false;
-    }
-    setIsSendAgainEnabled(false);
-    setTimeout(() => {
-      setIsSendAgainEnabled(true);
-    }, 3 * 60 * 1000);
-    setIsCodeSent(true);
-    return true;
-  }, [sendVerificationCode]);
+  const navigateToOTPScreen = useCallback(sessionId => {
+    navigation.navigate('OTPVerificationScreen', {
+      sessionId
+    });
+  }, [navigation]);
   useEffect(() => {
-    if (!initialized.current && appContext.identificationInfo.sessionId) {
+    // 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) {
       initialized.current = true;
+      isCheckingSessionRef.current = true;
       setIsCheckingSession(true);
       getSession(appContext.identificationInfo.sessionId).then(session => {
         appContext.workflowSteps = session?.workflowSteps;
@@ -151,18 +99,21 @@ const VerificationSessionCheckScreen = () => {
           appContext.branding = appContext.branding || session.branding;
         }
         if (session?.sendOTP) {
-          return sendOTPCode(session.id);
-        } else if (session?.identificationId) {
-          appContext.identificationInfo.identificationId = session?.identificationId;
+          navigateToOTPScreen(session.id);
+        } else {
+          if (session?.identificationId) {
+            appContext.identificationInfo.identificationId = session?.identificationId;
+          }
           navigationManagerRef.current?.navigateToNextStep();
         }
       }).finally(() => {
         setTimeout(() => {
+          isCheckingSessionRef.current = false;
           setIsCheckingSession(false);
         }, 1000);
       });
     }
-  }, [appContext, appContext.identificationInfo.sessionId, getSession, sendOTPCode]);
+  }, [appContext, appContext.identificationInfo.sessionId, getSession, navigateToOTPScreen]);
   return /*#__PURE__*/_jsx(SafeAreaView, {
     style: styles.safeAreaContainer,
     children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
@@ -187,13 +138,13 @@ const VerificationSessionCheckScreen = () => {
               source: require('../../Shared/Assets/trustchex-logo-black.png'),
               style: styles.trustchexLogo
             })
-          }), isCheckingSession || isCodeGettingVerified ? /*#__PURE__*/_jsx(LottieView, {
+          }), isCheckingSession ? /*#__PURE__*/_jsx(LottieView, {
             source: require('../../Shared/Animations/loading.json'),
             style: styles.loadingAnimation,
             autoPlay: true,
             loop: true,
             resizeMode: "cover"
-          }) : !isCodeSent ? /*#__PURE__*/_jsxs(_Fragment, {
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.mainText,
               children: t('verificationSessionCheckScreen.mainText')
@@ -211,21 +162,37 @@ const VerificationSessionCheckScreen = () => {
                   setSessionCode(alphanumericText);
                   if (validateSessionCode(alphanumericText) && alphanumericText.length === 8) {
                     try {
+                      isCheckingSessionRef.current = true;
                       setIsCheckingSession(true);
-                      const session = await getSessionByCode(alphanumericText);
-                      if (session?.id) {
+                      const isDemoMode = isDemoSession(alphanumericText);
+                      const sessionResponse = await getSessionByCode(alphanumericText);
+                      if (sessionResponse?.id) {
                         if (appContext.setSessionId) {
-                          appContext.setSessionId(session.id);
+                          appContext.setSessionId(sessionResponse.id);
                         } else {
-                          appContext.identificationInfo.sessionId = session.id;
+                          appContext.identificationInfo.sessionId = sessionResponse.id;
+                        }
+                        const session = await getSession(sessionResponse.id, isDemoMode);
+                        appContext.workflowSteps = session?.workflowSteps;
+                        if (session?.branding) {
+                          appContext.branding = appContext.branding || session.branding;
+                        }
+                        if (session?.sendOTP) {
+                          navigateToOTPScreen(sessionResponse.id);
+                        } else {
+                          if (session?.identificationId) {
+                            appContext.identificationInfo.identificationId = session?.identificationId;
+                          }
+                          navigationManagerRef.current?.navigateToNextStep();
                         }
                       } else {
                         setSessionCode('');
                       }
-                    } catch {
+                    } catch (error) {
                       setSessionCode('');
                     } finally {
                       setTimeout(() => {
+                        isCheckingSessionRef.current = false;
                         setIsCheckingSession(false);
                       }, 1000);
                     }
@@ -254,53 +221,6 @@ const VerificationSessionCheckScreen = () => {
               },
               children: t('verificationSessionCheckScreen.scanQRCode')
             })]
-          }) : /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.mainText,
-              children: t('verificationSessionCheckScreen.codeText')
-            }), /*#__PURE__*/_jsx(StyledTextInput, {
-              autoFocus: true,
-              placeholder: "",
-              borderColor: primaryColor,
-              focusedBorderColor: primaryColor,
-              inputStyle: styles.otpCodeTextInput,
-              keyboardType: "number-pad",
-              textContentType: "oneTimeCode",
-              autoComplete: "sms-otp",
-              maxLength: 6,
-              onChangeText: text => {
-                const numericText = text.replace(/[^0-9]/g, '');
-                if (numericText.length <= 6) {
-                  setCode(numericText);
-                  if (numericText.length === 6) {
-                    (async () => {
-                      setIsCodeGettingVerified(true);
-                      const verifiedSession = await getVerifiedSession(appContext.identificationInfo.sessionId, numericText);
-                      if (verifiedSession?.identificationId) {
-                        appContext.identificationInfo.identificationId = verifiedSession?.identificationId;
-                        setCode('');
-                        setIsCodeSent(false);
-                        navigationManagerRef.current?.navigateToNextStep();
-                      } else {
-                        // User entered wrong OTP code - expected behavior, not actionable
-                        appContext.onError?.('Invalid OTP code');
-                        Alert.alert(t('general.error'), t('verificationSessionCheckScreen.codeError'));
-                        setCode('');
-                        setIsCodeGettingVerified(false);
-                      }
-                    })();
-                  }
-                }
-              },
-              value: code
-            }), /*#__PURE__*/_jsx(StyledButton, {
-              mode: "contained",
-              disabled: !isSendAgainEnabled,
-              onPress: () => {
-                sendOTPCode(appContext.identificationInfo.sessionId);
-              },
-              children: t('verificationSessionCheckScreen.sendCodeAgain')
-            })]
           })]
         }), appContext.branding.logoUrl && /*#__PURE__*/_jsxs(View, {
           style: [styles.footer, {
@@ -428,12 +348,6 @@ const styles = StyleSheet.create({
     letterSpacing: 0,
     textAlign: 'center',
     textTransform: 'none'
-  },
-  otpCodeTextInput: {
-    fontWeight: '800',
-    fontSize: 28,
-    textAlign: 'center',
-    letterSpacing: 8
   }
 });
 export default VerificationSessionCheckScreen;