From 31b34697eb794fcdae8686a7bf1a1f4e62a9a95a Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Wed, 25 Sep 2024 14:13:04 -0600 Subject: [PATCH 1/8] 24-sep-bach-fixes --- .../observability-events.service.ts | 6 +- .../form-current-employment.component.ts | 13 +- .../form-password/form-password.component.ts | 14 +- .../form-personal/form-personal.component.ts | 11 +- .../form-visibility.component.ts | 9 +- .../components/step-a/step-a.component.html | 1 - .../components/step-a/step-a.component.ts | 32 +- .../components/step-b/step-b.component.html | 4 +- .../components/step-b/step-b.component.ts | 17 +- .../components/step-c/step-c.component.html | 2 + .../components/step-c/step-c.component.ts | 11 +- .../components/step-c2/step-c2.component.html | 4 +- .../components/step-c2/step-c2.component.ts | 30 +- .../components/step-d/step-d.component.html | 3 +- .../components/step-d/step-d.component.ts | 13 +- .../pages/register/register2.component.ts | 28 +- src/app/register2/register-obserability.ts | 137 + src/app/register2/register-state.service.ts | 33 + src/environments/environment.local.ts | 2 +- src/index.html | 4036 ++++++++++++++++- 20 files changed, 4366 insertions(+), 40 deletions(-) create mode 100644 src/app/register2/register-obserability.ts diff --git a/src/app/core/observability-events/observability-events.service.ts b/src/app/core/observability-events/observability-events.service.ts index 55f2a2c019..db81a9b47f 100644 --- a/src/app/core/observability-events/observability-events.service.ts +++ b/src/app/core/observability-events/observability-events.service.ts @@ -41,7 +41,7 @@ export class CustomEventService { * @param additionalAttributes Any additional attributes related to the event. */ recordEvent( - journeyType: string, + journeyType: journeyType, eventName: string, additionalAttributes: any = {} ): void { @@ -68,6 +68,7 @@ export class CustomEventService { console.debug( `-> Event "${eventName}" recorded for journey "${journeyType}" with elapsed time ${elapsedTime}ms` ) + console.log(eventAttributes) } } @@ -100,7 +101,8 @@ export class CustomEventService { delete this.journeys[journeyType] console.log( - `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms` + `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms`, + console.log(finalAttributes) ) } } diff --git a/src/app/register2/components/form-current-employment/form-current-employment.component.ts b/src/app/register2/components/form-current-employment/form-current-employment.component.ts index ef6c2dd632..ff5a1153c4 100644 --- a/src/app/register2/components/form-current-employment/form-current-employment.component.ts +++ b/src/app/register2/components/form-current-employment/form-current-employment.component.ts @@ -32,6 +32,7 @@ import { RecordAffiliationService } from 'src/app/core/record-affiliations/recor import { dateMonthYearValidator } from 'src/app/shared/validators/date/date.validator' import { RegisterStateService } from '../../register-state.service' import { OrgDisambiguated } from 'src/app/types' +import { RegisterObservabilityService } from '../../register-obserability' export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState( control: FormControl | null, @@ -85,7 +86,7 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit { filteredOptions: Observable - @Input() nextButtonWasClicked: boolean + nextButtonWasClicked: boolean @Input() reactivation: ReactivationLocal @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective ariaLabelClearOrganization = $localize`:@@register.clearOrganization:Clear organization` @@ -119,7 +120,8 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit { private _liveAnnouncer: LiveAnnouncer, private _recordAffiliationService: RecordAffiliationService, private _formBuilder: FormBuilder, - private registerStateService: RegisterStateService + private registerStateService: RegisterStateService, + private _registerObservabilityService: RegisterObservabilityService ) { super() this._platform.get().subscribe((platform) => { @@ -129,6 +131,13 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit { } ngOnInit() { + this.registerStateService.getNextButtonClickFor('c2').subscribe(() => { + this.nextButtonWasClicked = true + this._registerObservabilityService.stepC2NextButtonClicked(this.form) + }) + this.registerStateService.getSkipButtonClickFor('c2').subscribe(() => { + this._registerObservabilityService.stepC2SkipButtonClicked(this.form) + }) this.registerStateService.matchOrganization$.subscribe((organization) => { this.organization = organization this.form.patchValue({ diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts index 4aeb9f34ff..b8d1e2b85a 100644 --- a/src/app/register2/components/form-password/form-password.component.ts +++ b/src/app/register2/components/form-password/form-password.component.ts @@ -22,6 +22,8 @@ import { OrcidValidators } from 'src/app/validators' import { BaseForm } from '../BaseForm' import { LiveAnnouncer } from '@angular/cdk/a11y' import { environment } from 'src/environments/environment' +import { RegisterObservabilityService } from '../../register-obserability' +import { RegisterStateService } from '../../register-state.service' @Component({ selector: 'app-form-password', @@ -63,7 +65,9 @@ export class FormPasswordComponent extends BaseForm implements OnInit { hasNumberPattern = HAS_NUMBER hasLetterOrSymbolPattern = HAS_LETTER_OR_SYMBOL @Input() personalData: RegisterForm - @Input() nextButtonWasClicked: boolean + nextButtonWasClicked: boolean + + currentValidate8orMoreCharactersStatus: boolean ccurentValidateAtLeastALetterOrSymbolStatus: boolean currentValidateAtLeastANumber: boolean @@ -72,11 +76,17 @@ export class FormPasswordComponent extends BaseForm implements OnInit { constructor( private _register: Register2Service, private _liveAnnouncer: LiveAnnouncer, - private _changeDetectorRef: ChangeDetectorRef + private _changeDetectorRef: ChangeDetectorRef, + private _registerObservability: RegisterObservabilityService, + private _registerStateService: RegisterStateService ) { super() } ngOnInit() { + this._registerStateService.getNextButtonClickFor('b').subscribe((value) => { + this.nextButtonWasClicked = true + this._registerObservability.stepBNextButtonClicked(this.form) + }) this.form = new UntypedFormGroup( { password: new UntypedFormControl('', { diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts index dfe10074ee..b5cd862d24 100644 --- a/src/app/register2/components/form-personal/form-personal.component.ts +++ b/src/app/register2/components/form-personal/form-personal.component.ts @@ -50,6 +50,8 @@ import { SignInService } from 'src/app/core/sign-in/sign-in.service' import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service' import { ERROR_REPORT } from 'src/app/errors' import { RegisterStateService } from '../../register-state.service' +import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' +import { RegisterObservabilityService } from '../../register-obserability' export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState( control: FormControl | null, @@ -88,7 +90,6 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { }) export class FormPersonalComponent extends BaseForm implements OnInit { matcher = new MyErrorStateMatcher() - @Input() nextButtonWasClicked: boolean @Input() reactivation: ReactivationLocal @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective emailPlaceholder = $localize`:@@register.emailPlaceholder:The email address you use most` @@ -104,6 +105,7 @@ export class FormPersonalComponent extends BaseForm implements OnInit { undefinedEmail: boolean emailsAreValidAlreadyChecked: boolean registerBackendErrors: RegisterBackendErrors + nextButtonWasClicked: boolean constructor( private _register: Register2Service, @@ -115,7 +117,8 @@ export class FormPersonalComponent extends BaseForm implements OnInit { private _signIn: SignInService, private _errorHandler: ErrorHandlerService, private _registerStateService: RegisterStateService, - @Inject(WINDOW) private window: Window + @Inject(WINDOW) private window: Window, + private _registerObservability: RegisterObservabilityService ) { super() } @@ -129,6 +132,10 @@ export class FormPersonalComponent extends BaseForm implements OnInit { }) ngOnInit() { + this._registerStateService.getNextButtonClickFor('a').subscribe((value) => { + this.nextButtonWasClicked = true + this._registerObservability.stepANextButtonClicked(this.form) + }) this.emails = new UntypedFormGroup( { email: new UntypedFormControl('', { diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts index e12d3ffdc6..8d98a24aef 100644 --- a/src/app/register2/components/form-visibility/form-visibility.component.ts +++ b/src/app/register2/components/form-visibility/form-visibility.component.ts @@ -11,6 +11,8 @@ import { VISIBILITY_OPTIONS } from 'src/app/constants' import { Register2Service } from 'src/app/core/register2/register2.service' import { BaseForm } from '../BaseForm' +import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-obserability' @Component({ selector: 'app-form-visibility', @@ -44,11 +46,16 @@ export class FormVisibilityComponent activitiesVisibilityDefault = new UntypedFormControl('', Validators.required) constructor( private _register: Register2Service, - private _errorStateMatcher: ErrorStateMatcher + private _errorStateMatcher: ErrorStateMatcher, + private _registerStateService: RegisterStateService, + private _registerObservability: RegisterObservabilityService ) { super() } ngOnInit() { + this._registerStateService.getNextButtonClickFor('c').subscribe(() => { + this._registerObservability.stepCNextButtonClicked(this.form) + }) this.form = new UntypedFormGroup({ activitiesVisibilityDefault: this.activitiesVisibilityDefault, }) diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html index 4d18982117..21396af6fa 100644 --- a/src/app/register2/components/step-a/step-a.component.html +++ b/src/app/register2/components/step-a/step-a.component.html @@ -50,7 +50,6 @@

diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts index 40e5870d80..721cde7e25 100644 --- a/src/app/register2/components/step-a/step-a.component.ts +++ b/src/app/register2/components/step-a/step-a.component.ts @@ -3,6 +3,7 @@ import { Component, ElementRef, Input, + OnInit, ViewChild, } from '@angular/core' @@ -13,6 +14,8 @@ import { ApplicationRoutes } from 'src/app/constants' import { environment } from 'src/environments/environment' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' +import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' +import { RegisterStateService } from '../../register-state.service' @Component({ selector: 'app-step-a', @@ -24,18 +27,33 @@ import { BaseStepDirective } from '../BaseStep' ], preserveWhitespaces: true, }) -export class StepAComponent extends BaseStepDirective implements AfterViewInit { +export class StepAComponent + extends BaseStepDirective + implements AfterViewInit, OnInit +{ @ViewChild('firstInput') firstInput: ElementRef @Input() reactivation: ReactivationLocal nextButtonWasClicked: boolean - constructor(private _platform: PlatformInfoService, private _router: Router) { + constructor( + private _platform: PlatformInfoService, + private _router: Router, + private _observability: CustomEventService, + private _registerStateService: RegisterStateService + ) { super() } + + ngOnInit(): void { + this._observability.recordEvent('orcid_registration', 'step-a-loaded', { + initialFormValue: this.formGroup.controls.personal.value, + }) + } infoSiteBaseUrl = environment.INFO_SITE goBack() { + this._registerStateService.registerStepperButtonClicked('a', 'back') this._platform .get() .pipe(first()) @@ -72,10 +90,14 @@ export class StepAComponent extends BaseStepDirective implements AfterViewInit { nextButton2() { this.nextButtonWasClicked = true - // this.formGroup.controls.personal.markAsTouched() + this._registerStateService.registerStepperButtonClicked('a', 'next') } signIn() { + this._observability.recordEvent( + 'orcid_registration', + 'step-a-sign-in-button-clicked' + ) this._platform .get() .pipe(first()) @@ -99,4 +121,8 @@ export class StepAComponent extends BaseStepDirective implements AfterViewInit { }) }) } + + backButton() { + this._registerStateService.registerStepperButtonClicked('a', 'back') + } } diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html index 169dbafa7a..bf1edfd6c4 100644 --- a/src/app/register2/components/step-b/step-b.component.html +++ b/src/app/register2/components/step-b/step-b.component.html @@ -32,7 +32,6 @@

diff --git a/src/app/register2/components/step-c/step-c.component.ts b/src/app/register2/components/step-c/step-c.component.ts index 4060b11ccd..4a20516448 100644 --- a/src/app/register2/components/step-c/step-c.component.ts +++ b/src/app/register2/components/step-c/step-c.component.ts @@ -2,6 +2,8 @@ import { Component, Input } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' +import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' +import { RegisterStateService } from '../../register-state.service' @Component({ selector: 'app-step-c', @@ -16,7 +18,14 @@ export class StepCComponent extends BaseStepDirective { @Input() loading @Input() reactivation: ReactivationLocal - constructor() { + constructor(private _registrationStateService: RegisterStateService) { super() } + + nextButton2() { + this._registrationStateService.registerStepperButtonClicked('c', 'next') + } + backButton() { + this._registrationStateService.registerStepperButtonClicked('c', 'back') + } } diff --git a/src/app/register2/components/step-c2/step-c2.component.html b/src/app/register2/components/step-c2/step-c2.component.html index a5f207a1de..025a828703 100644 --- a/src/app/register2/components/step-c2/step-c2.component.html +++ b/src/app/register2/components/step-c2/step-c2.component.html @@ -42,7 +42,6 @@

diff --git a/src/app/register2/components/step-c2/step-c2.component.ts b/src/app/register2/components/step-c2/step-c2.component.ts index 76f28bdae3..0d59003589 100644 --- a/src/app/register2/components/step-c2/step-c2.component.ts +++ b/src/app/register2/components/step-c2/step-c2.component.ts @@ -3,6 +3,8 @@ import { Component, EventEmitter, Input, Output } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' import { FormBuilder, FormGroup } from '@angular/forms' +import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' +import { RegisterStateService } from '../../register-state.service' @Component({ selector: 'app-step-c2', @@ -19,29 +21,27 @@ export class StepC2Component extends BaseStepDirective { nextButtonWasClicked: boolean @Output() formGroupStepC2OptionalChange = new EventEmitter() - constructor(private _formBuilder: FormBuilder) { + constructor( + private _formBuilder: FormBuilder, + private _observability: CustomEventService, + private _registerStateService: RegisterStateService + ) { super() } optionalNextStep() { - this.formGroup.setValue({ - affiliations: { - organization: '', - departmentName: '', - roleTitle: '', - startDateGroup: { - startDateMonth: '', - startDateYear: '', - }, - }, - }) this.formGroupStepC2OptionalChange.emit(true) - this.nextButtonWasClicked = true + this._registerStateService.registerStepperButtonClicked('c2', 'skip') } - requiredNextStep() { + nextButton2() { + this.formGroupStepC2OptionalChange.emit(false) - this.nextButtonWasClicked = true + this._registerStateService.registerStepperButtonClicked('c2', 'next') + } + + backButton() { + this._registerStateService.registerStepperButtonClicked('c2', 'back') } } diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html index afbf43998e..3c441ffcc5 100644 --- a/src/app/register2/components/step-d/step-d.component.html +++ b/src/app/register2/components/step-d/step-d.component.html @@ -52,7 +52,7 @@

mat-raised-button color="primary" [disabled]="loading" - (click)="nextButtonWasClicked = true" + (click)="nextButton2()" matStepperNext > matStepperPrevious type="button" id="step-d-back-button" + (click)="backButton()" > Previous Step diff --git a/src/app/register2/components/step-d/step-d.component.ts b/src/app/register2/components/step-d/step-d.component.ts index 8f18e56db3..704a313711 100644 --- a/src/app/register2/components/step-d/step-d.component.ts +++ b/src/app/register2/components/step-d/step-d.component.ts @@ -2,6 +2,9 @@ import { Component, Input } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' +import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' +import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-obserability' @Component({ selector: 'app-step-d', @@ -18,7 +21,15 @@ export class StepDComponent extends BaseStepDirective { nextButtonWasClicked = false - constructor() { + constructor(private _registrationStateService: RegisterStateService, private _registerObservabilityService: RegisterObservabilityService) { super() } + + nextButton2() { + this._registrationStateService.registerStepperButtonClicked('d', 'next') + this._registerObservabilityService.stepDNextButtonClicked(this.formGroup) + } + backButton() { + this._registrationStateService.registerStepperButtonClicked('d', 'back') + } } diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts index 957449b2e7..035824b266 100644 --- a/src/app/register2/pages/register/register2.component.ts +++ b/src/app/register2/pages/register/register2.component.ts @@ -32,6 +32,7 @@ import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint' import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service' import { SearchService } from '../../../core/search/search.service' import { ReactivationLocal } from '../../../types/reactivation.local' +import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' @Component({ selector: 'app-register-2', @@ -83,7 +84,8 @@ export class Register2Component implements OnInit, AfterViewInit { private _router: Router, private _errorHandler: ErrorHandlerService, private _userInfo: UserService, - private _searchService: SearchService + private _searchService: SearchService, + private _observability: CustomEventService, ) { _platformInfo.get().subscribe((platform) => { this.platform = platform @@ -92,6 +94,9 @@ export class Register2Component implements OnInit, AfterViewInit { }) } ngOnInit() { + + this._observability.startJourney('orcid_registration') + this._register.getRegisterForm().subscribe() this.FormGroupStepA = this._formBuilder.group({ @@ -171,6 +176,13 @@ export class Register2Component implements OnInit, AfterViewInit { new Error('registerUnexpectedValidateFail'), ERROR_REPORT.REGISTER ) + this._observability.recordEvent( + 'orcid_registration', + 'register-unexpected-validate-fail', + { + validator, + } + ) } return this._register.register( this.FormGroupStepA, @@ -186,6 +198,13 @@ export class Register2Component implements OnInit, AfterViewInit { .subscribe((response) => { this.loading = false if (response.url) { + this._observability.recordEvent( + 'orcid_registration', + 'register-success', + { + response, + } + ) const analyticsReports: Observable[] = [] analyticsReports.push( @@ -208,6 +227,13 @@ export class Register2Component implements OnInit, AfterViewInit { () => this.afterRegisterRedirectionHandler(response) ) } else { + this._observability.recordEvent( + 'orcid_registration', + 'register-unexpected-confirmation', + { + response, + } + ) this._errorHandler.handleError( new Error('registerUnexpectedConfirmation'), ERROR_REPORT.REGISTER diff --git a/src/app/register2/register-obserability.ts b/src/app/register2/register-obserability.ts new file mode 100644 index 0000000000..eeb73ea75b --- /dev/null +++ b/src/app/register2/register-obserability.ts @@ -0,0 +1,137 @@ +import { Injectable } from '@angular/core' +import { OrganizationsService } from '../core' +import { Organization } from 'src/app/types/record-affiliation.endpoint' +import { Subject } from 'rxjs' +import { OrgDisambiguated } from '../types' +import { CustomEventService } from '../core/observability-events/observability-events.service' +import { UntypedFormArray, UntypedFormGroup } from '@angular/forms' +import { RegisterStateService } from './register-state.service' +@Injectable({ + providedIn: 'root', +}) +export class RegisterObservabilityService { + rorIdHasBeenMatched: boolean = false + matchOrganization$ = new Subject() + primaryEmailMatched: Organization + secondaryEmail: Organization + constructor( + private _observability: CustomEventService, + private _registrationStateService: RegisterStateService + ) { + this._registrationStateService.getBackButtonClick().subscribe((step) => { + this._observability.recordEvent( + 'orcid_registration', + `step-${step.step}-back-button-clicked` + ) + }) + } + + stepANextButtonClicked(form: UntypedFormGroup) { + this._observability.recordEvent( + 'orcid_registration', + 'step-a-next-button-clicked', + { + // List all form controls errors + formValues: form.value, + formValid: form.valid, + errors: { + givenNamesError: form.controls.givenNames.errors, + familyNamesError: form.controls.familyNames.errors, + emailError: (form.controls.emails as UntypedFormGroup).controls.email + .errors, + confirmEmailError: (form.controls.emails as UntypedFormGroup).controls + .confirmEmail.errors, + additionalEmailsError: (form.controls.emails as UntypedFormGroup) + .controls.additionalEmails.errors, + }, + } + ) + } + + stepBNextButtonClicked(form: UntypedFormGroup) { + this._observability.recordEvent( + 'orcid_registration', + 'step-b-next-button-clicked', + { + // List all form controls errors + formValues: form.value, + formValid: form.valid, + errors: { + passwordError: form.controls.password.errors, + confirmPasswordError: form.controls.passwordConfirm.errors, + }, + } + ) + } + + stepC2NextButtonClicked(form: UntypedFormGroup) { + console.log(form) + + this._observability.recordEvent( + 'orcid_registration', + 'step-c2-next-button-clicked', + { + // List all form controls errors + formValues: form.value, + formValid: form.valid, + errors: { + departmentNameError: form.controls.departmentName.errors, + roleTitleError: form.controls.roleTitle.errors, + startDateGroupErrors: form.controls.startDateGroup.errors, + organizationErrors: form.controls.organization.errors, + }, + } + ) + } + + stepC2SkipButtonClicked(form: UntypedFormGroup) { + console.log(form) + this._observability.recordEvent( + 'orcid_registration', + 'step-c2-skip-button-clicked', + { + // List all form controls errors + formValues: form.value, + formValid: form.valid, + errors: { + departmentNameError: form.controls.departmentName.errors, + roleTitleError: form.controls.roleTitle.errors, + startDateGroupErrors: form.controls.startDateGroup.errors, + organizationErrors: form.controls.organization.errors, + }, + } + ) + } + + stepCNextButtonClicked(form: UntypedFormGroup) { + this._observability.recordEvent( + 'orcid_registration', + 'step-c-next-button-clicked', + { + // List all form controls errors + formValues: form.value, + formValid: form.valid, + errors: { + visibilityErrors: form.controls.activitiesVisibilityDefault.errors, + }, + } + ) + } + + stepDNextButtonClicked(form: UntypedFormGroup) { + this._observability.recordEvent( + 'orcid_registration', + 'step-d-next-button-clicked', + { + // List all form controls errors + formValues: form.value, + formValid: form.valid, + errors: { + captcha: form.controls.captcha.errors, + sendMemberUpdatesError: form.controls.sendOrcidNews.errors, + termsOfUseError: form.controls.termsOfUse.errors, + }, + } + ) + } +} diff --git a/src/app/register2/register-state.service.ts b/src/app/register2/register-state.service.ts index 58bf95ceb7..6211e11cc0 100644 --- a/src/app/register2/register-state.service.ts +++ b/src/app/register2/register-state.service.ts @@ -3,12 +3,17 @@ import { OrganizationsService } from '../core' import { Organization } from 'src/app/types/record-affiliation.endpoint' import { Subject } from 'rxjs' import { OrgDisambiguated } from '../types' +import { filter } from 'rxjs/operators' @Injectable({ providedIn: 'root', }) export class RegisterStateService { rorIdHasBeenMatched: boolean = false matchOrganization$ = new Subject() + private stepperButtonClicked = new Subject<{ + step: 'a' | 'b' | 'c' | 'c2' | 'd' + direction: 'next' | 'back' | 'skip' + }>() primaryEmailMatched: Organization secondaryEmail: Organization constructor(private _organizationsService: OrganizationsService) {} @@ -64,4 +69,32 @@ export class RegisterStateService { this.matchOrganization$.next('') } } + + registerStepperButtonClicked( + step: 'a' | 'b' | 'c' | 'c2' | 'd', + direction: 'next' | 'back' | 'skip' + ) { + this.stepperButtonClicked.next({ step, direction }) + } + + getNextButtonClickFor(step: 'a' | 'b' | 'c' | 'c2' | 'd') { + return this.stepperButtonClicked + .asObservable() + .pipe( + filter((value) => value.step === step && value.direction === 'next') + ) + } + getBackButtonClick() { + return this.stepperButtonClicked + .asObservable() + .pipe(filter((value) => value.direction === 'back')) + } + + getSkipButtonClickFor(step: 'a' | 'b' | 'c' | 'c2' | 'd') { + return this.stepperButtonClicked + .asObservable() + .pipe( + filter((value) => value.step === step && value.direction === 'skip') + ) + } } diff --git a/src/environments/environment.local.ts b/src/environments/environment.local.ts index 25061c9d30..975d5c70fd 100644 --- a/src/environments/environment.local.ts +++ b/src/environments/environment.local.ts @@ -1,6 +1,6 @@ export const environment = { production: false, - debugger: false, + debugger: true, ROBOTS: 'all', API_NEWS: 'https://www.mocky.io/v2/5dced45b3000007300931ce8', API_PUB: `//pub./v3.0`, diff --git a/src/index.html b/src/index.html index 75d6f26a56..7fe20c1e32 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,4041 @@ - + Date: Wed, 25 Sep 2024 14:41:50 -0600 Subject: [PATCH 2/8] lmendoza/sep-25-batch-of-fixes --- .../form-current-employment.component.ts | 2 +- .../form-password/form-password.component.ts | 2 +- .../form-personal/form-personal.component.ts | 3 +-- .../form-visibility.component.ts | 2 +- .../components/step-a/step-a.component.ts | 15 +++++-------- .../components/step-b/step-b.component.ts | 14 +++++++----- .../components/step-c/step-c.component.ts | 14 ++++++++---- .../components/step-c2/step-c2.component.ts | 22 +++++++++---------- .../components/step-d/step-d.component.ts | 11 +++++++--- ...y.ts => register-observability.service.ts} | 18 +++++++++++++++ 10 files changed, 64 insertions(+), 39 deletions(-) rename src/app/register2/{register-obserability.ts => register-observability.service.ts} (90%) diff --git a/src/app/register2/components/form-current-employment/form-current-employment.component.ts b/src/app/register2/components/form-current-employment/form-current-employment.component.ts index ff5a1153c4..c92568e11f 100644 --- a/src/app/register2/components/form-current-employment/form-current-employment.component.ts +++ b/src/app/register2/components/form-current-employment/form-current-employment.component.ts @@ -32,7 +32,7 @@ import { RecordAffiliationService } from 'src/app/core/record-affiliations/recor import { dateMonthYearValidator } from 'src/app/shared/validators/date/date.validator' import { RegisterStateService } from '../../register-state.service' import { OrgDisambiguated } from 'src/app/types' -import { RegisterObservabilityService } from '../../register-obserability' +import { RegisterObservabilityService } from '../../register-observability.service' export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState( control: FormControl | null, diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts index b8d1e2b85a..a5675a3a07 100644 --- a/src/app/register2/components/form-password/form-password.component.ts +++ b/src/app/register2/components/form-password/form-password.component.ts @@ -22,7 +22,7 @@ import { OrcidValidators } from 'src/app/validators' import { BaseForm } from '../BaseForm' import { LiveAnnouncer } from '@angular/cdk/a11y' import { environment } from 'src/environments/environment' -import { RegisterObservabilityService } from '../../register-obserability' +import { RegisterObservabilityService } from '../../register-observability.service' import { RegisterStateService } from '../../register-state.service' @Component({ diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts index b5cd862d24..bf5728fa74 100644 --- a/src/app/register2/components/form-personal/form-personal.component.ts +++ b/src/app/register2/components/form-personal/form-personal.component.ts @@ -50,8 +50,7 @@ import { SignInService } from 'src/app/core/sign-in/sign-in.service' import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service' import { ERROR_REPORT } from 'src/app/errors' import { RegisterStateService } from '../../register-state.service' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' -import { RegisterObservabilityService } from '../../register-obserability' +import { RegisterObservabilityService } from '../../register-observability.service' export class MyErrorStateMatcher implements ErrorStateMatcher { isErrorState( control: FormControl | null, diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts index 8d98a24aef..431e900e3e 100644 --- a/src/app/register2/components/form-visibility/form-visibility.component.ts +++ b/src/app/register2/components/form-visibility/form-visibility.component.ts @@ -12,7 +12,7 @@ import { Register2Service } from 'src/app/core/register2/register2.service' import { BaseForm } from '../BaseForm' import { RegisterStateService } from '../../register-state.service' -import { RegisterObservabilityService } from '../../register-obserability' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-form-visibility', diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts index 721cde7e25..f5d4b423cc 100644 --- a/src/app/register2/components/step-a/step-a.component.ts +++ b/src/app/register2/components/step-a/step-a.component.ts @@ -14,8 +14,8 @@ import { ApplicationRoutes } from 'src/app/constants' import { environment } from 'src/environments/environment' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-step-a', @@ -39,16 +39,14 @@ export class StepAComponent constructor( private _platform: PlatformInfoService, private _router: Router, - private _observability: CustomEventService, - private _registerStateService: RegisterStateService + private _registerStateService: RegisterStateService, + private _registerObservabilityService: RegisterObservabilityService ) { super() } ngOnInit(): void { - this._observability.recordEvent('orcid_registration', 'step-a-loaded', { - initialFormValue: this.formGroup.controls.personal.value, - }) + this._registerObservabilityService.stepLoaded('a') } infoSiteBaseUrl = environment.INFO_SITE @@ -94,10 +92,7 @@ export class StepAComponent } signIn() { - this._observability.recordEvent( - 'orcid_registration', - 'step-a-sign-in-button-clicked' - ) + this._registerObservabilityService.signInButtonClicked() this._platform .get() .pipe(first()) diff --git a/src/app/register2/components/step-b/step-b.component.ts b/src/app/register2/components/step-b/step-b.component.ts index f5a3ae8bce..a72f450660 100644 --- a/src/app/register2/components/step-b/step-b.component.ts +++ b/src/app/register2/components/step-b/step-b.component.ts @@ -1,9 +1,9 @@ -import { Component, Input } from '@angular/core' +import { Component, Input, OnInit } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-step-b', @@ -14,17 +14,19 @@ import { RegisterStateService } from '../../register-state.service' '../register2.scss-theme.scss', ], }) -export class StepBComponent extends BaseStepDirective { +export class StepBComponent extends BaseStepDirective implements OnInit { @Input() personalData @Input() reactivation: ReactivationLocal constructor( - private _observability: CustomEventService, - private _registerStateService: RegisterStateService + private _registerStateService: RegisterStateService, + private _registerObservabilityService: RegisterObservabilityService ) { - _observability.recordEvent('orcid_registration', 'step-b-loaded') super() } + ngOnInit(): void { + this._registerObservabilityService.stepLoaded('b') + } nextButtonWasClicked = false diff --git a/src/app/register2/components/step-c/step-c.component.ts b/src/app/register2/components/step-c/step-c.component.ts index 4a20516448..234d33c183 100644 --- a/src/app/register2/components/step-c/step-c.component.ts +++ b/src/app/register2/components/step-c/step-c.component.ts @@ -1,9 +1,9 @@ -import { Component, Input } from '@angular/core' +import { Component, Input, OnInit } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-step-c', @@ -14,13 +14,19 @@ import { RegisterStateService } from '../../register-state.service' '../register2.scss-theme.scss', ], }) -export class StepCComponent extends BaseStepDirective { +export class StepCComponent extends BaseStepDirective implements OnInit { @Input() loading @Input() reactivation: ReactivationLocal - constructor(private _registrationStateService: RegisterStateService) { + constructor( + private _registrationStateService: RegisterStateService, + private _registerObservabilityService: RegisterObservabilityService + ) { super() } + ngOnInit(): void { + this._registerObservabilityService.stepLoaded('c') + } nextButton2() { this._registrationStateService.registerStepperButtonClicked('c', 'next') diff --git a/src/app/register2/components/step-c2/step-c2.component.ts b/src/app/register2/components/step-c2/step-c2.component.ts index 0d59003589..dd1cc89c7d 100644 --- a/src/app/register2/components/step-c2/step-c2.component.ts +++ b/src/app/register2/components/step-c2/step-c2.component.ts @@ -1,10 +1,10 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core' +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' import { FormBuilder, FormGroup } from '@angular/forms' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-step-c2', @@ -15,33 +15,33 @@ import { RegisterStateService } from '../../register-state.service' '../register2.scss-theme.scss', ], }) -export class StepC2Component extends BaseStepDirective { +export class StepC2Component extends BaseStepDirective implements OnInit { @Input() loading @Input() reactivation: ReactivationLocal nextButtonWasClicked: boolean @Output() formGroupStepC2OptionalChange = new EventEmitter() constructor( - private _formBuilder: FormBuilder, - private _observability: CustomEventService, - private _registerStateService: RegisterStateService + private _registrationStateService: RegisterStateService, + private _registerObservabilityService: RegisterObservabilityService ) { super() } + ngOnInit(): void { + this._registerObservabilityService.stepLoaded('c2') + } optionalNextStep() { - this.formGroupStepC2OptionalChange.emit(true) - this._registerStateService.registerStepperButtonClicked('c2', 'skip') + this._registrationStateService.registerStepperButtonClicked('c2', 'skip') } nextButton2() { - this.formGroupStepC2OptionalChange.emit(false) - this._registerStateService.registerStepperButtonClicked('c2', 'next') + this._registrationStateService.registerStepperButtonClicked('c2', 'next') } backButton() { - this._registerStateService.registerStepperButtonClicked('c2', 'back') + this._registrationStateService.registerStepperButtonClicked('c2', 'back') } } diff --git a/src/app/register2/components/step-d/step-d.component.ts b/src/app/register2/components/step-d/step-d.component.ts index 704a313711..5894c7b18d 100644 --- a/src/app/register2/components/step-d/step-d.component.ts +++ b/src/app/register2/components/step-d/step-d.component.ts @@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseStepDirective } from '../BaseStep' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' import { RegisterStateService } from '../../register-state.service' -import { RegisterObservabilityService } from '../../register-obserability' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-step-d', @@ -21,9 +20,15 @@ export class StepDComponent extends BaseStepDirective { nextButtonWasClicked = false - constructor(private _registrationStateService: RegisterStateService, private _registerObservabilityService: RegisterObservabilityService) { + constructor( + private _registrationStateService: RegisterStateService, + private _registerObservabilityService: RegisterObservabilityService + ) { super() } + ngOnInit(): void { + this._registerObservabilityService.stepLoaded('d') + } nextButton2() { this._registrationStateService.registerStepperButtonClicked('d', 'next') diff --git a/src/app/register2/register-obserability.ts b/src/app/register2/register-observability.service.ts similarity index 90% rename from src/app/register2/register-obserability.ts rename to src/app/register2/register-observability.service.ts index eeb73ea75b..02ff9c2a91 100644 --- a/src/app/register2/register-obserability.ts +++ b/src/app/register2/register-observability.service.ts @@ -6,6 +6,7 @@ import { OrgDisambiguated } from '../types' import { CustomEventService } from '../core/observability-events/observability-events.service' import { UntypedFormArray, UntypedFormGroup } from '@angular/forms' import { RegisterStateService } from './register-state.service' +import init from 'helphero' @Injectable({ providedIn: 'root', }) @@ -26,6 +27,13 @@ export class RegisterObservabilityService { }) } + signInButtonClicked() { + this._observability.recordEvent( + 'orcid_registration', + 'step-a-sign-in-button-clicked' + ) + } + stepANextButtonClicked(form: UntypedFormGroup) { this._observability.recordEvent( 'orcid_registration', @@ -134,4 +142,14 @@ export class RegisterObservabilityService { } ) } + + stepLoaded(step: 'a' | 'b' | 'c' | 'c2' | 'd') { + this._observability.recordEvent('orcid_registration', `step-${step}-loaded`) + } + + initializeHelpHero(reactivation) { + this._observability.startJourney('orcid_registration', { + reactivation, + }) + } } From 9803bd945777e84b57ff818ef6a96cb0c4b2b266 Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Wed, 25 Sep 2024 16:05:37 -0600 Subject: [PATCH 3/8] lmendoza/sep-24 --- .../observability-events.service.ts | 6 +- .../form-current-employment.component.ts | 42 +++++++++---- .../form-password/form-password.component.ts | 24 ++++++-- .../form-personal/form-personal.component.ts | 27 +++++++-- .../form-visibility.component.ts | 25 ++++++-- .../components/step-a/step-a.component.ts | 1 - .../components/step-b/step-b.component.ts | 1 - .../components/step-c/step-c.component.ts | 1 - .../components/step-c2/step-c2.component.ts | 1 - .../components/step-d/step-d.component.ts | 1 - .../pages/register/register2.component.ts | 59 +++++++++++++------ .../register-observability.service.ts | 41 +++++++++++-- 12 files changed, 168 insertions(+), 61 deletions(-) diff --git a/src/app/core/observability-events/observability-events.service.ts b/src/app/core/observability-events/observability-events.service.ts index db81a9b47f..4ab28c57c1 100644 --- a/src/app/core/observability-events/observability-events.service.ts +++ b/src/app/core/observability-events/observability-events.service.ts @@ -2,7 +2,7 @@ import { Inject, Injectable } from '@angular/core' import { WINDOW } from 'src/app/cdk/window' import { environment } from 'src/environments/environment' -export type journeyType = 'orcid_registration' | 'orcid_update_emails' +export type JourneyType = 'orcid_registration' | 'orcid_update_emails' @Injectable({ providedIn: 'root', }) @@ -18,7 +18,7 @@ export class CustomEventService { * @param journeyType The type of the journey (e.g., 'orcid_registration', 'orcid_update_emails'). * @param attributes Additional attributes to store with the journey */ - startJourney(journeyType: journeyType, attributes: any = {}): void { + startJourney(journeyType: JourneyType, attributes: any = {}): void { // Record the start time and initial attributes @@ -41,7 +41,7 @@ export class CustomEventService { * @param additionalAttributes Any additional attributes related to the event. */ recordEvent( - journeyType: journeyType, + journeyType: JourneyType, eventName: string, additionalAttributes: any = {} ): void { diff --git a/src/app/register2/components/form-current-employment/form-current-employment.component.ts b/src/app/register2/components/form-current-employment/form-current-employment.component.ts index c92568e11f..67576ba86b 100644 --- a/src/app/register2/components/form-current-employment/form-current-employment.component.ts +++ b/src/app/register2/components/form-current-employment/form-current-employment.component.ts @@ -1,4 +1,11 @@ -import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core' +import { + Component, + forwardRef, + Input, + OnDestroy, + OnInit, + ViewChild, +} from '@angular/core' import { FormBuilder, FormControl, @@ -14,7 +21,7 @@ import { import { Register2Service } from 'src/app/core/register2/register2.service' import { OrcidValidators } from 'src/app/validators' -import { first, switchMap, tap } from 'rxjs/operators' +import { first, switchMap, takeUntil, tap } from 'rxjs/operators' import { ReactivationService } from '../../../core/reactivation/reactivation.service' import { ReactivationLocal } from '../../../types/reactivation.local' import { BaseForm } from '../BaseForm' @@ -27,7 +34,7 @@ import { AffiliationType, Organization, } from 'src/app/types/record-affiliation.endpoint' -import { EMPTY, Observable, of } from 'rxjs' +import { EMPTY, Observable, of, Subject } from 'rxjs' import { RecordAffiliationService } from 'src/app/core/record-affiliations/record-affiliations.service' import { dateMonthYearValidator } from 'src/app/shared/validators/date/date.validator' import { RegisterStateService } from '../../register-state.service' @@ -70,7 +77,10 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { }, ], }) -export class FormCurrentEmploymentComponent extends BaseForm implements OnInit { +export class FormCurrentEmploymentComponent + extends BaseForm + implements OnInit, OnDestroy +{ // matcher = new MyErrorStateMatcher() selectedOrganizationFromDatabase: Organization displayOrganizationHint: boolean @@ -78,6 +88,7 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit { private _type: AffiliationType affiliationFound = false rorIdHasBeenMatched: boolean + destroy = new Subject() @Input() public get type(): AffiliationType { @@ -129,15 +140,24 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit { this.isMobile = platform.columns4 || platform.columns8 }) } + ngOnDestroy(): void { + this.destroy.next() + } ngOnInit() { - this.registerStateService.getNextButtonClickFor('c2').subscribe(() => { - this.nextButtonWasClicked = true - this._registerObservabilityService.stepC2NextButtonClicked(this.form) - }) - this.registerStateService.getSkipButtonClickFor('c2').subscribe(() => { - this._registerObservabilityService.stepC2SkipButtonClicked(this.form) - }) + this.registerStateService + .getNextButtonClickFor('c2') + .pipe(takeUntil(this.destroy)) + .subscribe(() => { + this.nextButtonWasClicked = true + this._registerObservabilityService.stepC2NextButtonClicked(this.form) + }) + this.registerStateService + .getSkipButtonClickFor('c2') + .pipe(takeUntil(this.destroy)) + .subscribe(() => { + this._registerObservabilityService.stepC2SkipButtonClicked(this.form) + }) this.registerStateService.matchOrganization$.subscribe((organization) => { this.organization = organization this.form.patchValue({ diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts index a5675a3a07..8941f85c09 100644 --- a/src/app/register2/components/form-password/form-password.component.ts +++ b/src/app/register2/components/form-password/form-password.component.ts @@ -3,6 +3,7 @@ import { Component, forwardRef, Input, + OnDestroy, OnInit, ViewChild, } from '@angular/core' @@ -24,6 +25,8 @@ import { LiveAnnouncer } from '@angular/cdk/a11y' import { environment } from 'src/environments/environment' import { RegisterObservabilityService } from '../../register-observability.service' import { RegisterStateService } from '../../register-state.service' +import { Subject } from 'rxjs' +import { takeUntil } from 'rxjs/operators' @Component({ selector: 'app-form-password', @@ -48,7 +51,7 @@ import { RegisterStateService } from '../../register-state.service' ], preserveWhitespaces: true, }) -export class FormPasswordComponent extends BaseForm implements OnInit { +export class FormPasswordComponent extends BaseForm implements OnInit, OnDestroy { labelInfo = $localize`:@@register.ariaLabelInfoPassword:info about password` labelClose = $localize`:@@register.ariaLabelClose:close` labelConfirmPassword = $localize`:@@register.confirmYourPassword:Confirm your password` @@ -67,12 +70,12 @@ export class FormPasswordComponent extends BaseForm implements OnInit { @Input() personalData: RegisterForm nextButtonWasClicked: boolean - currentValidate8orMoreCharactersStatus: boolean ccurentValidateAtLeastALetterOrSymbolStatus: boolean currentValidateAtLeastANumber: boolean passwordsValidAreValidAlreadyChecked: any _currentAccesibilityError: string + destroy = new Subject() constructor( private _register: Register2Service, private _liveAnnouncer: LiveAnnouncer, @@ -83,10 +86,13 @@ export class FormPasswordComponent extends BaseForm implements OnInit { super() } ngOnInit() { - this._registerStateService.getNextButtonClickFor('b').subscribe((value) => { - this.nextButtonWasClicked = true - this._registerObservability.stepBNextButtonClicked(this.form) - }) + this._registerStateService + .getNextButtonClickFor('b') + .pipe(takeUntil(this.destroy)) + .subscribe((value) => { + this.nextButtonWasClicked = true + this._registerObservability.stepBNextButtonClicked(this.form) + }) this.form = new UntypedFormGroup( { password: new UntypedFormControl('', { @@ -222,6 +228,7 @@ export class FormPasswordComponent extends BaseForm implements OnInit { } this._currentAccesibilityError = value if (!value) { + this._registerObservability.reportRegisterEvent('password_valid') this.announce( $localize`:@@register.allPasswordContrainsArMet:All password constraints are met` ) @@ -254,6 +261,7 @@ export class FormPasswordComponent extends BaseForm implements OnInit { const validStatus = this.confirmPasswordValid && this.passwordValid if (!this.passwordsValidAreValidAlreadyChecked && validStatus) { + this._registerObservability.reportRegisterEvent('password_match') this.announce( $localize`:@@register.passwordAreValid:Your passwords match` ) @@ -305,4 +313,8 @@ export class FormPasswordComponent extends BaseForm implements OnInit { } this._liveAnnouncer.announce(announcement, 'assertive') } + + ngOnDestroy(): void { + this.destroy.next() + } } diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts index bf5728fa74..5eb0a892f8 100644 --- a/src/app/register2/components/form-personal/form-personal.component.ts +++ b/src/app/register2/components/form-personal/form-personal.component.ts @@ -5,6 +5,7 @@ import { forwardRef, Inject, Input, + OnDestroy, OnInit, ViewChild, } from '@angular/core' @@ -30,6 +31,7 @@ import { startWith, switchMap, take, + takeUntil, } from 'rxjs/operators' import { ReactivationService } from '../../../core/reactivation/reactivation.service' import { ReactivationLocal } from '../../../types/reactivation.local' @@ -51,7 +53,8 @@ import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.se import { ERROR_REPORT } from 'src/app/errors' import { RegisterStateService } from '../../register-state.service' import { RegisterObservabilityService } from '../../register-observability.service' -export class MyErrorStateMatcher implements ErrorStateMatcher { +import { Subject } from 'rxjs' +export class MyErrorStateMatcher implements ErrorStateMatcher{ isErrorState( control: FormControl | null, form: FormGroupDirective | NgForm | null @@ -87,7 +90,10 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { }, ], }) -export class FormPersonalComponent extends BaseForm implements OnInit { +export class FormPersonalComponent + extends BaseForm + implements OnInit, OnDestroy +{ matcher = new MyErrorStateMatcher() @Input() reactivation: ReactivationLocal @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective @@ -105,6 +111,7 @@ export class FormPersonalComponent extends BaseForm implements OnInit { emailsAreValidAlreadyChecked: boolean registerBackendErrors: RegisterBackendErrors nextButtonWasClicked: boolean + destroy = new Subject() constructor( private _register: Register2Service, @@ -121,6 +128,9 @@ export class FormPersonalComponent extends BaseForm implements OnInit { ) { super() } + ngOnDestroy(): void { + this.destroy.next() + } emails: UntypedFormGroup = new UntypedFormGroup({}) additionalEmails: UntypedFormGroup = new UntypedFormGroup({ @@ -131,10 +141,13 @@ export class FormPersonalComponent extends BaseForm implements OnInit { }) ngOnInit() { - this._registerStateService.getNextButtonClickFor('a').subscribe((value) => { - this.nextButtonWasClicked = true - this._registerObservability.stepANextButtonClicked(this.form) - }) + this._registerStateService + .getNextButtonClickFor('a') + .pipe(takeUntil(this.destroy)) + .subscribe((value) => { + this.nextButtonWasClicked = true + this._registerObservability.stepANextButtonClicked(this.form) + }) this.emails = new UntypedFormGroup( { email: new UntypedFormControl('', { @@ -318,7 +331,9 @@ export class FormPersonalComponent extends BaseForm implements OnInit { const validStatus = this.emailConfirmationValid && this.emailValid if (!this.emailsAreValidAlreadyChecked && validStatus) { this.announce($localize`:@@register.emailAreValid:Your emails match`) + this._registerObservability.reportRegisterEvent('emails_match') } else if (this.emailsAreValidAlreadyChecked && !validStatus) { + this._registerObservability.reportRegisterEvent('emails_do_not_match') this.announce( $localize`:@@register.emailAreNotValid:Your emails do not match` ) diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts index 431e900e3e..c1cb29ed26 100644 --- a/src/app/register2/components/form-visibility/form-visibility.component.ts +++ b/src/app/register2/components/form-visibility/form-visibility.component.ts @@ -1,4 +1,10 @@ -import { Component, DoCheck, forwardRef, OnInit } from '@angular/core' +import { + Component, + DoCheck, + forwardRef, + OnDestroy, + OnInit, +} from '@angular/core' import { NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, @@ -13,6 +19,8 @@ import { Register2Service } from 'src/app/core/register2/register2.service' import { BaseForm } from '../BaseForm' import { RegisterStateService } from '../../register-state.service' import { RegisterObservabilityService } from '../../register-observability.service' +import { Subject } from 'rxjs' +import { takeUntil } from 'rxjs/operators' @Component({ selector: 'app-form-visibility', @@ -38,12 +46,13 @@ import { RegisterObservabilityService } from '../../register-observability.servi }) export class FormVisibilityComponent extends BaseForm - implements OnInit, DoCheck + implements OnInit, DoCheck, OnDestroy { ariaLabelMoreInformationOnVisibility = $localize`:@@register.ariaLabelMoreInformationOnVisibility:More information on visibility settings (Opens in new tab)` visibilityOptions = VISIBILITY_OPTIONS errorState = false activitiesVisibilityDefault = new UntypedFormControl('', Validators.required) + destroy = new Subject() constructor( private _register: Register2Service, private _errorStateMatcher: ErrorStateMatcher, @@ -52,10 +61,16 @@ export class FormVisibilityComponent ) { super() } + ngOnDestroy(): void { + this.destroy.next() + } ngOnInit() { - this._registerStateService.getNextButtonClickFor('c').subscribe(() => { - this._registerObservability.stepCNextButtonClicked(this.form) - }) + this._registerStateService + .getNextButtonClickFor('c') + .pipe(takeUntil(this.destroy)) + .subscribe(() => { + this._registerObservability.stepCNextButtonClicked(this.form) + }) this.form = new UntypedFormGroup({ activitiesVisibilityDefault: this.activitiesVisibilityDefault, }) diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts index f5d4b423cc..9e0d3cdbbe 100644 --- a/src/app/register2/components/step-a/step-a.component.ts +++ b/src/app/register2/components/step-a/step-a.component.ts @@ -46,7 +46,6 @@ export class StepAComponent } ngOnInit(): void { - this._registerObservabilityService.stepLoaded('a') } infoSiteBaseUrl = environment.INFO_SITE diff --git a/src/app/register2/components/step-b/step-b.component.ts b/src/app/register2/components/step-b/step-b.component.ts index a72f450660..368f0f410b 100644 --- a/src/app/register2/components/step-b/step-b.component.ts +++ b/src/app/register2/components/step-b/step-b.component.ts @@ -25,7 +25,6 @@ export class StepBComponent extends BaseStepDirective implements OnInit { super() } ngOnInit(): void { - this._registerObservabilityService.stepLoaded('b') } nextButtonWasClicked = false diff --git a/src/app/register2/components/step-c/step-c.component.ts b/src/app/register2/components/step-c/step-c.component.ts index 234d33c183..8a903a3d02 100644 --- a/src/app/register2/components/step-c/step-c.component.ts +++ b/src/app/register2/components/step-c/step-c.component.ts @@ -25,7 +25,6 @@ export class StepCComponent extends BaseStepDirective implements OnInit { super() } ngOnInit(): void { - this._registerObservabilityService.stepLoaded('c') } nextButton2() { diff --git a/src/app/register2/components/step-c2/step-c2.component.ts b/src/app/register2/components/step-c2/step-c2.component.ts index dd1cc89c7d..b96662566a 100644 --- a/src/app/register2/components/step-c2/step-c2.component.ts +++ b/src/app/register2/components/step-c2/step-c2.component.ts @@ -28,7 +28,6 @@ export class StepC2Component extends BaseStepDirective implements OnInit { super() } ngOnInit(): void { - this._registerObservabilityService.stepLoaded('c2') } optionalNextStep() { diff --git a/src/app/register2/components/step-d/step-d.component.ts b/src/app/register2/components/step-d/step-d.component.ts index 5894c7b18d..635d02f3ab 100644 --- a/src/app/register2/components/step-d/step-d.component.ts +++ b/src/app/register2/components/step-d/step-d.component.ts @@ -27,7 +27,6 @@ export class StepDComponent extends BaseStepDirective { super() } ngOnInit(): void { - this._registerObservabilityService.stepLoaded('d') } nextButton2() { diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts index 035824b266..795669cac5 100644 --- a/src/app/register2/pages/register/register2.component.ts +++ b/src/app/register2/pages/register/register2.component.ts @@ -32,7 +32,11 @@ import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint' import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service' import { SearchService } from '../../../core/search/search.service' import { ReactivationLocal } from '../../../types/reactivation.local' -import { CustomEventService } from 'src/app/core/observability-events/observability-events.service' +import { + CustomEventService, + JourneyType, +} from 'src/app/core/observability-events/observability-events.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-register-2', @@ -49,6 +53,8 @@ export class Register2Component implements OnInit, AfterViewInit { @ViewChild('stepComponentA', { read: ElementRef }) stepComponentA: ElementRef @ViewChild('stepComponentB', { read: ElementRef }) stepComponentB: ElementRef @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef + @ViewChild('stepComponentC2', { read: ElementRef }) + stepComponentC2: ElementRef @ViewChild('stepComponentD', { read: ElementRef }) stepComponentD: ElementRef platform: PlatformInfo @@ -77,26 +83,27 @@ export class Register2Component implements OnInit, AfterViewInit { private _platformInfo: PlatformInfoService, private _formBuilder: UntypedFormBuilder, private _register: Register2Service, - private _dialog: MatDialog, @Inject(WINDOW) private window: Window, private _googleTagManagerService: GoogleTagManagerService, - private _user: UserService, private _router: Router, private _errorHandler: ErrorHandlerService, private _userInfo: UserService, - private _searchService: SearchService, - private _observability: CustomEventService, + private _registerObservabilityService: RegisterObservabilityService ) { _platformInfo.get().subscribe((platform) => { this.platform = platform this.reactivation.isReactivation = this.platform.reactivation this.reactivation.reactivationCode = this.platform.reactivationCode + + this._registerObservabilityService.initializeJourney({ + isReactivation: this.reactivation.isReactivation, + coulumn4: this.platform.columns4, + column8: this.platform.columns8, + column12: this.platform.columns12, + }) }) } ngOnInit() { - - this._observability.startJourney('orcid_registration') - this._register.getRegisterForm().subscribe() this.FormGroupStepA = this._formBuilder.group({ @@ -131,6 +138,9 @@ export class Register2Component implements OnInit, AfterViewInit { this.requestInfoForm = session.oauthSession if (this.thirdPartyAuthData || this.requestInfoForm) { + this._registerObservabilityService.reportRegisterEvent( + 'prefill_register-form' + ) this.FormGroupStepA = this.prefillRegisterForm( this.requestInfoForm, this.thirdPartyAuthData @@ -170,17 +180,22 @@ export class Register2Component implements OnInit, AfterViewInit { ) .pipe( switchMap((validator: RegisterForm) => { + this._registerObservabilityService.reportRegisterEvent( + 'register-validate', + { + validator, + } + ) if (validator.errors.length > 0) { // At this point any backend error is unexpected this._errorHandler.handleError( new Error('registerUnexpectedValidateFail'), ERROR_REPORT.REGISTER ) - this._observability.recordEvent( - 'orcid_registration', - 'register-unexpected-validate-fail', + this._registerObservabilityService.reportRegisterErrorEvent( + 'register-validate-fail', { - validator, + errors: validator.errors, } ) } @@ -198,13 +213,13 @@ export class Register2Component implements OnInit, AfterViewInit { .subscribe((response) => { this.loading = false if (response.url) { - this._observability.recordEvent( - 'orcid_registration', - 'register-success', + this._registerObservabilityService.reportRegisterEvent( + 'register-confirmation', { response, } ) + const analyticsReports: Observable[] = [] analyticsReports.push( @@ -227,13 +242,13 @@ export class Register2Component implements OnInit, AfterViewInit { () => this.afterRegisterRedirectionHandler(response) ) } else { - this._observability.recordEvent( - 'orcid_registration', - 'register-unexpected-confirmation', + this._registerObservabilityService.reportRegisterErrorEvent( + 'register-confirmation', { response, } ) + this._errorHandler.handleError( new Error('registerUnexpectedConfirmation'), ERROR_REPORT.REGISTER @@ -267,6 +282,8 @@ export class Register2Component implements OnInit, AfterViewInit { } } selectionChange(event: StepperSelectionEvent) { + const step = ['a', 'b', 'c2', 'c', 'd'][event.selectedIndex] as JourneyType + this._registerObservabilityService.stepLoaded(step) if (this.platform.columns4 || this.platform.columns8) { this.focusCurrentStep(event) } @@ -281,8 +298,10 @@ export class Register2Component implements OnInit, AfterViewInit { } else if (event.selectedIndex === 1) { nextStep = this.stepComponentB } else if (event.selectedIndex === 2) { - nextStep = this.stepComponentC + nextStep = this.stepComponentC2 } else if (event.selectedIndex === 3) { + nextStep = this.stepComponentC + } else if (event.selectedIndex === 4) { nextStep = this.stepComponentD } // On mobile scroll the current step component into view @@ -292,6 +311,8 @@ export class Register2Component implements OnInit, AfterViewInit { nativeElementNextStep.scrollIntoView() }, 200) } + + // Report the step change } /** diff --git a/src/app/register2/register-observability.service.ts b/src/app/register2/register-observability.service.ts index 02ff9c2a91..118f9e62f0 100644 --- a/src/app/register2/register-observability.service.ts +++ b/src/app/register2/register-observability.service.ts @@ -3,7 +3,10 @@ import { OrganizationsService } from '../core' import { Organization } from 'src/app/types/record-affiliation.endpoint' import { Subject } from 'rxjs' import { OrgDisambiguated } from '../types' -import { CustomEventService } from '../core/observability-events/observability-events.service' +import { + CustomEventService, + JourneyType, +} from '../core/observability-events/observability-events.service' import { UntypedFormArray, UntypedFormGroup } from '@angular/forms' import { RegisterStateService } from './register-state.service' import init from 'helphero' @@ -15,6 +18,7 @@ export class RegisterObservabilityService { matchOrganization$ = new Subject() primaryEmailMatched: Organization secondaryEmail: Organization + registrationJourneyStarted: any constructor( private _observability: CustomEventService, private _registrationStateService: RegisterStateService @@ -143,13 +147,38 @@ export class RegisterObservabilityService { ) } - stepLoaded(step: 'a' | 'b' | 'c' | 'c2' | 'd') { + stepLoaded(step: JourneyType) { this._observability.recordEvent('orcid_registration', `step-${step}-loaded`) } - initializeHelpHero(reactivation) { - this._observability.startJourney('orcid_registration', { - reactivation, - }) + initializeJourney(reactivation) { + if (!this.registrationJourneyStarted) { + this._observability.startJourney('orcid_registration', { + ...reactivation, + }) + this.registrationJourneyStarted = true + } + } + + completeJourney(attributes: any = {}) { + this._observability.recordEvent( + 'orcid_registration', + 'journey-complete', + attributes + ) + this._observability.finishJourney('orcid_registration') + this.registrationJourneyStarted = false + } + + reportRegisterEvent(eventName: string, attributes: any = {}) { + this._observability.recordEvent('orcid_registration', eventName, attributes) + } + + reportRegisterErrorEvent(eventName: string, attributes: any = {}) { + this._observability.recordEvent( + 'orcid_registration', + `${eventName}-error`, + attributes + ) } } From 75babd808e1688f9dff9fc11657549dbe30caa4b Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Wed, 25 Sep 2024 16:11:56 -0600 Subject: [PATCH 4/8] lmendoza/sep-24 --- .../components/step-b/step-b.component.ts | 12 ++++-------- .../components/step-c/step-c.component.ts | 8 ++------ .../components/step-c2/step-c2.component.ts | 19 +++++++++++++------ .../pages/register/register2.component.ts | 2 +- 4 files changed, 20 insertions(+), 21 deletions(-) diff --git a/src/app/register2/components/step-b/step-b.component.ts b/src/app/register2/components/step-b/step-b.component.ts index 368f0f410b..03cc0971a1 100644 --- a/src/app/register2/components/step-b/step-b.component.ts +++ b/src/app/register2/components/step-b/step-b.component.ts @@ -18,21 +18,17 @@ export class StepBComponent extends BaseStepDirective implements OnInit { @Input() personalData @Input() reactivation: ReactivationLocal - constructor( - private _registerStateService: RegisterStateService, - private _registerObservabilityService: RegisterObservabilityService - ) { + constructor(private _registerStateService: RegisterStateService) { super() } - ngOnInit(): void { - } + ngOnInit(): void {} nextButtonWasClicked = false nextButton2() { - this._registerStateService.registerStepperButtonClicked('b', 'next'); + this._registerStateService.registerStepperButtonClicked('b', 'next') } backButton() { - this._registerStateService.registerStepperButtonClicked('b', 'back'); + this._registerStateService.registerStepperButtonClicked('b', 'back') } } diff --git a/src/app/register2/components/step-c/step-c.component.ts b/src/app/register2/components/step-c/step-c.component.ts index 8a903a3d02..66abd4b3fc 100644 --- a/src/app/register2/components/step-c/step-c.component.ts +++ b/src/app/register2/components/step-c/step-c.component.ts @@ -18,14 +18,10 @@ export class StepCComponent extends BaseStepDirective implements OnInit { @Input() loading @Input() reactivation: ReactivationLocal - constructor( - private _registrationStateService: RegisterStateService, - private _registerObservabilityService: RegisterObservabilityService - ) { + constructor(private _registrationStateService: RegisterStateService) { super() } - ngOnInit(): void { - } + ngOnInit(): void {} nextButton2() { this._registrationStateService.registerStepperButtonClicked('c', 'next') diff --git a/src/app/register2/components/step-c2/step-c2.component.ts b/src/app/register2/components/step-c2/step-c2.component.ts index b96662566a..1e679c8310 100644 --- a/src/app/register2/components/step-c2/step-c2.component.ts +++ b/src/app/register2/components/step-c2/step-c2.component.ts @@ -21,16 +21,23 @@ export class StepC2Component extends BaseStepDirective implements OnInit { nextButtonWasClicked: boolean @Output() formGroupStepC2OptionalChange = new EventEmitter() - constructor( - private _registrationStateService: RegisterStateService, - private _registerObservabilityService: RegisterObservabilityService - ) { + constructor(private _registrationStateService: RegisterStateService) { super() } - ngOnInit(): void { - } + ngOnInit(): void {} optionalNextStep() { + this.formGroup.setValue({ + affiliations: { + organization: '', + departmentName: '', + roleTitle: '', + startDateGroup: { + startDateMonth: '', + startDateYear: '', + }, + }, + }) this.formGroupStepC2OptionalChange.emit(true) this._registrationStateService.registerStepperButtonClicked('c2', 'skip') } diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts index 795669cac5..cb303e0706 100644 --- a/src/app/register2/pages/register/register2.component.ts +++ b/src/app/register2/pages/register/register2.component.ts @@ -193,7 +193,7 @@ export class Register2Component implements OnInit, AfterViewInit { ERROR_REPORT.REGISTER ) this._registerObservabilityService.reportRegisterErrorEvent( - 'register-validate-fail', + 'register-validate', { errors: validator.errors, } From d080b14d32acba3b9b8fcfba82b2b04d50d5a67b Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Wed, 25 Sep 2024 16:14:10 -0600 Subject: [PATCH 5/8] lmendoza/sep-24 --- src/index.html | 4036 +----------------------------------------------- 1 file changed, 1 insertion(+), 4035 deletions(-) diff --git a/src/index.html b/src/index.html index 7fe20c1e32..75d6f26a56 100644 --- a/src/index.html +++ b/src/index.html @@ -9,4041 +9,7 @@ - + Date: Wed, 25 Sep 2024 16:17:15 -0600 Subject: [PATCH 6/8] lmendoza/sep-24 --- .../observability-events.service.ts | 13 +++++-------- src/app/register2/register-observability.service.ts | 3 --- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/app/core/observability-events/observability-events.service.ts b/src/app/core/observability-events/observability-events.service.ts index 4ab28c57c1..1c1105e1c3 100644 --- a/src/app/core/observability-events/observability-events.service.ts +++ b/src/app/core/observability-events/observability-events.service.ts @@ -19,8 +19,6 @@ export class CustomEventService { * @param attributes Additional attributes to store with the journey */ startJourney(journeyType: JourneyType, attributes: any = {}): void { - - // Record the start time and initial attributes this.journeys[journeyType] = { startTime: Date.now(), @@ -29,7 +27,7 @@ export class CustomEventService { if (environment.debugger) { console.debug( - `-> Journey "${journeyType}" started at ${this.journeys[journeyType].startTime}` + `-> Journey "${journeyType}" started at ${this.journeys[journeyType].startTime}`, attributes ) } } @@ -66,9 +64,9 @@ export class CustomEventService { if (environment.debugger) { console.debug( - `-> Event "${eventName}" recorded for journey "${journeyType}" with elapsed time ${elapsedTime}ms` + `-> Event "${eventName}" recorded for journey "${journeyType}" with elapsed time ${elapsedTime}ms`, + eventAttributes ) - console.log(eventAttributes) } } @@ -100,9 +98,8 @@ export class CustomEventService { // Clean up the journey data delete this.journeys[journeyType] - console.log( - `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms`, - console.log(finalAttributes) + console.debug( + `Journey "${journeyType}" finished with elapsed time ${elapsedTime}ms`, finalAttributes ) } } diff --git a/src/app/register2/register-observability.service.ts b/src/app/register2/register-observability.service.ts index 118f9e62f0..cc00b16556 100644 --- a/src/app/register2/register-observability.service.ts +++ b/src/app/register2/register-observability.service.ts @@ -77,8 +77,6 @@ export class RegisterObservabilityService { } stepC2NextButtonClicked(form: UntypedFormGroup) { - console.log(form) - this._observability.recordEvent( 'orcid_registration', 'step-c2-next-button-clicked', @@ -97,7 +95,6 @@ export class RegisterObservabilityService { } stepC2SkipButtonClicked(form: UntypedFormGroup) { - console.log(form) this._observability.recordEvent( 'orcid_registration', 'step-c2-skip-button-clicked', From 3389c1a4933f35675365aadcf3b955a2faf5166f Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Wed, 25 Sep 2024 16:25:11 -0600 Subject: [PATCH 7/8] lmendoza/sep-24 --- src/app/register2/pages/register/register2.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts index cb303e0706..b1312b971c 100644 --- a/src/app/register2/pages/register/register2.component.ts +++ b/src/app/register2/pages/register/register2.component.ts @@ -311,8 +311,6 @@ export class Register2Component implements OnInit, AfterViewInit { nativeElementNextStep.scrollIntoView() }, 200) } - - // Report the step change } /** From 9a7d9b088691f3c5220473745c3cf9558a042f9d Mon Sep 17 00:00:00 2001 From: Leonardo Mendoza Fernadez Date: Wed, 25 Sep 2024 16:57:54 -0600 Subject: [PATCH 8/8] lmendoza/sep-24 --- .../register2/components/step-c/step-c.spec.ts | 15 ++++++++++++++- .../register2/components/step-c2/step-c2.spec.ts | 12 ++++++++++++ .../components/step-d/step-d.component.spec.ts | 12 ++++++++++++ src/app/register2/register-state.service.spec.ts | 3 ++- 4 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/app/register2/components/step-c/step-c.spec.ts b/src/app/register2/components/step-c/step-c.spec.ts index af56bda939..36be29d636 100644 --- a/src/app/register2/components/step-c/step-c.spec.ts +++ b/src/app/register2/components/step-c/step-c.spec.ts @@ -15,6 +15,8 @@ import { RouterTestingModule } from '@angular/router/testing' import { WINDOW_PROVIDERS } from 'src/app/cdk/window' import { SnackbarService } from 'src/app/cdk/snackbar/snackbar.service' import { MatLegacySnackBarModule } from '@angular/material/legacy-snack-bar' +import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-form-visibility', @@ -46,8 +48,19 @@ describe('StepCComponent', () => { MatLegacySnackBarModule, ], declarations: [StepCComponent, MockFormVisibilityComponent], - providers: [WINDOW_PROVIDERS, SnackbarService], schemas: [CUSTOM_ELEMENTS_SCHEMA], + providers: [ + WINDOW_PROVIDERS, + SnackbarService, + { + provide: RegisterStateService, + useValue: {}, + }, + { + provide: RegisterObservabilityService, + useValue: {}, + }, + ], }).compileComponents() }) diff --git a/src/app/register2/components/step-c2/step-c2.spec.ts b/src/app/register2/components/step-c2/step-c2.spec.ts index 8ab14e3606..49c0ef1c2c 100644 --- a/src/app/register2/components/step-c2/step-c2.spec.ts +++ b/src/app/register2/components/step-c2/step-c2.spec.ts @@ -10,6 +10,8 @@ import { UntypedFormControl, UntypedFormGroup, } from '@angular/forms' +import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-form-current-employment', @@ -38,6 +40,16 @@ describe('StepCComponent', () => { TestBed.configureTestingModule({ imports: [ReactiveFormsModule], declarations: [StepC2Component, MockFormCurrentEmploymentComponent], + providers: [ + { + provide: RegisterStateService, + useValue: {}, + }, + { + provide: RegisterObservabilityService, + useValue: {}, + }, + ], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents() }) diff --git a/src/app/register2/components/step-d/step-d.component.spec.ts b/src/app/register2/components/step-d/step-d.component.spec.ts index 3a5021278d..295d19da35 100644 --- a/src/app/register2/components/step-d/step-d.component.spec.ts +++ b/src/app/register2/components/step-d/step-d.component.spec.ts @@ -10,6 +10,8 @@ import { UntypedFormControl, UntypedFormGroup, } from '@angular/forms' +import { RegisterStateService } from '../../register-state.service' +import { RegisterObservabilityService } from '../../register-observability.service' @Component({ selector: 'app-form-notifications', @@ -76,6 +78,16 @@ describe('StepDComponent', () => { MockFormAntiRobotsComponent, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], + providers: [ + { + provide: RegisterStateService, + useValue: {}, + }, + { + provide: RegisterObservabilityService, + useValue: {}, + }, + ], }).compileComponents() }) diff --git a/src/app/register2/register-state.service.spec.ts b/src/app/register2/register-state.service.spec.ts index 5be2466a07..4605949091 100644 --- a/src/app/register2/register-state.service.spec.ts +++ b/src/app/register2/register-state.service.spec.ts @@ -3,6 +3,7 @@ import { TestBed } from '@angular/core/testing' import { RegisterStateService } from './register-state.service' import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core' +import { OrganizationsService } from '../core' describe('RegisterStateService', () => { let service: RegisterStateService @@ -11,7 +12,7 @@ describe('RegisterStateService', () => { TestBed.configureTestingModule({ providers: [ { - provide: RegisterStateService, + provide: OrganizationsService, useValue: {}, }, ],