Prepare functionality to show HomeScreenAlert for iOS devices (#652)

near · Oct 5, 2023 · 53d909d · 53d909d
1 parent 5f90dac
commit 53d909d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/src/data/bos-components.ts b/src/data/bos-components.ts
@@ -26,6 +26,7 @@ type NetworkComponents = {
       alert: string;
       settings: string;
       button: string;
+      iosHomeScreenAlert: string;
     };
   };
   notificationButton: string;
@@ -74,6 +75,7 @@ export const componentsByNetworkId: Record<NetworkId, NetworkComponents | undefi
         alert: 'discom.testnet/widget/NearOrg.Notifications.NotificationAlert',
         settings: 'discom.testnet/widget/NearOrg.Notifications.Settings',
         button: 'discom.testnet/widget/NearOrg.Notifications.NotificationButton',
+        iosHomeScreenAlert: 'discom.testnet/widget/NearOrg.Notifications.HomeScreenAlert',
       },
     },
     notificationButton: 'discom.testnet/widget/NotificationButton',
@@ -120,6 +122,7 @@ export const componentsByNetworkId: Record<NetworkId, NetworkComponents | undefi
         alert: 'near/widget/NearOrg.Notifications.NotificationAlert',
         settings: 'near/widget/NearOrg.Notifications.Settings',
         button: 'near/widget/NearOrg.Notifications.NotificationButton',
+        iosHomeScreenAlert: 'near/widget/NearOrg.Notifications.HomeScreenAlert',
       },
     },
     notificationButton: 'near/widget/NotificationButton',

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -11,9 +11,9 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useAuthStore } from '@/stores/auth';
 import { useCurrentComponentStore } from '@/stores/current-component';
-import { handleOnCancel, handleTurnOn, showNotificationModal } from '@/utils/notifications';
+import { handleOnCancel, handleTurnOn, isIOS, showNotificationModal } from '@/utils/notifications';
 import { isNotificationSupported, isPermisionGranted, isPushManagerSupported } from '@/utils/notificationsHelpers';
-import { setNotificationsSessionStorage, getNotificationLocalStorage } from '@/utils/notificationsLocalStorage';
+import { getNotificationLocalStorage, setNotificationsSessionStorage } from '@/utils/notificationsLocalStorage';
 import type { NextPageWithLayout, TosData } from '@/utils/types';
 
 const LS_ACCOUNT_ID = 'near-social-vm:v01::accountId:';
@@ -30,46 +30,64 @@ const HomePage: NextPageWithLayout = () => {
   const accountId = useAuthStore((store) => store.accountId);
   const [tosData, setTosData] = useState<TosData | null>(null);
   const cacheTosData = useMemo(() => tosData, [tosData?.latestTosVersion]);
+  const [isHomeScreenApp, setHomeScreenApp] = useState(false);
+  const [iosHomeScreenPrompt, setIosHomeScreenPrompt] = useState(false);
+  const iOSDevice = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return isIOS();
+    }
+    return false;
+  }, []);
 
   const handleModalCloseOnEsc = useCallback(() => {
     setShowNotificationModalState(false);
   }, []);
 
-  const turnNotificationsOn = useCallback(
-    () =>
-      handleTurnOn(accountId, () => {
-        setShowNotificationModalState(false);
-      }),
-    [],
-  );
+  const handleHomeScreenClose = useCallback(() => {
+    setIosHomeScreenPrompt(false);
+  }, []);
+
+  const turnNotificationsOn = useCallback(() => {
+    // for iOS devices, show a different modal asking the user to add the app to their home screen
+    // if the user has already added the app to their home screen, show the regular notification modal
+    if (iOSDevice && !isHomeScreenApp) {
+      setIosHomeScreenPrompt(true);
+      setShowNotificationModalState(false);
+      return;
+    }
+    return handleTurnOn(accountId, () => {
+      setShowNotificationModalState(false);
+    });
+  }, [accountId, iOSDevice, isHomeScreenApp]);
 
   const pauseNotifications = useCallback(() => {
     handleOnCancel();
     setShowNotificationModalState(false);
   }, []);
 
   const checkNotificationModal = useCallback(() => {
-    if (tosData && tosData.agreementsForUser.length > 0) {
+    if (cacheTosData && cacheTosData.agreementsForUser.length > 0) {
       // show notification modal for new users
       const tosAccepted =
-        tosData.agreementsForUser[tosData.agreementsForUser.length - 1].value === tosData.latestTosVersion;
+        cacheTosData.agreementsForUser[cacheTosData.agreementsForUser.length - 1].value ===
+        cacheTosData.latestTosVersion;
       // check if user has already turned on notifications
       const { showOnTS } = getNotificationLocalStorage() || {};
 
-      if ((tosAccepted && !showOnTS) || (tosAccepted && showOnTS < Date.now())) {
+      if (!iosHomeScreenPrompt && ((tosAccepted && !showOnTS) || (tosAccepted && showOnTS < Date.now()))) {
         setTimeout(() => {
           setShowNotificationModalState(showNotificationModal());
-        }, 10000);
+        }, 3000);
       }
     }
-  }, [cacheTosData]);
+  }, [cacheTosData, iosHomeScreenPrompt]);
 
   useEffect(() => {
     if (!signedIn) {
       return;
     }
     checkNotificationModal();
-  }, [signedIn, cacheTosData]);
+  }, [signedIn, checkNotificationModal]);
 
   useEffect(() => {
     const optimisticAccountId = window.localStorage.getItem(LS_ACCOUNT_ID);
@@ -103,6 +121,17 @@ const HomePage: NextPageWithLayout = () => {
       });
     }
   }, [signedIn]);
+  useEffect(() => {
+    if (iOSDevice) {
+      setHomeScreenApp(window.matchMedia('(display-mode: standalone)').matches);
+    }
+  }, [iOSDevice]);
+
+  useEffect(() => {
+    if (iOSDevice) {
+      window.matchMedia('(display-mode: standalone)').addEventListener('change', (e) => setHomeScreenApp(e.matches));
+    }
+  }, [iOSDevice]);
 
   if (signedIn || signedInOptimistic) {
     return (
@@ -118,6 +147,14 @@ const HomePage: NextPageWithLayout = () => {
             isPushManagerSupported,
             setNotificationsSessionStorage,
             onOpenChange: handleModalCloseOnEsc,
+            iOSDevice,
+          }}
+        />
+        <VmComponent
+          src={components.nearOrg.notifications.iosHomeScreenAlert}
+          props={{
+            open: iosHomeScreenPrompt,
+            onOpenChange: handleHomeScreenClose,
           }}
         />
         <ComponentWrapperPage

diff --git a/src/utils/notifications.ts b/src/utils/notifications.ts
@@ -20,13 +20,12 @@ const applicationServerKey = 'BH_QFHjBU9x3VlmE9_XM4Awhm5vj2wF9WNQIz5wdlO6hc5anwE
 const HOST = 'https://discovery-notifications-mainnet.near.org';
 const GATEWAY_URL = 'https://near.org';
 
-// Will be used for error handling in future works
-const isIOS = () => {
+export const isIOS = () => {
   const browserInfo = navigator.userAgent.toLowerCase();
 
   return (
-    browserInfo.match('iphone') ||
-    browserInfo.match('ipad') ||
+    browserInfo.includes('iphone') ||
+    browserInfo.includes('ipad') ||
     ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform)
   );
 };