From ad70d44fd106c475ff3ecd680ebb41946e4dc363 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Wed, 17 Mar 2021 15:59:53 -0700 Subject: Tma 701 - New screens added, refactoring pending --- src/assets/images/blocked-white@3x.png | Bin 0 -> 1020 bytes src/assets/images/edit-profile@3x.png | Bin 0 -> 770 bytes src/assets/images/privacypolicy@3x.png | Bin 0 -> 519 bytes src/assets/images/settings/blocked-white.png | Bin 0 -> 367 bytes src/assets/images/settings/blocked-white@2x.png | Bin 0 -> 685 bytes src/assets/images/settings/edit-profile.png | Bin 0 -> 341 bytes src/assets/images/settings/edit-profile@2x.png | Bin 0 -> 582 bytes src/assets/images/settings/privacypolicy.png | Bin 0 -> 283 bytes src/assets/images/settings/privacypolicy@2x.png | Bin 0 -> 371 bytes src/assets/images/settings/settings-white.png | Bin 0 -> 400 bytes src/assets/images/settings/settings-white@2x.png | Bin 0 -> 871 bytes src/assets/images/settings/settings-white@3x.png | Bin 0 -> 1393 bytes src/assets/images/settings/settings.png | Bin 0 -> 508 bytes src/assets/images/settings/settings@2x.png | Bin 0 -> 967 bytes src/assets/images/settings/termsofuse.png | Bin 0 -> 373 bytes src/assets/images/settings/termsofuse@2x.png | Bin 0 -> 600 bytes src/assets/images/settings/white-arrow.png | Bin 0 -> 240 bytes src/assets/images/settings/white-arrow@2x.png | Bin 0 -> 355 bytes src/assets/images/settings/white-arrow@3x.png | Bin 0 -> 415 bytes src/assets/images/settings@3x.png | Bin 0 -> 1433 bytes src/assets/images/termsofuse@3x.png | Bin 0 -> 939 bytes src/components/profile/ProfileMoreInfoDrawer.tsx | 22 +-- src/routes/main/MainStackNavigator.tsx | 3 + src/routes/main/MainStackScreen.tsx | 24 +++ src/screens/profile/AccountType.tsx | 87 +++++++++++ src/screens/profile/PrivacyScreen.tsx | 159 ++++++++++++++++++++ src/screens/profile/SettingsScreen.tsx | 184 +++++++++++++++++++++++ src/screens/profile/index.ts | 3 + src/store/actions/user.ts | 2 + 29 files changed, 475 insertions(+), 9 deletions(-) create mode 100644 src/assets/images/blocked-white@3x.png create mode 100644 src/assets/images/edit-profile@3x.png create mode 100644 src/assets/images/privacypolicy@3x.png create mode 100644 src/assets/images/settings/blocked-white.png create mode 100644 src/assets/images/settings/blocked-white@2x.png create mode 100644 src/assets/images/settings/edit-profile.png create mode 100644 src/assets/images/settings/edit-profile@2x.png create mode 100644 src/assets/images/settings/privacypolicy.png create mode 100644 src/assets/images/settings/privacypolicy@2x.png create mode 100644 src/assets/images/settings/settings-white.png create mode 100644 src/assets/images/settings/settings-white@2x.png create mode 100644 src/assets/images/settings/settings-white@3x.png create mode 100644 src/assets/images/settings/settings.png create mode 100644 src/assets/images/settings/settings@2x.png create mode 100644 src/assets/images/settings/termsofuse.png create mode 100644 src/assets/images/settings/termsofuse@2x.png create mode 100644 src/assets/images/settings/white-arrow.png create mode 100644 src/assets/images/settings/white-arrow@2x.png create mode 100644 src/assets/images/settings/white-arrow@3x.png create mode 100644 src/assets/images/settings@3x.png create mode 100644 src/assets/images/termsofuse@3x.png create mode 100644 src/screens/profile/AccountType.tsx create mode 100644 src/screens/profile/PrivacyScreen.tsx create mode 100644 src/screens/profile/SettingsScreen.tsx (limited to 'src') diff --git a/src/assets/images/blocked-white@3x.png b/src/assets/images/blocked-white@3x.png new file mode 100644 index 00000000..06eeb651 Binary files /dev/null and b/src/assets/images/blocked-white@3x.png differ diff --git a/src/assets/images/edit-profile@3x.png b/src/assets/images/edit-profile@3x.png new file mode 100644 index 00000000..8ba76b18 Binary files /dev/null and b/src/assets/images/edit-profile@3x.png differ diff --git a/src/assets/images/privacypolicy@3x.png b/src/assets/images/privacypolicy@3x.png new file mode 100644 index 00000000..aa3402b2 Binary files /dev/null and b/src/assets/images/privacypolicy@3x.png differ diff --git a/src/assets/images/settings/blocked-white.png b/src/assets/images/settings/blocked-white.png new file mode 100644 index 00000000..ec3750af Binary files /dev/null and b/src/assets/images/settings/blocked-white.png differ diff --git a/src/assets/images/settings/blocked-white@2x.png b/src/assets/images/settings/blocked-white@2x.png new file mode 100644 index 00000000..1f39ba06 Binary files /dev/null and b/src/assets/images/settings/blocked-white@2x.png differ diff --git a/src/assets/images/settings/edit-profile.png b/src/assets/images/settings/edit-profile.png new file mode 100644 index 00000000..c096a32a Binary files /dev/null and b/src/assets/images/settings/edit-profile.png differ diff --git a/src/assets/images/settings/edit-profile@2x.png b/src/assets/images/settings/edit-profile@2x.png new file mode 100644 index 00000000..4753e0a3 Binary files /dev/null and b/src/assets/images/settings/edit-profile@2x.png differ diff --git a/src/assets/images/settings/privacypolicy.png b/src/assets/images/settings/privacypolicy.png new file mode 100644 index 00000000..47792a3d Binary files /dev/null and b/src/assets/images/settings/privacypolicy.png differ diff --git a/src/assets/images/settings/privacypolicy@2x.png b/src/assets/images/settings/privacypolicy@2x.png new file mode 100644 index 00000000..31a1aeb2 Binary files /dev/null and b/src/assets/images/settings/privacypolicy@2x.png differ diff --git a/src/assets/images/settings/settings-white.png b/src/assets/images/settings/settings-white.png new file mode 100644 index 00000000..f571e4b0 Binary files /dev/null and b/src/assets/images/settings/settings-white.png differ diff --git a/src/assets/images/settings/settings-white@2x.png b/src/assets/images/settings/settings-white@2x.png new file mode 100644 index 00000000..6d59c672 Binary files /dev/null and b/src/assets/images/settings/settings-white@2x.png differ diff --git a/src/assets/images/settings/settings-white@3x.png b/src/assets/images/settings/settings-white@3x.png new file mode 100644 index 00000000..0019b29c Binary files /dev/null and b/src/assets/images/settings/settings-white@3x.png differ diff --git a/src/assets/images/settings/settings.png b/src/assets/images/settings/settings.png new file mode 100644 index 00000000..7445b8bf Binary files /dev/null and b/src/assets/images/settings/settings.png differ diff --git a/src/assets/images/settings/settings@2x.png b/src/assets/images/settings/settings@2x.png new file mode 100644 index 00000000..8a152c70 Binary files /dev/null and b/src/assets/images/settings/settings@2x.png differ diff --git a/src/assets/images/settings/termsofuse.png b/src/assets/images/settings/termsofuse.png new file mode 100644 index 00000000..82e90148 Binary files /dev/null and b/src/assets/images/settings/termsofuse.png differ diff --git a/src/assets/images/settings/termsofuse@2x.png b/src/assets/images/settings/termsofuse@2x.png new file mode 100644 index 00000000..5e0fe642 Binary files /dev/null and b/src/assets/images/settings/termsofuse@2x.png differ diff --git a/src/assets/images/settings/white-arrow.png b/src/assets/images/settings/white-arrow.png new file mode 100644 index 00000000..7c60d262 Binary files /dev/null and b/src/assets/images/settings/white-arrow.png differ diff --git a/src/assets/images/settings/white-arrow@2x.png b/src/assets/images/settings/white-arrow@2x.png new file mode 100644 index 00000000..13cce59a Binary files /dev/null and b/src/assets/images/settings/white-arrow@2x.png differ diff --git a/src/assets/images/settings/white-arrow@3x.png b/src/assets/images/settings/white-arrow@3x.png new file mode 100644 index 00000000..48ed872a Binary files /dev/null and b/src/assets/images/settings/white-arrow@3x.png differ diff --git a/src/assets/images/settings@3x.png b/src/assets/images/settings@3x.png new file mode 100644 index 00000000..4844d30f Binary files /dev/null and b/src/assets/images/settings@3x.png differ diff --git a/src/assets/images/termsofuse@3x.png b/src/assets/images/termsofuse@3x.png new file mode 100644 index 00000000..7d253196 Binary files /dev/null and b/src/assets/images/termsofuse@3x.png differ diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index a77a2e84..d62063a7 100644 --- a/src/components/profile/ProfileMoreInfoDrawer.tsx +++ b/src/components/profile/ProfileMoreInfoDrawer.tsx @@ -3,7 +3,6 @@ import React from 'react'; import {Alert, Image, StyleSheet, TouchableOpacity} from 'react-native'; import {useSelector} from 'react-redux'; import MoreIcon from '../../assets/icons/more_horiz-24px.svg'; -import PersonOutline from '../../assets/ionicons/person-outline.svg'; import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants'; import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings'; import {RootState} from '../../store/rootreducer'; @@ -29,7 +28,7 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { const isOwnProfile = !userXId || userXName === username; const goToEditProfile = () => { - navigation.push('EditProfile', { + navigation.navigate('EditProfile', { userId: userId, username: username, }); @@ -41,9 +40,7 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { Alert.alert(ERROR_ATTEMPT_EDIT_SP); } else { // Sending undefined for updatedSelectedBadges to mark that there was no update yet - navigation.push('UpdateSPPicture', { - editing: true, - }); + navigation.navigate('SettingsScreen'); setIsOpen(false); } }; @@ -81,14 +78,21 @@ const ProfileMoreInfoDrawer: React.FC = (props) => { textColor={'black'} buttons={[ [ - 'Edit Suggested', - goToUpdateSPProfile, + 'Settings', + goToSettingsPage, , + ], + [ + 'Edit Profile', + goToEditProfile, + , ], - ['Edit Profile', goToEditProfile, ], ]} /> )} diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 26d9943b..4563ec95 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -28,6 +28,9 @@ export type MainStackParams = { userXId: string | undefined; screenType: ScreenType; }; + SettingsScreen: {}; + PrivacyScreen: {}; + AccountTypeScreen: {}; SocialMediaTaggs: { socialMediaType: string; userXId: string | undefined; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 8cefd3cc..d855f0df 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -6,6 +6,7 @@ import {StyleSheet, Text} from 'react-native'; import {normalize} from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { + AccountType, AnimatedTutorial, BadgeSelection, CaptionScreen, @@ -20,12 +21,14 @@ import { MomentUploadPromptScreen, NotificationsScreen, ProfileScreen, + PrivacyScreen, RequestContactsAccess, SearchScreen, SocialMediaTaggs, SuggestedPeopleScreen, SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, + SettingsScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -150,6 +153,27 @@ const MainStackScreen: React.FC = ({route}) => { ...headerBarOptions('white', 'Discover Users'), }} /> + + + { + const [isPrivateAccount, setIsPrivateAccount] = useState(false); + const switchAccountType = () => + setIsPrivateAccount((previousState) => !previousState); + + useEffect(() => { + // Fetching from Redux and Set the result + // setIsPrivateAccount(true); + }, []); + + const getAccountText = () => { + return isPrivateAccount ? 'Private Account' : 'Public Account'; + }; + + return ( + <> + + + + + + {getAccountText()} + + + + + + Enabling a public account will: + + + {'\n'}Everyone can view my posts{'\n'} + {'\n'}Everyone can send me friend requests{'\n'} + {'\n'}Everyone can tagg me{'\n'} + {'\n'}Everyone can send me direct messages + + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + title: { + fontSize: normalize(18), + fontWeight: '600', + lineHeight: normalize(17.9), + color: 'white', + }, + + detailTitleStyle: { + fontSize: normalize(19), + fontWeight: '700', + lineHeight: normalize(22.67), + color: 'white', + }, + detailContentStyle: { + fontSize: normalize(14), + fontWeight: '600', + lineHeight: normalize(16.71), + color: 'white', + }, +}); + +export default AccountType; diff --git a/src/screens/profile/PrivacyScreen.tsx b/src/screens/profile/PrivacyScreen.tsx new file mode 100644 index 00000000..e92769fc --- /dev/null +++ b/src/screens/profile/PrivacyScreen.tsx @@ -0,0 +1,159 @@ +import React from 'react'; +import { + Alert, + Image, + SectionList, + StatusBar, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {normalize} from '../../utils/layouts'; +import {Background} from '../../components'; +import {BackgroundGradientType} from '../../types'; +import {logout} from '../../store/actions'; +import {useDispatch, useSelector} from 'react-redux'; +import {useNavigation} from '@react-navigation/core'; +import {RootState} from 'src/store/rootReducer'; +import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings'; + +const DATA = [ + { + title: '', + data: [ + { + title: 'Account Type', + preimage: require('../../assets/images/tagg-logo.png'), + postimage: require('../../assets/images/settings/white-arrow.png'), + }, + { + title: 'Blocked Accounts', + preimage: require('../../assets/images/settings/blocked-white.png'), + postimage: require('../../assets/images/settings/white-arrow.png'), + }, + ], + }, +]; + +const PrivacyScreen: React.FC = () => { + const dispatch = useDispatch(); + const navigation = useNavigation(); + const {suggested_people_linked} = useSelector( + (state: RootState) => state.user.profile, + ); + const goToUpdateSPProfile = () => { + if (suggested_people_linked === 0) { + Alert.alert(ERROR_ATTEMPT_EDIT_SP); + } else { + // Sending undefined for updatedSelectedBadges to mark that there was no update yet + navigation.navigate('UpdateSPPicture', { + editing: true, + }); + } + }; + + const getActions = (type: string) => { + switch (type) { + case 'Account Type': + navigateTo('AccountTypeScreen', {}); + break + case 'Blocked Accounts': + navigateTo('Blocked Accounts', {}); + break + default: + break; + } + }; + + const navigateTo = (screen: string, options: object) => { + navigation.navigate(screen, options); + }; + + const Item = ({ + title, + preimage, + postimage, + }: { + title: string; + preimage: number; + postimage: number; + }) => ( + getActions(title)} style={styles.item}> + + + {title} + + + {title === 'Account Type' && ( + + {'Private'} + + )} + + + + ); + + return ( + <> + + + + + item.title + index} + renderItem={({item: {title, preimage, postimage}}) => { + return ; + }} + renderSectionHeader={({section: {title}}) => { + if (title.length === 0) { + return null; + } + return ( + + {title} + + ); + }} + /> + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + item: { + marginTop: 36, + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + }, + header: { + fontSize: normalize(18), + fontWeight: '600', + lineHeight: normalize(21.48), + color: '#E9E9E9', + }, + title: { + fontSize: normalize(15), + fontWeight: '600', + lineHeight: normalize(17.9), + color: 'white', + }, + logoutStyle: { + fontSize: normalize(20), + fontWeight: '600', + lineHeight: normalize(23.87), + color: 'white', + }, +}); + +export default PrivacyScreen; diff --git a/src/screens/profile/SettingsScreen.tsx b/src/screens/profile/SettingsScreen.tsx new file mode 100644 index 00000000..79633572 --- /dev/null +++ b/src/screens/profile/SettingsScreen.tsx @@ -0,0 +1,184 @@ +import React from 'react'; +import { + Alert, + Image, + SectionList, + StatusBar, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import {SafeAreaView} from 'react-native-safe-area-context'; +import {normalize} from '../../utils/layouts'; +import {Background} from '../../components'; +import {BackgroundGradientType} from '../../types'; +import {logout} from '../../store/actions'; +import {useDispatch, useSelector} from 'react-redux'; +import {useNavigation} from '@react-navigation/core'; +import {RootState} from 'src/store/rootReducer'; +import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings'; + +const DATA = [ + { + title: 'ACCOUNT', + data: [ + { + title: 'Suggested People Profile', + preimage: require('../../assets/images/tagg-logo.png'), + postimage: require('../../assets/images/settings/white-arrow.png'), + }, + { + title: 'Privacy', + preimage: require('../../assets/images/settings/settings-white.png'), + postimage: require('../../assets/images/settings/white-arrow.png'), + }, + ], + }, + { + title: 'GENERAL', + data: [ + { + title: 'Terms of use', + preimage: require('../../assets/images/settings/termsofuse.png'), + postimage: require('../../assets/images/settings/white-arrow.png'), + }, + { + title: 'Privacy Policy', + preimage: require('../../assets/images/settings/privacypolicy.png'), + postimage: require('../../assets/images/settings/white-arrow.png'), + }, + ], + }, +]; + +const SettingsScreen: React.FC = () => { + const dispatch = useDispatch(); + const navigation = useNavigation(); + const {suggested_people_linked} = useSelector( + (state: RootState) => state.user.profile, + ); + const goToUpdateSPProfile = () => { + if (suggested_people_linked === 0) { + Alert.alert(ERROR_ATTEMPT_EDIT_SP); + } else { + // Sending undefined for updatedSelectedBadges to mark that there was no update yet + navigateTo('UpdateSPPicture', { + editing: true, + }); + } + }; + + const navigateTo = (screen: string, options: object) => { + navigation.navigate(screen, options); + }; + + const getActions = (type: string) => { + switch (type) { + case 'Suggested People Profile': + goToUpdateSPProfile(); + break; + case 'Privacy': + navigateTo('PrivacyScreen', {}); + break; + case 'Terms of use': + //TODO: + break; + case 'Privacy Policy': + //TODO: + break; + default: + break; + } + }; + + const Item = ({ + title, + preimage, + postimage, + }: { + title: string; + preimage: number; + postimage: number; + }) => ( + getActions(title)} style={styles.item}> + + + {title} + + + + ); + + return ( + <> + + + + + item.title + index} + renderItem={({item: {title, preimage, postimage}}) => { + return ; + }} + renderSectionHeader={({section: {title}}) => ( + + {title} + + )} + ListFooterComponent={() => ( + { + navigation.reset({ + index: 0, + routes: [{name: 'SuggestedPeople'}], + }); + dispatch(logout()); + }}> + Logout + + )} + /> + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + item: { + marginTop: 36, + flexDirection: 'row', + justifyContent: 'flex-start', + alignItems: 'center', + }, + header: { + fontSize: normalize(18), + fontWeight: '600', + lineHeight: normalize(21.48), + color: '#E9E9E9', + }, + title: { + fontSize: normalize(15), + fontWeight: '600', + lineHeight: normalize(17.9), + color: 'white', + }, + logoutStyle: { + fontSize: normalize(20), + fontWeight: '600', + lineHeight: normalize(23.87), + color: 'white', + }, +}); + +export default SettingsScreen; diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts index f74946a6..b7efdd3b 100644 --- a/src/screens/profile/index.ts +++ b/src/screens/profile/index.ts @@ -7,3 +7,6 @@ export {default as FriendsListScreen} from './FriendsListScreen'; export {default as EditProfile} from './EditProfile'; export {default as MomentUploadPromptScreen} from './MomentUploadPromptScreen'; export {default as InviteFriendsScreen} from './InviteFriendsScreen'; +export {default as SettingsScreen} from './SettingsScreen'; +export {default as PrivacyScreen} from './PrivacyScreen'; +export {default as AccountType} from './AccountType'; diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 46f96d9a..cb5e3dc1 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,3 +1,4 @@ +import AsyncStorage from '@react-native-community/async-storage'; import {Action, ThunkAction} from '@reduxjs/toolkit'; import { getProfilePic, @@ -157,6 +158,7 @@ export const logout = (): ThunkAction< Action > => async (dispatch) => { try { + AsyncStorage.clear(); dispatch({type: userLoggedIn.type, payload: {userId: '', username: ''}}); } catch (error) { console.log(error); -- cgit v1.2.3-70-g09d2