@trustchex/react-native-sdk 1.381.0 → 1.464.0

package/src/Shared/Components/DebugNavigationPanel.tsx

@@ -6,35 +6,33 @@ import {
   StyleSheet,
   Platform,
   Switch,
+  ActivityIndicator,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
 import { getSimulatedDemoData } from '../Libs/demo.utils';
 import type { VerificationSession } from '../Types/verificationSession';
 
+const DEV_BASE_URL = 'https://192.168.0.171:3000';
+const DEBUG_VERBAL_CONSENT_TITLE_EN = 'Verbal Consent';
+const DEBUG_VERBAL_CONSENT_TITLE_TR = 'Sözlü Onay';
+const DEBUG_VERBAL_CONSENT_TEXT_EN =
+  'I confirm my identity and give my explicit consent to the processing of my personal data for digital identity verification. I acknowledge that my biometric data will be used solely for this purpose. I understand that I can withdraw this consent at any time.';
+const DEBUG_VERBAL_CONSENT_TEXT_TR =
+  'Dijital kimlik doğrulama amacıyla kimliğimi teyit ediyor ve kişisel verilerimin işlenmesine açık rızamı veriyorum. Biyometrik verilerimin yalnızca kimlik doğrulama amacıyla işleneceğini kabul ediyorum. Bu onayı istediğim zaman geri çekebileceğimi biliyorum.';
+
 type ScreenOption = {
   screen: string;
   label: string;
-  icon: string;
+  isDebug?: boolean;
   hasOptions?: boolean;
   hasDocumentTypeOption?: boolean;
   setupDemo?: () => void;
   params?: Record<string, unknown>;
 };
 
-// Icon mapping matching Flutter SDK Material Icons
-const ICONS = {
-  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>(
@@ -43,9 +41,13 @@ const DebugNavigationPanel = () => {
   const [voiceGuidanceEnabled, setVoiceGuidanceEnabled] = useState(true);
   const [allowIdCard, setAllowIdCard] = useState(true);
   const [allowPassport, setAllowPassport] = useState(true);
+  const [isConnectingVideoCall, setIsConnectingVideoCall] = useState(false);
+  const [videoCallError, setVideoCallError] = useState<string | null>(null);
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
   const insets = useSafeAreaInsets();
+  const { i18n } = useTranslation();
+  const isTurkish = (i18n.language || '').toLowerCase().startsWith('tr');
 
   const setupDemoSession = useCallback(
     (setDebugFlag: boolean = false) => {
@@ -108,12 +110,10 @@ const DebugNavigationPanel = () => {
     {
       screen: 'VerificationSessionCheckScreen',
       label: 'Session Check',
-      icon: ICONS.LOGIN,
     },
     {
       screen: 'OTPVerificationScreen',
       label: 'OTP',
-      icon: ICONS.PHONE,
       setupDemo: () => {
         setupDemoSession(true);
       },
@@ -122,7 +122,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'ContractAcceptanceScreen',
       label: 'Consent',
-      icon: ICONS.HANDSHAKE,
       hasOptions: true,
       setupDemo: () => {
         setupDemoSession(true);
@@ -135,10 +134,55 @@ const DebugNavigationPanel = () => {
         }
       },
     },
+    {
+      screen: 'VerbalConsentScreen',
+      label: 'Verbal Consent',
+      hasOptions: true,
+      setupDemo: () => {
+        setupDemoSession(true);
+        const existingStep = appContext.workflowSteps?.find(
+          (s) => s.type === 'VERBAL_CONSENT'
+        );
+
+        const localizedConsentTitle = isTurkish
+          ? DEBUG_VERBAL_CONSENT_TITLE_TR
+          : DEBUG_VERBAL_CONSENT_TITLE_EN;
+        const localizedConsentText = isTurkish
+          ? DEBUG_VERBAL_CONSENT_TEXT_TR
+          : DEBUG_VERBAL_CONSENT_TEXT_EN;
+
+        const localizedStep = existingStep
+          ? {
+              ...existingStep,
+              data: {
+                ...existingStep.data,
+                verbalConsentTitle: localizedConsentTitle,
+                verbalConsentText: localizedConsentText,
+                voiceGuidanceActive: false,
+              },
+            }
+          : {
+              type: 'VERBAL_CONSENT' as const,
+              required: true,
+              data: {
+                verbalConsentTitle: localizedConsentTitle,
+                verbalConsentText: localizedConsentText,
+                voiceGuidanceActive: false,
+              },
+            };
+
+        if (appContext.workflowSteps) {
+          appContext.workflowSteps = appContext.workflowSteps.map((step) =>
+            step.type === 'VERBAL_CONSENT' ? localizedStep : step
+          );
+        }
+
+        appContext.currentWorkflowStep = localizedStep;
+      },
+    },
     {
       screen: 'IdentityDocumentScanningScreen',
       label: 'ID Scan',
-      icon: ICONS.CREDIT_CARD,
       hasOptions: true,
       hasDocumentTypeOption: true,
       setupDemo: () => {
@@ -154,7 +198,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'IdentityDocumentEIDScanningScreen',
       label: 'eID Scan',
-      icon: ICONS.NFC,
       hasOptions: true,
       hasDocumentTypeOption: true,
       setupDemo: () => {
@@ -170,7 +213,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'LivenessDetectionScreen',
       label: 'Liveness',
-      icon: ICONS.FACE,
       hasOptions: true,
       setupDemo: () => {
         setupDemoSession(true);
@@ -185,7 +227,6 @@ const DebugNavigationPanel = () => {
     {
       screen: 'ResultScreen',
       label: 'Result',
-      icon: ICONS.CHECK_CIRCLE,
       setupDemo: () => {
         setupDemoSession();
       },
@@ -193,7 +234,17 @@ const DebugNavigationPanel = () => {
     {
       screen: 'MRZTestScreen',
       label: 'MRZ Test',
-      icon: ICONS.BUG_REPORT,
+      isDebug: true,
+    },
+    {
+      screen: 'BarcodeTestScreen',
+      label: 'Barcode Test',
+      isDebug: true,
+    },
+    {
+      screen: 'NFCScanTestScreen',
+      label: 'NFC Scan Test',
+      isDebug: true,
     },
   ];
 
@@ -202,6 +253,7 @@ const DebugNavigationPanel = () => {
       if (!screen.hasOptions) {
         if (screen.setupDemo) {
           screen.setupDemo();
+          applyVoiceGuidance(voiceGuidanceEnabled);
         }
         (navigation as any).navigate(screen.screen, screen.params);
         setIsExpanded(false);
@@ -212,12 +264,70 @@ const DebugNavigationPanel = () => {
       setAllowIdCard(true);
       setAllowPassport(true);
     },
-    [navigation]
+    [navigation, voiceGuidanceEnabled, applyVoiceGuidance]
   );
 
-  const jumpToScreen = useCallback(() => {
-    if (!selectedScreen) return;
+  const handleVideoCallTest = useCallback(async () => {
+    setIsConnectingVideoCall(true);
+    setVideoCallError(null);
+    try {
+      const fallbackUrl = (appContext.baseUrl ?? '').replace(/\/$/, '');
+      let response: Response;
+      let usedBaseUrl = DEV_BASE_URL;
+      try {
+        response = await fetch(
+          `${DEV_BASE_URL}/api/test/video-sessions/latest`
+        );
+      } catch {
+        usedBaseUrl = fallbackUrl;
+        response = await fetch(`${fallbackUrl}/api/test/video-sessions/latest`);
+      }
+      const text = await response.text();
+      let data: any;
+      try {
+        data = JSON.parse(text);
+      } catch {
+        throw new Error(
+          `Server returned non-JSON (${response.status}): ${text.slice(0, 120)}`
+        );
+      }
+      if (!response.ok || !data.success) {
+        throw new Error(data.message || 'No active test session found');
+      }
+      // Point SDK at the server where the test session lives.
+      // Do NOT call setBaseUrl (state setter) — it triggers a useMemo rebuild in
+      // Trustchex.tsx that resets identificationInfo to an empty object before the
+      // screen can render. Direct mutation is sufficient for the test flow.
+      appContext.baseUrl = usedBaseUrl;
+      appContext.isTestVideoSession = true;
+      appContext.identificationInfo.identificationId = data.identificationId;
+      appContext.identificationInfo.videoSessionId = data.videoSessionId;
+      appContext.identificationInfo.sessionId = data.verificationSessionId;
+
+      // Set up a mini workflow: eID scan → video call
+      const eidStep = {
+        type: 'IDENTITY_DOCUMENT_EID_SCAN' as const,
+        required: false,
+        data: { voiceGuidanceActive: false },
+      };
+      const videoCallStep = {
+        type: 'VIDEO_CALL' as const,
+        required: true,
+        data: {},
+      };
+      appContext.workflowSteps = [eidStep, videoCallStep];
+      appContext.currentWorkflowStep = eidStep;
 
+      (navigation as any).navigate('IdentityDocumentEIDScanningScreen');
+      setIsExpanded(false);
+    } catch (err: any) {
+      setVideoCallError(err.message || 'Failed to connect');
+    } finally {
+      setIsConnectingVideoCall(false);
+    }
+  }, [appContext, navigation]);
+
+  const jumpToScreen = useCallback(() => {
     // Validate document type selection for document scanning screens
     if (
       selectedScreen.hasDocumentTypeOption &&
@@ -265,11 +375,9 @@ const DebugNavigationPanel = () => {
           <Text style={styles.title}>SDK JUMP TO SCREEN:</Text>
           {selectedScreen ? (
             <View>
-              <Text style={styles.optionsTitle}>
-                {selectedScreen.icon} {selectedScreen.label}
-              </Text>
+              <Text style={styles.optionsTitle}>{selectedScreen.label}</Text>
               <View style={styles.optionRow}>
-                <Text style={styles.optionLabel}>🔊 Voice Guidance</Text>
+                <Text style={styles.optionLabel}>Voice Guidance</Text>
                 <Switch
                   value={voiceGuidanceEnabled}
                   onValueChange={setVoiceGuidanceEnabled}
@@ -280,7 +388,7 @@ const DebugNavigationPanel = () => {
               {selectedScreen.hasDocumentTypeOption && (
                 <>
                   <View style={styles.optionRow}>
-                    <Text style={styles.optionLabel}>🪪 Allow ID Card</Text>
+                    <Text style={styles.optionLabel}>Allow ID Card</Text>
                     <Switch
                       value={allowIdCard}
                       onValueChange={setAllowIdCard}
@@ -289,7 +397,7 @@ const DebugNavigationPanel = () => {
                     />
                   </View>
                   <View style={styles.optionRow}>
-                    <Text style={styles.optionLabel}>🛂 Allow Passport</Text>
+                    <Text style={styles.optionLabel}>Allow Passport</Text>
                     <Switch
                       value={allowPassport}
                       onValueChange={setAllowPassport}
@@ -336,16 +444,53 @@ const DebugNavigationPanel = () => {
               </View>
             </View>
           ) : (
-            screens.map((screen) => (
+            <>
+              {screens
+                .filter((s) => !s.isDebug)
+                .map((screen) => (
+                  <TouchableOpacity
+                    key={screen.screen}
+                    style={styles.screenButton}
+                    onPress={() => selectScreen(screen)}
+                  >
+                    <Text style={styles.screenLabel}>{screen.label}</Text>
+                  </TouchableOpacity>
+                ))}
+              <View style={styles.sectionDivider}>
+                <View style={styles.sectionDividerLine} />
+                <Text style={styles.sectionDividerLabel}>DEBUG TOOLS</Text>
+                <View style={styles.sectionDividerLine} />
+              </View>
+              {screens
+                .filter((s) => s.isDebug)
+                .map((screen) => (
+                  <TouchableOpacity
+                    key={screen.screen}
+                    style={styles.debugScreenButton}
+                    onPress={() => selectScreen(screen)}
+                  >
+                    <Text style={styles.debugScreenLabel}>{screen.label}</Text>
+                  </TouchableOpacity>
+                ))}
               <TouchableOpacity
-                key={screen.screen}
-                style={styles.screenButton}
-                onPress={() => selectScreen(screen)}
+                style={[
+                  styles.videoCallTestButton,
+                  isConnectingVideoCall && styles.videoCallTestButtonDisabled,
+                ]}
+                onPress={handleVideoCallTest}
+                disabled={isConnectingVideoCall}
               >
-                <Text style={styles.screenIcon}>{screen.icon}</Text>
-                <Text style={styles.screenLabel}>{screen.label}</Text>
+                {isConnectingVideoCall && (
+                  <ActivityIndicator size="small" color="#4CAF50" />
+                )}
+                <Text style={styles.videoCallTestLabel}>
+                  {isConnectingVideoCall ? 'Connecting...' : 'Video Call Test'}
+                </Text>
               </TouchableOpacity>
-            ))
+              {videoCallError && (
+                <Text style={styles.videoCallTestError}>{videoCallError}</Text>
+              )}
+            </>
           )}
         </View>
       )}
@@ -359,14 +504,12 @@ const DebugNavigationPanel = () => {
           setAllowPassport(true);
         }}
       >
-        <Text style={styles.bugIcon}>{ICONS.BUG_REPORT}</Text>
         {isExpanded && (
           <>
-            <View style={styles.spacing} />
             <Text style={styles.toggleText}>DEBUG NAV</Text>
+            <View style={styles.spacing} />
           </>
         )}
-        <View style={styles.spacing} />
         <Text style={styles.arrow}>{isExpanded ? '▼' : '▲'}</Text>
       </TouchableOpacity>
     </View>
@@ -384,9 +527,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#FF5252',
-    paddingHorizontal: 12,
+    paddingHorizontal: 10,
     paddingVertical: 10,
-    borderRadius: 10,
+    borderRadius: 8,
     borderWidth: 2,
     borderColor: 'white',
     ...Platform.select({
@@ -401,9 +544,6 @@ const styles = StyleSheet.create({
       },
     }),
   },
-  bugIcon: {
-    fontSize: 24,
-  },
   spacing: {
     width: 8,
   },
@@ -415,6 +555,9 @@ const styles = StyleSheet.create({
   arrow: {
     color: 'white',
     fontSize: 20,
+    lineHeight: 20,
+    textAlignVertical: 'center',
+    includeFontPadding: false,
   },
   panel: {
     backgroundColor: 'rgba(0, 0, 0, 0.9)',
@@ -454,12 +597,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     marginBottom: 6,
   },
-  screenIcon: {
-    fontSize: 16,
-    marginRight: 8,
-    width: 20,
-    textAlign: 'center',
-  },
   screenLabel: {
     color: 'white',
     fontSize: 12,
@@ -518,6 +655,70 @@ const styles = StyleSheet.create({
   goButtonTextDisabled: {
     color: '#CCCCCC',
   },
+  sectionDivider: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    marginBottom: 6,
+    gap: 6,
+  },
+  sectionDividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: 'rgba(255, 167, 38, 0.4)',
+  },
+  sectionDividerLabel: {
+    color: '#FFA726',
+    fontSize: 9,
+    fontWeight: 'bold',
+    letterSpacing: 1,
+  },
+  debugScreenButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: 'rgba(255, 167, 38, 0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 167, 38, 0.4)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4,
+    marginBottom: 6,
+  },
+  debugScreenLabel: {
+    color: '#FFA726',
+    fontSize: 12,
+    fontWeight: '500',
+    flex: 1,
+  },
+  videoCallTestButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: 'rgba(76, 175, 80, 0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(76, 175, 80, 0.5)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4,
+    marginBottom: 6,
+    gap: 8,
+  },
+  videoCallTestButtonDisabled: {
+    opacity: 0.5,
+  },
+  videoCallTestLabel: {
+    color: '#4CAF50',
+    fontSize: 12,
+    fontWeight: '600',
+    flex: 1,
+  },
+  videoCallTestError: {
+    color: '#FF5252',
+    fontSize: 10,
+    marginBottom: 6,
+    paddingHorizontal: 4,
+  },
 });
 
 export default DebugNavigationPanel;