1 files changed, 184 insertions, 0 deletions
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;