[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

1 files changed, 210 insertions, 0 deletions

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;