feat: Trackers for onboarding flow (#3428)

src/app/fyle/my-profile/my-profile.page.ts

@@ -44,7 +44,6 @@ import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup
 import { OrgUser } from 'src/app/core/models/org-user.model';
 import { OrgUserService } from 'src/app/core/services/org-user.service';
 import { UpdateMobileNumberComponent } from './update-mobile-number/update-mobile-number.component';
-import { OnboardingStatus } from 'src/app/core/models/onboarding-status.model';
 import { SpenderOnboardingService } from 'src/app/core/services/spender-onboarding.service';
 import { OnboardingState } from 'src/app/core/models/onboarding-state.enum';
 

src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.spec.ts

@@ -13,6 +13,7 @@ import { SimpleChanges } from '@angular/core';
 import { orgSettingsData } from 'src/app/core/test-data/org-settings.service.spec.data';
 import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component';
 import { enrollmentErrorPopoverData1, enrollmentErrorPopoverData2 } from 'src/app/core/mock-data/modal-controller.data';
+import { TrackingService } from 'src/app/core/services/tracking.service';
 
 describe('SpenderOnboardingConnectCardStepComponent', () => {
   let component: SpenderOnboardingConnectCardStepComponent;
@@ -21,12 +22,14 @@ describe('SpenderOnboardingConnectCardStepComponent', () => {
   let realTimeFeedService: jasmine.SpyObj<RealTimeFeedService>;
   let popoverController: jasmine.SpyObj<PopoverController>;
   let fb: FormBuilder;
+  let trackingService: TrackingService;
 
   beforeEach(waitForAsync(() => {
     const corporateCreditCardExpenseServiceSpy = jasmine.createSpyObj('CorporateCreditCardExpenseService', [
       'getCorporateCards',
     ]);
     const popoverControllerSpy = jasmine.createSpyObj('PopoverController', ['create', 'dismiss']);
+    const trackingServiceSpy = jasmine.createSpyObj('TrackingService', ['eventTrack']);
     const realTimeFeedServiceSpy = jasmine.createSpyObj('RealTimeFeedService', [
       'enroll',
       'getCardTypeFromNumber',
@@ -41,6 +44,7 @@ describe('SpenderOnboardingConnectCardStepComponent', () => {
         { provide: RealTimeFeedService, useValue: realTimeFeedServiceSpy },
         { provide: CorporateCreditCardExpenseService, useValue: corporateCreditCardExpenseServiceSpy },
         { provide: PopoverController, useValue: popoverControllerSpy },
+        { provide: TrackingService, useValue: trackingServiceSpy },
       ],
     }).compileComponents();
 
@@ -54,6 +58,7 @@ describe('SpenderOnboardingConnectCardStepComponent', () => {
     fb = TestBed.inject(FormBuilder);
     component.fg = fb.group({});
     popoverController = TestBed.inject(PopoverController) as jasmine.SpyObj<PopoverController>;
+    trackingService = TestBed.inject(TrackingService) as jasmine.SpyObj<TrackingService>;
     corporateCreditCardExpenseService.getCorporateCards.and.returnValue(of([]));
     realTimeFeedService.isCardNumberValid.and.returnValue(true);
     realTimeFeedService.getCardTypeFromNumber.and.returnValue(CardNetworkType.VISA);

src/app/fyle/spender-onboarding/spender-onboarding-connect-card-step/spender-onboarding-connect-card-step.component.ts

@@ -12,6 +12,7 @@ import { CorporateCreditCardExpenseService } from 'src/app/core/services/corpora
 import { RealTimeFeedService } from 'src/app/core/services/real-time-feed.service';
 import { PopupAlertComponent } from 'src/app/shared/components/popup-alert/popup-alert.component';
 import { CardProperties } from '../models/card-properties.model';
+import { TrackingService } from 'src/app/core/services/tracking.service';
 
 @Component({
   selector: 'app-spender-onboarding-connect-card-step',
@@ -54,7 +55,8 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
     private corporateCreditCardExpensesService: CorporateCreditCardExpenseService,
     private realTimeFeedService: RealTimeFeedService,
     private fb: FormBuilder,
-    private popoverController: PopoverController
+    private popoverController: PopoverController,
+    private trackingService: TrackingService
   ) {}
 
   setupErrorMessages(error: HttpErrorResponse, cardNumber: string, cardId?: string): void {
@@ -130,7 +132,7 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
     } else if (this.cardsList.failedCards.length > 1) {
       const allButLast = this.cardsList.failedCards.slice(0, -1).join(', ');
       const lastCard = this.cardsList.failedCards[this.cardsList.failedCards.length - 1];
-      return `We ran into an issue while processing your request for the cards  ${allButLast} and ${lastCard}.<br><br>You can cancel and retry connecting the failed card or proceed to the next step.`;
+      return `We ran into an issue while processing your request for the cards  ${allButLast}} and ${lastCard}.<br><br>You can cancel and retry connecting the failed card or proceed to the next step.`;
     } else {
       return `We ran into an issue while processing your request for the card ${this.cardsList.failedCards[0]}.<br><br> You can cancel and retry connecting the failed card or proceed to the next step.`;
     }
@@ -219,6 +221,7 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
 
   ngOnInit(): void {
     this.fg = this.fb.group({});
+    this.trackingService.eventTrack('Connect Cards Onboarding Step - Viewed');
     this.setupForm();
   }
 
@@ -287,6 +290,9 @@ export class SpenderOnboardingConnectCardStepComponent implements OnInit, OnChan
     if (this.cardsList.failedCards.length > 0) {
       this.showErrorPopover();
     } else {
+      this.trackingService.eventTrack('Connect Cards Onboarding Step - Completed', {
+        numberOfCards: this.cardsList.successfulCards.length,
+      });
       this.isStepComplete.emit(true);
     }
   }

src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.spec.ts

@@ -137,24 +137,6 @@ describe('SpenderOnboardingOptInStepComponent', () => {
         message: 'EDIT_NUMBER',
       });
     });
-
-    it('should dismiss modal if user clicked from mobile input screen', () => {
-      component.optInFlowState = OptInFlowState.MOBILE_INPUT;
-      component.goBack();
-      expect(modalController.dismiss).toHaveBeenCalledTimes(1);
-      expect(trackingService.skipOptInFlow).toHaveBeenCalledTimes(1);
-    });
-
-    it('should dismiss modal if user clicked from success screen', () => {
-      component.optInFlowState = OptInFlowState.SUCCESS;
-      component.goBack();
-      expect(modalController.dismiss).toHaveBeenCalledOnceWith({
-        action: 'SUCCESS',
-      });
-      expect(trackingService.optInFlowSuccess).toHaveBeenCalledOnceWith({
-        message: 'SUCCESS',
-      });
-    });
   });
 
   describe('validateInput():', () => {

src/app/fyle/spender-onboarding/spender-onboarding-opt-in-step/spender-onboarding-opt-in-step.component.ts

@@ -135,6 +135,7 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
   }
 
   ngOnInit(): void {
+    this.trackingService.eventTrack('Sms Opt In Onboarding Step - Viewed');
     this.fg = this.fb.group({});
     this.fg.addControl('mobile_number', this.fb.control('', [Validators.required, Validators.maxLength(10)]));
     this.spenderOnboardingService.getOnboardingStatus().subscribe((onboardingStatus) => {
@@ -146,18 +147,8 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
 
   goBack(): void {
     if (this.optInFlowState === OptInFlowState.OTP_VERIFICATION) {
-      this.trackingService.optInFlowRetry({
-        message: 'EDIT_NUMBER',
-      });
+      this.trackingService.eventTrack('Sms Opt In Onboarding Step - Edit Number');
       this.optInFlowState = OptInFlowState.MOBILE_INPUT;
-    } else if (this.optInFlowState === OptInFlowState.SUCCESS) {
-      this.trackingService.optInFlowSuccess({
-        message: 'SUCCESS',
-      });
-      this.modalController.dismiss({ action: 'SUCCESS' });
-    } else {
-      this.trackingService.skipOptInFlow();
-      this.modalController.dismiss();
     }
   }
 
@@ -227,6 +218,7 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
         'msb-failure-with-camera-icon'
       );
       this.disableResendOtp = true;
+      this.trackingService.eventTrack('Sms Opt In Onboarding Step - Max Otp Attempts Reached');
     }
 
     this.sendCodeLoading = false;
@@ -294,6 +286,7 @@ export class SpenderOnboardingOptInStepComponent implements OnInit, OnChanges {
           this.optInFlowState = OptInFlowState.SUCCESS;
           this.verifyingOtp = false;
           this.isStepComplete.emit(true);
+          this.trackingService.eventTrack('Sms Opt In Onboarding Step - Completed');
           this.userEventService.clearTaskCache();
         },
         error: () => {

src/app/fyle/spender-onboarding/spender-onboarding.page.spec.ts

@@ -14,6 +14,7 @@ import { extendedOrgUserResponse } from 'src/app/core/test-data/tasks.service.sp
 import { OnboardingStepStatus } from 'src/app/core/models/onboarding-step-status.model';
 import { orgSettingsWoTaxAndRtf } from 'src/app/core/mock-data/org-settings.data';
 import { statementUploadedCard } from 'src/app/core/mock-data/platform-corporate-card.data';
+import { TrackingService } from 'src/app/core/services/tracking.service';
 
 describe('SpenderOnboardingPage', () => {
   let component: SpenderOnboardingPage;
@@ -24,6 +25,7 @@ describe('SpenderOnboardingPage', () => {
   let orgSettingsService: jasmine.SpyObj<OrgSettingsService>;
   let corporateCreditCardExpenseService: jasmine.SpyObj<CorporateCreditCardExpenseService>;
   let router: jasmine.SpyObj<Router>;
+  let trackingService: jasmine.SpyObj<TrackingService>;
 
   beforeEach(async () => {
     const loaderServiceSpy = jasmine.createSpyObj('LoaderService', ['showLoader', 'hideLoader']);
@@ -42,6 +44,7 @@ describe('SpenderOnboardingPage', () => {
       'getCorporateCards',
     ]);
     const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+    const trackingServiceSpy = jasmine.createSpyObj('TrackingService', ['eventTrack']);
 
     await TestBed.configureTestingModule({
       declarations: [SpenderOnboardingPage],
@@ -52,6 +55,7 @@ describe('SpenderOnboardingPage', () => {
         { provide: OrgSettingsService, useValue: orgSettingsServiceSpy },
         { provide: CorporateCreditCardExpenseService, useValue: corporateCreditCardExpenseServiceSpy },
         { provide: Router, useValue: routerSpy },
+        { provide: TrackingService, useValue: trackingServiceSpy },
       ],
     }).compileComponents();
 
@@ -66,6 +70,7 @@ describe('SpenderOnboardingPage', () => {
       CorporateCreditCardExpenseService
     ) as jasmine.SpyObj<CorporateCreditCardExpenseService>;
     router = TestBed.inject(Router) as jasmine.SpyObj<Router>;
+    trackingService = TestBed.inject(TrackingService) as jasmine.SpyObj<TrackingService>;
     spenderOnboardingService.markWelcomeModalStepAsComplete.and.returnValue(of({ is_complete: true }));
   });
 

src/app/fyle/spender-onboarding/spender-onboarding.page.ts

@@ -11,6 +11,7 @@ import { CorporateCreditCardExpenseService } from 'src/app/core/services/corpora
 import { OrgSettings } from 'src/app/core/models/org-settings.model';
 import { OnboardingState } from 'src/app/core/models/onboarding-state.enum';
 import { OnboardingStatus } from 'src/app/core/models/onboarding-status.model';
+import { TrackingService } from 'src/app/core/services/tracking.service';
 
 @Component({
   selector: 'app-spender-onboarding',
@@ -44,7 +45,8 @@ export class SpenderOnboardingPage {
     private spenderOnboardingService: SpenderOnboardingService,
     private orgSettingsService: OrgSettingsService,
     private corporateCreditCardExpenseService: CorporateCreditCardExpenseService,
-    private router: Router
+    private router: Router,
+    private trackingService: TrackingService
   ) {}
 
   navigateToDashboard(orgSettings: OrgSettings, onboardingStatus: OnboardingStatus): void {
@@ -117,6 +119,7 @@ export class SpenderOnboardingPage {
         .skipConnectCardsStep()
         .pipe(
           map(() => {
+            this.trackingService.eventTrack('Connect Cards Onboarding Step - Skipped');
             this.currentStep = OnboardingStep.OPT_IN;
           })
         )
@@ -128,6 +131,7 @@ export class SpenderOnboardingPage {
         .pipe(
           switchMap(() => this.spenderOnboardingService.markWelcomeModalStepAsComplete()),
           map(() => {
+            this.trackingService.eventTrack('Sms Opt In Onboarding Step - Skipped');
             this.spenderOnboardingService.setOnboardingStatusEvent();
             this.onboardingComplete = true;
             this.router.navigate(['/', 'enterprise', 'my_dashboard']);