Merge pull request #119 from Junman140/feature/billing-push-notifications

Feature/billing-push-notifications

Author: Smartdevs17

App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { AppNavigator } from './src/navigation/AppNavigator';
+import { useNotifications } from './src/hooks/useNotifications';
 
 // Import WalletConnect compatibility layer
 import '@walletconnect/react-native-compat';
@@ -61,10 +62,16 @@ createAppKit({
   enableAnalytics: true,
 });
 
+function NotificationBootstrap() {
+  useNotifications();
+  return null;
+}
+
 export default function App() {
   return (
     <>
       <StatusBar style="light" />
+      <NotificationBootstrap />
       <AppNavigator />
       <AppKit />
     </>

app.json

@@ -39,6 +39,15 @@
     "owner": "subtrackr",
     "description": "Subscription Management with Crypto Payments",
     "keywords": ["subscription", "crypto", "web3", "blockchain", "payments"],
-    "primaryColor": "#6366f1"
+    "primaryColor": "#6366f1",
+    "plugins": [
+      [
+        "expo-notifications",
+        {
+          "sounds": [],
+          "enableBackgroundRemoteNotifications": false
+        }
+      ]
+    ]
   }
 }

package-lock.json

@@ -41,6 +41,7 @@
     "ethers": "^5.8.0",
     "expo": "~53.0.20",
     "expo-application": "~6.1.5",
+    "expo-notifications": "^0.31.5",
     "expo-status-bar": "~2.2.3",
     "graphql": "^16.13.1",
     "react": "19.0.0",

package.json

@@ -0,0 +1,79 @@
+import { useEffect, useState, useCallback } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import * as Notifications from 'expo-notifications';
+
+import { useSubscriptionStore } from '../store';
+import {
+  attachNotificationResponseListeners,
+  getPermissionStatus,
+  requestNotificationPermissions,
+  syncRenewalReminders,
+  navigateToSubscriptionFromNotification,
+} from '../services/notificationService';
+
+const FIRST_LAUNCH_PROMPT_KEY = '@subtrackr_notifications_prompt_v1';
+
+export function useNotifications(): {
+  permissionStatus: Notifications.PermissionStatus | null;
+  refreshPermission: () => Promise<void>;
+} {
+  const subscriptions = useSubscriptionStore((s) => s.subscriptions);
+  const [permissionStatus, setPermissionStatus] = useState<Notifications.PermissionStatus | null>(
+    null
+  );
+
+  const refreshPermission = useCallback(async () => {
+    setPermissionStatus(await getPermissionStatus());
+  }, []);
+
+  useEffect(() => {
+    void refreshPermission();
+  }, [refreshPermission]);
+
+  /** First app launch: ask for notification permission once, then keep schedules in sync. */
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      const alreadyPrompted = await AsyncStorage.getItem(FIRST_LAUNCH_PROMPT_KEY);
+      if (!alreadyPrompted) {
+        await requestNotificationPermissions();
+        if (!cancelled) {
+          await AsyncStorage.setItem(FIRST_LAUNCH_PROMPT_KEY, '1');
+        }
+      } else {
+        await getPermissionStatus();
+      }
+
+      if (!cancelled) {
+        await refreshPermission();
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  useEffect(() => {
+    void syncRenewalReminders(subscriptions);
+  }, [subscriptions]);
+
+  useEffect(() => {
+    const remove = attachNotificationResponseListeners();
+
+    void Notifications.getLastNotificationResponseAsync().then((response) => {
+      if (!response) return;
+      const data = response.notification.request.content.data as
+        | { subscriptionId?: string }
+        | undefined;
+      if (data?.subscriptionId) {
+        navigateToSubscriptionFromNotification(data.subscriptionId);
+      }
+    });
+
+    return remove;
+  }, []);
+
+  return { permissionStatus, refreshPermission };
+}

src/hooks/useNotifications.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
+import { navigationRef } from './navigationRef';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import HomeScreen from '../screens/HomeScreen';
@@ -109,7 +110,7 @@ const TabNavigator = () => (
 
 export const AppNavigator = () => {
   return (
-    <NavigationContainer>
+    <NavigationContainer ref={navigationRef}>
       <TabNavigator />
     </NavigationContainer>
   );

src/navigation/AppNavigator.tsx

@@ -0,0 +1,5 @@
+import { createNavigationContainerRef } from '@react-navigation/native';
+
+import type { TabParamList } from './types';
+
+export const navigationRef = createNavigationContainerRef<TabParamList>();

src/navigation/navigationRef.ts

@@ -1,3 +1,5 @@
+import { NavigatorScreenParams } from '@react-navigation/native';
+
 export type RootStackParamList = {
   Home: undefined;
   AddSubscription: undefined;
@@ -9,7 +11,7 @@ export type RootStackParamList = {
 };
 
 export type TabParamList = {
-  HomeTab: undefined;
+  HomeTab: NavigatorScreenParams<RootStackParamList> | undefined;
   AddTab: undefined;
   WalletTab: undefined;
   AnalyticsTab: undefined;