fix: fix mixpanel event for opt-in task click (#2990)

src/app/core/services/tracking.service.ts

@@ -386,14 +386,6 @@ export class TrackingService {
     this.eventTrack('dashboard action sheet button clicked', properties);
   }
 
-  dashboardOnUnreportedExpensesClick(properties = {}): void {
-    this.eventTrack('dashboard unreported expenses clicked', properties);
-  }
-
-  dashboardOnIncompleteExpensesClick(properties = {}): void {
-    this.eventTrack('dashboard incomplete expenses clicked', properties);
-  }
-
   dashboardOnIncompleteCardExpensesClick(properties = {}): void {
     this.eventTrack('dashboard incomplete corporate card expenses clicked', properties);
   }
@@ -402,10 +394,6 @@ export class TrackingService {
     this.eventTrack('dashboard total corporate card expenses clicked', properties);
   }
 
-  dashboardOnReportPillClick(properties: { State: string }): void {
-    this.eventTrack('dashboard report pill clicked', properties);
-  }
-
   //View expenses
   viewExpenseClicked(properties: ExpenseClickProperties): void {
     this.eventTrack('View expense clicked', properties);
@@ -716,4 +704,8 @@ export class TrackingService {
   commuteDeductionDetailsError(properties: HttpErrorResponse): void {
     this.eventTrack('Commute Deduction - Details Error', properties);
   }
+
+  statsClicked(properties: { event: string }): void {
+    this.eventTrack('Dashboard Stats Clicked', properties);
+  }
 }

src/app/fyle/dashboard/dashboard.service.spec.ts

@@ -17,6 +17,7 @@ import {
 } from '../../core/mock-data/stats.data';
 import { DashboardService } from './dashboard.service';
 import { SpenderReportsService } from 'src/app/core/services/platform/v1/spender/reports.service';
+import { ReportStates } from './stat-badge/report-states';
 
 describe('DashboardService', () => {
   let dashboardService: DashboardService;
@@ -197,4 +198,26 @@ describe('DashboardService', () => {
       done();
     });
   });
+
+  describe('getReportStateMapping():', () => {
+    it('should return "Approved" if report state is APPROVED', () => {
+      expect(dashboardService.getReportStateMapping(ReportStates.APPROVED)).toEqual('Approved');
+    });
+
+    it('should return "Draft" if report state is DRAFT', () => {
+      expect(dashboardService.getReportStateMapping(ReportStates.DRAFT)).toEqual('Draft');
+    });
+
+    it('should return "Payment Pending" if report state is PAYMENT_PENDING', () => {
+      expect(dashboardService.getReportStateMapping(ReportStates.PAYMENT_PENDING)).toEqual('Payment Pending');
+    });
+
+    it('should return "Processing" if report state is PAYMENT_PROCESSING', () => {
+      expect(dashboardService.getReportStateMapping(ReportStates.PAYMENT_PROCESSING)).toEqual('Processing');
+    });
+
+    it('should return "Reported" if report state is APPROVER_PENDING', () => {
+      expect(dashboardService.getReportStateMapping(ReportStates.APPROVER_PENDING)).toEqual('Reported');
+    });
+  });
 });

src/app/fyle/dashboard/dashboard.service.ts

@@ -7,6 +7,7 @@ import { CorporateCreditCardExpenseService } from 'src/app/core/services/corpora
 import { ExpensesService } from 'src/app/core/services/platform/v1/spender/expenses.service';
 import { Stats } from '../../core/models/stats.model';
 import { SpenderReportsService } from 'src/app/core/services/platform/v1/spender/reports.service';
+import { ReportStates } from './stat-badge/report-states';
 
 @Injectable()
 export class DashboardService {
@@ -75,4 +76,19 @@ export class DashboardService {
   getCCCDetails(): Observable<CCCDetails> {
     return this.corporateCreditCardExpenseService.getAssignedCards();
   }
+
+  getReportStateMapping(state: ReportStates): string {
+    switch (state) {
+      case ReportStates.DRAFT:
+        return 'Draft';
+      case ReportStates.APPROVER_PENDING:
+        return 'Reported';
+      case ReportStates.APPROVED:
+        return 'Approved';
+      case ReportStates.PAYMENT_PENDING:
+        return 'Payment Pending';
+      case ReportStates.PAYMENT_PROCESSING:
+        return 'Processing';
+    }
+  }
 }

src/app/fyle/dashboard/stats/stats.component.spec.ts

@@ -37,16 +37,15 @@ describe('StatsComponent', () => {
       'getReportsStats',
       'getUnreportedExpensesStats',
       'getIncompleteExpensesStats',
+      'getReportStateMapping',
     ]);
     const currencyServiceSpy = jasmine.createSpyObj('CurrencyService', ['getHomeCurrency']);
     const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
     const networkServiceSpy = jasmine.createSpyObj('NetworkService', ['connectivityWatcher', 'isOnline']);
     const trackingServiceSpy = jasmine.createSpyObj('TrackingService', [
       'appLaunchTime',
-      'dashboardOnReportPillClick',
-      'dashboardOnUnreportedExpensesClick',
-      'dashboardOnIncompleteExpensesClick',
       'dashboardLaunchTime',
+      'statsClicked',
     ]);
     const orgSettingsServiceSpy = jasmine.createSpyObj('OrgSettingsService', ['get']);
     const orgServiceSpy = jasmine.createSpyObj('OrgService', ['getOrgs']);
@@ -342,15 +341,17 @@ describe('StatsComponent', () => {
   });
 
   it('goToReportsPage(): should navigate to reports page with query params', () => {
+    dashboardService.getReportStateMapping.and.returnValue('Approved');
+
     component.goToReportsPage(ReportStates.APPROVED);
 
     expect(router.navigate).toHaveBeenCalledOnceWith(['/', 'enterprise', 'my_reports'], {
       queryParams: {
         filters: JSON.stringify({ state: [ReportStates.APPROVED.toString()] }),
       },
     });
-    expect(trackingService.dashboardOnReportPillClick).toHaveBeenCalledOnceWith({
-      State: ReportStates.APPROVED.toString(),
+    expect(trackingService.statsClicked).toHaveBeenCalledOnceWith({
+      event: 'Clicked On Approved Reports',
     });
   });
 
@@ -363,7 +364,9 @@ describe('StatsComponent', () => {
           filters: JSON.stringify({ state: ['READY_TO_REPORT'] }),
         },
       });
-      expect(trackingService.dashboardOnUnreportedExpensesClick).toHaveBeenCalledTimes(1);
+      expect(trackingService.statsClicked).toHaveBeenCalledOnceWith({
+        event: 'Clicked On Unreported Expenses',
+      });
     });
 
     it('goToExpensesPage(): should navigate to expenses page with query params', () => {
@@ -374,7 +377,9 @@ describe('StatsComponent', () => {
           filters: JSON.stringify({ state: ['DRAFT'] }),
         },
       });
-      expect(trackingService.dashboardOnIncompleteExpensesClick).toHaveBeenCalledTimes(1);
+      expect(trackingService.statsClicked).toHaveBeenCalledOnceWith({
+        event: 'Clicked On Incomplete Expenses',
+      });
     });
   });
 

src/app/fyle/dashboard/stats/stats.component.ts

@@ -195,8 +195,10 @@ export class StatsComponent implements OnInit {
       },
     });
 
-    this.trackingService.dashboardOnReportPillClick({
-      State: state.toString(),
+    const reportState = this.dashboardService.getReportStateMapping(state);
+
+    this.trackingService.statsClicked({
+      event: `Clicked On ${reportState} Reports`,
     });
   }
 
@@ -207,13 +209,18 @@ export class StatsComponent implements OnInit {
         queryParams,
       });
 
-      this.trackingService.dashboardOnUnreportedExpensesClick();
+      this.trackingService.statsClicked({
+        event: 'Clicked On Unreported Expenses',
+      });
     } else {
       const queryParams: Params = { filters: JSON.stringify({ state: ['DRAFT'] }) };
       this.router.navigate(['/', 'enterprise', 'my_expenses'], {
         queryParams,
       });
-      this.trackingService.dashboardOnIncompleteExpensesClick();
+
+      this.trackingService.statsClicked({
+        event: 'Clicked On Incomplete Expenses',
+      });
     }
   }