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/components/common/LoadingIndicator.tsx | 24 +++ src/components/common/index.ts | 1 + src/components/onboarding/RegistrationWizard.tsx | 8 +- src/constants/api.ts | 3 + src/routes/onboarding/Onboarding.tsx | 5 + src/routes/onboarding/OnboardingStack.tsx | 1 + 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 + 14 files changed, 265 insertions(+), 56 deletions(-) create mode 100644 src/components/common/LoadingIndicator.tsx create mode 100644 src/screens/onboarding/InvitationCodeVerification.tsx (limited to 'src') diff --git a/src/components/common/LoadingIndicator.tsx b/src/components/common/LoadingIndicator.tsx new file mode 100644 index 00000000..f6679556 --- /dev/null +++ b/src/components/common/LoadingIndicator.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import {ActivityIndicator, StyleSheet} from 'react-native'; +import {usePromiseTracker} from 'react-promise-tracker'; + +const LoadingIndicator: React.FC = () => { + const {promiseInProgress} = usePromiseTracker(); + return promiseInProgress ? ( + + ) : ( + <> + ); +}; + +const styles = StyleSheet.create({ + loadingIndicator: { + marginVertical: '5%', + }, +}); + +export default LoadingIndicator; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 4a226c8f..cb9d641b 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -7,4 +7,5 @@ export {default as GradientBackground} from './GradientBackground'; export {default as SocialIcon} from './SocialIcon'; export {default as TabsGradient} from './TabsGradient'; export {default as RecentSearches} from '../search/RecentSearches'; +export {default as LoadingIndicator} from './LoadingIndicator'; export * from './post'; diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx index 0094c8af..8d747b01 100644 --- a/src/components/onboarding/RegistrationWizard.tsx +++ b/src/components/onboarding/RegistrationWizard.tsx @@ -3,7 +3,7 @@ import {View, StyleSheet, ViewProps, Keyboard} from 'react-native'; import * as Animatable from 'react-native-animatable'; interface RegistrationWizardProps extends ViewProps { - step: 'one' | 'two' | 'three' | 'four' | 'five'; + step: 'one' | 'two' | 'three' | 'four' | 'five' | 'six'; } const RegistrationWizard = (props: RegistrationWizardProps) => { @@ -41,6 +41,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { + + )} @@ -58,6 +60,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { + + )} @@ -82,7 +86,7 @@ const styles = StyleSheet.create({ backgroundColor: '#e1f0ff', }, progress: { - width: '16%', + width: '13%', height: 2, backgroundColor: '#e1f0ff', }, diff --git a/src/constants/api.ts b/src/constants/api.ts index e4fed13e..86b941d0 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -12,3 +12,6 @@ export const COVER_PHOTO_ENDPOINT: string = API_URL + 'large-profile-pic/'; export const AVATAR_PHOTO_ENDPOINT: string = API_URL + 'small-profile-pic/'; export const GET_IG_POSTS_ENDPOINT: string = API_URL + 'posts-ig/'; export const SEARCH_ENDPOINT: string = API_URL + 'search/'; + +//TODO add an endpoint to verify the invitation code, such as below +//export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify_invitation_code/'; diff --git a/src/routes/onboarding/Onboarding.tsx b/src/routes/onboarding/Onboarding.tsx index 7b2eb85d..148dbefb 100644 --- a/src/routes/onboarding/Onboarding.tsx +++ b/src/routes/onboarding/Onboarding.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {OnboardingStack} from './OnboardingStack'; import { Login, + InvitationCodeVerification, RegistrationOne, RegistrationTwo, RegistrationThree, @@ -32,6 +33,10 @@ const Onboarding: React.FC = () => { cardStyleInterpolator: forFade, }} /> + = ({route, navigation}) => { return ( - + You are registered! 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 = ({ + 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 = () => ( + + navigation.navigate('Login')} + /> + + ); + + return ( + + + + Enter 6 digit code + + Please enter the invitation code provided to you by us / your friend. + + ( + + + {symbol || (isFocused ? : null)} + + + )} + /> + + + +