Prevent NotificationAlert from appearing

src/components/NotificationsAlert.tsx

@@ -26,6 +26,7 @@ export const NotificationsAlert = ({ tosData }: Props) => {
   const [isHomeScreenApp, setHomeScreenApp] = useState(false);
   const [iosHomeScreenPrompt, setIosHomeScreenPrompt] = useState(false);
   const { isIosDevice, versionOfIos } = useIosDevice();
+  const { showOnTS, subscribeStarted, subscribeError } = getNotificationLocalStorage() || {};
 
   const handleModalCloseOnEsc = useCallback(() => {
     setShowNotificationModalState(false);
@@ -59,15 +60,15 @@ export const NotificationsAlert = ({ tosData }: Props) => {
       const tosAccepted =
         tosData.agreementsForUser[tosData.agreementsForUser.length - 1].value === tosData.latestTosVersion;
       // check if user has already turned on notifications
-      const { showOnTS } = getNotificationLocalStorage() || {};
+      const showNotificationPrompt = showNotificationModal();
 
-      if (!iosHomeScreenPrompt && ((tosAccepted && !showOnTS) || (tosAccepted && showOnTS < Date.now()))) {
+      if (!subscribeError && showNotificationPrompt && tosAccepted && (!showOnTS || !iosHomeScreenPrompt)) {
         setTimeout(() => {
-          setShowNotificationModalState(showNotificationModal());
+          setShowNotificationModalState(showNotificationPrompt);
         }, 3000);
       }
     }
-  }, [tosData, iosHomeScreenPrompt]);
+  }, [tosData, subscribeError, showOnTS, iosHomeScreenPrompt]);
 
   useEffect(() => {
     if (!signedIn) {
@@ -85,7 +86,10 @@ export const NotificationsAlert = ({ tosData }: Props) => {
   useEffect(() => {
     if (isIosDevice) {
       window.matchMedia('(display-mode: standalone)').addEventListener('change', (e) => setHomeScreenApp(e.matches));
-      // TODO: Remove event listener on cleanup
+      // Remove event listener
+      return () => {
+        window.matchMedia('(display-mode: standalone)').removeEventListener('change', () => setHomeScreenApp(false));
+      };
     }
   }, [isIosDevice]);
 
@@ -107,6 +111,7 @@ export const NotificationsAlert = ({ tosData }: Props) => {
           iOSDevice: isIosDevice,
           iOSVersion: versionOfIos,
           recomendedIOSVersion: recommendedIosVersionForNotifications,
+          loading: subscribeStarted,
         }}
       />
       <VmComponent

src/pages/notifications-settings.tsx

@@ -22,6 +22,7 @@ const NotificationsSettingsPage: NextPageWithLayout = () => {
   const components = useBosComponents();
   const accountId = useAuthStore((store) => store.accountId);
   const { isIosDevice } = useIosDevice();
+  const { subscribeStarted } = getNotificationLocalStorage() || {};
 
   return (
     <ComponentWrapperPage
@@ -39,6 +40,8 @@ const NotificationsSettingsPage: NextPageWithLayout = () => {
         handleTurnOn,
         handlePushManagerUnsubscribe,
         iOSDevice: isIosDevice,
+        loading: subscribeStarted,
+        disabled: !accountId || subscribeStarted,
       }}
     />
   );

src/utils/notifications.ts

@@ -23,9 +23,21 @@ const GATEWAY_URL = 'https://near.org';
 // min version for iOS to support notifications
 export const recommendedIosVersionForNotifications = 16.4;
 
-const handleRequestPermission = () => Notification.requestPermission();
+const handleRequestPermission = () => {
+  try {
+    return Notification.requestPermission();
+  } catch (error) {
+    console.error('Error while requesting permission.', error);
+  }
+};
 
-const registerServiceWorker = () => navigator.serviceWorker.register('/service-worker.js');
+const registerServiceWorker = () => {
+  try {
+    return navigator.serviceWorker.register('/service-worker.js');
+  } catch (error) {
+    console.error('Error while registering service-worker.', error);
+  }
+};
 
 const unregisterServiceWorker = async () => {
   const registrations = await navigator.serviceWorker.getRegistrations();
@@ -115,7 +127,9 @@ export const handleOnCancelBanner = () => {
 };
 
 export const showNotificationModal = () => {
-  if (isPermisionGranted() && getNotificationLocalStorage()?.permission) {
+  const grantedPermission = isPermisionGranted();
+  const { permission: initialPermissionGrantedByUser } = getNotificationLocalStorage() ?? {};
+  if (grantedPermission && initialPermissionGrantedByUser) {
     return false;
   }
 

src/utils/notificationsLocalStorage.ts

@@ -1,3 +1,5 @@
+import { openToast } from '@/components/lib/Toast';
+
 import {
   isLocalStorageSupported,
   isNotificationSupported,
@@ -92,6 +94,13 @@ export const setProcessError = (error: any) => {
       subscribeError: errorMessage,
     }),
   );
+  openToast({
+    id: 'notifications-subscription-error',
+    type: 'ERROR',
+    title: 'Push notification error',
+    description: `${errorMessage}. Please try again later or send us a message if the problem persists.`,
+    duration: 5000,
+  });
 };
 
 export const setProcessEnded = () => {