feat: add redirection for notifications + API integrations

src/app/app.component.spec.ts

@@ -21,6 +21,7 @@ import { NavController } from '@ionic/angular/standalone';
 import { UserEventService } from './core/services/user-event.service';
 import { DeviceService } from './core/services/device.service';
 import { GmapsService } from './core/services/gmaps.service';
+import { PushNotificationService } from './core/services/push-notification.service';
 
 import { SplashScreen } from '@capacitor/splash-screen';
 import { StatusBar } from '@capacitor/status-bar';
@@ -73,6 +74,7 @@ describe('AppComponent', () => {
   let gmapsService: jasmine.SpyObj<GmapsService>;
   let menuController: jasmine.SpyObj<MenuController>;
   let backButtonService: jasmine.SpyObj<BackButtonService>;
+  let pushNotificationService: jasmine.SpyObj<PushNotificationService>;
   beforeEach(waitForAsync(() => {
     // Mock Capacitor plugins before component creation
     // Create spies that return resolved promises
@@ -155,6 +157,7 @@ describe('AppComponent', () => {
     const gmapsServiceSpy = jasmine.createSpyObj('GmapsService', ['loadLibrary']);
     const menuControllerSpy = jasmine.createSpyObj('MenuController', ['swipeGesture']);
     const backButtonServiceSpy = jasmine.createSpyObj('BackButtonService', ['showAppCloseAlert']);
+    const pushNotificationServiceSpy = jasmine.createSpyObj('PushNotificationService', ['unregister']);
 
     // Configure tracking service with missing methods
     trackingServiceSpy.updateIdentityIfNotPresent = jasmine.createSpy('updateIdentityIfNotPresent').and.resolveTo();
@@ -190,6 +193,7 @@ describe('AppComponent', () => {
         { provide: GmapsService, useValue: gmapsServiceSpy },
         { provide: MenuController, useValue: menuControllerSpy },
         { provide: BackButtonService, useValue: backButtonServiceSpy },
+        { provide: PushNotificationService, useValue: pushNotificationServiceSpy },
       ],
     })
       .overrideComponent(AppComponent, {
@@ -220,6 +224,7 @@ describe('AppComponent', () => {
     gmapsService = TestBed.inject(GmapsService) as jasmine.SpyObj<GmapsService>;
     menuController = TestBed.inject(MenuController) as jasmine.SpyObj<MenuController>;
     backButtonService = TestBed.inject(BackButtonService) as jasmine.SpyObj<BackButtonService>;
+    pushNotificationService = TestBed.inject(PushNotificationService) as jasmine.SpyObj<PushNotificationService>;
   }));
 
   describe('ngAfterViewInit', () => {

src/app/app.component.ts

@@ -32,6 +32,7 @@ import { NgClass } from '@angular/common';
 import { FyConnectionComponent } from './shared/components/fy-connection/fy-connection.component';
 import { Capacitor } from '@capacitor/core';
 import { AppShortcuts } from '@capawesome/capacitor-app-shortcuts';
+import { PushNotificationService } from './core/services/push-notification.service';
 
 @Component({
   selector: 'app-root',
@@ -53,6 +54,8 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   private router = inject(Router);
 
+  private pushNotificationService = inject(PushNotificationService);
+
   private activatedRoute = inject(ActivatedRoute);
 
   private userEventService = inject(UserEventService);
@@ -293,6 +296,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.userEventService.onLogout(() => {
       this.trackingService.onSignOut();
       this.freshChatService.destroy();
+      this.pushNotificationService.unregister();
       this.isSwitchedToDelegator = false;
       this.router.navigate(['/', 'auth', 'sign_in']);
     });

src/app/core/services/org-user.service.spec.ts

@@ -181,6 +181,19 @@ describe('OrgUserService', () => {
     });
   });
 
+  it('sendDeviceToken(): should send device token to the backend', (done) => {
+    const token = 'test-device-token';
+    spenderPlatformV1ApiService.post.and.returnValue(of({}));
+
+    orgUserService.sendDeviceToken(token).subscribe((res) => {
+      expect(spenderPlatformV1ApiService.post).toHaveBeenCalledWith('/users/device_token', {
+        data: { token },
+      });
+      expect(res).toEqual({});
+      done();
+    });
+  });
+
   it('should return false if the user is not switched to a delegator', (done) => {
     jwtHelperService.decodeToken.and.returnValue(accessTokenData);
     // This token contains the user details such as user id, org id, org user id, roles, scopes, etc.

src/app/core/services/org-user.service.ts

@@ -99,6 +99,16 @@ export class OrgUserService {
     );
   }
 
+  sendDeviceToken(token: string): Observable<unknown> {
+    const payload = {
+      data: {
+        token,
+      },
+    };
+
+    return this.spenderPlatformV1ApiService.post('/users/device_token', payload);
+  }
+
   getUserById(userId: string): Observable<EouApiResponse> {
     return this.apiService.get('/eous/' + userId);
   }

src/app/core/services/push-notification.service.ts

@@ -1,12 +1,30 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { PushNotifications, Token } from '@capacitor/push-notifications';
+import { DeepLinkService } from './deep-link.service';
+import { TrackingService } from './tracking.service';
+import { UserEventService } from './user-event.service';
+import { OrgUserService } from './org-user.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class PushNotificationService {
   private listenersInitialized = false;
 
+  private deepLinkService: DeepLinkService = inject(DeepLinkService);
+
+  private trackingService: TrackingService = inject(TrackingService);
+
+  private userEventService: UserEventService = inject(UserEventService);
+
+  private orgUserService: OrgUserService = inject(OrgUserService);
+
+  constructor() {
+    this.userEventService.onLogout(() => {
+      void this.unregister();
+    });
+  }
+
   async initializePushNotifications(): Promise<void> {
     const permission = await PushNotifications.requestPermissions();
 
@@ -16,18 +34,51 @@ export class PushNotificationService {
     }
   }
 
+  async unregister(): Promise<void> {
+    await PushNotifications.unregister();
+  }
+
   private initListeners(): void {
     if (this.listenersInitialized) {
       return;
     }
 
     this.listenersInitialized = true;
 
-    PushNotifications.addListener('registration', (_token: Token) => {
-      // TODO: Integrate API for sending token to backend
+    this.addRegistrationListener();
+    this.addRegistrationErrorListener();
+    this.addNotificationClickListener();
+  }
+
+  private addRegistrationListener(): void {
+    PushNotifications.addListener('registration', (token: Token) => {
+      const tokenValue = token?.value;
+      if (tokenValue) {
+        this.orgUserService.sendDeviceToken(tokenValue).subscribe();
+      }
+      this.trackingService.eventTrack('Push Notification Registered');
     });
+  }
+
+  private addRegistrationErrorListener(): void {
     PushNotifications.addListener('registrationError', () => undefined);
-    PushNotifications.addListener('pushNotificationActionPerformed', () => undefined);
+  }
+
+  private addNotificationClickListener(): void {
+    PushNotifications.addListener('pushNotificationActionPerformed', (event) => {
+      const data = (event?.notification?.data as { url?: string; actionType?: string } | undefined) ?? {};
+      const url = data.url;
+      const actionType = data.actionType;
+
+      if (!url || typeof url !== 'string') {
+        return;
+      }
+
+      this.trackingService.eventTrack('Push Notification Clicked', { actionType });
+
+      const redirectParams = this.deepLinkService.getJsonFromUrl(url);
+      this.deepLinkService.redirect(redirectParams);
+    });
   }
 }
 

src/app/fyle/notifications/email-notifications/email-notifications.component.html

@@ -65,7 +65,7 @@
         </div>
         @if (showMobilePushColumn) {
           <div class="email-notifications--checkbox-col-value">
-            <mat-checkbox [(ngModel)]="selectAllMobile" (ngModelChange)="toggleAllNotifications($event, 'push')">
+            <mat-checkbox [(ngModel)]="selectAllMobile" (ngModelChange)="toggleAllNotifications($event, 'mobile')">
             </mat-checkbox>
           </div>
         }
@@ -82,8 +82,8 @@
           @if (showMobilePushColumn) {
             <div class="email-notifications--checkbox-col-value">
               <mat-checkbox
-                [ngModel]="notification.push ?? true"
-                (ngModelChange)="toggleNotification(notification, 'push')"
+                [ngModel]="notification.mobile ?? true"
+                (ngModelChange)="toggleNotification(notification, 'mobile')"
               >
               </mat-checkbox>
             </div>

src/app/fyle/notifications/notifications-beta/notifications-beta.page.service.ts

@@ -155,7 +155,7 @@ export class NotificationsBetaPageService {
         .map((notification) => ({
           ...notification,
           email: !unsubscribedEmailEventsByUser.includes(notification.eventEnum),
-          push: !unsubscribedPushEventsByUser.includes(notification.eventEnum),
+          mobile: !unsubscribedPushEventsByUser.includes(notification.eventEnum),
         }));
 
     const expenseNotifications = processNotifications(this.getExpenseNotifications(currentEou));