From 854a7d8f8526e8142c416ec41682468e87bcbbd2 Mon Sep 17 00:00:00 2001
From: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>
Date: Tue, 13 Oct 2020 10:24:59 -0700
Subject: [TMA - 238] Added invitation code verification screen as the first
 onboarding screen (#46)

* Added invitation code verification screen as the first onboarding screen

* Changed screen order on some screens and a quick check on back navigation
---
 src/screens/onboarding/Checkpoint.tsx              |   2 +-
 .../onboarding/InvitationCodeVerification.tsx      | 210 +++++++++++++++++++++
 src/screens/onboarding/Login.tsx                   |   2 +-
 src/screens/onboarding/RegistrationOne.tsx         |  18 +-
 src/screens/onboarding/RegistrationThree.tsx       |  18 +-
 src/screens/onboarding/RegistrationTwo.tsx         |   4 +-
 src/screens/onboarding/Verification.tsx            |  24 +--
 src/screens/onboarding/index.ts                    |   1 +
 8 files changed, 225 insertions(+), 54 deletions(-)
 create mode 100644 src/screens/onboarding/InvitationCodeVerification.tsx

(limited to 'src/screens')

diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/Checkpoint.tsx
index 83f330f1..8ef7f307 100644
--- a/src/screens/onboarding/Checkpoint.tsx
+++ b/src/screens/onboarding/Checkpoint.tsx
@@ -50,7 +50,7 @@ const Checkpoint: React.FC<CheckpointProps> = ({route, navigation}) => {
   return (
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="five" />
+      <RegistrationWizard style={styles.wizard} step="six" />
 
       <View style={styles.textContainer}>
         <Text style={styles.header}>You are registered!</Text>
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
new file mode 100644
index 00000000..ae1c282f
--- /dev/null
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -0,0 +1,210 @@
+import React from 'react';
+import {OnboardingStackParams} from '../../routes';
+import {StackNavigationProp} from '@react-navigation/stack';
+
+import {
+  Background,
+  RegistrationWizard,
+  SubmitButton,
+  ArrowButton,
+  LoadingIndicator,
+} from '../../components';
+
+//TODO :
+//import {VERIFY_INVITATION_CODE_ENDPOUNT} from "../../constants"
+
+import {Text} from 'react-native-animatable';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {
+  StyleSheet,
+  View,
+  KeyboardAvoidingView,
+  Alert,
+  Platform,
+} from 'react-native';
+import {trackPromise} from 'react-promise-tracker';
+
+type InvitationCodeVerificationScreenNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'InvitationCodeVerification'
+>;
+
+interface InvitationCodeVerificationProps {
+  navigation: InvitationCodeVerificationScreenNavigationProp;
+}
+
+/**
+ * InvitationCodeVerification screen to verify that the new user has been Invited
+ * @param navigation react-navigation navigation object
+ */
+
+const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
+  navigation,
+}) => {
+  const [value, setValue] = React.useState('');
+  const ref = useBlurOnFulfill({value, cellCount: 6});
+  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  const handleInvitationCodeVerification = async () => {
+    //TODO : Verify the code
+    //The code would look somewhat like below
+    // try {
+    //     let verifyInviteCodeResponse = await fetch(VERIFY_INVITATION_CODE_ENDPOUNT, {
+    //       method: 'POST',
+    //       body: JSON.stringify({
+    //         otp: value,
+    //       }),
+    //     });
+
+    //     if (verifyInviteCodeResponse.status == 200) {
+    //       navigation.navigate('RegistrationOne');
+    //     } else {
+    //       Alert.alert(
+    //         'Invalid invitation code 🤔',
+    //       );
+    //     }
+    //   } catch (error) {
+    //     Alert.alert(
+    //       'Verifiation failed 😓',
+    //       'Please double-check your network connection and retry.',
+    //     );
+    //     return {
+    //       name: 'Verification error',
+    //       description: error,
+    //     };
+    //   }
+
+    navigation.navigate('RegistrationOne');
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('Login')}
+      />
+    </View>
+  );
+
+  return (
+    <Background centered style={styles.container}>
+      <RegistrationWizard style={styles.wizard} step="one" />
+      <KeyboardAvoidingView behavior="padding" style={styles.form}>
+        <Text style={styles.formHeader}>Enter 6 digit code</Text>
+        <Text style={styles.description}>
+          Please enter the invitation code provided to you by us / your friend.
+        </Text>
+        <CodeField
+          ref={ref}
+          {...valueProps}
+          value={value}
+          onChangeText={setValue}
+          cellCount={6}
+          rootStyle={styles.codeFieldRoot}
+          keyboardType="number-pad"
+          textContentType="oneTimeCode"
+          renderCell={({index, symbol, isFocused}) => (
+            <View
+              onLayout={getCellOnLayoutHandler(index)}
+              key={index}
+              style={[styles.cellRoot, isFocused && styles.focusCell]}>
+              <Text style={styles.cellText}>
+                {symbol || (isFocused ? <Cursor /> : null)}
+              </Text>
+            </View>
+          )}
+        />
+        <SubmitButton
+          text="Verify"
+          color="#fff"
+          style={styles.button}
+          accessibilityLabel="Verify"
+          accessibilityHint="Select this after entering your invitation code"
+          onPress={handleInvitationCodeVerification}
+        />
+        <LoadingIndicator />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    marginTop: '3.5%',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  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: {
+    width: 280,
+    marginHorizontal: 'auto',
+    marginVertical: '15%',
+  },
+  cellRoot: {
+    width: 40,
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomColor: '#fff',
+    borderBottomWidth: 1,
+  },
+  cellText: {
+    color: '#fff',
+    fontSize: 48,
+    textAlign: 'center',
+  },
+  focusCell: {
+    borderBottomColor: '#78a0ef',
+    borderBottomWidth: 2,
+  },
+  button: {
+    marginVertical: '5%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+
+export default InvitationCodeVerification;
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index c0dc14b7..c9dcba41 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -173,7 +173,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
    * Handles tap on "Get Started" text by resetting fields & navigating to the registration page.
    */
   const goToRegistration = () => {
-    navigation.navigate('RegistrationOne');
+    navigation.navigate('InvitationCodeVerification');
     setForm({...form, attemptedSubmit: false});
   };
 
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index 9e9cabf5..12643d69 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -10,7 +10,6 @@ import {
   Platform,
   TouchableOpacity,
   KeyboardAvoidingView,
-  ActivityIndicator,
 } from 'react-native';
 
 import {OnboardingStackParams} from '../../routes';
@@ -20,9 +19,10 @@ import {
   RegistrationWizard,
   TaggInput,
   Background,
+  LoadingIndicator,
 } from '../../components';
 
-import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
+import {trackPromise} from 'react-promise-tracker';
 
 import {SEND_OTP_ENDPOINT} from '../../constants';
 
@@ -134,22 +134,10 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
     </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" />
-      <RegistrationWizard style={styles.wizard} step="one" />
+      <RegistrationWizard style={styles.wizard} step="two" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/RegistrationThree.tsx
index 5b8f52b3..babb0334 100644
--- a/src/screens/onboarding/RegistrationThree.tsx
+++ b/src/screens/onboarding/RegistrationThree.tsx
@@ -17,7 +17,6 @@ import {
   KeyboardAvoidingView,
   ActivityIndicator,
 } from 'react-native';
-import {usePromiseTracker} from 'react-promise-tracker';
 
 import {OnboardingStackParams} from '../../routes';
 import {
@@ -26,6 +25,7 @@ import {
   TaggInput,
   TermsConditions,
   Background,
+  LoadingIndicator,
 } from '../../components';
 import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
@@ -214,7 +214,7 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
     <View style={styles.footer}>
       <ArrowButton
         direction="backward"
-        onPress={() => navigation.navigate('RegistrationOne')}
+        onPress={() => navigation.navigate('RegistrationTwo', {email: email})}
       />
       <TouchableOpacity onPress={handleRegister}>
         <ArrowButton
@@ -233,22 +233,10 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
     </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" />
-      <RegistrationWizard style={styles.wizard} step="four" />
+      <RegistrationWizard style={styles.wizard} step="five" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index d28fb197..515059f9 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -134,7 +134,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
     <View style={styles.footer}>
       <ArrowButton
         direction="backward"
-        onPress={() => navigation.navigate('Login')}
+        onPress={() => navigation.navigate('RegistrationOne')}
       />
       <TouchableOpacity onPress={goToRegisterThree}>
         <ArrowButton
@@ -149,7 +149,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
   return (
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
-      <RegistrationWizard style={styles.wizard} step="three" />
+      <RegistrationWizard style={styles.wizard} step="four" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 89f79ac8..91e6b181 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -8,6 +8,7 @@ import {
   RegistrationWizard,
   SubmitButton,
   ArrowButton,
+  LoadingIndicator,
 } from '../../components';
 import {VERIFY_OTP_ENDPOINT, SEND_OTP_ENDPOINT} from '../../constants';
 import {Text} from 'react-native-animatable';
@@ -23,10 +24,9 @@ import {
   TouchableOpacity,
   KeyboardAvoidingView,
   Alert,
-  ActivityIndicator,
   Platform,
 } from 'react-native';
-import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
+import {trackPromise} from 'react-promise-tracker';
 
 type VerificationScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -64,7 +64,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
         }),
       });
       let statusCode = verifyOtpResponse.status;
-      if (statusCode == 200) {
+      if (statusCode === 200) {
         navigation.navigate('RegistrationTwo', {
           email: email,
         });
@@ -114,22 +114,6 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
     }
   };
 
-  /**
-   * An activity indicator to indicate that the app is working during the verify_otp request.
-   */
-  const LoadingIndicator = () => {
-    const {promiseInProgress} = usePromiseTracker();
-    return promiseInProgress ? (
-      <ActivityIndicator
-        style={styles.loadingIndicator}
-        size="large"
-        color="#fff"
-      />
-    ) : (
-      <></>
-    );
-  };
-
   const Footer = () => (
     <View style={styles.footer}>
       <ArrowButton
@@ -141,7 +125,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
 
   return (
     <Background centered style={styles.container}>
-      <RegistrationWizard style={styles.wizard} step="two" />
+      <RegistrationWizard style={styles.wizard} step="three" />
       <KeyboardAvoidingView behavior="padding" style={styles.form}>
         <Text style={styles.formHeader}>Enter 6 digit code</Text>
         <Text style={styles.description}>
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index 041864b7..27a33d32 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -6,3 +6,4 @@ export {default as Verification} from './Verification';
 export {default as Checkpoint} from './Checkpoint';
 export {default as ProfileOnboarding} from './ProfileOnboarding';
 export {default as Splash} from './Splash';
+export {default as InvitationCodeVerification} from './InvitationCodeVerification';
-- 
cgit v1.2.3-70-g09d2