financial remedy error text wordings changed (#3880)

* financial remedy error text wordings changed * yarn audit * yarn audit * yarn audit fix * yarn audit update * yarn audit update * Test Fix - firstDateTimeMustBe year moved to 2025 * Update nocErrorMap.enum.ts * Add focus when error appears * Add unit tests * Update noc-case-ref.component.spec.ts Fix lint issues --------- Co-authored-by: Josh-HMCTS <[email protected]> Co-authored-by: kasi-subramaniam <[email protected]> Co-authored-by: Munish Sharma <[email protected]> Co-authored-by: Kasi Subramaniam <[email protected]> Co-authored-by: connorpgpmcelroy <[email protected]> Co-authored-by: connorpgpmcelroy <[email protected]>
hmcts · Feb 11, 2025 · 150dde7 · 150dde7
1 parent 70b50db
commit 150dde7
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/src/noc/constants/nocErrorMap.enum.ts b/src/noc/constants/nocErrorMap.enum.ts
@@ -10,7 +10,7 @@ export enum NoCErrorMap {
 
 export const CASE_REF_DEFAULT_VALIDATION_ERROR = {
   code: 'CASE_REF_DEFAULT_VALIDATION_ERROR',
-  message: 'Enter an online case reference number that exactly matches the case details'
+  message: 'You have either not entered an exact match for the case reference, or the case you are trying to update has not yet been issued. You can retry with a different case number, wait until the case has been issued, or email your local court or Financial Remedy Centre to request the change of legal representative. You should include the 16-digit Financial Remedy case reference in your email.'
 };
 
 export const AFFIRMATION_DEFAULT_DISAGREE_ERROR = {

diff --git a/src/noc/containers/noc-case-ref/noc-case-ref.component.html b/src/noc/containers/noc-case-ref/noc-case-ref.component.html
@@ -1,6 +1,6 @@
 <div>
     <ng-container *ngIf="(validationErrors$ | async)?.message">
-      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="govuk-error-summary">
+      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="govuk-error-summary" #errorContainer>
         <h2 class="govuk-error-summary__title" id="error-summary-title">
           {{'There is a problem' | rpxTranslate}}
         </h2>

diff --git a/src/noc/containers/noc-case-ref/noc-case-ref.component.spec.ts b/src/noc/containers/noc-case-ref/noc-case-ref.component.spec.ts
@@ -61,6 +61,29 @@ describe('NocCaseRefComponent', () => {
     });
   });
 
+  describe('ngAfterViewChecked', () => {
+    beforeEach(() => {
+      component.errorContainer = jasmine.createSpyObj('errorContainer', ['nativeElement']);
+      component.errorContainer.nativeElement = jasmine.createSpyObj('nativeElement', ['scrollIntoView', 'focus']);
+    });
+
+    it('should do nothing if there is no scrollToError set', () => {
+      component.scrollToError = false;
+      component.ngAfterViewChecked();
+      expect(component.scrollToError).toBe(false);
+      expect(component.errorContainer.nativeElement.scrollIntoView).not.toHaveBeenCalled();
+      expect(component.errorContainer.nativeElement.focus).not.toHaveBeenCalled();
+    });
+
+    it('should set the component focus on the error messages when relevant', () => {
+      component.scrollToError = true;
+      component.ngAfterViewChecked();
+      expect(component.scrollToError).toBe(false);
+      expect(component.errorContainer.nativeElement.scrollIntoView).toHaveBeenCalled();
+      expect(component.errorContainer.nativeElement.focus).toHaveBeenCalled();
+    });
+  });
+
   describe('navigationHandler', () => {
     it('should dispatch an action', () => {
       const storeDispatchMock = spyOn(store, 'dispatch');

diff --git a/src/noc/containers/noc-case-ref/noc-case-ref.component.ts b/src/noc/containers/noc-case-ref/noc-case-ref.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { GovUiConfigModel } from '@hmcts/rpx-xui-common-lib/lib/gov-ui/models';
 import { select, Store } from '@ngrx/store';
@@ -13,6 +13,7 @@ import * as fromFeature from '../../store';
 })
 export class NocCaseRefComponent implements OnInit, OnDestroy {
   @Input() public navEvent: NocNavigation;
+  @ViewChild('errorContainer') errorContainer: ElementRef;
 
   public caseRefConfig: GovUiConfigModel;
 
@@ -21,12 +22,15 @@ export class NocCaseRefComponent implements OnInit, OnDestroy {
 
   public caseRefForm: FormGroup;
 
+  public scrollToError = false;
+
   public nocNavigationCurrentState: NocState;
   private nocNavigationCurrentStateSub: Subscription;
 
   constructor(
     private readonly store: Store<fromFeature.State>,
-    private readonly formBuilder: FormBuilder
+    private readonly formBuilder: FormBuilder,
+    private readonly cdr: ChangeDetectorRef
   ) {
     this.caseRefConfig = {
       id: 'caseRef',
@@ -50,6 +54,19 @@ export class NocCaseRefComponent implements OnInit, OnDestroy {
   public ngOnInit() {
     this.nocNavigationCurrentStateSub = this.store.pipe(select(fromFeature.currentNavigation)).subscribe(
       (state) => this.nocNavigationCurrentState = state);
+
+    this.validationErrors$.subscribe(() => {
+      // if error present scroll to error
+      this.scrollToError = true;
+    });
+  }
+
+  public ngAfterViewChecked(): void {
+    if (this.scrollToError && this.errorContainer) {
+      this.errorContainer.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      this.errorContainer.nativeElement.focus();
+      this.scrollToError = false;
+    }
   }
 
   public onSubmit() {
@@ -73,6 +90,10 @@ export class NocCaseRefComponent implements OnInit, OnDestroy {
       default:
         throw new Error('Invalid option');
     }
+    // Addded this to set scroll to error constantly on continue if error present
+    if (this.errorContainer) {
+      this.scrollToError = true;
+    }
   }
 
   public ngOnDestroy() {

diff --git a/src/noc/containers/noc-fill-form-offline/noc-fill-form-offline.component.html b/src/noc/containers/noc-fill-form-offline/noc-fill-form-offline.component.html
@@ -18,5 +18,5 @@ <h1 class="govuk-heading-l" id="heading-something-wrong">{{'Something went wrong
 </p>
 <p>
   <span class="govuk-!-font-weight-bold">{{'Financial Remedy cases' | rpxTranslate}}</span><br>
-  {{'Email your local court or Financial Remedy Centre to request the change of legal representative. You should include the 16-digit Financial Remedy case reference.' | rpxTranslate}}
+  {{'You have either not entered an exact match for the case reference, or the case you are trying to update has not yet been issued. You can retry with a different case number, wait until the case has been issued, or email your local court or Financial Remedy Centre to request the change of legal representative. You should include the 16-digit Financial Remedy case reference in your email.' | rpxTranslate}}
 </p>