renamed onboarding screens, fixed various minor issue, basic info onboarding working

11 files changed, 213 insertions, 225 deletions

diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index e8f2725d..56d54d39 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -45,6 +45,7 @@ export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please r
 export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app';
 export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again";
 export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again";
+export const ERROR_T_AND_C_NOT_ACCEPTED = 'You must first agree to the terms and conditions.';
 export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins';
 export const ERROR_UNABLE_CONNECT_CHAT = 'Unable to connect chat';
 export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile. Please check username and try again';
@@ -57,17 +58,17 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi
 export const ERROR_UPLOAD_SP_PHOTO = 'Unable to update suggested people photo. Please retry!';
 export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
 export const FIRST_MESSAGE = 'How about sending your first message to your friend';
-export const START_CHATTING = 'Let’s Start Chatting!';
 export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
 export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
 export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
 export const NO_RESULTS_FOUND = 'No Results Found!';
 export const PRIVATE_ACCOUNT = 'This account is private';
+export const START_CHATTING = 'Let’s Start Chatting!';
 export const SUCCESS_BADGES_UPDATE = 'Badges updated successfully!'
 export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
-export const SUCCESS_LAST_CONTACT_INVITE = 'Done! That was your last invite, hope you used it wisely!';
 export const SUCCESS_INVITATION_CODE = 'Welcome to Tagg!';
 export const SUCCESS_INVITE_CONTACT = (str: string) => `Success! You now have ${str} invites left!`;
+export const SUCCESS_LAST_CONTACT_INVITE = 'Done! That was your last invite, hope you used it wisely!';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
 export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index 761efc91..7a74988b 100644
--- a/src/routes/onboarding/OnboardingStackNavigator.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -1,12 +1,10 @@
 import {createStackNavigator} from '@react-navigation/stack';
 
 export type OnboardingStackParams = {
-  RevampedOnboarding: {isPhoneVerified: boolean};
   InvitationCodeVerification: {userId: string; username: string};
   Login: undefined;
-  OnboardingStepOne: undefined;
-  OnboardingStepThree: {userId: string; username: string};
-  OnboardingStepTwo: {firstName: string};
+  BasicInfoOnboarding: {isPhoneVerified: boolean};
+  ProfileInfoOnboarding: {userId: string; username: string};
   PasswordReset: {value: string};
   PasswordResetRequest: undefined;
   PasswordVerification: {id: string};
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index 458697ad..50fd52d6 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -1,18 +1,16 @@
 import {StackCardInterpolationProps} from '@react-navigation/stack';
 import React from 'react';
 import {
+  BasicInfoOnboarding,
   InvitationCodeVerification,
   Login,
-  OnboardingStepThree,
-  OnboardingStepTwo,
   PasswordReset,
   PasswordResetRequest,
   PasswordVerification,
   PhoneVerification,
+  ProfileInfoOnboarding,
   WelcomeScreen,
-  RevampedOnboarding
 } from '../../screens';
-import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne';
 import {modalStyle} from '../main';
 import {OnboardingStack} from './OnboardingStackNavigator';
 
@@ -44,7 +42,10 @@ const Onboarding: React.FC = () => {
         }}
       />
       <OnboardingStack.Screen name="WelcomeScreen" component={WelcomeScreen} />
-      <OnboardingStack.Screen name="RevampedOnboarding" component={RevampedOnboarding} />
+      <OnboardingStack.Screen
+        name="BasicInfoOnboarding"
+        component={BasicInfoOnboarding}
+      />
       <OnboardingStack.Screen
         name="PasswordReset"
         component={PasswordReset}
@@ -61,22 +62,13 @@ const Onboarding: React.FC = () => {
         }}
       />
       <OnboardingStack.Screen
-        name="OnboardingStepOne"
-        component={OnboardingStepOne}
-      />
-      <OnboardingStack.Screen
         name="PhoneVerification"
         component={PhoneVerification}
         options={{...modalStyle}}
       />
       <OnboardingStack.Screen
-        name="OnboardingStepTwo"
-        component={OnboardingStepTwo}
-        options={{...modalStyle}}
-      />
-      <OnboardingStack.Screen
-        name="OnboardingStepThree"
-        component={OnboardingStepThree}
+        name="ProfileInfoOnboarding"
+        component={ProfileInfoOnboarding}
         options={{...modalStyle}}
       />
       <OnboardingStack.Screen
diff --git a/src/screens/onboarding/RevampedOnboarding.tsx b/src/screens/onboarding/BasicInfoOnboarding.tsx
index 782df6a1..25a5a6f8 100644
--- a/src/screens/onboarding/RevampedOnboarding.tsx
+++ b/src/screens/onboarding/BasicInfoOnboarding.tsx
@@ -1,7 +1,8 @@
-import { useNavigation } from '@react-navigation/core';
-import { RouteProp } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
-import React, { useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
+import {useNavigation} from '@react-navigation/core';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useState} from 'react';
 import {
   Alert,
   KeyboardAvoidingView,
@@ -30,34 +31,34 @@ import {
 import {
   ERROR_NEXT_PAGE,
   ERROR_PHONE_IN_USE,
+  ERROR_REGISTRATION,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
   ERROR_TWILIO_SERVER_ERROR,
+  ERROR_T_AND_C_NOT_ACCEPTED,
 } from '../../constants/strings';
-import { OnboardingStackParams } from '../../routes';
-import { sendOtpStatusCode } from '../../services';
-import { BackgroundGradientType } from '../../types';
-import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../utils';
+import {OnboardingStackParams} from '../../routes';
+import {sendOtpStatusCode, sendRegister} from '../../services';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
-type RevampedOnboardingRouteProp = RouteProp<
+type BasicInfoOnboardingRouteProp = RouteProp<
   OnboardingStackParams,
-  'RevampedOnboarding'
+  'BasicInfoOnboarding'
 >;
-type RevampedOnboardingNavigationProp = StackNavigationProp<
+type BasicInfoOnboardingNavigationProp = StackNavigationProp<
   OnboardingStackParams,
-  'RevampedOnboarding'
+  'BasicInfoOnboarding'
 >;
-interface RevampedOnboardingProps {
-  route: RevampedOnboardingRouteProp;
-  navigation: RevampedOnboardingNavigationProp;
+interface BasicInfoOnboardingProps {
+  route: BasicInfoOnboardingRouteProp;
+  navigation: BasicInfoOnboardingNavigationProp;
 }
 
-const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
-  const { isPhoneVerified } = route.params;
+const BasicInfoOnboarding: React.FC<BasicInfoOnboardingProps> = ({route}) => {
+  const {isPhoneVerified} = route.params;
   const navigation = useNavigation();
-  type renderStatusType = 'firstName' | 'lastName' | 'username' | 'email';
   const [attemptedSubmit, setAttemptedSubmit] = useState(false);
-  // TODO: maybe use this?
   const [valid, setValid] = useState(false);
-  const [paswordsMatch, setPassMatch] = useState(false)
   const [currentStep, setCurrentStep] = useState(0);
   const [tcAccepted, setTCAccepted] = useState(false);
   const [passVisibility, setPassVisibility] = useState(false);
@@ -68,15 +69,6 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
     phone: '',
     email: '',
     password: '',
-    confirm: '',
-    // isValidFname: false,
-    // isValidLname: false,
-    // isValidPhone: false,
-    // isValidUser: false,
-    // isValidEmail: false,
-    // isValidPassword: false,
-    // passwordsMatch: false,
-    token: '',
   });
 
   const goNext = async () => {
@@ -85,12 +77,12 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
     }
     try {
       if (valid) {
-        const { phone } = form;
+        const {phone} = form;
         const code = await sendOtpStatusCode(phone);
         if (code) {
           switch (code) {
             case 200:
-              const { fname, lname } = form;
+              const {fname, lname} = form;
               navigation.navigate('PhoneVerification', {
                 firstName: fname,
                 lastName: lname,
@@ -128,21 +120,21 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
           ...form,
           fname: name,
         });
-        setValid(isValidName)
+        setValid(isValidName);
         break;
       case 1:
         setForm({
           ...form,
           lname: name,
         });
-        setValid(isValidName)
+        setValid(isValidName);
         break;
       case 2:
         setForm({
           ...form,
           username: name,
         });
-        setValid(usernameRegex.test(name))
+        setValid(usernameRegex.test(name));
         break;
     }
   };
@@ -152,7 +144,7 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
       ...form,
       phone,
     });
-    setValid(phoneRegex.test(phone))
+    setValid(phoneRegex.test(phone));
   };
   const handleEmailUpdate = (email: string) => {
     email = email.trim();
@@ -160,7 +152,7 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
       ...form,
       email,
     });
-    setValid(emailRegex.test(email))
+    setValid(emailRegex.test(email));
   };
   const handlePasswordUpdate = (password: string) => {
     setForm({
@@ -168,118 +160,130 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
       password,
     });
     setValid(passwordRegex.test(password));
-    setPassMatch(form.password === form.confirm)
-  };
-  const handleConfirmUpdate = (confirm: string) => {
-    let passwordsMatch: boolean = form.password === confirm;
-    setForm({
-      ...form,
-      confirm,
-    });
-    setPassMatch(form.password === form.confirm)
-  };
-  const handleTcUpdate = (tcAccepted: boolean) => {
-    setTCAccepted(tcAccepted);
   };
   const formSteps: {
     placeholder: string;
-    valid: boolean;
     onChangeText: (text: string) => void;
   }[] = [
-      {
-        placeholder: 'First Name',
-        valid: valid,
-        onChangeText: (text) => handleNameUpdate(text, 0),
-      },
-      {
-        placeholder: 'Last Name',
-        valid: valid,
-        onChangeText: (text) => handleNameUpdate(text, 1),
-      },
-      {
-        placeholder: 'Phone',
-        valid: valid,
-        onChangeText: handlePhoneUpdate,
-      },
-      {
-        placeholder: 'School Email',
-        valid: valid,
-        onChangeText: handleEmailUpdate,
-      },
-      {
-        placeholder: 'Username',
-        valid: valid,
-        onChangeText: (text) => handleNameUpdate(text, 2),
-      },
-      {
-        placeholder: 'Password',
-        valid: valid,
-        onChangeText: handlePasswordUpdate,
-      },
-      // ...
-    ];
+    {
+      placeholder: 'First Name',
+      onChangeText: (text) => handleNameUpdate(text, 0),
+    },
+    {
+      placeholder: 'Last Name',
+      onChangeText: (text) => handleNameUpdate(text, 1),
+    },
+    {
+      placeholder: 'Phone',
+      onChangeText: handlePhoneUpdate,
+    },
+    {
+      placeholder: 'School Email',
+      onChangeText: handleEmailUpdate,
+    },
+    {
+      placeholder: 'Username',
+      onChangeText: (text) => handleNameUpdate(text, 2),
+    },
+    {
+      placeholder: 'Password',
+      onChangeText: handlePasswordUpdate,
+    },
+  ];
   const resetForm = (formStep: String) => {
-    console.log(step.placeholder)
-    console.log(valid)
     setValid(false);
-    console.log("after " + step.valid)
     switch (formStep) {
       case 'First Name':
         setForm({
           ...form,
-          fname: ''
-        })
+          fname: '',
+        });
         break;
       case 'Last Name':
         setForm({
           ...form,
-          lname: ''
-        })
+          lname: '',
+        });
         break;
       case 'Email':
         setForm({
           ...form,
-          email: ''
-        })
+          email: '',
+        });
         break;
       case 'Password':
         setForm({
           ...form,
-          password: ''
-        })
+          password: '',
+        });
         break;
       case 'School Email':
         setForm({
           ...form,
-          email: ''
-        })
+          email: '',
+        });
         break;
       case 'Username':
         setForm({
           ...form,
-          username: ''
-        })
+          username: '',
+        });
         break;
     }
-  }
+  };
+  const step = formSteps[currentStep];
   const advance = () => {
     setAttemptedSubmit(true);
-    console.log("valid? before: " + valid)
-    if (step.valid) {
+    if (valid) {
       setCurrentStep(currentStep + 1);
       setAttemptedSubmit(false);
       setValid(false);
     }
-    console.log("valid? after: " + valid)
-  }
-  const togglePassVisibility = (passBool: boolean) => {
-    setPassVisibility(passBool);
-  }
-  const step = formSteps[currentStep];
+  };
+  const advanceRegistration = async () => {
+    setAttemptedSubmit(true);
+    if (!valid) {
+      return;
+    }
+    if (!tcAccepted) {
+      Alert.alert('Terms and conditions', ERROR_T_AND_C_NOT_ACCEPTED);
+      return;
+    }
+    const {fname, lname, phone, email, username, password} = form;
+    const response = await sendRegister(
+      fname,
+      lname,
+      phone,
+      email,
+      username,
+      password,
+    );
+    if (response) {
+      const data = await response.json();
+      const {token, UserID} = data;
+      switch (response.status) {
+        case 201:
+          await AsyncStorage.setItem('token', token);
+          navigation.navigate('ProfileInfoOnboarding', {
+            userId: UserID,
+            username: username,
+          });
+          break;
+        case 400:
+          Alert.alert(ERROR_REGISTRATION(data.toLowerCase()));
+          break;
+        default:
+          Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+          break;
+      }
+    } else {
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
+    }
+  };
 
   useEffect(() => {
     if (isPhoneVerified) {
-      advance()
+      advance();
     }
   }, [isPhoneVerified]);
 
@@ -294,7 +298,7 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
         <View style={styles.footer}>
-          {(currentStep !== 0 && currentStep !== 3) && (
+          {currentStep !== 0 && currentStep !== 3 && (
             <ArrowButton
               direction="backward"
               onPress={() => {
@@ -306,13 +310,6 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
             />
           )}
         </View>
-        {/* <ArrowButton
-          direction="backward"
-          onPress={() => {
-            console.log('fooo');
-            setCurrentStep(currentStep - 1);
-          }} */}
-        {/* /> */}
         {step.placeholder === 'Phone' && !isPhoneVerified ? (
           <>
             <TaggInput
@@ -330,7 +327,6 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
               valid={valid}
               invalidWarning={'Please enter a valid 10 digit number.'}
               attemptedSubmit={attemptedSubmit}
-              width={280}
               onSubmitEditing={goNext}
             />
             <TaggSquareButton
@@ -344,7 +340,8 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
         ) : (
           <>
             {step.placeholder !== 'Password' ? (
-              <><Text style={styles.formHeader}>SIGN UP</Text>
+              <>
+                <Text style={styles.formHeader}>SIGN UP</Text>
                 <View>
                   <TaggInput
                     key={step.placeholder}
@@ -353,54 +350,60 @@ const RevampedOnboarding: React.FC<RevampedOnboardingProps> = ({ route }) => {
                     accessibilityLabel={`${step.placeholder} input field.`}
                     placeholder={currentStep + ' ' + step.placeholder}
                     autoCompleteType="name"
+                    autoCapitalize="none"
                     textContentType="name"
-                    returnKeyType="next"
+                    returnKeyType="done"
                     onChangeText={step.onChangeText}
                     onSubmitEditing={advance}
                     autoFocus={true}
                     blurOnSubmit={false}
-                    valid={step.valid}
+                    valid={valid}
                     invalidWarning={`Please enter a valid ${step.placeholder.toLowerCase()}`}
                     attemptedSubmit={attemptedSubmit}
-                    width={280} />
+                  />
                   <TaggSquareButton
                     onPress={advance}
-                    autoFocus={true}
                     title={'Next'}
                     buttonStyle={'normal'}
                     buttonColor={'white'}
-                    labelColor={'blue'} />
-                </View></>) : (
-              <><TaggInput
-                accessibilityHint="Enter a password."
-                accessibilityLabel="Password input field."
-                placeholder="Password"
-                autoCompleteType="password"
-                textContentType="oneTimeCode"
-                returnKeyType="next"
-                onChangeText={handlePasswordUpdate}
-                onSubmitEditing={advance}
-                blurOnSubmit={false}
-                secureTextEntry={passVisibility}
-                valid={valid}
-                invalidWarning={'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.'}
-                attemptedSubmit={attemptedSubmit}
-                width={280} />
-                <TouchableOpacity onPress={() => togglePassVisibility(!passVisibility)}>
-                  <Text
-                    style={[styles.tc, styles.tc]}>
-                    Show Password
-            </Text>
+                    labelColor={'blue'}
+                  />
+                </View>
+              </>
+            ) : (
+              <>
+                <TaggInput
+                  accessibilityHint="Enter a password."
+                  accessibilityLabel="Password input field."
+                  placeholder="Password"
+                  autoCompleteType="password"
+                  textContentType="oneTimeCode"
+                  returnKeyType="next"
+                  onChangeText={handlePasswordUpdate}
+                  onSubmitEditing={advanceRegistration}
+                  blurOnSubmit={false}
+                  secureTextEntry={!passVisibility}
+                  valid={valid}
+                  invalidWarning={
+                    'Password must be at least 8 characters & contain at least one of a-z, A-Z, 0-9, and a special character.'
+                  }
+                  attemptedSubmit={attemptedSubmit}
+                  style={styles.input}
+                />
+                <TouchableOpacity
+                  onPress={() => setPassVisibility(!passVisibility)}>
+                  <Text style={[styles.tc, styles.tc]}>Show Password</Text>
                 </TouchableOpacity>
                 <LoadingIndicator />
                 <TermsConditions
                   style={styles.tc}
                   accepted={tcAccepted}
-                  onChange={handleTcUpdate} /></>
+                  onChange={setTCAccepted}
+                />
+              </>
             )}
           </>
         )}
-        <View style={{ position: 'absolute', bottom: 150 }} />
       </KeyboardAvoidingView>
     </Background>
   );
@@ -414,7 +417,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   input: {
-    width: '100%',
     minWidth: '60%',
     height: 40,
     fontSize: 16,
@@ -455,4 +457,4 @@ const styles = StyleSheet.create({
     }),
   },
 });
-export default RevampedOnboarding;
+export default BasicInfoOnboarding;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 3b970864..6922bbc7 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -182,7 +182,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
            * finish step 3, thus does not have a universtiy.
            * Redirecting user back to onboarding to finish the process
            */
-          navigation.navigate('OnboardingStepThree', {
+          navigation.navigate('ProfileInfoOnboarding', {
             userId: data.UserID,
             username: username,
           });
diff --git a/src/screens/onboarding/PhoneVerification.tsx b/src/screens/onboarding/PhoneVerification.tsx
index 9b517d9d..93ae8fdc 100644
--- a/src/screens/onboarding/PhoneVerification.tsx
+++ b/src/screens/onboarding/PhoneVerification.tsx
@@ -31,7 +31,6 @@ import {
 import {OnboardingStackParams} from '../../routes';
 import {sendOtp, verifyOtp} from '../../services';
 import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT} from '../../utils';
 
 type PhoneVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -66,7 +65,7 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({
     try {
       const success = await trackPromise(verifyOtp(phone, value));
       if (success) {
-        navigation.navigate('RevampedOnboarding', {isPhoneVerified: true});
+        navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: true});
       }
     } catch (error) {
       console.log(error);
@@ -79,7 +78,9 @@ const PhoneVerification: React.FC<PhoneVerificationProps> = ({
       <View style={styles.footer}>
         <ArrowButton
           direction="backward"
-          onPress={() => navigation.navigate('RevampedOnboarding', {isPhoneVerified: false})}
+          onPress={() =>
+            navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false})
+          }
         />
       </View>
     ),
diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/ProfileInfoOnboarding.tsx
index 6421c396..a481b0c0 100644
--- a/src/screens/onboarding/OnboardingStepThree.tsx
+++ b/src/screens/onboarding/ProfileInfoOnboarding.tsx
@@ -33,17 +33,17 @@ import {patchEditProfile} from '../../services';
 import {BackgroundGradientType, UniversityType} from '../../types';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
-type OnboardingStepThreeRouteProp = RouteProp<
+type ProfileInfoOnboardingRouteProp = RouteProp<
   OnboardingStackParams,
-  'OnboardingStepThree'
+  'ProfileInfoOnboarding'
 >;
-type OnboardingStepThreeNavigationProp = StackNavigationProp<
+type ProfileInfoOnboardingNavigationProp = StackNavigationProp<
   OnboardingStackParams,
-  'OnboardingStepThree'
+  'ProfileInfoOnboarding'
 >;
-interface OnboardingStepThreeProps {
-  route: OnboardingStepThreeRouteProp;
-  navigation: OnboardingStepThreeNavigationProp;
+interface ProfileInfoOnboardingProps {
+  route: ProfileInfoOnboardingRouteProp;
+  navigation: ProfileInfoOnboardingNavigationProp;
 }
 
 type FormType = {
@@ -56,7 +56,7 @@ type FormType = {
   attemptedSubmit: boolean;
 };
 
-const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
+const ProfileInfoOnboarding: React.FC<ProfileInfoOnboardingProps> = ({
   route,
   navigation,
 }) => {
@@ -377,4 +377,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default OnboardingStepThree;
+export default ProfileInfoOnboarding;
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 358661f7..f0089206 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -35,7 +35,7 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
       </View>
       <TaggSquareButton
         onPress={() => {
-          navigation.navigate('RevampedOnboarding', {isPhoneVerified: false});
+          navigation.navigate('BasicInfoOnboarding', {isPhoneVerified: false});
         }}
         title={'Next'}
         buttonStyle={'large'}
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index c0d99dd2..5423c46e 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -1,12 +1,9 @@
 export {default as InvitationCodeVerification} from './InvitationCodeVerification';
 export {default as Login} from './Login';
-export {default as OnboardingStepOne} from './OnboardingStepOne';
-export {default as OnboardingStepThree} from './OnboardingStepThree';
-export {default as OnboardingStepTwo} from './OnboardingStepTwo';
+export {default as ProfileInfoOnboarding} from './ProfileInfoOnboarding';
+export {default as BasicInfoOnboarding} from './BasicInfoOnboarding';
 export {default as PasswordReset} from './PasswordReset';
 export {default as PasswordResetRequest} from './PasswordResetRequest';
 export {default as PhoneVerification} from './PhoneVerification';
 export {default as PasswordVerification} from './PasswordVerification';
 export {default as WelcomeScreen} from './WelcomeScreen';
-export {default as RevampedOnboarding} from './RevampedOnboarding';
-
diff --git a/src/screens/onboarding/OnboardingStepOne.tsx b/src/screens/onboarding/legacy/OnboardingStepOne.tsx
index abec050e..5e88d004 100644
--- a/src/screens/onboarding/OnboardingStepOne.tsx
+++ b/src/screens/onboarding/legacy/OnboardingStepOne.tsx
@@ -115,7 +115,7 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
       if (isValidFname) {
         const {fname} = form;
         navigation.navigate('OnboardingStepTwo', {
-          firstName: fname
+          firstName: fname,
         });
         // const {phone} = form;
         // const code = await sendOtpStatusCode(phone);
@@ -124,13 +124,13 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
         //     case 200:
         //       const {fname, lname} = form;
 
-            //   break;
-            // case 409:
-            //   Alert.alert(ERROR_PHONE_IN_USE);
-            //   break;
-            // default:
-            //   Alert.alert(ERROR_TWILIO_SERVER_ERROR);
-          } else {
+        //   break;
+        // case 409:
+        //   Alert.alert(ERROR_PHONE_IN_USE);
+        //   break;
+        // default:
+        //   Alert.alert(ERROR_TWILIO_SERVER_ERROR);
+      } else {
         setForm({...form, attemptedSubmit: false});
         setTimeout(() => setForm({...form, attemptedSubmit: true}));
       }
@@ -146,12 +146,12 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
   const footer = useMemo(
     () => (
       <TaggSquareButton
-      onPress={goNext}
-      title={'Next'}
-      buttonStyle={'normal'}
-      buttonColor={'white'}
-      labelColor={'blue'}
-    />
+        onPress={goNext}
+        title={'Next'}
+        buttonStyle={'normal'}
+        buttonColor={'white'}
+        labelColor={'blue'}
+      />
       // // <View style={styles.footer}>
       //   {/* <ArrowButton
       //     direction="backward"
@@ -189,7 +189,7 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
         {/* <View style={{backgroundColor: 'thistle', position: 'absolute', top: 0, marginTop: '45%', height: 0}}> */}
-          <Text style={styles.formHeader}>SIGN UP</Text>
+        <Text style={styles.formHeader}>SIGN UP</Text>
         {/* </View> */}
         <TaggInput
           accessibilityHint="Enter your first name."
@@ -239,9 +239,7 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
           width={280}
           onSubmitEditing={goNext}
         /> */}
-        <View style = {{position: 'absolute', bottom: 150}}>
-        {footer}
-        </View>
+        <View style={{position: 'absolute', bottom: 150}}>{footer}</View>
       </KeyboardAvoidingView>
     </Background>
   );
@@ -255,15 +253,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   button: {
-    width: 40, 
+    width: 40,
     aspectRatio: 10,
-  }, 
+  },
   formHeader: {
     color: '#fff',
     fontSize: 30,
     fontWeight: '600',
     marginBottom: '16%',
-    position: 'absolute', top: 0, marginTop: '45%',
+    position: 'absolute',
+    top: 0,
+    marginTop: '45%',
   },
   load: {
     top: '5%',
diff --git a/src/screens/onboarding/OnboardingStepTwo.tsx b/src/screens/onboarding/legacy/OnboardingStepTwo.tsx
index 5c474c14..65f953ea 100644
--- a/src/screens/onboarding/OnboardingStepTwo.tsx
+++ b/src/screens/onboarding/legacy/OnboardingStepTwo.tsx
@@ -13,24 +13,21 @@ import {
   View,
 } from 'react-native';
 import {
-  ArrowButton,
   Background,
   LoadingIndicator,
-  // RegistrationWizard,
   TaggInput,
   TaggSquareButton,
   TermsConditions,
-} from '../../components';
-import {emailRegex, passwordRegex, usernameRegex} from '../../constants';
+} from '../../../components';
+import {emailRegex, passwordRegex, usernameRegex} from '../../../constants';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_REGISTRATION,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
-} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes';
-import {sendRegister} from '../../services';
-import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT} from '../../utils';
+} from '../../../constants/strings';
+import {OnboardingStackParams} from '../../../routes';
+import {sendRegister} from '../../../services';
+import {BackgroundGradientType} from '../../../types';
 
 type OnboardingStepTwoRouteProp = RouteProp<
   OnboardingStackParams,
@@ -175,7 +172,7 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
             switch (response.status) {
               case 201:
                 await AsyncStorage.setItem('token', token);
-                navigation.navigate('OnboardingStepThree', {
+                navigation.navigate('ProfileInfoOnboarding', {
                   userId: UserID,
                   username: username,
                 });
@@ -213,13 +210,13 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
     () => (
       <View style={styles.footer}>
         <TouchableOpacity onPress={handleRegister}>
-        <TaggSquareButton
-      onPress={goNext}
-      title={'Next'}
-      buttonStyle={'normal'}
-      buttonColor={'white'}
-      labelColor={'blue'}
-    />
+          <TaggSquareButton
+            onPress={goNext}
+            title={'Next'}
+            buttonStyle={'normal'}
+            buttonColor={'white'}
+            labelColor={'blue'}
+          />
         </TouchableOpacity>
       </View>
     ),