@trustchex/react-native-sdk 1.250.0 → 1.266.0

package/src/Screens/Static/VerificationSessionCheckScreen.tsx

@@ -20,15 +20,17 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from '../../Shared/Contexts/AppContext';
-import httpClient, { NotFoundError } from '../../Shared/Libs/http-client';
+import httpClient, { BadRequestError, NotFoundError } from '../../Shared/Libs/http-client';
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from '../../Shared/Components/LanguageSelector';
 import NavigationManager, {
   type NavigationManagerRef,
 } from '../../Shared/Components/NavigationManager';
 import type { VerificationSession } from '../../Shared/Types/verificationSession';
-import { TextInput, useTheme } from 'react-native-paper';
 import StyledButton from '../../Shared/Components/StyledButton';
+import StyledTextInput from '../../Shared/Components/StyledTextInput';
+import { analyticsService } from '../../Shared/Services/AnalyticsService';
+import { useTheme } from '../../Shared/Contexts/ThemeContext';
 import LottieView from 'lottie-react-native';
 import {
   getSimulatedDemoData,
@@ -39,6 +41,11 @@ import {
   SESSION_CODE_CHARSET_PATTERN,
   SESSION_CODE_VALIDATION_PATTERN,
 } from '../../Shared/Constants/validation.constants';
+import {
+  trackError,
+  trackFunnelStep,
+  useScreenTracking,
+} from '../../Shared/Libs/analytics.utils';
 
 const VerificationSessionCheckScreen = () => {
   const [sessionCode, setSessionCode] = useState('');
@@ -51,9 +58,13 @@ const VerificationSessionCheckScreen = () => {
   const { t } = useTranslation();
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const navigation = useNavigation();
-  const theme = useTheme();
   const initialized = useRef(false);
   const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  const primaryColor = theme.colors.primary;
+
+  // Track screen view and exit
+  useScreenTracking('verification_session_check');
 
   const apiUrl = useMemo(
     () => `${appContext.baseUrl}/api/app/mobile`,
@@ -71,17 +82,26 @@ const VerificationSessionCheckScreen = () => {
           `${apiUrl}/verification-sessions/${id}`,
           appContext.isDemoSession
             ? getSimulatedDemoData<VerificationSession | undefined, void>(
-                'GET_SESSION'
-              )
+              'GET_SESSION'
+            )
             : undefined
         );
         return response;
       } catch (error) {
         if (error instanceof NotFoundError) {
+          // User entered invalid session ID - expected user behavior, not actionable
           Alert.alert(
             t('general.error'),
             t('verificationSessionCheckScreen.noVerificationSessionFound')
           );
+        } else {
+          trackError(
+            'SESSION_CHECK_ERROR',
+            error instanceof Error ? error.message : 'Unknown error',
+            'verification_session_check',
+            'high',
+            { recoverable: false, userAction: 'check_session' }
+          );
         }
       }
     },
@@ -92,12 +112,13 @@ const VerificationSessionCheckScreen = () => {
     async (inputCode: string) => {
       try {
         appContext.isDemoSession = isDemoSession(inputCode);
+        analyticsService.setDemoSession(appContext.isDemoSession);
         const response = await httpClient.get<{ id: string }>(
           `${apiUrl}/verification-sessions?sessionCode=${inputCode.toUpperCase()}`,
           appContext.isDemoSession
             ? getSimulatedDemoData<{ id: string } | undefined, void>(
-                'GET_SESSION_BY_CODE'
-              )
+              'GET_SESSION_BY_CODE'
+            )
             : undefined
         );
 
@@ -105,13 +126,25 @@ const VerificationSessionCheckScreen = () => {
           throw new NotFoundError();
         }
 
+        // Track successful session start as funnel step
+        trackFunnelStep('Session Started', 1, 5, undefined, true);
+
         return response;
       } catch (error) {
         if (error instanceof NotFoundError) {
+          // User entered invalid session code - expected user behavior, not actionable
           Alert.alert(
             t('general.error'),
             t('verificationSessionCheckScreen.noVerificationSessionFound')
           );
+        } else {
+          trackError(
+            'SESSION_CODE_CHECK_ERROR',
+            error instanceof Error ? error.message : 'Unknown error',
+            'verification_session_check',
+            'high',
+            { recoverable: false, userAction: 'check_session_code' }
+          );
         }
       }
     },
@@ -131,11 +164,19 @@ const VerificationSessionCheckScreen = () => {
         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 {
+          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')
@@ -160,19 +201,30 @@ const VerificationSessionCheckScreen = () => {
           },
           appContext.isDemoSession
             ? getSimulatedDemoData<
-                VerificationSession | undefined,
-                { code: string }
-              >('GET_VERIFIED_SESSION', { code: verificationCode })
+              VerificationSession | undefined,
+              { code: string }
+            >('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' }
+          );
         }
       }
     },
@@ -216,9 +268,6 @@ const VerificationSessionCheckScreen = () => {
           appContext.workflowSteps = session?.workflowSteps;
           if (session?.branding) {
             appContext.branding = appContext.branding || session.branding;
-            theme.colors.primary = appContext.branding.primaryColor;
-            theme.colors.secondary = appContext.branding.secondaryColor;
-            theme.colors.tertiary = appContext.branding.tertiaryColor;
           }
 
           if (session?.sendOTP) {
@@ -240,10 +289,6 @@ const VerificationSessionCheckScreen = () => {
     appContext.identificationInfo.sessionId,
     getSession,
     sendOTPCode,
-    theme.colors,
-    theme.colors.primary,
-    theme.colors.secondary,
-    theme.colors.tertiary,
   ]);
 
   return (
@@ -287,59 +332,57 @@ const VerificationSessionCheckScreen = () => {
                 <Text style={styles.mainText}>
                   {t('verificationSessionCheckScreen.mainText')}
                 </Text>
-                <View style={styles.inputContainer}>
-                  <TextInput
-                    mode="outlined"
-                    autoCapitalize="characters"
-                    placeholder=""
-                    outlineColor={theme.colors.primary}
-                    activeOutlineColor={theme.colors.primary}
-                    style={styles.sessionCodeTextInput}
-                    contentStyle={styles.sessionCodeInputWithText}
-                    onChangeText={async (text) => {
-                      const alphanumericText = text
-                        .toUpperCase()
-                        .replace(SESSION_CODE_CHARSET_PATTERN, '');
-                      if (alphanumericText.length <= 8) {
-                        setSessionCode(alphanumericText);
-                        if (
-                          validateSessionCode(alphanumericText) &&
-                          alphanumericText.length === 8
-                        ) {
-                          try {
-                            setIsCheckingSession(true);
-                            const session =
-                              await getSessionByCode(alphanumericText);
-                            if (session?.id) {
+                <StyledTextInput
+                  autoCapitalize="characters"
+                  placeholder={t(
+                    'verificationSessionCheckScreen.enterSessionCode'
+                  )}
+                  borderColor={primaryColor}
+                  focusedBorderColor={primaryColor}
+                  inputStyle={styles.sessionCodeTextInput}
+                  placeholderStyle={styles.sessionCodeTextInputPlaceholder}
+                  value={sessionCode.toUpperCase()}
+                  onChangeText={async (text) => {
+                    const alphanumericText = text
+                      .toUpperCase()
+                      .replace(SESSION_CODE_CHARSET_PATTERN, '');
+                    if (alphanumericText.length <= 8) {
+                      setSessionCode(alphanumericText);
+                      if (
+                        validateSessionCode(alphanumericText) &&
+                        alphanumericText.length === 8
+                      ) {
+                        try {
+                          setIsCheckingSession(true);
+                          const session =
+                            await getSessionByCode(alphanumericText);
+                          if (session?.id) {
+                            if (appContext.setSessionId) {
+                              appContext.setSessionId(session.id);
+                            } else {
                               appContext.identificationInfo.sessionId =
                                 session.id;
-                            } else {
-                              setSessionCode('');
                             }
-                          } catch {
+                          } else {
                             setSessionCode('');
-                          } finally {
-                            setTimeout(() => {
-                              setIsCheckingSession(false);
-                            }, 1000);
                           }
+                        } catch {
+                          setSessionCode('');
+                        } finally {
+                          setTimeout(() => {
+                            setIsCheckingSession(false);
+                          }, 1000);
                         }
                       }
-                    }}
-                    value={sessionCode.toUpperCase()}
-                    maxLength={8}
-                  />
-                  {!sessionCode && (
-                    <Text style={styles.placeholderText}>
-                      {t('verificationSessionCheckScreen.enterSessionCode')}
-                    </Text>
-                  )}
-                </View>
+                    }
+                  }}
+                  maxLength={8}
+                />
                 <View style={styles.horizontalLineContainer}>
                   <View
                     style={[
                       styles.horizontalLine,
-                      { backgroundColor: theme.colors.primary },
+                      { backgroundColor: primaryColor },
                     ]}
                   />
                   <Text style={styles.mainText}>
@@ -348,7 +391,7 @@ const VerificationSessionCheckScreen = () => {
                   <View
                     style={[
                       styles.horizontalLine,
-                      { backgroundColor: theme.colors.primary },
+                      { backgroundColor: primaryColor },
                     ]}
                   />
                 </View>
@@ -366,14 +409,12 @@ const VerificationSessionCheckScreen = () => {
                 <Text style={styles.mainText}>
                   {t('verificationSessionCheckScreen.codeText')}
                 </Text>
-                <TextInput
-                  mode="outlined"
+                <StyledTextInput
                   autoFocus={true}
                   placeholder=""
-                  outlineColor={theme.colors.primary}
-                  activeOutlineColor={theme.colors.primary}
-                  style={styles.otpCodeTextInput}
-                  contentStyle={styles.otpCodeInputWithText}
+                  borderColor={primaryColor}
+                  focusedBorderColor={primaryColor}
+                  inputStyle={styles.otpCodeTextInput}
                   keyboardType="number-pad"
                   textContentType="oneTimeCode"
                   autoComplete="sms-otp"
@@ -396,6 +437,7 @@ const VerificationSessionCheckScreen = () => {
                             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'),
@@ -464,7 +506,7 @@ const styles = StyleSheet.create({
   },
   horizontalLine: {
     flex: 1,
-    height: 2,
+    height: 1,
   },
   loadingAnimation: {
     width: '100%',
@@ -533,40 +575,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     position: 'absolute',
   },
-  inputContainer: {
-    position: 'relative',
-    width: '100%',
-  },
   sessionCodeTextInput: {
-    backgroundColor: 'white',
-  },
-  sessionCodeInputWithText: {
     textTransform: 'uppercase',
     fontWeight: '800',
     fontSize: 28,
     textAlign: 'center',
     letterSpacing: 8,
   },
-  placeholderText: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: '100%',
-    lineHeight: 56,
-    fontSize: 16,
-    color: '#666',
-    textAlign: 'center',
-    pointerEvents: 'none',
-  },
-  sessionCodeInputPlaceholder: {
+  sessionCodeTextInputPlaceholder: {
     fontSize: 16,
+    fontWeight: '400',
+    letterSpacing: 0,
     textAlign: 'center',
+    textTransform: 'none',
   },
   otpCodeTextInput: {
-    backgroundColor: 'white',
-  },
-  otpCodeInputWithText: {
     fontWeight: '800',
     fontSize: 28,
     textAlign: 'center',

package/src/Shared/Components/EIDScanner.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Alert, View, Text, Image, StyleSheet } from 'react-native';
 import NFCManager from 'react-native-nfc-manager';
+import DeviceInfo from 'react-native-device-info';
 import { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
 import { eidReader } from '../EIDReader/eidReader';
 import NativeProgressBar from './NativeProgressBar';
@@ -11,6 +12,11 @@ import StyledButton from './StyledButton';
 import LottieView from 'lottie-react-native';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { speakWithDebounce } from '../Libs/tts.utils';
+import {
+  trackEIDScanStart,
+  trackEIDScanComplete,
+  trackEIDScanFailed,
+} from '../Libs/analytics.utils';
 
 interface eIDScannerProps {
   documentNumber: string;
@@ -47,12 +53,58 @@ const EIDScanner = ({
   const { t } = useTranslation();
   const appContext = React.useContext(AppContext);
   const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState<string>();
+  const [attemptNumber, setAttemptNumber] = useState<number>(0);
 
   const readNFC = useCallback(async () => {
+    const startTime = Date.now();
+    const currentAttempt = attemptNumber + 1;
+    setAttemptNumber(currentAttempt);
+
     setIsScanning(true);
     setIsScanned(false);
     setProgress(0);
 
+    // Track EID scan start using analytics helper
+    const docType =
+      (documentType as 'ID' | 'PASSPORT' | 'UNKNOWN') || 'UNKNOWN';
+
+    // If device doesn't support NFC or NFC is disabled, track and abort early
+    if (!hasNfc) {
+      await trackEIDScanFailed(
+        docType,
+        'device_unsupported',
+        'Device does not support NFC',
+        0,
+        currentAttempt,
+        DeviceInfo.getModel(),
+        DeviceInfo.getSystemVersion()
+      ).catch(() => {});
+
+      // Stop scanning - user will see the not-supported UI
+      setIsScanning(false);
+      setProgress(0);
+      return;
+    }
+
+    if (!isEnabled) {
+      await trackEIDScanFailed(
+        docType,
+        'not_enabled',
+        'NFC is disabled on device',
+        0,
+        currentAttempt,
+        DeviceInfo.getModel(),
+        DeviceInfo.getSystemVersion()
+      ).catch(() => {});
+
+      // Stop scanning - allow the UI to prompt user to enable NFC
+      setIsScanning(false);
+      setProgress(0);
+      return;
+    }
+
+    await trackEIDScanStart(docType, hasNfc, isEnabled, currentAttempt).catch(()=>{});
+
     try {
       if (documentNumber && dateOfBirth && dateOfExpiry) {
         const passportData = await eidReader(
@@ -64,23 +116,95 @@ const EIDScanner = ({
           }
         );
         if (passportData) {
+          const scanDuration = Date.now() - startTime;
           setDocumentFaceImage(passportData.faceImage);
           setDocumentMRZInfo(passportData.mrz);
           setDocumentFaceImageMimeType(passportData.mimeType);
           setIsScanned(true);
+
+          // Track successful EID scan
+          await trackEIDScanComplete(docType, scanDuration, currentAttempt).catch(()=>{});
         }
       } else {
+        const scanDuration = Date.now() - startTime;
+        // MRZ input issue — track as NFC scan failure (unknown error type for NFC-specific stream)
+        await trackEIDScanFailed(
+          docType,
+          'unknown',
+          'Invalid MRZ fields',
+          scanDuration,
+          currentAttempt,
+          DeviceInfo.getModel(),
+          DeviceInfo.getSystemVersion()
+        ).catch(() => {});
         Alert.alert(t('general.error'), t('eidScannerScreen.invalidMRZFields'));
       }
     } catch (error) {
-      console.debug(error);
-      // Ignore error
+      const scanDuration = Date.now() - startTime;
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
+
+      // Determine error type
+      let errorType:
+        | 'device_unsupported'
+        | 'not_enabled'
+        | 'reading_error'
+        | 'user_cancelled'
+        | 'timeout'
+        | 'unknown' = 'unknown';
+
+      if (
+        errorMessage.includes('cancelled') ||
+        errorMessage.includes('cancel')
+      ) {
+        errorType = 'user_cancelled';
+      } else if (
+        errorMessage.includes('timeout') ||
+        errorMessage.includes('time out')
+      ) {
+        errorType = 'timeout';
+      } else if (errorMessage.includes('not supported')) {
+        errorType = 'device_unsupported';
+      } else if (
+        errorMessage.includes('not enabled') ||
+        errorMessage.includes('disabled')
+      ) {
+        errorType = 'not_enabled';
+      } else if (
+        errorMessage.includes('read') ||
+        errorMessage.includes('communication')
+      ) {
+        errorType = 'reading_error';
+      }
+
+      // Track EID scan failure with detailed metadata
+      await trackEIDScanFailed(
+        docType,
+        errorType,
+        errorMessage,
+        scanDuration,
+        currentAttempt,
+        DeviceInfo.getModel(),
+        DeviceInfo.getSystemVersion()
+      ).catch(() => {});
+
+      console.debug('NFC scan error:', error);
+      // Ignore error - let user retry
     } finally {
       setIsScanning(false);
       setProgress(0);
       setHasGuideShown(false);
     }
-  }, [documentNumber, dateOfBirth, dateOfExpiry, t]);
+  }, [
+    documentNumber,
+    dateOfBirth,
+    dateOfExpiry,
+    documentType,
+    hasNfc,
+    isEnabled,
+    attemptNumber,
+    t,
+  ]);
 
   const getFieldsFromMRZ = useCallback((mrz: MRZInfo) => {
     return {
@@ -103,8 +227,13 @@ const EIDScanner = ({
       setHasNFC(deviceIsSupported);
       isNFCSupported && isNFCSupported(deviceIsSupported);
 
+      // NFC not supported is a device limitation - not actionable by developers
+
       const deviceIsEnabled = await NFCManager.isEnabled();
       setIsEnabled(deviceIsEnabled);
+
+      // NFC disabled is a user setting - they can enable it in settings
+      // Not tracking as it's user-controllable
     };
 
     checkIsSupported();