From aa93723fcd80a2d1e013f3c408edf83b75be63c9 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Feb 2021 20:49:42 -0500 Subject: updated wizard and exported modal style --- src/components/onboarding/RegistrationWizard.tsx | 22 +--------------------- src/routes/main/MainStackScreen.tsx | 16 +--------------- 2 files changed, 2 insertions(+), 36 deletions(-) (limited to 'src') diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx index 437e7cfb..3c6ca80e 100644 --- a/src/components/onboarding/RegistrationWizard.tsx +++ b/src/components/onboarding/RegistrationWizard.tsx @@ -37,16 +37,6 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { - - - - - - - - )} @@ -60,16 +50,6 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { - - - - - - - - )} @@ -94,7 +74,7 @@ const styles = StyleSheet.create({ backgroundColor: '#e1f0ff', }, progress: { - width: '10%', + width: '35%', height: 2, backgroundColor: '#e1f0ff', }, diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index acf0cd28..04f73985 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -80,20 +80,6 @@ const MainStackScreen: React.FC = ({route}) => { } })(); - const modalStyle: StackNavigationOptions = { - cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'}, - gestureDirection: 'vertical', - cardOverlayEnabled: true, - cardStyleInterpolator: ({current: {progress}}) => ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - }), - }; - const tutorialModalStyle: StackNavigationOptions = { cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'}, gestureDirection: 'vertical', @@ -263,7 +249,7 @@ export const headerBarOptions: ( ), }); -const modalStyle: StackNavigationOptions = { +export const modalStyle: StackNavigationOptions = { cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, gestureDirection: 'vertical', cardOverlayEnabled: true, -- cgit v1.2.3-70-g09d2 From 3af796dc78f94c421e1d941432b218827458537c Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Feb 2021 21:12:01 -0500 Subject: assets, date picker default string --- src/assets/icons/purple-plus.png | Bin 0 -> 18370 bytes src/components/onboarding/BirthDatePicker.tsx | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/purple-plus.png (limited to 'src') diff --git a/src/assets/icons/purple-plus.png b/src/assets/icons/purple-plus.png new file mode 100644 index 00000000..8b2ce903 Binary files /dev/null and b/src/assets/icons/purple-plus.png differ diff --git a/src/components/onboarding/BirthDatePicker.tsx b/src/components/onboarding/BirthDatePicker.tsx index 6bef5798..c3a975dc 100644 --- a/src/components/onboarding/BirthDatePicker.tsx +++ b/src/components/onboarding/BirthDatePicker.tsx @@ -46,7 +46,7 @@ const BirthDatePicker = React.forwardRef( {...props}> {(updated || props.showPresetdate) && date ? moment(date).format('MM-DD-YYYY') - : 'Date of Birth'} + : 'Birthday'} @@ -92,7 +92,7 @@ const styles = StyleSheet.create({ input: { height: 40, fontSize: 16, - paddingTop: '2%', + paddingTop: 8, fontWeight: '600', borderColor: '#fffdfd', borderWidth: 2, -- cgit v1.2.3-70-g09d2 From bd3e189405e013b847b74fbad66543f6368a4ec8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Feb 2021 21:14:16 -0500 Subject: strings constant and remove/comment out old onboarding screens --- src/constants/strings.ts | 6 ++ src/routes/onboarding/OnboardingStackNavigator.tsx | 63 +++++++------- src/routes/onboarding/OnboardingStackScreen.tsx | 95 ++++++++-------------- 3 files changed, 69 insertions(+), 95 deletions(-) (limited to 'src') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 353e0d02..104cc198 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -14,6 +14,7 @@ export const ERROR_DELETED_OBJECT = 'Oh sad! Looks like the comment / moment was export const ERROR_DOUBLE_CHECK_CONNECTION = 'Please double-check your network connection and retry'; export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password'; export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one'; +export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one'; export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering your login information'; export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!'; export const ERROR_FAILED_TO_DELETE_COMMENT = 'Unable to delete comment, refresh and try again!'; @@ -31,7 +32,10 @@ export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed πŸ˜“'; export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`; export const ERROR_REGISTRATION = (str: string) => `Registration failed πŸ˜”, ${str}`; export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year'; +export const ERROR_SELECT_BIRTHDAY = 'Please select your birthday'; +export const ERROR_SELECT_GENDER = 'Please select your gender'; export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins'; +export const ERROR_TWILIO_SERVER_ERROR = 'mhm, looks like that is an invalid phone number or our servers are down, please try again in a few mins'; export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app'; export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again"; export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again"; @@ -50,6 +54,8 @@ export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} πŸŽ‰`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code'; +export const SUCCESS_INVITATION_CODE = 'Perfect! You entered a valid invitation code, you are now able to login and explore Tagg!'; +export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one'; export const UP_TO_DATE = 'Up-to-Date!'; export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!'; export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx index 9f614f7c..0cdeecdf 100644 --- a/src/routes/onboarding/OnboardingStackNavigator.tsx +++ b/src/routes/onboarding/OnboardingStackNavigator.tsx @@ -1,46 +1,41 @@ import {createStackNavigator} from '@react-navigation/stack'; -import { - CategorySelectionScreenType, - TaggPopupType, - UserType, - VerificationScreenType, -} from '../../types'; +import {TaggPopupType, VerificationScreenType} from '../../types'; export type OnboardingStackParams = { - WelcomeScreen: undefined; Login: undefined; + WelcomeScreen: undefined; PasswordResetRequest: undefined; - PasswordReset: { - value: string; - }; - InvitationCodeVerification: undefined; - RegistrationOne: undefined; - RegistrationTwo: {phone: string}; - RegistrationThree: { - firstName: string; - lastName: string; - phone: string; - email: string; - }; - Checkpoint: {username: string; userId: string}; + PasswordReset: {value: string}; Verification: {id: string; screenType: VerificationScreenType}; - ProfileOnboarding: {username: string; userId: string}; - SocialMedia: {username: string; userId: string}; - CategorySelection: { - screenType: CategorySelectionScreenType; - user: UserType; - newCustomCategory: string | undefined; - }; - CreateCustomCategory: { - screenType: CategorySelectionScreenType; - user: UserType; - existingCategories: string[]; - }; + // RegistrationOne: undefined; + // RegistrationTwo: {phone: string}; + // RegistrationThree: { + // firstName: string; + // lastName: string; + // phone: string; + // email: string; + // }; + // Checkpoint: {username: string; userId: string}; + // ProfileOnboarding: {username: string; userId: string}; + // SocialMedia: {username: string; userId: string}; + // CategorySelection: { + // screenType: CategorySelectionScreenType; + // user: UserType; + // newCustomCategory: string | undefined; + // }; + // CreateCustomCategory: { + // screenType: CategorySelectionScreenType; + // user: UserType; + // existingCategories: string[]; + // }; TaggPopup: { popupProps: TaggPopupType; }; - AddWaitlistUser: undefined; - WaitlistSuccess: undefined; + OnboardingStepOne: undefined; + PhoneVerification: {firstName: string; lastName: string; phone: string}; + OnboardingStepTwo: {firstName: string; lastName: string; phone: string}; + OnboardingStepThree: {userId: string; username: string}; + InvitationCodeVerification: {userId: string}; }; export const OnboardingStack = createStackNavigator(); diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx index 78f113cc..79171efd 100644 --- a/src/routes/onboarding/OnboardingStackScreen.tsx +++ b/src/routes/onboarding/OnboardingStackScreen.tsx @@ -1,24 +1,20 @@ +import {StackCardInterpolationProps} from '@react-navigation/stack'; import React from 'react'; -import {OnboardingStack} from './OnboardingStackNavigator'; +import TaggPopup from '../../components/common/TaggPopup'; import { - Login, InvitationCodeVerification, - RegistrationOne, - RegistrationTwo, - RegistrationThree, - Verification, - ProfileOnboarding, - Checkpoint, - SocialMedia, - PasswordResetRequest, + Login, + OnboardingStepThree, + OnboardingStepTwo, PasswordReset, + PasswordResetRequest, + PhoneVerification, + Verification, WelcomeScreen, - CategorySelection, - AddWaitlistUserScreen, - WaitlistSuccessScreen, } from '../../screens'; -import {StackCardInterpolationProps} from '@react-navigation/stack'; -import TaggPopup from '../../components/common/TaggPopup'; +import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne'; +import {modalStyle} from '../main'; +import {OnboardingStack} from './OnboardingStackNavigator'; const forFade = ({current}: StackCardInterpolationProps) => ({ cardStyle: { @@ -37,6 +33,7 @@ const Onboarding: React.FC = () => { options={{ gestureEnabled: false, cardStyleInterpolator: forFade, + ...modalStyle, }} /> { gestureEnabled: false, }} /> - - + ({ - cardStyle: { - opacity: progress.interpolate({ - inputRange: [0, 0.5, 0.9, 1], - outputRange: [0, 0.25, 0.7, 1], - }), - }, - }), + ...modalStyle, }} /> { component={PasswordReset} options={{ gestureEnabled: false, + ...modalStyle, }} /> - - - - ); }; -- cgit v1.2.3-70-g09d2 From 7faeb487da4fac1e57d8d147da1e41cac16bb28d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 26 Feb 2021 21:16:02 -0500 Subject: onboarding revamp done! --- .../onboarding/InvitationCodeVerification.tsx | 115 +++--- src/screens/onboarding/Login.tsx | 15 +- src/screens/onboarding/OnboardingStepOne.tsx | 263 +++++++++++++ src/screens/onboarding/OnboardingStepThree.tsx | 411 +++++++++++++++++++++ src/screens/onboarding/OnboardingStepTwo.tsx | 369 ++++++++++++++++++ src/screens/onboarding/PasswordReset.tsx | 1 + src/screens/onboarding/PasswordResetRequest.tsx | 29 +- src/screens/onboarding/PhoneVerification.tsx | 225 +++++++++++ src/screens/onboarding/Verification.tsx | 51 ++- src/screens/onboarding/WelcomeScreen.tsx | 7 +- src/screens/onboarding/index.ts | 4 + src/services/UserProfileService.ts | 45 ++- 12 files changed, 1413 insertions(+), 122 deletions(-) create mode 100644 src/screens/onboarding/OnboardingStepOne.tsx create mode 100644 src/screens/onboarding/OnboardingStepThree.tsx create mode 100644 src/screens/onboarding/OnboardingStepTwo.tsx create mode 100644 src/screens/onboarding/PhoneVerification.tsx (limited to 'src') 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 = ({ + route, navigation, }) => { const [value, setValue] = React.useState(''); @@ -66,19 +61,28 @@ const InvitationCodeVerification: React.FC = ({ 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 = ({ } }; - const navigateToAddWaitList = () => { - navigation.navigate('AddWaitlistUser'); - }; - const Footer = () => ( = ({ centered style={styles.container} gradientType={BackgroundGradientType.Light}> - - Enter the code - - Please enter the invitation code provided to you by us / your friend. - (Use all caps.) - + Enter Your Invitation Code = ({ accessibilityHint="Select this after entering your invitation code" onPress={handleInvitationCodeVerification} /> - - Don't have an invite? - - {' '} - Join the Waitlist - - + + You've been added to the waitlist! We'll notify you when you're at the + front of the line! +