@trustchex/react-native-sdk 1.161.0

package/lib/module/Screens/Static/VerificationSessionCheckScreen.js

@@ -0,0 +1,381 @@
+"use strict";
+
+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.js";
+import httpClient, { NotFoundError } from "../../Shared/Libs/http-client.js";
+import OTPCodeInput from "../../Shared/Components/OTPCodeInput.js";
+import { useTranslation } from 'react-i18next';
+import LanguageSelector from "../../Shared/Components/LanguageSelector.js";
+import NavigationManager from "../../Shared/Components/NavigationManager.js";
+import { Button, TextInput, useTheme } from 'react-native-paper';
+import LottieView from 'lottie-react-native';
+import { getSimulatedDemoData, isDemoSession } from "../../Shared/Libs/demo.utils.js";
+import { useNavigation } from '@react-navigation/native';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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(null);
+  const navigation = useNavigation();
+  const [apiUrl, setApiUrl] = useState(`${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 => {
+    const re = /\S+@\S+\.\S+/;
+    return re.test(value);
+  }, []);
+  const validatePhoneNumber = useCallback(value => {
+    const re = /^(5(\d{9}))/;
+    return re.test(value);
+  }, []);
+  const getSession = useCallback(async id => {
+    try {
+      const response = await httpClient.get(`${apiUrl}/verification-sessions/${id}`, appContext.isDemoSession ? getSimulatedDemoData('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 => {
+    try {
+      const isEmail = validateEmail(value);
+      const isPhoneNumber = validatePhoneNumber(value);
+      let response = [];
+      if (isEmail) {
+        appContext.isDemoSession = isDemoSession(value);
+        response = await httpClient.get(`${apiUrl}/verification-sessions?email=${value}`, appContext.isDemoSession ? getSimulatedDemoData('VERIFICATION_SESSIONS') : undefined);
+      } else if (isPhoneNumber) {
+        response = await httpClient.get(`${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 => {
+    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, verificationCode) => {
+    try {
+      const response = await httpClient.post(`${apiUrl}/verification-sessions/${sessionId}`, {
+        code: verificationCode
+      }, appContext.isDemoSession ? getSimulatedDemoData('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 => {
+    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 /*#__PURE__*/_jsx(SafeAreaView, {
+    style: styles.safeAreaContainer,
+    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: styles.keyboardAvoidingView,
+      behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+      keyboardVerticalOffset: Platform.OS === 'ios' ? 0 : 20,
+      children: /*#__PURE__*/_jsxs(ScrollView, {
+        style: styles.container,
+        contentContainerStyle: styles.scrollContainer,
+        keyboardShouldPersistTaps: "handled",
+        showsVerticalScrollIndicator: false,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.mainContent,
+          children: [/*#__PURE__*/_jsx(LanguageSelector, {}), /*#__PURE__*/_jsx(View, {
+            style: styles.mainHeader,
+            children: appContext.branding.logoUrl ? /*#__PURE__*/_jsx(Image, {
+              source: {
+                uri: appContext.branding.logoUrl
+              },
+              style: styles.mainLogo
+            }) : /*#__PURE__*/_jsx(Image, {
+              source: require('../../Shared/Assets/trustchex-logo-black.png'),
+              style: styles.trustchexLogo
+            })
+          }), isCheckingSession || isCodeGettingVerified ? /*#__PURE__*/_jsx(LottieView, {
+            source: require('../../Shared/Animations/loading.json'),
+            style: styles.loadingAnimation,
+            autoPlay: true,
+            loop: true,
+            resizeMode: "cover"
+          }) : !isCodeSent ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.mainText,
+              children: t('verificationSessionCheckScreen.mainText')
+            }), /*#__PURE__*/_jsx(TextInput, {
+              mode: "outlined",
+              autoCapitalize: "none",
+              placeholder: t('verificationSessionCheckScreen.inputPlaceholder'),
+              onChangeText: text => {
+                setEmailOrPhone(text);
+                if (validateEmail(text) || validatePhoneNumber(text)) {
+                  setIsEnabled(true);
+                } else {
+                  setIsEnabled(false);
+                }
+              }
+            }), /*#__PURE__*/_jsx(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);
+                }
+              },
+              children: t('verificationSessionCheckScreen.continue')
+            }), !isEnabled && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.horizontalLineContainer,
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: styles.horizontalLine
+                }), /*#__PURE__*/_jsx(Text, {
+                  style: styles.mainText,
+                  children: t('verificationSessionCheckScreen.or')
+                }), /*#__PURE__*/_jsx(View, {
+                  style: styles.horizontalLine
+                })]
+              }), /*#__PURE__*/_jsx(Button, {
+                mode: "contained",
+                onPress: () => {
+                  navigation.navigate('QrCodeScanningScreen');
+                },
+                children: t('verificationSessionCheckScreen.scanQRCode')
+              })]
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.mainText,
+              children: t('verificationSessionCheckScreen.codeText')
+            }), /*#__PURE__*/_jsx(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);
+                }
+              }
+            }), /*#__PURE__*/_jsx(Button, {
+              mode: "contained",
+              disabled: !isSendAgainEnabled,
+              onPress: () => {
+                sendCode(appContext.identificationInfo.sessionId);
+              },
+              children: t('verificationSessionCheckScreen.sendCodeAgain')
+            })]
+          })]
+        }), appContext.branding.logoUrl && /*#__PURE__*/_jsxs(View, {
+          style: [styles.footer, {
+            bottom: insets.bottom + 15
+          }],
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.mainText,
+            children: "Powered By"
+          }), /*#__PURE__*/_jsx(Image, {
+            source: require('../../Shared/Assets/trustchex-logo-black.png'),
+            style: styles.poweredByLogo
+          })]
+        }), /*#__PURE__*/_jsx(NavigationManager, {
+          ref: navigationManagerRef
+        })]
+      })
+    })
+  });
+};
+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;