@trustchex/react-native-sdk 1.409.0 → 1.464.0

package/lib/module/Shared/Components/DebugNavigationPanel.js

@@ -4,28 +4,15 @@ import React, { useCallback, useContext, useState } from 'react';
 import { View, Text, TouchableOpacity, 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.js";
 import { getSimulatedDemoData } from "../Libs/demo.utils.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const DEV_BASE_URL = 'https://192.168.0.171:3000';
-// 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
-};
+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.';
 const DebugNavigationPanel = () => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [selectedScreen, setSelectedScreen] = useState(null);
@@ -37,6 +24,10 @@ const DebugNavigationPanel = () => {
   const navigation = useNavigation();
   const appContext = useContext(AppContext);
   const insets = useSafeAreaInsets();
+  const {
+    i18n
+  } = useTranslation();
+  const isTurkish = (i18n.language || '').toLowerCase().startsWith('tr');
   const setupDemoSession = useCallback((setDebugFlag = false) => {
     appContext.setIsDemoSession?.(true);
     appContext.identificationInfo.sessionId = 'demo-verification-id';
@@ -81,12 +72,10 @@ const DebugNavigationPanel = () => {
   }, [appContext]);
   const screens = [{
     screen: 'VerificationSessionCheckScreen',
-    label: 'Session Check',
-    icon: ICONS.LOGIN
+    label: 'Session Check'
   }, {
     screen: 'OTPVerificationScreen',
     label: 'OTP',
-    icon: ICONS.PHONE,
     setupDemo: () => {
       setupDemoSession(true);
     },
@@ -96,7 +85,6 @@ const DebugNavigationPanel = () => {
   }, {
     screen: 'ContractAcceptanceScreen',
     label: 'Consent',
-    icon: ICONS.HANDSHAKE,
     hasOptions: true,
     setupDemo: () => {
       setupDemoSession(true);
@@ -106,10 +94,40 @@ const DebugNavigationPanel = () => {
         appContext.currentWorkflowStep = contractStep;
       }
     }
+  }, {
+    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',
+        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: () => {
@@ -122,7 +140,6 @@ const DebugNavigationPanel = () => {
   }, {
     screen: 'IdentityDocumentEIDScanningScreen',
     label: 'eID Scan',
-    icon: ICONS.NFC,
     hasOptions: true,
     hasDocumentTypeOption: true,
     setupDemo: () => {
@@ -135,7 +152,6 @@ const DebugNavigationPanel = () => {
   }, {
     screen: 'LivenessDetectionScreen',
     label: 'Liveness',
-    icon: ICONS.FACE,
     hasOptions: true,
     setupDemo: () => {
       setupDemoSession(true);
@@ -147,25 +163,27 @@ const DebugNavigationPanel = () => {
   }, {
     screen: 'ResultScreen',
     label: 'Result',
-    icon: ICONS.CHECK_CIRCLE,
     setupDemo: () => {
       setupDemoSession();
     }
   }, {
     screen: 'MRZTestScreen',
     label: 'MRZ Test',
-    icon: ICONS.BUG_REPORT,
     isDebug: true
   }, {
     screen: 'BarcodeTestScreen',
     label: 'Barcode Test',
-    icon: ICONS.BUG_REPORT,
+    isDebug: true
+  }, {
+    screen: 'NFCScanTestScreen',
+    label: 'NFC Scan Test',
     isDebug: true
   }];
   const selectScreen = useCallback(screen => {
     if (!screen.hasOptions) {
       if (screen.setupDemo) {
         screen.setupDemo();
+        applyVoiceGuidance(voiceGuidanceEnabled);
       }
       navigation.navigate(screen.screen, screen.params);
       setIsExpanded(false);
@@ -175,7 +193,7 @@ const DebugNavigationPanel = () => {
     setVoiceGuidanceEnabled(true);
     setAllowIdCard(true);
     setAllowPassport(true);
-  }, [navigation]);
+  }, [navigation, voiceGuidanceEnabled, applyVoiceGuidance]);
   const handleVideoCallTest = useCallback(async () => {
     setIsConnectingVideoCall(true);
     setVideoCallError(null);
@@ -269,14 +287,14 @@ const DebugNavigationPanel = () => {
         style: styles.title,
         children: "SDK JUMP TO SCREEN:"
       }), selectedScreen ? /*#__PURE__*/_jsxs(View, {
-        children: [/*#__PURE__*/_jsxs(Text, {
+        children: [/*#__PURE__*/_jsx(Text, {
           style: styles.optionsTitle,
-          children: [selectedScreen.icon, " ", selectedScreen.label]
+          children: selectedScreen.label
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.optionRow,
           children: [/*#__PURE__*/_jsx(Text, {
             style: styles.optionLabel,
-            children: "\uD83D\uDD0A Voice Guidance"
+            children: "Voice Guidance"
           }), /*#__PURE__*/_jsx(Switch, {
             value: voiceGuidanceEnabled,
             onValueChange: setVoiceGuidanceEnabled,
@@ -291,7 +309,7 @@ const DebugNavigationPanel = () => {
             style: styles.optionRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.optionLabel,
-              children: "\uD83E\uDEAA Allow ID Card"
+              children: "Allow ID Card"
             }), /*#__PURE__*/_jsx(Switch, {
               value: allowIdCard,
               onValueChange: setAllowIdCard,
@@ -305,7 +323,7 @@ const DebugNavigationPanel = () => {
             style: styles.optionRow,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.optionLabel,
-              children: "\uD83D\uDEC2 Allow Passport"
+              children: "Allow Passport"
             }), /*#__PURE__*/_jsx(Switch, {
               value: allowPassport,
               onValueChange: setAllowPassport,
@@ -336,16 +354,13 @@ const DebugNavigationPanel = () => {
           })]
         })]
       }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [screens.filter(s => !s.isDebug).map(screen => /*#__PURE__*/_jsxs(TouchableOpacity, {
+        children: [screens.filter(s => !s.isDebug).map(screen => /*#__PURE__*/_jsx(TouchableOpacity, {
           style: styles.screenButton,
           onPress: () => selectScreen(screen),
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.screenIcon,
-            children: screen.icon
-          }), /*#__PURE__*/_jsx(Text, {
+          children: /*#__PURE__*/_jsx(Text, {
             style: styles.screenLabel,
             children: screen.label
-          })]
+          })
         }, screen.screen)), /*#__PURE__*/_jsxs(View, {
           style: styles.sectionDivider,
           children: [/*#__PURE__*/_jsx(View, {
@@ -356,26 +371,20 @@ const DebugNavigationPanel = () => {
           }), /*#__PURE__*/_jsx(View, {
             style: styles.sectionDividerLine
           })]
-        }), screens.filter(s => s.isDebug).map(screen => /*#__PURE__*/_jsxs(TouchableOpacity, {
+        }), screens.filter(s => s.isDebug).map(screen => /*#__PURE__*/_jsx(TouchableOpacity, {
           style: styles.debugScreenButton,
           onPress: () => selectScreen(screen),
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.screenIcon,
-            children: screen.icon
-          }), /*#__PURE__*/_jsx(Text, {
+          children: /*#__PURE__*/_jsx(Text, {
             style: styles.debugScreenLabel,
             children: screen.label
-          })]
+          })
         }, screen.screen)), /*#__PURE__*/_jsxs(TouchableOpacity, {
           style: [styles.videoCallTestButton, isConnectingVideoCall && styles.videoCallTestButtonDisabled],
           onPress: handleVideoCallTest,
           disabled: isConnectingVideoCall,
-          children: [isConnectingVideoCall ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          children: [isConnectingVideoCall && /*#__PURE__*/_jsx(ActivityIndicator, {
             size: "small",
             color: "#4CAF50"
-          }) : /*#__PURE__*/_jsx(Text, {
-            style: styles.screenIcon,
-            children: "\uD83D\uDCF9"
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.videoCallTestLabel,
             children: isConnectingVideoCall ? 'Connecting...' : 'Video Call Test'
@@ -394,18 +403,13 @@ const DebugNavigationPanel = () => {
         setAllowIdCard(true);
         setAllowPassport(true);
       },
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.bugIcon,
-        children: ICONS.BUG_REPORT
-      }), isExpanded && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.spacing
-        }), /*#__PURE__*/_jsx(Text, {
+      children: [isExpanded && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Text, {
           style: styles.toggleText,
           children: "DEBUG NAV"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.spacing
         })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.spacing
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.arrow,
         children: isExpanded ? '▼' : '▲'
@@ -424,9 +428,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({
@@ -444,9 +448,6 @@ const styles = StyleSheet.create({
       }
     })
   },
-  bugIcon: {
-    fontSize: 24
-  },
   spacing: {
     width: 8
   },
@@ -457,7 +458,10 @@ const styles = StyleSheet.create({
   },
   arrow: {
     color: 'white',
-    fontSize: 20
+    fontSize: 20,
+    lineHeight: 20,
+    textAlignVertical: 'center',
+    includeFontPadding: false
   },
   panel: {
     backgroundColor: 'rgba(0, 0, 0, 0.9)',
@@ -500,12 +504,6 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     marginBottom: 6
   },
-  screenIcon: {
-    fontSize: 16,
-    marginRight: 8,
-    width: 20,
-    textAlign: 'center'
-  },
   screenLabel: {
     color: 'white',
     fontSize: 12,