Skip to content

Commit 3bed181

Browse files
m-salaudeenm-salaudeen
committed
CCM-11966: Refactor manage templates and SubmitLetterTemplate page to reflect new data if routing is enabled
1 parent b380f87 commit 3bed181

File tree

8 files changed

+311
-46
lines changed

8 files changed

+311
-46
lines changed

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ jest.mock('@forms/SubmitTemplate/server-action', () => ({
2222
jest.mock('@providers/client-config-provider');
2323

2424
describe('SubmitLetterTemplate component', () => {
25-
it('should render', () => {
25+
it('should render with client proofing enabled', () => {
2626
jest.mocked(useFeatureFlags).mockReturnValueOnce({ proofing: true });
2727

2828
const container = render(
@@ -35,6 +35,21 @@ describe('SubmitLetterTemplate component', () => {
3535
expect(container.asFragment()).toMatchSnapshot();
3636
});
3737

38+
it('should render with client proofing and routing enabled', () => {
39+
jest
40+
.mocked(useFeatureFlags)
41+
.mockReturnValueOnce({ proofing: true, routing: true });
42+
43+
const container = render(
44+
<SubmitLetterTemplate
45+
templateId='template-id'
46+
templateName='template-name'
47+
/>
48+
);
49+
50+
expect(container.asFragment()).toMatchSnapshot();
51+
});
52+
3853
it('should render with client proofing disabled', () => {
3954
jest.mocked(useFeatureFlags).mockReturnValueOnce({ proofing: false });
4055

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

Lines changed: 123 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`SubmitLetterTemplate component should render 1`] = `
3+
exports[`SubmitLetterTemplate component should render with client proofing and routing enabled 1`] = `
44
<DocumentFragment>
55
<main
66
class="nhsuk-main-wrapper"
@@ -14,17 +14,17 @@ exports[`SubmitLetterTemplate component should render 1`] = `
1414
class="nhsuk-grid-column-two-thirds"
1515
>
1616
<h1>
17-
Approve and submit 'template-name'
17+
Approve 'template-name'
1818
</h1>
1919
<p
2020
class="nhsuk-body-l"
2121
>
22-
When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.
22+
When you approve your template proof, your template will be ready to add to a message plan.
2323
</p>
2424
<h2
2525
class="nhsuk-heading-s"
2626
>
27-
Before you submit this template
27+
Before you approve this template proof
2828
</h2>
2929
<p>
3030
Check that your template proof:
@@ -60,7 +60,7 @@ exports[`SubmitLetterTemplate component should render 1`] = `
6060
</span>
6161
</h2>
6262
<p>
63-
You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.
63+
You cannot edit a template after you've approved the template proof. You can only create a new template to replace it.
6464
</p>
6565
</div>
6666
<form
@@ -84,24 +84,24 @@ exports[`SubmitLetterTemplate component should render 1`] = `
8484
type="hidden"
8585
value="template-id"
8686
/>
87+
<button
88+
aria-disabled="false"
89+
class="nhsuk-button nhsuk-u-margin-right-3"
90+
id="submit-template-button"
91+
type="submit"
92+
>
93+
Approve template proof
94+
</button>
8795
<a
8896
aria-disabled="false"
89-
class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-right-3"
97+
class="nhsuk-button nhsuk-button-background-button"
9098
draggable="false"
9199
href="/templates/preview-letter-template/template-id"
92100
id="go-back-button"
93101
role="button"
94102
>
95103
Go back
96104
</a>
97-
<button
98-
aria-disabled="false"
99-
class="nhsuk-button"
100-
id="submit-template-button"
101-
type="submit"
102-
>
103-
Approve and submit
104-
</button>
105105
</form>
106106
</div>
107107
</div>
@@ -223,3 +223,112 @@ exports[`SubmitLetterTemplate component should render with client proofing disab
223223
</main>
224224
</DocumentFragment>
225225
`;
226+
227+
exports[`SubmitLetterTemplate component should render with client proofing enabled 1`] = `
228+
<DocumentFragment>
229+
<main
230+
class="nhsuk-main-wrapper"
231+
id="maincontent"
232+
role="main"
233+
>
234+
<div
235+
class="nhsuk-grid-row"
236+
>
237+
<div
238+
class="nhsuk-grid-column-two-thirds"
239+
>
240+
<h1>
241+
Approve and submit 'template-name'
242+
</h1>
243+
<p
244+
class="nhsuk-body-l"
245+
>
246+
When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.
247+
</p>
248+
<h2
249+
class="nhsuk-heading-s"
250+
>
251+
Before you submit this template
252+
</h2>
253+
<p>
254+
Check that your template proof:
255+
</p>
256+
<ul
257+
class="nhsuk-list nhsuk-list--bullet"
258+
>
259+
<li>
260+
looks exactly as you expect your recipient to get it
261+
</li>
262+
<li>
263+
uses personalisation as you expect
264+
</li>
265+
<li>
266+
shows QR codes correctly (if used)
267+
</li>
268+
</ul>
269+
<div
270+
class="nhsuk-warning-callout"
271+
>
272+
<h2
273+
class="nhsuk-warning-callout__label"
274+
>
275+
<span
276+
role="text"
277+
>
278+
<span
279+
class="nhsuk-u-visually-hidden"
280+
>
281+
Important:
282+
</span>
283+
Important
284+
</span>
285+
</h2>
286+
<p>
287+
You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.
288+
</p>
289+
</div>
290+
<form
291+
action="/action"
292+
>
293+
<input
294+
name="form-id"
295+
readonly=""
296+
type="hidden"
297+
value="submit-template-form"
298+
/>
299+
<input
300+
name="csrf_token"
301+
readonly=""
302+
type="hidden"
303+
value="no_token"
304+
/>
305+
<input
306+
name="templateId"
307+
readonly=""
308+
type="hidden"
309+
value="template-id"
310+
/>
311+
<button
312+
aria-disabled="false"
313+
class="nhsuk-button nhsuk-u-margin-right-3"
314+
id="submit-template-button"
315+
type="submit"
316+
>
317+
Approve and submit
318+
</button>
319+
<a
320+
aria-disabled="false"
321+
class="nhsuk-button nhsuk-button-background-button"
322+
draggable="false"
323+
href="/templates/preview-letter-template/template-id"
324+
id="go-back-button"
325+
role="button"
326+
>
327+
Go back
328+
</a>
329+
</form>
330+
</div>
331+
</div>
332+
</main>
333+
</DocumentFragment>
334+
`;

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,22 +88,31 @@ export const SubmitLetterTemplate: FC<{
8888
templateName: string;
8989
templateId: string;
9090
}> = ({ templateName, templateId }) => {
91+
const features = useFeatureFlags();
92+
9193
const {
92-
buttonText,
94+
routingFlagEnabled,
95+
routingFlagDisabled,
9396
goBackButtonText,
9497
goBackPath,
95-
leadParagraph,
96-
pageHeading,
97-
submitChecklistHeading,
9898
submitChecklistIntroduction,
9999
submitChecklistItems,
100-
warningCalloutText,
101100
warningCalloutLabel,
102101
} = content.components.submitLetterTemplate;
103102

104103
const [_, action] = useActionState(submitTemplate, 'LETTER');
105104

106-
const features = useFeatureFlags();
105+
const pageContent = features.routing
106+
? routingFlagEnabled
107+
: routingFlagDisabled;
108+
109+
const {
110+
pageHeading,
111+
leadParagraph,
112+
submitChecklistHeading,
113+
warningCalloutText,
114+
buttonText,
115+
} = pageContent;
107116

108117
if (!features.proofing) {
109118
return (

‎frontend/src/components/molecules/MessageTemplates/MessageTemplates.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
statusToColourMapping,
1818
} from 'nhs-notify-web-template-management-utils';
1919
import { TemplateDto } from 'nhs-notify-backend-client';
20+
import { useFeatureFlags } from '@providers/client-config-provider';
2021
import style from './MessageTemplates.module.scss';
2122

2223
const messageTemplatesContent = content.pages.messageTemplates;
@@ -43,6 +44,7 @@ export function MessageTemplates({
4344
}: {
4445
templateList: TemplateDto[];
4546
}) {
47+
const isRoutingEnabled = useFeatureFlags().routing === true;
4648
return (
4749
<div className='nhsuk-grid-row'>
4850
<div className='nhsuk-grid-column-full'>
@@ -86,7 +88,7 @@ export function MessageTemplates({
8688
<Table.Cell>{typeDisplayMappings(template)}</Table.Cell>
8789
<Table.Cell>
8890
<Tag color={statusToColourMapping(template)}>
89-
{statusToDisplayMapping(template)}
91+
{statusToDisplayMapping(template, isRoutingEnabled)}
9092
</Tag>
9193
</Table.Cell>
9294
<Table.Cell>

‎frontend/src/content/content.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -666,21 +666,31 @@ const submitLetterTemplate = {
666666
warningCalloutLabel: 'Important',
667667
warningCalloutText: `You cannot edit a template after you've submitted it. You can only replace it with a new template.`,
668668
},
669-
pageHeading: 'Approve',
670-
leadParagraph:
671-
'When you approve your template proof, your template will be ready to add to a message plan.',
672-
submitChecklistHeading: 'Before you approve this template proof',
669+
routingFlagEnabled: {
670+
pageHeading: 'Approve',
671+
leadParagraph:
672+
'When you approve your template proof, your template will be ready to add to a message plan.',
673+
submitChecklistHeading: 'Before you approve this template proof',
674+
warningCalloutText: `You cannot edit a template after you've approved the template proof. You can only create a new template to replace it.`,
675+
buttonText: 'Approve template proof',
676+
},
677+
routingFlagDisabled: {
678+
pageHeading: 'Approve and submit',
679+
leadParagraph:
680+
'When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.',
681+
submitChecklistHeading: 'Before you submit this template',
682+
warningCalloutText: `You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.`,
683+
buttonText: 'Approve and submit',
684+
},
673685
submitChecklistIntroduction: 'Check that your template proof:',
674686
submitChecklistItems: [
675687
'looks exactly as you expect your recipient to get it',
676688
'uses personalisation as you expect',
677689
'shows QR codes correctly (if used)',
678690
],
679691
warningCalloutLabel: 'Important',
680-
warningCalloutText: `You cannot edit a template after you've approved the template proof. You can only create a new template to replace it.`,
681692
goBackPath: 'preview-letter-template',
682693
goBackButtonText: submitTemplate.goBackButtonText,
683-
buttonText: 'Approve template proof',
684694
};
685695

686696
const copyTemplate = {

‎lambdas/event-publisher/src/__tests__/domain/should-publish.test.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,10 @@ describe('shouldPublish', () => {
4444
}
4545
);
4646

47-
type LetterStatus = Exclude<TemplateStatus, 'NOT_YET_SUBMITTED'>;
47+
type LetterStatus = Exclude<
48+
TemplateStatus,
49+
'NOT_YET_SUBMITTED' | 'TEMPLATE_PROOF_APPROVED'
50+
>;
4851

4952
const letterPublishCases: Record<LetterStatus, boolean> = {
5053
DELETED: true,

0 commit comments

Comments
 (0)