Merge pull request #407 from brian-tagg/newFeatureMessaging

[TMA-837] New feature messaging

4 files changed, 50 insertions, 5 deletions

diff --git a/src/assets/icons/notificationPrompts/message_notification-07.png b/src/assets/icons/notificationPrompts/message_notification-07.png
new file mode 100644
index 00000000..b0db08ea
--- /dev/null
+++ b/src/assets/icons/notificationPrompts/message_notification-07.png
diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index 6b59d4a5..0bf25c3c 100644
--- a/src/components/common/TaggPrompt.tsx
+++ b/src/components/common/TaggPrompt.tsx
@@ -1,13 +1,22 @@
 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
 import {Image, View} from 'react-native-animatable';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {normalize, SCREEN_HEIGHT} from '../../utils';
+import {useNavigation} from '@react-navigation/core';
 
 type TaggPromptProps = {
   messageHeader: string;
   messageBody: string | Element;
-  logoType: 'plus' | 'tagg' | 'invite_friends' | 'private_accounts';
+  logoType: 'plus' | 'tagg' | 'invite_friends' | 'private_accounts' | 'chat';
+  logoLink?: string;
+  externalStyles?: Record<string, StyleProp<ImageStyle>>;
   hideCloseButton?: boolean;
   noPadding?: boolean;
   onClose: () => void;
@@ -17,6 +26,8 @@ const TaggPrompt: React.FC<TaggPromptProps> = ({
   messageHeader,
   messageBody,
   logoType,
+  logoLink,
+  externalStyles,
   hideCloseButton,
   noPadding,
   onClose,
@@ -33,6 +44,8 @@ const TaggPrompt: React.FC<TaggPromptProps> = ({
         return require('../../assets/icons/notificationPrompts/invite-friends-prompt-icon.png');
       case 'private_accounts':
         return require('../../assets/icons/notificationPrompts/private-accounts-prompt-icon.png');
+      case 'chat':
+        return require('../../assets/icons/notificationPrompts/message_notification-07.png');
       case 'tagg':
       default:
         return require('../../assets/images/logo-purple.png');
@@ -42,9 +55,18 @@ const TaggPrompt: React.FC<TaggPromptProps> = ({
   const topPadding = {paddingTop: noPadding ? 0 : SCREEN_HEIGHT / 10};
   const bottomPadding = {paddingBottom: noPadding ? 0 : SCREEN_HEIGHT / 50};
 
+  const navigation = useNavigation();
+
   return (
     <View style={[styles.container, topPadding, bottomPadding]}>
-      <Image style={styles.icon} source={logo()} />
+      <TouchableOpacity
+        disabled={logoLink ? false : true}
+        onPress={() => logoLink && navigation.navigate(logoLink)}>
+        <Image
+          style={externalStyles?.icon ? externalStyles.icon : styles.icon}
+          source={logo()}
+        />
+      </TouchableOpacity>
       <Text style={styles.header}>{messageHeader}</Text>
       <Text style={styles.subtext}>{messageBody}</Text>
       {!hideCloseButton && (
diff --git a/src/components/notifications/NotificationPrompts.tsx b/src/components/notifications/NotificationPrompts.tsx
index 386b45e6..06f6ecc6 100644
--- a/src/components/notifications/NotificationPrompts.tsx
+++ b/src/components/notifications/NotificationPrompts.tsx
@@ -1,5 +1,6 @@
 import React, {Fragment} from 'react';
 import {Image, StyleSheet, Text} from 'react-native';
+import {normalize, SCREEN_WIDTH} from '../../utils';
 import {TaggPrompt} from '../common';
 
 export const InviteFriendsPrompt: React.FC = () => {
@@ -32,6 +33,28 @@ export const PrivateAccountsPrompt: React.FC = () => {
   );
 };
 
+export const NewChatPrompt: React.FC = () => {
+  const handWaveRegex = '\u{1F44B}';
+  const message = `Introducing messaging, another way to engage with\nfriends on campus! Send a ${handWaveRegex} to a friend now!`;
+  return (
+    <TaggPrompt
+      messageHeader={'Chat!'}
+      messageBody={message}
+      logoType={'chat'}
+      logoLink={'ChatList'}
+      externalStyles={{
+        icon: {
+          width: SCREEN_WIDTH * 0.9,
+          height: normalize(70),
+        },
+      }}
+      hideCloseButton={true}
+      noPadding={true}
+      onClose={() => {}}
+    />
+  );
+};
+
 interface SPPromptNotificationProps {
   showSPNotifyPopUp: boolean;
 }
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 9fbc4cfe..7e2f082c 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -20,7 +20,7 @@ import {useDispatch, useSelector} from 'react-redux';
 import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blue-icon.svg';
 import {TabsGradient} from '../../components';
 import {Notification} from '../../components/notifications';
-import {PrivateAccountsPrompt} from '../../components/notifications/NotificationPrompts';
+import {NewChatPrompt} from '../../components/notifications/NotificationPrompts';
 import {
   loadUserNotifications,
   updateNewNotificationReceived,
@@ -297,7 +297,7 @@ const NotificationsScreen: React.FC = () => {
           renderItem={renderNotification}
           renderSectionHeader={renderSectionHeader}
           renderSectionFooter={renderSectionFooter}
-          ListHeaderComponent={<PrivateAccountsPrompt />}
+          ListHeaderComponent={<NewChatPrompt />}
           refreshControl={
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           }