diff --git a/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap b/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap index 28374218f..642ff7597 100644 --- a/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap +++ b/frontend/src/__tests__/app/message-plans/choose-email-template/preview-template/__snapshots__/page.test.tsx.snap @@ -132,6 +132,24 @@ exports[`PreviewEmailTemplateFromMessagePlan page renders Email template preview +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+ + Back to template + +
+
+
+

+ Request a proof +

+

+ You must request and approve proofs of your templates before you add them to a message plan. +

+

+ This ensures we send your messages exactly as you expect your recipients to get them. +

+

+ Before you start +

+

+ Only request proofs once your templates are final. +

+

+ You can request proofs for one template or a group of templates in a campaign. +

+

+ Find out more about how to + + approve your messages (opens in a new tab) + + . +

+

+ This process is for NHS App messages, emails and text messages only. Find out + + how to approve letter templates (opens in a new tab) + + . +

+

+ How to request a proof +

+

+ You'll need: +

+
    +
  • + the template ID or IDs +
    • +
  • + the email address you want the proofs sent to +
    • +
  • + your service name +
    • +
  • + the campaign name, if you have one +
    • +
+

+ + Request a proof using ServiceNow (opens in a new tab) + + . +

+
+
+
+
+ +`; diff --git a/frontend/src/__tests__/app/request-a-proof/page.test.tsx b/frontend/src/__tests__/app/request-a-proof/page.test.tsx new file mode 100644 index 000000000..f072682d2 --- /dev/null +++ b/frontend/src/__tests__/app/request-a-proof/page.test.tsx @@ -0,0 +1,100 @@ +import RequestADigitalProofPage, { + generateMetadata, +} from '@app/request-a-proof/[templateId]/page'; +import { render, screen } from '@testing-library/react'; +import pageContent from '@content/content'; +import { redirect } from 'next/navigation'; +import { getTemplate } from '@utils/form-actions'; +import { + EMAIL_TEMPLATE, + NHS_APP_TEMPLATE, + PDF_LETTER_TEMPLATE, + SMS_TEMPLATE, +} from '@testhelpers/helpers'; + +jest.mock('@utils/form-actions'); +jest.mock('next/navigation'); + +const getTemplateMock = jest.mocked(getTemplate); +const redirectMock = jest.mocked(redirect); + +const { pageTitle, backLink } = + pageContent.components.howToRequestADigitalProof; + +describe('RequestADigitalProofPage', () => { + beforeEach(() => { + jest.resetAllMocks(); + }); + + it('matches snapshot', async () => { + getTemplateMock.mockResolvedValueOnce(NHS_APP_TEMPLATE); + + const page = render( + await RequestADigitalProofPage({ + params: Promise.resolve({ + templateId: 'template-id', + }), + }) + ); + + expect(page.asFragment()).toMatchSnapshot(); + }); + + it('should return metadata', async () => { + expect(await generateMetadata()).toEqual({ + title: pageTitle, + }); + }); + + test.each([ + ['nhs-app', NHS_APP_TEMPLATE], + ['text-message', SMS_TEMPLATE], + ['email', EMAIL_TEMPLATE], + ])( + 'should render page for %s template type with expected back link', + async (channelSlug, template) => { + getTemplateMock.mockResolvedValueOnce(template); + + render( + await RequestADigitalProofPage({ + params: Promise.resolve({ + templateId: template.id, + }), + }) + ); + + expect(getTemplateMock).toHaveBeenCalledWith(template.id); + + const backLinkElement = screen.getByRole('link', { name: backLink.text }); + + expect(backLinkElement).toHaveAttribute( + 'href', + `/preview-${channelSlug}-template/${template.id}` + ); + } + ); + + it('should redirect to message templates when no template is found', async () => { + getTemplateMock.mockResolvedValueOnce(undefined); + + await RequestADigitalProofPage({ + params: Promise.resolve({ + templateId: 'template-id', + }), + }); + + expect(redirectMock).toHaveBeenCalledWith('/message-templates'); + }); + + it('should redirect to message templates when template type is LETTER', async () => { + getTemplateMock.mockResolvedValueOnce(PDF_LETTER_TEMPLATE); + + await RequestADigitalProofPage({ + params: Promise.resolve({ + templateId: 'template-id', + }), + }); + + expect(redirectMock).toHaveBeenCalledWith('/message-templates'); + }); +}); diff --git a/frontend/src/__tests__/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.test.tsx b/frontend/src/__tests__/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.test.tsx index a0f5984b7..a60441ecb 100644 --- a/frontend/src/__tests__/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.test.tsx +++ b/frontend/src/__tests__/components/forms/PreviewEmailTemplate/PreviewEmailTemplate.test.tsx @@ -216,4 +216,32 @@ describe('Preview email form renders', () => { 'Rendered via MD' ); }); + + describe('digitalProofingEmail enabled', () => { + beforeEach(() => { + jest + .mocked(useFeatureFlags) + .mockReturnValue({ digitalProofingEmail: true }); + }); + + it('matches snapshot', () => { + const container = render( + >({ + errorState: undefined, + name: 'test-template-email', + templateStatus: 'NOT_YET_SUBMITTED', + templateType: 'EMAIL', + subject: 'template-subject-line', + message: 'message', + id: 'template-id', + })} + /> + ); + + expect(screen.getByTestId('test-message-banner')).toBeInTheDocument(); + + expect(container.asFragment()).toMatchSnapshot(); + }); + }); }); diff --git a/frontend/src/__tests__/components/forms/PreviewEmailTemplate/__snapshots__/PreviewEmailTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/PreviewEmailTemplate/__snapshots__/PreviewEmailTemplate.test.tsx.snap index 3be944f99..0fd68525d 100644 --- a/frontend/src/__tests__/components/forms/PreviewEmailTemplate/__snapshots__/PreviewEmailTemplate.test.tsx.snap +++ b/frontend/src/__tests__/components/forms/PreviewEmailTemplate/__snapshots__/PreviewEmailTemplate.test.tsx.snap @@ -166,6 +166,24 @@ exports[`Preview email form renders Routing feature flag - Disabled Client-side +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -444,6 +462,24 @@ exports[`Preview email form renders Routing feature flag - Disabled matches erro +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -556,6 +592,269 @@ exports[`Preview email form renders Routing feature flag - Disabled matches erro `; +exports[`Preview email form renders digitalProofingEmail enabled matches snapshot 1`] = ` + + + Back to all templates + +
+
+
+
+ + Template + +

+ test-template-email +

+
+
+
+
+
+ Template ID +
+
+ template-id +
+
+
+
+ Template type +
+
+ Email +
+
+
+
+ Status +
+
+ + Draft + +
+
+
+
+
+
+
+ Subject +
+
+
+
+ template-subject-line +
+
+
+
+
+
+ Message +
+
+
+
+ Rendered via MD +
+
+
+
+
+
+
+ This is only a basic preview. + + Send a test email + + to preview this message properly. +
+
+ + + +
+
+ + What would you like to do next? + +
+
+
+ + +
+
+ + +
+
+
+
+
+ + +

+ + Back to all templates + +

+
+
+
+
+`; + exports[`Preview email form renders matches snapshot when navigating from edit screen when routing is false 1`] = ` +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -948,6 +1265,24 @@ exports[`Preview email form renders matches snapshot when navigating from edit s +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -1354,6 +1707,24 @@ exports[`Preview email form renders matches snapshot when navigating from manage +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
{ 'Rendered via MD' ); }); + + describe('digitalProofingNhsApp enabled', () => { + beforeEach(() => { + jest + .mocked(useFeatureFlags) + .mockReturnValue({ digitalProofingNhsApp: true }); + }); + + it('matches snapshot', () => { + const container = render( + >({ + errorState: undefined, + name: 'test-template-nhs-app', + templateStatus: 'NOT_YET_SUBMITTED', + templateType: 'NHS_APP', + message: 'message', + id: 'template-id', + })} + /> + ); + + expect(screen.getByTestId('test-message-banner')).toBeInTheDocument(); + + expect(container.asFragment()).toMatchSnapshot(); + }); + }); }); diff --git a/frontend/src/__tests__/components/forms/PreviewNHSAppTemplate/__snapshots__/PreviewNHSAppTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/PreviewNHSAppTemplate/__snapshots__/PreviewNHSAppTemplate.test.tsx.snap index 86fb477eb..851837779 100644 --- a/frontend/src/__tests__/components/forms/PreviewNHSAppTemplate/__snapshots__/PreviewNHSAppTemplate.test.tsx.snap +++ b/frontend/src/__tests__/components/forms/PreviewNHSAppTemplate/__snapshots__/PreviewNHSAppTemplate.test.tsx.snap @@ -141,6 +141,24 @@ exports[`Preview nhs app form renders Routing feature flag - Disabled Client-sid +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -395,6 +413,24 @@ exports[`Preview nhs app form renders Routing feature flag - Disabled matches er +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -508,6 +544,245 @@ exports[`Preview nhs app form renders Routing feature flag - Disabled matches er `; +exports[`Preview nhs app form renders digitalProofingNhsApp enabled matches snapshot 1`] = ` + + + Back to all templates + +
+
+
+
+ + Template + +

+ test-template-nhs-app +

+
+
+
+
+
+ Template ID +
+
+ template-id +
+
+
+
+ Template type +
+
+ NHS App message +
+
+
+
+ Status +
+
+ + Draft + +
+
+
+
+
+
+
+ Message +
+
+
+
+ Rendered via MD +
+
+
+
+
+
+
+ This is only a basic preview. + + Send a test NHS App message + + to preview this message properly. +
+
+ + + +
+
+ + What would you like to do next? + +
+
+
+ + +
+
+ + +
+
+
+
+
+ + + +

+ + Back to all templates + +

+
+
+
+
+`; + exports[`Preview nhs app form renders matches snapshot when navigating from edit screen when routing is false 1`] = ` +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -851,6 +1144,24 @@ exports[`Preview nhs app form renders matches snapshot when navigating from edit +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -1209,6 +1538,24 @@ exports[`Preview nhs app form renders matches snapshot when navigating from mana +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
{ 'Rendered via MD' ); }); + + describe('digitalProofingSms enabled', () => { + beforeEach(() => { + jest + .mocked(useFeatureFlags) + .mockReturnValue({ digitalProofingSms: true }); + }); + + it('matches snapshot', () => { + const container = render( + >({ + errorState: undefined, + name: 'test-template-sms', + templateStatus: 'NOT_YET_SUBMITTED', + templateType: 'SMS', + message: 'message', + id: 'template-id', + })} + /> + ); + + expect(screen.getByTestId('test-message-banner')).toBeInTheDocument(); + + expect(container.asFragment()).toMatchSnapshot(); + }); + }); }); diff --git a/frontend/src/__tests__/components/forms/PreviewSMSTemplate/__snapshots__/PreviewSMSTemplate.test.tsx.snap b/frontend/src/__tests__/components/forms/PreviewSMSTemplate/__snapshots__/PreviewSMSTemplate.test.tsx.snap index 04fafb872..b45cf1def 100644 --- a/frontend/src/__tests__/components/forms/PreviewSMSTemplate/__snapshots__/PreviewSMSTemplate.test.tsx.snap +++ b/frontend/src/__tests__/components/forms/PreviewSMSTemplate/__snapshots__/PreviewSMSTemplate.test.tsx.snap @@ -141,6 +141,24 @@ exports[`Review sms form renders Routing feature flag - Disabled Client-side val +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -394,6 +412,24 @@ exports[`Review sms form renders Routing feature flag - Disabled matches error s +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -506,6 +542,244 @@ exports[`Review sms form renders Routing feature flag - Disabled matches error s `; +exports[`Review sms form renders digitalProofingSms enabled matches snapshot 1`] = ` + + + Back to all templates + +
+
+
+
+ + Template + +

+ test-template-sms +

+
+
+
+
+
+ Template ID +
+
+ template-id +
+
+
+
+ Template type +
+
+ Text message (SMS) +
+
+
+
+ Status +
+
+ + Draft + +
+
+
+
+
+
+
+ Message +
+
+
+
+ Rendered via MD +
+
+
+
+
+
+
+ This is only a basic preview. + + Send a test text message + + to preview this message properly. +
+
+ + + +
+
+ + What would you like to do next? + +
+
+
+ + +
+
+ + +
+
+
+
+
+ + +

+ + Back to all templates + +

+
+
+
+
+`; + exports[`Review sms form renders matches snapshot when navigating from edit screen when routing is false 1`] = ` +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -848,6 +1140,24 @@ exports[`Review sms form renders matches snapshot when navigating from edit scre +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
@@ -1204,6 +1532,24 @@ exports[`Review sms form renders matches snapshot when navigating from manage te +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
{ + test.each<[string, string, DigitalTemplate]>([ + ['nhs-app-message', 'Send a test NHS App message', NHS_APP_TEMPLATE], + ['email', 'Send a test email', EMAIL_TEMPLATE], + ['text-message', 'Send a test text message', SMS_TEMPLATE], + ])( + 'should show test message banner when digital proofing is enabled for %s template', + (slug, linkName, template) => { + const container = render( + + ); + + expect( + screen.queryByTestId('request-proof-message-banner-link') + ).not.toBeInTheDocument(); + + expect(screen.getByTestId('test-message-banner')).toBeInTheDocument(); + + expect(screen.getByRole('link', { name: linkName })).toHaveAttribute( + 'href', + `/templates/send-test-${slug}/template-id-123` + ); + + expect(container.asFragment()).toMatchSnapshot(); + } + ); + + test.each<[string, DigitalTemplate]>([ + ['NHS_APP', NHS_APP_TEMPLATE], + ['EMAIL', EMAIL_TEMPLATE], + ['SMS', SMS_TEMPLATE], + ])( + 'should show request proof banner when digital proofing is disabled for %s template', + (_, template) => { + const container = render( + + ); + + expect( + screen.queryByTestId('test-message-banner') + ).not.toBeInTheDocument(); + + expect( + screen.getByTestId('request-proof-message-banner') + ).toBeInTheDocument(); + + expect( + screen.getByRole('link', { name: 'Request a proof' }) + ).toHaveAttribute('href', `/templates/request-a-proof/template-id-123`); + + expect(container.asFragment()).toMatchSnapshot(); + } + ); +}); diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap index 86ef24703..51168a7a6 100644 --- a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap +++ b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewSubmittedTemplate.test.tsx.snap @@ -389,6 +389,24 @@ exports[`PreviewSubmittedTemplate component routing = false should render app me +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+

This template cannot be edited because it has been submitted.

@@ -558,6 +576,24 @@ exports[`PreviewSubmittedTemplate component routing = false should render email +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+

This template cannot be edited because it has been submitted.

@@ -702,6 +738,24 @@ exports[`PreviewSubmittedTemplate component routing = false should render sms 1` +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+

This template cannot be edited because it has been submitted.

@@ -1129,6 +1183,24 @@ exports[`PreviewSubmittedTemplate component routing = true should render app mes +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+

+

+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+

+

+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+

+

+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
`; @@ -1031,6 +1049,24 @@ exports[`PreviewTemplateDetailsNhsApp matches snapshot 1`] = ` +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
`; @@ -1638,5 +1674,23 @@ exports[`PreviewTemplateDetailsSms matches snapshot 1`] = ` +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
`; diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetailsBanner.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetailsBanner.test.tsx.snap new file mode 100644 index 000000000..11cb435ba --- /dev/null +++ b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetailsBanner.test.tsx.snap @@ -0,0 +1,139 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PreviewTemplateDetailsBanner should show request proof banner when digital proofing is disabled for EMAIL template 1`] = ` + +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+ +`; + +exports[`PreviewTemplateDetailsBanner should show request proof banner when digital proofing is disabled for NHS_APP template 1`] = ` + +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+ +`; + +exports[`PreviewTemplateDetailsBanner should show request proof banner when digital proofing is disabled for SMS template 1`] = ` + +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+ +`; + +exports[`PreviewTemplateDetailsBanner should show test message banner when digital proofing is enabled for email template 1`] = ` + +
+
+ This is only a basic preview. + + Send a test email + + to preview this message properly. +
+
+ +`; + +exports[`PreviewTemplateDetailsBanner should show test message banner when digital proofing is enabled for nhs-app-message template 1`] = ` + +
+
+ This is only a basic preview. + + Send a test NHS App message + + to preview this message properly. +
+
+ +`; + +exports[`PreviewTemplateDetailsBanner should show test message banner when digital proofing is enabled for text-message template 1`] = ` + +
+
+ This is only a basic preview. + + Send a test text message + + to preview this message properly. +
+
+ +`; diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateFromMessagePlan.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateFromMessagePlan.test.tsx.snap index ee69f8628..dd523040b 100644 --- a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateFromMessagePlan.test.tsx.snap +++ b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateFromMessagePlan.test.tsx.snap @@ -301,6 +301,24 @@ exports[`PreviewTemplateFromMessagePlan renders Email template preview with the +
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
+
+
+ This is only a basic preview. + + Request a proof + + to preview this template properly. +
+
{ screen.queryByTestId('edit-template-button') ).not.toBeInTheDocument(); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); - expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); @@ -212,21 +208,6 @@ describe('PreviewDigitalTemplate', () => { .mockReturnValue({ routing: true, digitalProofingNhsApp: true }); }); - it('displays banner for draft NHS_APP template with correct link', () => { - renderPreviewTemplate('NHS_APP', { - id: 'template-123', - templateStatus: 'NOT_YET_SUBMITTED', - }); - - expect(screen.getByTestId('test-message-banner')).toBeVisible(); - expect( - screen.getByRole('link', { name: 'Send a test NHS App message' }) - ).toHaveAttribute( - 'href', - '/templates/send-test-nhs-app-message/template-123' - ); - }); - it('displays "Send test message" button for draft NHS_APP template', () => { renderPreviewTemplate('NHS_APP', { id: 'template-123', @@ -253,31 +234,25 @@ describe('PreviewDigitalTemplate', () => { }); it.each<[string]>([['EMAIL'], ['SMS']])( - 'does not display test message banner or button for draft %s template', + 'does not display "Send test message" button for draft %s template', (templateType) => { renderPreviewTemplate(templateType as 'EMAIL' | 'SMS', { id: 'template-123', templateStatus: 'NOT_YET_SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); } ); - it('does not display test message banner or button for submitted NHS_APP template', () => { + it('does not display "Send test message" button for submitted NHS_APP template', () => { renderPreviewTemplate('NHS_APP', { id: 'template-123', templateStatus: 'SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); @@ -291,18 +266,6 @@ describe('PreviewDigitalTemplate', () => { .mockReturnValue({ routing: true, digitalProofingEmail: true }); }); - it('displays banner for draft EMAIL template with correct link', () => { - renderPreviewTemplate('EMAIL', { - id: 'template-456', - templateStatus: 'NOT_YET_SUBMITTED', - }); - - expect(screen.getByTestId('test-message-banner')).toBeVisible(); - expect( - screen.getByRole('link', { name: 'Send a test email' }) - ).toHaveAttribute('href', '/templates/send-test-email/template-456'); - }); - it('displays "Send test message" button for draft EMAIL template', () => { renderPreviewTemplate('EMAIL', { id: 'template-456', @@ -329,31 +292,25 @@ describe('PreviewDigitalTemplate', () => { }); it.each<[string]>([['NHS_APP'], ['SMS']])( - 'does not display test message banner or button for draft %s template', + 'does not display "Send test message" button for draft %s template', (templateType) => { renderPreviewTemplate(templateType as 'NHS_APP' | 'SMS', { id: 'template-456', templateStatus: 'NOT_YET_SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); } ); - it('does not display test message banner or button for submitted EMAIL template', () => { + it('does not display "Send test message" button for submitted EMAIL template', () => { renderPreviewTemplate('EMAIL', { id: 'template-456', templateStatus: 'SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); @@ -367,21 +324,6 @@ describe('PreviewDigitalTemplate', () => { .mockReturnValue({ routing: true, digitalProofingSms: true }); }); - it('displays banner for draft SMS template with correct link', () => { - renderPreviewTemplate('SMS', { - id: 'template-789', - templateStatus: 'NOT_YET_SUBMITTED', - }); - - expect(screen.getByTestId('test-message-banner')).toBeVisible(); - expect( - screen.getByRole('link', { name: 'Send a test text message' }) - ).toHaveAttribute( - 'href', - '/templates/send-test-text-message/template-789' - ); - }); - it('displays "Send test message" button for draft SMS template', () => { renderPreviewTemplate('SMS', { id: 'template-789', @@ -408,31 +350,25 @@ describe('PreviewDigitalTemplate', () => { }); it.each<[string]>([['NHS_APP'], ['EMAIL']])( - 'does not display test message banner or button for draft %s template', + 'does not display "Send test message" button for draft %s template', (templateType) => { renderPreviewTemplate(templateType as 'NHS_APP' | 'EMAIL', { id: 'template-789', templateStatus: 'NOT_YET_SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); } ); - it('does not display test message banner or button for submitted SMS template', () => { + it('does not display "Send test message" button for submitted SMS template', () => { renderPreviewTemplate('SMS', { id: 'template-789', templateStatus: 'SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); @@ -445,16 +381,13 @@ describe('PreviewDigitalTemplate', () => { }); it.each<[string]>([['NHS_APP'], ['EMAIL'], ['SMS']])( - 'does not display test message banner or button for draft %s template', + 'does not display "Send test message" button for draft %s template', (templateType) => { renderPreviewTemplate(templateType as 'NHS_APP' | 'EMAIL' | 'SMS', { id: 'template-000', templateStatus: 'NOT_YET_SUBMITTED', }); - expect( - screen.queryByTestId('test-message-banner') - ).not.toBeInTheDocument(); expect( screen.queryByRole('button', { name: 'Send a test message' }) ).not.toBeInTheDocument(); diff --git a/frontend/src/__tests__/components/organisms/__snapshots__/PreviewDigitalTemplate.test.tsx.snap b/frontend/src/__tests__/components/organisms/__snapshots__/PreviewDigitalTemplate.test.tsx.snap index 755130d31..979f9b59b 100644 --- a/frontend/src/__tests__/components/organisms/__snapshots__/PreviewDigitalTemplate.test.tsx.snap +++ b/frontend/src/__tests__/components/organisms/__snapshots__/PreviewDigitalTemplate.test.tsx.snap @@ -8,24 +8,6 @@ exports[`PreviewDigitalTemplate Digital proofing when digitalProofingEmail is en Template saved Preview -
-
- This is only a basic preview. - - Send a test email - - to preview this message properly. -
-
Preview -
-
- This is only a basic preview. - - Send a test NHS App message - - to preview this message properly. -
-
Preview -
-
- This is only a basic preview. - - Send a test text message - - to preview this message properly. -
-
{ + return { + title: pageTitle, + }; +} + +const RequestDigitalProofPage = async (props: TemplatePageProps) => { + const { templateId } = await props.params; + const template = await getTemplate(templateId); + + if (!template || template.templateType === 'LETTER') { + return redirect('/message-templates'); + } + + return ( + + + {backLink.text} + + +
+
+ +
+
+ + + ); +}; + +export default RequestDigitalProofPage; diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetails.module.scss b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetails.module.scss index c8b3e6695..377b761b8 100644 --- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetails.module.scss +++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetails.module.scss @@ -27,3 +27,17 @@ flex-direction: column; gap: 8px; } + +.message-banner { + margin-top: -40px; + + &:global(.nhsuk-summary-list) { + border-top: 0; + } +} + +.message-banner__callout { + margin: 1rem !important; + max-width: initial; +} + diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsBanner.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsBanner.tsx new file mode 100644 index 000000000..e7568063c --- /dev/null +++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsBanner.tsx @@ -0,0 +1,37 @@ +import classNames from 'classnames'; +import content from '@content/content'; +import styles from './PreviewTemplateDetails.module.scss'; +import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent'; +import { NHSNotifyWarningCallout } from '@atoms/NHSNotifyWarningCallout/NHSNotifyWarningCallout'; +import type { DigitalTemplate } from 'nhs-notify-web-template-management-utils'; + +const { testMessageBanner, requestProofBanner } = + content.components.previewDigitalTemplate; + +export const PreviewTemplateDetailsBanner = ({ + digitalProofingEnabled, + template, +}: { + digitalProofingEnabled: boolean; + template: DigitalTemplate; +}) => { + const banner = digitalProofingEnabled + ? testMessageBanner[template.templateType] + : requestProofBanner; + + return ( +
+ + + +
+ ); +}; diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx index fa9a526be..7eb763bd8 100644 --- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx +++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsEmail.tsx @@ -15,6 +15,7 @@ import { Container } from 'nhsuk-react-components'; import concatClassNames from '@utils/concat-class-names'; import { renderEmailMarkdown } from '@utils/markdownit'; import { useFeatureFlags } from '@providers/client-config-provider'; +import { PreviewTemplateDetailsBanner } from './PreviewTemplateDetailsBanner'; export default function PreviewTemplateDetailsEmail({ template, @@ -56,6 +57,10 @@ export default function PreviewTemplateDetailsEmail({ /> + ); } diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx index 2b14f2c49..a9d11c869 100644 --- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx +++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsNhsApp.tsx @@ -15,6 +15,7 @@ import { Container } from 'nhsuk-react-components'; import concatClassNames from '@utils/concat-class-names'; import { renderNHSAppMarkdown } from '@utils/markdownit'; import { useFeatureFlags } from '@providers/client-config-provider'; +import { PreviewTemplateDetailsBanner } from './PreviewTemplateDetailsBanner'; export default function PreviewTemplateDetailsNhsApp({ template, @@ -29,11 +30,9 @@ export default function PreviewTemplateDetailsNhsApp({ return ( <> - {features.routing && template.templateStatus === 'SUBMITTED' && ( )} - @@ -52,6 +51,10 @@ export default function PreviewTemplateDetailsNhsApp({ /> + ); } diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx index 661e7e323..4e83acaff 100644 --- a/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx +++ b/frontend/src/components/molecules/PreviewTemplateDetails/PreviewTemplateDetailsSms.tsx @@ -15,6 +15,7 @@ import { Container } from 'nhsuk-react-components'; import concatClassNames from '@utils/concat-class-names'; import { renderSMSMarkdown } from '@utils/markdownit'; import { useFeatureFlags } from '@providers/client-config-provider'; +import { PreviewTemplateDetailsBanner } from './PreviewTemplateDetailsBanner'; export default function PreviewTemplateDetailsSms({ template, @@ -52,6 +53,10 @@ export default function PreviewTemplateDetailsSms({ /> + ); } diff --git a/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.module.scss b/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.module.scss deleted file mode 100644 index 953687207..000000000 --- a/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.test-message-banner { - margin-top: -40px; - - &:global(.nhsuk-summary-list) { - border-top: 0; - } -} - -.test-message-banner__callout { - margin: 1rem !important; - max-width: initial; -} diff --git a/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.tsx b/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.tsx index 3e8f56106..a798e2f0c 100644 --- a/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.tsx +++ b/frontend/src/components/organisms/PreviewDigitalTemplate/PreviewDigitalTemplate.tsx @@ -11,16 +11,10 @@ import { DigitalTemplateType, sendDigitalTemplateTestMessageUrl, } from 'nhs-notify-web-template-management-utils'; -import { NHSNotifyWarningCallout } from '@atoms/NHSNotifyWarningCallout/NHSNotifyWarningCallout'; -import { MarkdownContent } from '@molecules/MarkdownContent/MarkdownContent'; -import classNames from 'classnames'; -import styles from './PreviewDigitalTemplate.module.scss'; const { editButton, sendTestMessageButton } = content.components.previewDigitalTemplate; -const { testMessageBanner } = content.components.previewDigitalTemplate; - export function PreviewDigitalTemplate(props: PreviewTemplateProps) { const features = useFeatureFlags(); @@ -47,26 +41,6 @@ export function PreviewDigitalTemplate(props: PreviewTemplateProps) { <> {props.previewDetailsComponent} - {isDigitalProofingEnabledForType && ( -
- - - -
- )} -