Skip to content

Commit 0d712d4

Browse files
nicki-nhsnicki-nhs
authored
CCM-10917: Submit template page updates (#549)
1 parent 24972ac commit 0d712d4

File tree

14 files changed

+303
-141
lines changed

14 files changed

+303
-141
lines changed

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"jsonwebtoken": "^9.0.2",
1010
"jwt-decode": "^4.0.0",
1111
"markdown-it": "^13.0.2",
12+
"markdown-to-jsx": "^7.7.10",
1213
"next": "^15.2.3",
1314
"next-client-cookies": "^2.0.1",
1415
"nhs-notify-backend-client": "^0.0.1",

‎frontend/src/__tests__/components/forms/SubmitTemplate/__snapshots__/SubmitDigitalTemplate.test.tsx.snap‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,32 @@ exports[`SubmitDigitalTemplate component should render 1`] = `
1616
<h1>
1717
Submit 'template-name'
1818
</h1>
19+
<p
20+
class="nhsuk-body-l"
21+
>
22+
When you submit a template, it will be used by NHS Notify to set up the messages you want to send.
23+
</p>
24+
<h2
25+
class="nhsuk-heading-m"
26+
>
27+
Before you submit
28+
</h2>
29+
<p>
30+
You should check that your template:
31+
</p>
32+
<ul
33+
class="nhsuk-list nhsuk-list--bullet"
34+
>
35+
<li>
36+
is approved by the relevant stakeholders in your team
37+
</li>
38+
<li>
39+
does not have any spelling errors
40+
</li>
41+
<li>
42+
is formatted correctly
43+
</li>
44+
</ul>
1945
<div
2046
class="nhsuk-warning-callout"
2147
>
@@ -34,34 +60,9 @@ exports[`SubmitDigitalTemplate component should render 1`] = `
3460
</span>
3561
</h2>
3662
<p>
37-
When you submit this template it cannot be changed. It can only be replaced by a new template.
63+
You cannot edit a template after you've submitted it. You can only replace it with a new template.
3864
</p>
3965
</div>
40-
<h2
41-
class="nhsuk-heading-m"
42-
>
43-
Before you submit
44-
</h2>
45-
<p>
46-
You should check that your template:
47-
</p>
48-
<ul>
49-
<li>
50-
is approved by the relevant stakeholders in your team
51-
</li>
52-
<li>
53-
does not have any spelling errors
54-
</li>
55-
<li>
56-
is formatted correctly
57-
</li>
58-
</ul>
59-
<p>
60-
When you submit a template, it will be used by NHS Notify to set up the messages you want to send.
61-
</p>
62-
<p>
63-
If you want to change a submitted template, you must create and submit a new template to replace it.
64-
</p>
6566
<form
6667
action="/action"
6768
>

‎frontend/src/__tests__/components/forms/SubmitTemplate/__snapshots__/SubmitLetterTemplate.test.tsx.snap‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,19 @@ exports[`SubmitLetterTemplate component should render 1`] = `
2727
Before you submit this template
2828
</h2>
2929
<p>
30-
You should check that your template proof:
30+
Check that your template proof:
3131
</p>
32-
<ul>
32+
<ul
33+
class="nhsuk-list nhsuk-list--bullet"
34+
>
3335
<li>
34-
appears exactly as you'd like a recipient to receive it
36+
looks exactly as you expect your recipient to get it
3537
</li>
3638
<li>
37-
uses personalisation in the way you expect
39+
uses personalisation as you expect
3840
</li>
3941
<li>
40-
displays QR codes correctly (if included)
42+
shows QR codes correctly (if used)
4143
</li>
4244
</ul>
4345
<div
@@ -58,16 +60,8 @@ exports[`SubmitLetterTemplate component should render 1`] = `
5860
</span>
5961
</h2>
6062
<p>
61-
If you need to change this template after you've submitted it:
63+
You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.
6264
</p>
63-
<ul>
64-
<li>
65-
go back and upload a new letter template
66-
</li>
67-
<li>
68-
tell your onboarding manager which template you want to use
69-
</li>
70-
</ul>
7165
</div>
7266
<form
7367
action="/action"
@@ -134,12 +128,14 @@ exports[`SubmitLetterTemplate component should render with proofing flag disable
134128
<h2
135129
class="nhsuk-heading-s"
136130
>
137-
Before you submit this template
131+
Before you submit
138132
</h2>
139133
<p>
140-
Check that the template you uploaded:
134+
You should check that your template:
141135
</p>
142-
<ul>
136+
<ul
137+
class="nhsuk-list nhsuk-list--bullet"
138+
>
143139
<li>
144140
is approved by the relevant stakeholders in your team
145141
</li>
@@ -179,16 +175,8 @@ exports[`SubmitLetterTemplate component should render with proofing flag disable
179175
</span>
180176
</h2>
181177
<p>
182-
If you need to change this template after you've submitted it:
178+
You cannot edit a template after you've submitted it. You can only replace it with a new template.
183179
</p>
184-
<ul>
185-
<li>
186-
go back and upload a new letter template
187-
</li>
188-
<li>
189-
tell your onboarding manager which template you want to use
190-
</li>
191-
</ul>
192180
</div>
193181
<form
194182
action="/action"

‎frontend/src/__tests__/components/molecules/MarkdownContent.test.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent';
4+
5+
describe('MarkdownContent', () => {
6+
it('renders nothing if segments is empty array', () => {
7+
const { container } = render(<MarkdownContent segments={[]} />);
8+
expect(container).toBeEmptyDOMElement();
9+
});
10+
11+
it('renders multiple segments in correct order', () => {
12+
const segments = ['First paragraph', 'Second [link](https://example.com)'];
13+
14+
render(<MarkdownContent segments={segments} />);
15+
16+
expect(screen.getByText('First paragraph')).toBeInTheDocument();
17+
expect(screen.getByRole('link')).toHaveAttribute(
18+
'href',
19+
'https://example.com'
20+
);
21+
expect(screen.getByRole('link')).toHaveTextContent('link');
22+
});
23+
24+
it('adds correct attributes to links', () => {
25+
const segments = ['Click [here](https://example.com)'];
26+
27+
render(<MarkdownContent segments={segments} />);
28+
29+
const link = screen.getByRole('link', { name: 'here' });
30+
expect(link).toHaveAttribute('target', '_blank');
31+
expect(link).toHaveAttribute('rel', 'noopener noreferrer');
32+
});
33+
34+
it('renders markdown paragraphs and links correctly (snapshot)', () => {
35+
const segments = [
36+
'This is a paragraph',
37+
'Here is a [link](https://example.com)',
38+
];
39+
40+
const container = render(<MarkdownContent segments={segments} />);
41+
expect(container.asFragment()).toMatchSnapshot();
42+
});
43+
44+
it('escapes dangerous HTML, scripts, and iframes', () => {
45+
const segments = [
46+
'<script>alert("hacked!")</script>',
47+
'<img src=x onerror=alert(1)>',
48+
'<iframe src="https://malicious-site.com"></iframe>',
49+
];
50+
51+
const { container } = render(<MarkdownContent segments={segments} />);
52+
53+
expect(container.querySelector('script')).toBeNull();
54+
expect(container.querySelector('img')).toBeNull();
55+
expect(container.querySelector('iframe')).toBeNull();
56+
});
57+
});

‎frontend/src/__tests__/components/molecules/__snapshots__/MarkdownContent.test.tsx.snap‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`MarkdownContent renders markdown paragraphs and links correctly (snapshot) 1`] = `
4+
<DocumentFragment>
5+
<p>
6+
This is a paragraph
7+
</p>
8+
<p>
9+
Here is a
10+
<a
11+
href="https://example.com"
12+
rel="noopener noreferrer"
13+
target="_blank"
14+
>
15+
link
16+
</a>
17+
</p>
18+
</DocumentFragment>
19+
`;

‎frontend/src/__tests__/components/molecules/__snapshots__/TemplateSubmitted.test.tsx.snap‎

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,33 +23,63 @@ exports[`TemplateSubmitted component should render 1`] = `
2323
Template submitted
2424
</h1>
2525
</div>
26+
<dl>
27+
<dt
28+
class="nhsuk-heading-xs nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-1"
29+
>
30+
Template name
31+
</dt>
32+
<dd
33+
class="nhsuk-body-s nhsuk-u-margin-left-0"
34+
id="template-name"
35+
>
36+
template-name
37+
</dd>
38+
<dt
39+
class="nhsuk-heading-xs nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-1"
40+
>
41+
Template ID
42+
</dt>
43+
<dd
44+
class="nhsuk-body-s nhsuk-u-margin-left-0"
45+
id="template-id"
46+
>
47+
template-id
48+
</dd>
49+
</dl>
2650
<h2
27-
class="nhsuk-heading-xs nhsuk-u-margin-bottom-1"
51+
class="nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-6"
2852
>
29-
Template name
53+
What you need to do next
3054
</h2>
31-
<p
32-
id="template-name"
55+
<h3
56+
class="nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-3"
3357
>
34-
template-name
58+
If you've not sent messages using NHS Notify yet
59+
</h3>
60+
<p>
61+
Tell your onboarding manager once you've submitted all your templates.
3562
</p>
36-
<h2
37-
class="nhsuk-heading-xs nhsuk-u-margin-bottom-1"
38-
>
39-
Template ID
40-
</h2>
41-
<p
42-
id="template-id"
43-
>
44-
template-id
63+
<p>
64+
If you replaced a template by submitting a new one, tell your onboarding manager which template you want to use.
4565
</p>
4666
<h3
47-
class="nhsuk-u-margin-top-5"
67+
class="nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-3"
4868
>
49-
What you need to do next
69+
If you've sent messages using NHS Notify
5070
</h3>
5171
<p>
52-
Tell an onboarding manager once you've submitted all your templates.
72+
<a
73+
href="https://nhsdigitallive.service-now.com/csm?id=sc_cat_item&sys_id=ce81c3ae1b1c5190892d4046b04bcb83"
74+
rel="noopener noreferrer"
75+
target="_blank"
76+
>
77+
Raise a request with the Service Desk (opens in a new tab)
78+
</a>
79+
once you've submitted all your templates.
80+
</p>
81+
<p>
82+
If you replaced a template by submitting a new one, tell us which template you want to use in your Service Desk request.
5383
</p>
5484
<hr
5585
class="nhsuk-section-break--visible"

‎frontend/src/__tests__/utils/markdownit/__snapshots__/index.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,4 @@ End of horizontal line</p>
7272
<p>This is a paragraph</p>
7373
<p>By doing a new line this starts a new paragraph</p>
7474
"
75-
`;
75+
`;

‎frontend/src/components/forms/SubmitTemplate/SubmitDigitalTemplate.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const SubmitDigitalTemplate: FC<ActionPageProps> = ({
2525
submitChecklistHeading,
2626
submitChecklistIntroduction,
2727
submitChecklistItems,
28-
submitChecklistParagraphs,
28+
leadParagraph,
2929
goBackButtonText,
3030
buttonText,
3131
} = content.components.submitTemplate;
@@ -41,22 +41,24 @@ export const SubmitDigitalTemplate: FC<ActionPageProps> = ({
4141
<h1>
4242
{pageHeading} {`'${templateName}'`}
4343
</h1>
44-
<WarningCallout>
45-
<WarningCallout.Label headingLevel='h2'>
46-
{warningCalloutLabel}
47-
</WarningCallout.Label>
48-
<p>{warningCalloutText}</p>
49-
</WarningCallout>
44+
45+
<p className='nhsuk-body-l'>{leadParagraph}</p>
46+
5047
<h2 className='nhsuk-heading-m'>{submitChecklistHeading}</h2>
5148
<p>{submitChecklistIntroduction}</p>
52-
<ul>
49+
<ul className='nhsuk-list nhsuk-list--bullet'>
5350
{submitChecklistItems.map((item) => (
5451
<li key={`submit-list-${item.slice(0, 5)}`}>{item}</li>
5552
))}
5653
</ul>
57-
{submitChecklistParagraphs.map((item) => (
58-
<p key={`submit-paragraph-${item.slice(0, 5)}`}>{item}</p>
59-
))}
54+
55+
<WarningCallout>
56+
<WarningCallout.Label headingLevel='h2'>
57+
{warningCalloutLabel}
58+
</WarningCallout.Label>
59+
<p>{warningCalloutText}</p>
60+
</WarningCallout>
61+
6062
<NHSNotifyFormWrapper formId='submit-template-form' action={action}>
6163
<input
6264
type='hidden'

0 commit comments

Comments
 (0)