chat banner

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -18,6 +18,7 @@ import { API_HOST, WEBSOCKET_URL } from 'src/constants';
 import { Colors } from 'src/theme';
 import SwipeableRow from './Components/SwipeableRow';
 import { FlashList } from '@shopify/flash-list';
+import * as Notifications from 'expo-notifications';
 
 import ReadIcon from 'assets/icons/messages/check-read.svg';
 import UnreadIcon from 'assets/icons/messages/check-unread.svg';
@@ -40,6 +41,7 @@ import SwipeableBlockedRow from './Components/SwipeableBlockedRow';
 import { useMessagesStore } from 'src/stores/unreadMessagesStore';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import GroupIcon from 'assets/icons/messages/group-chat.svg';
+import { usePushNotification } from 'src/contexts/PushNotificationContext';
 
 const TypingIndicator = ({ name }: { name?: string }) => {
   const [dots, setDots] = useState('');
@@ -68,7 +70,7 @@ const TypingIndicator = ({ name }: { name?: string }) => {
 
 const MessagesScreen = () => {
   const insets = useSafeAreaInsets();
-  const navigation = useNavigation();
+  const navigation = useNavigation<any>();
   const token = storage.get('token', StoreType.STRING) as string;
   const [chats, setChats] = useState<Chat[]>([]);
   const [index, setIndex] = useState(0);
@@ -77,6 +79,8 @@ const MessagesScreen = () => {
   const { data: blockedData, refetch: refetchBlocked } = usePostGetBlockedQuery(token, true);
   const [blocked, setBlocked] = useState<Blocked[]>([]);
   const updateUnreadMessagesCount = useMessagesStore((state) => state.updateUnreadMessagesCount);
+  const { isSubscribed } = usePushNotification();
+  const [isBannerVisible, setIsBannerVisible] = useState(false);
 
   const currentUserId = storage.get('uid', StoreType.STRING) as string;
 
@@ -126,6 +130,21 @@ const MessagesScreen = () => {
     }, [navigation])
   );
 
+  useFocusEffect(
+    useCallback(() => {
+      const checkNotificationPermission = async () => {
+        const { status } = await Notifications.getPermissionsAsync();
+        if (status !== 'granted' || !isSubscribed) {
+          setIsBannerVisible(true);
+        } else {
+          setIsBannerVisible(false);
+        }
+      };
+
+      checkNotificationPermission();
+    }, [isSubscribed])
+  );
+
   useEffect(() => {
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
       if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
@@ -513,6 +532,33 @@ const MessagesScreen = () => {
           <AddChatIcon />
         </TouchableOpacity>
       </View>
+      {isBannerVisible && (
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: '5%',
+            paddingVertical: 6,
+            backgroundColor: Colors.DARK_BLUE
+          }}
+        >
+          <Text style={{ flex: 1, color: Colors.WHITE, fontSize: 12, fontWeight: '500' }}>
+            Enable notifications not to miss any messages
+          </Text>
+          <TouchableOpacity
+            style={{
+              paddingHorizontal: 8,
+              paddingVertical: 6,
+              backgroundColor: Colors.ORANGE,
+              borderRadius: 12
+            }}
+            onPress={() => navigation.navigate(NAVIGATION_PAGES.NOTIFICATIONS)}
+          >
+            <Text style={{ color: Colors.WHITE, fontSize: 12, fontWeight: '600' }}>Enable</Text>
+          </TouchableOpacity>
+        </View>
+      )}
 
       {/* <View style={[{ paddingHorizontal: '4%' }]}>
         <Input

src/screens/InAppScreens/MessagesScreen/utils.ts

@@ -4,6 +4,7 @@ import { Platform } from 'react-native';
 import { NAVIGATION_PAGES } from 'src/types';
 import { usePushNotification } from 'src/contexts/PushNotificationContext';
 import { CommonActions } from '@react-navigation/native';
+import { storage, StoreType } from 'src/storage';
 
 export const formatDate = (dateString: Date): string => {
   const inputDate = moment.utc(dateString).local();
@@ -30,14 +31,20 @@ export const dismissChatNotifications = async (
   navigation: any
 ) => {
   const { status } = await Notifications.getPermissionsAsync();
-  if (status !== 'granted' || !isSubscribed) {
+  const askedOnce = storage.get('askedNotificationPermission', StoreType.BOOLEAN) ?? false;
+
+  if ((status !== 'granted' || !isSubscribed) && !askedOnce) {
     setModalInfo({
       visible: true,
       type: 'success',
       message:
         'To use this feature we need your permission to access your notifications. You will be redirected to the notification settings screen where you need to enable them.',
-      action: () => navigation.navigate(NAVIGATION_PAGES.NOTIFICATIONS)
+      action: () => {
+        navigation.navigate(NAVIGATION_PAGES.NOTIFICATIONS);
+        setModalInfo({ visible: false });
+      }
     });
+    storage.set('askedNotificationPermission', true);
     return;
   }