feat: add a dialog if User denies notfication permission (#737)

Co-authored-by: Dunsin <78784850+Dun-sin@users.noreply.github.com>

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: "You've blocked Whisper notifications. Enable them to stay updated, keep track of conversations, and never 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 (