24-sep-bach-fixes

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)
     )
   }
 }

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<Organization[]>
 
-  @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({

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('', {

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('', {

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,
     })

src/app/register2/components/step-a/step-a.component.html

@@ -50,7 +50,6 @@ <h2 class="orc-font-body-small" i18n="@@register.step1.3">
       <app-form-personal
         formControlName="personal"
         [reactivation]="reactivation"
-        [nextButtonWasClicked]="nextButtonWasClicked"
       >
       </app-form-personal>
       <div class="step-actions margin-top-12">

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')
+  }
 }

src/app/register2/components/step-b/step-b.component.html

@@ -32,15 +32,14 @@ <h2 class="orc-font-body-small" i18n="@@register.step2.3">
       <app-form-password
         formControlName="password"
         [personalData]="personalData"
-        [nextButtonWasClicked]="nextButtonWasClicked"
       ></app-form-password>
       <div class="step-actions">
         <button
           id="step-b-register-button"
           mat-raised-button
           color="primary"
           matStepperNext
-          (click)="nextButtonWasClicked = true"
+          (click)="nextButton2()"
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
@@ -60,6 +59,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step2.3">
           color="primary"
           matStepperPrevious
           type="button"
+          (click)="backButton()"
           id="step-b-back-button"
         >
           <a i18n="@@register.previousStep"> Previous Step</a>

src/app/register2/components/step-b/step-b.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-b',
@@ -16,9 +18,20 @@ export class StepBComponent extends BaseStepDirective {
   @Input() personalData
   @Input() reactivation: ReactivationLocal
 
+  constructor(
+    private _observability: CustomEventService,
+    private _registerStateService: RegisterStateService
+  ) {
+    _observability.recordEvent('orcid_registration', 'step-b-loaded')
+    super()
+  }
+
   nextButtonWasClicked = false
 
-  constructor() {
-    super()
+  nextButton2() {
+    this._registerStateService.registerStepperButtonClicked('b', 'next');
+  }
+  backButton() {
+    this._registerStateService.registerStepperButtonClicked('b', 'back');
   }
 }

src/app/register2/components/step-c/step-c.component.html

@@ -45,6 +45,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step4.3">
           color="primary"
           [disabled]="loading"
           matStepperNext
+          (click)="nextButton2()"
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
@@ -65,6 +66,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step4.3">
           matStepperPrevious
           type="button"
           id="step-c-back-button"
+          (click)="backButton()"
         >
           <a i18n="@@shared.previousStep"> Previous Step</a>
         </button>

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')
+  }
 }

src/app/register2/components/step-c2/step-c2.component.html

@@ -42,15 +42,14 @@ <h2 class="orc-font-body-small" i18n="@@register.step3.3">
     <form [formGroup]="formGroup" #form>
       <app-form-current-employment
         formControlName="affiliations"
-        [nextButtonWasClicked]="nextButtonWasClicked"
       ></app-form-current-employment>
       <div class="step-actions margin-top-12">
         <button
           id="step-c2-register-button"
           mat-raised-button
           color="primary"
           [disabled]="loading"
-          (click)="requiredNextStep()"
+          (click)="nextButton2()"
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
@@ -85,6 +84,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step3.3">
           matStepperPrevious
           type="button"
           id="step-c2-back-button"
+          (click)="backButton()"
         >
           <a i18n="@@shared.previousStep"> Previous Step</a>
         </button>