@trustchex/react-native-sdk 1.334.0 → 1.354.0

package/src/Screens/Dynamic/IdentityDocumentScanningScreen.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 
 import type { FieldRecords } from 'mrz';
 import { Alert, SafeAreaView, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import IdentityDocumentCamera, {
   type DocumentScannedData,
 } from '../../Shared/Components/IdentityDocumentCamera';
@@ -27,6 +28,7 @@ const IdentityDocumentScanningScreen = () => {
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
   const [allowedDocumentTypes, setAllowedDocumentTypes] = useState<
     ('I' | 'P')[] | null
   >(null);
@@ -158,7 +160,7 @@ const IdentityDocumentScanningScreen = () => {
         }}
         showDebugImages={false}
       />
-      <View style={styles.footer}>
+      <View style={[styles.footer, { bottom: insets.bottom }]}>
         <NavigationManager ref={navigationManagerRef} />
       </View>
     </SafeAreaView>

package/src/Screens/Dynamic/LivenessDetectionScreen.tsx

@@ -15,6 +15,8 @@ import {
   Platform,
   Vibration,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import NativeCircularProgress from '../../Shared/Components/NativeCircularProgress';
 import { Camera } from 'react-native-vision-camera';
 import type { Face } from '../../Shared/VisionCameraPlugins/FaceDetector';
@@ -86,6 +88,7 @@ const LivenessDetectionScreen = () => {
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const { t } = useTranslation();
   const [isRecording, setIsRecording] = useState(false);
+  const insets = useSafeAreaInsets();
 
   // Track screen view and exit
   useScreenTracking('liveness_detection');
@@ -512,7 +515,7 @@ const LivenessDetectionScreen = () => {
   return (
     <>
       {!hasGuideShown ? (
-        <View style={styles.guide}>
+        <SafeAreaView style={styles.guide}>
           <LottieView
             source={require('../../Shared/Animations/face-scan.json')}
             style={styles.guideAnimation}
@@ -539,15 +542,17 @@ const LivenessDetectionScreen = () => {
               • {t('livenessDetectionScreen.guidePoint4')}
             </Text>
           </View>
-          <StyledButton
-            mode="contained"
-            onPress={() => {
-              setHasGuideShown(true);
-            }}
-          >
-            {t('general.letsGo')}
-          </StyledButton>
-        </View>
+          <View style={{ paddingBottom: insets.bottom }}>
+            <StyledButton
+              mode="contained"
+              onPress={() => {
+                setHasGuideShown(true);
+              }}
+            >
+              {t('general.letsGo')}
+            </StyledButton>
+          </View>
+        </SafeAreaView>
       ) : (
         <>
           <FaceCamera
@@ -558,11 +563,11 @@ const LivenessDetectionScreen = () => {
           <NativeCircularProgress
             style={styles.circularProgress}
             size={PREVIEW_SIZE}
-            width={10}
-            backgroundWidth={5}
+            width={8}
+            backgroundWidth={8}
             fill={state.progressFill}
             tintColor={appContext.branding.primaryColor}
-            backgroundColor="white"
+            backgroundColor="rgba(255, 255, 255, 0.3)"
           />
           {state.brightnessLow && (
             <LottieView
@@ -575,7 +580,12 @@ const LivenessDetectionScreen = () => {
           <Svg style={styles.svgMask}>
             <Mask id="hole-mask">
               <SvgRect width="100%" height="100%" fill="white" />
-              <Circle cx="50%" cy="50%" r="25%" fill="black" />
+              <Circle
+                cx={windowWidth / 2}
+                cy={windowHeight / 2}
+                r={PREVIEW_SIZE / 2}
+                fill="black"
+              />
             </Mask>
 
             <SvgRect
@@ -585,7 +595,7 @@ const LivenessDetectionScreen = () => {
               mask="url(#hole-mask)"
             />
           </Svg>
-          <View style={styles.instructionsContainerTop}>
+          <View style={[styles.instructionsContainerTop, { paddingTop: insets.top }]}>
             <Text style={styles.instructions}>
               {(() => {
                 if (state.brightnessLow) {
@@ -602,7 +612,7 @@ const LivenessDetectionScreen = () => {
               })()}
             </Text>
           </View>
-          <View style={styles.instructionsContainerBottom}>
+          <View style={[styles.instructionsContainerBottom, { paddingBottom: insets.bottom }]}>
             <Text style={styles.action}>
               {state.faceDetected &&
                 !state.faceTooBig &&
@@ -613,7 +623,7 @@ const LivenessDetectionScreen = () => {
           </View>
         </>
       )}
-      <View style={styles.footer}>
+      <View style={[styles.footer, { bottom: insets.bottom }]}>
         <NavigationManager ref={navigationManagerRef} />
       </View>
     </>

package/src/Screens/Static/OTPVerificationScreen.tsx

@@ -0,0 +1,379 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  SafeAreaView,
+  Text,
+  StyleSheet,
+  Alert,
+  View,
+  Image,
+  Dimensions,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useRoute, type RouteProp } from '@react-navigation/native';
+import AppContext from '../../Shared/Contexts/AppContext';
+import httpClient, { BadRequestError, NotFoundError, TooManyRequestsError } from '../../Shared/Libs/http-client';
+import { useTranslation } from 'react-i18next';
+import LanguageSelector from '../../Shared/Components/LanguageSelector';
+import NavigationManager, {
+  type NavigationManagerRef,
+} from '../../Shared/Components/NavigationManager';
+import type { VerificationSession } from '../../Shared/Types/verificationSession';
+import StyledButton from '../../Shared/Components/StyledButton';
+import StyledTextInput from '../../Shared/Components/StyledTextInput';
+import { useTheme } from '../../Shared/Contexts/ThemeContext';
+import LottieView from 'lottie-react-native';
+import {
+  getSimulatedDemoData,
+} from '../../Shared/Libs/demo.utils';
+import {
+  trackError,
+  useScreenTracking,
+} from '../../Shared/Libs/analytics.utils';
+
+type OTPVerificationScreenParams = {
+  sessionId: string;
+};
+
+const OTPVerificationScreen = () => {
+  const route = useRoute<RouteProp<{ params: OTPVerificationScreenParams }, 'params'>>();
+  const sessionId = route.params?.sessionId;
+  const [code, setCode] = useState('');
+  const [isSendAgainEnabled, setIsSendAgainEnabled] = useState(false);
+  const [isCodeGettingVerified, setIsCodeGettingVerified] = useState(false);
+  const appContext = useContext(AppContext);
+  const { t } = useTranslation();
+  const navigationManagerRef = useRef<NavigationManagerRef>(null);
+  const initialized = useRef(false);
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  const primaryColor = theme.colors.primary;
+
+  useScreenTracking('otp_verification');
+
+  // Guard: If sessionId is not provided, show error
+  if (!sessionId) {
+    return (
+      <SafeAreaView style={[styles.container, { backgroundColor: theme.colors.background }]}>
+        <Text style={[styles.errorText, { color: theme.colors.error }]}>
+          {t('general.sessionNotFound')}
+        </Text>
+      </SafeAreaView>
+    );
+  }
+
+  const apiUrl = `${appContext.baseUrl}/api/app/mobile`;
+
+  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) {
+          Alert.alert(
+            t('general.error'),
+            t('verificationSessionCheckScreen.noVerificationSessionFound')
+          );
+        } else if (error instanceof TooManyRequestsError) {
+          return true;
+        } else {
+          trackError(
+            'VERIFICATION_CODE_SEND_FAILED',
+            'Failed to send verification code',
+            'otp_verification',
+            'high',
+            { recoverable: true, userAction: 'send_verification_code' }
+          );
+          Alert.alert(
+            t('general.error'),
+            t('verificationSessionCheckScreen.cannotSendVerificationCode')
+          );
+        }
+      }
+      return false;
+    },
+    [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) {
+          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',
+            'otp_verification',
+            '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
+      );
+
+      return true;
+    },
+    [sendVerificationCode]
+  );
+
+  useEffect(() => {
+    if (!initialized.current && sessionId) {
+      initialized.current = true;
+      sendOTPCode(sessionId);
+    }
+  }, [sessionId, sendOTPCode]);
+
+  return (
+    <SafeAreaView style={styles.safeAreaContainer}>
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+      >
+        <ScrollView
+          style={styles.container}
+          contentContainerStyle={styles.scrollContainer}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.mainContent}>
+            <LanguageSelector />
+            <View style={styles.mainHeader}>
+              {appContext.branding.logoUrl ? (
+                <Image
+                  source={{ uri: appContext.branding.logoUrl }}
+                  style={styles.mainLogo}
+                />
+              ) : (
+                <Image
+                  source={require('../../Shared/Assets/trustchex-logo-black.png')}
+                  style={styles.trustchexLogo}
+                />
+              )}
+            </View>
+            {isCodeGettingVerified ? (
+              <LottieView
+                source={require('../../Shared/Animations/loading.json')}
+                style={styles.loadingAnimation}
+                autoPlay
+                loop={true}
+                resizeMode="cover"
+              />
+            ) : (
+              <>
+                <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(
+                            sessionId,
+                            numericText
+                          );
+                          if (verifiedSession?.identificationId) {
+                            appContext.identificationInfo.identificationId =
+                              verifiedSession?.identificationId;
+                            // Update workflow steps from verified session if available
+                            if (verifiedSession.workflowSteps) {
+                              appContext.workflowSteps = verifiedSession.workflowSteps;
+                            }
+                            setCode('');
+                            navigationManagerRef.current?.navigateToNextStep();
+                          } else {
+                            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(sessionId);
+                  }}
+                >
+                  {t('verificationSessionCheckScreen.sendCodeAgain')}
+                </StyledButton>
+              </>
+            )}
+          </View>
+          {appContext.branding.logoUrl && (
+            <View style={[styles.footer, { bottom: insets.bottom + 15 }]}>
+              <Text style={styles.mainText}>Powered By</Text>
+              <Image
+                source={require('../../Shared/Assets/trustchex-logo-black.png')}
+                style={styles.poweredByLogo}
+              />
+            </View>
+          )}
+          <NavigationManager ref={navigationManagerRef} />
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeAreaContainer: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+  container: {
+    flex: 1,
+  },
+  scrollContainer: {
+    flexGrow: 1,
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  loadingAnimation: {
+    width: '100%',
+    height: '100%',
+    maxHeight: 200,
+  },
+  mainHeader: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mainContent: {
+    flex: 1,
+    display: 'flex',
+    gap: 20,
+    justifyContent: 'center',
+    width: '100%',
+    maxWidth: 400,
+  },
+  mainText: {
+    color: 'black',
+    textAlign: 'center',
+  },
+  mainLogo: {
+    width: Dimensions.get('window').width - 40,
+    height: Dimensions.get('window').width / 4,
+    maxWidth: 300,
+    maxHeight: 300,
+    resizeMode: 'contain',
+  },
+  trustchexLogo: {
+    width: 300,
+    height: 75,
+    resizeMode: 'contain',
+  },
+  poweredByLogo: {
+    width: 120,
+    height: 30,
+    resizeMode: 'contain',
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+  otpCodeTextInput: {
+    fontWeight: '800',
+    fontSize: 28,
+    textAlign: 'center',
+    letterSpacing: 8,
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    padding: 20,
+  },
+});
+
+export default OTPVerificationScreen;