diff options
Diffstat (limited to 'src/screens/onboarding')
17 files changed, 234 insertions, 740 deletions
diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx deleted file mode 100644 index ab5ff3be..00000000 --- a/src/screens/onboarding/CategorySelection.tsx +++ /dev/null @@ -1,348 +0,0 @@ -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext, useEffect, useState} from 'react'; -import { - Alert, - Platform, - StatusBar, - StyleSheet, - Text, - TouchableOpacity, - View, -} from 'react-native'; -import {ScrollView} from 'react-native-gesture-handler'; -import {useDispatch, useSelector} from 'react-redux'; -import {ChatContext} from '../../App'; -import PlusIcon from '../../assets/icons/plus_icon-01.svg'; -import {Background, MomentCategory} from '../../components'; -import {MOMENT_CATEGORIES} from '../../constants'; -import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings'; -import {OnboardingStackParams} from '../../routes'; -import {postMomentCategories} from '../../services'; -import { - updateIsOnboardedUser, - updateMomentCategories, -} from '../../store/actions/'; -import {RootState} from '../../store/rootReducer'; -import {BackgroundGradientType, CategorySelectionScreenType} from '../../types'; -import {getTokenOrLogout, SCREEN_WIDTH, userLogin} from '../../utils'; - -type CategorySelectionRouteProps = RouteProp< - OnboardingStackParams, - 'CategorySelection' ->; - -type CategorySelectionNavigationProps = StackNavigationProp< - OnboardingStackParams, - 'CategorySelection' ->; - -interface CategorySelectionProps { - route: CategorySelectionRouteProps; - navigation: CategorySelectionNavigationProps; -} - -const CategorySelection: React.FC<CategorySelectionProps> = ({ - route, - navigation, -}) => { - /** - * Same component to be used for category selection while onboarding and while on profile - */ - const {screenType, user} = route.params; - const {chatClient} = useContext(ChatContext); - const isOnBoarding: boolean = - screenType === CategorySelectionScreenType.Onboarding; - const {userId, username} = user; - - // During onboarding this will fail and default to [] - const {momentCategories = []} = useSelector( - (state: RootState) => state.momentCategories, - ); - - // Stores all the categories that will be saved to the store - const [selectedCategories, setSelectedCategories] = useState<string[]>([]); - - /** - * Stores all the custom categories for the UI, allow easier logic for - * unchecking a custom category. - * - * Each uncommited custom category should also have a copy in selectedCategories - * since that's the final value that will be stored in the store. - */ - const [uncommitedCustomCategories, setUncommitedCustomCategories] = useState< - string[] - >([]); - - const customCategories = momentCategories.filter( - (mc) => !MOMENT_CATEGORIES.includes(mc), - ); - - const dispatch = useDispatch(); - - useEffect(() => { - const newCustomCategory = route.params.newCustomCategory; - if (newCustomCategory) { - setUncommitedCustomCategories([ - ...uncommitedCustomCategories, - newCustomCategory, - ]); - selectedCategories.push(newCustomCategory); - } - }, [route.params?.newCustomCategory]); - - /** - * Show the tutorial if a new user is OnBoarding - */ - useEffect(() => { - if (isOnBoarding) { - navigation.navigate('TaggPopup', { - popupProps: { - messageHeader: 'Category And Moments', - messageBody: - 'Use pictures and videos to share \ndifferent aspects of you', - next: undefined, - }, - }); - } - }, [isOnBoarding]); - - /** - * Handle selection of a new category - * case isAdded: - * Return without doing anything - * case isSelected: - * Add to the selected categories - * case not isSelected: - * Remove from the selected categories - */ - const onSelect = ( - category: string, - isSelected: boolean, - isAdded: boolean, - ) => { - if (isAdded) { - return; - } - if (isSelected) { - setSelectedCategories((prev) => [...prev, category]); - } else { - setSelectedCategories( - selectedCategories.filter((item) => item !== category), - ); - } - }; - - /** - * Handle deselection of custom category. - * - * Custom categories is "added" and "selected" by CreateCustomCategory screen. - * User can only "deselect" an uncommited custom category. - * - * case isAdded || isSelected: - * Return without doing anything - * default: - * Remove from selected categories AND uncommitedCustomCategories - */ - const onDeselectCustomCategory = ( - category: string, - isSelected: boolean, - isAdded: boolean, - ) => { - if (isAdded || isSelected) { - return; - } - setSelectedCategories( - selectedCategories.filter((item) => item !== category), - ); - setUncommitedCustomCategories( - uncommitedCustomCategories.filter((item) => item !== category), - ); - }; - - const handleButtonPress = async () => { - if (momentCategories.length + selectedCategories.length === 0) { - Alert.alert('Please select at least 1 category'); - return; - } - try { - if (isOnBoarding) { - dispatch(updateIsOnboardedUser(true)); - const token = await getTokenOrLogout(dispatch); - await postMomentCategories(selectedCategories, token); - userLogin(dispatch, {userId: userId, username: username}); - } else { - dispatch( - updateMomentCategories( - momentCategories.concat(selectedCategories), - true, - ), - ); - navigation.goBack(); - } - } catch (error) { - console.log(error); - Alert.alert(ERROR_SOMETHING_WENT_WRONG); - } - }; - - /** - * Using a scroll view to accomodate dynamic category creation later on - */ - return ( - <ScrollView bounces={false}> - <Background - style={styles.container} - gradientType={BackgroundGradientType.Dark}> - <StatusBar barStyle="light-content" /> - <Text style={styles.subtext}>Create Categories</Text> - <View style={styles.container}> - {!isOnBoarding && ( - <TouchableOpacity - style={styles.createCategory} - onPress={() => { - navigation.push('CreateCustomCategory', { - screenType, - user, - existingCategories: momentCategories.concat( - selectedCategories, - ), - }); - }}> - <PlusIcon width={30} height={30} color="white" /> - <Text style={styles.createCategoryLabel}> - Create your own category - </Text> - </TouchableOpacity> - )} - <View style={styles.linkerContainer}> - {/* commited custom categories */} - {customCategories.map((category, index) => ( - <MomentCategory - key={index} - categoryType={category} - isSelected={false} - isAdded={true} - onSelect={onDeselectCustomCategory} - /> - ))} - {/* uncommited custom categroies */} - {uncommitedCustomCategories.map((category, index) => ( - <MomentCategory - key={index} - categoryType={category} - isSelected={selectedCategories.includes(category)} - isAdded={false} - onSelect={onDeselectCustomCategory} - /> - ))} - {customCategories.length + uncommitedCustomCategories.length !== - 0 && <View style={styles.divider} />} - {MOMENT_CATEGORIES.map((category, index) => ( - <MomentCategory - key={index} - categoryType={category} - isSelected={selectedCategories.includes(category)} - isAdded={momentCategories.includes(category)} - onSelect={onSelect} - /> - ))} - </View> - <TouchableOpacity - onPress={handleButtonPress} - style={styles.finalAction}> - <Text style={styles.finalActionLabel}> - {isOnBoarding ? 'Login' : 'Create'} - </Text> - </TouchableOpacity> - </View> - </Background> - </ScrollView> - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'space-around', - marginBottom: '10%', - }, - wizard: { - ...Platform.select({ - ios: { - top: 50, - }, - android: { - bottom: 40, - }, - }), - }, - linkerContainer: { - flex: 1, - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'center', - alignContent: 'center', - marginBottom: '10%', - }, - header: { - color: '#fff', - fontSize: 22, - fontWeight: '600', - textAlign: 'center', - marginBottom: '4%', - }, - subtext: { - color: '#fff', - fontSize: 20, - fontWeight: '600', - textAlign: 'center', - marginVertical: '8%', - marginHorizontal: '10%', - marginTop: '15%', - }, - finalAction: { - backgroundColor: 'white', - justifyContent: 'center', - alignItems: 'center', - width: 150, - height: 40, - borderRadius: 5, - borderWidth: 1, - borderColor: 'white', - marginBottom: '25%', - }, - finalActionLabel: { - fontSize: 16, - fontWeight: '500', - color: 'black', - }, - createCategory: { - backgroundColor: '#53329B', - width: SCREEN_WIDTH * 0.9, - height: 70, - alignItems: 'center', - justifyContent: 'center', - borderRadius: 10, - flexDirection: 'row', - marginBottom: '5%', - }, - createCategoryLabel: { - color: 'white', - marginLeft: '3%', - fontSize: 18, - fontWeight: '500', - }, - plusIcon: { - color: 'white', - }, - divider: { - borderColor: 'white', - borderBottomWidth: 1, - width: SCREEN_WIDTH * 0.9, - marginVertical: '2%', - }, -}); - -export default CategorySelection; diff --git a/src/screens/onboarding/CreateCustomCategory.tsx b/src/screens/onboarding/CreateCustomCategory.tsx deleted file mode 100644 index eab72c7d..00000000 --- a/src/screens/onboarding/CreateCustomCategory.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useState} from 'react'; -import { - Alert, - KeyboardAvoidingView, - StatusBar, - StyleSheet, - Text, - TextInput, - TouchableOpacity, -} from 'react-native'; -import {Background} from '../../components'; -import {OnboardingStackParams} from '../../routes'; -import {BackgroundGradientType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; - -type CreateCustomCategoryRouteProps = RouteProp< - OnboardingStackParams, - 'CreateCustomCategory' ->; - -type CreateCustomCategoryNavigationProps = StackNavigationProp< - OnboardingStackParams, - 'CreateCustomCategory' ->; - -interface CreateCustomCategoryProps { - route: CreateCustomCategoryRouteProps; - navigation: CreateCustomCategoryNavigationProps; -} - -const CreateCustomCategory: React.FC<CreateCustomCategoryProps> = ({ - route, - navigation, -}) => { - /** - * Same component to be used for category selection while onboarding and while on profile - */ - const {existingCategories} = route.params; - const [newCategory, setNewCategory] = useState(''); - - const handleButtonPress = () => { - if (existingCategories.includes(newCategory)) { - Alert.alert('Looks like you already have that one created!'); - } else { - navigation.navigate('CategorySelection', { - screenType: route.params.screenType, - user: route.params.user, - newCustomCategory: newCategory, - }); - } - }; - - return ( - <> - <StatusBar barStyle="light-content" /> - <Background - style={styles.container} - gradientType={BackgroundGradientType.Dark}> - <KeyboardAvoidingView - style={styles.innerContainer} - behavior={'padding'}> - <Text style={styles.title}>Give your category a name</Text> - <TextInput - style={styles.input} - selectionColor={'white'} - onChangeText={setNewCategory} - autoFocus={true} - /> - <TouchableOpacity - onPress={handleButtonPress} - style={styles.finalAction}> - <Text style={styles.finalActionLabel}>{'Create'}</Text> - </TouchableOpacity> - </KeyboardAvoidingView> - </Background> - </> - ); -}; - -const styles = StyleSheet.create({ - container: { - alignItems: 'center', - minHeight: SCREEN_HEIGHT, - }, - innerContainer: { - height: '40%', - top: '20%', - justifyContent: 'space-around', - alignItems: 'center', - }, - title: { - color: 'white', - fontSize: 20, - fontWeight: '600', - }, - input: { - width: SCREEN_WIDTH * 0.75, - fontSize: 30, - color: 'white', - textAlign: 'center', - borderBottomWidth: 1, - borderBottomColor: 'white', - }, - finalAction: { - backgroundColor: 'white', - justifyContent: 'center', - alignItems: 'center', - width: 150, - height: 40, - borderRadius: 5, - borderWidth: 1, - borderColor: '#8F01FF', - }, - finalActionLabel: { - fontSize: 16, - fontWeight: '500', - color: 'black', - }, -}); - -export default CreateCustomCategory; diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx index 6bc0ac9d..d84b2ba2 100644 --- a/src/screens/onboarding/InvitationCodeVerification.tsx +++ b/src/screens/onboarding/InvitationCodeVerification.tsx @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; -import React, {useContext} from 'react'; +import React from 'react'; import {Alert, KeyboardAvoidingView, StyleSheet, View} from 'react-native'; import {Text} from 'react-native-animatable'; import { @@ -27,7 +27,6 @@ import { import {OnboardingStackParams} from '../../routes'; import {BackgroundGradientType} from '../../types'; import {SCREEN_WIDTH, userLogin} from '../../utils'; -import {ChatContext} from '../../App'; type InvitationCodeVerificationRouteProp = RouteProp< OnboardingStackParams, @@ -59,7 +58,6 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({ setValue, }); const dispatch = useDispatch(); - const {chatClient} = useContext(ChatContext); const handleInvitationCodeVerification = async () => { if (value.length === 6) { @@ -200,10 +198,6 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-around', }, - noInviteCode: { - flexDirection: 'row', - justifyContent: 'center', - }, youveBeenAddedLabel: { marginVertical: '5%', width: SCREEN_WIDTH * 0.8, @@ -213,11 +207,6 @@ const styles = StyleSheet.create({ fontWeight: '500', marginBottom: '10%', }, - inviteCodeLink: { - color: 'white', - fontSize: 18, - textDecorationLine: 'underline', - }, }); export default InvitationCodeVerification; diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 6d9abf82..041fba05 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -30,7 +30,7 @@ import {fcmService} from '../../services'; import {RootState} from '../../store/rootReducer'; import {BackgroundGradientType, UniversityType} from '../../types'; import {connectChatAccount, normalize, userLogin} from '../../utils'; -import UpdateRequired from './UpdateRequired'; +import UpdateRequired from '../../components/onboarding/UpdateRequired'; type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>; type VerificationScreenNavigationProp = StackNavigationProp< diff --git a/src/screens/onboarding/PasswordResetRequest.tsx b/src/screens/onboarding/PasswordResetRequest.tsx index a63eae81..8a891bbb 100644 --- a/src/screens/onboarding/PasswordResetRequest.tsx +++ b/src/screens/onboarding/PasswordResetRequest.tsx @@ -74,9 +74,8 @@ const PasswordResetRequest: React.FC<PasswordResetRequestProps> = ({ handlePasswordResetRequest(form.value), ); if (success) { - navigation.navigate('Verification', { + navigation.navigate('PasswordVerification', { id: form.value, - screenType: VerificationScreenType.Password, }); } } else { diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/PasswordVerification.tsx index dda18364..6bda37a7 100644 --- a/src/screens/onboarding/Verification.tsx +++ b/src/screens/onboarding/PasswordVerification.tsx @@ -21,7 +21,6 @@ import { ArrowButton, Background, LoadingIndicator, - RegistrationWizard, SubmitButton, } from '../../components'; import {codeRegex} from '../../constants'; @@ -33,18 +32,16 @@ import {OnboardingStackParams} from '../../routes'; import { handlePasswordCodeVerification, handlePasswordResetRequest, - sendOtp, - verifyOtp, } from '../../services'; -import {BackgroundGradientType, VerificationScreenType} from '../../types'; +import {BackgroundGradientType} from '../../types'; type VerificationScreenRouteProp = RouteProp< OnboardingStackParams, - 'Verification' + 'PasswordVerification' >; type VerificationScreenNavigationProp = StackNavigationProp< OnboardingStackParams, - 'Verification' + 'PasswordVerification' >; interface VerificationProps { route: VerificationScreenRouteProp; @@ -58,39 +55,16 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => { value, setValue, }); - const {id, screenType} = route.params; - const isPhoneVerification = screenType === VerificationScreenType.Phone; + const {id} = route.params; - const handlePhoneVerification = async () => { - const success = await trackPromise(verifyOtp(id, value)); - if (success) { - navigation.navigate('RegistrationTwo', {phone: id}); - } - }; - - const handlePasswordVerification = async () => { - const success = await trackPromise( - handlePasswordCodeVerification(id, value), - ); - if (success) { - navigation.navigate('PasswordReset', {value: id}); - } - }; - - /** - * Sends the verify_otp request upon tapping the Verify button. - * If successful, it navigates to the respected page. - */ const handleVerification = async () => { if (codeRegex.test(value)) { try { - switch (screenType) { - case VerificationScreenType.Phone: - handlePhoneVerification(); - break; - case VerificationScreenType.Password: - handlePasswordVerification(); - break; + const success = await trackPromise( + handlePasswordCodeVerification(id, value), + ); + if (success) { + navigation.navigate('PasswordReset', {value: id}); } } catch (error) { console.log(error); @@ -106,34 +80,19 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => { */ const handleResend = async () => { try { - switch (screenType) { - case VerificationScreenType.Phone: - trackPromise(sendOtp(id)); - break; - case VerificationScreenType.Password: - trackPromise(handlePasswordResetRequest(id)); - break; - } + trackPromise(handlePasswordResetRequest(id)); } catch (error) { console.log(error); Alert.alert(ERROR_SOMETHING_WENT_WRONG); } }; - const handleGoBack = () => { - switch (screenType) { - case VerificationScreenType.Phone: - navigation.navigate('RegistrationOne'); - break; - case VerificationScreenType.Password: - navigation.navigate('PasswordResetRequest'); - break; - } - }; - const Footer = () => ( <View style={styles.footer}> - <ArrowButton direction="backward" onPress={() => handleGoBack()} /> + <ArrowButton + direction="backward" + onPress={() => navigation.navigate('PasswordResetRequest')} + /> </View> ); @@ -142,16 +101,9 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => { centered style={styles.container} gradientType={BackgroundGradientType.Light}> - {isPhoneVerification ? ( - <RegistrationWizard style={styles.wizard} step="three" /> - ) : ( - <React.Fragment /> - )} <KeyboardAvoidingView behavior="padding" - style={ - isPhoneVerification ? styles.form : styles.formPasswordVerification - }> + style={styles.formPasswordVerification}> <Text style={styles.formHeader}>Enter 6 digit code</Text> <Text style={styles.description}> We sent a 6 digit verification code to the phone number you provided. @@ -200,16 +152,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - wizard: { - marginTop: '3.5%', - flex: 1, - justifyContent: 'center', - }, - form: { - alignItems: 'center', - justifyContent: 'flex-start', - flex: 3, - }, formPasswordVerification: { alignItems: 'center', justifyContent: 'flex-start', @@ -261,9 +203,6 @@ const styles = StyleSheet.create({ button: { marginVertical: '5%', }, - loadingIndicator: { - marginVertical: '5%', - }, footer: { width: '100%', flexDirection: 'row', diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/screens/onboarding/UpdateRequired.tsx deleted file mode 100644 index adf7ba71..00000000 --- a/src/screens/onboarding/UpdateRequired.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; -import {Image, Linking, Modal, StyleSheet, View} from 'react-native'; -import {Text} from 'react-native-animatable'; -import {CenteredView, TaggSquareButton} from '../../components'; -import {normalize, SCREEN_WIDTH} from '../../utils'; - -interface UpdateRequiredProps { - visible: boolean; -} - -const UpdateRequired: React.FC<UpdateRequiredProps> = ({visible}) => { - return ( - <Modal animationType={'slide'} transparent={true} visible={visible}> - <CenteredView> - <View style={styles.contentContainer}> - <Image - style={styles.logo} - source={require('../../assets/images/logo-purple.png')} - /> - <Text style={styles.header}>Update Required</Text> - <Text style={styles.body}> - You have to update your app to continue using Tagg, please download - the latest version from the app store - </Text> - <TaggSquareButton - title={'Update'} - onPress={() => { - Linking.openURL( - 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613', - ); - }} - buttonStyle={'normal'} - buttonColor={'purple'} - labelColor={'white'} - labelStyle={styles.button} - /> - </View> - </CenteredView> - </Modal> - ); -}; - -const styles = StyleSheet.create({ - contentContainer: { - marginTop: '20%', - width: SCREEN_WIDTH * 0.9, - backgroundColor: 'white', - borderRadius: 5, - padding: '10%', - alignItems: 'center', - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 3.84, - elevation: 5, - }, - logo: { - width: normalize(60), - height: normalize(60), - marginBottom: '10%', - }, - header: { - fontSize: normalize(17), - fontWeight: '700', - lineHeight: 20, - marginBottom: '5%', - }, - body: { - fontSize: normalize(13), - color: 'grey', - lineHeight: 20, - textAlign: 'center', - width: SCREEN_WIDTH * 0.8, - marginBottom: '10%', - }, - button: { - fontWeight: '700', - }, -}); - -export default UpdateRequired; diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts index 49d7cfb9..7eb0587f 100644 --- a/src/screens/onboarding/index.ts +++ b/src/screens/onboarding/index.ts @@ -1,21 +1,10 @@ -export {default as Login} from './Login'; -export {default as RegistrationOne} from './RegistrationOne'; -export {default as RegistrationTwo} from './RegistrationTwo'; -export {default as RegistrationThree} from './RegistrationThree'; -export {default as Verification} from './Verification'; -export {default as Checkpoint} from './Checkpoint'; -export {default as ProfileOnboarding} from './ProfileOnboarding'; export {default as InvitationCodeVerification} from './InvitationCodeVerification'; -export {default as SocialMedia} from './SocialMedia'; -export {default as PasswordResetRequest} from './PasswordResetRequest'; -export {default as PasswordReset} from './PasswordReset'; -export {default as WelcomeScreen} from './WelcomeScreen'; -export {default as CategorySelection} from './CategorySelection'; -export {default as AddWaitlistUserScreen} from './AddWaitlistUserScreen'; -export {default as WaitlistSuccessScreen} from './WaitlistSuccessScreen'; -export {default as CreateCustomCategory} from './CreateCustomCategory'; -export {default as UpdateRequired} from './UpdateRequired'; +export {default as Login} from './Login'; export {default as OnboardingStepOne} from './OnboardingStepOne'; -export {default as PhoneVerification} from './PhoneVerification'; -export {default as OnboardingStepTwo} from './OnboardingStepTwo'; export {default as OnboardingStepThree} from './OnboardingStepThree'; +export {default as OnboardingStepTwo} from './OnboardingStepTwo'; +export {default as PasswordReset} from './PasswordReset'; +export {default as PasswordResetRequest} from './PasswordResetRequest'; +export {default as PhoneVerification} from './PhoneVerification'; +export {default as PasswordVerification} from './PasswordVerification'; +export {default as WelcomeScreen} from './WelcomeScreen'; diff --git a/src/screens/onboarding/AddWaitlistUserScreen.tsx b/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx index 489c30f1..489c30f1 100644 --- a/src/screens/onboarding/AddWaitlistUserScreen.tsx +++ b/src/screens/onboarding/legacy/AddWaitlistUserScreen.tsx diff --git a/src/screens/onboarding/Checkpoint.tsx b/src/screens/onboarding/legacy/Checkpoint.tsx index b0b42203..93ff0b7f 100644 --- a/src/screens/onboarding/Checkpoint.tsx +++ b/src/screens/onboarding/legacy/Checkpoint.tsx @@ -1,18 +1,17 @@ -import React from 'react'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; +import React from 'react'; import { - View, - Text, - StyleSheet, - StatusBar, Platform, + StatusBar, + StyleSheet, + Text, TouchableOpacity, + View, } from 'react-native'; - -import {OnboardingStackParams} from '../../routes'; -import {RegistrationWizard, Background} from '../../components'; -import {BackgroundGradientType} from '../../types'; +import {Background, RegistrationWizard} from '../../../components'; +import {OnboardingStackParams} from '../../../routes'; +import {BackgroundGradientType} from '../../../types'; type CheckpointRouteProp = RouteProp<OnboardingStackParams, 'Checkpoint'>; type CheckpointNavigationProp = StackNavigationProp< diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/legacy/ProfileOnboarding.tsx index c173c8e3..bf0863dc 100644 --- a/src/screens/onboarding/ProfileOnboarding.tsx +++ b/src/screens/onboarding/legacy/ProfileOnboarding.tsx @@ -20,7 +20,7 @@ import { TaggBigInput, TaggDropDown, TaggInput, -} from '../../components'; +} from '../../../components'; import { bioRegex, CLASS_YEAR_LIST, @@ -28,7 +28,7 @@ import { genderRegex, TAGG_PURPLE, websiteRegex, -} from '../../constants'; +} from '../../../constants'; import { ERROR_DOUBLE_CHECK_CONNECTION, ERROR_PROFILE_CREATION_SHORT, @@ -36,10 +36,10 @@ import { ERROR_SOMETHING_WENT_WRONG_REFRESH, ERROR_UPLOAD_LARGE_PROFILE_PIC, ERROR_UPLOAD_SMALL_PROFILE_PIC, -} from '../../constants/strings'; -import {OnboardingStackParams} from '../../routes/onboarding'; -import {BackgroundGradientType} from '../../types'; -import {SCREEN_WIDTH} from '../../utils'; +} from '../../../constants/strings'; +import {OnboardingStackParams} from '../../../routes/onboarding'; +import {BackgroundGradientType} from '../../../types'; +import {SCREEN_WIDTH} from '../../../utils'; type ProfileOnboardingScreenRouteProp = RouteProp< OnboardingStackParams, diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/legacy/RegistrationOne.tsx index c9822f76..4bcc2720 100644 --- a/src/screens/onboarding/RegistrationOne.tsx +++ b/src/screens/onboarding/legacy/RegistrationOne.tsx @@ -1,34 +1,31 @@ -import React, {useState, useRef} from 'react'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; +import React, {useRef, useState} from 'react'; import { - View, - Text, - StyleSheet, - StatusBar, Alert, + KeyboardAvoidingView, Platform, + StatusBar, + StyleSheet, + Text, TouchableOpacity, - KeyboardAvoidingView, + View, } from 'react-native'; - -import {OnboardingStackParams} from '../../routes'; - +import {trackPromise} from 'react-promise-tracker'; import { ArrowButton, - RegistrationWizard, - TaggInput, Background, LoadingIndicator, -} from '../../components'; - -import {trackPromise} from 'react-promise-tracker'; - -import {SEND_OTP_ENDPOINT} from '../../constants'; - -import {phoneRegex} from '../../constants'; -import {BackgroundGradientType, VerificationScreenType} from '../../types'; -import {ERROR_EMAIL_IN_USE, ERROR_SERVER_DOWN} from '../../constants/strings'; + RegistrationWizard, + TaggInput, +} from '../../../components'; +import {phoneRegex, SEND_OTP_ENDPOINT} from '../../../constants'; +import { + ERROR_EMAIL_IN_USE, + ERROR_SERVER_DOWN, +} from '../../../constants/strings'; +import {OnboardingStackParams} from '../../../routes'; +import {BackgroundGradientType, VerificationScreenType} from '../../../types'; type RegistrationScreenOneRouteProp = RouteProp< OnboardingStackParams, diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/legacy/RegistrationThree.tsx index 03348e6b..1f4266ff 100644 --- a/src/screens/onboarding/RegistrationThree.tsx +++ b/src/screens/onboarding/legacy/RegistrationThree.tsx @@ -3,38 +3,36 @@ * Purpose : Add a new screen to allow the user to enter first and last name */ -import React, {useState, useRef} from 'react'; +import AsyncStorage from '@react-native-community/async-storage'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; +import React, {useRef, useState} from 'react'; import { - View, - Text, - StyleSheet, - StatusBar, Alert, + KeyboardAvoidingView, Platform, + StatusBar, + StyleSheet, + Text, TouchableOpacity, - KeyboardAvoidingView, - ActivityIndicator, + View, } from 'react-native'; - -import {OnboardingStackParams} from '../../routes'; import { ArrowButton, + Background, + LoadingIndicator, RegistrationWizard, TaggInput, TermsConditions, - Background, - LoadingIndicator, } from '../../components'; -import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants'; -import AsyncStorage from '@react-native-community/async-storage'; -import {BackgroundGradientType} from '../../types'; +import {passwordRegex, REGISTER_ENDPOINT, usernameRegex} from '../../constants'; import { ERROR_DOUBLE_CHECK_CONNECTION, ERROR_REGISTRATION, ERROR_SOMETHING_WENT_WRONG_REFRESH, } from '../../constants/strings'; +import {OnboardingStackParams} from '../../routes'; +import {BackgroundGradientType} from '../../types'; type RegistrationScreenThreeRouteProp = RouteProp< OnboardingStackParams, diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/legacy/RegistrationTwo.tsx index 6d7b2226..2dd86f90 100644 --- a/src/screens/onboarding/RegistrationTwo.tsx +++ b/src/screens/onboarding/legacy/RegistrationTwo.tsx @@ -1,29 +1,26 @@ -import React, {useState, useRef} from 'react'; import {RouteProp} from '@react-navigation/native'; import {StackNavigationProp} from '@react-navigation/stack'; +import React, {useRef, useState} from 'react'; import { - View, - Text, - StyleSheet, - StatusBar, Alert, + KeyboardAvoidingView, Platform, + StatusBar, + StyleSheet, + Text, TouchableOpacity, - KeyboardAvoidingView, + View, } from 'react-native'; - -import {OnboardingStackParams} from '../../routes'; - import { ArrowButton, + Background, RegistrationWizard, TaggInput, - Background, } from '../../components'; - -import {nameRegex, emailRegex} from '../../constants'; -import {BackgroundGradientType} from '../../types'; +import {emailRegex, nameRegex} from '../../constants'; import {ERROR_NEXT_PAGE} from '../../constants/strings'; +import {OnboardingStackParams} from '../../routes'; +import {BackgroundGradientType} from '../../types'; type RegistrationScreenTwoRouteProp = RouteProp< OnboardingStackParams, diff --git a/src/screens/onboarding/SocialMedia.tsx b/src/screens/onboarding/legacy/SocialMedia.tsx index 2a978f94..db24830a 100644 --- a/src/screens/onboarding/SocialMedia.tsx +++ b/src/screens/onboarding/legacy/SocialMedia.tsx @@ -10,19 +10,18 @@ import { TouchableOpacity, View, } from 'react-native'; -import {useDispatch} from 'react-redux'; -import { - BackgroundGradientType, - CategorySelectionScreenType, - LinkerType, -} from '../..//types'; import { Background, LinkSocialMedia, RegistrationWizard, -} from '../../components'; -import {SOCIAL_LIST, MOMENT_CATEGORIES} from '../../constants/'; -import {OnboardingStackParams} from '../../routes'; +} from '../../../components'; +import {SOCIAL_LIST} from '../../../constants'; +import {OnboardingStackParams} from '../../../routes'; +import { + BackgroundGradientType, + CategorySelectionScreenType, + LinkerType, +} from '../../../types'; /** * Social Media Screen for displaying social media linkers diff --git a/src/screens/onboarding/legacy/TaggPopup.tsx b/src/screens/onboarding/legacy/TaggPopup.tsx new file mode 100644 index 00000000..e71a4d2a --- /dev/null +++ b/src/screens/onboarding/legacy/TaggPopup.tsx @@ -0,0 +1,143 @@ +import {BlurView} from '@react-native-community/blur'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import * as React from 'react'; +import {Platform, StyleSheet, Text, TouchableOpacity} from 'react-native'; +import {Image, View} from 'react-native-animatable'; +import {ArrowButton} from '../../../components/onboarding'; +import {OnboardingStackParams} from '../../../routes'; +import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../../utils'; +import CloseIcon from '../../../assets/ionicons/close-outline.svg'; + +type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>; +type TaggPopupNavigationProps = StackNavigationProp< + OnboardingStackParams, + 'TaggPopup' +>; + +interface TaggPopupProps { + route: TaggPopupRouteProps; + navigation: TaggPopupNavigationProps; +} + +const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => { + /** + * Custom popup / Tutorial screen for Tagg + * Just like a Singly Linked List, we have a next node + * if (next !== undefined) + * Display the next button and navigate to next popup node on click + * else + * Display close button, navigate back on close + */ + const {messageHeader, messageBody, next} = route.params.popupProps; + + return ( + <BlurView blurType="light" blurAmount={2} style={styles.container}> + <TouchableOpacity + style={styles.container} + onPressOut={() => { + navigation.goBack(); + }}> + <View style={styles.popup}> + <Image + style={styles.icon} + source={require('../../../assets/icons/notificationPrompts/plus-logo.png')} + /> + <View style={styles.textContainer}> + <Text style={styles.header}>{messageHeader}</Text> + <Text style={styles.subtext}>{messageBody}</Text> + </View> + {!next && ( + <TouchableOpacity + style={styles.closeButton} + onPress={() => { + navigation.goBack(); + }}> + <CloseIcon height={'50%'} width={'50%'} color={'white'} /> + </TouchableOpacity> + )} + </View> + {next && ( + <View style={styles.footer}> + <ArrowButton + direction="forward" + onPress={() => { + navigation.navigate('TaggPopup', {popupProps: next}); + }} + /> + </View> + )} + </TouchableOpacity> + </BlurView> + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + height: '100%', + }, + whiteColor: { + color: 'white', + }, + closeButton: { + position: 'relative', + height: '50%', + aspectRatio: 1, + left: '20%', + }, + textContainer: { + flex: 1, + flexDirection: 'column', + }, + icon: { + width: 40, + height: 40, + marginVertical: '1%', + }, + header: { + color: '#fff', + fontSize: SCREEN_WIDTH / 25, + fontWeight: '600', + textAlign: 'justify', + marginBottom: '2%', + marginLeft: '4%', + }, + subtext: { + color: '#fff', + fontSize: SCREEN_WIDTH / 30, + fontWeight: '600', + textAlign: 'justify', + marginBottom: '15%', + marginLeft: '3%', + }, + popup: { + width: SCREEN_WIDTH * 0.8, + height: SCREEN_WIDTH * 0.24, + backgroundColor: 'black', + borderRadius: 8, + flexDirection: 'row', + alignSelf: 'auto', + flexWrap: 'wrap', + position: 'absolute', + bottom: SCREEN_HEIGHT * 0.7, + padding: SCREEN_WIDTH / 40, + }, + footer: { + marginLeft: '50%', + flexDirection: 'column-reverse', + ...Platform.select({ + ios: { + bottom: '20%', + }, + android: { + bottom: '10%', + }, + }), + }, +}); +export default TaggPopup; diff --git a/src/screens/onboarding/WaitlistSuccessScreen.tsx b/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx index 1f603e3a..72bbec63 100644 --- a/src/screens/onboarding/WaitlistSuccessScreen.tsx +++ b/src/screens/onboarding/legacy/WaitlistSuccessScreen.tsx @@ -10,12 +10,12 @@ import { TouchableOpacity, View, } from 'react-native'; -import {ArrowButton, Background, SubmitButton} from '../../components'; -import {OnboardingStackParams} from '../../routes'; -import {BackgroundGradientType} from '../../types'; +import {ArrowButton, Background} from '../../../components'; +import {TAGG_WEBSITE} from '../../../constants'; +import {OnboardingStackParams} from '../../../routes'; +import {BackgroundGradientType} from '../../../types'; +import {SCREEN_HEIGHT} from '../../../utils'; import CelebrationLogo from '../../assets/icons/celebration-logo.svg'; -import {SCREEN_HEIGHT} from '../../utils'; -import {TAGG_WEBSITE} from '../../constants'; type WaitlistSuccessScreenProp = StackNavigationProp< OnboardingStackParams, |