Skip to content

Commit 6077faa

Browse files
harrim91harrim91
committed
CCM-11965: preview letter template content changes
1 parent a04a5cf commit 6077faa

File tree

4 files changed

+319
-9
lines changed

4 files changed

+319
-9
lines changed

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import { PreviewLetterTemplate } from '@organisms/PreviewLetterTemplate/PreviewLetterTemplate';
22
import { render } from '@testing-library/react';
33
import { isRightToLeft } from 'nhs-notify-web-template-management-utils/enum';
4+
import { useFeatureFlags } from '@providers/client-config-provider';
45

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

79
const isRightToLeftMock = jest.mocked(isRightToLeft);
810

911
describe('PreviewLetterTemplate component', () => {
1012
beforeEach(() => {
1113
jest.resetAllMocks();
1214
isRightToLeftMock.mockReturnValueOnce(false);
15+
jest.mocked(useFeatureFlags).mockReturnValue({ routing: false });
1316
});
1417

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

135+
it('matches snapshot when template status is PROOF_AVAILABLE and routing flag is enabled', () => {
136+
jest.mocked(useFeatureFlags).mockReturnValue({ routing: true });
137+
const container = render(
138+
<PreviewLetterTemplate
139+
template={{
140+
id: '2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE',
141+
clientId: 'client-id',
142+
name: 'letter',
143+
templateType: 'LETTER',
144+
templateStatus: 'PROOF_AVAILABLE',
145+
letterType: 'x1',
146+
language: 'en',
147+
files: {
148+
pdfTemplate: {
149+
fileName: 'file.pdf',
150+
currentVersion: 'b',
151+
virusScanStatus: 'PASSED',
152+
},
153+
proofs: {
154+
'your-proof.pdf': {
155+
fileName: 'your-proof.pdf',
156+
virusScanStatus: 'PASSED',
157+
supplier: 'MBA',
158+
},
159+
},
160+
},
161+
proofingEnabled: true,
162+
createdAt: '2025-04-02T09:33:25.729Z',
163+
updatedAt: '2025-04-02T09:33:25.729Z',
164+
}}
165+
/>
166+
);
167+
168+
expect(container.asFragment()).toMatchSnapshot();
169+
});
170+
132171
it('matches snapshot when template status is NOT_YET_SUBMITTED', () => {
133172
const container = render(
134173
<PreviewLetterTemplate

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

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1004,6 +1004,260 @@ exports[`PreviewLetterTemplate component matches snapshot when template status i
10041004
</DocumentFragment>
10051005
`;
10061006

1007+
exports[`PreviewLetterTemplate component matches snapshot when template status is PROOF_AVAILABLE and routing flag is enabled 1`] = `
1008+
<DocumentFragment>
1009+
<a
1010+
class="nhsuk-back-link"
1011+
href="/message-templates"
1012+
>
1013+
Back to all templates
1014+
</a>
1015+
<main
1016+
class="nhsuk-main-wrapper"
1017+
id="maincontent"
1018+
role="main"
1019+
>
1020+
<div
1021+
class="nhsuk-grid-row"
1022+
>
1023+
<div
1024+
class="nhsuk-grid-column-full"
1025+
>
1026+
<div
1027+
class="nhsuk-u-reading-width"
1028+
>
1029+
<span
1030+
class="nhsuk-caption-l"
1031+
>
1032+
Template
1033+
</span>
1034+
<h1
1035+
class="preview__heading"
1036+
data-testid="preview-message__heading"
1037+
>
1038+
letter
1039+
</h1>
1040+
</div>
1041+
<div
1042+
class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
1043+
>
1044+
<dl
1045+
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
1046+
>
1047+
<div
1048+
class="nhsuk-summary-list__row"
1049+
>
1050+
<dt
1051+
class="nhsuk-summary-list__key"
1052+
>
1053+
Template ID
1054+
</dt>
1055+
<dd
1056+
class="nhsuk-summary-list__value"
1057+
>
1058+
2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE
1059+
</dd>
1060+
</div>
1061+
<div
1062+
class="nhsuk-summary-list__row"
1063+
>
1064+
<dt
1065+
class="nhsuk-summary-list__key"
1066+
>
1067+
Type
1068+
</dt>
1069+
<dd
1070+
class="nhsuk-summary-list__value"
1071+
/>
1072+
</div>
1073+
<div
1074+
class="nhsuk-summary-list__row"
1075+
>
1076+
<dt
1077+
class="nhsuk-summary-list__key"
1078+
>
1079+
Status
1080+
</dt>
1081+
<dd
1082+
class="nhsuk-summary-list__value"
1083+
>
1084+
<strong
1085+
class="nhsuk-tag"
1086+
data-test-id="status-tag-proof-available"
1087+
/>
1088+
</dd>
1089+
</div>
1090+
<div
1091+
class="nhsuk-summary-list__row"
1092+
>
1093+
<dt
1094+
class="nhsuk-summary-list__key"
1095+
>
1096+
Template file
1097+
</dt>
1098+
<dd
1099+
class="nhsuk-summary-list__value"
1100+
>
1101+
<div
1102+
class="container"
1103+
>
1104+
<svg
1105+
aria-hidden="true"
1106+
class="icon"
1107+
fill="none"
1108+
height="26"
1109+
viewBox="0 0 20 26"
1110+
width="20"
1111+
xmlns="http://www.w3.org/2000/svg"
1112+
>
1113+
<path
1114+
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
1115+
fill="#4C6272"
1116+
/>
1117+
</svg>
1118+
<p
1119+
class="text"
1120+
>
1121+
file.pdf
1122+
</p>
1123+
</div>
1124+
</dd>
1125+
</div>
1126+
</dl>
1127+
<dl
1128+
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
1129+
>
1130+
<div
1131+
class="nhsuk-summary-list__row"
1132+
>
1133+
<dt
1134+
class="nhsuk-summary-list__key"
1135+
>
1136+
Template proof files
1137+
</dt>
1138+
<dd
1139+
class="nhsuk-summary-list__value"
1140+
>
1141+
<ul
1142+
class="proofs"
1143+
>
1144+
<li>
1145+
<a
1146+
data-testid="proof-link_your-proof.pdf"
1147+
href="/templates/files/client-id/proofs/2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE/your-proof.pdf"
1148+
rel="noopener noreferrer"
1149+
target="_blank"
1150+
>
1151+
<div
1152+
class="container"
1153+
>
1154+
<svg
1155+
aria-hidden="true"
1156+
class="icon"
1157+
fill="none"
1158+
height="26"
1159+
viewBox="0 0 20 26"
1160+
width="20"
1161+
xmlns="http://www.w3.org/2000/svg"
1162+
>
1163+
<path
1164+
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
1165+
fill="#4C6272"
1166+
/>
1167+
</svg>
1168+
<p
1169+
class="text"
1170+
>
1171+
your-proof.pdf
1172+
</p>
1173+
</div>
1174+
</a>
1175+
</li>
1176+
</ul>
1177+
</dd>
1178+
</div>
1179+
</dl>
1180+
</div>
1181+
<section
1182+
class="nhsuk-u-reading-width"
1183+
>
1184+
<details
1185+
class="nhsuk-details"
1186+
>
1187+
<summary
1188+
class="nhsuk-details__summary"
1189+
>
1190+
<span
1191+
class="nhsuk-details__summary-text"
1192+
>
1193+
If this proof does not match the template
1194+
</span>
1195+
</summary>
1196+
<div
1197+
class="nhsuk-details__text"
1198+
>
1199+
<p>
1200+
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.
1201+
</p>
1202+
<p>
1203+
We'll update the template proof and email it to you.
1204+
</p>
1205+
<p>
1206+
It can take 5 to 10 working days to get another proof of your template.
1207+
</p>
1208+
<p>
1209+
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.
1210+
</p>
1211+
</div>
1212+
</details>
1213+
<details
1214+
class="nhsuk-details"
1215+
>
1216+
<summary
1217+
class="nhsuk-details__summary"
1218+
>
1219+
<span
1220+
class="nhsuk-details__summary-text"
1221+
>
1222+
If you need to edit the template
1223+
</span>
1224+
</summary>
1225+
<div
1226+
class="nhsuk-details__text"
1227+
>
1228+
<p>
1229+
Edit your original template on your computer, convert it to PDF and then upload as a new template.
1230+
</p>
1231+
</div>
1232+
</details>
1233+
<p>
1234+
If you're happy with this template proof, approve it. Then your template will be ready to add to a message plan.
1235+
</p>
1236+
</section>
1237+
<a
1238+
aria-disabled="false"
1239+
class="nhsuk-button"
1240+
data-testid="preview-letter-template-cta"
1241+
draggable="false"
1242+
href="/templates/submit-letter-template/2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE"
1243+
id="preview-letter-template-cta"
1244+
role="button"
1245+
>
1246+
Approve template proof
1247+
</a>
1248+
<p>
1249+
<a
1250+
href="/message-templates"
1251+
>
1252+
Back to all templates
1253+
</a>
1254+
</p>
1255+
</div>
1256+
</div>
1257+
</main>
1258+
</DocumentFragment>
1259+
`;
1260+
10071261
exports[`PreviewLetterTemplate component matches snapshot when template status is VALIDATION_FAILED 1`] = `
10081262
<DocumentFragment>
10091263
<a

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

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,15 @@ import { TemplateStatus } from 'nhs-notify-backend-client';
1313
import classNames from 'classnames';
1414
import { NhsNotifyErrorSummary } from '@molecules/NhsNotifyErrorSummary/NhsNotifyErrorSummary';
1515
import NotifyBackLink from '@atoms/NHSNotifyBackLink/NHSNotifyBackLink';
16+
import { useFeatureFlags } from '@providers/client-config-provider';
1617

1718
type ButtonDetails = { text: string; href: string };
1819

1920
export function PreviewLetterTemplate({
2021
template,
2122
}: Readonly<{ template: LetterTemplate }>) {
2223
const {
24+
approveProofText,
2325
backLinkText,
2426
footer,
2527
preSubmissionText,
@@ -33,14 +35,15 @@ export function PreviewLetterTemplate({
3335
} = content.components.previewLetterTemplate;
3436

3537
const basePath = getBasePath();
38+
const { routing } = useFeatureFlags();
3639

3740
const buttonMap: Record<string, ButtonDetails> = {
3841
NOT_YET_SUBMITTED: {
3942
text: submitText,
4043
href: `${basePath}/submit-letter-template/${template.id}`,
4144
},
4245
PROOF_AVAILABLE: {
43-
text: submitText,
46+
text: routing ? approveProofText : submitText,
4447
href: `${basePath}/submit-letter-template/${template.id}`,
4548
},
4649
PENDING_PROOF_REQUEST: {
@@ -86,11 +89,12 @@ export function PreviewLetterTemplate({
8689
{preSubmissionText.ifDoesNotMatch.summary}
8790
</Details.Summary>
8891
<Details.Text>
89-
{preSubmissionText.ifDoesNotMatch.paragraphs.map(
90-
(text, i) => (
91-
<p key={i}>{text}</p>
92-
)
93-
)}
92+
{(routing
93+
? preSubmissionText.ifDoesNotMatch.paragraphsApproval
94+
: preSubmissionText.ifDoesNotMatch.paragraphsSubmit
95+
).map((text, i) => (
96+
<p key={i}>{text}</p>
97+
))}
9498
</Details.Text>
9599
</Details>
96100
<Details>
@@ -101,7 +105,11 @@ export function PreviewLetterTemplate({
101105
<p>{preSubmissionText.ifNeedsEdit.paragraph}</p>
102106
</Details.Text>
103107
</Details>
104-
<p>{preSubmissionText.ifYouAreHappyParagraph}</p>
108+
<p>
109+
{routing
110+
? preSubmissionText.ifYouAreHappyParagraphApproval
111+
: preSubmissionText.ifYouAreHappyParagraphSubmit}
112+
</p>
105113
</section>
106114
) : null}
107115

0 commit comments

Comments
 (0)