Skip to content

CCM-11537: Channel select template screens #758

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
ClareJonesBJSS merged 9 commits into from
Nov 17, 2025
Merged

CCM-11537: Channel select template screens #758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7fdbac0
CCM-11537: Backend filter
ClareJonesBJSS Nov 13, 2025
662ec78
CCM-11537: Frontend
ClareJonesBJSS Nov 13, 2025
d80dcdf
CCM-11537: Remove stray filter types
ClareJonesBJSS Nov 13, 2025
8ff2781
CCM-11537: Add separate preview pages
ClareJonesBJSS Nov 13, 2025
8c39359
CCM-11537: Tests
ClareJonesBJSS Nov 13, 2025
2689b8e
CCM-11537: Template preview tests
ClareJonesBJSS Nov 13, 2025
ae89d54
CCM-11537: Code review comments
ClareJonesBJSS Nov 13, 2025
842a39d
Merge fix
ClareJonesBJSS Nov 13, 2025
57decab
CCM-11537: Remove status filter on letters
ClareJonesBJSS Nov 13, 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
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,4 +93,7 @@ lambdas/backend-api/src/email/email-template.json
# vscode
.vscode/settings.local.json

# github
.github/copilot-instructions.md

test-runs
6 changes: 3 additions & 3 deletions frontend/src/__tests__/app/choose-templates/__snapshots__/page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
class="nhsuk-u-margin-bottom-2"
data-testid="template-name-NHSAPP"
>
name
app template name
</p>
<ul
class="channel-template-actions"
Expand Down Expand Up @@ -275,7 +275,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
class="nhsuk-u-margin-bottom-2"
data-testid="template-name-SMS"
>
name
sms template name
</p>
<ul
class="channel-template-actions"
Expand Down Expand Up @@ -586,7 +586,7 @@ exports[`ChooseTemplatesPage renders correctly for a message plan with multiple
class="nhsuk-u-margin-bottom-2"
data-testid="template-name-LETTER"
>
name
letter template name
</p>
<ul
class="channel-template-actions"
Expand Down
255 changes: 255 additions & 0 deletions ...nd/src/__tests__/app/message-plans/choose-email-template/__snapshots__/page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ChooseEmailTemplate page renders Email template selection 1`] = `
<DocumentFragment>
<main
class="nhsuk-main-wrapper"
id="maincontent"
role="main"
>
<div
class="nhsuk-grid-row"
>
<div
class="nhsuk-grid-column-full"
>
<span
class="nhsuk-caption-l"
>
Autumn Campaign Plan
</span>
<h1
class="nhsuk-heading-l"
>
Choose an email template
</h1>
<form
action="javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')"
>
<input
name="form-id"
readonly=""
type="hidden"
value="choose-channel-template"
/>
<input
name="csrf_token"
readonly=""
type="hidden"
value="no_token"
/>
<dl
class="nhsuk-summary-list"
data-testid="previous-selection-summary"
>
<div
class="nhsuk-summary-list__row"
>
<dt
class="nhsuk-summary-list__key"
>
Previously selected template
</dt>
<dd
class="nhsuk-summary-list__value"
>
email template name
</dd>
</div>
</dl>
<div
class="nhsuk-grid-row"
>
<div
class="nhsuk-grid-column-full"
>
<div
class="nhsuk-hint"
>
Choose one option
</div>
<div
class="nhsuk-form-group"
>
<div
class="nhsuk-radios"
id="channelTemplate"
>
<table
class="nhsuk-table-responsive"
data-testid="channel-templates-table"
id="channel-templates-table"
>
<thead
class="nhsuk-table__head"
role="rowgroup"
>
<tr
class="nhsuk-table__row"
>
<th
class="nhsuk-table__header"
data-testid="channel-templates-table-header-template-select"
scope="col"
>
Select
</th>
<th
class="nhsuk-table__header"
data-testid="channel-templates-table-header-template-name"
scope="col"
>
Name
</th>
<th
class="nhsuk-table__header"
data-testid="channel-templates-table-header-template-type"
scope="col"
>
Type
</th>
<th
class="nhsuk-table__header"
data-testid="channel-templates-table-header-template-last-edited"
scope="col"
>
Last edited
</th>
<th
class="nhsuk-table__header"
data-testid="channel-templates-table-header-template-action"
scope="col"
/>
</tr>
</thead>
<tbody
class="nhsuk-table__body"
>
<tr
class="nhsuk-table__row"
>
<td
class="nhsuk-table__cell"
role="cell"
>
<span
aria-hidden="true"
class="nhsuk-table-responsive__heading"
>
Select
</span>
<div
class="nhsuk-radios__item"
>
<input
checked=""
class="nhsuk-radios__input"
data-testid="email-template-id-radio"
id="channelTemplate-email-template-id"
name="channelTemplate"
type="radio"
value="email-template-id"
/>
<label
class="nhsuk-label nhsuk-radios__label"
for="channelTemplate-email-template-id"
id="channelTemplate-email-template-id--label"
>

</label>
</div>
</td>
<td
class="nhsuk-table__cell"
role="cell"
>
<span
aria-hidden="true"
class="nhsuk-table-responsive__heading"
>
Name
</span>
email template name
</td>
<td
class="nhsuk-table__cell"
role="cell"
>
<span
aria-hidden="true"
class="nhsuk-table-responsive__heading"
>
Type
</span>
Email
</td>
<td
class="nhsuk-table__cell"
role="cell"
>
<span
aria-hidden="true"
class="nhsuk-table-responsive__heading"
>
Last edited
</span>
13th Jan 2025
<br />
10:19
</td>
<td
class="nhsuk-table__cell"
role="cell"
>
<span
aria-hidden="true"
class="nhsuk-table-responsive__heading"
>

</span>
<div
class="actionLinksWrapper"
>
<a
aria-label="Preview"
data-testid="email-template-id-preview-link"
href="/message-plans/choose-email-template/fbb81055-79b9-4759-ac07-d191ae57be34/preview-template/email-template-id"
id="preview-template-link-0"
>
Preview
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div
class="nhsuk-form-group"
data-testid="channel-template-actions"
>
<button
aria-disabled="false"
class="nhsuk-button"
data-testid="submit-button"
id="channel-template-submit-button"
type="submit"
>
Save and continue
</button>
<a
class="nhsuk-u-font-size-19 inline-block nhsuk-u-margin-left-3 nhsuk-u-padding-top-3"
href="/message-plans/choose-templates/fbb81055-79b9-4759-ac07-d191ae57be34"
>
Go back
</a>
</div>
</form>
</div>
</div>
</main>
</DocumentFragment>
`;
80 changes: 80 additions & 0 deletions frontend/src/__tests__/app/message-plans/choose-email-template/page.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import ChooseEmailTemplate, {
generateMetadata,
} from '@app/message-plans/choose-email-template/[routingConfigId]/page';
import { EMAIL_TEMPLATE, ROUTING_CONFIG } from '@testhelpers/helpers';
import { render } from '@testing-library/react';
import { getTemplates } from '@utils/form-actions';
import { getRoutingConfig } from '@utils/message-plans';
import { redirect } from 'next/navigation';

jest.mock('@utils/message-plans');
jest.mock('@utils/form-actions');
jest.mock('next/navigation');

const getRoutingConfigMock = jest.mocked(getRoutingConfig);
const getTemplatesMock = jest.mocked(getTemplates);
const redirectMock = jest.mocked(redirect);

describe('ChooseEmailTemplate page', () => {
it('should redirect to invalid page with invalid routing config id', async () => {
getRoutingConfigMock.mockResolvedValueOnce(undefined);

await ChooseEmailTemplate({
params: Promise.resolve({
routingConfigId: 'invalid-id',
}),
});

expect(getRoutingConfigMock).toHaveBeenCalledWith('invalid-id');

expect(redirectMock).toHaveBeenCalledWith(
'/message-plans/invalid',
'replace'
);
});

it('should redirect to invalid if plan has no email cascade entry', async () => {
getRoutingConfigMock.mockResolvedValueOnce({
...ROUTING_CONFIG,
cascade: ROUTING_CONFIG.cascade.filter(
(item) => item.channel !== 'EMAIL'
),
});

await ChooseEmailTemplate({
params: Promise.resolve({
routingConfigId: ROUTING_CONFIG.id,
}),
});

expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);

expect(redirectMock).toHaveBeenCalledWith(
'/message-plans/invalid',
'replace'
);
});

it('renders Email template selection', async () => {
getRoutingConfigMock.mockResolvedValueOnce(ROUTING_CONFIG);
getTemplatesMock.mockResolvedValueOnce([EMAIL_TEMPLATE]);

const page = await ChooseEmailTemplate({
params: Promise.resolve({
routingConfigId: ROUTING_CONFIG.id,
}),
});

const container = render(page);

expect(getRoutingConfigMock).toHaveBeenCalledWith(ROUTING_CONFIG.id);
expect(getTemplatesMock).toHaveBeenCalledWith({
templateType: 'EMAIL',
});

expect(await generateMetadata()).toEqual({
title: 'Choose an email template - NHS Notify',
});
expect(container.asFragment()).toMatchSnapshot();
});
});
Loading
Loading