Skip to content

Commit c1fe132

Browse files
nicki-nhsnicki-nhs
committed
CCM-9118 Display footer content for letter preview
1 parent de2929b commit c1fe132

File tree

3 files changed

+199
-0
lines changed

3 files changed

+199
-0
lines changed

‎frontend/src/__tests__/components/organisms/PreviewLetterTemplate.test.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,32 @@ describe('PreviewLetterTemplate component', () => {
5555
expect(container.asFragment()).toMatchSnapshot();
5656
});
5757

58+
it('matches snapshot when template status is WAITING_FOR_PROOF', () => {
59+
const container = render(
60+
<PreviewLetterTemplate
61+
template={{
62+
id: '53525D03-1BC1-4563-ABF9-A74FF04142AF',
63+
name: 'letter',
64+
templateType: 'LETTER',
65+
templateStatus: 'WAITING_FOR_PROOF',
66+
letterType: 'q4',
67+
language: 'ar',
68+
files: {
69+
pdfTemplate: {
70+
fileName: 'file.pdf',
71+
currentVersion: 'a',
72+
virusScanStatus: 'PASSED',
73+
},
74+
},
75+
createdAt: '2025-04-02T09:33:25.729Z',
76+
updatedAt: '2025-04-02T09:33:25.729Z',
77+
}}
78+
/>
79+
);
80+
81+
expect(container.asFragment()).toMatchSnapshot();
82+
});
83+
5884
it('matches snapshot when template status is NOT_YET_SUBMITTED', () => {
5985
const container = render(
6086
<PreviewLetterTemplate

‎frontend/src/__tests__/components/organisms/__snapshots__/PreviewLetterTemplate.test.tsx.snap‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -988,3 +988,157 @@ exports[`PreviewLetterTemplate component matches snapshot when template status i
988988
</main>
989989
</DocumentFragment>
990990
`;
991+
992+
exports[`PreviewLetterTemplate component matches snapshot when template status is WAITING_FOR_PROOF 1`] = `
993+
<DocumentFragment>
994+
<div
995+
class="nhsuk-back-link"
996+
>
997+
<a
998+
class="nhsuk-back-link__link"
999+
href="/templates/message-templates"
1000+
id="back-link"
1001+
>
1002+
<svg
1003+
aria-hidden="true"
1004+
class="nhsuk-icon nhsuk-icon__chevron-left"
1005+
height="24"
1006+
viewBox="0 0 24 24"
1007+
width="24"
1008+
xmlns="http://www.w3.org/2000/svg"
1009+
>
1010+
<path
1011+
d="M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z"
1012+
/>
1013+
</svg>
1014+
Back to all templates
1015+
</a>
1016+
</div>
1017+
<main
1018+
class="nhsuk-main-wrapper"
1019+
id="maincontent"
1020+
role="main"
1021+
>
1022+
<div
1023+
class="nhsuk-grid-row"
1024+
>
1025+
<div
1026+
class="nhsuk-grid-column-full"
1027+
>
1028+
<h1
1029+
class="preview__heading"
1030+
data-testid="preview-message__heading"
1031+
>
1032+
letter
1033+
</h1>
1034+
<div
1035+
class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
1036+
>
1037+
<dl
1038+
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
1039+
>
1040+
<div
1041+
class="nhsuk-summary-list__row"
1042+
>
1043+
<dt
1044+
class="nhsuk-summary-list__key"
1045+
>
1046+
Template ID
1047+
</dt>
1048+
<dd
1049+
class="nhsuk-summary-list__value"
1050+
>
1051+
53525D03-1BC1-4563-ABF9-A74FF04142AF
1052+
</dd>
1053+
</div>
1054+
<div
1055+
class="nhsuk-summary-list__row"
1056+
>
1057+
<dt
1058+
class="nhsuk-summary-list__key"
1059+
>
1060+
Type
1061+
</dt>
1062+
<dd
1063+
class="nhsuk-summary-list__value"
1064+
>
1065+
British Sign Language letter - Arabic
1066+
</dd>
1067+
</div>
1068+
<div
1069+
class="nhsuk-summary-list__row"
1070+
>
1071+
<dt
1072+
class="nhsuk-summary-list__key"
1073+
>
1074+
Status
1075+
</dt>
1076+
<dd
1077+
class="nhsuk-summary-list__value"
1078+
>
1079+
<strong
1080+
class="nhsuk-tag nhsuk-tag--yellow"
1081+
>
1082+
Waiting for proof
1083+
</strong>
1084+
</dd>
1085+
</div>
1086+
<div
1087+
class="nhsuk-summary-list__row"
1088+
>
1089+
<dt
1090+
class="nhsuk-summary-list__key"
1091+
>
1092+
Template file
1093+
</dt>
1094+
<dd
1095+
class="nhsuk-summary-list__value"
1096+
>
1097+
<div
1098+
class="container"
1099+
>
1100+
<svg
1101+
class="icon"
1102+
fill="none"
1103+
height="26"
1104+
viewBox="0 0 20 26"
1105+
width="20"
1106+
xmlns="http://www.w3.org/2000/svg"
1107+
>
1108+
<path
1109+
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
1110+
fill="#4C6272"
1111+
/>
1112+
</svg>
1113+
<p
1114+
class="text"
1115+
>
1116+
file.pdf
1117+
</p>
1118+
</div>
1119+
</dd>
1120+
</div>
1121+
</dl>
1122+
</div>
1123+
<div
1124+
class="preview-letter-footer nhsuk-u-margin-bottom-6"
1125+
>
1126+
<p>
1127+
It can take 5 to 10 working days to get a proof of your template.
1128+
</p>
1129+
<p>
1130+
If you still have not received your proof after this time, contact NHS Notify.
1131+
</p>
1132+
</div>
1133+
<p>
1134+
<a
1135+
href="/message-templates"
1136+
>
1137+
Back to all templates
1138+
</a>
1139+
</p>
1140+
</div>
1141+
</div>
1142+
</main>
1143+
</DocumentFragment>
1144+
`;

‎frontend/src/components/organisms/PreviewLetterTemplate/PreviewLetterTemplate.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { BackLink, ErrorSummary, ErrorMessage } from 'nhsuk-react-components';
99
import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
1010
import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
1111
import { TemplateStatus } from 'nhs-notify-backend-client';
12+
import classNames from 'classnames';
1213

1314
type ButtonDetails = { text: string; href: string };
1415

@@ -18,6 +19,7 @@ export function PreviewLetterTemplate({
1819
const {
1920
backLinkText,
2021
errorHeading,
22+
footer,
2123
submitText,
2224
requestProofText,
2325
virusScanError,
@@ -50,6 +52,9 @@ export function PreviewLetterTemplate({
5052

5153
const continueButton = buttonMap[template.templateStatus];
5254

55+
const footerText =
56+
(footer as Record<TemplateStatus, string[]>)[template.templateStatus] ?? [];
57+
5358
return (
5459
<>
5560
<BackLink href={`${basePath}/message-templates`} id='back-link'>
@@ -71,6 +76,20 @@ export function PreviewLetterTemplate({
7176
</ErrorSummary>
7277
)}
7378
<PreviewTemplateDetails.Letter template={template} />
79+
80+
{footerText.length > 0 ? (
81+
<div
82+
className={classNames(
83+
'preview-letter-footer',
84+
'nhsuk-u-margin-bottom-6'
85+
)}
86+
>
87+
{footerText.map((item, i) => (
88+
<p key={`footer-${i}`}>{item}</p>
89+
))}
90+
</div>
91+
) : null}
92+
7493
{continueButton && (
7594
<NHSNotifyButton
7695
data-testid='preview-letter-template-cta'

0 commit comments

Comments
 (0)