PER-9494: Convert Mixpanel calls to use the MixpanelRepo

Added mixpanel calls for legacy contact, directive Added the missing dependencies to the tests Added tests to the MixpanelRepo
PermanentOrg · Mar 14, 2024 · f059c31 · f059c31
1 parent 61a9b1d
commit f059c31
Show file tree

Hide file tree

Showing 17 changed files with 301 additions and 107 deletions.
diff --git a/src/app/core/components/storage-dialog/storage-dialog.component.spec.ts b/src/app/core/components/storage-dialog/storage-dialog.component.spec.ts
@@ -1,6 +1,6 @@
 /* @format */
 import { Shallow } from 'shallow-render';
-import { BillingResponse } from '@shared/services/api/index.repo';
+import { BillingResponse, MixpanelData } from '@shared/services/api/index.repo';
 import { AccountService } from '@shared/services/account/account.service';
 import { CoreModule } from '@core/core.module';
 import { DialogRef } from '@root/app/dialog/dialog.service';
@@ -37,8 +37,16 @@ class MockBillingRepo {
   }
 }
 
+class MockMixpanelRepo {
+  public sendData(_data: MixpanelData): Promise<unknown[]> {
+    return Promise.resolve([]);
+  }
+
+}
+
 interface MockApiService {
   billing: MockBillingRepo;
+  mixpanel: MockMixpanelRepo;
 }
 class MockAccountService {
   public addedStorage: number | undefined;
@@ -70,7 +78,10 @@ describe('StorageDialogComponent', () => {
       queryParamMap: queryParamMap.asObservable(),
     };
     mockAccountService = new MockAccountService();
-    mockApiService = { billing: new MockBillingRepo() };
+    mockApiService = {
+      billing: new MockBillingRepo(),
+      mixpanel: new MockMixpanelRepo(),
+    };
     shallow = new Shallow(StorageDialogComponent, CoreModule)
       .dontMock(AccountService)
       .dontMock(ApiService)

diff --git a/src/app/core/components/storage-dialog/storage-dialog.component.ts b/src/app/core/components/storage-dialog/storage-dialog.component.ts
@@ -112,6 +112,10 @@ export class StorageDialogComponent
       this.waiting = true;
       const account = this.account.getAccount();
       const response = await this.api.billing.redeemPromoCode(value);
+      await this.account.refreshAccount();
+      const promo = response.getPromoVO();
+      const bytes = promo.sizeInMB * (1024 * 1024);
+      this.account.addStorageBytes(bytes);
       await this.api.mixpanel.sendData({
         entity: 'account',
         action: 'submit_promo',
@@ -124,10 +128,6 @@ export class StorageDialogComponent
           },
         },
       });
-      await this.account.refreshAccount();
-      const promo = response.getPromoVO();
-      const bytes = promo.sizeInMB * (1024 * 1024);
-      this.account.addStorageBytes(bytes);
       const pipe = new FileSizePipe();
       this.message.showMessage(
         `Gift code redeemed for ${pipe.transform(bytes)} of storage`,

diff --git a/src/app/directive/components/directive-dialog/directive-dialog.component.spec.ts b/src/app/directive/components/directive-dialog/directive-dialog.component.spec.ts
@@ -2,6 +2,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DirectiveDialogComponent } from './directive-dialog.component';
+import { ApiService } from '@shared/services/api/api.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AccountService } from '@shared/services/account/account.service';
+import { AccountVO } from '@models/account-vo';
 
 describe('DirectiveDialogComponent', () => {
   let component: DirectiveDialogComponent;
@@ -10,6 +14,18 @@ describe('DirectiveDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DirectiveDialogComponent],
+      providers: [
+        ApiService,
+        {
+          provide: AccountService,
+          useValue: {
+            getAccount: () => {
+              return new AccountVO({ accountId: 1 });
+            },
+          },
+        },
+      ],
+      imports: [HttpClientTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(DirectiveDialogComponent);

diff --git a/src/app/directive/components/directive-dialog/directive-dialog.component.ts b/src/app/directive/components/directive-dialog/directive-dialog.component.ts
@@ -1,6 +1,8 @@
 /* @format */
 import { Component } from '@angular/core';
 import { Directive } from '@models/directive';
+import { AccountService } from '@shared/services/account/account.service';
+import { ApiService } from '@shared/services/api/api.service';
 
 export type DialogState = 'display' | 'edit';
 
@@ -10,6 +12,23 @@ export type DialogState = 'display' | 'edit';
   styleUrls: ['./directive-dialog.component.scss'],
 })
 export class DirectiveDialogComponent {
+  constructor(private api: ApiService, private accountService: AccountService) {
+    const account = this.accountService.getAccount();
+    this.api.mixpanel.sendData({
+      entity: 'account',
+      action: 'open_archive_steward',
+      version: 1,
+      entityId: account.accountId.toString(),
+      body: {
+        analytics: {
+          event: 'View Archive Steward',
+          data: {
+            page: 'Archive Steward',
+          },
+        },
+      },
+    });
+  }
   public mode: DialogState = 'display';
   public directive: Directive;
 

diff --git a/src/app/directive/components/directive-edit/directive-edit.component.spec.ts b/src/app/directive/components/directive-edit/directive-edit.component.spec.ts
@@ -15,9 +15,15 @@ import {
   MockMessageService,
   createDirective,
 } from './test-utils';
+import { MixpanelData } from '@shared/services/api/mixpanel.repo';
 
 class MockApiService {
   public directive = new MockDirectiveRepo();
+  public mixpanel = {
+    sendData: (data: MixpanelData) => {
+      return Promise.resolve();
+    },
+  };
 }
 
 type Find = (

diff --git a/src/app/directive/components/directive-edit/directive-edit.component.ts b/src/app/directive/components/directive-edit/directive-edit.component.ts
@@ -47,6 +47,18 @@ export class DirectiveEditComponent implements OnInit {
         this.catchNotFoundError(response);
         this.directive = response;
         this.savedDirective.emit(this.directive);
+        this.api.mixpanel.sendData({
+          entity: 'directive',
+          action: 'update',
+          version: 1,
+          entityId: this.directive.directiveId.toString(),
+          body: {
+            analytics: {
+              event: 'Edit Archive Steward',
+              data: {},
+            },
+          },
+        });
       } else {
         const savedDirective = await this.api.directive.create({
           archiveId: this.account.getArchive().archiveId.toString(),
@@ -57,8 +69,22 @@ export class DirectiveEditComponent implements OnInit {
           stewardEmail: this.email,
           note: this.note,
         });
+
         this.catchNotFoundError(savedDirective);
         this.savedDirective.emit(savedDirective);
+
+        this.api.mixpanel.sendData({
+          entity: 'directive',
+          action: 'create',
+          version: 1,
+          entityId: savedDirective.directiveId.toString(),
+          body: {
+            analytics: {
+              event: 'Edit Archive Steward',
+              data: {},
+            },
+          },
+        });
       }
     } catch {
       if (this.accountExists) {

diff --git a/src/app/directive/components/legacy-contact-dialog/legacy-contact-dialog.component.spec.ts b/src/app/directive/components/legacy-contact-dialog/legacy-contact-dialog.component.spec.ts
@@ -2,6 +2,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LegacyContactDialogComponent } from './legacy-contact-dialog.component';
+import { ApiService } from '@shared/services/api/api.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AccountService } from '@shared/services/account/account.service';
+import { AccountVO } from '@models/account-vo';
 
 describe('LegacyContactDialogComponent', () => {
   let component: LegacyContactDialogComponent;
@@ -10,6 +14,18 @@ describe('LegacyContactDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [LegacyContactDialogComponent],
+      providers: [
+        ApiService,
+        {
+          provide: AccountService,
+          useValue: {
+            getAccount: () => {
+              return new AccountVO({ accountId: 1 });
+            },
+          },
+        },
+      ],
+      imports: [HttpClientTestingModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(LegacyContactDialogComponent);

diff --git a/src/app/directive/components/legacy-contact-dialog/legacy-contact-dialog.component.ts b/src/app/directive/components/legacy-contact-dialog/legacy-contact-dialog.component.ts
@@ -2,13 +2,32 @@
 import { Component } from '@angular/core';
 import { LegacyContact } from '@models/directive';
 import { DialogState } from '../directive-dialog/directive-dialog.component';
+import { ApiService } from '@shared/services/api/api.service';
+import { AccountService } from '@shared/services/account/account.service';
 
 @Component({
   selector: 'pr-legacy-contact-dialog',
   templateUrl: './legacy-contact-dialog.component.html',
   styleUrls: ['./legacy-contact-dialog.component.scss'],
 })
 export class LegacyContactDialogComponent {
+  constructor(private api: ApiService, private accountService: AccountService) {
+    const account = this.accountService.getAccount();
+    this.api.mixpanel.sendData({
+      entity: 'account',
+      action: 'open_legacy_contact',
+      version: 1,
+      entityId: account.accountId.toString(),
+      body: {
+        analytics: {
+          event: 'View Legacy Contact',
+          data: {
+            page: 'Legacy Contact',
+          },
+        },
+      },
+    });
+  }
   public mode: DialogState = 'display';
   public legacyContact: LegacyContact;
 

diff --git a/src/app/directive/components/legacy-contact-edit/legacy-contact-edit.component.spec.ts b/src/app/directive/components/legacy-contact-edit/legacy-contact-edit.component.spec.ts
@@ -9,6 +9,7 @@ import { DirectiveModule } from '../../directive.module';
 import { MockDirectiveRepo } from '../legacy-contact-display/test-utils';
 import { MockMessageService } from '../directive-edit/test-utils';
 import { LegacyContactEditComponent } from './legacy-contact-edit.component';
+import { MixpanelData } from '@shared/services/api/mixpanel.repo';
 
 type Find = (
   cssOrDirective: string | Type<any>,
@@ -19,6 +20,11 @@ type Find = (
 
 class MockApiService {
   public directive = new MockDirectiveRepo();
+  public mixpanel = {
+    sendData: (data: MixpanelData) => {
+      return Promise.resolve();
+    },
+  };
 }
 
 describe('LegacyContactEditComponent', () => {
@@ -183,6 +189,7 @@ describe('LegacyContactEditComponent', () => {
     const { instance, find, fixture, outputs } = await shallow.render({
       bind: {
         legacyContact: {
+          id:'1',
           name: 'Test Output',
           email: '[email protected]',
         },

diff --git a/src/app/directive/components/legacy-contact-edit/legacy-contact-edit.component.ts b/src/app/directive/components/legacy-contact-edit/legacy-contact-edit.component.ts
@@ -40,6 +40,18 @@ export class LegacyContactEditComponent implements OnInit {
         });
       }
       this.savedLegacyContact.emit(returnedLegacyContact);
+      await this.api.mixpanel.sendData({
+        entity: 'legacy_contact',
+        action: this.isUpdating() ? 'update' : 'create',
+        version: 1,
+        entityId: returnedLegacyContact.legacyContactId.toString(),
+        body: {
+          analytics: {
+            event: 'Edit Legacy Contact',
+            data: {},
+          },
+        },
+      });
     } catch {
       this.message.showError(
         "An error occured when saving your account's Legacy Contact. Please try again."

diff --git a/src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts b/src/app/onboarding/components/create-new-archive/create-new-archive.component.spec.ts
@@ -6,10 +6,17 @@ import { ArchiveVO } from '@models/archive-vo';
 import { ApiService } from '@shared/services/api/api.service';
 import { AccountService } from '@shared/services/account/account.service';
 import { CreateNewArchiveComponent } from './create-new-archive.component';
+import { AccountVO } from '@models/account-vo';
+import { MixpanelData } from '@shared/services/api/mixpanel.repo';
 
 let calledCreate: boolean = false;
 let createdArchive: ArchiveVO | null;
 const mockApiService = {
+  mixpanel: {
+    sendData: (data: MixpanelData) => {
+      return Promise.resolve();
+    },
+  },
   archive: {
     create: async (a: ArchiveVO) => {
       calledCreate = true;
@@ -22,6 +29,9 @@ const mockApiService = {
 };
 
 const mockAccountService = {
+  getAccount: () => {
+    return new AccountVO({ accountId: 1 });
+  },
   createAccountForMe: new BehaviorSubject<{ name: string; action: string }>({
     name: '',
     action: '',

diff --git a/src/app/onboarding/components/onboarding/onboarding.component.spec.ts b/src/app/onboarding/components/onboarding/onboarding.component.spec.ts
@@ -11,6 +11,7 @@ import { ApiService } from '@shared/services/api/api.service';
 import { MessageService } from '@shared/services/message/message.service';
 import { OnboardingModule } from '../../onboarding.module';
 import { OnboardingComponent } from './onboarding.component';
+import { MixpanelData } from '@shared/services/api/mixpanel.repo';
 
 class NullRoute {
   public snapshot = {
@@ -20,6 +21,12 @@ class NullRoute {
 
 let throwError: boolean = false;
 const mockApiService = {
+  mixpanel: {
+    sendData: (data: MixpanelData) => {
+      return Promise.resolve();
+    },
+  },
+
   archive: {
     getAllArchives: async (data: any) => {
       if (throwError) {

diff --git a/src/app/onboarding/components/onboarding/onboarding.component.ts b/src/app/onboarding/components/onboarding/onboarding.component.ts
@@ -62,6 +62,18 @@ export class OnboardingComponent implements OnInit {
         }
       }
     });
+    this.api.mixpanel.sendData({
+      entity: 'account',
+      action: 'create',
+      entityId: this.account.getAccount().accountId.toString(),
+      version: 1,
+      body: {
+        analytics: {
+          event: 'Sign up',
+          data: {},
+        },
+      },
+    });
   }
 
   public setScreen(screen: OnboardingScreen): void {

diff --git a/src/app/pledge/components/new-pledge/new-pledge.component.spec.ts b/src/app/pledge/components/new-pledge/new-pledge.component.spec.ts
@@ -11,6 +11,7 @@ import { PledgeService } from '../../services/pledge.service';
 import { ApiService } from '../../../shared/services/api/api.service';
 import { PledgeModule } from '../../pledge.module';
 import { NewPledgeComponent } from './new-pledge.component';
+import { MixpanelData } from '@shared/services/api/mixpanel.repo';
 
 const mockPromoData = {
   Results: [
@@ -35,7 +36,7 @@ const mockAccountService = {
   },
   setAccount: (account: AccountVO): void => {},
   getAccount: (): AccountVO => {
-    return new AccountVO({ spaceLeft: 10000, spaceTotal: 10000 });
+    return new AccountVO({ spaceLeft: 10000, spaceTotal: 10000, accountId: 1 });
   },
   isLoggedIn: (): boolean => true,
 };
@@ -53,6 +54,11 @@ const mockPledgeService = {
 };
 
 const mockApiService = {
+  mixpanel: {
+    sendData: (data: MixpanelData) => {
+      return Promise.resolve();
+    },
+  },
   billing: {
     claimPledge: (
       billingPaymentVO: BillingPaymentVO,