Merge pull request #170 from companieshouse/spike/IDVA3-2392-welsh-la…

…ng-error-messaging

Spike/idva3 2392 welsh lang error messaging

locales/cy/errors.json

@@ -0,0 +1,6 @@
+{
+    "server_error_summary" : "server_error_summary: To be translated",
+    "error_summary_title" : "error_summary_title: To be translated",
+    "default_error_summary" : "default_error_summary: To be translated",
+    "default_error_inline" : "default_error_inline: To be translated"
+}

locales/cy/psc_type.json

@@ -4,5 +4,7 @@
    "psc_type_rle" : "To be translated",
    "psc_type_hint" : "To be translated",
    "psc_type_details_title" : "To be translated",
-   "psc_type_details_text" : "To be translated"
+   "psc_type_details_text" : "To be translated",
+   "psc_type_error_summary" : "psc_type_error_summary: To be translated",
+   "psc_type_error_inline" :  "psc_type_error_inline: To be translated"
 }

locales/en/errors.json

@@ -0,0 +1,6 @@
+{
+    "server_error_summary" : "There was an error processing your request. Please try again.",
+    "error_summary_title" : "There is a problem",
+    "default_error_summary" : "Your request contains validation errors",
+    "default_error_inline" : "Your request contains validation errors"
+}

locales/en/psc_type.json

@@ -4,5 +4,7 @@
    "psc_type_rle" : "Relevant legal entity (RLE)",
    "psc_type_hint" : "You'll need to provide the relevant officer's details",
    "psc_type_details_title" : "What is the difference between a PSC and an RLE?",
-   "psc_type_details_text" : "A person with significant control (PSC) is an individual who has significant control over a company. A relevant legal entity (RLE) is a corporate entity that would qualify as a PSC of a company if it were an individual."
+   "psc_type_details_text" : "A person with significant control (PSC) is an individual who has significant control over a company. A relevant legal entity (RLE) is a corporate entity that would qualify as a PSC of a company if it were an individual.",
+   "psc_type_error_summary" : "Select if you're providing verification details for a PSC or RLE",
+   "psc_type_error_inline" :  "Select if you're providing verification details for a PSC or RLE"
 }

src/lib/utils/error-manifests/errorManifest.ts

@@ -1,13 +1,18 @@
-const errorManifest = {
+import { getLocalesService } from "../../../utils/localise";
+
+const localesService = getLocalesService();
+
+const errorManifest = (lang: string = "en") => ({
     generic: {
         serverError: {
-            summary: "There was an error processing your request. Please try again."
+            summary: localesService.i18nCh.resolveSingleKey("server_error_summary", lang) || "There was an error processing your request. Please try again."
         }
     },
+
     validation: {
         default: {
-            summary: "Your request contains validation errors",
-            inline: "Your request contains validation errors"
+            summary: localesService.i18nCh.resolveSingleKey("validation_error_summary", lang) || "Your request contains validation errors",
+            inline: localesService.i18nCh.resolveSingleKey("validation_error_inline", lang) || "Your request contains validation errors"
         },
         firstName: {
             blank: {
@@ -48,8 +53,8 @@ const errorManifest = {
         },
         pscType: {
             blank: {
-                summary: "Select if you're providing verification details for a PSC or RLE",
-                inline: "Select if you're providing verification details for a PSC or RLE"
+                summary: localesService.i18nCh.resolveSingleKey("psc_type_error_summary", lang) || "Select if you're providing verification details for a PSC or RLE",
+                inline: localesService.i18nCh.resolveSingleKey("psc_type_error_inline", lang) || "Inline: Select if you're providing verification details for a PSC or RLE"
             },
             incorrect: {}
         },
@@ -102,6 +107,6 @@ const errorManifest = {
             incorrect: {}
         }
     }
-};
+});
 
 export default errorManifest;

src/lib/validation/form-validators/pscVerification.ts

@@ -1,21 +1,24 @@
 import { logger } from "./../../logger";
 import { GenericValidator } from "./../../validation/generic";
+import errorManifest from "../../utils/error-manifests/errorManifest";
 
 export class PscVerificationFormsValidator extends GenericValidator {
 
-    constructor (classParam?: string) {
+    constructor (lang: string = "en") {
         super();
+        this.lang = lang;
     }
 
-    validatePscType (payload: any): Promise<Object> {
+    validatePscType (payload: any, _lang: string): Promise<Object> {
         logger.info(`Request to validate PSC-Type form`);
+        this.errorManifest = errorManifest(this.lang);
+
         try {
             if (typeof payload.pscType === "undefined" || !this.isValidPscType(payload.pscType)) {
                 this.errors.stack.pscType = this.errorManifest.validation.pscType.blank;
             }
 
             // validate additional form fields here
-
             if (!Object.keys(this.errors.stack).length) {
                 return Promise.resolve({});
             } else {

src/lib/validation/generic.ts

@@ -8,17 +8,20 @@ export class GenericValidator {
     errors: any;
     payload: any;
     errorManifest: any;
+    lang: string;
 
-    constructor () {
+    constructor (lang: string = "en") {
+        this.lang = lang;
+        this.errorManifest = errorManifest(this.lang);
         this.errors = this.getErrorSignature();
-        this.errorManifest = errorManifest;
     }
 
     protected getErrorSignature () {
+        this.errorManifest = errorManifest(this.lang);
         return {
             status: 400,
             name: "VALIDATION_ERRORS",
-            message: errorManifest.validation.default.summary,
+            message: this.errorManifest.validation.default.summary,
             stack: {}
         };
     }

src/routers/handlers/generic.ts

@@ -38,7 +38,7 @@ export interface Redirect {
 }
 
 export abstract class GenericHandler<T extends BaseViewData> {
-    protected errorManifest!: typeof errorManifest;
+    protected errorManifest!: ReturnType<typeof errorManifest>;
     private viewData!: T;
 
     processHandlerException (err: any): Object {
@@ -67,8 +67,8 @@ export abstract class GenericHandler<T extends BaseViewData> {
         this.viewData.userEmail = userEmail;
     }
 
-    async getViewData (req: Request, res: Response): Promise<T> {
-        this.errorManifest = errorManifest;
+    async getViewData (req: Request, res: Response, lang: string = "en"): Promise<T> {
+        this.errorManifest = errorManifest(lang);
         this.viewData = defaultBaseViewData as T;
         this.populateViewData(req, res);
         return this.viewData;

src/routers/handlers/psc-type/pscTypeHandler.ts

@@ -13,8 +13,8 @@ export class PscTypeHandler extends GenericHandler<PscTypeViewData> {
     private static templatePath = "router_views/psc_type/psc_type";
 
     public async getViewData (req: Request, res: Response): Promise<PscTypeViewData> {
-        const baseViewData = await super.getViewData(req, res);
         const lang = selectLang(req.query.lang);
+        const baseViewData = await super.getViewData(req, res, lang);
         const locales = getLocalesService();
         const verification = res.locals.submission;
         const companyNumber = verification?.data.companyNumber as string;
@@ -63,9 +63,9 @@ export class PscTypeHandler extends GenericHandler<PscTypeViewData> {
             viewData.pscType = req.query.pscType as string;
             viewData.nextPageUrl = `${nextPageUrl}?${queryParams}`;
 
-            const validator = new PscVerificationFormsValidator();
+            const validator = new PscVerificationFormsValidator(lang);
 
-            viewData.errors = await validator.validatePscType(req.body);
+            viewData.errors = await validator.validatePscType(req.body, lang);
             await this.save(req.body);
         } catch (err: any) {
             logger.error(`${req.method} error: problem handling PSC type request: ${err.message}`);

src/utils/localise.ts

@@ -29,5 +29,5 @@ export const getLocaleInfo = (locales: LocalesService, lang: string) => {
     };
 };
 
-const localesSevice = LocalesService.getInstance(env.LOCALES_PATH, env.LOCALES_ENABLED === "true");
-export const getLocalesService = () => localesSevice;
+const localesService = LocalesService.getInstance(env.LOCALES_PATH, env.LOCALES_ENABLED === "true");
+export const getLocalesService = () => localesService;

src/views/partials/error_summary.njk

@@ -1,22 +1,26 @@
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
 {% if errors is not undefined and errors is not null and errors | length %}
-  <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="govuk-error-summary">
-    <h2 class="govuk-error-summary__title" id="error-summary-title">
-      There is a problem
+<div class="govuk-error-summary" data-module="govuk-error-summary">
+  <div role="alert">
+    <h2 class="govuk-error-summary__title">
+      {{ i18n.error_summary_title }}
     </h2>
     <div class="govuk-error-summary__body">
       <ul class="govuk-list govuk-error-summary__list">
         {% if errors.serverError is not undefined %}
           <li>
-            {{ errors.serverError.summary }}
+            {{ i18n.server_error_summary }}
           </li>
         {% else %}
           {% for key,err in errors %}
-            <li>
-              <a href="#err-id-{{ key }}">{{ err.summary }}</a>
-            </li>
+        <li>
+          <a href="#{{ key }}-error">{{ err.summary }}</a>
+        </li>
           {% endfor %}
         {% endif %}
       </ul>
     </div>
   </div>
+</div>
 {% endif %}

src/views/router_views/psc_type/psc_type.njk

@@ -22,7 +22,7 @@
                 }
             },
             errorMessage: {
-                text: errors.pscType.inline
+                text: i18n.psc_type_error_inline
             } if errors.pscType,
             items: [
                 {

test/routers/pscType.int.ts

@@ -96,7 +96,7 @@ describe("PscType router/handler integration tests", () => {
                 const $ = cheerio.load(posted.text);
 
                 expect($("div.govuk-form-group--error")).toBeDefined();
-                expect($("a[href='#err-id-pscType']").text()).toBe("Select if you're providing verification details for a PSC or RLE");
+                expect($("a[href='#pscType-error']").text()).toBe("Select if you're providing verification details for a PSC or RLE");
             }
         );
     });