TMA 207 : Updated the Onboarding Process (#42)

1 files changed, 37 insertions, 10 deletions

diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 7c74324a..89f79ac8 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -3,7 +3,12 @@ import React from 'react';
 import {OnboardingStackParams} from '../../routes';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {Background, RegistrationWizard, SubmitButton} from '../../components';
+import {
+  Background,
+  RegistrationWizard,
+  SubmitButton,
+  ArrowButton,
+} from '../../components';
 import {VERIFY_OTP_ENDPOINT, SEND_OTP_ENDPOINT} from '../../constants';
 import {Text} from 'react-native-animatable';
 import {
@@ -19,6 +24,7 @@ import {
   KeyboardAvoidingView,
   Alert,
   ActivityIndicator,
+  Platform,
 } from 'react-native';
 import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
 
@@ -42,7 +48,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
     value,
     setValue,
   });
-  const {username, email, userId} = route.params;
+  const {email} = route.params;
 
   /**
    * Sends the verify_otp request upon tapping the Verify button.
@@ -53,15 +59,14 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
       let verifyOtpResponse = await fetch(VERIFY_OTP_ENDPOINT, {
         method: 'POST',
         body: JSON.stringify({
-          username: username,
+          email: email,
           otp: value,
         }),
       });
       let statusCode = verifyOtpResponse.status;
-      if (statusCode === 200) {
-        navigation.navigate('Checkpoint', {
-          userId: userId,
-          username: username,
+      if (statusCode == 200) {
+        navigation.navigate('RegistrationTwo', {
+          email: email,
         });
       } else {
         Alert.alert(
@@ -90,7 +95,6 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
         fetch(SEND_OTP_ENDPOINT, {
           method: 'POST',
           body: JSON.stringify({
-            username: username,
             email: email,
           }),
         }),
@@ -111,7 +115,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
   };
 
   /**
-   * An activity indicator to indicate that the app is working during the send_otp request.
+   * An activity indicator to indicate that the app is working during the verify_otp request.
    */
   const LoadingIndicator = () => {
     const {promiseInProgress} = usePromiseTracker();
@@ -126,9 +130,18 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
     );
   };
 
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('RegistrationOne')}
+      />
+    </View>
+  );
+
   return (
     <Background centered style={styles.container}>
-      <RegistrationWizard style={styles.wizard} step="three" />
+      <RegistrationWizard style={styles.wizard} step="two" />
       <KeyboardAvoidingView behavior="padding" style={styles.form}>
         <Text style={styles.formHeader}>Enter 6 digit code</Text>
         <Text style={styles.description}>
@@ -167,6 +180,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
         </TouchableOpacity>
         <LoadingIndicator />
       </KeyboardAvoidingView>
+      <Footer />
     </Background>
   );
 };
@@ -235,5 +249,18 @@ const styles = StyleSheet.create({
   loadingIndicator: {
     marginVertical: '5%',
   },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
 });
 export default Verification;