Merge pull request #342 from shravyaramesh/tma718-move-invite-friends

[TMA-718] Move Invite Friends to Notifications Screen

1 files changed, 56 insertions, 3 deletions

diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 4697704c..48e89f7a 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -1,9 +1,12 @@
 import AsyncStorage from '@react-native-community/async-storage';
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blue-icon.svg';
 import moment from 'moment';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
+  Alert,
   Image,
+  Linking,
   RefreshControl,
   SectionList,
   StatusBar,
@@ -11,12 +14,16 @@ import {
   Text,
   View,
 } from 'react-native';
+import {checkPermission} from 'react-native-contacts';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {PrivateAccountsPrompt} from '../../components/notifications/NotificationPrompts';
 import {TabsGradient} from '../../components';
-import {Notification} from '../../components/notifications';
+import {
+  InviteFriendsPrompt,
+  Notification,
+} from '../../components/notifications';
 import {
   loadUserNotifications,
   updateNewNotificationReceived,
@@ -247,12 +254,43 @@ const NotificationsScreen: React.FC = () => {
     return null;
   };
 
+  const navigation = useNavigation();
+
+  const InviteFriends = () => (
+    <TouchableOpacity
+      style={styles.findFriendsButton}
+      onPress={async () => {
+        const permission = await checkPermission();
+        if (permission === 'authorized') {
+          navigation.navigate('InviteFriendsScreen', {
+            screenType: ScreenType.Profile,
+          });
+        } else {
+          Alert.alert(
+            '"Tagg" Would Like to Access Your Contacts',
+            'This helps you quickly get in touch with friends on the app and more',
+            [
+              {
+                text: "Don't Allow",
+                style: 'cancel',
+              },
+              {text: 'Allow', onPress: () => Linking.openSettings()},
+            ],
+          );
+        }
+      }}>
+      <FindFriendsBlueIcon width={18} height={18} />
+      <Text style={styles.findFriendsSubheaderText}>Invite Friends</Text>
+    </TouchableOpacity>
+  );
+
   return (
     <View style={styles.background}>
       <SafeAreaView>
         <StatusBar barStyle="dark-content" />
         <View style={styles.header}>
           <Text style={styles.headerText}>Notifications</Text>
+          <InviteFriends />
         </View>
         <SectionList
           contentContainerStyle={styles.container}
@@ -289,7 +327,10 @@ const styles = StyleSheet.create({
     marginLeft: '8%',
     marginTop: '5%',
     alignSelf: 'flex-start',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    justifyContent: 'space-between',
+    width: SCREEN_WIDTH * 0.85,
   },
   headerText: {
     fontWeight: '700',
@@ -330,6 +371,18 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  findFriendsButton: {
+    flexDirection: 'row',
+    height: 14,
+    marginTop: '5%',
+  },
+  findFriendsSubheaderText: {
+    marginLeft: '5%',
+    color: '#08E2E2',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+  },
 });
 
 export default NotificationsScreen;