Added a dialog if User denies notfication permission

client/src/lib/browserNotification.js

@@ -1,11 +1,16 @@
 import BadWordsNext from 'bad-words-next';
 import en from 'bad-words-next/data/en.json';
 
-export const requestBrowserNotificationPermissions = () => {
+export const requestBrowserNotificationPermissions = async () => {
 	if (!('Notification' in window)) {
 		console.log('Browser does not support desktop notification');
 	} else {
-		Notification.requestPermission();
+		const res = await Notification.requestPermission();
+		if (res === 'granted') {
+			return true;
+		} else {
+			return false;
+		}
 	}
 };
 

client/src/pages/Start.jsx

@@ -6,20 +6,50 @@ import { requestBrowserNotificationPermissions } from 'src/lib/browserNotificati
 import { useApp } from 'src/context/AppContext';
 import useCloseChat from 'src/hooks/useCloseChat';
 import { useEffect } from 'react';
+import { useDialog } from 'src/context/DialogContext';
 
 const centerElement = 'flex flex-col items-center justify-center';
 
 const Start = () => {
 	const { app } = useApp();
 	const navigate = useNavigate();
 	const { handleClose } = useCloseChat();
+	const { setDialog } = useDialog();
 
+	const requestPermission = async () => {
+		try {
+			const isGranted = await requestBrowserNotificationPermissions();
+			if (!isGranted) {
+				setDialog({
+					isOpen: true,
+					text: "We noticed you've blocked Whisper from sending notifications. Are you sure you don’t want to enable them? Notifications help you stay updated, remember who you're talking to, and ensure you dont miss important messages.",
+					handler: async (response) => {
+						if (response) {
+							await requestBrowserNotificationPermissions();
+							setDialog({ isOpen: false });
+						} else {
+							setDialog({ isOpen: false });
+						}
+					},
+					noBtnText: 'No',
+					yesBtnText: 'Try Again',
+				});
+			}
+
+			return isGranted;
+		} catch (error) {
+			console.error('Error requesting notification permission:', error);
+			return false;
+		}
+	};
 	useEffect(() => {
 		if (app.isSearching) {
 			navigate('/searching');
 		}
-
-		requestBrowserNotificationPermissions();
+		const checkPermission = async () => {
+			await requestPermission();
+		};
+		checkPermission();
 	}, []);
 
 	return (