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

[TMA-718] Move Invite Friends to Notifications Screen

5 files changed, 64 insertions, 36 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 8143e396..8e008cf9 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -91,6 +91,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const onNotificationTap = async () => {
     switch (notification_type) {
+      case 'INVT_ONBRD':
       case 'FRD_ACPT':
       case 'FRD_REQ':
         if (!userXInStore(state, screenType, id)) {
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index ac724ae0..44f6bb48 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,9 +1,9 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Alert, Linking, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
 import {checkPermission} from 'react-native-contacts';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useDispatch, useSelector, useStore} from 'react-redux';
+import {useDispatch, useStore} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {usersFromContactsService} from '../../services';
 import {NO_USER} from '../../store/initialStates';
@@ -17,7 +17,6 @@ import {
 } from '../../utils';
 import {handleAddFriend, handleUnfriend} from '../../utils/friends';
 import {ProfilePreview} from '../profile';
-import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blue-icon.svg';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
@@ -88,34 +87,7 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
       {loggedInUser.userId === userId && (
         <View style={styles.subheader}>
           <View style={styles.addFriendHeaderContainer}>
-            <Text style={[styles.subheaderText]}>Add Friends</Text>
-            <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={20} height={20} />
-              <Text style={styles.findFriendsSubheaderText}>
-                Invite Friends
-              </Text>
-            </TouchableOpacity>
+            <Text style={[styles.subheaderText]}>Contacts on tagg</Text>
           </View>
           <UsersFromContacts />
         </View>
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;
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index 4af52349..a9fa1404 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -203,7 +203,7 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
               </Animated.View>
             </View>
             <View style={styles.subheader}>
-              <Text style={styles.subheaderText}>Add Friends</Text>
+              <Text style={styles.subheaderText}>Contacts on tagg</Text>
               <UsersFromContacts />
             </View>
             <View style={styles.subheader}>
diff --git a/src/types/types.ts b/src/types/types.ts
index 86f16f05..766bf798 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -246,7 +246,9 @@ export type TypeOfNotification =
   // notification_object is MomentType
   | 'MOM_3+'
   // notification_object is MomentType
-  | 'MOM_FRIEND';
+  | 'MOM_FRIEND'
+  // notification_object is undefined
+  | 'INVT_ONBRD';
 
 export type UniversityBadge = {
   id: number;