Tma 701 - New screens added, refactoring pending

29 files changed, 475 insertions, 9 deletions

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
--- /dev/null
+++ b/src/assets/images/blocked-white@3x.png
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
--- /dev/null
+++ b/src/assets/images/edit-profile@3x.png
diff --git a/src/assets/images/privacypolicy@3x.png b/src/assets/images/privacypolicy@3x.png
new file mode 100644
index 00000000..aa3402b2
--- /dev/null
+++ b/src/assets/images/privacypolicy@3x.png
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
--- /dev/null
+++ b/src/assets/images/settings/blocked-white.png
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
--- /dev/null
+++ b/src/assets/images/settings/blocked-white@2x.png
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
--- /dev/null
+++ b/src/assets/images/settings/edit-profile.png
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
--- /dev/null
+++ b/src/assets/images/settings/edit-profile@2x.png
diff --git a/src/assets/images/settings/privacypolicy.png b/src/assets/images/settings/privacypolicy.png
new file mode 100644
index 00000000..47792a3d
--- /dev/null
+++ b/src/assets/images/settings/privacypolicy.png
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
--- /dev/null
+++ b/src/assets/images/settings/privacypolicy@2x.png
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
--- /dev/null
+++ b/src/assets/images/settings/settings-white.png
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
--- /dev/null
+++ b/src/assets/images/settings/settings-white@2x.png
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
--- /dev/null
+++ b/src/assets/images/settings/settings-white@3x.png
diff --git a/src/assets/images/settings/settings.png b/src/assets/images/settings/settings.png
new file mode 100644
index 00000000..7445b8bf
--- /dev/null
+++ b/src/assets/images/settings/settings.png
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
--- /dev/null
+++ b/src/assets/images/settings/settings@2x.png
diff --git a/src/assets/images/settings/termsofuse.png b/src/assets/images/settings/termsofuse.png
new file mode 100644
index 00000000..82e90148
--- /dev/null
+++ b/src/assets/images/settings/termsofuse.png
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
--- /dev/null
+++ b/src/assets/images/settings/termsofuse@2x.png
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
--- /dev/null
+++ b/src/assets/images/settings/white-arrow.png
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
--- /dev/null
+++ b/src/assets/images/settings/white-arrow@2x.png
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
--- /dev/null
+++ b/src/assets/images/settings/white-arrow@3x.png
diff --git a/src/assets/images/settings@3x.png b/src/assets/images/settings@3x.png
new file mode 100644
index 00000000..4844d30f
--- /dev/null
+++ b/src/assets/images/settings@3x.png
diff --git a/src/assets/images/termsofuse@3x.png b/src/assets/images/termsofuse@3x.png
new file mode 100644
index 00000000..7d253196
--- /dev/null
+++ b/src/assets/images/termsofuse@3x.png
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<ProfileMoreInfoDrawerProps> = (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<ProfileMoreInfoDrawerProps> = (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<ProfileMoreInfoDrawerProps> = (props) => {
           textColor={'black'}
           buttons={[
             [
-              'Edit Suggested',
-              goToUpdateSPProfile,
+              'Settings',
+              goToSettingsPage,
               <Image
-                source={require('../../assets/ionicons/suggested-outlined.png')}
+                source={require('../../assets/images/settings/settings.png')}
+                style={styles.image}
+              />,
+            ],
+            [
+              'Edit Profile',
+              goToEditProfile,
+              <Image
+                source={require('../../assets/images/settings/edit-profile.png')}
                 style={styles.image}
               />,
             ],
-            ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
           ]}
         />
       )}
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';
@@ -151,6 +154,27 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         }}
       />
       <MainStack.Screen
+        name="SettingsScreen"
+        component={SettingsScreen}
+        options={{
+          ...headerBarOptions('white', 'Settings and Privacy'),
+        }}
+      />
+      <MainStack.Screen
+        name="PrivacyScreen"
+        component={PrivacyScreen}
+        options={{
+          ...headerBarOptions('white', 'Privacy'),
+        }}
+      />
+      <MainStack.Screen
+        name="AccountTypeScreen"
+        component={AccountType}
+        options={{
+          ...headerBarOptions('white', 'Account Type'),
+        }}
+      />
+      <MainStack.Screen
         name="AnimatedTutorial"
         component={AnimatedTutorial}
         options={{
diff --git a/src/screens/profile/AccountType.tsx b/src/screens/profile/AccountType.tsx
new file mode 100644
index 00000000..dedf4420
--- /dev/null
+++ b/src/screens/profile/AccountType.tsx
@@ -0,0 +1,87 @@
+import React, {useEffect, useState} from 'react';
+import {StatusBar, StyleSheet, Switch, Text, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {Background} from '../../components';
+import {BackgroundGradientType} from '../../types';
+import {normalize} from '../../utils/layouts';
+
+const AccountType: React.FC = () => {
+  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 (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={{marginLeft: 28, marginRight: 43, marginTop: '20%'}}>
+            <View style={{flexDirection: 'row', alignItems: 'center'}}>
+              <Text style={styles.title}>{getAccountText()}</Text>
+              <Switch
+                trackColor={{false: 'red', true: '#6EE7E7'}}
+                thumbColor={'white'}
+                ios_backgroundColor="transparent"
+                style={{
+                  position: 'absolute',
+                  right: 0,
+                  borderWidth: 2,
+                  borderColor: 'white',
+                }}
+                value={isPrivateAccount}
+                onValueChange={switchAccountType}></Switch>
+            </View>
+
+            <View style={{marginTop: '40%'}}>
+              <Text style={styles.detailTitleStyle}>
+                Enabling a public account will:
+              </Text>
+              <Text style={styles.detailContentStyle}>
+                {'\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
+              </Text>
+            </View>
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+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;
+  }) => (
+    <TouchableOpacity onPress={() => getActions(title)} style={styles.item}>
+      <Image style={{width: 15, height: 15}} source={preimage} />
+      <View style={{marginLeft: 40}}>
+        <Text style={styles.title}>{title}</Text>
+      </View>
+      <View style={[styles.item, {position: 'absolute', right: 0}]}>
+        {title === 'Account Type' && (
+          <Text style={[styles.title, {color: '#C4C4C4', marginRight: 13}]}>
+            {'Private'}
+          </Text>
+        )}
+        <Image style={{width: 15, height: 15}} source={postimage} />
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={{marginLeft: 28, marginRight: 43}}>
+            <SectionList
+              sections={DATA}
+              keyExtractor={(item, index) => item.title + index}
+              renderItem={({item: {title, preimage, postimage}}) => {
+                return <Item {...{title, preimage, postimage}} />;
+              }}
+              renderSectionHeader={({section: {title}}) => {
+                if (title.length === 0) {
+                  return null;
+                }
+                return (
+                  <View style={{marginTop: 46}}>
+                    <Text style={styles.header}>{title}</Text>
+                  </View>
+                );
+              }}
+            />
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+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;
+  }) => (
+    <TouchableOpacity onPress={() => getActions(title)} style={styles.item}>
+      <Image style={{width: 15, height: 15}} source={preimage} />
+      <View style={{marginLeft: 40}}>
+        <Text style={styles.title}>{title}</Text>
+      </View>
+      <Image
+        style={{width: 15, height: 15, position: 'absolute', right: 0}}
+        source={postimage}
+      />
+    </TouchableOpacity>
+  );
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={{marginLeft: 28, marginRight: 43}}>
+            <SectionList
+              sections={DATA}
+              keyExtractor={(item, index) => item.title + index}
+              renderItem={({item: {title, preimage, postimage}}) => {
+                return <Item {...{title, preimage, postimage}} />;
+              }}
+              renderSectionHeader={({section: {title}}) => (
+                <View style={{marginTop: 46}}>
+                  <Text style={styles.header}>{title}</Text>
+                </View>
+              )}
+              ListFooterComponent={() => (
+                <TouchableOpacity
+                  style={{marginTop: '20%', marginLeft: '12%'}}
+                  onPress={() => {
+                    navigation.reset({
+                      index: 0,
+                      routes: [{name: 'SuggestedPeople'}],
+                    });
+                    dispatch(logout());
+                  }}>
+                  <Text style={styles.logoutStyle}>Logout</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+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<string>
 > => async (dispatch) => {
   try {
+    AsyncStorage.clear();
     dispatch({type: userLoggedIn.type, payload: {userId: '', username: ''}});
   } catch (error) {
     console.log(error);