From 8a98ed352ff5387422a8631f69acec5fce201900 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:27 +0100
Subject: [PATCH 01/12] Add personalisation errors for letter preview
 generation

---
 .../__snapshots__/page.test.tsx.snap          |   6 +
 .../server-action.test.ts                     | 136 +++++++++++++++++-
 .../LetterRender/LetterRenderForm.test.tsx    |  78 +++++++++-
 .../__snapshots__/LetterRender.test.tsx.snap  |   2 +
 .../LetterRenderForm.test.tsx.snap            |   6 +-
 .../LetterRenderTab.test.tsx.snap             |   2 +
 .../LetterRender/server-action.test.ts        |  83 ++++++++++-
 .../[templateId]/server-action.ts             |  24 ++++
 .../LetterRender/LetterRenderForm.tsx         |   8 +-
 .../molecules/LetterRender/server-action.ts   |  33 ++++-
 frontend/src/content/content.ts               |  11 +-
 11 files changed, 373 insertions(+), 16 deletions(-)

diff --git a/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap
index 9d1f6dbf5..53a5a4604 100644
--- a/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap
@@ -311,6 +311,7 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
+                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -460,6 +461,7 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
+                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -868,6 +870,7 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
+                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -1017,6 +1020,7 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
+                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -1653,6 +1657,7 @@ exports[`valid authoring letter template matches snapshot 1`] = `
                   </p>
                   <div
                     class="nhsuk-form-group"
+                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -1802,6 +1807,7 @@ exports[`valid authoring letter template matches snapshot 1`] = `
                   </p>
                   <div
                     class="nhsuk-form-group"
+                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
index 99a38e85c..4df907c3f 100644
--- a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
+++ b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
@@ -3,25 +3,52 @@
  */
 import { submitAuthoringLetterAction } from '@app/preview-letter-template/[templateId]/server-action';
 import { redirect } from 'next/navigation';
+import { getTemplate } from '@utils/form-actions';
+import { AUTHORING_LETTER_TEMPLATE } from '@testhelpers/helpers';
+import content from '@content/content';
 
 jest.mock('next/navigation');
+jest.mock('@utils/form-actions');
 
 const redirectMock = jest.mocked(redirect);
+const getTemplateMock = jest.mocked(getTemplate);
+
+const { approveErrors } = content.pages.previewLetterTemplate;
+
+const TEMPLATE_WITH_BOTH_RENDERS = {
+  ...AUTHORING_LETTER_TEMPLATE,
+  files: {
+    ...AUTHORING_LETTER_TEMPLATE.files,
+    shortFormRender: {
+      status: 'RENDERED' as const,
+      fileName: 'short.pdf',
+      currentVersion: 'v1',
+      pageCount: 2,
+    },
+    longFormRender: {
+      status: 'RENDERED' as const,
+      fileName: 'long.pdf',
+      currentVersion: 'v1',
+      pageCount: 2,
+    },
+  },
+};
 
 describe('submitAuthoringLetterAction', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    getTemplateMock.mockResolvedValue(TEMPLATE_WITH_BOTH_RENDERS);
   });
 
   it('should redirect to get-ready-to-approve-letter-template page with valid form data', async () => {
     const formData = new FormData();
-    formData.append('templateId', 'template-123');
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
     formData.append('lockNumber', '1');
 
     await submitAuthoringLetterAction({}, formData);
 
     expect(redirectMock).toHaveBeenCalledWith(
-      '/get-ready-to-approve-letter-template/template-123?lockNumber=1'
+      `/get-ready-to-approve-letter-template/${AUTHORING_LETTER_TEMPLATE.id}?lockNumber=1`
     );
   });
 
@@ -37,7 +64,7 @@ describe('submitAuthoringLetterAction', () => {
 
   it('should return error state when lockNumber is missing', async () => {
     const formData = new FormData();
-    formData.append('templateId', 'template-123');
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
 
     const result = await submitAuthoringLetterAction({}, formData);
 
@@ -47,7 +74,7 @@ describe('submitAuthoringLetterAction', () => {
 
   it('should return error state when lockNumber is invalid', async () => {
     const formData = new FormData();
-    formData.append('templateId', 'template-123');
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
     formData.append('lockNumber', 'not-a-number');
 
     const result = await submitAuthoringLetterAction({}, formData);
@@ -66,4 +93,105 @@ describe('submitAuthoringLetterAction', () => {
     expect(result).toHaveProperty('errorState');
     expect(redirectMock).not.toHaveBeenCalled();
   });
+
+  it('should return error when short example has not been generated', async () => {
+    getTemplateMock.mockResolvedValue({
+      ...AUTHORING_LETTER_TEMPLATE,
+      files: {
+        ...AUTHORING_LETTER_TEMPLATE.files,
+        shortFormRender: undefined,
+        longFormRender: {
+          status: 'RENDERED' as const,
+          fileName: 'long.pdf',
+          currentVersion: 'v1',
+          pageCount: 2,
+        },
+      },
+    });
+
+    const formData = new FormData();
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
+    formData.append('lockNumber', '1');
+
+    const result = await submitAuthoringLetterAction({}, formData);
+
+    expect(result.errorState?.fieldErrors?.['tab-short']).toContain(
+      approveErrors.shortExampleRequired
+    );
+    expect(result.errorState?.fieldErrors?.['tab-long']).toBeUndefined();
+    expect(redirectMock).not.toHaveBeenCalled();
+  });
+
+  it('should return error when long example has not been generated', async () => {
+    getTemplateMock.mockResolvedValue({
+      ...AUTHORING_LETTER_TEMPLATE,
+      files: {
+        ...AUTHORING_LETTER_TEMPLATE.files,
+        shortFormRender: {
+          status: 'RENDERED' as const,
+          fileName: 'short.pdf',
+          currentVersion: 'v1',
+          pageCount: 2,
+        },
+        longFormRender: undefined,
+      },
+    });
+
+    const formData = new FormData();
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
+    formData.append('lockNumber', '1');
+
+    const result = await submitAuthoringLetterAction({}, formData);
+
+    expect(result.errorState?.fieldErrors?.['tab-long']).toContain(
+      approveErrors.longExampleRequired
+    );
+    expect(result.errorState?.fieldErrors?.['tab-short']).toBeUndefined();
+    expect(redirectMock).not.toHaveBeenCalled();
+  });
+
+  it('should return errors for both missing examples', async () => {
+    getTemplateMock.mockResolvedValue(AUTHORING_LETTER_TEMPLATE);
+
+    const formData = new FormData();
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
+    formData.append('lockNumber', '1');
+
+    const result = await submitAuthoringLetterAction({}, formData);
+
+    expect(result.errorState?.fieldErrors?.['tab-short']).toContain(
+      approveErrors.shortExampleRequired
+    );
+    expect(result.errorState?.fieldErrors?.['tab-long']).toContain(
+      approveErrors.longExampleRequired
+    );
+    expect(redirectMock).not.toHaveBeenCalled();
+  });
+
+  it('should return error when short render exists but is not RENDERED status', async () => {
+    getTemplateMock.mockResolvedValue({
+      ...AUTHORING_LETTER_TEMPLATE,
+      files: {
+        ...AUTHORING_LETTER_TEMPLATE.files,
+        shortFormRender: { status: 'FAILED' as const },
+        longFormRender: {
+          status: 'RENDERED' as const,
+          fileName: 'long.pdf',
+          currentVersion: 'v1',
+          pageCount: 2,
+        },
+      },
+    });
+
+    const formData = new FormData();
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
+    formData.append('lockNumber', '1');
+
+    const result = await submitAuthoringLetterAction({}, formData);
+
+    expect(result.errorState?.fieldErrors?.['tab-short']).toContain(
+      approveErrors.shortExampleRequired
+    );
+    expect(redirectMock).not.toHaveBeenCalled();
+  });
 });
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 9f63287cc..5c218af88 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -262,12 +262,12 @@ describe('LetterRenderForm', () => {
   });
 
   describe('error display', () => {
-    it('displays error message and applies error styling when systemPersonalisationPackId has validation error', () => {
+    it('displays error message and applies error styling when recipient has validation error (short tab)', () => {
       const initialState = createInitialFormState({
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Select an example recipient'],
+            systemPersonalisationPackId: ['Choose an example recipient'],
           },
         },
       });
@@ -278,11 +278,11 @@ describe('LetterRenderForm', () => {
       );
 
       expect(
-        screen.getByText('Select an example recipient')
+        screen.getByText('Choose an example recipient')
       ).toBeInTheDocument();
 
       const formGroup = screen
-        .getByText('Select an example recipient')
+        .getByText('Choose an example recipient')
         .closest('.nhsuk-form-group');
 
       expect(formGroup).toHaveClass('nhsuk-form-group--error');
@@ -293,6 +293,74 @@ describe('LetterRenderForm', () => {
 
       expect(select).toHaveClass('nhsuk-select--error');
     });
+
+    it('displays error message and applies error styling when recipient has validation error (long tab)', () => {
+      const initialState = createInitialFormState({
+        errorState: {
+          formErrors: [],
+          fieldErrors: {
+            systemPersonalisationPackId: ['Choose an example recipient'],
+          },
+        },
+      });
+
+      renderWithProvider(
+        <LetterRenderForm template={baseTemplate} tab='longFormRender' />,
+        initialState
+      );
+
+      expect(
+        screen.getByText('Choose an example recipient')
+      ).toBeInTheDocument();
+
+      const formGroup = screen
+        .getByText('Choose an example recipient')
+        .closest('.nhsuk-form-group');
+
+      expect(formGroup).toHaveClass('nhsuk-form-group--error');
+
+      const select = screen.getByRole('combobox', {
+        name: 'Example recipient',
+      });
+
+      expect(select).toHaveClass('nhsuk-select--error');
+    });
+
+    it('displays inline error and applies error styling when a custom personalisation field is empty', () => {
+      const templateWithCustom: AuthoringLetterTemplate = {
+        ...baseTemplate,
+        customPersonalisation: ['appointmentDate'],
+      };
+
+      const initialState = createInitialFormState({
+        errorState: {
+          formErrors: [],
+          fieldErrors: {
+            'custom-appointmentDate-shortFormRender': [
+              'Enter example data for appointmentDate',
+            ],
+          },
+        },
+      });
+
+      renderWithProvider(
+        <LetterRenderForm
+          template={templateWithCustom}
+          tab='shortFormRender'
+        />,
+        initialState
+      );
+
+      expect(
+        screen.getByText('Enter example data for appointmentDate')
+      ).toBeInTheDocument();
+
+      const formGroup = screen
+        .getByText('Enter example data for appointmentDate')
+        .closest('.nhsuk-form-group');
+
+      expect(formGroup).toHaveClass('nhsuk-form-group--error');
+    });
   });
 
   describe('snapshots', () => {
@@ -335,7 +403,7 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Select an example recipient'],
+            systemPersonalisationPackId: ['Choose an example recipient'],
           },
         },
       });
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap
index 7c7de83d3..0c2b23be4 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap
@@ -106,6 +106,7 @@ exports[`LetterRender matches snapshot 1`] = `
               </p>
               <div
                 class="nhsuk-form-group"
+                id="systemPersonalisationPackId"
               >
                 <label
                   class="nhsuk-label nhsuk-label--s"
@@ -298,6 +299,7 @@ exports[`LetterRender matches snapshot 1`] = `
               </p>
               <div
                 class="nhsuk-form-group"
+                id="systemPersonalisationPackId"
               >
                 <label
                   class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
index e03fd2c11..02e8605db 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`LetterRenderForm snapshots matches snapshot for long tab 1`] = `
     </p>
     <div
       class="nhsuk-form-group"
+      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
@@ -181,6 +182,7 @@ exports[`LetterRenderForm snapshots matches snapshot for short tab 1`] = `
     </p>
     <div
       class="nhsuk-form-group"
+      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
@@ -351,6 +353,7 @@ exports[`LetterRenderForm snapshots matches snapshot with validation error 1`] =
     </p>
     <div
       class="nhsuk-form-group nhsuk-form-group--error"
+      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
@@ -366,7 +369,7 @@ exports[`LetterRenderForm snapshots matches snapshot with validation error 1`] =
         >
           Error: 
         </span>
-        Select an example recipient
+        Choose an example recipient
       </span>
       <select
         class="nhsuk-select nhsuk-select--error recipientSelect"
@@ -490,6 +493,7 @@ exports[`LetterRenderForm snapshots matches snapshot without custom personalisat
     </p>
     <div
       class="nhsuk-form-group"
+      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap
index e2b8d34dc..af53f18d7 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`LetterRenderTab snapshots matches snapshot for long tab 1`] = `
         </p>
         <div
           class="nhsuk-form-group"
+          id="systemPersonalisationPackId"
         >
           <label
             class="nhsuk-label nhsuk-label--s"
@@ -206,6 +207,7 @@ exports[`LetterRenderTab snapshots matches snapshot for short tab 1`] = `
         </p>
         <div
           class="nhsuk-form-group"
+          id="systemPersonalisationPackId"
         >
           <label
             class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts b/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
index 72498490c..a9169c925 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
+++ b/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
@@ -116,7 +116,9 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.fields?.['personalisation|appointmentDate']).toBe('');
-    expect(result.errorState).toBeUndefined();
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'custom-appointmentDate-shortFormRender'
+    );
   });
 
   it('clears previous errorState on successful submission', async () => {
@@ -146,6 +148,9 @@ describe('updateLetterPreview', () => {
     expect(result.errorState?.fieldErrors).toHaveProperty(
       'systemPersonalisationPackId'
     );
+    expect(
+      result.errorState?.fieldErrors?.systemPersonalisationPackId
+    ).toContain('Choose an example recipient');
     expect(result.fields?.systemPersonalisationPackId).toBe('');
   });
 
@@ -177,6 +182,19 @@ describe('updateLetterPreview', () => {
     );
   });
 
+  it('error key for recipient is the same regardless of tab', async () => {
+    const formData = buildFormData({
+      systemPersonalisationPackId: '',
+      tab: 'longFormRender',
+    });
+
+    const result = await updateLetterPreview({}, formData);
+
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'systemPersonalisationPackId'
+    );
+  });
+
   it('returns validation error when systemPersonalisationPackId is not in the selected tab list', async () => {
     const formData = buildFormData({
       systemPersonalisationPackId: 'long-1',
@@ -191,6 +209,69 @@ describe('updateLetterPreview', () => {
     expect(result.fields?.systemPersonalisationPackId).toBe('long-1');
   });
 
+  it('returns validation error for an empty custom personalisation field', async () => {
+    const formData = buildFormData({
+      systemPersonalisationPackId: 'short-1',
+      'personalisation|appointmentDate': '',
+    });
+
+    const result = await updateLetterPreview({}, formData);
+
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'custom-appointmentDate-shortFormRender'
+    );
+    expect(
+      result.errorState?.fieldErrors?.['custom-appointmentDate-shortFormRender']
+    ).toContain('Enter example data for appointmentDate');
+    expect(mockGenerateLetterProof).not.toHaveBeenCalled();
+  });
+
+  it('returns validation errors for multiple empty custom personalisation fields', async () => {
+    const formData = buildFormData({
+      systemPersonalisationPackId: 'short-1',
+      'personalisation|appointmentDate': '',
+      'personalisation|clinicName': '',
+    });
+
+    const result = await updateLetterPreview({}, formData);
+
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'custom-appointmentDate-shortFormRender'
+    );
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'custom-clinicName-shortFormRender'
+    );
+    expect(mockGenerateLetterProof).not.toHaveBeenCalled();
+  });
+
+  it('returns validation errors for both missing recipient and empty custom fields', async () => {
+    const formData = buildFormData({
+      systemPersonalisationPackId: '',
+      'personalisation|appointmentDate': '',
+    });
+
+    const result = await updateLetterPreview({}, formData);
+
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'systemPersonalisationPackId'
+    );
+    expect(result.errorState?.fieldErrors).toHaveProperty(
+      'custom-appointmentDate-shortFormRender'
+    );
+    expect(mockGenerateLetterProof).not.toHaveBeenCalled();
+  });
+
+  it('does not return error for a non-empty custom personalisation field', async () => {
+    const formData = buildFormData({
+      'personalisation|appointmentDate': '2025-01-15',
+    });
+
+    const result = await updateLetterPreview({}, formData);
+
+    expect(result.errorState).toBeUndefined();
+    expect(mockGenerateLetterProof).toHaveBeenCalledTimes(1);
+  });
+
   it('preserves custom field values on validation error', async () => {
     const formData = buildFormData({
       systemPersonalisationPackId: '',
diff --git a/frontend/src/app/preview-letter-template/[templateId]/server-action.ts b/frontend/src/app/preview-letter-template/[templateId]/server-action.ts
index 20b807985..6baf67056 100644
--- a/frontend/src/app/preview-letter-template/[templateId]/server-action.ts
+++ b/frontend/src/app/preview-letter-template/[templateId]/server-action.ts
@@ -3,7 +3,12 @@
 import { z } from 'zod/v4';
 import { $LockNumber } from 'nhs-notify-backend-client/schemas';
 import type { FormState } from 'nhs-notify-web-template-management-utils';
+import { validateLetterTemplate } from 'nhs-notify-web-template-management-utils';
 import { redirect } from 'next/navigation';
+import { getTemplate } from '@utils/form-actions';
+import content from '@content/content';
+
+const { approveErrors } = content.pages.previewLetterTemplate;
 
 const $FormSchema = z.object({
   templateId: z.string().nonempty(),
@@ -24,6 +29,25 @@ export async function submitAuthoringLetterAction(
 
   const { templateId, lockNumber } = result.data;
 
+  const template = await getTemplate(templateId);
+  const validatedTemplate = validateLetterTemplate(template);
+
+  if (validatedTemplate?.letterVersion === 'AUTHORING') {
+    const fieldErrors: Record<string, string[]> = {};
+
+    if (validatedTemplate.files.shortFormRender?.status !== 'RENDERED') {
+      fieldErrors['tab-short'] = [approveErrors.shortExampleRequired];
+    }
+
+    if (validatedTemplate.files.longFormRender?.status !== 'RENDERED') {
+      fieldErrors['tab-long'] = [approveErrors.longExampleRequired];
+    }
+
+    if (Object.keys(fieldErrors).length > 0) {
+      return { errorState: { fieldErrors } };
+    }
+  }
+
   redirect(
     `/get-ready-to-approve-letter-template/${templateId}?lockNumber=${lockNumber}`
   );
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
index 8bbca6e03..bbfb8d62d 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
@@ -36,7 +36,10 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
       <h3 className='nhsuk-heading-s'>{copy.pdsSection.heading}</h3>
       <p className='nhsuk-body-s'>{copy.pdsSection.hint}</p>
 
-      <NHSNotifyForm.FormGroup htmlFor='systemPersonalisationPackId'>
+      <NHSNotifyForm.FormGroup
+        id='systemPersonalisationPackId'
+        htmlFor='systemPersonalisationPackId'
+      >
         <Label size='s' htmlFor={`system-personalisation-pack-id-${tab}`}>
           {copy.pdsSection.recipientLabel}
         </Label>
@@ -64,10 +67,11 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
             const id = `custom-${field}-${tab}`;
 
             return (
-              <NHSNotifyForm.FormGroup key={field}>
+              <NHSNotifyForm.FormGroup key={field} htmlFor={id}>
                 <Label size='s' htmlFor={id}>
                   {field}
                 </Label>
+                <NHSNotifyForm.ErrorMessage htmlFor={id} />
                 <NHSNotifyForm.Input
                   type='text'
                   id={id}
diff --git a/frontend/src/components/molecules/LetterRender/server-action.ts b/frontend/src/components/molecules/LetterRender/server-action.ts
index 7045591de..06eadf0b9 100644
--- a/frontend/src/components/molecules/LetterRender/server-action.ts
+++ b/frontend/src/components/molecules/LetterRender/server-action.ts
@@ -14,8 +14,9 @@ import type { LetterProofRequest } from 'nhs-notify-web-template-management-type
 import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
 import { format as formatDate } from 'date-fns';
 import { $LockNumber } from 'nhs-notify-backend-client/schemas';
+import { interpolate } from '@utils/interpolate';
 
-const { pdsSection } = copy.components.letterRender;
+const { pdsSection, customSection } = copy.components.letterRender;
 
 const $FormSchema = z.object({
   systemPersonalisationPackId: z.enum(EXAMPLE_RECIPIENT_IDS, {
@@ -34,9 +35,37 @@ export async function updateLetterPreview(
 
   const fields = formDataToFormStateFields(formData);
 
+  const personalisationFieldErrors: Record<string, string[]> = {};
+
+  for (const [key, value] of Object.entries(fields)) {
+    if (key.startsWith(PERSONALISATION_FORMDATA_PREFIX) && !value) {
+      const fieldName = key.slice(PERSONALISATION_FORMDATA_PREFIX.length);
+      personalisationFieldErrors[`custom-${fieldName}-${fields.tab}`] = [
+        interpolate(customSection.error.required, { field: fieldName }),
+      ];
+    }
+  }
+
   if (result.error) {
+    const baseError = z.flattenError(result.error);
+
     return {
-      errorState: z.flattenError(result.error),
+      errorState: {
+        ...baseError,
+        fieldErrors: {
+          ...baseError.fieldErrors,
+          ...personalisationFieldErrors,
+        },
+      },
+      fields,
+    };
+  }
+
+  if (Object.keys(personalisationFieldErrors).length > 0) {
+    return {
+      errorState: {
+        fieldErrors: personalisationFieldErrors,
+      },
       fields,
     };
   }
diff --git a/frontend/src/content/content.ts b/frontend/src/content/content.ts
index e036d90a3..42da1ea5a 100644
--- a/frontend/src/content/content.ts
+++ b/frontend/src/content/content.ts
@@ -560,6 +560,12 @@ const previewLetterTemplate = {
       'After you submit your template, our service team will send you a proof by email instead.',
     text3: 'This email will tell you what to do next.',
   },
+  approveErrors: {
+    shortExampleRequired:
+      "Enter short example data and select 'Update preview' to check how your personalisation fields will appear in your letter",
+    longExampleRequired:
+      "Enter long example data and select 'Update preview' to check how your personalisation fields will appear in your letter",
+  },
   links: {
     messageTemplates: '/message-templates',
     submitLetterTemplate:
@@ -592,11 +598,14 @@ const letterRender = {
     recipientLabel: 'Example recipient',
     recipientPlaceholder: 'Select a recipient',
     error: {
-      invalid: 'Select an example recipient',
+      invalid: 'Choose an example recipient',
     },
   },
   customSection: {
     heading: 'Custom personalisation fields',
+    error: {
+      required: `Enter example data for {{field}}`,
+    },
   },
   updatePreviewButton: 'Update preview',
 };

From 810af41afc35d74fd8f7ecb7ac7b6a865774b63d Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:27 +0100
Subject: [PATCH 02/12] Component tests

---
 .../template-mgmt-preview-letter-page.ts      |   9 +
 ...mgmt-preview-letter-page.component.spec.ts | 356 ++++++++++++++++++
 2 files changed, 365 insertions(+)

diff --git a/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts b/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
index d87acd841..9787401e5 100644
--- a/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
+++ b/tests/test-team/pages/letter/template-mgmt-preview-letter-page.ts
@@ -11,6 +11,7 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
   );
 
   public readonly errorSummary: Locator;
+  public readonly errorSummaryLinks: Locator;
   public readonly continueButton: Locator;
   public readonly statusTag: Locator;
 
@@ -35,6 +36,7 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
     super(page);
 
     this.errorSummary = page.locator('[class="nhsuk-error-summary"]');
+    this.errorSummaryLinks = this.errorSummary.locator('a');
     this.continueButton = page.locator('[id="preview-letter-template-cta"]');
     this.statusTag = page.getByTestId('status-tag');
 
@@ -86,6 +88,13 @@ export class TemplateMgmtPreviewLetterPage extends TemplateMgmtPreviewBasePage {
       tabSpinner,
       getCustomFieldInput: (fieldName: string): Locator =>
         panel.locator(`input[id="custom-${fieldName}-${variant}"]`),
+      getInlineError: (fieldId: string): Locator =>
+        panel
+          .locator(`[id="${fieldId}"]`)
+          .locator('xpath=..')
+          .locator('.nhsuk-error-message'),
+      getFormGroupForField: (fieldId: string): Locator =>
+        panel.locator(`[id="${fieldId}"]`).locator('xpath=..'),
       getRecipientOptions: (): Locator => recipientSelect.locator('option'),
 
       async clickTab() {
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
index e2f99b32e..3c73a2ac0 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { randomUUID } from 'node:crypto';
 import { TemplateStorageHelper } from '../../helpers/db/template-storage-helper';
 import { TemplateFactory } from '../../helpers/factories/template-factory';
 import { makeLetterVariant } from '../../helpers/factories/letter-variant-factory';
@@ -306,6 +307,78 @@ function createTemplates(
           },
         }
       ),
+    authoringForUpdatePreviewErrors:
+      TemplateFactory.createAuthoringLetterTemplate(
+        randomUUID(),
+        user,
+        'authoring-update-preview-errors',
+        'NOT_YET_SUBMITTED',
+        {
+          letterVariantId: variants.doubleSided.id,
+          customPersonalisation: ['appointmentDate', 'clinicName'],
+          initialRender: {
+            fileName: 'initial-render.pdf',
+            currentVersion: 'v1-initial',
+            pageCount: 4,
+          },
+        }
+      ),
+    authoringNoExamplesGenerated: TemplateFactory.createAuthoringLetterTemplate(
+      randomUUID(),
+      user,
+      'authoring-no-examples-generated',
+      'NOT_YET_SUBMITTED',
+      {
+        letterVariantId: variants.doubleSided.id,
+        initialRender: {
+          fileName: 'initial-render.pdf',
+          currentVersion: 'v1-initial',
+          pageCount: 4,
+        },
+      }
+    ),
+    authoringOnlyShortExampleGenerated:
+      TemplateFactory.createAuthoringLetterTemplate(
+        randomUUID(),
+        user,
+        'authoring-only-short-example',
+        'NOT_YET_SUBMITTED',
+        {
+          letterVariantId: variants.doubleSided.id,
+          initialRender: {
+            fileName: 'initial-render.pdf',
+            currentVersion: 'v1-initial',
+            pageCount: 4,
+          },
+          shortFormRender: {
+            fileName: 'short-render.pdf',
+            currentVersion: 'v1-short',
+            pageCount: 4,
+            systemPersonalisationPackId: 'short-1',
+          },
+        }
+      ),
+    authoringOnlyLongExampleGenerated:
+      TemplateFactory.createAuthoringLetterTemplate(
+        randomUUID(),
+        user,
+        'authoring-only-long-example',
+        'NOT_YET_SUBMITTED',
+        {
+          letterVariantId: variants.doubleSided.id,
+          initialRender: {
+            fileName: 'initial-render.pdf',
+            currentVersion: 'v1-initial',
+            pageCount: 4,
+          },
+          longFormRender: {
+            fileName: 'long-render.pdf',
+            currentVersion: 'v1-long',
+            pageCount: 4,
+            systemPersonalisationPackId: 'long-1',
+          },
+        }
+      ),
     authoringSingleSided: TemplateFactory.createAuthoringLetterTemplate(
       'AABB1122-3344-5566-7788-99AABBCCDDEE',
       user,
@@ -1391,5 +1464,288 @@ test.describe('Preview Letter template Page', () => {
       await expect(previewPage.summaryRowValue('Total pages')).toHaveText('4');
       await expect(previewPage.summaryRowValue('Sheets')).toHaveText('4');
     });
+
+    test.describe('Update preview validation errors', () => {
+      test('shows error summary and inline error when Update preview is clicked with no recipient selected (short tab)', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringForUpdatePreviewErrors.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.shortTab.clickUpdatePreview();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+        await expect(previewPage.errorSummary).toContainText(
+          'Choose an example recipient'
+        );
+
+        const summaryLink = previewPage.errorSummaryLinks.filter({
+          hasText: 'Choose an example recipient',
+        });
+        await expect(summaryLink).toHaveAttribute(
+          'href',
+          '#systemPersonalisationPackId'
+        );
+
+        await expect(
+          previewPage.shortTab.getInlineError(
+            'system-personalisation-pack-id-shortFormRender'
+          )
+        ).toBeVisible();
+        await expect(
+          previewPage.shortTab.getInlineError(
+            'system-personalisation-pack-id-shortFormRender'
+          )
+        ).toContainText('Choose an example recipient');
+      });
+
+      test('shows error summary and inline error when Update preview is clicked with no recipient selected (long tab)', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringForUpdatePreviewErrors.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.longTab.clickTab();
+        await previewPage.longTab.clickUpdatePreview();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+        await expect(previewPage.errorSummary).toContainText(
+          'Choose an example recipient'
+        );
+
+        const summaryLink = previewPage.errorSummaryLinks.filter({
+          hasText: 'Choose an example recipient',
+        });
+        await expect(summaryLink).toHaveAttribute(
+          'href',
+          '#systemPersonalisationPackId'
+        );
+
+        await expect(
+          previewPage.longTab.getInlineError(
+            'system-personalisation-pack-id-longFormRender'
+          )
+        ).toBeVisible();
+        await expect(
+          previewPage.longTab.getInlineError(
+            'system-personalisation-pack-id-longFormRender'
+          )
+        ).toContainText('Choose an example recipient');
+      });
+
+      test('shows error summary and inline error for each empty custom field when Update preview is clicked (short tab)', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringForUpdatePreviewErrors.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.shortTab.selectRecipient({ index: 1 });
+        // leave both custom fields empty
+        await previewPage.shortTab.clickUpdatePreview();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+        await expect(previewPage.errorSummary).toContainText(
+          'Enter example data for appointmentDate'
+        );
+        await expect(previewPage.errorSummary).toContainText(
+          'Enter example data for clinicName'
+        );
+
+        await expect(
+          previewPage.shortTab.getInlineError(
+            'custom-appointmentDate-shortFormRender'
+          )
+        ).toBeVisible();
+        await expect(
+          previewPage.shortTab.getInlineError(
+            'custom-clinicName-shortFormRender'
+          )
+        ).toBeVisible();
+      });
+
+      test('shows error summary and inline error for empty custom field when Update preview is clicked (long tab)', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringForUpdatePreviewErrors.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.longTab.clickTab();
+        await previewPage.longTab.selectRecipient({ index: 1 });
+        // leave custom fields empty
+        await previewPage.longTab.clickUpdatePreview();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+        await expect(previewPage.errorSummary).toContainText(
+          'Enter example data for appointmentDate'
+        );
+
+        await expect(
+          previewPage.longTab.getInlineError(
+            'custom-appointmentDate-longFormRender'
+          )
+        ).toBeVisible();
+      });
+
+      test('errors from one tab do not appear on the other tab', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringForUpdatePreviewErrors.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.shortTab.clickUpdatePreview();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+
+        // switch tab - errors should not be present in long tab
+        await previewPage.longTab.clickTab();
+
+        await expect(
+          previewPage.longTab.getInlineError(
+            'system-personalisation-pack-id-longFormRender'
+          )
+        ).toBeHidden();
+      });
+    });
+
+    test.describe('Approve template validation errors', () => {
+      test('shows error in summary for both missing examples when Approve template is clicked', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam('templateId', templates.authoringNoExamplesGenerated.id);
+
+        await previewPage.loadPage();
+
+        await previewPage.clickContinueButton();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+
+        const shortErrorLink = previewPage.errorSummaryLinks.filter({
+          hasText: /Enter short example data/,
+        });
+        await expect(shortErrorLink).toBeVisible();
+        await expect(shortErrorLink).toHaveAttribute('href', '#tab-short');
+
+        const longErrorLink = previewPage.errorSummaryLinks.filter({
+          hasText: /Enter long example data/,
+        });
+        await expect(longErrorLink).toBeVisible();
+        await expect(longErrorLink).toHaveAttribute('href', '#tab-long');
+      });
+
+      test('shows only the short example error when long example is already generated', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringOnlyLongExampleGenerated.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.clickContinueButton();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+
+        const shortErrorLink = previewPage.errorSummaryLinks.filter({
+          hasText: /Enter short example data/,
+        });
+        await expect(shortErrorLink).toBeVisible();
+        await expect(shortErrorLink).toHaveAttribute('href', '#tab-short');
+
+        const longErrorLink = previewPage.errorSummaryLinks.filter({
+          hasText: /Enter long example data/,
+        });
+        await expect(longErrorLink).toBeHidden();
+      });
+
+      test('shows only the long example error when short example is already generated', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringOnlyShortExampleGenerated.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.clickContinueButton();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+
+        const longErrorLink = previewPage.errorSummaryLinks.filter({
+          hasText: /Enter long example data/,
+        });
+        await expect(longErrorLink).toBeVisible();
+        await expect(longErrorLink).toHaveAttribute('href', '#tab-long');
+
+        const shortErrorLink = previewPage.errorSummaryLinks.filter({
+          hasText: /Enter short example data/,
+        });
+        await expect(shortErrorLink).toBeHidden();
+      });
+
+      test('does not show approve errors and redirects when both examples are generated', async ({
+        page,
+      }) => {
+        const previewPage = new TemplateMgmtPreviewLetterPage(
+          page
+        ).setPathParam(
+          'templateId',
+          templates.authoringWithFailedPersonalisedRenders.id
+        );
+
+        await previewPage.loadPage();
+
+        await previewPage.clickContinueButton();
+
+        await expect(previewPage.errorSummary).toBeVisible();
+        await expect(
+          previewPage.errorSummaryLinks.filter({
+            hasText: /Enter short example data/,
+          })
+        ).toBeVisible();
+        await expect(
+          previewPage.errorSummaryLinks.filter({
+            hasText: /Enter long example data/,
+          })
+        ).toBeVisible();
+      });
+    });
   });
 });

From 7247ae97214df4c4da0c36e7e0d42f75fdd79052 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:28 +0100
Subject: [PATCH 03/12] Error summary shenanigans

---
 .../LetterRender/LetterRenderForm.test.tsx    |  4 ++
 .../LetterRender/LetterSubmitButton.test.tsx  | 12 ++++++
 .../[templateId]/page.tsx                     | 37 ++++++++++---------
 .../[templateId]/page.tsx                     |  7 +++-
 .../LetterRender/LetterRenderForm.tsx         |  3 +-
 .../LetterRenderPageErrorSummary.tsx          | 10 +++++
 .../LetterRenderPageErrorSyncer.tsx           | 25 +++++++++++++
 .../LetterRender/LetterRenderTab.tsx          |  9 ++++-
 .../LetterRenderTabErrorSummary.tsx           | 10 +++++
 .../LetterRender/LetterSubmitButton.tsx       |  3 +-
 .../letter-render-polling-provider.tsx        | 18 ++++++++-
 11 files changed, 116 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx
 create mode 100644 frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx
 create mode 100644 frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx

diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 5c218af88..3c8c608c0 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -249,6 +249,10 @@ describe('LetterRenderForm', () => {
       jest.mocked(useLetterRenderPolling).mockReturnValueOnce({
         isAnyTabPolling: true,
         registerPolling: jest.fn(),
+        tabErrorState: undefined,
+        setTabErrorState: jest.fn(),
+        pageErrorState: undefined,
+        setPageErrorState: jest.fn(),
       });
 
       renderWithProvider(
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
index 3f0def04e..36acba5d4 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
@@ -13,6 +13,10 @@ describe('LetterSubmitButton', () => {
     jest.mocked(useLetterRenderPolling).mockReturnValue({
       isAnyTabPolling: false,
       registerPolling: jest.fn(),
+      tabErrorState: undefined,
+      setTabErrorState: jest.fn(),
+      pageErrorState: undefined,
+      setPageErrorState: jest.fn(),
     });
 
     render(<LetterSubmitButton>Submit template</LetterSubmitButton>);
@@ -30,6 +34,10 @@ describe('LetterSubmitButton', () => {
     jest.mocked(useLetterRenderPolling).mockReturnValue({
       isAnyTabPolling: true,
       registerPolling: jest.fn(),
+      tabErrorState: undefined,
+      setTabErrorState: jest.fn(),
+      pageErrorState: undefined,
+      setPageErrorState: jest.fn(),
     });
 
     render(<LetterSubmitButton>Submit template</LetterSubmitButton>);
@@ -46,6 +54,10 @@ describe('LetterSubmitButton', () => {
     jest.mocked(useLetterRenderPolling).mockReturnValue({
       isAnyTabPolling: false,
       registerPolling: jest.fn(),
+      tabErrorState: undefined,
+      setTabErrorState: jest.fn(),
+      pageErrorState: undefined,
+      setPageErrorState: jest.fn(),
     });
 
     render(<LetterSubmitButton>Custom text</LetterSubmitButton>);
diff --git a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
index 02d33154c..4706d624f 100644
--- a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
@@ -12,6 +12,7 @@ import { NHSNotifyBackLink } from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
 import { LetterRender } from '@molecules/LetterRender';
 import PreviewTemplateDetailsAuthoringLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsAuthoringLetter';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
+import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
 
@@ -55,25 +56,27 @@ export default async function PreviewApprovedLetterTemplatePage({
 
   return (
     <NHSNotifyContainer fullWidth>
-      <NHSNotifyContainer>
-        <NHSNotifyBackLink href={links.messageTemplates}>
-          {backLinkText}
-        </NHSNotifyBackLink>
-      </NHSNotifyContainer>
-      <NHSNotifyMain>
+      <LetterRenderPollingProvider>
         <NHSNotifyContainer>
-          <div className='nhsuk-grid-row'>
-            <div className='nhsuk-grid-column-full'>
-              <PreviewTemplateDetailsAuthoringLetter
-                template={validatedTemplate}
-                letterVariant={letterVariant}
-                hideEditActions
-              />
-            </div>
-          </div>
+          <NHSNotifyBackLink href={links.messageTemplates}>
+            {backLinkText}
+          </NHSNotifyBackLink>
         </NHSNotifyContainer>
-        <LetterRender template={validatedTemplate} hideEditActions={true} />
-      </NHSNotifyMain>
+        <NHSNotifyMain>
+          <NHSNotifyContainer>
+            <div className='nhsuk-grid-row'>
+              <div className='nhsuk-grid-column-full'>
+                <PreviewTemplateDetailsAuthoringLetter
+                  template={validatedTemplate}
+                  letterVariant={letterVariant}
+                  hideEditActions
+                />
+              </div>
+            </div>
+          </NHSNotifyContainer>
+          <LetterRender template={validatedTemplate} hideEditActions={true} />
+        </NHSNotifyMain>
+      </LetterRenderPollingProvider>
     </NHSNotifyContainer>
   );
 }
diff --git a/frontend/src/app/preview-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-letter-template/[templateId]/page.tsx
index 2359aad23..f8650094a 100644
--- a/frontend/src/app/preview-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-letter-template/[templateId]/page.tsx
@@ -21,6 +21,9 @@ import { NHSNotifyFormProvider } from '@providers/form-provider';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
 import { LetterSubmitButton } from '@molecules/LetterRender/LetterSubmitButton';
+import { LetterRenderTabErrorSummary } from '@molecules/LetterRender/LetterRenderTabErrorSummary';
+import { LetterRenderPageErrorSummary } from '@molecules/LetterRender/LetterRenderPageErrorSummary';
+import { LetterRenderPageErrorSyncer } from '@molecules/LetterRender/LetterRenderPageErrorSyncer';
 import { submitAuthoringLetterAction } from './server-action';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
@@ -116,7 +119,9 @@ export default async function PreviewLetterTemplatePage({
             </NHSNotifyContainer>
             <NHSNotifyMain>
               <NHSNotifyContainer>
-                <NHSNotifyForm.ErrorSummary />
+                <LetterRenderPageErrorSyncer />
+                <LetterRenderPageErrorSummary />
+                <LetterRenderTabErrorSummary />
                 <div className='nhsuk-grid-row'>
                   <div className='nhsuk-grid-column-full'>
                     <PreviewTemplateDetailsAuthoringLetter
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
index bbfb8d62d..fcc5c5294 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
@@ -21,7 +21,7 @@ type LetterRenderFormProps = {
 
 export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
   const { letterRender: copy } = content.components;
-  const { isAnyTabPolling } = useLetterRenderPolling();
+  const { isAnyTabPolling, setPageErrorState } = useLetterRenderPolling();
 
   const exampleRecipients =
     tab === 'shortFormRender'
@@ -94,6 +94,7 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
         secondary
         className='nhsuk-u-margin-top-4'
         disabled={isAnyTabPolling}
+        onClick={() => setPageErrorState(undefined)}
       >
         {copy.updatePreviewButton}
       </NHSNotifyButton>
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx
new file mode 100644
index 000000000..7520b623a
--- /dev/null
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
+
+export function LetterRenderPageErrorSummary() {
+  const { pageErrorState } = useLetterRenderPolling();
+
+  return <NhsNotifyErrorSummary errorState={pageErrorState} />;
+}
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx
new file mode 100644
index 000000000..96054b714
--- /dev/null
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useNHSNotifyForm } from '@providers/form-provider';
+import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+
+/**
+ * Syncs the outer page-level form state (Approve template action) into
+ * LetterRenderPollingProvider so that LetterRenderPageErrorSummary can
+ * display it, and so it can be cleared independently of the tab-level
+ * Update Preview errors.
+ *
+ * Intentionally does NOT cross-clear tabErrorState here — that is handled
+ * via the Approve button's onClick to avoid interfering with initial mount.
+ */
+export function LetterRenderPageErrorSyncer() {
+  const [state] = useNHSNotifyForm();
+  const { setPageErrorState } = useLetterRenderPolling();
+
+  useEffect(() => {
+    setPageErrorState(state.errorState);
+  }, [state, setPageErrorState]);
+
+  return null;
+}
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
index cb00e21e1..93ae36bc1 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
@@ -19,6 +19,8 @@ import { PollLetterRender } from '@molecules/PollLetterRender/PollLetterRender';
 import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
 import content from '@content/content';
 import { buildLetterRenderUrl } from '@utils/letter-render-url';
+import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { useEffect } from 'react';
 
 const { loadingText } = content.components.letterRender;
 
@@ -78,7 +80,12 @@ function LetterRenderTabContent({
   pdfUrl: string | null;
   hideEditActions?: boolean;
 }) {
-  const [_state, _dispatch, isPending] = useNHSNotifyForm();
+  const [state, _dispatch, isPending] = useNHSNotifyForm();
+  const { setTabErrorState } = useLetterRenderPolling();
+
+  useEffect(() => {
+    setTabErrorState(state.errorState);
+  }, [state, setTabErrorState]);
 
   return (
     <div className={`nhsuk-grid-row ${styles.tabRow}`}>
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx
new file mode 100644
index 000000000..1bf32ef9b
--- /dev/null
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
+
+export function LetterRenderTabErrorSummary() {
+  const { tabErrorState } = useLetterRenderPolling();
+
+  return <NhsNotifyErrorSummary errorState={tabErrorState} />;
+}
diff --git a/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx b/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
index f348c3ba5..c252a09fa 100644
--- a/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
@@ -5,7 +5,7 @@ import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
 
 export function LetterSubmitButton({ children }: PropsWithChildren) {
-  const { isAnyTabPolling } = useLetterRenderPolling();
+  const { isAnyTabPolling, setTabErrorState } = useLetterRenderPolling();
 
   return (
     <NHSNotifyButton
@@ -13,6 +13,7 @@ export function LetterSubmitButton({ children }: PropsWithChildren) {
       data-testid='preview-letter-template-cta'
       id='preview-letter-template-cta'
       disabled={isAnyTabPolling}
+      onClick={() => setTabErrorState(undefined)}
     >
       {children}
     </NHSNotifyButton>
diff --git a/frontend/src/components/providers/letter-render-polling-provider.tsx b/frontend/src/components/providers/letter-render-polling-provider.tsx
index 240f692b2..b67dc7279 100644
--- a/frontend/src/components/providers/letter-render-polling-provider.tsx
+++ b/frontend/src/components/providers/letter-render-polling-provider.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { RenderKey } from '@utils/types';
+import type { ErrorState } from 'nhs-notify-web-template-management-utils';
 import {
   createContext,
   useCallback,
@@ -13,6 +14,10 @@ import {
 type LetterRenderPollingContextValue = {
   isAnyTabPolling: boolean;
   registerPolling: (key: RenderKey, polling: boolean) => void;
+  tabErrorState: ErrorState | undefined;
+  setTabErrorState: (state: ErrorState | undefined) => void;
+  pageErrorState: ErrorState | undefined;
+  setPageErrorState: (state: ErrorState | undefined) => void;
 };
 
 const LetterRenderPollingContext =
@@ -32,6 +37,10 @@ export function useLetterRenderPolling() {
 
 export function LetterRenderPollingProvider({ children }: PropsWithChildren) {
   const [isAnyTabPolling, setIsAnyTabPolling] = useState(false);
+  const [tabErrorState, setTabErrorState] = useState<ErrorState | undefined>();
+  const [pageErrorState, setPageErrorState] = useState<
+    ErrorState | undefined
+  >();
 
   const pollingMapRef = useRef<Partial<Record<RenderKey, boolean>>>({});
 
@@ -43,7 +52,14 @@ export function LetterRenderPollingProvider({ children }: PropsWithChildren) {
 
   return (
     <LetterRenderPollingContext.Provider
-      value={{ isAnyTabPolling, registerPolling }}
+      value={{
+        isAnyTabPolling,
+        registerPolling,
+        tabErrorState,
+        setTabErrorState,
+        pageErrorState,
+        setPageErrorState,
+      }}
     >
       {children}
     </LetterRenderPollingContext.Provider>

From 1e9465f2c3735f0e8cc83086d4d39a2b27f087e9 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:28 +0100
Subject: [PATCH 04/12] Redirect invalid template

---
 .../server-action.test.ts                     | 21 ++++++++++++++-
 .../[templateId]/server-action.ts             | 26 ++++++++++---------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
index 4df907c3f..6a9e9b5a9 100644
--- a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
+++ b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
@@ -1,10 +1,14 @@
 /**
  * @jest-environment node
  */
+import { TemplateDto } from 'nhs-notify-web-template-management-types';
 import { submitAuthoringLetterAction } from '@app/preview-letter-template/[templateId]/server-action';
 import { redirect } from 'next/navigation';
 import { getTemplate } from '@utils/form-actions';
-import { AUTHORING_LETTER_TEMPLATE } from '@testhelpers/helpers';
+import {
+  AUTHORING_LETTER_TEMPLATE,
+  getMockFormData,
+} from '@testhelpers/helpers';
 import content from '@content/content';
 
 jest.mock('next/navigation');
@@ -94,6 +98,21 @@ describe('submitAuthoringLetterAction', () => {
     expect(redirectMock).not.toHaveBeenCalled();
   });
 
+  it('should handle error when validating template', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      id: 'template-id',
+    } as unknown as TemplateDto);
+
+    const formData = getMockFormData({
+      templateId: '992fe769-f8b3-43a9-84f1-6e10d0480bb6',
+      lockNumber: '300',
+    });
+
+    await submitAuthoringLetterAction({}, formData);
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
   it('should return error when short example has not been generated', async () => {
     getTemplateMock.mockResolvedValue({
       ...AUTHORING_LETTER_TEMPLATE,
diff --git a/frontend/src/app/preview-letter-template/[templateId]/server-action.ts b/frontend/src/app/preview-letter-template/[templateId]/server-action.ts
index 6baf67056..8b070680f 100644
--- a/frontend/src/app/preview-letter-template/[templateId]/server-action.ts
+++ b/frontend/src/app/preview-letter-template/[templateId]/server-action.ts
@@ -4,7 +4,7 @@ import { z } from 'zod/v4';
 import { $LockNumber } from 'nhs-notify-backend-client/schemas';
 import type { FormState } from 'nhs-notify-web-template-management-utils';
 import { validateLetterTemplate } from 'nhs-notify-web-template-management-utils';
-import { redirect } from 'next/navigation';
+import { redirect, RedirectType } from 'next/navigation';
 import { getTemplate } from '@utils/form-actions';
 import content from '@content/content';
 
@@ -32,20 +32,22 @@ export async function submitAuthoringLetterAction(
   const template = await getTemplate(templateId);
   const validatedTemplate = validateLetterTemplate(template);
 
-  if (validatedTemplate?.letterVersion === 'AUTHORING') {
-    const fieldErrors: Record<string, string[]> = {};
+  if (!validatedTemplate || validatedTemplate.letterVersion !== 'AUTHORING') {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  const fieldErrors: Record<string, string[]> = {};
 
-    if (validatedTemplate.files.shortFormRender?.status !== 'RENDERED') {
-      fieldErrors['tab-short'] = [approveErrors.shortExampleRequired];
-    }
+  if (validatedTemplate.files.shortFormRender?.status !== 'RENDERED') {
+    fieldErrors['tab-short'] = [approveErrors.shortExampleRequired];
+  }
 
-    if (validatedTemplate.files.longFormRender?.status !== 'RENDERED') {
-      fieldErrors['tab-long'] = [approveErrors.longExampleRequired];
-    }
+  if (validatedTemplate.files.longFormRender?.status !== 'RENDERED') {
+    fieldErrors['tab-long'] = [approveErrors.longExampleRequired];
+  }
 
-    if (Object.keys(fieldErrors).length > 0) {
-      return { errorState: { fieldErrors } };
-    }
+  if (Object.keys(fieldErrors).length > 0) {
+    return { errorState: { fieldErrors } };
   }
 
   redirect(

From 0d23dd6ad88428284b211be26b79f52ed267dd12 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:28 +0100
Subject: [PATCH 05/12] Error message correction

---
 .../LetterRender/LetterRenderForm.test.tsx         | 14 +++++++-------
 .../__snapshots__/LetterRenderForm.test.tsx.snap   |  2 +-
 .../molecules/LetterRender/server-action.test.ts   |  2 +-
 frontend/src/content/content.ts                    |  2 +-
 ...late-mgmt-preview-letter-page.component.spec.ts | 12 ++++++------
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 3c8c608c0..1f618d8e3 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -271,7 +271,7 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Choose an example recipient'],
+            systemPersonalisationPackId: ['Choose example recipient'],
           },
         },
       });
@@ -282,11 +282,11 @@ describe('LetterRenderForm', () => {
       );
 
       expect(
-        screen.getByText('Choose an example recipient')
+        screen.getByText('Choose example recipient')
       ).toBeInTheDocument();
 
       const formGroup = screen
-        .getByText('Choose an example recipient')
+        .getByText('Choose example recipient')
         .closest('.nhsuk-form-group');
 
       expect(formGroup).toHaveClass('nhsuk-form-group--error');
@@ -303,7 +303,7 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Choose an example recipient'],
+            systemPersonalisationPackId: ['Choose example recipient'],
           },
         },
       });
@@ -314,11 +314,11 @@ describe('LetterRenderForm', () => {
       );
 
       expect(
-        screen.getByText('Choose an example recipient')
+        screen.getByText('Choose example recipient')
       ).toBeInTheDocument();
 
       const formGroup = screen
-        .getByText('Choose an example recipient')
+        .getByText('Choose example recipient')
         .closest('.nhsuk-form-group');
 
       expect(formGroup).toHaveClass('nhsuk-form-group--error');
@@ -407,7 +407,7 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Choose an example recipient'],
+            systemPersonalisationPackId: ['Choose example recipient'],
           },
         },
       });
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
index 02e8605db..55aaca51e 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
@@ -369,7 +369,7 @@ exports[`LetterRenderForm snapshots matches snapshot with validation error 1`] =
         >
           Error: 
         </span>
-        Choose an example recipient
+        Choose example recipient
       </span>
       <select
         class="nhsuk-select nhsuk-select--error recipientSelect"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts b/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
index a9169c925..a2930e0c8 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
+++ b/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
@@ -150,7 +150,7 @@ describe('updateLetterPreview', () => {
     );
     expect(
       result.errorState?.fieldErrors?.systemPersonalisationPackId
-    ).toContain('Choose an example recipient');
+    ).toContain('Choose example recipient');
     expect(result.fields?.systemPersonalisationPackId).toBe('');
   });
 
diff --git a/frontend/src/content/content.ts b/frontend/src/content/content.ts
index 42da1ea5a..fab4bdffb 100644
--- a/frontend/src/content/content.ts
+++ b/frontend/src/content/content.ts
@@ -598,7 +598,7 @@ const letterRender = {
     recipientLabel: 'Example recipient',
     recipientPlaceholder: 'Select a recipient',
     error: {
-      invalid: 'Choose an example recipient',
+      invalid: 'Choose example recipient',
     },
   },
   customSection: {
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
index 3c73a2ac0..60c9003dc 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
@@ -1482,11 +1482,11 @@ test.describe('Preview Letter template Page', () => {
 
         await expect(previewPage.errorSummary).toBeVisible();
         await expect(previewPage.errorSummary).toContainText(
-          'Choose an example recipient'
+          'Choose example recipient'
         );
 
         const summaryLink = previewPage.errorSummaryLinks.filter({
-          hasText: 'Choose an example recipient',
+          hasText: 'Choose example recipient',
         });
         await expect(summaryLink).toHaveAttribute(
           'href',
@@ -1502,7 +1502,7 @@ test.describe('Preview Letter template Page', () => {
           previewPage.shortTab.getInlineError(
             'system-personalisation-pack-id-shortFormRender'
           )
-        ).toContainText('Choose an example recipient');
+        ).toContainText('Choose example recipient');
       });
 
       test('shows error summary and inline error when Update preview is clicked with no recipient selected (long tab)', async ({
@@ -1522,11 +1522,11 @@ test.describe('Preview Letter template Page', () => {
 
         await expect(previewPage.errorSummary).toBeVisible();
         await expect(previewPage.errorSummary).toContainText(
-          'Choose an example recipient'
+          'Choose example recipient'
         );
 
         const summaryLink = previewPage.errorSummaryLinks.filter({
-          hasText: 'Choose an example recipient',
+          hasText: 'Choose example recipient',
         });
         await expect(summaryLink).toHaveAttribute(
           'href',
@@ -1542,7 +1542,7 @@ test.describe('Preview Letter template Page', () => {
           previewPage.longTab.getInlineError(
             'system-personalisation-pack-id-longFormRender'
           )
-        ).toContainText('Choose an example recipient');
+        ).toContainText('Choose example recipient');
       });
 
       test('shows error summary and inline error for each empty custom field when Update preview is clicked (short tab)', async ({

From 3414b1866d38f4169d94bb619813191213d04dbe Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:28 +0100
Subject: [PATCH 06/12] Refactor error component

---
 .../LetterRender/LetterRender.test.tsx        |   9 ++
 .../LetterRender/LetterRenderForm.test.tsx    |  23 ++--
 .../LetterRender/LetterRenderTab.test.tsx     |  16 +++
 .../LetterRender/LetterSubmitButton.test.tsx  |  20 ++--
 .../letter-preview-error-provider.test.tsx    |  30 +++++
 .../[templateId]/page.tsx                     |  37 +++---
 .../[templateId]/page.tsx                     | 107 +++++++++---------
 .../LetterRender/LetterPreviewErrors.tsx      |  46 ++++++++
 .../LetterRender/LetterRenderForm.tsx         |   6 +-
 .../LetterRenderPageErrorSummary.tsx          |  10 --
 .../LetterRenderPageErrorSyncer.tsx           |  25 ----
 .../LetterRender/LetterRenderTab.tsx          |   8 +-
 .../LetterRenderTabErrorSummary.tsx           |  10 --
 .../LetterRender/LetterSubmitButton.tsx       |   6 +-
 .../letter-preview-error-provider.tsx         |  53 +++++++++
 .../letter-render-polling-provider.tsx        |  13 ---
 16 files changed, 261 insertions(+), 158 deletions(-)
 create mode 100644 frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx
 create mode 100644 frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx
 delete mode 100644 frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx
 delete mode 100644 frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx
 delete mode 100644 frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx
 create mode 100644 frontend/src/components/providers/letter-preview-error-provider.tsx

diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx
index 0c9fc3d84..0481f0567 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx
@@ -10,6 +10,15 @@ jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);
 
 jest.mock('@molecules/LetterRender/server-action');
 
+jest.mock('@providers/letter-preview-error-provider', () => ({
+  useLetterPreviewError: jest.fn(() => ({
+    approveErrorState: undefined,
+    setApproveErrorState: jest.fn(),
+    updatePreviewErrorState: undefined,
+    setUpdatePreviewErrorState: jest.fn(),
+  })),
+}));
+
 jest.mock('next/navigation');
 
 jest.mock('@utils/get-base-path', () => ({
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 1f618d8e3..08a9e6557 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -5,6 +5,7 @@ import {
   LetterRenderPollingProvider,
   useLetterRenderPolling,
 } from '@providers/letter-render-polling-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
 import type {
   AuthoringLetterTemplate,
   FormState,
@@ -20,6 +21,10 @@ jest.mock('@providers/letter-render-polling-provider', () => {
   };
 });
 
+jest.mock('@providers/letter-preview-error-provider', () => ({
+  useLetterPreviewError: jest.fn(),
+}));
+
 const baseTemplate: AuthoringLetterTemplate = {
   id: 'template-123',
   clientId: 'client-123',
@@ -79,6 +84,12 @@ function renderWithProvider(
 describe('LetterRenderForm', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.mocked(useLetterPreviewError).mockReturnValue({
+      approveErrorState: undefined,
+      setApproveErrorState: jest.fn(),
+      updatePreviewErrorState: undefined,
+      setUpdatePreviewErrorState: jest.fn(),
+    });
   });
 
   describe('PDS personalisation section', () => {
@@ -249,10 +260,6 @@ describe('LetterRenderForm', () => {
       jest.mocked(useLetterRenderPolling).mockReturnValueOnce({
         isAnyTabPolling: true,
         registerPolling: jest.fn(),
-        tabErrorState: undefined,
-        setTabErrorState: jest.fn(),
-        pageErrorState: undefined,
-        setPageErrorState: jest.fn(),
       });
 
       renderWithProvider(
@@ -281,9 +288,7 @@ describe('LetterRenderForm', () => {
         initialState
       );
 
-      expect(
-        screen.getByText('Choose example recipient')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Choose example recipient')).toBeInTheDocument();
 
       const formGroup = screen
         .getByText('Choose example recipient')
@@ -313,9 +318,7 @@ describe('LetterRenderForm', () => {
         initialState
       );
 
-      expect(
-        screen.getByText('Choose example recipient')
-      ).toBeInTheDocument();
+      expect(screen.getByText('Choose example recipient')).toBeInTheDocument();
 
       const formGroup = screen
         .getByText('Choose example recipient')
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
index 857fdee2a..f077dfa63 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
@@ -2,6 +2,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { LetterRenderTab } from '@molecules/LetterRender/LetterRenderTab';
 import { updateLetterPreview } from '@molecules/LetterRender/server-action';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
 import type {
   AuthoringLetterTemplate,
   FormState,
@@ -14,6 +15,10 @@ jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);
 
 jest.mock('@molecules/LetterRender/server-action');
 
+jest.mock('@providers/letter-preview-error-provider', () => ({
+  useLetterPreviewError: jest.fn(),
+}));
+
 jest.mock('next/navigation');
 
 jest.mock('@utils/get-base-path', () => ({
@@ -22,6 +27,17 @@ jest.mock('@utils/get-base-path', () => ({
 
 const mockUpdateLetterPreview = jest.mocked(updateLetterPreview);
 
+const mockSetUpdatePreviewErrorState = jest.fn();
+
+beforeEach(() => {
+  jest.mocked(useLetterPreviewError).mockReturnValue({
+    approveErrorState: undefined,
+    setApproveErrorState: jest.fn(),
+    updatePreviewErrorState: undefined,
+    setUpdatePreviewErrorState: mockSetUpdatePreviewErrorState,
+  });
+});
+
 function Provider({ children }: PropsWithChildren) {
   return <LetterRenderPollingProvider>{children}</LetterRenderPollingProvider>;
 }
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
index 36acba5d4..b91b8935a 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
@@ -1,22 +1,26 @@
 import { render, screen } from '@testing-library/react';
 import { LetterSubmitButton } from '@molecules/LetterRender/LetterSubmitButton';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
 
 jest.mock('@providers/letter-render-polling-provider');
+jest.mock('@providers/letter-preview-error-provider');
 
 describe('LetterSubmitButton', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    jest.mocked(useLetterPreviewError).mockReturnValue({
+      approveErrorState: undefined,
+      setApproveErrorState: jest.fn(),
+      updatePreviewErrorState: undefined,
+      setUpdatePreviewErrorState: jest.fn(),
+    });
   });
 
   it('renders an enabled submit button when no tab is polling', () => {
     jest.mocked(useLetterRenderPolling).mockReturnValue({
       isAnyTabPolling: false,
       registerPolling: jest.fn(),
-      tabErrorState: undefined,
-      setTabErrorState: jest.fn(),
-      pageErrorState: undefined,
-      setPageErrorState: jest.fn(),
     });
 
     render(<LetterSubmitButton>Submit template</LetterSubmitButton>);
@@ -34,10 +38,6 @@ describe('LetterSubmitButton', () => {
     jest.mocked(useLetterRenderPolling).mockReturnValue({
       isAnyTabPolling: true,
       registerPolling: jest.fn(),
-      tabErrorState: undefined,
-      setTabErrorState: jest.fn(),
-      pageErrorState: undefined,
-      setPageErrorState: jest.fn(),
     });
 
     render(<LetterSubmitButton>Submit template</LetterSubmitButton>);
@@ -54,10 +54,6 @@ describe('LetterSubmitButton', () => {
     jest.mocked(useLetterRenderPolling).mockReturnValue({
       isAnyTabPolling: false,
       registerPolling: jest.fn(),
-      tabErrorState: undefined,
-      setTabErrorState: jest.fn(),
-      pageErrorState: undefined,
-      setPageErrorState: jest.fn(),
     });
 
     render(<LetterSubmitButton>Custom text</LetterSubmitButton>);
diff --git a/frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx b/frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx
new file mode 100644
index 000000000..b0d109baf
--- /dev/null
+++ b/frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx
@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react';
+import {
+  LetterPreviewErrorProvider,
+  useLetterPreviewError,
+} from '@providers/letter-preview-error-provider';
+
+function TestConsumer() {
+  useLetterPreviewError();
+  return null;
+}
+
+describe('useLetterPreviewError', () => {
+  it('throws when used outside provider', () => {
+    expect(() => render(<TestConsumer />)).toThrow(
+      'useLetterPreviewError must be used within LetterPreviewErrorProvider'
+    );
+  });
+});
+
+describe('LetterPreviewErrorProvider', () => {
+  it('renders children without error', () => {
+    expect(() =>
+      render(
+        <LetterPreviewErrorProvider>
+          <TestConsumer />
+        </LetterPreviewErrorProvider>
+      )
+    ).not.toThrow();
+  });
+});
diff --git a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
index 4706d624f..8a607e93e 100644
--- a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
@@ -13,6 +13,7 @@ import { LetterRender } from '@molecules/LetterRender';
 import PreviewTemplateDetailsAuthoringLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsAuthoringLetter';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
+import { LetterPreviewErrorProvider } from '@providers/letter-preview-error-provider';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
 
@@ -57,25 +58,27 @@ export default async function PreviewApprovedLetterTemplatePage({
   return (
     <NHSNotifyContainer fullWidth>
       <LetterRenderPollingProvider>
-        <NHSNotifyContainer>
-          <NHSNotifyBackLink href={links.messageTemplates}>
-            {backLinkText}
-          </NHSNotifyBackLink>
-        </NHSNotifyContainer>
-        <NHSNotifyMain>
+        <LetterPreviewErrorProvider>
           <NHSNotifyContainer>
-            <div className='nhsuk-grid-row'>
-              <div className='nhsuk-grid-column-full'>
-                <PreviewTemplateDetailsAuthoringLetter
-                  template={validatedTemplate}
-                  letterVariant={letterVariant}
-                  hideEditActions
-                />
-              </div>
-            </div>
+            <NHSNotifyBackLink href={links.messageTemplates}>
+              {backLinkText}
+            </NHSNotifyBackLink>
           </NHSNotifyContainer>
-          <LetterRender template={validatedTemplate} hideEditActions={true} />
-        </NHSNotifyMain>
+          <NHSNotifyMain>
+            <NHSNotifyContainer>
+              <div className='nhsuk-grid-row'>
+                <div className='nhsuk-grid-column-full'>
+                  <PreviewTemplateDetailsAuthoringLetter
+                    template={validatedTemplate}
+                    letterVariant={letterVariant}
+                    hideEditActions
+                  />
+                </div>
+              </div>
+            </NHSNotifyContainer>
+            <LetterRender template={validatedTemplate} hideEditActions={true} />
+          </NHSNotifyMain>
+        </LetterPreviewErrorProvider>
       </LetterRenderPollingProvider>
     </NHSNotifyContainer>
   );
diff --git a/frontend/src/app/preview-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-letter-template/[templateId]/page.tsx
index f8650094a..5b9791707 100644
--- a/frontend/src/app/preview-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-letter-template/[templateId]/page.tsx
@@ -20,10 +20,9 @@ import { PollLetterRender } from '@molecules/PollLetterRender/PollLetterRender';
 import { NHSNotifyFormProvider } from '@providers/form-provider';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
+import { LetterPreviewErrorProvider } from '@providers/letter-preview-error-provider';
 import { LetterSubmitButton } from '@molecules/LetterRender/LetterSubmitButton';
-import { LetterRenderTabErrorSummary } from '@molecules/LetterRender/LetterRenderTabErrorSummary';
-import { LetterRenderPageErrorSummary } from '@molecules/LetterRender/LetterRenderPageErrorSummary';
-import { LetterRenderPageErrorSyncer } from '@molecules/LetterRender/LetterRenderPageErrorSyncer';
+import { LetterPreviewErrors } from '@molecules/LetterRender/LetterPreviewErrors';
 import { submitAuthoringLetterAction } from './server-action';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
@@ -107,58 +106,60 @@ export default async function PreviewLetterTemplatePage({
         serverAction={submitAuthoringLetterAction}
       >
         <LetterRenderPollingProvider>
-          <PollLetterRender
-            template={validatedTemplate}
-            mode='initialRender'
-            loadingElement={<h1>{loadingText}</h1>}
-          >
-            <NHSNotifyContainer>
-              <NHSNotifyBackLink href={links.messageTemplates}>
-                {backLinkText}
-              </NHSNotifyBackLink>
-            </NHSNotifyContainer>
-            <NHSNotifyMain>
+          <LetterPreviewErrorProvider>
+            <PollLetterRender
+              template={validatedTemplate}
+              mode='initialRender'
+              loadingElement={<h1>{loadingText}</h1>}
+            >
               <NHSNotifyContainer>
-                <LetterRenderPageErrorSyncer />
-                <LetterRenderPageErrorSummary />
-                <LetterRenderTabErrorSummary />
-                <div className='nhsuk-grid-row'>
-                  <div className='nhsuk-grid-column-full'>
-                    <PreviewTemplateDetailsAuthoringLetter
-                      template={validatedTemplate}
-                      letterVariant={letterVariant}
-                    />
-                  </div>
-                </div>
-              </NHSNotifyContainer>
-              {showRenderer && <LetterRender template={validatedTemplate} />}
-              <NHSNotifyContainer fullWidth={showRenderer}>
-                {showSubmitForm && (
-                  <NHSNotifyForm.Form formId='preview-letter-template'>
-                    <input
-                      type='hidden'
-                      name='templateId'
-                      value={validatedTemplate.id}
-                    />
-                    <input
-                      type='hidden'
-                      name='lockNumber'
-                      value={validatedTemplate.lockNumber}
-                    />
-                    <LetterSubmitButton>{approveButtonText}</LetterSubmitButton>
-                  </NHSNotifyForm.Form>
-                )}
-                <p>
-                  <Link
-                    data-testid='back-link-bottom'
-                    href={links.messageTemplates}
-                  >
-                    {backLinkText}
-                  </Link>
-                </p>
+                <NHSNotifyBackLink href={links.messageTemplates}>
+                  {backLinkText}
+                </NHSNotifyBackLink>
               </NHSNotifyContainer>
-            </NHSNotifyMain>
-          </PollLetterRender>
+              <NHSNotifyMain>
+                <NHSNotifyContainer>
+                  <LetterPreviewErrors />
+                  <div className='nhsuk-grid-row'>
+                    <div className='nhsuk-grid-column-full'>
+                      <PreviewTemplateDetailsAuthoringLetter
+                        template={validatedTemplate}
+                        letterVariant={letterVariant}
+                      />
+                    </div>
+                  </div>
+                </NHSNotifyContainer>
+                {showRenderer && <LetterRender template={validatedTemplate} />}
+                <NHSNotifyContainer fullWidth={showRenderer}>
+                  {showSubmitForm && (
+                    <NHSNotifyForm.Form formId='preview-letter-template'>
+                      <input
+                        type='hidden'
+                        name='templateId'
+                        value={validatedTemplate.id}
+                      />
+                      <input
+                        type='hidden'
+                        name='lockNumber'
+                        value={validatedTemplate.lockNumber}
+                      />
+                      <LetterSubmitButton>
+                        {approveButtonText}
+                      </LetterSubmitButton>
+                    </NHSNotifyForm.Form>
+                  )}
+                  <p>
+                    <Link
+                      data-testid='back-link-bottom'
+                      href={links.messageTemplates}
+                    >
+                      {backLinkText}
+                    </Link>
+                  </p>
+                </NHSNotifyContainer>
+              </NHSNotifyMain>
+            </PollLetterRender>
+          </LetterPreviewErrorProvider>
         </LetterRenderPollingProvider>
       </NHSNotifyFormProvider>
     </NHSNotifyContainer>
diff --git a/frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx b/frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx
new file mode 100644
index 000000000..448a7979c
--- /dev/null
+++ b/frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useNHSNotifyForm } from '@providers/form-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
+
+/**
+ * Syncs the outer page-level form state (Approve template action) into
+ * LetterPreviewErrorProvider so it can be displayed and cleared independently
+ * of the Update Preview errors.
+ *
+ * Intentionally does NOT cross-clear updatePreviewErrorState here — that is
+ * handled via the Approve button's onClick to avoid interfering with initial mount.
+ */
+function ApproveTemplateErrorSyncer() {
+  const [state] = useNHSNotifyForm();
+  const { setApproveErrorState } = useLetterPreviewError();
+
+  useEffect(() => {
+    setApproveErrorState(state.errorState);
+  }, [state, setApproveErrorState]);
+
+  return null;
+}
+
+/**
+ * Displays validation errors for the preview letter template page.
+ * Approve template and Update preview errors occupy separate slots so each
+ * button's onClick can clear only its own errors.
+ *
+ * Must be rendered inside NHSNotifyFormProvider (for the approve action state)
+ * and LetterPreviewErrorProvider.
+ */
+export function LetterPreviewErrors() {
+  const { approveErrorState, updatePreviewErrorState } =
+    useLetterPreviewError();
+
+  return (
+    <>
+      <ApproveTemplateErrorSyncer />
+      <NhsNotifyErrorSummary errorState={approveErrorState} />
+      <NhsNotifyErrorSummary errorState={updatePreviewErrorState} />
+    </>
+  );
+}
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
index fcc5c5294..47dc0d54e 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
@@ -10,6 +10,7 @@ import {
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import * as NHSNotifyForm from '@atoms/NHSNotifyForm';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
 import type { PersonalisedRenderKey } from '@utils/types';
 import styles from './LetterRenderForm.module.scss';
 import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
@@ -21,7 +22,8 @@ type LetterRenderFormProps = {
 
 export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
   const { letterRender: copy } = content.components;
-  const { isAnyTabPolling, setPageErrorState } = useLetterRenderPolling();
+  const { isAnyTabPolling } = useLetterRenderPolling();
+  const { setApproveErrorState } = useLetterPreviewError();
 
   const exampleRecipients =
     tab === 'shortFormRender'
@@ -94,7 +96,7 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
         secondary
         className='nhsuk-u-margin-top-4'
         disabled={isAnyTabPolling}
-        onClick={() => setPageErrorState(undefined)}
+        onClick={() => setApproveErrorState(undefined)}
       >
         {copy.updatePreviewButton}
       </NHSNotifyButton>
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx
deleted file mode 100644
index 7520b623a..000000000
--- a/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSummary.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client';
-
-import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
-import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
-
-export function LetterRenderPageErrorSummary() {
-  const { pageErrorState } = useLetterRenderPolling();
-
-  return <NhsNotifyErrorSummary errorState={pageErrorState} />;
-}
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx
deleted file mode 100644
index 96054b714..000000000
--- a/frontend/src/components/molecules/LetterRender/LetterRenderPageErrorSyncer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useNHSNotifyForm } from '@providers/form-provider';
-import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
-
-/**
- * Syncs the outer page-level form state (Approve template action) into
- * LetterRenderPollingProvider so that LetterRenderPageErrorSummary can
- * display it, and so it can be cleared independently of the tab-level
- * Update Preview errors.
- *
- * Intentionally does NOT cross-clear tabErrorState here — that is handled
- * via the Approve button's onClick to avoid interfering with initial mount.
- */
-export function LetterRenderPageErrorSyncer() {
-  const [state] = useNHSNotifyForm();
-  const { setPageErrorState } = useLetterRenderPolling();
-
-  useEffect(() => {
-    setPageErrorState(state.errorState);
-  }, [state, setPageErrorState]);
-
-  return null;
-}
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
index 93ae36bc1..bad2b8697 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
@@ -19,7 +19,7 @@ import { PollLetterRender } from '@molecules/PollLetterRender/PollLetterRender';
 import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
 import content from '@content/content';
 import { buildLetterRenderUrl } from '@utils/letter-render-url';
-import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
 import { useEffect } from 'react';
 
 const { loadingText } = content.components.letterRender;
@@ -81,11 +81,11 @@ function LetterRenderTabContent({
   hideEditActions?: boolean;
 }) {
   const [state, _dispatch, isPending] = useNHSNotifyForm();
-  const { setTabErrorState } = useLetterRenderPolling();
+  const { setUpdatePreviewErrorState } = useLetterPreviewError();
 
   useEffect(() => {
-    setTabErrorState(state.errorState);
-  }, [state, setTabErrorState]);
+    setUpdatePreviewErrorState(state.errorState);
+  }, [state, setUpdatePreviewErrorState]);
 
   return (
     <div className={`nhsuk-grid-row ${styles.tabRow}`}>
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx
deleted file mode 100644
index 1bf32ef9b..000000000
--- a/frontend/src/components/molecules/LetterRender/LetterRenderTabErrorSummary.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use client';
-
-import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
-import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
-
-export function LetterRenderTabErrorSummary() {
-  const { tabErrorState } = useLetterRenderPolling();
-
-  return <NhsNotifyErrorSummary errorState={tabErrorState} />;
-}
diff --git a/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx b/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
index c252a09fa..195b5c538 100644
--- a/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
@@ -3,9 +3,11 @@
 import type { PropsWithChildren } from 'react';
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
+import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
 
 export function LetterSubmitButton({ children }: PropsWithChildren) {
-  const { isAnyTabPolling, setTabErrorState } = useLetterRenderPolling();
+  const { isAnyTabPolling } = useLetterRenderPolling();
+  const { setUpdatePreviewErrorState } = useLetterPreviewError();
 
   return (
     <NHSNotifyButton
@@ -13,7 +15,7 @@ export function LetterSubmitButton({ children }: PropsWithChildren) {
       data-testid='preview-letter-template-cta'
       id='preview-letter-template-cta'
       disabled={isAnyTabPolling}
-      onClick={() => setTabErrorState(undefined)}
+      onClick={() => setUpdatePreviewErrorState(undefined)}
     >
       {children}
     </NHSNotifyButton>
diff --git a/frontend/src/components/providers/letter-preview-error-provider.tsx b/frontend/src/components/providers/letter-preview-error-provider.tsx
new file mode 100644
index 000000000..4e21a9c24
--- /dev/null
+++ b/frontend/src/components/providers/letter-preview-error-provider.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import type { ErrorState } from 'nhs-notify-web-template-management-utils';
+import {
+  createContext,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+
+type LetterPreviewErrorContextValue = {
+  approveErrorState: ErrorState | undefined;
+  setApproveErrorState: (state: ErrorState | undefined) => void;
+  updatePreviewErrorState: ErrorState | undefined;
+  setUpdatePreviewErrorState: (state: ErrorState | undefined) => void;
+};
+
+const LetterPreviewErrorContext =
+  createContext<LetterPreviewErrorContextValue | null>(null);
+
+export function useLetterPreviewError() {
+  const context = useContext(LetterPreviewErrorContext);
+
+  if (!context) {
+    throw new Error(
+      'useLetterPreviewError must be used within LetterPreviewErrorProvider'
+    );
+  }
+
+  return context;
+}
+
+export function LetterPreviewErrorProvider({ children }: PropsWithChildren) {
+  const [approveErrorState, setApproveErrorState] = useState<
+    ErrorState | undefined
+  >();
+  const [updatePreviewErrorState, setUpdatePreviewErrorState] = useState<
+    ErrorState | undefined
+  >();
+
+  return (
+    <LetterPreviewErrorContext.Provider
+      value={{
+        approveErrorState,
+        setApproveErrorState,
+        updatePreviewErrorState,
+        setUpdatePreviewErrorState,
+      }}
+    >
+      {children}
+    </LetterPreviewErrorContext.Provider>
+  );
+}
diff --git a/frontend/src/components/providers/letter-render-polling-provider.tsx b/frontend/src/components/providers/letter-render-polling-provider.tsx
index b67dc7279..738eb717b 100644
--- a/frontend/src/components/providers/letter-render-polling-provider.tsx
+++ b/frontend/src/components/providers/letter-render-polling-provider.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { RenderKey } from '@utils/types';
-import type { ErrorState } from 'nhs-notify-web-template-management-utils';
 import {
   createContext,
   useCallback,
@@ -14,10 +13,6 @@ import {
 type LetterRenderPollingContextValue = {
   isAnyTabPolling: boolean;
   registerPolling: (key: RenderKey, polling: boolean) => void;
-  tabErrorState: ErrorState | undefined;
-  setTabErrorState: (state: ErrorState | undefined) => void;
-  pageErrorState: ErrorState | undefined;
-  setPageErrorState: (state: ErrorState | undefined) => void;
 };
 
 const LetterRenderPollingContext =
@@ -37,10 +32,6 @@ export function useLetterRenderPolling() {
 
 export function LetterRenderPollingProvider({ children }: PropsWithChildren) {
   const [isAnyTabPolling, setIsAnyTabPolling] = useState(false);
-  const [tabErrorState, setTabErrorState] = useState<ErrorState | undefined>();
-  const [pageErrorState, setPageErrorState] = useState<
-    ErrorState | undefined
-  >();
 
   const pollingMapRef = useRef<Partial<Record<RenderKey, boolean>>>({});
 
@@ -55,10 +46,6 @@ export function LetterRenderPollingProvider({ children }: PropsWithChildren) {
       value={{
         isAnyTabPolling,
         registerPolling,
-        tabErrorState,
-        setTabErrorState,
-        pageErrorState,
-        setPageErrorState,
       }}
     >
       {children}

From 982ade38d9bd5dea7183410dc9ce8e8c09c81f7e Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:28 +0100
Subject: [PATCH 07/12] Rename

---
 .../__snapshots__/page.test.tsx.snap          |  6 ---
 .../server-action.test.ts                     |  2 +-
 .../LetterRender/LetterRender.test.tsx        | 12 ++---
 .../LetterRender/LetterRenderForm.test.tsx    | 16 +++---
 .../LetterRender/LetterRenderTab.test.tsx     | 16 +++---
 .../LetterRender/LetterSubmitButton.test.tsx  | 14 ++---
 .../__snapshots__/LetterRender.test.tsx.snap  |  2 -
 .../LetterRenderForm.test.tsx.snap            |  4 --
 .../LetterRenderTab.test.tsx.snap             |  2 -
 .../letter-preview-error-provider.test.tsx    | 30 -----------
 .../letter-render-error-provider.test.tsx     | 30 +++++++++++
 .../[templateId]/page.tsx                     |  6 +--
 .../[templateId]/page.tsx                     | 10 ++--
 .../CombinedLetterErrorSummary.tsx            | 46 ++++++++++++++++
 .../LetterRender/LetterPreviewErrors.tsx      | 46 ----------------
 .../LetterRender/LetterRenderForm.tsx         |  9 ++--
 .../LetterRender/LetterRenderTab.tsx          |  5 +-
 .../LetterRender/LetterSubmitButton.tsx       |  6 +--
 .../letter-preview-error-provider.tsx         | 53 -------------------
 .../letter-render-error-provider.tsx          | 53 +++++++++++++++++++
 ...mgmt-preview-letter-page.component.spec.ts | 24 ++++++++-
 21 files changed, 199 insertions(+), 193 deletions(-)
 delete mode 100644 frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx
 create mode 100644 frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx
 create mode 100644 frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx
 delete mode 100644 frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx
 delete mode 100644 frontend/src/components/providers/letter-preview-error-provider.tsx
 create mode 100644 frontend/src/components/providers/letter-render-error-provider.tsx

diff --git a/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap
index 53a5a4604..9d1f6dbf5 100644
--- a/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/preview-letter-template/__snapshots__/page.test.tsx.snap
@@ -311,7 +311,6 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
-                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -461,7 +460,6 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
-                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -870,7 +868,6 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
-                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -1020,7 +1017,6 @@ exports[`authoring letter template with VALIDATION_FAILED status matches snapsho
                   </p>
                   <div
                     class="nhsuk-form-group"
-                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -1657,7 +1653,6 @@ exports[`valid authoring letter template matches snapshot 1`] = `
                   </p>
                   <div
                     class="nhsuk-form-group"
-                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
@@ -1807,7 +1802,6 @@ exports[`valid authoring letter template matches snapshot 1`] = `
                   </p>
                   <div
                     class="nhsuk-form-group"
-                    id="systemPersonalisationPackId"
                   >
                     <label
                       class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
index 6a9e9b5a9..ae8d1a211 100644
--- a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
+++ b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
@@ -98,7 +98,7 @@ describe('submitAuthoringLetterAction', () => {
     expect(redirectMock).not.toHaveBeenCalled();
   });
 
-  it('should handle error when validating template', async () => {
+  it('should redirect to invalid-template page when template validation fails', async () => {
     getTemplateMock.mockResolvedValueOnce({
       id: 'template-id',
     } as unknown as TemplateDto);
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx
index 0481f0567..639c33546 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRender.test.tsx
@@ -10,12 +10,12 @@ jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);
 
 jest.mock('@molecules/LetterRender/server-action');
 
-jest.mock('@providers/letter-preview-error-provider', () => ({
-  useLetterPreviewError: jest.fn(() => ({
-    approveErrorState: undefined,
-    setApproveErrorState: jest.fn(),
-    updatePreviewErrorState: undefined,
-    setUpdatePreviewErrorState: jest.fn(),
+jest.mock('@providers/letter-render-error-provider', () => ({
+  useLetterRenderError: jest.fn(() => ({
+    parentErrorState: undefined,
+    setParentErrorState: jest.fn(),
+    letterRenderErrorState: undefined,
+    setLetterRenderErrorState: jest.fn(),
   })),
 }));
 
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 08a9e6557..0d90df364 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -5,7 +5,7 @@ import {
   LetterRenderPollingProvider,
   useLetterRenderPolling,
 } from '@providers/letter-render-polling-provider';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
 import type {
   AuthoringLetterTemplate,
   FormState,
@@ -21,8 +21,8 @@ jest.mock('@providers/letter-render-polling-provider', () => {
   };
 });
 
-jest.mock('@providers/letter-preview-error-provider', () => ({
-  useLetterPreviewError: jest.fn(),
+jest.mock('@providers/letter-render-error-provider', () => ({
+  useLetterRenderError: jest.fn(),
 }));
 
 const baseTemplate: AuthoringLetterTemplate = {
@@ -84,11 +84,11 @@ function renderWithProvider(
 describe('LetterRenderForm', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    jest.mocked(useLetterPreviewError).mockReturnValue({
-      approveErrorState: undefined,
-      setApproveErrorState: jest.fn(),
-      updatePreviewErrorState: undefined,
-      setUpdatePreviewErrorState: jest.fn(),
+    jest.mocked(useLetterRenderError).mockReturnValue({
+      parentErrorState: undefined,
+      setParentErrorState: jest.fn(),
+      letterRenderErrorState: undefined,
+      setLetterRenderErrorState: jest.fn(),
     });
   });
 
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
index f077dfa63..d517577ff 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { LetterRenderTab } from '@molecules/LetterRender/LetterRenderTab';
 import { updateLetterPreview } from '@molecules/LetterRender/server-action';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
 import type {
   AuthoringLetterTemplate,
   FormState,
@@ -15,8 +15,8 @@ jest.mocked(verifyFormCsrfToken).mockResolvedValue(true);
 
 jest.mock('@molecules/LetterRender/server-action');
 
-jest.mock('@providers/letter-preview-error-provider', () => ({
-  useLetterPreviewError: jest.fn(),
+jest.mock('@providers/letter-render-error-provider', () => ({
+  useLetterRenderError: jest.fn(),
 }));
 
 jest.mock('next/navigation');
@@ -30,11 +30,11 @@ const mockUpdateLetterPreview = jest.mocked(updateLetterPreview);
 const mockSetUpdatePreviewErrorState = jest.fn();
 
 beforeEach(() => {
-  jest.mocked(useLetterPreviewError).mockReturnValue({
-    approveErrorState: undefined,
-    setApproveErrorState: jest.fn(),
-    updatePreviewErrorState: undefined,
-    setUpdatePreviewErrorState: mockSetUpdatePreviewErrorState,
+  jest.mocked(useLetterRenderError).mockReturnValue({
+    parentErrorState: undefined,
+    setParentErrorState: jest.fn(),
+    letterRenderErrorState: undefined,
+    setLetterRenderErrorState: mockSetUpdatePreviewErrorState,
   });
 });
 
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
index b91b8935a..33bcbe5b7 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterSubmitButton.test.tsx
@@ -1,19 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import { LetterSubmitButton } from '@molecules/LetterRender/LetterSubmitButton';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
 
 jest.mock('@providers/letter-render-polling-provider');
-jest.mock('@providers/letter-preview-error-provider');
+jest.mock('@providers/letter-render-error-provider');
 
 describe('LetterSubmitButton', () => {
   beforeEach(() => {
     jest.resetAllMocks();
-    jest.mocked(useLetterPreviewError).mockReturnValue({
-      approveErrorState: undefined,
-      setApproveErrorState: jest.fn(),
-      updatePreviewErrorState: undefined,
-      setUpdatePreviewErrorState: jest.fn(),
+    jest.mocked(useLetterRenderError).mockReturnValue({
+      parentErrorState: undefined,
+      setParentErrorState: jest.fn(),
+      letterRenderErrorState: undefined,
+      setLetterRenderErrorState: jest.fn(),
     });
   });
 
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap
index 0c2b23be4..7c7de83d3 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRender.test.tsx.snap
@@ -106,7 +106,6 @@ exports[`LetterRender matches snapshot 1`] = `
               </p>
               <div
                 class="nhsuk-form-group"
-                id="systemPersonalisationPackId"
               >
                 <label
                   class="nhsuk-label nhsuk-label--s"
@@ -299,7 +298,6 @@ exports[`LetterRender matches snapshot 1`] = `
               </p>
               <div
                 class="nhsuk-form-group"
-                id="systemPersonalisationPackId"
               >
                 <label
                   class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
index 55aaca51e..2a49804b5 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderForm.test.tsx.snap
@@ -29,7 +29,6 @@ exports[`LetterRenderForm snapshots matches snapshot for long tab 1`] = `
     </p>
     <div
       class="nhsuk-form-group"
-      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
@@ -182,7 +181,6 @@ exports[`LetterRenderForm snapshots matches snapshot for short tab 1`] = `
     </p>
     <div
       class="nhsuk-form-group"
-      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
@@ -353,7 +351,6 @@ exports[`LetterRenderForm snapshots matches snapshot with validation error 1`] =
     </p>
     <div
       class="nhsuk-form-group nhsuk-form-group--error"
-      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
@@ -493,7 +490,6 @@ exports[`LetterRenderForm snapshots matches snapshot without custom personalisat
     </p>
     <div
       class="nhsuk-form-group"
-      id="systemPersonalisationPackId"
     >
       <label
         class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap
index af53f18d7..e2b8d34dc 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap
+++ b/frontend/src/__tests__/components/molecules/LetterRender/__snapshots__/LetterRenderTab.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`LetterRenderTab snapshots matches snapshot for long tab 1`] = `
         </p>
         <div
           class="nhsuk-form-group"
-          id="systemPersonalisationPackId"
         >
           <label
             class="nhsuk-label nhsuk-label--s"
@@ -207,7 +206,6 @@ exports[`LetterRenderTab snapshots matches snapshot for short tab 1`] = `
         </p>
         <div
           class="nhsuk-form-group"
-          id="systemPersonalisationPackId"
         >
           <label
             class="nhsuk-label nhsuk-label--s"
diff --git a/frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx b/frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx
deleted file mode 100644
index b0d109baf..000000000
--- a/frontend/src/__tests__/components/providers/letter-preview-error-provider.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { render } from '@testing-library/react';
-import {
-  LetterPreviewErrorProvider,
-  useLetterPreviewError,
-} from '@providers/letter-preview-error-provider';
-
-function TestConsumer() {
-  useLetterPreviewError();
-  return null;
-}
-
-describe('useLetterPreviewError', () => {
-  it('throws when used outside provider', () => {
-    expect(() => render(<TestConsumer />)).toThrow(
-      'useLetterPreviewError must be used within LetterPreviewErrorProvider'
-    );
-  });
-});
-
-describe('LetterPreviewErrorProvider', () => {
-  it('renders children without error', () => {
-    expect(() =>
-      render(
-        <LetterPreviewErrorProvider>
-          <TestConsumer />
-        </LetterPreviewErrorProvider>
-      )
-    ).not.toThrow();
-  });
-});
diff --git a/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx b/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx
new file mode 100644
index 000000000..4598947a5
--- /dev/null
+++ b/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx
@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react';
+import {
+  LetterRenderErrorProvider,
+  useLetterRenderError,
+} from '@providers/letter-render-error-provider';
+
+function TestConsumer() {
+  useLetterRenderError();
+  return null;
+}
+
+describe('useLetterRenderError', () => {
+  it('throws when used outside provider', () => {
+    expect(() => render(<TestConsumer />)).toThrow(
+      'useLetterRenderError must be used within LetterRenderErrorProvider'
+    );
+  });
+});
+
+describe('LetterRenderErrorProvider', () => {
+  it('renders children without error', () => {
+    expect(() =>
+      render(
+        <LetterRenderErrorProvider>
+          <TestConsumer />
+        </LetterRenderErrorProvider>
+      )
+    ).not.toThrow();
+  });
+});
diff --git a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
index 8a607e93e..c6485f6b7 100644
--- a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
@@ -13,7 +13,7 @@ import { LetterRender } from '@molecules/LetterRender';
 import PreviewTemplateDetailsAuthoringLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsAuthoringLetter';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
-import { LetterPreviewErrorProvider } from '@providers/letter-preview-error-provider';
+import { LetterRenderErrorProvider } from '@providers/letter-render-error-provider';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
 
@@ -58,7 +58,7 @@ export default async function PreviewApprovedLetterTemplatePage({
   return (
     <NHSNotifyContainer fullWidth>
       <LetterRenderPollingProvider>
-        <LetterPreviewErrorProvider>
+        <LetterRenderErrorProvider>
           <NHSNotifyContainer>
             <NHSNotifyBackLink href={links.messageTemplates}>
               {backLinkText}
@@ -78,7 +78,7 @@ export default async function PreviewApprovedLetterTemplatePage({
             </NHSNotifyContainer>
             <LetterRender template={validatedTemplate} hideEditActions={true} />
           </NHSNotifyMain>
-        </LetterPreviewErrorProvider>
+        </LetterRenderErrorProvider>
       </LetterRenderPollingProvider>
     </NHSNotifyContainer>
   );
diff --git a/frontend/src/app/preview-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-letter-template/[templateId]/page.tsx
index 5b9791707..0b26199b6 100644
--- a/frontend/src/app/preview-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-letter-template/[templateId]/page.tsx
@@ -20,9 +20,9 @@ import { PollLetterRender } from '@molecules/PollLetterRender/PollLetterRender';
 import { NHSNotifyFormProvider } from '@providers/form-provider';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
 import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
-import { LetterPreviewErrorProvider } from '@providers/letter-preview-error-provider';
+import { LetterRenderErrorProvider } from '@providers/letter-render-error-provider';
 import { LetterSubmitButton } from '@molecules/LetterRender/LetterSubmitButton';
-import { LetterPreviewErrors } from '@molecules/LetterRender/LetterPreviewErrors';
+import { CombinedLetterErrorSummary } from '@molecules/LetterRender/CombinedLetterErrorSummary';
 import { submitAuthoringLetterAction } from './server-action';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
@@ -106,7 +106,7 @@ export default async function PreviewLetterTemplatePage({
         serverAction={submitAuthoringLetterAction}
       >
         <LetterRenderPollingProvider>
-          <LetterPreviewErrorProvider>
+          <LetterRenderErrorProvider>
             <PollLetterRender
               template={validatedTemplate}
               mode='initialRender'
@@ -119,7 +119,7 @@ export default async function PreviewLetterTemplatePage({
               </NHSNotifyContainer>
               <NHSNotifyMain>
                 <NHSNotifyContainer>
-                  <LetterPreviewErrors />
+                  <CombinedLetterErrorSummary />
                   <div className='nhsuk-grid-row'>
                     <div className='nhsuk-grid-column-full'>
                       <PreviewTemplateDetailsAuthoringLetter
@@ -159,7 +159,7 @@ export default async function PreviewLetterTemplatePage({
                 </NHSNotifyContainer>
               </NHSNotifyMain>
             </PollLetterRender>
-          </LetterPreviewErrorProvider>
+          </LetterRenderErrorProvider>
         </LetterRenderPollingProvider>
       </NHSNotifyFormProvider>
     </NHSNotifyContainer>
diff --git a/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx b/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx
new file mode 100644
index 000000000..b3f0e6493
--- /dev/null
+++ b/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useNHSNotifyForm } from '@providers/form-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
+import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
+
+/**
+ * Syncs the outer page-level form state into
+ * CombinedLetterErrorSummary so it can be displayed and cleared independently
+ * of letter render errors.
+ *
+ * This mechanism is intentionally NOT used for letterRenderErrorState — that should be
+ * handled via the parent form submit's onClick to avoid interfering with initial mount.
+ */
+function ParentFormErrorSyncer() {
+  const [state] = useNHSNotifyForm();
+  const { setParentErrorState } = useLetterRenderError();
+
+  useEffect(() => {
+    setParentErrorState(state.errorState);
+  }, [state, setParentErrorState]);
+
+  return null;
+}
+
+/**
+ * Displays validation errors for the preview letter template page.
+ * Approve template and Update preview errors occupy separate slots so each
+ * button's onClick can clear only its own errors.
+ *
+ * Must be rendered inside NHSNotifyFormProvider (for the parent action state)
+ * and LetterRenderErrorProvider.
+ */
+export function CombinedLetterErrorSummary() {
+  const { parentErrorState, letterRenderErrorState } = useLetterRenderError();
+
+  return (
+    <>
+      <ParentFormErrorSyncer />
+      <NhsNotifyErrorSummary
+        errorState={parentErrorState || letterRenderErrorState}
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx b/frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx
deleted file mode 100644
index 448a7979c..000000000
--- a/frontend/src/components/molecules/LetterRender/LetterPreviewErrors.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useNHSNotifyForm } from '@providers/form-provider';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
-import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
-
-/**
- * Syncs the outer page-level form state (Approve template action) into
- * LetterPreviewErrorProvider so it can be displayed and cleared independently
- * of the Update Preview errors.
- *
- * Intentionally does NOT cross-clear updatePreviewErrorState here — that is
- * handled via the Approve button's onClick to avoid interfering with initial mount.
- */
-function ApproveTemplateErrorSyncer() {
-  const [state] = useNHSNotifyForm();
-  const { setApproveErrorState } = useLetterPreviewError();
-
-  useEffect(() => {
-    setApproveErrorState(state.errorState);
-  }, [state, setApproveErrorState]);
-
-  return null;
-}
-
-/**
- * Displays validation errors for the preview letter template page.
- * Approve template and Update preview errors occupy separate slots so each
- * button's onClick can clear only its own errors.
- *
- * Must be rendered inside NHSNotifyFormProvider (for the approve action state)
- * and LetterPreviewErrorProvider.
- */
-export function LetterPreviewErrors() {
-  const { approveErrorState, updatePreviewErrorState } =
-    useLetterPreviewError();
-
-  return (
-    <>
-      <ApproveTemplateErrorSyncer />
-      <NhsNotifyErrorSummary errorState={approveErrorState} />
-      <NhsNotifyErrorSummary errorState={updatePreviewErrorState} />
-    </>
-  );
-}
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
index 47dc0d54e..e286b5d1a 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
@@ -10,7 +10,7 @@ import {
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import * as NHSNotifyForm from '@atoms/NHSNotifyForm';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
 import type { PersonalisedRenderKey } from '@utils/types';
 import styles from './LetterRenderForm.module.scss';
 import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
@@ -23,7 +23,7 @@ type LetterRenderFormProps = {
 export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
   const { letterRender: copy } = content.components;
   const { isAnyTabPolling } = useLetterRenderPolling();
-  const { setApproveErrorState } = useLetterPreviewError();
+  const { setParentErrorState: setApproveErrorState } = useLetterRenderError();
 
   const exampleRecipients =
     tab === 'shortFormRender'
@@ -38,10 +38,7 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
       <h3 className='nhsuk-heading-s'>{copy.pdsSection.heading}</h3>
       <p className='nhsuk-body-s'>{copy.pdsSection.hint}</p>
 
-      <NHSNotifyForm.FormGroup
-        id='systemPersonalisationPackId'
-        htmlFor='systemPersonalisationPackId'
-      >
+      <NHSNotifyForm.FormGroup htmlFor='systemPersonalisationPackId'>
         <Label size='s' htmlFor={`system-personalisation-pack-id-${tab}`}>
           {copy.pdsSection.recipientLabel}
         </Label>
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
index bad2b8697..8e5fe2f20 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
@@ -19,7 +19,7 @@ import { PollLetterRender } from '@molecules/PollLetterRender/PollLetterRender';
 import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
 import content from '@content/content';
 import { buildLetterRenderUrl } from '@utils/letter-render-url';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
 import { useEffect } from 'react';
 
 const { loadingText } = content.components.letterRender;
@@ -81,7 +81,8 @@ function LetterRenderTabContent({
   hideEditActions?: boolean;
 }) {
   const [state, _dispatch, isPending] = useNHSNotifyForm();
-  const { setUpdatePreviewErrorState } = useLetterPreviewError();
+  const { setLetterRenderErrorState: setUpdatePreviewErrorState } =
+    useLetterRenderError();
 
   useEffect(() => {
     setUpdatePreviewErrorState(state.errorState);
diff --git a/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx b/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
index 195b5c538..8b53ab9bf 100644
--- a/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterSubmitButton.tsx
@@ -3,11 +3,11 @@
 import type { PropsWithChildren } from 'react';
 import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
 import { useLetterRenderPolling } from '@providers/letter-render-polling-provider';
-import { useLetterPreviewError } from '@providers/letter-preview-error-provider';
+import { useLetterRenderError } from '@providers/letter-render-error-provider';
 
 export function LetterSubmitButton({ children }: PropsWithChildren) {
   const { isAnyTabPolling } = useLetterRenderPolling();
-  const { setUpdatePreviewErrorState } = useLetterPreviewError();
+  const { setLetterRenderErrorState } = useLetterRenderError();
 
   return (
     <NHSNotifyButton
@@ -15,7 +15,7 @@ export function LetterSubmitButton({ children }: PropsWithChildren) {
       data-testid='preview-letter-template-cta'
       id='preview-letter-template-cta'
       disabled={isAnyTabPolling}
-      onClick={() => setUpdatePreviewErrorState(undefined)}
+      onClick={() => setLetterRenderErrorState(undefined)}
     >
       {children}
     </NHSNotifyButton>
diff --git a/frontend/src/components/providers/letter-preview-error-provider.tsx b/frontend/src/components/providers/letter-preview-error-provider.tsx
deleted file mode 100644
index 4e21a9c24..000000000
--- a/frontend/src/components/providers/letter-preview-error-provider.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client';
-
-import type { ErrorState } from 'nhs-notify-web-template-management-utils';
-import {
-  createContext,
-  useContext,
-  useState,
-  type PropsWithChildren,
-} from 'react';
-
-type LetterPreviewErrorContextValue = {
-  approveErrorState: ErrorState | undefined;
-  setApproveErrorState: (state: ErrorState | undefined) => void;
-  updatePreviewErrorState: ErrorState | undefined;
-  setUpdatePreviewErrorState: (state: ErrorState | undefined) => void;
-};
-
-const LetterPreviewErrorContext =
-  createContext<LetterPreviewErrorContextValue | null>(null);
-
-export function useLetterPreviewError() {
-  const context = useContext(LetterPreviewErrorContext);
-
-  if (!context) {
-    throw new Error(
-      'useLetterPreviewError must be used within LetterPreviewErrorProvider'
-    );
-  }
-
-  return context;
-}
-
-export function LetterPreviewErrorProvider({ children }: PropsWithChildren) {
-  const [approveErrorState, setApproveErrorState] = useState<
-    ErrorState | undefined
-  >();
-  const [updatePreviewErrorState, setUpdatePreviewErrorState] = useState<
-    ErrorState | undefined
-  >();
-
-  return (
-    <LetterPreviewErrorContext.Provider
-      value={{
-        approveErrorState,
-        setApproveErrorState,
-        updatePreviewErrorState,
-        setUpdatePreviewErrorState,
-      }}
-    >
-      {children}
-    </LetterPreviewErrorContext.Provider>
-  );
-}
diff --git a/frontend/src/components/providers/letter-render-error-provider.tsx b/frontend/src/components/providers/letter-render-error-provider.tsx
new file mode 100644
index 000000000..48236c08d
--- /dev/null
+++ b/frontend/src/components/providers/letter-render-error-provider.tsx
@@ -0,0 +1,53 @@
+'use client';
+
+import type { ErrorState } from 'nhs-notify-web-template-management-utils';
+import {
+  createContext,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+
+type LetterRenderErrorContextValue = {
+  parentErrorState: ErrorState | undefined;
+  setParentErrorState: (state: ErrorState | undefined) => void;
+  letterRenderErrorState: ErrorState | undefined;
+  setLetterRenderErrorState: (state: ErrorState | undefined) => void;
+};
+
+const LetterRenderErrorContext =
+  createContext<LetterRenderErrorContextValue | null>(null);
+
+export function useLetterRenderError() {
+  const context = useContext(LetterRenderErrorContext);
+
+  if (!context) {
+    throw new Error(
+      'useLetterRenderError must be used within LetterRenderErrorProvider'
+    );
+  }
+
+  return context;
+}
+
+export function LetterRenderErrorProvider({ children }: PropsWithChildren) {
+  const [parentErrorState, setParentErrorState] = useState<
+    ErrorState | undefined
+  >();
+  const [letterRenderErrorState, setLetterRenderErrorState] = useState<
+    ErrorState | undefined
+  >();
+
+  return (
+    <LetterRenderErrorContext.Provider
+      value={{
+        parentErrorState,
+        setParentErrorState,
+        letterRenderErrorState,
+        setLetterRenderErrorState,
+      }}
+    >
+      {children}
+    </LetterRenderErrorContext.Provider>
+  );
+}
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
index 60c9003dc..48666fd36 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
@@ -154,6 +154,28 @@ function createTemplates(
       {
         letterVariantId: variants.doubleSided.id,
         initialRender: { pageCount: 4 },
+        shortFormRender: {
+          fileName: 'short-personalised.pdf',
+          currentVersion: 'v1-short',
+          pageCount: 4,
+          systemPersonalisationPackId: 'short-1',
+          personalisationParameters: {
+            firstName: 'Jo',
+            lastName: 'Bloggs',
+            appointmentDate: '2025-03-15',
+          },
+        },
+        longFormRender: {
+          fileName: 'long-personalised.pdf',
+          currentVersion: 'v1-long',
+          pageCount: 4,
+          systemPersonalisationPackId: 'long-1',
+          personalisationParameters: {
+            firstName: 'Jo',
+            lastName: 'Bloggs',
+            appointmentDate: '2025-03-15',
+          },
+        },
       }
     ),
     authoringNoCampaign: TemplateFactory.createAuthoringLetterTemplate(
@@ -1720,7 +1742,7 @@ test.describe('Preview Letter template Page', () => {
         await expect(shortErrorLink).toBeHidden();
       });
 
-      test('does not show approve errors and redirects when both examples are generated', async ({
+      test('shows both short and long example errors when personalised renders have failed', async ({
         page,
       }) => {
         const previewPage = new TemplateMgmtPreviewLetterPage(

From 3cbd8dbbd2435040f55e77cf9117cb221e7baf43 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 12:40:28 +0100
Subject: [PATCH 08/12] Misc

---
 .../server-action.test.ts                     | 27 +++++++++++++
 .../CombinedLetterErrorSummary.tsx            | 38 ++++++-------------
 .../LetterRender/LetterRenderForm.tsx         |  4 +-
 .../LetterRender/LetterRenderTab.tsx          |  7 ++--
 4 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
index ae8d1a211..91680adf9 100644
--- a/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
+++ b/frontend/src/__tests__/app/preview-letter-template/server-action.test.ts
@@ -213,4 +213,31 @@ describe('submitAuthoringLetterAction', () => {
     );
     expect(redirectMock).not.toHaveBeenCalled();
   });
+
+  it('should return error when long render exists but is not RENDERED status', async () => {
+    getTemplateMock.mockResolvedValue({
+      ...AUTHORING_LETTER_TEMPLATE,
+      files: {
+        ...AUTHORING_LETTER_TEMPLATE.files,
+        shortFormRender: {
+          status: 'RENDERED' as const,
+          fileName: 'short.pdf',
+          currentVersion: 'v1',
+          pageCount: 2,
+        },
+        longFormRender: { status: 'FAILED' as const },
+      },
+    });
+
+    const formData = new FormData();
+    formData.append('templateId', AUTHORING_LETTER_TEMPLATE.id);
+    formData.append('lockNumber', '1');
+
+    const result = await submitAuthoringLetterAction({}, formData);
+
+    expect(result.errorState?.fieldErrors?.['tab-long']).toContain(
+      approveErrors.longExampleRequired
+    );
+    expect(redirectMock).not.toHaveBeenCalled();
+  });
 });
diff --git a/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx b/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx
index b3f0e6493..b7cf4ff7b 100644
--- a/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx
+++ b/frontend/src/components/molecules/LetterRender/CombinedLetterErrorSummary.tsx
@@ -6,41 +6,25 @@ import { useLetterRenderError } from '@providers/letter-render-error-provider';
 import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
 
 /**
- * Syncs the outer page-level form state into
- * CombinedLetterErrorSummary so it can be displayed and cleared independently
- * of letter render errors.
+ * Displays validation errors for both the letter rendering component and a parent form.
+ * Error state is stored in LetterRenderErrorProvider so it can be cleared when either form is submitted.
  *
- * This mechanism is intentionally NOT used for letterRenderErrorState — that should be
- * handled via the parent form submit's onClick to avoid interfering with initial mount.
+ * Must be rendered inside NHSNotifyFormProvider (for the parent action state)
+ * and LetterRenderErrorProvider.
  */
-function ParentFormErrorSyncer() {
+export function CombinedLetterErrorSummary() {
   const [state] = useNHSNotifyForm();
-  const { setParentErrorState } = useLetterRenderError();
+
+  const { setParentErrorState, parentErrorState, letterRenderErrorState } =
+    useLetterRenderError();
 
   useEffect(() => {
     setParentErrorState(state.errorState);
   }, [state, setParentErrorState]);
 
-  return null;
-}
-
-/**
- * Displays validation errors for the preview letter template page.
- * Approve template and Update preview errors occupy separate slots so each
- * button's onClick can clear only its own errors.
- *
- * Must be rendered inside NHSNotifyFormProvider (for the parent action state)
- * and LetterRenderErrorProvider.
- */
-export function CombinedLetterErrorSummary() {
-  const { parentErrorState, letterRenderErrorState } = useLetterRenderError();
-
   return (
-    <>
-      <ParentFormErrorSyncer />
-      <NhsNotifyErrorSummary
-        errorState={parentErrorState || letterRenderErrorState}
-      />
-    </>
+    <NhsNotifyErrorSummary
+      errorState={parentErrorState || letterRenderErrorState}
+    />
   );
 }
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
index e286b5d1a..a76fe10aa 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
@@ -23,7 +23,7 @@ type LetterRenderFormProps = {
 export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
   const { letterRender: copy } = content.components;
   const { isAnyTabPolling } = useLetterRenderPolling();
-  const { setParentErrorState: setApproveErrorState } = useLetterRenderError();
+  const { setParentErrorState } = useLetterRenderError();
 
   const exampleRecipients =
     tab === 'shortFormRender'
@@ -93,7 +93,7 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
         secondary
         className='nhsuk-u-margin-top-4'
         disabled={isAnyTabPolling}
-        onClick={() => setApproveErrorState(undefined)}
+        onClick={() => setParentErrorState(undefined)}
       >
         {copy.updatePreviewButton}
       </NHSNotifyButton>
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
index 8e5fe2f20..a130e5a26 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
@@ -81,12 +81,11 @@ function LetterRenderTabContent({
   hideEditActions?: boolean;
 }) {
   const [state, _dispatch, isPending] = useNHSNotifyForm();
-  const { setLetterRenderErrorState: setUpdatePreviewErrorState } =
-    useLetterRenderError();
+  const { setLetterRenderErrorState } = useLetterRenderError();
 
   useEffect(() => {
-    setUpdatePreviewErrorState(state.errorState);
-  }, [state, setUpdatePreviewErrorState]);
+    setLetterRenderErrorState(state.errorState);
+  }, [state, setLetterRenderErrorState]);
 
   return (
     <div className={`nhsuk-grid-row ${styles.tabRow}`}>

From f935271070d873b1a0ce27bdda6539f7449f623b Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Thu, 9 Apr 2026 16:06:28 +0100
Subject: [PATCH 09/12] Fix select summary link and error styling

---
 .../__snapshots__/page.test.tsx.snap          |  2 +-
 .../__snapshots__/page.test.tsx.snap          |  8 +++----
 .../__snapshots__/page.test.tsx.snap          |  8 +++----
 .../__snapshots__/page.test.tsx.snap          |  8 +++----
 .../__snapshots__/page.test.tsx.snap          |  8 +++----
 .../LetterTemplateForm.test.tsx.snap          |  6 +++---
 .../LetterRender/LetterRenderForm.test.tsx    | 12 ++++++++---
 .../LetterRender/LetterRenderTab.test.tsx     |  4 +++-
 .../LetterRender/server-action.test.ts        | 21 ++++++++++++-------
 .../atoms/FileUpload/FileUpload.tsx           | 17 +++++++++++++--
 .../components/atoms/NHSNotifyForm/Input.tsx  | 17 ++++++++++++---
 .../components/atoms/NHSNotifyForm/Select.tsx | 13 ++++++++----
 .../LetterTemplateForm/LetterTemplateForm.tsx |  5 +++--
 .../UploadDocxLetterTemplateForm/index.tsx    |  7 ++-----
 .../LetterRender/LetterRenderForm.tsx         |  8 +++++--
 .../molecules/LetterRender/server-action.ts   | 19 ++++++++++++-----
 .../components/providers/form-provider.tsx    |  2 +-
 ...mgmt-preview-letter-page.component.spec.ts |  4 ++--
 18 files changed, 111 insertions(+), 58 deletions(-)

diff --git a/frontend/src/__tests__/app/edit-template-name/[templateId]/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/edit-template-name/[templateId]/__snapshots__/page.test.tsx.snap
index fe3d1460e..5408e7009 100644
--- a/frontend/src/__tests__/app/edit-template-name/[templateId]/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/edit-template-name/[templateId]/__snapshots__/page.test.tsx.snap
@@ -266,7 +266,7 @@ exports[`valid template renders errors when blank form is submitted and error st
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
diff --git a/frontend/src/__tests__/app/upload-british-sign-language-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/upload-british-sign-language-letter-template/__snapshots__/page.test.tsx.snap
index f30d52324..63b722176 100644
--- a/frontend/src/__tests__/app/upload-british-sign-language-letter-template/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/upload-british-sign-language-letter-template/__snapshots__/page.test.tsx.snap
@@ -391,7 +391,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -467,7 +467,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
@@ -925,7 +925,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -985,7 +985,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
diff --git a/frontend/src/__tests__/app/upload-large-print-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/upload-large-print-letter-template/__snapshots__/page.test.tsx.snap
index 055a86f9c..796449057 100644
--- a/frontend/src/__tests__/app/upload-large-print-letter-template/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/upload-large-print-letter-template/__snapshots__/page.test.tsx.snap
@@ -391,7 +391,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -467,7 +467,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
@@ -925,7 +925,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -985,7 +985,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
diff --git a/frontend/src/__tests__/app/upload-other-language-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/upload-other-language-letter-template/__snapshots__/page.test.tsx.snap
index 3c4b115be..d5dbe9ddd 100644
--- a/frontend/src/__tests__/app/upload-other-language-letter-template/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/upload-other-language-letter-template/__snapshots__/page.test.tsx.snap
@@ -562,7 +562,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -812,7 +812,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
@@ -1441,7 +1441,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -1675,7 +1675,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
diff --git a/frontend/src/__tests__/app/upload-standard-english-letter-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/upload-standard-english-letter-template/__snapshots__/page.test.tsx.snap
index 21b248f90..c26af4071 100644
--- a/frontend/src/__tests__/app/upload-standard-english-letter-template/__snapshots__/page.test.tsx.snap
+++ b/frontend/src/__tests__/app/upload-standard-english-letter-template/__snapshots__/page.test.tsx.snap
@@ -391,7 +391,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -467,7 +467,7 @@ exports[`client has multiple campaign ids renders errors when blank form is subm
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
@@ -925,7 +925,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
                 Enter a template name
               </span>
               <input
-                class="nhsuk-input nhsuk-u-margin-bottom-2"
+                class="nhsuk-input nhsuk-input--error nhsuk-u-margin-bottom-2"
                 id="name"
                 name="name"
                 type="text"
@@ -985,7 +985,7 @@ exports[`client has one campaign id renders errors when blank form is submitted
               </span>
               <input
                 accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 id="file"
                 name="file"
                 type="file"
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
index 81b84ff52..52d39a0c3 100644
--- a/frontend/src/__tests__/components/forms/LetterTemplateForm/__snapshots__/LetterTemplateForm.test.tsx.snap
+++ b/frontend/src/__tests__/components/forms/LetterTemplateForm/__snapshots__/LetterTemplateForm.test.tsx.snap
@@ -421,7 +421,7 @@ exports[`Client-side validation triggers - valid form - with errors 1`] = `
               </span>
               <input
                 accept="application/pdf"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 data-testid="file-selector-letterTemplatePdf"
                 id="letterTemplatePdf"
                 name="letterTemplatePdf"
@@ -2725,7 +2725,7 @@ exports[`renders page with multiple errors 1`] = `
               </span>
               <input
                 accept="application/pdf"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 data-testid="file-selector-letterTemplatePdf"
                 id="letterTemplatePdf"
                 name="letterTemplatePdf"
@@ -2772,7 +2772,7 @@ exports[`renders page with multiple errors 1`] = `
               </span>
               <input
                 accept="text/csv"
-                class="file-upload nhsuk-input"
+                class="file-upload nhsuk-input nhsuk-input--error"
                 data-testid="file-selector-letterTemplateCsv"
                 id="letterTemplateCsv"
                 name="letterTemplateCsv"
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 0d90df364..a241cec3c 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -278,7 +278,9 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Choose example recipient'],
+            'system-personalisation-pack-id-shortFormRender': [
+              'Choose example recipient',
+            ],
           },
         },
       });
@@ -308,7 +310,9 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Choose example recipient'],
+            'system-personalisation-pack-id-longFormRender': [
+              'Choose example recipient',
+            ],
           },
         },
       });
@@ -410,7 +414,9 @@ describe('LetterRenderForm', () => {
         errorState: {
           formErrors: [],
           fieldErrors: {
-            systemPersonalisationPackId: ['Choose example recipient'],
+            'system-personalisation-pack-id-shortFormRender': [
+              'Choose example recipient',
+            ],
           },
         },
       });
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
index d517577ff..91c23f8e2 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
@@ -537,7 +537,9 @@ describe('LetterRenderTab', () => {
           errorState: {
             formErrors: [],
             fieldErrors: {
-              systemPersonalisationPackId: ['Select an example recipient'],
+              'system-personalisation-pack-id-shortFormRender': [
+                'Select an example recipient',
+              ],
             },
           },
         })
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts b/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
index a2930e0c8..15b9a3a9b 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
+++ b/frontend/src/__tests__/components/molecules/LetterRender/server-action.test.ts
@@ -146,10 +146,12 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.errorState?.fieldErrors).toHaveProperty(
-      'systemPersonalisationPackId'
+      'system-personalisation-pack-id-shortFormRender'
     );
     expect(
-      result.errorState?.fieldErrors?.systemPersonalisationPackId
+      result.errorState?.fieldErrors?.[
+        'system-personalisation-pack-id-shortFormRender'
+      ]
     ).toContain('Choose example recipient');
     expect(result.fields?.systemPersonalisationPackId).toBe('');
   });
@@ -163,7 +165,7 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.errorState?.fieldErrors).toHaveProperty(
-      'systemPersonalisationPackId'
+      'system-personalisation-pack-id-shortFormRender'
     );
   });
 
@@ -175,14 +177,14 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.errorState?.fieldErrors).toHaveProperty(
-      'systemPersonalisationPackId'
+      'system-personalisation-pack-id-shortFormRender'
     );
     expect(result.fields?.systemPersonalisationPackId).toBe(
       'invalid-recipient-id'
     );
   });
 
-  it('error key for recipient is the same regardless of tab', async () => {
+  it('error key for recipient includes the tab value', async () => {
     const formData = buildFormData({
       systemPersonalisationPackId: '',
       tab: 'longFormRender',
@@ -191,7 +193,10 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.errorState?.fieldErrors).toHaveProperty(
-      'systemPersonalisationPackId'
+      'system-personalisation-pack-id-longFormRender'
+    );
+    expect(result.errorState?.fieldErrors).not.toHaveProperty(
+      'system-personalisation-pack-id-shortFormRender'
     );
   });
 
@@ -204,7 +209,7 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.errorState?.fieldErrors).toHaveProperty(
-      'systemPersonalisationPackId'
+      'system-personalisation-pack-id-shortFormRender'
     );
     expect(result.fields?.systemPersonalisationPackId).toBe('long-1');
   });
@@ -253,7 +258,7 @@ describe('updateLetterPreview', () => {
     const result = await updateLetterPreview({}, formData);
 
     expect(result.errorState?.fieldErrors).toHaveProperty(
-      'systemPersonalisationPackId'
+      'system-personalisation-pack-id-shortFormRender'
     );
     expect(result.errorState?.fieldErrors).toHaveProperty(
       'custom-appointmentDate-shortFormRender'
diff --git a/frontend/src/components/atoms/FileUpload/FileUpload.tsx b/frontend/src/components/atoms/FileUpload/FileUpload.tsx
index eb44d3c1f..d93c1c238 100644
--- a/frontend/src/components/atoms/FileUpload/FileUpload.tsx
+++ b/frontend/src/components/atoms/FileUpload/FileUpload.tsx
@@ -2,19 +2,32 @@ import classNames from 'classnames';
 import { ErrorMessage, HintText, Label } from 'nhsuk-react-components';
 import React, { HTMLProps } from 'react';
 import styles from './FileUpload.module.scss';
+import { useNHSNotifyForm } from '@providers/form-provider';
 
 interface FileUploadProps extends HTMLProps<HTMLDivElement> {
+  id: string;
   error?: string;
   hint?: string;
 }
 
 export function FileUploadInput({
   className,
+  id,
   ...props
-}: Omit<HTMLProps<HTMLInputElement>, 'type'>) {
+}: Omit<HTMLProps<HTMLInputElement>, 'type'> & { id: string; name: string }) {
+  const [state] = useNHSNotifyForm();
+
+  const error = Boolean(state.errorState?.fieldErrors?.[id]?.length);
+
   return (
     <input
-      className={classNames(styles['file-upload'], 'nhsuk-input', className)}
+      className={classNames(
+        styles['file-upload'],
+        'nhsuk-input',
+        { 'nhsuk-input--error': error },
+        className
+      )}
+      id={id}
       type='file'
       {...props}
     />
diff --git a/frontend/src/components/atoms/NHSNotifyForm/Input.tsx b/frontend/src/components/atoms/NHSNotifyForm/Input.tsx
index 5b07c1787..2771028f0 100644
--- a/frontend/src/components/atoms/NHSNotifyForm/Input.tsx
+++ b/frontend/src/components/atoms/NHSNotifyForm/Input.tsx
@@ -6,16 +6,27 @@ import { useNHSNotifyForm } from '@providers/form-provider';
 
 export function NHSNotifyFormInput({
   className,
+  id,
   name,
   ...props
-}: Omit<HTMLProps<HTMLInputElement>, 'defaultValue'>) {
+}: Omit<HTMLProps<HTMLInputElement>, 'defaultValue'> & {
+  id: string;
+  name: string;
+}) {
   const [state] = useNHSNotifyForm();
 
+  const error = Boolean(state.errorState?.fieldErrors?.[id]?.length);
+
   return (
     <input
+      id={id}
       name={name}
-      className={classNames('nhsuk-input', className)}
-      defaultValue={name && state.fields?.[name]}
+      className={classNames(
+        'nhsuk-input',
+        { 'nhsuk-input--error': error },
+        className
+      )}
+      defaultValue={state.fields?.[name]}
       {...props}
     />
   );
diff --git a/frontend/src/components/atoms/NHSNotifyForm/Select.tsx b/frontend/src/components/atoms/NHSNotifyForm/Select.tsx
index 66bc80ced..80b5c198a 100644
--- a/frontend/src/components/atoms/NHSNotifyForm/Select.tsx
+++ b/frontend/src/components/atoms/NHSNotifyForm/Select.tsx
@@ -7,12 +7,16 @@ import { useNHSNotifyForm } from '@providers/form-provider';
 export function NHSNotifyFormSelect({
   children,
   className,
+  id,
   name,
   ...props
-}: Omit<HTMLProps<HTMLSelectElement>, 'defaultValue'>) {
+}: Omit<HTMLProps<HTMLSelectElement>, 'defaultValue'> & {
+  id: string;
+  name: string;
+}) {
   const [state] = useNHSNotifyForm();
 
-  const error = Boolean(name && state.errorState?.fieldErrors?.[name]?.length);
+  const error = Boolean(state.errorState?.fieldErrors?.[id]?.length);
 
   return (
     <select
@@ -23,8 +27,9 @@ export function NHSNotifyFormSelect({
         },
         className
       )}
-      defaultValue={name && state.fields?.[name]}
-      key={name && state.fields?.[name]}
+      defaultValue={state.fields?.[name]}
+      key={state.fields?.[name]}
+      id={id}
       name={name}
       {...props}
     >
diff --git a/frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx b/frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx
index 985b54df2..71eb91f3a 100644
--- a/frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx
+++ b/frontend/src/components/forms/LetterTemplateForm/LetterTemplateForm.tsx
@@ -31,6 +31,7 @@ import { validate } from '@utils/client-validate-form';
 import type { Language } from 'nhs-notify-web-template-management-types';
 import Link from 'next/link';
 import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
+import { FormContext } from '@providers/form-provider';
 
 export const LetterTemplateForm: FC<
   PageComponentProps<UploadLetterTemplate> & {
@@ -107,7 +108,7 @@ export const LetterTemplateForm: FC<
   ];
 
   return (
-    <>
+    <FormContext.Provider value={[{ errorState }, action, false]}>
       <Link href='/choose-a-template-type' passHref legacyBehavior>
         <NotifyBackLink>{backLinkText}</NotifyBackLink>
       </Link>
@@ -298,6 +299,6 @@ export const LetterTemplateForm: FC<
           </div>
         </div>
       </NHSNotifyMain>
-    </>
+    </FormContext.Provider>
   );
 };
diff --git a/frontend/src/components/forms/UploadDocxLetterTemplateForm/index.tsx b/frontend/src/components/forms/UploadDocxLetterTemplateForm/index.tsx
index c38981396..b9a74549d 100644
--- a/frontend/src/components/forms/UploadDocxLetterTemplateForm/index.tsx
+++ b/frontend/src/components/forms/UploadDocxLetterTemplateForm/index.tsx
@@ -18,8 +18,6 @@ import { useNHSNotifyForm } from '@providers/form-provider';
 const content = copy.components.uploadDocxLetterTemplateForm;
 
 export function NameField() {
-  const [state] = useNHSNotifyForm();
-
   return (
     <NHSNotifyForm.FormGroup className='nhsuk-u-margin-bottom-6' htmlFor='name'>
       <Label size='s' htmlFor='name'>
@@ -29,12 +27,11 @@ export function NameField() {
 
       <TemplateNameGuidance className='nhsuk-u-margin-top-3' />
       <NHSNotifyForm.ErrorMessage htmlFor='name' />
-      <input
+      <NHSNotifyForm.Input
         type='text'
         id='name'
         name='name'
-        className='nhsuk-input nhsuk-u-margin-bottom-2'
-        defaultValue={state.fields?.name}
+        className='nhsuk-u-margin-bottom-2'
       />
     </NHSNotifyForm.FormGroup>
   );
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
index a76fe10aa..8f2116592 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderForm.tsx
@@ -38,11 +38,15 @@ export function LetterRenderForm({ template, tab }: LetterRenderFormProps) {
       <h3 className='nhsuk-heading-s'>{copy.pdsSection.heading}</h3>
       <p className='nhsuk-body-s'>{copy.pdsSection.hint}</p>
 
-      <NHSNotifyForm.FormGroup htmlFor='systemPersonalisationPackId'>
+      <NHSNotifyForm.FormGroup
+        htmlFor={`system-personalisation-pack-id-${tab}`}
+      >
         <Label size='s' htmlFor={`system-personalisation-pack-id-${tab}`}>
           {copy.pdsSection.recipientLabel}
         </Label>
-        <NHSNotifyForm.ErrorMessage htmlFor='systemPersonalisationPackId' />
+        <NHSNotifyForm.ErrorMessage
+          htmlFor={`system-personalisation-pack-id-${tab}`}
+        />
         <NHSNotifyForm.Select
           id={`system-personalisation-pack-id-${tab}`}
           name='systemPersonalisationPackId'
diff --git a/frontend/src/components/molecules/LetterRender/server-action.ts b/frontend/src/components/molecules/LetterRender/server-action.ts
index 06eadf0b9..26f20194e 100644
--- a/frontend/src/components/molecules/LetterRender/server-action.ts
+++ b/frontend/src/components/molecules/LetterRender/server-action.ts
@@ -27,6 +27,9 @@ const $FormSchema = z.object({
   tab: z.enum(['longFormRender', 'shortFormRender']),
 });
 
+const systemPackIdErrorKey = (tab?: string) =>
+  `system-personalisation-pack-id-${tab}`;
+
 export async function updateLetterPreview(
   _: FormState,
   formData: FormData
@@ -34,13 +37,14 @@ export async function updateLetterPreview(
   const result = $FormSchema.safeParse(Object.fromEntries(formData.entries()));
 
   const fields = formDataToFormStateFields(formData);
+  const { tab } = fields;
 
   const personalisationFieldErrors: Record<string, string[]> = {};
 
   for (const [key, value] of Object.entries(fields)) {
     if (key.startsWith(PERSONALISATION_FORMDATA_PREFIX) && !value) {
       const fieldName = key.slice(PERSONALISATION_FORMDATA_PREFIX.length);
-      personalisationFieldErrors[`custom-${fieldName}-${fields.tab}`] = [
+      personalisationFieldErrors[`custom-${fieldName}-${tab}`] = [
         interpolate(customSection.error.required, { field: fieldName }),
       ];
     }
@@ -48,12 +52,18 @@ export async function updateLetterPreview(
 
   if (result.error) {
     const baseError = z.flattenError(result.error);
+    const { systemPersonalisationPackId, ...otherFieldErrors } =
+      baseError.fieldErrors;
 
     return {
       errorState: {
         ...baseError,
         fieldErrors: {
-          ...baseError.fieldErrors,
+          // need to convert to field id so summary link works
+          ...(systemPersonalisationPackId && {
+            [systemPackIdErrorKey(tab)]: systemPersonalisationPackId,
+          }),
+          ...otherFieldErrors,
           ...personalisationFieldErrors,
         },
       },
@@ -70,8 +80,7 @@ export async function updateLetterPreview(
     };
   }
 
-  const { templateId, systemPersonalisationPackId, tab, lockNumber } =
-    result.data;
+  const { templateId, systemPersonalisationPackId, lockNumber } = result.data;
 
   const customPersonalisation = Object.fromEntries(
     Object.entries(fields).flatMap(([k, v]) =>
@@ -91,7 +100,7 @@ export async function updateLetterPreview(
     return {
       errorState: {
         fieldErrors: {
-          systemPersonalisationPackId: [pdsSection.error.invalid],
+          [systemPackIdErrorKey(tab)]: [pdsSection.error.invalid],
         },
       },
       fields,
diff --git a/frontend/src/components/providers/form-provider.tsx b/frontend/src/components/providers/form-provider.tsx
index 591fc72e5..9d53d602a 100644
--- a/frontend/src/components/providers/form-provider.tsx
+++ b/frontend/src/components/providers/form-provider.tsx
@@ -12,7 +12,7 @@ type NHSNotifyFormActionState = ReturnType<
   typeof useActionState<FormState, FormData>
 >;
 
-const FormContext = createContext<NHSNotifyFormActionState | null>(null);
+export const FormContext = createContext<NHSNotifyFormActionState | null>(null);
 
 export function useNHSNotifyForm() {
   const context = useContext(FormContext);
diff --git a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
index 48666fd36..2aae3382e 100644
--- a/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
+++ b/tests/test-team/template-mgmt-component-tests/letter/template-mgmt-preview-letter-page.component.spec.ts
@@ -1512,7 +1512,7 @@ test.describe('Preview Letter template Page', () => {
         });
         await expect(summaryLink).toHaveAttribute(
           'href',
-          '#systemPersonalisationPackId'
+          '#system-personalisation-pack-id-shortFormRender'
         );
 
         await expect(
@@ -1552,7 +1552,7 @@ test.describe('Preview Letter template Page', () => {
         });
         await expect(summaryLink).toHaveAttribute(
           'href',
-          '#systemPersonalisationPackId'
+          '#system-personalisation-pack-id-longFormRender'
         );
 
         await expect(

From 87d43ec2bd1edb07f1a798445108d845ae459e01 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Fri, 10 Apr 2026 10:18:06 +0100
Subject: [PATCH 10/12] test tidy

---
 .../LetterRender/LetterRenderForm.test.tsx          | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index a241cec3c..76f550be8 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -22,7 +22,12 @@ jest.mock('@providers/letter-render-polling-provider', () => {
 });
 
 jest.mock('@providers/letter-render-error-provider', () => ({
-  useLetterRenderError: jest.fn(),
+  useLetterRenderError: jest.fn().mockReturnValue({
+    parentErrorState: undefined,
+    setParentErrorState: jest.fn(),
+    letterRenderErrorState: undefined,
+    setLetterRenderErrorState: jest.fn(),
+  }),
 }));
 
 const baseTemplate: AuthoringLetterTemplate = {
@@ -84,12 +89,6 @@ function renderWithProvider(
 describe('LetterRenderForm', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    jest.mocked(useLetterRenderError).mockReturnValue({
-      parentErrorState: undefined,
-      setParentErrorState: jest.fn(),
-      letterRenderErrorState: undefined,
-      setLetterRenderErrorState: jest.fn(),
-    });
   });
 
   describe('PDS personalisation section', () => {

From 5244f4919d4b1dd2c62c2126b2c9b0a6570b7db8 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Fri, 10 Apr 2026 12:35:00 +0100
Subject: [PATCH 11/12] Remove form elements from letter rendering when
 read-only

---
 .../LetterRender/LetterRenderForm.test.tsx    |   1 -
 .../LetterRender/LetterRenderTab.test.tsx     |  91 +++++++++++++++-
 .../letter-render-error-provider.test.tsx     |  20 ++--
 .../[templateId]/page.tsx                     |  44 ++++----
 .../LetterRender/LetterRenderTab.tsx          | 103 +++++++++++-------
 5 files changed, 182 insertions(+), 77 deletions(-)

diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
index 76f550be8..cdb160172 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderForm.test.tsx
@@ -5,7 +5,6 @@ import {
   LetterRenderPollingProvider,
   useLetterRenderPolling,
 } from '@providers/letter-render-polling-provider';
-import { useLetterRenderError } from '@providers/letter-render-error-provider';
 import type {
   AuthoringLetterTemplate,
   FormState,
diff --git a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
index 91c23f8e2..b476ee583 100644
--- a/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
+++ b/frontend/src/__tests__/components/molecules/LetterRender/LetterRenderTab.test.tsx
@@ -27,14 +27,14 @@ jest.mock('@utils/get-base-path', () => ({
 
 const mockUpdateLetterPreview = jest.mocked(updateLetterPreview);
 
-const mockSetUpdatePreviewErrorState = jest.fn();
+const mockSetLetterRenderErrorState = jest.fn();
 
 beforeEach(() => {
   jest.mocked(useLetterRenderError).mockReturnValue({
     parentErrorState: undefined,
     setParentErrorState: jest.fn(),
     letterRenderErrorState: undefined,
-    setLetterRenderErrorState: mockSetUpdatePreviewErrorState,
+    setLetterRenderErrorState: mockSetLetterRenderErrorState,
   });
 });
 
@@ -88,7 +88,7 @@ describe('LetterRenderTab', () => {
     mockUpdateLetterPreview.mockResolvedValue(createMockState());
   });
 
-  describe('buildPdfUrl', () => {
+  describe('derivePdfUrl', () => {
     it('builds URL from initialRender when no variant render exists', () => {
       render(
         <LetterRenderTab template={baseTemplate} tab='shortFormRender' />,
@@ -264,7 +264,7 @@ describe('LetterRenderTab', () => {
     });
   });
 
-  describe('getInitialState', () => {
+  describe('deriveFormState', () => {
     it('uses initial empty state when no variant render exists', () => {
       render(
         <LetterRenderTab template={baseTemplate} tab='shortFormRender' />,
@@ -565,6 +565,32 @@ describe('LetterRenderTab', () => {
         await screen.findByText('Select an example recipient')
       ).toBeInTheDocument();
     });
+
+    it('forwards error state to LetterRenderErrorProvider after submission', async () => {
+      const errorState = {
+        formErrors: [],
+        fieldErrors: {
+          'system-personalisation-pack-id-shortFormRender': [
+            'Select an example recipient',
+          ],
+        },
+      };
+
+      mockUpdateLetterPreview.mockResolvedValue(
+        createMockState({ errorState })
+      );
+
+      render(
+        <LetterRenderTab template={baseTemplate} tab='shortFormRender' />,
+        { wrapper: Provider }
+      );
+
+      fireEvent.click(screen.getByRole('button', { name: 'Update preview' }));
+
+      await waitFor(() => {
+        expect(mockSetLetterRenderErrorState).toHaveBeenCalledWith(errorState);
+      });
+    });
   });
 
   describe('snapshots', () => {
@@ -586,4 +612,61 @@ describe('LetterRenderTab', () => {
       expect(asFragment()).toMatchSnapshot();
     });
   });
+
+  describe('hideEditActions', () => {
+    it('renders details panel instead of form', () => {
+      render(
+        <LetterRenderTab
+          template={baseTemplate}
+          tab='shortFormRender'
+          hideEditActions
+        />,
+        { wrapper: Provider }
+      );
+
+      expect(
+        screen.getByTitle('Letter preview - short examples')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('PDS personalisation fields')
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('combobox', { name: 'Example recipient' })
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'Update preview' })
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders iframe with correct URL', () => {
+      render(
+        <LetterRenderTab
+          template={baseTemplate}
+          tab='shortFormRender'
+          hideEditActions
+        />,
+        { wrapper: Provider }
+      );
+
+      expect(
+        screen.getByTitle('Letter preview - short examples')
+      ).toHaveAttribute(
+        'src',
+        '/templates/files/client-456/renders/template-123/initial.pdf'
+      );
+    });
+
+    it('does not call useLetterRenderError', () => {
+      render(
+        <LetterRenderTab
+          template={baseTemplate}
+          tab='shortFormRender'
+          hideEditActions
+        />,
+        { wrapper: Provider }
+      );
+
+      expect(useLetterRenderError).not.toHaveBeenCalled();
+    });
+  });
 });
diff --git a/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx b/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx
index 4598947a5..d97d50cf2 100644
--- a/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx
+++ b/frontend/src/__tests__/components/providers/letter-render-error-provider.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import {
   LetterRenderErrorProvider,
   useLetterRenderError,
@@ -6,7 +6,7 @@ import {
 
 function TestConsumer() {
   useLetterRenderError();
-  return null;
+  return <div>child content</div>;
 }
 
 describe('useLetterRenderError', () => {
@@ -18,13 +18,13 @@ describe('useLetterRenderError', () => {
 });
 
 describe('LetterRenderErrorProvider', () => {
-  it('renders children without error', () => {
-    expect(() =>
-      render(
-        <LetterRenderErrorProvider>
-          <TestConsumer />
-        </LetterRenderErrorProvider>
-      )
-    ).not.toThrow();
+  it('renders children', () => {
+    render(
+      <LetterRenderErrorProvider>
+        <TestConsumer />
+      </LetterRenderErrorProvider>
+    );
+
+    expect(screen.getByText('child content')).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
index c6485f6b7..02d33154c 100644
--- a/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
+++ b/frontend/src/app/preview-approved-letter-template/[templateId]/page.tsx
@@ -12,8 +12,6 @@ import { NHSNotifyBackLink } from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
 import { LetterRender } from '@molecules/LetterRender';
 import PreviewTemplateDetailsAuthoringLetter from '@molecules/PreviewTemplateDetails/PreviewTemplateDetailsAuthoringLetter';
 import { getLetterVariantById, getTemplate } from '@utils/form-actions';
-import { LetterRenderPollingProvider } from '@providers/letter-render-polling-provider';
-import { LetterRenderErrorProvider } from '@providers/letter-render-error-provider';
 import content from '@content/content';
 import { NHSNotifyContainer } from '@layouts/container/container';
 
@@ -57,29 +55,25 @@ export default async function PreviewApprovedLetterTemplatePage({
 
   return (
     <NHSNotifyContainer fullWidth>
-      <LetterRenderPollingProvider>
-        <LetterRenderErrorProvider>
-          <NHSNotifyContainer>
-            <NHSNotifyBackLink href={links.messageTemplates}>
-              {backLinkText}
-            </NHSNotifyBackLink>
-          </NHSNotifyContainer>
-          <NHSNotifyMain>
-            <NHSNotifyContainer>
-              <div className='nhsuk-grid-row'>
-                <div className='nhsuk-grid-column-full'>
-                  <PreviewTemplateDetailsAuthoringLetter
-                    template={validatedTemplate}
-                    letterVariant={letterVariant}
-                    hideEditActions
-                  />
-                </div>
-              </div>
-            </NHSNotifyContainer>
-            <LetterRender template={validatedTemplate} hideEditActions={true} />
-          </NHSNotifyMain>
-        </LetterRenderErrorProvider>
-      </LetterRenderPollingProvider>
+      <NHSNotifyContainer>
+        <NHSNotifyBackLink href={links.messageTemplates}>
+          {backLinkText}
+        </NHSNotifyBackLink>
+      </NHSNotifyContainer>
+      <NHSNotifyMain>
+        <NHSNotifyContainer>
+          <div className='nhsuk-grid-row'>
+            <div className='nhsuk-grid-column-full'>
+              <PreviewTemplateDetailsAuthoringLetter
+                template={validatedTemplate}
+                letterVariant={letterVariant}
+                hideEditActions
+              />
+            </div>
+          </div>
+        </NHSNotifyContainer>
+        <LetterRender template={validatedTemplate} hideEditActions={true} />
+      </NHSNotifyMain>
     </NHSNotifyContainer>
   );
 }
diff --git a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
index a130e5a26..3f03c981e 100644
--- a/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
+++ b/frontend/src/components/molecules/LetterRender/LetterRenderTab.tsx
@@ -20,7 +20,7 @@ import { PERSONALISATION_FORMDATA_PREFIX } from '@utils/constants';
 import content from '@content/content';
 import { buildLetterRenderUrl } from '@utils/letter-render-url';
 import { useLetterRenderError } from '@providers/letter-render-error-provider';
-import { useEffect } from 'react';
+import { useEffect, type ReactNode } from 'react';
 
 const { loadingText } = content.components.letterRender;
 
@@ -69,16 +69,31 @@ function deriveFormState(
   };
 }
 
-function LetterRenderTabContent({
+function LetterRenderTabLayout({
+  leftColumn,
+  rightColumn,
+}: {
+  leftColumn: ReactNode;
+  rightColumn: ReactNode;
+}) {
+  return (
+    <div className={`nhsuk-grid-row ${styles.tabRow}`}>
+      <div className='nhsuk-grid-column-one-third'>{leftColumn}</div>
+      <div className={`nhsuk-grid-column-two-thirds ${styles.iframeColumn}`}>
+        {rightColumn}
+      </div>
+    </div>
+  );
+}
+
+function LetterRenderTabFormInner({
   template,
   tab,
   pdfUrl,
-  hideEditActions,
 }: {
   template: AuthoringLetterTemplate;
   tab: PersonalisedRenderKey;
   pdfUrl: string | null;
-  hideEditActions?: boolean;
 }) {
   const [state, _dispatch, isPending] = useNHSNotifyForm();
   const { setLetterRenderErrorState } = useLetterRenderError();
@@ -88,40 +103,30 @@ function LetterRenderTabContent({
   }, [state, setLetterRenderErrorState]);
 
   return (
-    <div className={`nhsuk-grid-row ${styles.tabRow}`}>
-      <div className='nhsuk-grid-column-one-third'>
-        {hideEditActions ? (
-          <LetterRenderDetails template={template} tab={tab} />
-        ) : (
-          <LetterRenderForm template={template} tab={tab} />
-        )}
-      </div>
-
-      <div className={`nhsuk-grid-column-two-thirds ${styles.iframeColumn}`}>
-        {hideEditActions ? (
+    <LetterRenderTabLayout
+      leftColumn={<LetterRenderForm template={template} tab={tab} />}
+      rightColumn={
+        <PollLetterRender
+          template={template}
+          mode={tab}
+          loadingElement={<p>{loadingText}</p>}
+          forcePolling={isPending}
+        >
           <LetterRenderIframe tab={tab} pdfUrl={pdfUrl} />
-        ) : (
-          <PollLetterRender
-            template={template}
-            mode={tab}
-            loadingElement={<p>{loadingText}</p>}
-            forcePolling={isPending}
-          >
-            <LetterRenderIframe tab={tab} pdfUrl={pdfUrl} />
-          </PollLetterRender>
-        )}
-      </div>
-    </div>
+        </PollLetterRender>
+      }
+    />
   );
 }
 
-export function LetterRenderTab({
+function LetterRenderTabForm({
   template,
   tab,
-  hideEditActions,
-}: LetterRenderTabProps) {
+}: {
+  template: AuthoringLetterTemplate;
+  tab: PersonalisedRenderKey;
+}) {
   const personalisedRender = template.files[tab];
-
   const formState = deriveFormState(template, personalisedRender);
   const pdfUrl = derivePdfUrl(template, personalisedRender);
 
@@ -130,12 +135,36 @@ export function LetterRenderTab({
       initialState={formState}
       serverAction={updateLetterPreview}
     >
-      <LetterRenderTabContent
-        template={template}
-        tab={tab}
-        pdfUrl={pdfUrl}
-        hideEditActions={hideEditActions}
-      />
+      <LetterRenderTabFormInner template={template} tab={tab} pdfUrl={pdfUrl} />
     </NHSNotifyFormProvider>
   );
 }
+
+function LetterRenderTabReadOnly({
+  template,
+  tab,
+}: {
+  template: AuthoringLetterTemplate;
+  tab: PersonalisedRenderKey;
+}) {
+  const pdfUrl = derivePdfUrl(template, template.files[tab]);
+
+  return (
+    <LetterRenderTabLayout
+      leftColumn={<LetterRenderDetails template={template} tab={tab} />}
+      rightColumn={<LetterRenderIframe tab={tab} pdfUrl={pdfUrl} />}
+    />
+  );
+}
+
+export function LetterRenderTab({
+  template,
+  tab,
+  hideEditActions,
+}: LetterRenderTabProps) {
+  if (hideEditActions) {
+    return <LetterRenderTabReadOnly template={template} tab={tab} />;
+  }
+
+  return <LetterRenderTabForm template={template} tab={tab} />;
+}

From 97f2bac42ad705cc451a640dd42aa3599d81ad13 Mon Sep 17 00:00:00 2001
From: Clare Jones <clare.jones75@nhs.net>
Date: Fri, 10 Apr 2026 14:18:26 +0100
Subject: [PATCH 12/12] Stray whitespace change

---
 .../components/providers/letter-render-polling-provider.tsx  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/frontend/src/components/providers/letter-render-polling-provider.tsx b/frontend/src/components/providers/letter-render-polling-provider.tsx
index 738eb717b..240f692b2 100644
--- a/frontend/src/components/providers/letter-render-polling-provider.tsx
+++ b/frontend/src/components/providers/letter-render-polling-provider.tsx
@@ -43,10 +43,7 @@ export function LetterRenderPollingProvider({ children }: PropsWithChildren) {
 
   return (
     <LetterRenderPollingContext.Provider
-      value={{
-        isAnyTabPolling,
-        registerPolling,
-      }}
+      value={{ isAnyTabPolling, registerPolling }}
     >
       {children}
     </LetterRenderPollingContext.Provider>