1 files changed, 144 insertions, 0 deletions
diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
new file mode 100644
index 00000000..013a80d2
--- /dev/null
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import {
+  View,
+  Text,
+  StyleSheet,
+  StatusBar,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+
+import {RootStackParamList, AuthContext} from '../../routes';
+import {RegistrationWizard, Background} from '../../components';
+
+type CheckpointRouteProp = RouteProp<RootStackParamList, 'Checkpoint'>;
+type CheckpointNavigationProp = StackNavigationProp<
+  RootStackParamList,
+  'Checkpoint'
+>;
+interface CheckpointProps {
+  route: CheckpointRouteProp;
+  navigation: CheckpointNavigationProp;
+}
+/**
+ * Registration screen 2 for email, username, password, and terms and conditions
+ * @param navigation react-navigation navigation object
+ */
+const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
+  const {userId, username} = route.params;
+
+  /**
+   * login: determines if user successully created an account to
+   * navigate to home and display main tab navigation bar
+   */
+  const {login} = React.useContext(AuthContext);
+
+  const handleSkip = () => {
+    login(userId, username);
+  };
+
+  const handleProceed = () => {
+    navigation.navigate('ProfileOnboarding', {
+      userId: userId,
+      username: username,
+    });
+  };
+
+  return (
+    <Background style={styles.container}>
+      <StatusBar barStyle="light-content" />
+      <RegistrationWizard style={styles.wizard} step="four" />
+
+      <View style={styles.textContainer}>
+        <Text style={styles.header}>Email verified!</Text>
+        <Text style={styles.subtext}>
+          We're almost there. Would you like to setup your profile now?
+        </Text>
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity onPress={handleSkip} style={styles.skipButton}>
+            <Text style={styles.skipButtonLabel}>Do it later</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={handleProceed}
+            style={styles.proceedButton}>
+            <Text style={styles.proceedButtonLabel}>Let's do it!</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  textContainer: {
+    marginTop: '65%',
+  },
+
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  wizard: {
+    ...Platform.select({
+      ios: {
+        top: 50,
+      },
+      android: {
+        bottom: 40,
+      },
+    }),
+  },
+  header: {
+    color: '#fff',
+    fontSize: 22,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '4%',
+    marginHorizontal: '10%',
+  },
+  subtext: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+    marginBottom: '16%',
+    marginHorizontal: '10%',
+  },
+  proceedButton: {
+    backgroundColor: '#8F01FF',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    marginTop: '5%',
+  },
+  proceedButtonLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#fff',
+  },
+  skipButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 150,
+    height: 40,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: '#ddd',
+    marginTop: '5%',
+  },
+  skipButtonLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+
+export default Checkpoint;