CCM-13415: Use error code and render bullet pointed list

chris-elliott-nhsd · chris-elliott-nhsd · commit f1f0ddb0dd89 · 2025-12-16T15:05:14.000Z
diff --git a/frontend/src/__tests__/components/forms/EmailTemplateForm/__snapshots__/EmailTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/EmailTemplateForm/__snapshots__/EmailTemplateForm.test.tsx.snap
@@ -733,16 +733,6 @@ exports[`renders page one error 1`] = `
               Template name error
             </a>
           </li>
-          <li>
-            <a
-              href="#emailTemplateSubjectLine"
-            />
-          </li>
-          <li>
-            <a
-              href="#emailTemplateMessage"
-            />
-          </li>
         </ul>
       </div>
       <h1
diff --git a/frontend/src/__tests__/components/forms/EmailTemplateForm/server-action.test.ts b/frontend/src/__tests__/components/forms/EmailTemplateForm/server-action.test.ts
@@ -4,6 +4,7 @@ import { EmailTemplate } from 'nhs-notify-web-template-management-utils';
 import { redirect } from 'next/navigation';
 import { processFormActions } from '@forms/EmailTemplateForm/server-action';
 import { MAX_EMAIL_CHARACTER_LENGTH } from '@utils/constants';
+import { ErrorCodes } from '@utils/error-codes';
 
 jest.mock('@utils/amplify-utils');
 jest.mock('@utils/form-actions');
@@ -108,7 +109,7 @@ describe('CreateEmailTemplate server actions', () => {
         formErrors: [],
         fieldErrors: {
           emailTemplateMessage: [
-            'You cannot use the following custom personalisation fields in your message: date, address_line_1, address_line_2, address_line_3, address_line_4, address_line_5, address_line_6, address_line_7',
+            ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME,
           ],
         },
       },
diff --git a/frontend/src/__tests__/components/forms/LetterTemplateForm/__snapshots__/LetterTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/LetterTemplateForm/__snapshots__/LetterTemplateForm.test.tsx.snap
@@ -960,31 +960,6 @@ exports[`renders page one error 1`] = `
                 Template name error
               </a>
             </li>
-            <li>
-              <a
-                href="#letterTemplateCampaignId"
-              />
-            </li>
-            <li>
-              <a
-                href="#letterTemplateLetterType"
-              />
-            </li>
-            <li>
-              <a
-                href="#letterTemplateLanguage"
-              />
-            </li>
-            <li>
-              <a
-                href="#letterTemplatePdf"
-              />
-            </li>
-            <li>
-              <a
-                href="#letterTemplateCsv"
-              />
-            </li>
           </ul>
         </div>
         <form
@@ -1958,21 +1933,6 @@ exports[`renders page with multiple errors 1`] = `
                 CSV error
               </a>
             </li>
-            <li>
-              <a
-                href="#letterTemplateCampaignId"
-              />
-            </li>
-            <li>
-              <a
-                href="#letterTemplateLetterType"
-              />
-            </li>
-            <li>
-              <a
-                href="#letterTemplateLanguage"
-              />
-            </li>
           </ul>
         </div>
         <form
diff --git a/frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/NhsAppTemplateForm/__snapshots__/NhsAppTemplateForm.test.tsx.snap
@@ -1401,11 +1401,6 @@ exports[`renders page one error 1`] = `
               Template name error
             </a>
           </li>
-          <li>
-            <a
-              href="#nhsAppTemplateMessage"
-            />
-          </li>
         </ul>
       </div>
       <h1
diff --git a/frontend/src/__tests__/components/forms/NhsAppTemplateForm/server-action.test.ts b/frontend/src/__tests__/components/forms/NhsAppTemplateForm/server-action.test.ts
@@ -6,6 +6,7 @@ import type {
 } from 'nhs-notify-web-template-management-utils';
 import { redirect } from 'next/navigation';
 import { processFormActions } from '@forms/NhsAppTemplateForm/server-action';
+import { ErrorCodes } from '@utils/error-codes';
 
 jest.mock('@utils/amplify-utils');
 jest.mock('@utils/form-actions');
@@ -110,7 +111,7 @@ describe('CreateNHSAppTemplate server actions', () => {
         formErrors: [],
         fieldErrors: {
           nhsAppTemplateMessage: [
-            'You cannot use the following custom personalisation fields in your message: date, address_line_1, address_line_2, address_line_3, address_line_4, address_line_5, address_line_6, address_line_7',
+            ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME,
           ],
         },
       },
diff --git a/frontend/src/__tests__/components/forms/SmsTemplateForm/__snapshots__/SmsTemplateForm.test.tsx.snap b/frontend/src/__tests__/components/forms/SmsTemplateForm/__snapshots__/SmsTemplateForm.test.tsx.snap
@@ -495,11 +495,6 @@ exports[`CreateSmsTemplate component renders page one error 1`] = `
               Template name error
             </a>
           </li>
-          <li>
-            <a
-              href="#smsTemplateMessage"
-            />
-          </li>
         </ul>
       </div>
       <h1
diff --git a/frontend/src/__tests__/components/forms/SmsTemplateForm/server-action.test.ts b/frontend/src/__tests__/components/forms/SmsTemplateForm/server-action.test.ts
@@ -4,6 +4,7 @@ import { SMSTemplate } from 'nhs-notify-web-template-management-utils';
 import { redirect } from 'next/navigation';
 import { processFormActions } from '@forms/SmsTemplateForm/server-action';
 import { TemplateDto } from 'nhs-notify-backend-client';
+import { ErrorCodes } from '@utils/error-codes';
 
 jest.mock('@utils/amplify-utils');
 jest.mock('@utils/form-actions');
@@ -104,7 +105,7 @@ describe('CreateSmsTemplate server actions', () => {
         formErrors: [],
         fieldErrors: {
           smsTemplateMessage: [
-            'You cannot use the following custom personalisation fields in your message: date, address_line_1, address_line_2, address_line_3, address_line_4, address_line_5, address_line_6, address_line_7',
+            ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME,
           ],
         },
       },
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/NhsNotifyErrorSummary.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/NhsNotifyErrorSummary.test.tsx.snap
@@ -22,7 +22,14 @@ exports[`Renders NhsNotifyErrorSummary correctly with errors 1`] = `
         <a
           href="#radios-id"
         >
-          Radio error 1, Radio error 2
+          Radio error 1
+        </a>
+      </li>
+      <li>
+        <a
+          href="#radios-id"
+        >
+          Radio error 2
         </a>
       </li>
       <li>
diff --git a/frontend/src/components/forms/EmailTemplateForm/server-action.ts b/frontend/src/components/forms/EmailTemplateForm/server-action.ts
@@ -11,6 +11,7 @@ import {
   INVALID_PERSONALISATION_FIELDS,
 } from '@utils/constants';
 import content from '@content/content';
+import { ErrorCodes } from '@utils/error-codes';
 
 const {
   components: {
@@ -40,7 +41,7 @@ export const $EmailTemplateFormSchema = z.object({
           templateMessage.includes(`((${personalisationFieldName}))`)
         ),
       {
-        message: `${form.emailTemplateMessage.error.invalidPersonalisation} ${INVALID_PERSONALISATION_FIELDS.join(', ')}`,
+        message: ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME,
       }
     ),
 });
diff --git a/frontend/src/components/forms/NhsAppTemplateForm/server-action.ts b/frontend/src/components/forms/NhsAppTemplateForm/server-action.ts
@@ -9,6 +9,7 @@ import { saveTemplate, createTemplate } from '@utils/form-actions';
 import { redirect, RedirectType } from 'next/navigation';
 import { INVALID_PERSONALISATION_FIELDS } from '@utils/constants';
 import content from '@content/content';
+import { ErrorCodes } from '@utils/error-codes';
 
 const {
   components: {
@@ -57,7 +58,7 @@ export const $CreateNhsAppTemplateSchema = z.object({
           templateMessage.includes(`((${personalisationFieldName}))`)
         ),
       {
-        message: `${form.nhsAppTemplateMessage.error.invalidPersonalisation} ${INVALID_PERSONALISATION_FIELDS.join(', ')}`,
+        message: ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME,
       }
     ),
 });
diff --git a/frontend/src/components/forms/SmsTemplateForm/server-action.ts b/frontend/src/components/forms/SmsTemplateForm/server-action.ts
@@ -11,6 +11,7 @@ import {
   INVALID_PERSONALISATION_FIELDS,
 } from '@utils/constants';
 import content from '@content/content';
+import { ErrorCodes } from '@utils/error-codes';
 
 const {
   components: {
@@ -37,7 +38,7 @@ export const $CreateSmsTemplateSchema = z.object({
           templateMessage.includes(`((${personalisationFieldName}))`)
         ),
       {
-        message: `${form.smsTemplateMessage.error.invalidPersonalisation} ${INVALID_PERSONALISATION_FIELDS.join(', ')}`,
+        message: ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME,
       }
     ),
 });
diff --git a/frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx b/frontend/src/components/molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary.tsx
@@ -1,14 +1,35 @@
 import { ErrorSummary, HintText } from 'nhsuk-react-components';
 import { ErrorState } from 'nhs-notify-web-template-management-utils';
-import { FC, HTMLProps, useEffect, useRef } from 'react';
-import content from '@content/content';
+import { FC, HTMLProps, JSX, useEffect, useRef } from 'react';
+import content, {
+  templateMessageContainsInvalidPersonalisationErrorText,
+} from '@content/content';
+import { INVALID_PERSONALISATION_FIELDS } from '@utils/constants';
+import { ErrorCodes } from '@utils/error-codes';
 
 const UnlinkedErrorSummaryItem: FC<HTMLProps<HTMLSpanElement>> = (props) => (
   <li>
     <span className='nhsuk-error-message' {...props} />
   </li>
 );
 
+const errorComponents: Record<string, JSX.Element> = {
+  [ErrorCodes.MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME]: (
+    <>
+      {templateMessageContainsInvalidPersonalisationErrorText}
+      <ul className='nhsuk-list nhsuk-list--bullet'>
+        {INVALID_PERSONALISATION_FIELDS.map((item) => (
+          <li key={`personalisation-field-${item.slice(0, 5)}`}>{item}</li>
+        ))}
+      </ul>
+    </>
+  ),
+};
+
+const renderError = (error: string) => {
+  return errorComponents[error] || error;
+};
+
 export type NhsNotifyErrorSummaryProps = {
   hint?: string;
   errorState?: ErrorState;
@@ -33,22 +54,27 @@ export const NhsNotifyErrorSummary = ({
 
   const { fieldErrors, formErrors } = errorState;
 
+  const renderedFieldErrors =
+    fieldErrors &&
+    Object.entries(fieldErrors).map(([id, errors]) =>
+      errors.map((error) => (
+        <ErrorSummary.Item
+          href={`#${id}`}
+          key={`field-error-summary-${id}-${error.slice(0, 5)}`}
+        >
+          {renderError(error)}
+        </ErrorSummary.Item>
+      ))
+    );
+
   return (
     <ErrorSummary ref={errorSummaryRef}>
       <ErrorSummary.Title data-testid='error-summary'>
         {content.components.errorSummary.heading}
       </ErrorSummary.Title>
       {hint && <HintText>{hint}</HintText>}
       <ErrorSummary.List>
-        {fieldErrors &&
-          Object.entries(fieldErrors).map(([id, errors]) => (
-            <ErrorSummary.Item
-              href={`#${id}`}
-              key={`field-error-summary-${id}`}
-            >
-              {errors.join(', ')}
-            </ErrorSummary.Item>
-          ))}
+        {renderedFieldErrors}
         {formErrors &&
           formErrors.map((error, id) => (
             <UnlinkedErrorSummaryItem key={`form-error-summary-${id}`}>
diff --git a/frontend/src/content/content.ts b/frontend/src/content/content.ts
@@ -12,10 +12,11 @@ const enterATemplateName = 'Enter a template name';
 const enterATemplateMessage = 'Enter a template message';
 const templateMessageTooLong = 'Template message too long';
 const templateMessageHasInsecureLink = 'URLs must start with https://';
-const templateMessageContainsInvalidPersonalisation =
-  'You cannot use the following custom personalisation fields in your message:';
 const selectAnOption = 'Select an option';
 
+export const templateMessageContainsInvalidPersonalisationErrorText =
+  'You cannot use the following custom personalisation fields in your message:';
+
 const header = {
   serviceName: 'Notify',
   logoLink: {
@@ -817,7 +818,6 @@ const templateFormNhsApp = {
         empty: enterATemplateMessage,
         max: templateMessageTooLong,
         insecureLink: templateMessageHasInsecureLink,
-        invalidPersonalisation: templateMessageContainsInvalidPersonalisation,
         invalidUrlCharacter: 'URLs cannot include the symbols < or >',
       },
     },
@@ -923,7 +923,6 @@ const templateFormEmail = {
         empty: enterATemplateMessage,
         max: templateMessageTooLong,
         insecureLink: templateMessageHasInsecureLink,
-        invalidPersonalisation: templateMessageContainsInvalidPersonalisation,
       },
     },
   },
@@ -966,7 +965,6 @@ const templateFormSms = {
         empty: enterATemplateMessage,
         max: templateMessageTooLong,
         insecureLink: templateMessageHasInsecureLink,
-        invalidPersonalisation: templateMessageContainsInvalidPersonalisation,
       },
     },
   },
diff --git a/frontend/src/utils/error-codes.ts b/frontend/src/utils/error-codes.ts
@@ -0,0 +1,3 @@
+export enum ErrorCodes {
+  MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME = 'MESSAGE_CONTAINS_INVALID_PERSONALISATION_FIELD_NAME',
+}
