onboarding revamp done!

1 files changed, 46 insertions, 69 deletions

diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index 903a9912..41d17f29 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -1,20 +1,7 @@
-import React from 'react';
-import {OnboardingStackParams} from '../../routes';
+import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-
-import {
-  Background,
-  RegistrationWizard,
-  SubmitButton,
-  ArrowButton,
-  LoadingIndicator,
-} from '../../components';
-
-import {
-  TAGG_LIGHT_PURPLE,
-  VERIFY_INVITATION_CODE_ENDPOUNT,
-} from '../../constants';
-
+import React from 'react';
+import {Alert, KeyboardAvoidingView, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {
   CodeField,
@@ -23,28 +10,35 @@ import {
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
 import {
-  StyleSheet,
-  View,
-  KeyboardAvoidingView,
-  Alert,
-  Platform,
-} from 'react-native';
-
-import {BackgroundGradientType} from '../../types';
+  ArrowButton,
+  Background,
+  LoadingIndicator,
+  SubmitButton,
+} from '../../components';
+import {VERIFY_INVITATION_CODE_ENDPOUNT} from '../../constants';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_INVALID_INVITATION_CODE,
   ERROR_INVLAID_CODE,
   ERROR_VERIFICATION_FAILED_SHORT,
+  SUCCESS_INVITATION_CODE,
 } from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
 
-type InvitationCodeVerificationScreenNavigationProp = StackNavigationProp<
+type InvitationCodeVerificationRouteProp = RouteProp<
+  OnboardingStackParams,
+  'InvitationCodeVerification'
+>;
+type InvitationCodeVerificationNavigationProp = StackNavigationProp<
   OnboardingStackParams,
   'InvitationCodeVerification'
 >;
 
 interface InvitationCodeVerificationProps {
-  navigation: InvitationCodeVerificationScreenNavigationProp;
+  navigation: InvitationCodeVerificationNavigationProp;
+  route: InvitationCodeVerificationRouteProp;
 }
 
 /**
@@ -53,6 +47,7 @@ interface InvitationCodeVerificationProps {
  */
 
 const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
+  route,
   navigation,
 }) => {
   const [value, setValue] = React.useState('');
@@ -66,19 +61,28 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     if (value.length === 6) {
       try {
         let verifyInviteCodeResponse = await fetch(
-          VERIFY_INVITATION_CODE_ENDPOUNT + value + '/',
+          VERIFY_INVITATION_CODE_ENDPOUNT +
+            value +
+            '/?user_id=' +
+            route.params.userId,
           {
             method: 'DELETE',
           },
         );
 
         if (verifyInviteCodeResponse.status === 200) {
-          navigation.navigate('RegistrationOne');
+          navigation.navigate('Login');
+          setTimeout(() => {
+            Alert.alert(SUCCESS_INVITATION_CODE);
+          }, 500);
         } else {
           Alert.alert(ERROR_INVALID_INVITATION_CODE);
         }
       } catch (error) {
-        Alert.alert(ERROR_VERIFICATION_FAILED_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
+        Alert.alert(
+          ERROR_VERIFICATION_FAILED_SHORT,
+          ERROR_DOUBLE_CHECK_CONNECTION,
+        );
         return {
           name: 'Verification error',
           description: error,
@@ -89,10 +93,6 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     }
   };
 
-  const navigateToAddWaitList = () => {
-    navigation.navigate('AddWaitlistUser');
-  };
-
   const Footer = () => (
     <View style={styles.footer}>
       <ArrowButton
@@ -107,13 +107,8 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
       centered
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
-      <RegistrationWizard style={styles.wizard} step="one" />
       <KeyboardAvoidingView behavior="padding" style={styles.form}>
-        <Text style={styles.formHeader}>Enter the code</Text>
-        <Text style={styles.description}>
-          Please enter the invitation code provided to you by us / your friend.
-          (Use all caps.)
-        </Text>
+        <Text style={styles.formHeader}>Enter Your Invitation Code</Text>
         <CodeField
           ref={ref}
           {...valueProps}
@@ -141,13 +136,10 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
           accessibilityHint="Select this after entering your invitation code"
           onPress={handleInvitationCodeVerification}
         />
-        <View style={styles.noInviteCode}>
-          <Text style={styles.inviteCodeText}>Don't have an invite? </Text>
-          <Text style={styles.inviteCodeLink} onPress={navigateToAddWaitList}>
-            {' '}
-            Join the Waitlist
-          </Text>
-        </View>
+        <Text style={styles.youveBeenAddedLabel}>
+          You've been added to the waitlist! We'll notify you when you're at the
+          front of the line!
+        </Text>
         <LoadingIndicator />
       </KeyboardAvoidingView>
       <Footer />
@@ -160,29 +152,17 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-  },
-  wizard: {
-    marginTop: '3.5%',
-    flex: 1,
-    justifyContent: 'center',
+    borderWidth: 1,
   },
   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: {
@@ -214,22 +194,19 @@ const styles = StyleSheet.create({
     width: '100%',
     flexDirection: 'row',
     justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
   },
   noInviteCode: {
     flexDirection: 'row',
     justifyContent: 'center',
   },
-  inviteCodeText: {
-    color: TAGG_LIGHT_PURPLE,
+  youveBeenAddedLabel: {
+    marginVertical: '5%',
+    width: SCREEN_WIDTH * 0.8,
+    color: 'white',
+    textAlign: 'center',
     fontSize: 18,
+    fontWeight: '500',
+    marginBottom: '10%',
   },
   inviteCodeLink: {
     color: 'white',