aboutsummaryrefslogtreecommitdiff
path: root/src/screens
diff options
context:
space:
mode:
Diffstat (limited to 'src/screens')
-rw-r--r--src/screens/onboarding/Checkpoint.tsx2
-rw-r--r--src/screens/onboarding/InvitationCodeVerification.tsx210
-rw-r--r--src/screens/onboarding/Login.tsx2
-rw-r--r--src/screens/onboarding/RegistrationOne.tsx18
-rw-r--r--src/screens/onboarding/RegistrationThree.tsx18
-rw-r--r--src/screens/onboarding/RegistrationTwo.tsx4
-rw-r--r--src/screens/onboarding/Verification.tsx24
-rw-r--r--src/screens/onboarding/index.ts1
8 files changed, 225 insertions, 54 deletions
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 83f330f1..8ef7f307 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -50,7 +50,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
return (
<Background style={styles.container}>
<StatusBar barStyle="light-content" />
- <RegistrationWizard style={styles.wizard} step="five" />
+ <RegistrationWizard style={styles.wizard} step="six" />
<View style={styles.textContainer}>
<Text style={styles.header}>You are registered!</Text>
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
new file mode 100644
index 00000000..ae1c282f
--- /dev/null
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -0,0 +1,210 @@
+import React from 'react';
+import {OnboardingStackParams} from '../../routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+
+import {
+ Background,
+ RegistrationWizard,
+ SubmitButton,
+ ArrowButton,
+ LoadingIndicator,
+} from '../../components';
+
+//TODO :
+//import {VERIFY_INVITATION_CODE_ENDPOUNT} from "../../constants"
+
+import {Text} from 'react-native-animatable';
+import {
+ CodeField,
+ Cursor,
+ useBlurOnFulfill,
+ useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {
+ StyleSheet,
+ View,
+ KeyboardAvoidingView,
+ Alert,
+ Platform,
+} from 'react-native';
+import {trackPromise} from 'react-promise-tracker';
+
+type InvitationCodeVerificationScreenNavigationProp = StackNavigationProp<
+ OnboardingStackParams,
+ 'InvitationCodeVerification'
+>;
+
+interface InvitationCodeVerificationProps {
+ navigation: InvitationCodeVerificationScreenNavigationProp;
+}
+
+/**
+ * InvitationCodeVerification screen to verify that the new user has been Invited
+ * @param navigation react-navigation navigation object
+ */
+
+const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
+ navigation,
+}) => {
+ const [value, setValue] = React.useState('');
+ const ref = useBlurOnFulfill({value, cellCount: 6});
+ const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
+ value,
+ setValue,
+ });
+
+ const handleInvitationCodeVerification = async () => {
+ //TODO : Verify the code
+ //The code would look somewhat like below
+ // try {
+ // let verifyInviteCodeResponse = await fetch(VERIFY_INVITATION_CODE_ENDPOUNT, {
+ // method: 'POST',
+ // body: JSON.stringify({
+ // otp: value,
+ // }),
+ // });
+
+ // if (verifyInviteCodeResponse.status == 200) {
+ // navigation.navigate('RegistrationOne');
+ // } else {
+ // Alert.alert(
+ // 'Invalid invitation code 🤔',
+ // );
+ // }
+ // } catch (error) {
+ // Alert.alert(
+ // 'Verifiation failed 😓',
+ // 'Please double-check your network connection and retry.',
+ // );
+ // return {
+ // name: 'Verification error',
+ // description: error,
+ // };
+ // }
+
+ navigation.navigate('RegistrationOne');
+ };
+
+ const Footer = () => (
+ <View style={styles.footer}>
+ <ArrowButton
+ direction="backward"
+ onPress={() => navigation.navigate('Login')}
+ />
+ </View>
+ );
+
+ return (
+ <Background centered style={styles.container}>
+ <RegistrationWizard style={styles.wizard} step="one" />
+ <KeyboardAvoidingView behavior="padding" style={styles.form}>
+ <Text style={styles.formHeader}>Enter 6 digit code</Text>
+ <Text style={styles.description}>
+ Please enter the invitation code provided to you by us / your friend.
+ </Text>
+ <CodeField
+ ref={ref}
+ {...valueProps}
+ value={value}
+ onChangeText={setValue}
+ cellCount={6}
+ rootStyle={styles.codeFieldRoot}
+ keyboardType="number-pad"
+ textContentType="oneTimeCode"
+ renderCell={({index, symbol, isFocused}) => (
+ <View
+ onLayout={getCellOnLayoutHandler(index)}
+ key={index}
+ style={[styles.cellRoot, isFocused && styles.focusCell]}>
+ <Text style={styles.cellText}>
+ {symbol || (isFocused ? <Cursor /> : null)}
+ </Text>
+ </View>
+ )}
+ />
+ <SubmitButton
+ text="Verify"
+ color="#fff"
+ style={styles.button}
+ accessibilityLabel="Verify"
+ accessibilityHint="Select this after entering your invitation code"
+ onPress={handleInvitationCodeVerification}
+ />
+ <LoadingIndicator />
+ </KeyboardAvoidingView>
+ <Footer />
+ </Background>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ wizard: {
+ marginTop: '3.5%',
+ flex: 1,
+ justifyContent: 'center',
+ },
+ form: {
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ flex: 3,
+ },
+ formHeader: {
+ color: '#fff',
+ fontSize: 20,
+ fontWeight: 'bold',
+ alignSelf: 'flex-start',
+ marginBottom: '6%',
+ marginHorizontal: '10%',
+ },
+ description: {
+ color: '#fff',
+ fontWeight: '600',
+ fontSize: 17,
+ marginHorizontal: '10%',
+ },
+ codeFieldRoot: {
+ width: 280,
+ marginHorizontal: 'auto',
+ marginVertical: '15%',
+ },
+ cellRoot: {
+ width: 40,
+ height: 60,
+ justifyContent: 'center',
+ alignItems: 'center',
+ borderBottomColor: '#fff',
+ borderBottomWidth: 1,
+ },
+ cellText: {
+ color: '#fff',
+ fontSize: 48,
+ textAlign: 'center',
+ },
+ focusCell: {
+ borderBottomColor: '#78a0ef',
+ borderBottomWidth: 2,
+ },
+ button: {
+ marginVertical: '5%',
+ },
+ footer: {
+ width: '100%',
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ ...Platform.select({
+ ios: {
+ bottom: '20%',
+ },
+ android: {
+ bottom: '10%',
+ },
+ }),
+ },
+});
+
+export default InvitationCodeVerification;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index c0dc14b7..c9dcba41 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -173,7 +173,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
* Handles tap on "Get Started" text by resetting fields & navigating to the registration page.
*/
const goToRegistration = () => {
- navigation.navigate('RegistrationOne');
+ navigation.navigate('InvitationCodeVerification');
setForm({...form, attemptedSubmit: false});
};
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index 9e9cabf5..12643d69 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -10,7 +10,6 @@ import {
Platform,
TouchableOpacity,
KeyboardAvoidingView,
- ActivityIndicator,
} from 'react-native';
import {OnboardingStackParams} from '../../routes';
@@ -20,9 +19,10 @@ import {
RegistrationWizard,
TaggInput,
Background,
+ LoadingIndicator,
} from '../../components';
-import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
+import {trackPromise} from 'react-promise-tracker';
import {SEND_OTP_ENDPOINT} from '../../constants';
@@ -134,22 +134,10 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
</View>
);
- /**
- * An activity indicator to indicate that the app is working during the send_otp request.
- */
- const LoadingIndicator = () => {
- const {promiseInProgress} = usePromiseTracker();
- return promiseInProgress ? (
- <ActivityIndicator style={styles.load} size="large" color="#fff" />
- ) : (
- <></>
- );
- };
-
return (
<Background style={styles.container}>
<StatusBar barStyle="light-content" />
- <RegistrationWizard style={styles.wizard} step="one" />
+ <RegistrationWizard style={styles.wizard} step="two" />
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>
diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/RegistrationThree.tsx
index 5b8f52b3..babb0334 100644
--- a/src/screens/onboarding/RegistrationThree.tsx
+++ b/src/screens/onboarding/RegistrationThree.tsx
@@ -17,7 +17,6 @@ import {
KeyboardAvoidingView,
ActivityIndicator,
} from 'react-native';
-import {usePromiseTracker} from 'react-promise-tracker';
import {OnboardingStackParams} from '../../routes';
import {
@@ -26,6 +25,7 @@ import {
TaggInput,
TermsConditions,
Background,
+ LoadingIndicator,
} from '../../components';
import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants';
import AsyncStorage from '@react-native-community/async-storage';
@@ -214,7 +214,7 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
<View style={styles.footer}>
<ArrowButton
direction="backward"
- onPress={() => navigation.navigate('RegistrationOne')}
+ onPress={() => navigation.navigate('RegistrationTwo', {email: email})}
/>
<TouchableOpacity onPress={handleRegister}>
<ArrowButton
@@ -233,22 +233,10 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
</View>
);
- /**
- * An activity indicator to indicate that the app is working during the send_otp request.
- */
- const LoadingIndicator = () => {
- const {promiseInProgress} = usePromiseTracker();
- return promiseInProgress ? (
- <ActivityIndicator style={styles.load} size="large" color="#fff" />
- ) : (
- <></>
- );
- };
-
return (
<Background style={styles.container}>
<StatusBar barStyle="light-content" />
- <RegistrationWizard style={styles.wizard} step="four" />
+ <RegistrationWizard style={styles.wizard} step="five" />
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index d28fb197..515059f9 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -134,7 +134,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
<View style={styles.footer}>
<ArrowButton
direction="backward"
- onPress={() => navigation.navigate('Login')}
+ onPress={() => navigation.navigate('RegistrationOne')}
/>
<TouchableOpacity onPress={goToRegisterThree}>
<ArrowButton
@@ -149,7 +149,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
return (
<Background style={styles.container}>
<StatusBar barStyle="light-content" />
- <RegistrationWizard style={styles.wizard} step="three" />
+ <RegistrationWizard style={styles.wizard} step="four" />
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 89f79ac8..91e6b181 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -8,6 +8,7 @@ import {
RegistrationWizard,
SubmitButton,
ArrowButton,
+ LoadingIndicator,
} from '../../components';
import {VERIFY_OTP_ENDPOINT, SEND_OTP_ENDPOINT} from '../../constants';
import {Text} from 'react-native-animatable';
@@ -23,10 +24,9 @@ import {
TouchableOpacity,
KeyboardAvoidingView,
Alert,
- ActivityIndicator,
Platform,
} from 'react-native';
-import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
+import {trackPromise} from 'react-promise-tracker';
type VerificationScreenRouteProp = RouteProp<
OnboardingStackParams,
@@ -64,7 +64,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
}),
});
let statusCode = verifyOtpResponse.status;
- if (statusCode == 200) {
+ if (statusCode === 200) {
navigation.navigate('RegistrationTwo', {
email: email,
});
@@ -114,22 +114,6 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
}
};
- /**
- * An activity indicator to indicate that the app is working during the verify_otp request.
- */
- const LoadingIndicator = () => {
- const {promiseInProgress} = usePromiseTracker();
- return promiseInProgress ? (
- <ActivityIndicator
- style={styles.loadingIndicator}
- size="large"
- color="#fff"
- />
- ) : (
- <></>
- );
- };
-
const Footer = () => (
<View style={styles.footer}>
<ArrowButton
@@ -141,7 +125,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
return (
<Background centered style={styles.container}>
- <RegistrationWizard style={styles.wizard} step="two" />
+ <RegistrationWizard style={styles.wizard} step="three" />
<KeyboardAvoidingView behavior="padding" style={styles.form}>
<Text style={styles.formHeader}>Enter 6 digit code</Text>
<Text style={styles.description}>
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 041864b7..27a33d32 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -6,3 +6,4 @@ export {default as Verification} from './Verification';
export {default as Checkpoint} from './Checkpoint';
export {default as ProfileOnboarding} from './ProfileOnboarding';
export {default as Splash} from './Splash';
+export {default as InvitationCodeVerification} from './InvitationCodeVerification';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-03 05:25:08 +0000