@trustchex/react-native-sdk 1.161.0

package/src/Screens/Static/VerificationSessionCheckScreen.tsx

@@ -0,0 +1,524 @@
+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 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 LottieView from 'lottie-react-native';
+import {
+  getSimulatedDemoData,
+  isDemoSession,
+} from '../../Shared/Libs/demo.utils';
+import { useNavigation } from '@react-navigation/native';
+
+const VerificationSessionCheckScreen = () => {
+  const [emailOrPhone, setEmailOrPhone] = 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);
+  const [isCodeGettingVerified, setIsCodeGettingVerified] = useState(false);
+  const appContext = useContext(AppContext);
+  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 validatePhoneNumber = useCallback((value: string) => {
+    const re = /^(5(\d{9}))/;
+    return re.test(value);
+  }, []);
+
+  const getSession = useCallback(
+    async (id: string) => {
+      try {
+        const response = await httpClient.get<VerificationSession>(
+          `${apiUrl}/verification-sessions/${id}`,
+          appContext.isDemoSession
+            ? getSimulatedDemoData<VerificationSession | undefined, void>(
+                'GET_SESSION'
+              )
+            : undefined
+        );
+        return response;
+      } catch (error) {
+        if (error instanceof NotFoundError) {
+          Alert.alert(
+            t('general.error'),
+            t('verificationSessionCheckScreen.noVerificationSessionFound')
+          );
+        }
+      }
+    },
+    [apiUrl, appContext.isDemoSession, t]
+  );
+
+  const getSessions = useCallback(
+    async (value: 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}`
+          );
+        }
+
+        if (!response || response.length === 0) {
+          throw new NotFoundError();
+        }
+
+        return response;
+      } catch (error) {
+        if (error instanceof NotFoundError) {
+          Alert.alert(
+            t('general.error'),
+            t('verificationSessionCheckScreen.noVerificationSessionFound')
+          );
+        }
+      }
+    },
+    [apiUrl, appContext, t, validateEmail, validatePhoneNumber]
+  );
+
+  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 {
+          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')
+          );
+        }
+      }
+    },
+    [apiUrl, appContext.isDemoSession, t]
+  );
+
+  const sendCode = 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]
+  );
+
+  useEffect(() => {
+    if (!initialized.current && appContext.identificationInfo.sessionId) {
+      initialized.current = true;
+      setIsCheckingSession(true);
+      getSession(appContext.identificationInfo.sessionId)
+        .then((session) => {
+          appContext.workflowSteps = session?.workflowSteps;
+          if (session?.branding) {
+            appContext.branding = appContext.branding || session.branding;
+            theme.colors.primary = appContext.branding.primaryColor;
+            theme.colors.secondary = appContext.branding.secondaryColor;
+            theme.colors.tertiary = appContext.branding.tertiaryColor;
+          }
+
+          if (session?.sendOTP) {
+            return sendCode(session.id);
+          } else if (session?.identificationId) {
+            appContext.identificationInfo.identificationId =
+              session?.identificationId;
+            navigationManagerRef.current?.navigateToNextStep();
+          }
+        })
+        .finally(() => {
+          setTimeout(() => {
+            setIsCheckingSession(false);
+          }, 1000);
+        });
+    }
+  }, [
+    appContext,
+    appContext.identificationInfo.sessionId,
+    getSession,
+    sendCode,
+    theme.colors,
+    theme.colors.primary,
+    theme.colors.secondary,
+    theme.colors.tertiary,
+  ]);
+
+  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>
+            {isCheckingSession || isCodeGettingVerified ? (
+              <LottieView
+                source={require('../../Shared/Animations/loading.json')}
+                style={styles.loadingAnimation}
+                autoPlay
+                loop={true}
+                resizeMode="cover"
+              />
+            ) : !isCodeSent ? (
+              <>
+                <Text style={styles.mainText}>
+                  {t('verificationSessionCheckScreen.mainText')}
+                </Text>
+                <TextInput
+                  mode="outlined"
+                  autoCapitalize="none"
+                  placeholder={t(
+                    'verificationSessionCheckScreen.inputPlaceholder'
+                  )}
+                  onChangeText={(text) => {
+                    setEmailOrPhone(text);
+                    if (validateEmail(text) || validatePhoneNumber(text)) {
+                      setIsEnabled(true);
+                    } else {
+                      setIsEnabled(false);
+                    }
+                  }}
+                />
+                <Button
+                  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);
+                    }
+                  }}
+                >
+                  {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>
+                  </>
+                )}
+              </>
+            ) : (
+              <>
+                <Text style={styles.mainText}>
+                  {t('verificationSessionCheckScreen.codeText')}
+                </Text>
+                <OTPCodeInput
+                  value={code}
+                  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);
+                    }
+                  }}
+                />
+                <Button
+                  mode="contained"
+                  disabled={!isSendAgainEnabled}
+                  onPress={() => {
+                    sendCode(appContext.identificationInfo.sessionId);
+                  }}
+                >
+                  {t('verificationSessionCheckScreen.sendCodeAgain')}
+                </Button>
+              </>
+            )}
+          </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',
+  },
+  horizontalLineContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    padding: 10,
+  },
+  horizontalLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: '#aaa',
+  },
+  loadingAnimation: {
+    width: '100%',
+    height: '100%',
+    maxHeight: 200,
+  },
+  mainHeader: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mainTitle: {
+    fontSize: 32,
+    color: 'black',
+    fontWeight: 'bold',
+    textAlign: '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',
+  },
+  textInput: {
+    borderWidth: 2,
+    color: 'black',
+    borderRadius: 8,
+    fontWeight: 'bold',
+    padding: 12,
+    borderColor: 'gray',
+  },
+  languageSelector: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  footer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+});
+
+export default VerificationSessionCheckScreen;