Skip to content

Commit a25140e

Browse files
alexnuttallalexnuttall
committed
content fixes
1 parent 685f27b commit a25140e

File tree

6 files changed

+356
-7
lines changed

6 files changed

+356
-7
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ exports[`PreviewTemplateDetailsLetter if status is PROOF_AVAILABLE, but no proof
173173
class="nhsuk-summary-list__value"
174174
>
175175
<strong
176-
class="nhsuk-tag nhsuk-tag--yellow"
176+
class="nhsuk-tag nhsuk-tag--orange"
177177
>
178178
Proof available
179179
</strong>
@@ -273,7 +273,7 @@ exports[`PreviewTemplateDetailsLetter matches snapshot when proofs are present,
273273
class="nhsuk-summary-list__value"
274274
>
275275
<strong
276-
class="nhsuk-tag nhsuk-tag--yellow"
276+
class="nhsuk-tag nhsuk-tag--orange"
277277
>
278278
Proof available
279279
</strong>

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,38 @@ describe('PreviewLetterTemplate component', () => {
8181
expect(container.asFragment()).toMatchSnapshot();
8282
});
8383

84+
it('matches snapshot when template status is PROOF_AVAILABLE', () => {
85+
const container = render(
86+
<PreviewLetterTemplate
87+
template={{
88+
id: '2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE',
89+
name: 'letter',
90+
templateType: 'LETTER',
91+
templateStatus: 'PROOF_AVAILABLE',
92+
letterType: 'x1',
93+
language: 'en',
94+
files: {
95+
pdfTemplate: {
96+
fileName: 'file.pdf',
97+
currentVersion: 'b',
98+
virusScanStatus: 'PASSED',
99+
},
100+
proofs: {
101+
'your-proof.pdf': {
102+
fileName: 'your-proof.pdf',
103+
virusScanStatus: 'PASSED',
104+
},
105+
},
106+
},
107+
createdAt: '2025-04-02T09:33:25.729Z',
108+
updatedAt: '2025-04-02T09:33:25.729Z',
109+
}}
110+
/>
111+
);
112+
113+
expect(container.asFragment()).toMatchSnapshot();
114+
});
115+
84116
it('matches snapshot when template status is NOT_YET_SUBMITTED', () => {
85117
const container = render(
86118
<PreviewLetterTemplate
@@ -97,6 +129,12 @@ describe('PreviewLetterTemplate component', () => {
97129
currentVersion: 'b',
98130
virusScanStatus: 'PASSED',
99131
},
132+
proofs: {
133+
'your-proof.pdf': {
134+
fileName: 'your-proof.pdf',
135+
virusScanStatus: 'PASSED',
136+
},
137+
},
100138
},
101139
createdAt: '2025-04-02T09:33:25.729Z',
102140
updatedAt: '2025-04-02T09:33:25.729Z',

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

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -598,6 +598,265 @@ exports[`PreviewLetterTemplate component matches snapshot when template status i
598598
</DocumentFragment>
599599
`;
600600

601+
exports[`PreviewLetterTemplate component matches snapshot when template status is PROOF_AVAILABLE 1`] = `
602+
<DocumentFragment>
603+
<div
604+
class="nhsuk-back-link"
605+
>
606+
<a
607+
class="nhsuk-back-link__link"
608+
href="/templates/message-templates"
609+
id="back-link"
610+
>
611+
<svg
612+
aria-hidden="true"
613+
class="nhsuk-icon nhsuk-icon__chevron-left"
614+
height="24"
615+
viewBox="0 0 24 24"
616+
width="24"
617+
xmlns="http://www.w3.org/2000/svg"
618+
>
619+
<path
620+
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"
621+
/>
622+
</svg>
623+
Back to all templates
624+
</a>
625+
</div>
626+
<main
627+
class="nhsuk-main-wrapper"
628+
id="maincontent"
629+
role="main"
630+
>
631+
<div
632+
class="nhsuk-grid-row"
633+
>
634+
<div
635+
class="nhsuk-grid-column-full"
636+
>
637+
<h1
638+
class="preview__heading"
639+
data-testid="preview-message__heading"
640+
>
641+
letter
642+
</h1>
643+
<div
644+
class="nhsuk-width-container nhsuk-u-margin-bottom-6 nhsuk-body-m"
645+
>
646+
<dl
647+
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
648+
>
649+
<div
650+
class="nhsuk-summary-list__row"
651+
>
652+
<dt
653+
class="nhsuk-summary-list__key"
654+
>
655+
Template ID
656+
</dt>
657+
<dd
658+
class="nhsuk-summary-list__value"
659+
>
660+
2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE
661+
</dd>
662+
</div>
663+
<div
664+
class="nhsuk-summary-list__row"
665+
>
666+
<dt
667+
class="nhsuk-summary-list__key"
668+
>
669+
Type
670+
</dt>
671+
<dd
672+
class="nhsuk-summary-list__value"
673+
>
674+
Large print letter
675+
</dd>
676+
</div>
677+
<div
678+
class="nhsuk-summary-list__row"
679+
>
680+
<dt
681+
class="nhsuk-summary-list__key"
682+
>
683+
Status
684+
</dt>
685+
<dd
686+
class="nhsuk-summary-list__value"
687+
>
688+
<strong
689+
class="nhsuk-tag nhsuk-tag--orange"
690+
>
691+
Proof available
692+
</strong>
693+
</dd>
694+
</div>
695+
<div
696+
class="nhsuk-summary-list__row"
697+
>
698+
<dt
699+
class="nhsuk-summary-list__key"
700+
>
701+
Template file
702+
</dt>
703+
<dd
704+
class="nhsuk-summary-list__value"
705+
>
706+
<div
707+
class="container"
708+
>
709+
<svg
710+
class="icon"
711+
fill="none"
712+
height="26"
713+
viewBox="0 0 20 26"
714+
width="20"
715+
xmlns="http://www.w3.org/2000/svg"
716+
>
717+
<path
718+
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
719+
fill="#4C6272"
720+
/>
721+
</svg>
722+
<p
723+
class="text"
724+
>
725+
file.pdf
726+
</p>
727+
</div>
728+
</dd>
729+
</div>
730+
</dl>
731+
<dl
732+
class="nhsuk-summary-list nhsuk-u-margin-bottom-4 preview"
733+
>
734+
<div
735+
class="nhsuk-summary-list__row"
736+
>
737+
<dt
738+
class="nhsuk-summary-list__key"
739+
>
740+
Template proof files
741+
</dt>
742+
<dd
743+
class="nhsuk-summary-list__value"
744+
>
745+
<ul
746+
class="proofs"
747+
>
748+
<li>
749+
<a
750+
data-testid="proof-link_your-proof.pdf"
751+
href="/templates/files/undefined/proofs/2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE/your-proof.pdf"
752+
rel="noopener noreferrer"
753+
target="_blank"
754+
>
755+
<div
756+
class="container"
757+
>
758+
<svg
759+
class="icon"
760+
fill="none"
761+
height="26"
762+
viewBox="0 0 20 26"
763+
width="20"
764+
xmlns="http://www.w3.org/2000/svg"
765+
>
766+
<path
767+
d="M0 0V26H20V6.59375L19.7188 6.28125L13.7188 0.28125L13.4062 0H0ZM2 2H12V8H18V24H2V2ZM14 3.4375L16.5625 6H14V3.4375Z"
768+
fill="#4C6272"
769+
/>
770+
</svg>
771+
<p
772+
class="text"
773+
>
774+
your-proof.pdf
775+
</p>
776+
</div>
777+
</a>
778+
</li>
779+
</ul>
780+
</dd>
781+
</div>
782+
</dl>
783+
</div>
784+
<details
785+
class="nhsuk-details"
786+
>
787+
<summary
788+
class="nhsuk-details__summary"
789+
>
790+
<span
791+
class="nhsuk-details__summary-text"
792+
>
793+
If this proof does not match the template
794+
</span>
795+
</summary>
796+
<div
797+
class="nhsuk-details__text"
798+
>
799+
<p>
800+
If the content or formatting of your proof does not match the template you originally provided, contact NHS Notify to describe what's wrong with the proof.
801+
</p>
802+
<p>
803+
NHS Notify will make the relevant changes and reproof your template.
804+
</p>
805+
<p>
806+
It can take 5 to 10 working days to get another proof of your template.
807+
</p>
808+
<p>
809+
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.
810+
</p>
811+
</div>
812+
</details>
813+
<details
814+
class="nhsuk-details"
815+
>
816+
<summary
817+
class="nhsuk-details__summary"
818+
>
819+
<span
820+
class="nhsuk-details__summary-text"
821+
>
822+
If you need to edit the template
823+
</span>
824+
</summary>
825+
<div
826+
class="nhsuk-details__text"
827+
>
828+
<p>
829+
Edit your original template on your computer, convert it to PDF and then upload as a new template.
830+
</p>
831+
</div>
832+
</details>
833+
<p>
834+
If you're happy with this proof, submit the template and NHS Notify will use it to set up the messages you want to send.
835+
</p>
836+
<a
837+
aria-disabled="false"
838+
class="nhsuk-button"
839+
data-testid="preview-letter-template-cta"
840+
draggable="false"
841+
href="/templates/submit-letter-template/2C56C5F6-B3AD-4FF8-A8A2-52E4FA8AF2BE"
842+
id="preview-letter-template-cta"
843+
role="button"
844+
>
845+
Submit template
846+
</a>
847+
<p>
848+
<a
849+
href="/message-templates"
850+
>
851+
Back to all templates
852+
</a>
853+
</p>
854+
</div>
855+
</div>
856+
</main>
857+
</DocumentFragment>
858+
`;
859+
601860
exports[`PreviewLetterTemplate component matches snapshot when template status is VALIDATION_FAILED 1`] = `
602861
<DocumentFragment>
603862
<div

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

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ import PreviewTemplateDetailsLetter from '@molecules/PreviewTemplateDetails/Prev
55
import content from '@content/content';
66
import type { LetterTemplate } from 'nhs-notify-web-template-management-utils';
77
import { getBasePath } from '@utils/get-base-path';
8-
import { BackLink, ErrorSummary, ErrorMessage } from 'nhsuk-react-components';
8+
import {
9+
BackLink,
10+
Details,
11+
ErrorMessage,
12+
ErrorSummary,
13+
} from 'nhsuk-react-components';
914
import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
1015
import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
1116
import { TemplateStatus } from 'nhs-notify-backend-client';
@@ -21,12 +26,13 @@ export function PreviewLetterTemplate({
2126
backLinkText,
2227
errorHeading,
2328
footer,
24-
submitText,
29+
preSubmissionText,
2530
requestProofText,
26-
virusScanError,
27-
virusScanErrorAction,
31+
submitText,
2832
validationError,
2933
validationErrorAction,
34+
virusScanError,
35+
virusScanErrorAction,
3036
} = content.components.previewLetterTemplate;
3137

3238
const basePath = getBasePath();
@@ -81,6 +87,32 @@ export function PreviewLetterTemplate({
8187
)}
8288
<PreviewTemplateDetailsLetter template={template} user={user} />
8389

90+
{template.templateStatus === 'PROOF_AVAILABLE' ? (
91+
<>
92+
<Details>
93+
<Details.Summary>
94+
{preSubmissionText.ifDoesNotMatch.summary}
95+
</Details.Summary>
96+
<Details.Text>
97+
{preSubmissionText.ifDoesNotMatch.paragraphs.map(
98+
(text, i) => (
99+
<p key={i}>{text}</p>
100+
)
101+
)}
102+
</Details.Text>
103+
</Details>
104+
<Details>
105+
<Details.Summary>
106+
{preSubmissionText.ifNeedsEdit.summary}
107+
</Details.Summary>
108+
<Details.Text>
109+
<p>{preSubmissionText.ifNeedsEdit.paragraph}</p>
110+
</Details.Text>
111+
</Details>
112+
<p>{preSubmissionText.ifYouAreHappyParagraph}</p>
113+
</>
114+
) : null}
115+
84116
{footerText.length > 0 ? (
85117
<div
86118
className={classNames(

0 commit comments

Comments
 (0)