@trustchex/react-native-sdk 1.215.0 → 1.248.0

package/src/Screens/Static/VerificationSessionCheckScreen.tsx

@@ -2,6 +2,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -20,25 +21,28 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import AppContext from '../../Shared/Contexts/AppContext';
 import httpClient, { NotFoundError } from '../../Shared/Libs/http-client';
-import OTPCodeInput from '../../Shared/Components/OTPCodeInput';
 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 { Button, TextInput, useTheme } from 'react-native-paper';
+import { TextInput, useTheme } from 'react-native-paper';
+import StyledButton from '../../Shared/Components/StyledButton';
 import LottieView from 'lottie-react-native';
 import {
   getSimulatedDemoData,
   isDemoSession,
 } from '../../Shared/Libs/demo.utils';
 import { useNavigation } from '@react-navigation/native';
+import {
+  SESSION_CODE_CHARSET_PATTERN,
+  SESSION_CODE_VALIDATION_PATTERN,
+} from '../../Shared/Constants/validation.constants';
 
 const VerificationSessionCheckScreen = () => {
-  const [emailOrPhone, setEmailOrPhone] = useState('');
+  const [sessionCode, setSessionCode] = useState('');
   const [code, setCode] = useState('');
-  const [isEnabled, setIsEnabled] = useState(false);
   const [isCheckingSession, setIsCheckingSession] = useState(false);
   const [isSendAgainEnabled, setIsSendAgainEnabled] = useState(false);
   const [isCodeSent, setIsCodeSent] = useState(false);
@@ -47,27 +51,17 @@ const VerificationSessionCheckScreen = () => {
   const { t } = useTranslation();
   const navigationManagerRef = React.useRef<NavigationManagerRef>(null);
   const navigation = useNavigation();
-  const [apiUrl, setApiUrl] = useState<string>(
-    `${appContext.baseUrl}/api/app/mobile`
-  );
   const theme = useTheme();
   const initialized = useRef(false);
   const insets = useSafeAreaInsets();
 
-  useEffect(() => {
-    if (appContext.baseUrl) {
-      setApiUrl(`${appContext.baseUrl}/api/app/mobile`);
-    }
-  }, [appContext.baseUrl]);
-
-  const validateEmail = useCallback((value: string) => {
-    const re = /\S+@\S+\.\S+/;
-    return re.test(value);
-  }, []);
+  const apiUrl = useMemo(
+    () => `${appContext.baseUrl}/api/app/mobile`,
+    [appContext.baseUrl]
+  );
 
-  const validatePhoneNumber = useCallback((value: string) => {
-    const re = /^(5(\d{9}))/;
-    return re.test(value);
+  const validateSessionCode = useCallback((value: string) => {
+    return SESSION_CODE_VALIDATION_PATTERN.test(value.toUpperCase());
   }, []);
 
   const getSession = useCallback(
@@ -94,29 +88,20 @@ const VerificationSessionCheckScreen = () => {
     [apiUrl, appContext.isDemoSession, t]
   );
 
-  const getSessions = useCallback(
-    async (value: string) => {
+  const getSessionByCode = useCallback(
+    async (inputCode: string) => {
       try {
-        const isEmail = validateEmail(value);
-        const isPhoneNumber = validatePhoneNumber(value);
-        let response: VerificationSession[] = [];
-        if (isEmail) {
-          appContext.isDemoSession = isDemoSession(value);
-          response = await httpClient.get<VerificationSession[]>(
-            `${apiUrl}/verification-sessions?email=${value}`,
-            appContext.isDemoSession
-              ? getSimulatedDemoData<VerificationSession[] | undefined, void>(
-                  'VERIFICATION_SESSIONS'
-                )
-              : undefined
-          );
-        } else if (isPhoneNumber) {
-          response = await httpClient.get<VerificationSession[]>(
-            `${apiUrl}/verification-sessions?phoneNumber=${value}`
-          );
-        }
+        appContext.isDemoSession = isDemoSession(inputCode);
+        const response = await httpClient.get<{ id: string }>(
+          `${apiUrl}/verification-sessions?sessionCode=${inputCode.toUpperCase()}`,
+          appContext.isDemoSession
+            ? getSimulatedDemoData<{ id: string } | undefined, void>(
+                'GET_SESSION_BY_CODE'
+              )
+            : undefined
+        );
 
-        if (!response || response.length === 0) {
+        if (!response || !response.id) {
           throw new NotFoundError();
         }
 
@@ -130,7 +115,7 @@ const VerificationSessionCheckScreen = () => {
         }
       }
     },
-    [apiUrl, appContext, t, validateEmail, validatePhoneNumber]
+    [apiUrl, appContext, t]
   );
 
   const sendVerificationCode = useCallback(
@@ -194,7 +179,7 @@ const VerificationSessionCheckScreen = () => {
     [apiUrl, appContext.isDemoSession, t]
   );
 
-  const sendCode = useCallback(
+  const sendOTPCode = useCallback(
     async (sessionId: string) => {
       if (!sessionId) {
         return false;
@@ -237,7 +222,7 @@ const VerificationSessionCheckScreen = () => {
           }
 
           if (session?.sendOTP) {
-            return sendCode(session.id);
+            return sendOTPCode(session.id);
           } else if (session?.identificationId) {
             appContext.identificationInfo.identificationId =
               session?.identificationId;
@@ -254,7 +239,7 @@ const VerificationSessionCheckScreen = () => {
     appContext,
     appContext.identificationInfo.sessionId,
     getSession,
-    sendCode,
+    sendOTPCode,
     theme.colors,
     theme.colors.primary,
     theme.colors.secondary,
@@ -302,107 +287,138 @@ const VerificationSessionCheckScreen = () => {
                 <Text style={styles.mainText}>
                   {t('verificationSessionCheckScreen.mainText')}
                 </Text>
-                <TextInput
-                  mode="outlined"
-                  autoCapitalize="none"
-                  placeholder={t(
-                    'verificationSessionCheckScreen.inputPlaceholder'
+                <View style={styles.inputContainer}>
+                  <TextInput
+                    mode="outlined"
+                    autoCapitalize="characters"
+                    placeholder=""
+                    outlineColor={theme.colors.primary}
+                    activeOutlineColor={theme.colors.primary}
+                    style={styles.sessionCodeTextInput}
+                    contentStyle={styles.sessionCodeInputWithText}
+                    onChangeText={async (text) => {
+                      const alphanumericText = text
+                        .toUpperCase()
+                        .replace(SESSION_CODE_CHARSET_PATTERN, '');
+                      if (alphanumericText.length <= 8) {
+                        setSessionCode(alphanumericText);
+                        if (
+                          validateSessionCode(alphanumericText) &&
+                          alphanumericText.length === 8
+                        ) {
+                          try {
+                            setIsCheckingSession(true);
+                            const session =
+                              await getSessionByCode(alphanumericText);
+                            if (session?.id) {
+                              appContext.identificationInfo.sessionId =
+                                session.id;
+                            } else {
+                              setSessionCode('');
+                            }
+                          } catch {
+                            setSessionCode('');
+                          } finally {
+                            setTimeout(() => {
+                              setIsCheckingSession(false);
+                            }, 1000);
+                          }
+                        }
+                      }
+                    }}
+                    value={sessionCode.toUpperCase()}
+                    maxLength={8}
+                  />
+                  {!sessionCode && (
+                    <Text style={styles.placeholderText}>
+                      {t('verificationSessionCheckScreen.enterSessionCode')}
+                    </Text>
                   )}
-                  onChangeText={(text) => {
-                    setEmailOrPhone(text);
-                    if (validateEmail(text) || validatePhoneNumber(text)) {
-                      setIsEnabled(true);
-                    } else {
-                      setIsEnabled(false);
-                    }
-                  }}
-                />
-                <Button
+                </View>
+                <View style={styles.horizontalLineContainer}>
+                  <View
+                    style={[
+                      styles.horizontalLine,
+                      { backgroundColor: theme.colors.primary },
+                    ]}
+                  />
+                  <Text style={styles.mainText}>
+                    {t('verificationSessionCheckScreen.or')}
+                  </Text>
+                  <View
+                    style={[
+                      styles.horizontalLine,
+                      { backgroundColor: theme.colors.primary },
+                    ]}
+                  />
+                </View>
+                <StyledButton
                   mode="contained"
-                  disabled={!isEnabled}
-                  onPress={async () => {
-                    try {
-                      setIsCheckingSession(true);
-                      const sessions = await getSessions(emailOrPhone);
-                      if (sessions && sessions.length > 0) {
-                        appContext.identificationInfo.sessionId =
-                          sessions[0].id;
-                      }
-                    } catch {
-                      // Do nothing
-                    } finally {
-                      setTimeout(() => {
-                        setIsCheckingSession(false);
-                        setIsEnabled(false);
-                      }, 1000);
-                    }
+                  onPress={() => {
+                    navigation.navigate('QrCodeScanningScreen' as never);
                   }}
                 >
-                  {t('verificationSessionCheckScreen.continue')}
-                </Button>
-                {!isEnabled && (
-                  <>
-                    <View style={styles.horizontalLineContainer}>
-                      <View style={styles.horizontalLine} />
-                      <Text style={styles.mainText}>
-                        {t('verificationSessionCheckScreen.or')}
-                      </Text>
-                      <View style={styles.horizontalLine} />
-                    </View>
-                    <Button
-                      mode="contained"
-                      onPress={() => {
-                        navigation.navigate('QrCodeScanningScreen' as never);
-                      }}
-                    >
-                      {t('verificationSessionCheckScreen.scanQRCode')}
-                    </Button>
-                  </>
-                )}
+                  {t('verificationSessionCheckScreen.scanQRCode')}
+                </StyledButton>
               </>
             ) : (
               <>
                 <Text style={styles.mainText}>
                   {t('verificationSessionCheckScreen.codeText')}
                 </Text>
-                <OTPCodeInput
-                  value={code}
+                <TextInput
+                  mode="outlined"
+                  autoFocus={true}
+                  placeholder=""
+                  outlineColor={theme.colors.primary}
+                  activeOutlineColor={theme.colors.primary}
+                  style={styles.otpCodeTextInput}
+                  contentStyle={styles.otpCodeInputWithText}
+                  keyboardType="number-pad"
+                  textContentType="oneTimeCode"
+                  autoComplete="sms-otp"
+                  maxLength={6}
                   onChangeText={(text) => {
-                    setCode(text);
-                  }}
-                  codeLength={6}
-                  onCodeFilled={async (value) => {
-                    setIsCodeGettingVerified(true);
-                    const verifiedSession = await getVerifiedSession(
-                      appContext.identificationInfo.sessionId,
-                      value
-                    );
-                    if (verifiedSession?.identificationId) {
-                      appContext.identificationInfo.identificationId =
-                        verifiedSession?.identificationId;
-                      setCode('');
-                      setIsCodeSent(false);
-                      navigationManagerRef.current?.navigateToNextStep();
-                    } else {
-                      appContext.onError?.('Invalid OTP code');
-                      Alert.alert(
-                        t('general.error'),
-                        t('verificationSessionCheckScreen.codeError')
-                      );
-                      setCode('');
-                      setIsCodeGettingVerified(false);
+                    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 {
+                            appContext.onError?.('Invalid OTP code');
+                            Alert.alert(
+                              t('general.error'),
+                              t('verificationSessionCheckScreen.codeError')
+                            );
+                            setCode('');
+                            setIsCodeGettingVerified(false);
+                          }
+                        })();
+                      }
                     }
                   }}
+                  value={code}
                 />
-                <Button
+                <StyledButton
                   mode="contained"
                   disabled={!isSendAgainEnabled}
                   onPress={() => {
-                    sendCode(appContext.identificationInfo.sessionId);
+                    sendOTPCode(appContext.identificationInfo.sessionId);
                   }}
                 >
                   {t('verificationSessionCheckScreen.sendCodeAgain')}
-                </Button>
+                </StyledButton>
               </>
             )}
           </View>
@@ -440,17 +456,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   horizontalLineContainer: {
-    display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     gap: 10,
-    padding: 10,
+    paddingVertical: 10,
   },
   horizontalLine: {
     flex: 1,
-    height: 1,
-    backgroundColor: '#aaa',
+    height: 2,
   },
   loadingAnimation: {
     width: '100%',
@@ -519,6 +533,45 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     position: 'absolute',
   },
+  inputContainer: {
+    position: 'relative',
+    width: '100%',
+  },
+  sessionCodeTextInput: {
+    backgroundColor: 'white',
+  },
+  sessionCodeInputWithText: {
+    textTransform: 'uppercase',
+    fontWeight: '800',
+    fontSize: 28,
+    textAlign: 'center',
+    letterSpacing: 8,
+  },
+  placeholderText: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '100%',
+    lineHeight: 56,
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+    pointerEvents: 'none',
+  },
+  sessionCodeInputPlaceholder: {
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  otpCodeTextInput: {
+    backgroundColor: 'white',
+  },
+  otpCodeInputWithText: {
+    fontWeight: '800',
+    fontSize: 28,
+    textAlign: 'center',
+    letterSpacing: 8,
+  },
 });
 
 export default VerificationSessionCheckScreen;

package/src/Shared/Components/EIDScanner.tsx

@@ -7,7 +7,7 @@ import NativeProgressBar from './NativeProgressBar';
 import type { FieldRecords } from 'mrz';
 import { useTranslation } from 'react-i18next';
 import AppContext from '../Contexts/AppContext';
-import { Button } from 'react-native-paper';
+import StyledButton from './StyledButton';
 import LottieView from 'lottie-react-native';
 import { useKeepAwake } from '../Libs/native-keep-awake.utils';
 import { speakWithDebounce } from '../Libs/tts.utils';
@@ -183,7 +183,7 @@ const EIDScanner = ({
               {t('eidScannerScreen.guideText')}
             </Text>
           </View>
-          <Button
+          <StyledButton
             mode="contained"
             onPress={() => {
               setHasGuideShown(true);
@@ -191,7 +191,7 @@ const EIDScanner = ({
             }}
           >
             {t('eidScannerScreen.startScanning')}
-          </Button>
+          </StyledButton>
         </View>
       ) : (
         <>
@@ -309,7 +309,7 @@ const EIDScanner = ({
               <Text style={styles.mainText}>
                 {t('eidScannerScreen.nfcNotEnabled')}
               </Text>
-              <Button
+              <StyledButton
                 mode="contained"
                 onPress={async () => {
                   await NFCManager.goToNfcSetting();
@@ -317,7 +317,7 @@ const EIDScanner = ({
                 }}
               >
                 {t('eidScannerScreen.enableNFC')}
-              </Button>
+              </StyledButton>
             </View>
           )}
 
@@ -368,7 +368,7 @@ const EIDScanner = ({
 
           {hasNfc && isEnabled && isScanned && (
             <View style={styles.buttonsContainer}>
-              <Button
+              <StyledButton
                 mode="contained"
                 disabled={!documentFaceImage || !documentMRZInfo}
                 onPress={() => {
@@ -387,7 +387,7 @@ const EIDScanner = ({
                 }}
               >
                 {t('eidScannerScreen.approveAndContinue')}
-              </Button>
+              </StyledButton>
             </View>
           )}
         </>

package/src/Shared/Components/FaceCamera.tsx

@@ -28,7 +28,8 @@ import { Worklets, useSharedValue } from 'react-native-worklets-core';
 import { crop } from '../VisionCameraPlugins/Cropper';
 import { isFrameBright } from '../Libs/camera.utils';
 import { useTranslation } from 'react-i18next';
-import { ActivityIndicator, Button } from 'react-native-paper';
+import { ActivityIndicator } from 'react-native-paper';
+import StyledButton from './StyledButton';
 
 export type FaceCameraProps = {
   onFacesDetected: (
@@ -174,14 +175,14 @@ const FaceCamera = ({
         <Text style={styles.permissionText}>
           {t('general.noCameraPermissionGiven')}
         </Text>
-        <Button
+        <StyledButton
           mode="contained"
           onPress={() => {
             Linking.openSettings();
           }}
         >
           {t('general.openSettings')}
-        </Button>
+        </StyledButton>
       </View>
     );
   }
@@ -192,14 +193,14 @@ const FaceCamera = ({
         <Text style={styles.permissionText}>
           {t('general.noMicrophonePermissionGiven')}
         </Text>
-        <Button
+        <StyledButton
           mode="contained"
           onPress={() => {
             Linking.openSettings();
           }}
         >
           {t('general.openSettings')}
-        </Button>
+        </StyledButton>
       </View>
     );
   }

package/src/Shared/Components/IdentityDocumentCamera.tsx

@@ -46,7 +46,8 @@ import {
 import { getAverageBrightness } from '../Libs/camera.utils';
 import { useTranslation } from 'react-i18next';
 import LottieView from 'lottie-react-native';
-import { ActivityIndicator, Button } from 'react-native-paper';
+import { ActivityIndicator } from 'react-native-paper';
+import StyledButton from './StyledButton';
 import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
 import { speakWithDebounce } from '../Libs/tts.utils';
 import AppContext from '../Contexts/AppContext';
@@ -981,14 +982,14 @@ const IdentityDocumentCamera = ({
         <Text style={styles.permissionText}>
           {t('general.noCameraPermissionGiven')}
         </Text>
-        <Button
+        <StyledButton
           mode="contained"
           onPress={() => {
             Linking.openSettings();
           }}
         >
           {t('general.openSettings')}
-        </Button>
+        </StyledButton>
       </View>
     );
   }
@@ -1044,14 +1045,14 @@ const IdentityDocumentCamera = ({
               • {t('identityDocumentCamera.guidePoint3')}
             </TextView>
           </View>
-          <Button
+          <StyledButton
             mode="contained"
             onPress={() => {
               setHasGuideShown(true);
             }}
           >
             {t('general.letsGo')}
-          </Button>
+          </StyledButton>
         </View>
       ) : (
         <>

package/src/Shared/Components/QrCodeScannerCamera.tsx

@@ -22,7 +22,7 @@ import { useIsFocused } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
 import LottieView from 'lottie-react-native';
 import { type Barcode, scanCodes } from '../VisionCameraPlugins/BarcodeScanner';
-import { Button } from 'react-native-paper';
+import StyledButton from './StyledButton';
 
 export interface QrCodeScannerCameraProps {
   onQrCodeScanned: (data: string) => void;
@@ -175,14 +175,14 @@ const QrCodeScannerCamera = ({ onQrCodeScanned }: QrCodeScannerCameraProps) => {
         <Text style={styles.permissionText}>
           {t('general.noCameraPermissionGiven')}
         </Text>
-        <Button
+        <StyledButton
           mode="contained"
           onPress={() => {
             Linking.openSettings();
           }}
         >
           {t('general.openSettings')}
-        </Button>
+        </StyledButton>
       </View>
     );
   }

package/src/Shared/Components/StyledButton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+import type { ButtonProps } from 'react-native-paper';
+
+type StyledButtonProps = ButtonProps;
+
+const StyledButton: React.FC<StyledButtonProps> = ({
+  style,
+  labelStyle,
+  ...props
+}) => {
+  return (
+    <Button
+      {...props}
+      style={[styles.button, style]}
+      labelStyle={[styles.label, labelStyle]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 8,
+    height: 56,
+    justifyContent: 'center',
+    elevation: 2,
+  },
+  label: {
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+});
+
+export default StyledButton;

package/src/Shared/Constants/index.ts

@@ -0,0 +1 @@
+export * from './validation.constants';

package/src/Shared/Constants/validation.constants.ts

@@ -0,0 +1,24 @@
+/**
+ * Validation constants used throughout the SDK.
+ * These constants ensure consistency between frontend and backend validation.
+ */
+
+/**
+ * Character set for session codes.
+ * Excludes ambiguous characters (0, 1, I, O) to prevent confusion.
+ */
+export const SESSION_CODE_CHARSET = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+
+/**
+ * Regular expression pattern for validating session code characters.
+ * Matches only characters from SESSION_CODE_CHARSET.
+ */
+export const SESSION_CODE_CHARSET_PATTERN =
+  /[^ABCDEFGHJKLMNPQRSTUVWXYZ23456789]/g;
+
+/**
+ * Regular expression for validating complete session codes.
+ * Session codes must be exactly 8 characters from SESSION_CODE_CHARSET.
+ */
+export const SESSION_CODE_VALIDATION_PATTERN =
+  /^[ABCDEFGHJKLMNPQRSTUVWXYZ23456789]{8}$/;