TMA 207 : Updated the Onboarding Process (#42)

1 files changed, 58 insertions, 102 deletions

diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index 720fcaed..9e9cabf5 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -10,16 +10,23 @@ import {
   Platform,
   TouchableOpacity,
   KeyboardAvoidingView,
+  ActivityIndicator,
 } from 'react-native';
 
 import {OnboardingStackParams} from '../../routes';
+
 import {
   ArrowButton,
   RegistrationWizard,
   TaggInput,
   Background,
 } from '../../components';
-import {nameRegex, emailRegex} from '../../constants';
+
+import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
+
+import {SEND_OTP_ENDPOINT} from '../../constants';
+
+import {emailRegex} from '../../constants';
 
 type RegistrationScreenOneRouteProp = RouteProp<
   OnboardingStackParams,
@@ -34,67 +41,21 @@ interface RegistrationOneProps {
   navigation: RegistrationScreenOneNavigationProp;
 }
 /**
- * Registration screen 1 for First Name, Last Name, and email
+ * Registration screen 1 for Email
  * @param navigation react-navigation navigation object
  */
 const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
-  // refs for changing focus
-  const lnameRef = useRef();
+  // // refs for changing focus
   const emailRef = useRef();
-  /**
-   * Handles focus change to the next input field.
-   * @param field key for field to move focus onto
-   */
-  const handleFocusChange = (field: string): void => {
-    switch (field) {
-      case 'lname':
-        const lnameField: any = lnameRef.current;
-        lnameField.focus();
-        break;
-      case 'email':
-        const emailField: any = emailRef.current;
-        emailField.focus();
-        break;
-      default:
-        return;
-    }
-  };
 
   // registration form state
   const [form, setForm] = useState({
-    fname: '',
-    lname: '',
     email: '',
-    isValidFname: false,
-    isValidLname: false,
     isValidEmail: false,
     attemptedSubmit: false,
   });
 
   /*
-   * Handles changes to the first name field value and verifies the input by updating state and running a validation function.
-   */
-  const handleFnameUpdate = (fname: string) => {
-    let isValidFname: boolean = nameRegex.test(fname);
-    setForm({
-      ...form,
-      fname,
-      isValidFname,
-    });
-  };
-  /*
-   * Handles changes to the last name field value and verifies the input by updating state and running a validation function.
-   */
-  const handleLnameUpdate = (lname: string) => {
-    let isValidLname: boolean = nameRegex.test(lname);
-    setForm({
-      ...form,
-      lname,
-      isValidLname,
-    });
-  };
-
-  /*
    * Handles changes to the email field value and verifies the input by updating state and running a validation function.
    */
   const handleEmailUpdate = (email: string) => {
@@ -107,9 +68,9 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
   };
 
   /**
-   * Handles a click on the "next" arrow button by navigating to RegistrationTwo if First Name and Last Name are filled
+   * Handles a click on the "next" arrow button by navigating to Verification if email is filled correctly
    */
-  const goToRegisterTwo = async () => {
+  const goToVerification = async () => {
     if (!form.attemptedSubmit) {
       setForm({
         ...form,
@@ -117,12 +78,30 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
       });
     }
     try {
-      if (form.isValidFname && form.isValidLname && form.isValidEmail) {
-        navigation.navigate('RegistrationTwo', {
-          firstName: form.fname,
-          lastName: form.lname,
-          email: form.email,
-        });
+      if (form.isValidEmail) {
+        let sendOtpResponse = await trackPromise(
+          fetch(SEND_OTP_ENDPOINT, {
+            method: 'POST',
+            body: JSON.stringify({
+              email: form.email,
+            }),
+          }),
+        );
+        let otpStatusCode = sendOtpResponse.status;
+        if (otpStatusCode === 200) {
+          navigation.navigate('Verification', {
+            email: form.email,
+          });
+        } else if (otpStatusCode === 409) {
+          Alert.alert(
+            'This email is already registered with us, please use another email.',
+          );
+        } else {
+          Alert.alert(
+            "Looks like Our email servers might be down  😓'",
+            "Try again in a couple minutes. We're sorry for the inconvenience.",
+          );
+        }
       } else {
         setForm({...form, attemptedSubmit: false});
         setTimeout(() => setForm({...form, attemptedSubmit: true}));
@@ -133,7 +112,7 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
         "Try again in a couple minutes. We're sorry for the inconvenience.",
       );
       return {
-        name: 'Registration error',
+        name: 'Send OTP error',
         description: error,
       };
     }
@@ -145,24 +124,28 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
         direction="backward"
         onPress={() => navigation.navigate('Login')}
       />
-      <TouchableOpacity onPress={goToRegisterTwo}>
+      <TouchableOpacity onPress={goToVerification}>
         <ArrowButton
           direction="forward"
-          disabled={
-            !(form.isValidFname && form.isValidLname && form.isValidEmail)
-          }
-          onPress={() =>
-            navigation.navigate('RegistrationTwo', {
-              firstName: form.fname,
-              lastName: form.lname,
-              email: form.email,
-            })
-          }
+          disabled={!form.isValidEmail}
+          onPress={goToVerification}
         />
       </TouchableOpacity>
     </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" />
@@ -171,40 +154,9 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
         <View>
-          <Text style={styles.formHeader}>SIGN UP</Text>
+          <Text style={styles.formHeader}>ENTER EMAIL</Text>
         </View>
         <TaggInput
-          accessibilityHint="Enter your first name."
-          accessibilityLabel="First name input field."
-          placeholder="First Name"
-          autoCompleteType="name"
-          textContentType="name"
-          returnKeyType="next"
-          onChangeText={handleFnameUpdate}
-          onSubmitEditing={() => handleFocusChange('lname')}
-          blurOnSubmit={false}
-          valid={form.isValidFname}
-          invalidWarning="Please enter a valid first name."
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
-          accessibilityHint="Enter your last name."
-          accessibilityLabel="Last name input field."
-          placeholder="Last Name"
-          autoCompleteType="name"
-          textContentType="name"
-          returnKeyType="next"
-          onChangeText={handleLnameUpdate}
-          onSubmitEditing={() => handleFocusChange('email')}
-          blurOnSubmit={false}
-          ref={lnameRef}
-          valid={form.isValidLname}
-          invalidWarning="Please enter a valid last name."
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
           accessibilityHint="Enter your email."
           accessibilityLabel="Email input field."
           placeholder="Email"
@@ -220,8 +172,9 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
           invalidWarning={'Please enter a valid email address.'}
           attemptedSubmit={form.attemptedSubmit}
           width={280}
-          onSubmitEditing={goToRegisterTwo}
+          onSubmitEditing={goToVerification}
         />
+        <LoadingIndicator />
       </KeyboardAvoidingView>
       <Footer />
     </Background>
@@ -250,6 +203,9 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     marginBottom: '16%',
   },
+  load: {
+    top: '5%',
+  },
   footer: {
     width: '100%',
     flexDirection: 'row',