@trustchex/react-native-sdk 1.497.0 → 1.500.1

package/src/Screens/Static/ResultScreen.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react';
 import {
-  Alert,
   Image,
   Platform,
   SafeAreaView,
@@ -80,8 +79,22 @@ const ResultScreen = () => {
   const appContext = useContext(AppContext);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [progress, setProgress] = useState(0);
+  // Set when submit() fails — drives a recoverable error UI with a "Retry"
+  // button instead of wiping the whole flow back to the start (which forced a
+  // full re-scan + re-liveness on any transient final-step failure).
+  const [submitFailed, setSubmitFailed] = useState(false);
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const hasSubmittedRef = React.useRef(false);
+  // Tracks which submit steps already succeeded so a retry RESUMES from the
+  // failed step instead of re-running earlier ones. submit() is a chain of
+  // non-idempotent POSTs (consent/document/media/videos), so a naive full
+  // retry after a partial success could create duplicate server-side records.
+  const completedSteps = React.useRef({
+    consent: false,
+    document: false,
+    media: false,
+    verbalConsentVideos: false,
+  });
   const [shouldShowDemoData, setShouldShowDemoData] = useState(false);
   const [deviceIdentifier, setDeviceIdentifier] = useState<string>('');
   const { t, i18n } = useTranslation();
@@ -266,8 +279,10 @@ const ResultScreen = () => {
         type: rawMrzFields.documentCode,
         name: rawMrzFields.firstName,
         surname: rawMrzFields.lastName,
-          displayName: docName?.source === 'dg11' ? docName.displayFirst : undefined,
-        displaySurname: docName?.source === 'dg11' ? docName.displayLast : undefined,
+        displayName:
+          docName?.source === 'dg11' ? docName.displayFirst : undefined,
+        displaySurname:
+          docName?.source === 'dg11' ? docName.displayLast : undefined,
         nameSource: docName?.source === 'dg11' ? docName.source : undefined,
         gender: getGenderEnumType(rawMrzFields.sex),
         number: rawMrzFields.documentNumber,
@@ -542,6 +557,7 @@ const ResultScreen = () => {
     async (identificationInfo: IdentificationInfo) => {
       try {
         setIsSubmitting(true);
+        setSubmitFailed(false);
         const identificationId = identificationInfo.identificationId;
         if (!identificationId) {
           throw new Error('IdentificationId not found');
@@ -554,19 +570,27 @@ const ResultScreen = () => {
           getSessionKey(apiUrl, appContext.identificationInfo.sessionId)
         );
 
+        // createIdentification is effectively idempotent (creates/verifies the
+        // record), so it's safe to re-run on retry without a guard.
         if (!alreadyUploaded) {
           await runWithRetry(() => createIdentification(identificationId));
         }
         setProgress(20);
 
-        await runWithRetry(() =>
-          submitIdentificationConsent(identificationId, sessionKey)
-        );
+        // Each POST below is guarded by completedSteps so a retry skips work
+        // that already committed server-side (avoiding duplicate records).
+        if (!completedSteps.current.consent) {
+          await runWithRetry(() =>
+            submitIdentificationConsent(identificationId, sessionKey)
+          );
+          completedSteps.current.consent = true;
+        }
         setProgress(30);
 
         if (!alreadyUploaded) {
           const scannedIdentityDocument = identificationInfo.scannedDocument;
           if (
+            !completedSteps.current.document &&
             scannedIdentityDocument &&
             scannedIdentityDocument.documentType !== 'UNKNOWN'
           ) {
@@ -577,28 +601,36 @@ const ResultScreen = () => {
                 sessionKey
               )
             );
+            completedSteps.current.document = true;
           }
           setProgress(40);
 
-          const livenessDetection = identificationInfo.livenessDetection;
+          if (!completedSteps.current.media) {
+            const livenessDetection = identificationInfo.livenessDetection;
+            await runWithRetry(() =>
+              uploadIdentificationMedia(
+                identificationId,
+                scannedIdentityDocument,
+                livenessDetection,
+                false
+              )
+            );
+            completedSteps.current.media = true;
+          }
+        }
+
+        if (!completedSteps.current.verbalConsentVideos) {
           await runWithRetry(() =>
-            uploadIdentificationMedia(
+            uploadVerbalConsentVideos(
               identificationId,
-              scannedIdentityDocument,
-              livenessDetection,
-              false
+              identificationInfo.verbalConsentVideos
             )
           );
+          completedSteps.current.verbalConsentVideos = true;
         }
-
-        await runWithRetry(() =>
-          uploadVerbalConsentVideos(
-            identificationId,
-            identificationInfo.verbalConsentVideos
-          )
-        );
         setProgress(90);
 
+        // finishIdentification is a PUT (idempotent) — always safe to re-run.
         await runWithRetry(() =>
           finishIdentification(identificationId, sessionKey)
         );
@@ -632,7 +664,7 @@ const ResultScreen = () => {
           errorMessage,
           'result_screen',
           'critical',
-          { recoverable: false, userAction: 'submit_verification' }
+          { recoverable: true, userAction: 'submit_verification' }
         ).catch(() => {});
         analyticsService
           .trackEvent(
@@ -645,9 +677,13 @@ const ResultScreen = () => {
           )
           .catch(() => {});
 
-        Alert.alert(t('general.error'), t('resultScreen.submissionFailed'));
+        // Show a recoverable error UI with a Retry button instead of resetting
+        // the whole flow. The collected data is still intact in AppContext, and
+        // completedSteps ensures a retry resumes from the failed step. We notify
+        // the host via onError but do NOT tear the flow down — the user can
+        // retry without re-scanning their document or redoing liveness.
         appContext.onError?.(t('resultScreen.submissionFailed'));
-        navigationManagerRef.current?.reset();
+        setSubmitFailed(true);
       }
     },
     [
@@ -680,7 +716,8 @@ const ResultScreen = () => {
     submit,
   ]);
 
-  const { isDemoSession, isTestVideoSession, skipSuccessScreen, onCompleted } = appContext;
+  const { isDemoSession, isTestVideoSession, skipSuccessScreen, onCompleted } =
+    appContext;
   useEffect(() => {
     if (progress === 100 && !isDemoSession && !isTestVideoSession) {
       if (skipSuccessScreen) {
@@ -694,12 +731,60 @@ const ResultScreen = () => {
         return () => clearTimeout(timer);
       }
     }
-  }, [progress, isDemoSession, isTestVideoSession, skipSuccessScreen, onCompleted]);
+  }, [
+    progress,
+    isDemoSession,
+    isTestVideoSession,
+    skipSuccessScreen,
+    onCompleted,
+  ]);
 
   return (
     <SafeAreaView style={styles.container}>
       <View style={styles.container}>
-        {isSubmitting ? (
+        {submitFailed && !isSubmitting ? (
+          <View style={styles.submitErrorContainer}>
+            <Text style={styles.submitErrorTitle}>
+              {t('resultScreen.submissionFailedTitle')}
+            </Text>
+            <Text style={styles.submitErrorMessage}>
+              {t('resultScreen.submissionFailedRetryHint')}
+            </Text>
+            <StyledButton
+              mode="contained"
+              onPress={() => submit(appContext.identificationInfo)}
+              style={styles.submitRetryButton}
+            >
+              {t('resultScreen.retrySubmission')}
+            </StyledButton>
+            {/* Give a stuck user a support channel — the diagnostic report is
+                PoW-authenticated (no session key needed) and opt-in (it asks
+                before sending). Auto-hides without baseUrl/sessionId. */}
+            <View style={styles.submitReportButton}>
+              <DiagnosticReportButton
+                baseUrl={appContext.baseUrl}
+                sessionId={appContext.identificationInfo?.sessionId}
+                scan={{
+                  documentType:
+                    appContext.identificationInfo?.scannedDocument
+                      ?.documentType,
+                  dataSource:
+                    appContext.identificationInfo?.scannedDocument?.dataSource,
+                  mrzText:
+                    appContext.identificationInfo?.scannedDocument?.mrzText,
+                  mrzFields:
+                    appContext.identificationInfo?.scannedDocument?.mrzFields,
+                  barcodeValue:
+                    appContext.identificationInfo?.scannedDocument
+                      ?.barcodeValue,
+                }}
+                images={collectDiagnosticImages(
+                  appContext.identificationInfo?.scannedDocument
+                )}
+              />
+            </View>
+          </View>
+        ) : isSubmitting ? (
           <>
             <Text style={styles.sectionHeader}>
               {t('resultScreen.submitting')}
@@ -796,8 +881,9 @@ const ResultScreen = () => {
                           {t('eidScannerScreen.name')}:
                         </Text>
                         <Text style={styles.mrzInfoText}>
-                          {appContext.lastDocumentRead?.name.displayFirst
-                            ?? appContext.identificationInfo.scannedDocument.mrzFields?.firstName}
+                          {appContext.lastDocumentRead?.name.displayFirst ??
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.firstName}
                         </Text>
                       </View>
                       <View style={styles.mrzInfoItem}>
@@ -805,8 +891,9 @@ const ResultScreen = () => {
                           {t('eidScannerScreen.surname')}:
                         </Text>
                         <Text style={styles.mrzInfoText}>
-                          {appContext.lastDocumentRead?.name.displayLast
-                            ?? appContext.identificationInfo.scannedDocument.mrzFields?.lastName}
+                          {appContext.lastDocumentRead?.name.displayLast ??
+                            appContext.identificationInfo.scannedDocument
+                              .mrzFields?.lastName}
                         </Text>
                       </View>
                       <View style={styles.mrzInfoItem}>
@@ -1071,7 +1158,9 @@ const ResultScreen = () => {
                 )}
               </View>
             </ScrollView>
-            <View style={[styles.footer, { paddingBottom: insets.bottom + 20 }]}>
+            <View
+              style={[styles.footer, { paddingBottom: insets.bottom + 20 }]}
+            >
               <StyledButton
                 mode="contained"
                 onPress={() => {
@@ -1154,6 +1243,33 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textTransform: 'capitalize',
   },
+  submitErrorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+  },
+  submitErrorTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'black',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  submitErrorMessage: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 28,
+  },
+  submitRetryButton: {
+    minWidth: 220,
+  },
+  submitReportButton: {
+    marginTop: 16,
+    minWidth: 220,
+  },
   sectionText: {
     fontSize: 18,
     color: 'black',

package/src/Shared/Components/EIDScanner.tsx

@@ -24,6 +24,7 @@ import { normalizeFromMRZInfo } from '../Libs/documentDataNormalizer';
 import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 import StyledButton from './StyledButton';
+import DiagnosticReportButton from './DiagnosticReportButton';
 import LottieView from 'lottie-react-native';
 import { getLocalizedCountryName } from '../Libs/country-display.utils';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
@@ -116,6 +117,10 @@ const EIDScanner = ({
     }
   }, []);
   const [isScanned, setIsScanned] = React.useState(false);
+  // Set when an NFC read fails — surfaces a "report issue" support channel next
+  // to the retry button (a failed chip read is the most common point a user
+  // genuinely needs help). Cleared when a new read starts.
+  const [hasScanFailed, setHasScanFailed] = React.useState(false);
   const [hasGuideShown, setHasGuideShown] = React.useState(false);
   const { t, i18n } = useTranslation();
   const appContext = React.useContext(AppContext);
@@ -192,6 +197,7 @@ const EIDScanner = ({
 
     setIsScanning(true);
     setIsScanned(false);
+    setHasScanFailed(false);
     setProgress(0);
     setProgressStage('');
     resetLastMessage();
@@ -354,6 +360,9 @@ const EIDScanner = ({
             setDocumentName(builtName);
             setIsScanned(true);
           }
+          // Defensive: clear any prior-failure flag on a successful read so the
+          // report affordance can't linger if the UI returns to this state.
+          setHasScanFailed(false);
           await trackEIDScanComplete(
             docType,
             scanDuration,
@@ -385,6 +394,7 @@ const EIDScanner = ({
         Alert.alert(t('general.error'), t('eidScannerScreen.invalidMRZFields'));
       }
     } catch (error) {
+      setHasScanFailed(true);
       const scanDuration = Date.now() - startTime;
       const errorMessage =
         error instanceof Error ? error.message : 'Unknown error';
@@ -876,6 +886,31 @@ const EIDScanner = ({
               <StyledButton mode="contained" onPress={readNFC}>
                 {t('eidScannerScreen.startScanning')}
               </StyledButton>
+              {/* After a failed chip read, offer a support channel. The
+                  diagnostics singleton captured this read's NFC step/error code;
+                  the report is PoW-authenticated and opt-in. Auto-hides without
+                  baseUrl/session. */}
+              {hasScanFailed && (
+                <View style={styles.reportButtonWrapper}>
+                  <DiagnosticReportButton
+                    baseUrl={appContext.baseUrl}
+                    sessionId={appContext.identificationInfo?.sessionId}
+                    scan={{
+                      documentType:
+                        appContext.identificationInfo?.scannedDocument
+                          ?.documentType,
+                      dataSource:
+                        appContext.identificationInfo?.scannedDocument
+                          ?.dataSource,
+                      mrzText:
+                        appContext.identificationInfo?.scannedDocument?.mrzText,
+                      mrzFields:
+                        appContext.identificationInfo?.scannedDocument
+                          ?.mrzFields,
+                    }}
+                  />
+                </View>
+              )}
             </View>
           )}
 
@@ -972,6 +1007,9 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     gap: 10,
   },
+  reportButtonWrapper: {
+    marginTop: 4,
+  },
   mainText: {
     fontSize: 20,
     fontWeight: 'bold',

package/src/Shared/Components/ErrorBoundary.tsx

@@ -0,0 +1,151 @@
+import React, { useContext } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { useTheme } from '../Contexts/ThemeContext';
+import AppContext from '../Contexts/AppContext';
+import StyledButton from './StyledButton';
+import { trackError } from '../Libs/analytics.utils';
+import { logError } from '../Libs/debug.utils';
+
+/**
+ * Themed fallback UI for an unrecoverable render error. A functional child so it
+ * can use the theme + translation hooks (the boundary itself must be a class).
+ */
+function ErrorFallback({ onRetry }: { onRetry: () => void }) {
+  const { colors } = useTheme();
+  const { t } = useTranslation();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: colors.text }]}>
+          {t('errorBoundary.title')}
+        </Text>
+        <Text style={[styles.message, { color: colors.textSecondary }]}>
+          {t('errorBoundary.message')}
+        </Text>
+        <StyledButton mode="contained" onPress={onRetry} style={styles.button}>
+          {t('errorBoundary.tryAgain')}
+        </StyledButton>
+      </View>
+    </View>
+  );
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  // The host's onError, injected as a PROP by the wrapper below. We deliberately
+  // avoid `static contextType` + `this.context` here: typing `this.context`
+  // needs a `declare context` field, which Metro's Babel flow-strip transform
+  // rejects (only allowed under allowDeclareFields) — it would crash the bundle.
+  onError?: (error: string) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  // Bumped on every retry so the recovered subtree gets a fresh `key` and
+  // genuinely re-mounts (a plain hasError:false would re-render the SAME tree
+  // and, for a deterministic error, immediately re-throw into a flicker loop).
+  resetKey: number;
+}
+
+class ErrorBoundaryInner extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { hasError: false, resetKey: 0 };
+
+  static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    logError('ErrorBoundary', 'Caught render error', error);
+    // Telemetry — best-effort, never let reporting throw.
+    trackError(
+      'SDK_RENDER_ERROR',
+      error.message,
+      'error_boundary',
+      'critical',
+      {
+        error,
+        component: 'error_boundary',
+        recoverable: true,
+        additionalData: {
+          componentStack: info.componentStack ?? '',
+        },
+      }
+    ).catch(() => {});
+    // Notify the host integration that the SDK hit an unrecoverable error.
+    this.props.onError?.(error.message);
+  }
+
+  handleRetry = () => {
+    // Bump resetKey so the children below re-mount with a fresh key — a real
+    // recovery, not just a re-render of the same (possibly still-broken) tree.
+    this.setState((prev) => ({
+      hasError: false,
+      resetKey: prev.resetKey + 1,
+    }));
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return <ErrorFallback onRetry={this.handleRetry} />;
+    }
+    return (
+      <React.Fragment key={this.state.resetKey}>
+        {this.props.children}
+      </React.Fragment>
+    );
+  }
+}
+
+/**
+ * Catches unexpected render/runtime errors anywhere in the SDK's screen tree so
+ * an unhandled throw shows a recoverable fallback instead of unmounting to a
+ * white screen / crashing the host app. The SDK was otherwise entirely
+ * functional with no crash protection.
+ *
+ * Placed inside ThemeProvider + AppContext.Provider so the fallback can theme
+ * itself and notify the host via `onError`. This thin functional wrapper reads
+ * `onError` from context (a hook, which the class can't use) and passes it to
+ * the class as a prop. "Try Again" re-mounts the subtree (the navigator returns
+ * to its initial route).
+ */
+export default function ErrorBoundary({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { onError } = useContext(AppContext);
+  return <ErrorBoundaryInner onError={onError}>{children}</ErrorBoundaryInner>;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  content: {
+    alignItems: 'center',
+    maxWidth: 360,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 12,
+  },
+  message: {
+    fontSize: 16,
+    textAlign: 'center',
+    lineHeight: 22,
+    marginBottom: 28,
+  },
+  button: {
+    minWidth: 200,
+  },
+});

package/src/Shared/Components/IdentityDocumentCamera.constants.ts

@@ -14,6 +14,11 @@ export const MIN_MLI_FACE_SIZE_PERCENT = 0.01; // MLI (Multi Layer Image): min 1
 export const REQUIRED_CONSISTENT_MRZ_READS = 2;
 export const REQUIRED_CONSISTENT_DOCTYPE_DETECTIONS = 3;
 
+// After this long on a single scan step without completing it, surface the
+// "Having trouble?" prompt so the user isn't stranded on a live camera with no
+// timeout, retry, or help. Per-step (re-armed on each step transition).
+export const HELP_PROMPT_DELAY_MS = 25000;
+
 export const SIGNATURE_REGEX = /s[gi]g?n[au]?t[u]?r|imz[a]s?/i;
 export const SIGNATURE_TEXT_REGEX = /signature|imza|İmza/i;
 export const MRZ_BLOCK_PATTERN = /[A-Z0-9<]{8,}.*</i;