@trustchex/react-native-sdk 1.334.0 → 1.354.0

package/src/Screens/Static/VerificationSessionCheckScreen.tsx

@@ -20,7 +20,7 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from '../../Shared/Contexts/AppContext';
-import httpClient, { BadRequestError, NotFoundError, TooManyRequestsError } from '../../Shared/Libs/http-client';
+import httpClient, { NotFoundError } from '../../Shared/Libs/http-client';
 import { useTranslation } from 'react-i18next';
 import LanguageSelector from '../../Shared/Components/LanguageSelector';
 import NavigationManager, {
@@ -49,11 +49,8 @@ import {
 
 const VerificationSessionCheckScreen = () => {
   const [sessionCode, setSessionCode] = useState('');
-  const [code, setCode] = useState('');
   const [isCheckingSession, setIsCheckingSession] = useState(false);
-  const [isSendAgainEnabled, setIsSendAgainEnabled] = useState(false);
-  const [isCodeSent, setIsCodeSent] = useState(false);
-  const [isCodeGettingVerified, setIsCodeGettingVerified] = useState(false);
+  const isCheckingSessionRef = useRef(false);
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
@@ -76,11 +73,12 @@ const VerificationSessionCheckScreen = () => {
   }, []);
 
   const getSession = useCallback(
-    async (id: string) => {
+    async (id: string, isDemoMode?: boolean) => {
+      const isDemo = isDemoMode ?? appContext.isDemoSession;
       try {
         const response = await httpClient.get<VerificationSession>(
           `${apiUrl}/verification-sessions/${id}`,
-          appContext.isDemoSession
+          isDemo
             ? getSimulatedDemoData<VerificationSession | undefined, void>(
               'GET_SESSION'
             )
@@ -111,11 +109,12 @@ const VerificationSessionCheckScreen = () => {
   const getSessionByCode = useCallback(
     async (inputCode: string) => {
       try {
-        appContext.isDemoSession = isDemoSession(inputCode);
-        analyticsService.setDemoSession(appContext.isDemoSession);
+        const isDemoMode = isDemoSession(inputCode);
+        appContext.setIsDemoSession?.(isDemoMode);
+        analyticsService.setDemoSession(isDemoMode);
         const response = await httpClient.get<{ id: string }>(
           `${apiUrl}/verification-sessions?sessionCode=${inputCode.toUpperCase()}`,
-          appContext.isDemoSession
+          isDemoMode
             ? getSimulatedDemoData<{ id: string } | undefined, void>(
               'GET_SESSION_BY_CODE'
             )
@@ -151,121 +150,19 @@ const VerificationSessionCheckScreen = () => {
     [apiUrl, appContext, t]
   );
 
-  const sendVerificationCode = useCallback(
-    async (sessionId: string) => {
-      try {
-        await httpClient.post(
-          `${apiUrl}/verification-sessions/${sessionId}`,
-          {},
-          appContext.isDemoSession
-            ? getSimulatedDemoData('SEND_VERIFICATION_CODE')
-            : undefined
-        );
-        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 if (error instanceof TooManyRequestsError) {
-          // Code was already sent recently - this is expected behavior
-          // Return true since the code was already sent
-          return true;
-        } 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')
-          );
-        }
-      }
-      return false;
+  const navigateToOTPScreen = useCallback(
+    (sessionId: string) => {
+      (navigation as any).navigate('OTPVerificationScreen', { sessionId });
     },
-    [apiUrl, appContext.isDemoSession, t]
-  );
-
-  const getVerifiedSession = useCallback(
-    async (sessionId: string, verificationCode: string) => {
-      try {
-        const response = await httpClient.post<
-          VerificationSession,
-          { code: string }
-        >(
-          `${apiUrl}/verification-sessions/${sessionId}`,
-          {
-            code: verificationCode,
-          },
-          appContext.isDemoSession
-            ? getSimulatedDemoData<
-              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' }
-          );
-        }
-      }
-    },
-    [apiUrl, appContext.isDemoSession, t]
-  );
-
-  const sendOTPCode = useCallback(
-    async (sessionId: string) => {
-      if (!sessionId) {
-        return false;
-      }
-
-      const isSent = await sendVerificationCode(sessionId);
-
-      if (!isSent) {
-        return false;
-      }
-
-      setIsSendAgainEnabled(false);
-
-      setTimeout(
-        () => {
-          setIsSendAgainEnabled(true);
-        },
-        3 * 60 * 1000
-      );
-
-      setIsCodeSent(true);
-
-      return true;
-    },
-    [sendVerificationCode]
+    [navigation]
   );
 
   useEffect(() => {
-    if (!initialized.current && appContext.identificationInfo.sessionId) {
+    // Only run this effect if sessionId exists AND we're not currently checking a session
+    // This prevents race condition when session code is entered
+    if (!initialized.current && appContext.identificationInfo.sessionId && !isCheckingSessionRef.current) {
       initialized.current = true;
+      isCheckingSessionRef.current = true;
       setIsCheckingSession(true);
       getSession(appContext.identificationInfo.sessionId)
         .then((session) => {
@@ -275,15 +172,18 @@ const VerificationSessionCheckScreen = () => {
           }
 
           if (session?.sendOTP) {
-            return sendOTPCode(session.id);
-          } else if (session?.identificationId) {
-            appContext.identificationInfo.identificationId =
-              session?.identificationId;
+            navigateToOTPScreen(session.id);
+          } else {
+            if (session?.identificationId) {
+              appContext.identificationInfo.identificationId =
+                session?.identificationId;
+            }
             navigationManagerRef.current?.navigateToNextStep();
           }
         })
         .finally(() => {
           setTimeout(() => {
+            isCheckingSessionRef.current = false;
             setIsCheckingSession(false);
           }, 1000);
         });
@@ -292,7 +192,7 @@ const VerificationSessionCheckScreen = () => {
     appContext,
     appContext.identificationInfo.sessionId,
     getSession,
-    sendOTPCode,
+    navigateToOTPScreen,
   ]);
 
   return (
@@ -323,7 +223,7 @@ const VerificationSessionCheckScreen = () => {
                 />
               )}
             </View>
-            {isCheckingSession || isCodeGettingVerified ? (
+            {isCheckingSession ? (
               <LottieView
                 source={require('../../Shared/Animations/loading.json')}
                 style={styles.loadingAnimation}
@@ -331,7 +231,7 @@ const VerificationSessionCheckScreen = () => {
                 loop={true}
                 resizeMode="cover"
               />
-            ) : !isCodeSent ? (
+            ) : (
               <>
                 <Text style={styles.mainText}>
                   {t('verificationSessionCheckScreen.mainText')}
@@ -357,23 +257,42 @@ const VerificationSessionCheckScreen = () => {
                         alphanumericText.length === 8
                       ) {
                         try {
+                          isCheckingSessionRef.current = true;
                           setIsCheckingSession(true);
-                          const session =
+                          const isDemoMode = isDemoSession(alphanumericText);
+                          const sessionResponse =
                             await getSessionByCode(alphanumericText);
-                          if (session?.id) {
+                          if (sessionResponse?.id) {
                             if (appContext.setSessionId) {
-                              appContext.setSessionId(session.id);
+                              appContext.setSessionId(sessionResponse.id);
                             } else {
                               appContext.identificationInfo.sessionId =
-                                session.id;
+                                sessionResponse.id;
+                            }
+
+                            const session = await getSession(sessionResponse.id, isDemoMode);
+                            appContext.workflowSteps = session?.workflowSteps;
+                            if (session?.branding) {
+                              appContext.branding = appContext.branding || session.branding;
+                            }
+
+                            if (session?.sendOTP) {
+                              navigateToOTPScreen(sessionResponse.id);
+                            } else {
+                              if (session?.identificationId) {
+                                appContext.identificationInfo.identificationId =
+                                  session?.identificationId;
+                              }
+                              navigationManagerRef.current?.navigateToNextStep();
                             }
                           } else {
                             setSessionCode('');
                           }
-                        } catch {
+                        } catch (error) {
                           setSessionCode('');
                         } finally {
                           setTimeout(() => {
+                            isCheckingSessionRef.current = false;
                             setIsCheckingSession(false);
                           }, 1000);
                         }
@@ -408,64 +327,6 @@ const VerificationSessionCheckScreen = () => {
                   {t('verificationSessionCheckScreen.scanQRCode')}
                 </StyledButton>
               </>
-            ) : (
-              <>
-                <Text style={styles.mainText}>
-                  {t('verificationSessionCheckScreen.codeText')}
-                </Text>
-                <StyledTextInput
-                  autoFocus={true}
-                  placeholder=""
-                  borderColor={primaryColor}
-                  focusedBorderColor={primaryColor}
-                  inputStyle={styles.otpCodeTextInput}
-                  keyboardType="number-pad"
-                  textContentType="oneTimeCode"
-                  autoComplete="sms-otp"
-                  maxLength={6}
-                  onChangeText={(text) => {
-                    const numericText = text.replace(/[^0-9]/g, '');
-                    if (numericText.length <= 6) {
-                      setCode(numericText);
-                      if (numericText.length === 6) {
-                        (async () => {
-                          setIsCodeGettingVerified(true);
-                          const verifiedSession = await getVerifiedSession(
-                            appContext.identificationInfo.sessionId,
-                            numericText
-                          );
-                          if (verifiedSession?.identificationId) {
-                            appContext.identificationInfo.identificationId =
-                              verifiedSession?.identificationId;
-                            setCode('');
-                            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'),
-                              t('verificationSessionCheckScreen.codeError')
-                            );
-                            setCode('');
-                            setIsCodeGettingVerified(false);
-                          }
-                        })();
-                      }
-                    }
-                  }}
-                  value={code}
-                />
-                <StyledButton
-                  mode="contained"
-                  disabled={!isSendAgainEnabled}
-                  onPress={() => {
-                    sendOTPCode(appContext.identificationInfo.sessionId);
-                  }}
-                >
-                  {t('verificationSessionCheckScreen.sendCodeAgain')}
-                </StyledButton>
-              </>
             )}
           </View>
           {appContext.branding.logoUrl && (
@@ -593,12 +454,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textTransform: 'none',
   },
-  otpCodeTextInput: {
-    fontWeight: '800',
-    fontSize: 28,
-    textAlign: 'center',
-    letterSpacing: 8,
-  },
 });
 
 export default VerificationSessionCheckScreen;

package/src/Shared/Components/DebugNavigationPanel.tsx

@@ -0,0 +1,262 @@
+import React, { useCallback, useContext, useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import AppContext from '../Contexts/AppContext';
+import { getSimulatedDemoData } from '../Libs/demo.utils';
+import type { VerificationSession } from '../Types/verificationSession';
+
+type ScreenOption = {
+  screen: string;
+  label: string;
+  icon: string;
+  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
+} as const;
+
+const DebugNavigationPanel = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  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;
+
+    // Populate workflow steps with demo data (including contract URLs)
+    const demoSession = getSimulatedDemoData<VerificationSession, never>('GET_SESSION');
+    appContext.workflowSteps = demoSession.workflowSteps;
+  }, [appContext]);
+
+  const screens: ScreenOption[] = [
+    {
+      screen: 'VerificationSessionCheckScreen',
+      label: 'Session Check',
+      icon: ICONS.LOGIN,
+    },
+    {
+      screen: 'OTPVerificationScreen',
+      label: 'OTP',
+      icon: ICONS.PHONE,
+      setupDemo: () => {
+        setupDemoSession(true);
+      },
+      params: { sessionId: 'demo-verification-id' },
+    },
+    {
+      screen: 'ContractAcceptanceScreen',
+      label: 'Consent',
+      icon: ICONS.HANDSHAKE,
+      setupDemo: () => {
+        setupDemoSession(true);
+        // Set current workflow step to contract acceptance so demo contract URLs are loaded
+        const contractStep = appContext.workflowSteps?.find(
+          (step) => step.type === 'CONTRACT_ACCEPTANCE'
+        );
+        if (contractStep) {
+          appContext.currentWorkflowStep = contractStep;
+        }
+      },
+    },
+    {
+      screen: 'IdentityDocumentScanningScreen',
+      label: 'ID Scan',
+      icon: ICONS.CREDIT_CARD,
+      setupDemo: () => {
+        setupDemoSession(true);
+      },
+    },
+    {
+      screen: 'IdentityDocumentEIDScanningScreen',
+      label: 'eID Scan',
+      icon: ICONS.NFC,
+      setupDemo: () => {
+        setupDemoSession(true);
+      },
+    },
+    {
+      screen: 'LivenessDetectionScreen',
+      label: 'Liveness',
+      icon: ICONS.FACE,
+      setupDemo: () => {
+        setupDemoSession(true);
+      },
+    },
+    {
+      screen: 'ResultScreen',
+      label: 'Result',
+      icon: ICONS.CHECK_CIRCLE,
+      setupDemo: () => {
+        setupDemoSession();
+      },
+    },
+  ];
+
+  const jumpToScreen = useCallback(
+    (screen: ScreenOption) => {
+      if (screen.setupDemo) {
+        screen.setupDemo();
+      }
+      (navigation as any).navigate(screen.screen, screen.params);
+      setIsExpanded(false);
+    },
+    [navigation]
+  );
+
+  // Only show in development mode
+  if (!__DEV__) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, { bottom: 20 + insets.bottom }]}>
+      {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>
+          ))}
+        </View>
+      )}
+      <TouchableOpacity
+        style={styles.toggleButton}
+        onPress={() => setIsExpanded(!isExpanded)}
+      >
+        <Text style={styles.bugIcon}>{ICONS.BUG_REPORT}</Text>
+        {isExpanded && (
+          <>
+            <View style={styles.spacing} />
+            <Text style={styles.toggleText}>DEBUG NAV</Text>
+          </>
+        )}
+        <View style={styles.spacing} />
+        <Text style={styles.arrow}>{isExpanded ? '▼' : '▲'}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 20,
+    alignItems: 'flex-end',
+    zIndex: 9999,
+  },
+  toggleButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#FF5252',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: 'white',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  bugIcon: {
+    fontSize: 24,
+  },
+  spacing: {
+    width: 8,
+  },
+  toggleText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  arrow: {
+    color: 'white',
+    fontSize: 20,
+  },
+  panel: {
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 82, 82, 0.5)',
+    minWidth: 180,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.5,
+        shadowRadius: 15,
+      },
+      android: {
+        elevation: 15,
+      },
+    }),
+  },
+  title: {
+    color: 'rgba(255, 255, 255, 0.7)',
+    fontSize: 11,
+    fontWeight: 'bold',
+    letterSpacing: 1.2,
+    marginBottom: 12,
+    textAlign: 'right',
+  },
+  screenButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: '#616161',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4,
+    marginBottom: 6,
+  },
+  screenIcon: {
+    fontSize: 16,
+    marginRight: 8,
+    width: 20,
+    textAlign: 'center',
+  },
+  screenLabel: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: '500',
+    flex: 1,
+  },
+});
+
+export default DebugNavigationPanel;