@trustchex/react-native-sdk 1.355.1 → 1.357.0

package/src/Shared/Components/DebugNavigationPanel.tsx

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   StyleSheet,
   Platform,
+  Switch,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -16,38 +17,92 @@ type ScreenOption = {
   screen: string;
   label: string;
   icon: string;
+  hasOptions?: boolean;
+  hasDocumentTypeOption?: boolean;
   setupDemo?: () => void;
   params?: Record<string, unknown>;
 };
 
 // Icon mapping matching Flutter SDK Material Icons
 const ICONS = {
-  LOGIN: '🔑',           // Icons.login
-  HANDSHAKE: '🤝',       // Icons.handshake
-  CREDIT_CARD: '💳',     // Icons.credit_card
-  NFC: '📡',            // Icons.nfc
-  FACE: '👤',           // Icons.face
-  CHECK_CIRCLE: '✅',    // Icons.check_circle
-  BUG_REPORT: '🔧',      // Icons.bug_report (using wrench for debug)
-  PHONE: '📱',          // Icons.phone
+  LOGIN: '�', // Icons.login - Locked with key for session security
+  HANDSHAKE: '📝', // Icons.handshake - Document for contract signing
+  CREDIT_CARD: '🪪', // Icons.credit_card - ID card for document scan
+  NFC: '💳', // Icons.nfc - Contactless card for eID
+  FACE: '📸', // Icons.face - Camera for face detection
+  CHECK_CIRCLE: '📋', // Icons.check_circle - Clipboard for results
+  BUG_REPORT: '🔧', // Icons.bug_report - Wrench for debugging
+  PHONE: '💬', // Icons.phone - Message for OTP code
 } as const;
 
 const DebugNavigationPanel = () => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [selectedScreen, setSelectedScreen] = useState<ScreenOption | null>(
+    null
+  );
+  const [voiceGuidanceEnabled, setVoiceGuidanceEnabled] = useState(true);
+  const [allowIdCard, setAllowIdCard] = useState(true);
+  const [allowPassport, setAllowPassport] = useState(true);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
   const insets = useSafeAreaInsets();
 
-  const setupDemoSession = useCallback((setDebugFlag: boolean = false) => {
-    appContext.setIsDemoSession?.(true);
-    appContext.identificationInfo.sessionId = 'demo-verification-id';
-    appContext.identificationInfo.identificationId = 'demo-identification-id';
-    appContext.isDebugNavigated = setDebugFlag;
+  const setupDemoSession = useCallback(
+    (setDebugFlag: boolean = false) => {
+      appContext.setIsDemoSession?.(true);
+      appContext.identificationInfo.sessionId = 'demo-verification-id';
+      appContext.identificationInfo.identificationId = 'demo-identification-id';
+      appContext.isDebugNavigated = setDebugFlag;
+
+      // Populate workflow steps with demo data (including contract URLs)
+      const demoSession = getSimulatedDemoData<VerificationSession, never>(
+        'GET_SESSION'
+      );
+      appContext.workflowSteps = demoSession.workflowSteps;
+    },
+    [appContext]
+  );
+
+  const applyVoiceGuidance = useCallback(
+    (enabled: boolean) => {
+      if (!appContext.workflowSteps) return;
+      appContext.workflowSteps = appContext.workflowSteps.map((step) => ({
+        ...step,
+        data: {
+          ...step.data,
+          voiceGuidanceActive: enabled,
+        },
+      }));
+      if (appContext.currentWorkflowStep) {
+        appContext.currentWorkflowStep = {
+          ...appContext.currentWorkflowStep,
+          data: {
+            ...appContext.currentWorkflowStep.data,
+            voiceGuidanceActive: enabled,
+          },
+        };
+      }
+    },
+    [appContext]
+  );
+
+  const applyDocumentTypes = useCallback(
+    (allowId: boolean, allowPass: boolean) => {
+      if (!appContext.currentWorkflowStep) return;
+      const allowedTypes: ('I' | 'P')[] = [];
+      if (allowId) allowedTypes.push('I');
+      if (allowPass) allowedTypes.push('P');
 
-    // Populate workflow steps with demo data (including contract URLs)
-    const demoSession = getSimulatedDemoData<VerificationSession, never>('GET_SESSION');
-    appContext.workflowSteps = demoSession.workflowSteps;
-  }, [appContext]);
+      appContext.currentWorkflowStep = {
+        ...appContext.currentWorkflowStep,
+        data: {
+          ...appContext.currentWorkflowStep.data,
+          allowedDocumentTypes: allowedTypes.length === 2 ? null : allowedTypes,
+        },
+      };
+    },
+    [appContext]
+  );
 
   const screens: ScreenOption[] = [
     {
@@ -68,6 +123,7 @@ const DebugNavigationPanel = () => {
       screen: 'ContractAcceptanceScreen',
       label: 'Consent',
       icon: ICONS.HANDSHAKE,
+      hasOptions: true,
       setupDemo: () => {
         setupDemoSession(true);
         // Set current workflow step to contract acceptance so demo contract URLs are loaded
@@ -83,24 +139,47 @@ const DebugNavigationPanel = () => {
       screen: 'IdentityDocumentScanningScreen',
       label: 'ID Scan',
       icon: ICONS.CREDIT_CARD,
+      hasOptions: true,
+      hasDocumentTypeOption: true,
       setupDemo: () => {
         setupDemoSession(true);
+        const step = appContext.workflowSteps?.find(
+          (s) => s.type === 'IDENTITY_DOCUMENT_SCAN'
+        );
+        if (step) {
+          appContext.currentWorkflowStep = step;
+        }
       },
     },
     {
       screen: 'IdentityDocumentEIDScanningScreen',
       label: 'eID Scan',
       icon: ICONS.NFC,
+      hasOptions: true,
+      hasDocumentTypeOption: true,
       setupDemo: () => {
         setupDemoSession(true);
+        const step = appContext.workflowSteps?.find(
+          (s) => s.type === 'IDENTITY_DOCUMENT_EID_SCAN'
+        );
+        if (step) {
+          appContext.currentWorkflowStep = step;
+        }
       },
     },
     {
       screen: 'LivenessDetectionScreen',
       label: 'Liveness',
       icon: ICONS.FACE,
+      hasOptions: true,
       setupDemo: () => {
         setupDemoSession(true);
+        const step = appContext.workflowSteps?.find(
+          (s) => s.type === 'LIVENESS_CHECK'
+        );
+        if (step) {
+          appContext.currentWorkflowStep = step;
+        }
       },
     },
     {
@@ -113,17 +192,62 @@ const DebugNavigationPanel = () => {
     },
   ];
 
-  const jumpToScreen = useCallback(
+  const selectScreen = useCallback(
     (screen: ScreenOption) => {
-      if (screen.setupDemo) {
-        screen.setupDemo();
+      if (!screen.hasOptions) {
+        if (screen.setupDemo) {
+          screen.setupDemo();
+        }
+        (navigation as any).navigate(screen.screen, screen.params);
+        setIsExpanded(false);
+        return;
       }
-      (navigation as any).navigate(screen.screen, screen.params);
-      setIsExpanded(false);
+      setSelectedScreen(screen);
+      setVoiceGuidanceEnabled(true);
+      setAllowIdCard(true);
+      setAllowPassport(true);
     },
     [navigation]
   );
 
+  const jumpToScreen = useCallback(() => {
+    if (!selectedScreen) return;
+
+    // Validate document type selection for document scanning screens
+    if (
+      selectedScreen.hasDocumentTypeOption &&
+      !allowIdCard &&
+      !allowPassport
+    ) {
+      // Don't navigate if no document types are selected
+      return;
+    }
+
+    if (selectedScreen.setupDemo) {
+      selectedScreen.setupDemo();
+    }
+    // Apply voice guidance AFTER setupDemo to avoid overwriting
+    applyVoiceGuidance(voiceGuidanceEnabled);
+    // Apply document types if it's a document scanning screen
+    if (selectedScreen.hasDocumentTypeOption) {
+      applyDocumentTypes(allowIdCard, allowPassport);
+    }
+    (navigation as any).navigate(selectedScreen.screen, selectedScreen.params);
+    setIsExpanded(false);
+    setSelectedScreen(null);
+    setVoiceGuidanceEnabled(true);
+    setAllowIdCard(true);
+    setAllowPassport(true);
+  }, [
+    navigation,
+    selectedScreen,
+    voiceGuidanceEnabled,
+    allowIdCard,
+    allowPassport,
+    applyVoiceGuidance,
+    applyDocumentTypes,
+  ]);
+
   // Only show in development mode
   if (!__DEV__) {
     return null;
@@ -134,21 +258,101 @@ const DebugNavigationPanel = () => {
       {isExpanded && (
         <View style={styles.panel}>
           <Text style={styles.title}>SDK JUMP TO SCREEN:</Text>
-          {screens.map((screen) => (
-            <TouchableOpacity
-              key={screen.screen}
-              style={styles.screenButton}
-              onPress={() => jumpToScreen(screen)}
-            >
-              <Text style={styles.screenIcon}>{screen.icon}</Text>
-              <Text style={styles.screenLabel}>{screen.label}</Text>
-            </TouchableOpacity>
-          ))}
+          {selectedScreen ? (
+            <View>
+              <Text style={styles.optionsTitle}>
+                {selectedScreen.icon} {selectedScreen.label}
+              </Text>
+              <View style={styles.optionRow}>
+                <Text style={styles.optionLabel}>🔊 Voice Guidance</Text>
+                <Switch
+                  value={voiceGuidanceEnabled}
+                  onValueChange={setVoiceGuidanceEnabled}
+                  trackColor={{ false: '#616161', true: '#FF5252' }}
+                  thumbColor="white"
+                />
+              </View>
+              {selectedScreen.hasDocumentTypeOption && (
+                <>
+                  <View style={styles.optionRow}>
+                    <Text style={styles.optionLabel}>🪪 Allow ID Card</Text>
+                    <Switch
+                      value={allowIdCard}
+                      onValueChange={setAllowIdCard}
+                      trackColor={{ false: '#616161', true: '#FF5252' }}
+                      thumbColor="white"
+                    />
+                  </View>
+                  <View style={styles.optionRow}>
+                    <Text style={styles.optionLabel}>🛂 Allow Passport</Text>
+                    <Switch
+                      value={allowPassport}
+                      onValueChange={setAllowPassport}
+                      trackColor={{ false: '#616161', true: '#FF5252' }}
+                      thumbColor="white"
+                    />
+                  </View>
+                </>
+              )}
+              <View style={styles.actionRow}>
+                <TouchableOpacity
+                  style={styles.backButton}
+                  onPress={() => setSelectedScreen(null)}
+                >
+                  <Text style={styles.backButtonText}>◀ Back</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[
+                    styles.goButton,
+                    selectedScreen.hasDocumentTypeOption &&
+                      !allowIdCard &&
+                      !allowPassport &&
+                      styles.goButtonDisabled,
+                  ]}
+                  onPress={jumpToScreen}
+                  disabled={
+                    selectedScreen.hasDocumentTypeOption &&
+                    !allowIdCard &&
+                    !allowPassport
+                  }
+                >
+                  <Text
+                    style={[
+                      styles.goButtonText,
+                      selectedScreen.hasDocumentTypeOption &&
+                        !allowIdCard &&
+                        !allowPassport &&
+                        styles.goButtonTextDisabled,
+                    ]}
+                  >
+                    Go ▶
+                  </Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          ) : (
+            screens.map((screen) => (
+              <TouchableOpacity
+                key={screen.screen}
+                style={styles.screenButton}
+                onPress={() => selectScreen(screen)}
+              >
+                <Text style={styles.screenIcon}>{screen.icon}</Text>
+                <Text style={styles.screenLabel}>{screen.label}</Text>
+              </TouchableOpacity>
+            ))
+          )}
         </View>
       )}
       <TouchableOpacity
         style={styles.toggleButton}
-        onPress={() => setIsExpanded(!isExpanded)}
+        onPress={() => {
+          setIsExpanded(!isExpanded);
+          setSelectedScreen(null);
+          setVoiceGuidanceEnabled(true);
+          setAllowIdCard(true);
+          setAllowPassport(true);
+        }}
       >
         <Text style={styles.bugIcon}>{ICONS.BUG_REPORT}</Text>
         {isExpanded && (
@@ -214,7 +418,7 @@ const styles = StyleSheet.create({
     marginBottom: 10,
     borderWidth: 1,
     borderColor: 'rgba(255, 82, 82, 0.5)',
-    minWidth: 180,
+    minWidth: 200,
     ...Platform.select({
       ios: {
         shadowColor: '#000',
@@ -257,6 +461,58 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     flex: 1,
   },
+  optionsTitle: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 12,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 6,
+    marginBottom: 12,
+  },
+  optionLabel: {
+    color: 'white',
+    fontSize: 13,
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  backButton: {
+    flex: 1,
+    backgroundColor: '#616161',
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  backButtonText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  goButton: {
+    flex: 1,
+    backgroundColor: '#FF5252',
+    paddingVertical: 8,
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  goButtonDisabled: {
+    backgroundColor: '#9E9E9E',
+    opacity: 0.5,
+  },
+  goButtonText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+  goButtonTextDisabled: {
+    color: '#CCCCCC',
+  },
 });
 
 export default DebugNavigationPanel;

package/src/Shared/Components/EIDScanner.tsx

@@ -6,13 +6,14 @@ import DeviceInfo from 'react-native-device-info';
 import { MRZInfo } from '../EIDReader/lds/icao/mrzInfo';
 import { eidReader } from '../EIDReader/eidReader';
 import NativeProgressBar from './NativeProgressBar';
-import type { FieldRecords } from 'mrz';
+import type { MRZFields } from '../Types/mrzFields';
 import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 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 { speak, resetLastMessage } from '../Libs/tts.utils';
+import { isDebugEnabled } from '../Libs/debug.utils';
 import {
   trackEIDScanStart,
   trackEIDScanComplete,
@@ -25,7 +26,7 @@ interface eIDScannerProps {
   dateOfExpiry: string;
   documentType?: string;
   onScanSuccess?: (
-    mrzInfo: FieldRecords,
+    mrzInfo: MRZFields,
     faceImage: string,
     faceImageMimeType: string
   ) => void;
@@ -67,7 +68,7 @@ const EIDScanner = ({
         const dd = dateStr.substring(4, 6);
 
         // Assume 19xx if YY >= 50, else 20xx
-        const year = parseInt(yy) >= 50 ? `19${yy}` : `20${yy}`;
+        const year = parseInt(yy, 10) >= 50 ? `19${yy}` : `20${yy}`;
         return `${dd}/${mm}/${year}`;
       }
 
@@ -91,6 +92,7 @@ const EIDScanner = ({
   const appContext = React.useContext(AppContext);
   const [voiceGuidanceMessage, setVoiceGuidanceMessage] = useState<string>();
   const [attemptNumber, setAttemptNumber] = useState<number>(0);
+  const lastVoiceGuidanceMessage = useRef<string>('');
 
   const readNFC = useCallback(async () => {
     const startTime = Date.now();
@@ -101,6 +103,8 @@ const EIDScanner = ({
     setIsScanned(false);
     setProgress(0);
     setProgressStage('');
+    lastVoiceGuidanceMessage.current = '';
+    resetLastMessage();
 
     // Track EID scan start using analytics helper
     const docType =
@@ -141,7 +145,9 @@ const EIDScanner = ({
       return;
     }
 
-    await trackEIDScanStart(docType, hasNfc, isEnabled, currentAttempt).catch(()=>{});
+    await trackEIDScanStart(docType, hasNfc, isEnabled, currentAttempt).catch(
+      () => {}
+    );
 
     try {
       if (documentNumber && dateOfBirth && dateOfExpiry) {
@@ -169,9 +175,11 @@ const EIDScanner = ({
           setDocumentMRZInfo(passportData.mrz);
           setDocumentFaceImageMimeType(passportData.mimeType);
           setIsScanned(true);
-
-          // Track successful EID scan
-          await trackEIDScanComplete(docType, scanDuration, currentAttempt).catch(()=>{});
+          await trackEIDScanComplete(
+            docType,
+            scanDuration,
+            currentAttempt
+          ).catch(() => {});
         }
       } else {
         const scanDuration = Date.now() - startTime;
@@ -267,7 +275,7 @@ const EIDScanner = ({
       issuingState: mrz.getIssuingState(),
       sex: mrz.getGender().getStrCode(),
       nationality: mrz.getNationality(),
-    } satisfies FieldRecords;
+    } satisfies MRZFields;
   }, []);
 
   useEffect(() => {
@@ -358,9 +366,11 @@ const EIDScanner = ({
   useEffect(() => {
     if (
       voiceGuidanceMessage &&
-      appContext.currentWorkflowStep?.data?.voiceGuidanceActive
+      appContext.currentWorkflowStep?.data?.voiceGuidanceActive &&
+      voiceGuidanceMessage !== lastVoiceGuidanceMessage.current
     ) {
-      speakWithDebounce(voiceGuidanceMessage);
+      lastVoiceGuidanceMessage.current = voiceGuidanceMessage;
+      speak(voiceGuidanceMessage, true);
     }
   }, [
     voiceGuidanceMessage,
@@ -371,12 +381,22 @@ const EIDScanner = ({
     <View style={styles.container}>
       {/* NFC scan progress indicator and text at the top */}
       {hasNfc && !isScanned && progress > 0 && (
-        <View style={[styles.topProgressContainer, { paddingTop: insets.top + 16 }]}>
+        <View
+          style={[styles.topProgressContainer, { paddingTop: insets.top + 16 }]}
+        >
+          <Text style={styles.holdSteadyText}>
+            {t('eidScannerScreen.readingDocument')}
+          </Text>
           <View style={styles.progressTextContainer}>
             <Text style={styles.topScanningText}>
-              {progressStage || t('eidScannerScreen.readingDocument')}
+              {progressStage || t('eidScannerScreen.connecting')}
             </Text>
-            <Text style={[styles.progressPercentage, { color: appContext.branding.primaryColor }]}>
+            <Text
+              style={[
+                styles.progressPercentage,
+                { color: appContext.branding.primaryColor },
+              ]}
+            >
               {Math.round(progress)}%
             </Text>
           </View>
@@ -574,7 +594,6 @@ const EIDScanner = ({
                 </Text>
               )))}
 
-
           {hasNfc && isEnabled && isScanned && (
             <View style={styles.buttonsContainer}>
               <StyledButton
@@ -599,6 +618,58 @@ const EIDScanner = ({
               </StyledButton>
             </View>
           )}
+
+          {isDebugEnabled() && (
+            <View
+              style={{
+                position: 'absolute',
+                top: insets.top + 10,
+                right: 10,
+                backgroundColor: 'rgba(0, 0, 0, 0.85)',
+                padding: 10,
+                borderRadius: 8,
+                borderWidth: 1,
+                borderColor: '#FF6B6B',
+                maxWidth: 200,
+                zIndex: 1001,
+              }}
+            >
+              <Text
+                style={{
+                  color: '#FF6B6B',
+                  fontSize: 11,
+                  fontWeight: 'bold',
+                  marginBottom: 6,
+                }}
+              >
+                🐛 DEBUG MODE
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`NFC: ${hasNfc ? '✓' : '✗'}`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`Enabled: ${isEnabled ? '✓' : '✗'}`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`Scanning: ${isScanning ? '✓' : '○'}`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`Scanned: ${isScanned ? '✓' : '○'}`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`Progress: ${Math.round(progress)}%`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`Face Image: ${documentFaceImage ? '✓' : '✗'}`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9, marginBottom: 2 }}>
+                {`MRZ Info: ${documentMRZInfo ? '✓' : '✗'}`}
+              </Text>
+              <Text style={{ color: '#88D8B0', fontSize: 9 }}>
+                {`Doc Type: ${documentType}`}
+              </Text>
+            </View>
+          )}
         </>
       )}
     </View>
@@ -623,6 +694,13 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(255, 255, 255, 0.95)',
     gap: 8,
   },
+  holdSteadyText: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#000',
+    textAlign: 'center',
+    marginBottom: 8,
+  },
   progressTextContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -630,7 +708,7 @@ const styles = StyleSheet.create({
     width: '100%',
   },
   topScanningText: {
-    fontSize: 18,
+    fontSize: 14,
     fontWeight: 'bold',
     color: '#000',
     flex: 1,