Skip to content

CCM-11965: letter template preview content changes #740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
harrim91 merged 7 commits into from
Oct 24, 2025
Merged

CCM-11965: letter template preview content changes #740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6077faa
CCM-11965: preview letter template content changes
harrim91 Oct 20, 2025
1759653
Merge branch 'main' into feature/CCM-11965_letter-template-preview-co…
harrim91 Oct 20, 2025
a17bc63
Merge branch 'main' into feature/CCM-11965_letter-template-preview-co…
harrim91 Oct 20, 2025
1903afe
CCM-11965: lockfile
harrim91 Oct 22, 2025
7bdca5b
CCM-11965: fix flakey test
harrim91 Oct 22, 2025
3c18a56
CCM-11965: lockfile
harrim91 Oct 24, 2025
faaafe7
Merge branch 'main' into feature/CCM-11965_letter-template-preview-co…
harrim91 Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions frontend/src/__tests__/app/message-plans/create-message-plan/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,6 @@ describe('CreateMessagePlanPage', () => {

await user.click(screen.getByTestId('submit-button'));

expect(container.asFragment()).toMatchSnapshot();

expect(createMessagePlanServerAction).toHaveBeenCalledTimes(1);
expect(createMessagePlanServerAction).toHaveBeenCalledWith(
{},
Expand All @@ -86,13 +84,14 @@ describe('CreateMessagePlanPage', () => {
name: 'My Message Plan',
});

const errorSummaryHeading = await screen.getByTestId('error-summary');

// "error-summary" test id targets the nested heading rather than the top level of the error summary
// error-summary" test id targets the nested heading rather than the top level of the error summary
// so we need to assert against the parent element
await waitFor(() => {
await waitFor(async () => {
const errorSummaryHeading = await screen.getByTestId('error-summary');
expect(errorSummaryHeading.parentElement).toHaveFocus();
});

expect(container.asFragment()).toMatchSnapshot();
});

test('redirects when there are no campaignIds', async () => {
Expand Down
39 changes: 39 additions & 0 deletions frontend/src/__tests__/components/organisms/PreviewLetterTemplate.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import { PreviewLetterTemplate } from '@organisms/PreviewLetterTemplate/PreviewLetterTemplate';
import { render } from '@testing-library/react';
import { isRightToLeft } from 'nhs-notify-web-template-management-utils/enum';
import { useFeatureFlags } from '@providers/client-config-provider';

jest.mock('nhs-notify-web-template-management-utils/enum');
jest.mock('@providers/client-config-provider');

const isRightToLeftMock = jest.mocked(isRightToLeft);

describe('PreviewLetterTemplate component', () => {
beforeEach(() => {
jest.resetAllMocks();
isRightToLeftMock.mockReturnValueOnce(false);
jest.mocked(useFeatureFlags).mockReturnValue({ routing: false });
});

it('matches snapshot when template status is VIRUS_SCAN_FAILED', () => {
Expand Down Expand Up @@ -129,6 +132,42 @@ describe('PreviewLetterTemplate component', () => {
expect(container.asFragment()).toMatchSnapshot();
});

it('matches snapshot when template status is PROOF_AVAILABLE and routing flag is enabled', () => {
jest.mocked(useFeatureFlags).mockReturnValue({ routing: true });
const container = render(
<PreviewLetterTemplate
template={{
id: '2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE',
clientId: 'client-id',
name: 'letter',
templateType: 'LETTER',
templateStatus: 'PROOF_AVAILABLE',
letterType: 'x1',
language: 'en',
files: {
pdfTemplate: {
fileName: 'file.pdf',
currentVersion: 'b',
virusScanStatus: 'PASSED',
},
proofs: {
'your-proof.pdf': {
fileName: 'your-proof.pdf',
virusScanStatus: 'PASSED',
supplier: 'MBA',
},
},
},
proofingEnabled: true,
createdAt: '2025-04-02T09:33:25.729Z',
updatedAt: '2025-04-02T09:33:25.729Z',
}}
/>
);

expect(container.asFragment()).toMatchSnapshot();
});

it('matches snapshot when template status is NOT_YET_SUBMITTED', () => {
const container = render(
<PreviewLetterTemplate
Expand Down
254 changes: 254 additions & 0 deletions ...tend/src/__tests__/components/organisms/__snapshots__/PreviewLetterTemplate.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1004,6 +1004,260 @@ exports[`PreviewLetterTemplate component matches snapshot when template status i
</DocumentFragment>
`;

exports[`PreviewLetterTemplate component matches snapshot when template status is PROOF_AVAILABLE and routing flag is enabled 1`] = `
<DocumentFragment>
<a
class="nhsuk-back-link"
href="/message-templates"
>
Back to all templates
</a>
<main
class="nhsuk-main-wrapper"
id="maincontent"
role="main"
>
<div
class="nhsuk-grid-row"
>
<div
class="nhsuk-grid-column-full"
>
<div
class="nhsuk-u-reading-width"
>
<span
class="nhsuk-caption-l"
>
Template
</span>
<h1
class="preview__heading"
data-testid="preview-message__heading"
>
letter
</h1>
</div>
<div
class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
>
<dl
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
>
<div
class="nhsuk-summary-list__row"
>
<dt
class="nhsuk-summary-list__key"
>
Template ID
</dt>
<dd
class="nhsuk-summary-list__value"
>
2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE
</dd>
</div>
<div
class="nhsuk-summary-list__row"
>
<dt
class="nhsuk-summary-list__key"
>
Type
</dt>
<dd
class="nhsuk-summary-list__value"
/>
</div>
<div
class="nhsuk-summary-list__row"
>
<dt
class="nhsuk-summary-list__key"
>
Status
</dt>
<dd
class="nhsuk-summary-list__value"
>
<strong
class="nhsuk-tag"
data-test-id="status-tag-proof-available"
/>
</dd>
</div>
<div
class="nhsuk-summary-list__row"
>
<dt
class="nhsuk-summary-list__key"
>
Template file
</dt>
<dd
class="nhsuk-summary-list__value"
>
<div
class="container"
>
<svg
aria-hidden="true"
class="icon"
fill="none"
height="26"
viewBox="0 0 20 26"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
fill="#4C6272"
/>
</svg>
<p
class="text"
>
file.pdf
</p>
</div>
</dd>
</div>
</dl>
<dl
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
>
<div
class="nhsuk-summary-list__row"
>
<dt
class="nhsuk-summary-list__key"
>
Template proof files
</dt>
<dd
class="nhsuk-summary-list__value"
>
<ul
class="proofs"
>
<li>
<a
data-testid="proof-link_your-proof.pdf"
href="/templates/files/client-id/proofs/2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE/your-proof.pdf"
rel="noopener noreferrer"
target="_blank"
>
<div
class="container"
>
<svg
aria-hidden="true"
class="icon"
fill="none"
height="26"
viewBox="0 0 20 26"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
fill="#4C6272"
/>
</svg>
<p
class="text"
>
your-proof.pdf
</p>
</div>
</a>
</li>
</ul>
</dd>
</div>
</dl>
</div>
<section
class="nhsuk-u-reading-width"
>
<details
class="nhsuk-details"
>
<summary
class="nhsuk-details__summary"
>
<span
class="nhsuk-details__summary-text"
>
If this proof does not match the template
</span>
</summary>
<div
class="nhsuk-details__text"
>
<p>
If the content or formatting of your template proof does not match the template you originally provided, contact us to describe what's wrong with the template proof.
</p>
<p>
We'll update the template proof and email it to you.
</p>
<p>
It can take 5 to 10 working days to get another proof of your template.
</p>
<p>
If any personalisation does not appear how you expect, you may need to check if you're using the correct personalisation fields or if your example data is correct.
</p>
</div>
</details>
<details
class="nhsuk-details"
>
<summary
class="nhsuk-details__summary"
>
<span
class="nhsuk-details__summary-text"
>
If you need to edit the template
</span>
</summary>
<div
class="nhsuk-details__text"
>
<p>
Edit your original template on your computer, convert it to PDF and then upload as a new template.
</p>
</div>
</details>
<p>
If you're happy with this template proof, approve it. Then your template will be ready to add to a message plan.
</p>
</section>
<a
aria-disabled="false"
class="nhsuk-button"
data-testid="preview-letter-template-cta"
draggable="false"
href="/templates/submit-letter-template/2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE"
id="preview-letter-template-cta"
role="button"
>
Approve template proof
</a>
<p>
<a
href="/message-templates"
>
Back to all templates
</a>
</p>
</div>
</div>
</main>
</DocumentFragment>
`;

exports[`PreviewLetterTemplate component matches snapshot when template status is VALIDATION_FAILED 1`] = `
<DocumentFragment>
<a
Expand Down
Loading
Loading