CCM-15018: How to request a digital proof

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
               </div>
             </dl>
           </div>
+          <div
+            class="nhsuk-summary-list message-banner"
+          >
+            <div
+              class="nhs_notify_warning_callout nhsuk-u-padding-4 nhsuk-u-margin-bottom-6 nhsuk-u-reading-width message-banner__callout"
+              data-testid="request-proof-message-banner"
+            >
+              This is only a basic preview. 
+              <a
+                href="/templates/request-a-proof/email-template-id"
+                rel=""
+                target=""
+              >
+                Request a proof
+              </a>
+               to preview this template properly.
+            </div>
+          </div>
           <a
             class="nhsuk-link nhsuk-body-m nhsuk-u-display-inline-block"
             data-testid="back-link-bottom"

frontend/src/__tests__/app/message-plans/choose-nhs-app-template/preview-template/__snapshots__/page.test.tsx.snap

@@ -107,6 +107,24 @@ exports[`PreviewNhsAppTemplateFromMessagePlan page renders NHS App template prev
               </div>
             </dl>
           </div>
+          <div
+            class="nhsuk-summary-list message-banner"
+          >
+            <div
+              class="nhs_notify_warning_callout nhsuk-u-padding-4 nhsuk-u-margin-bottom-6 nhsuk-u-reading-width message-banner__callout"
+              data-testid="request-proof-message-banner"
+            >
+              This is only a basic preview. 
+              <a
+                href="/templates/request-a-proof/app-template-id"
+                rel=""
+                target=""
+              >
+                Request a proof
+              </a>
+               to preview this template properly.
+            </div>
+          </div>
           <a
             class="nhsuk-link nhsuk-body-m nhsuk-u-display-inline-block"
             data-testid="back-link-bottom"

frontend/src/__tests__/app/message-plans/choose-text-message-template/preview-template/__snapshots__/page.test.tsx.snap

@@ -107,6 +107,24 @@ exports[`PreviewTextMessageTemplateFromMessagePlan page renders SMS template pre
               </div>
             </dl>
           </div>
+          <div
+            class="nhsuk-summary-list message-banner"
+          >
+            <div
+              class="nhs_notify_warning_callout nhsuk-u-padding-4 nhsuk-u-margin-bottom-6 nhsuk-u-reading-width message-banner__callout"
+              data-testid="request-proof-message-banner"
+            >
+              This is only a basic preview. 
+              <a
+                href="/templates/request-a-proof/sms-template-id"
+                rel=""
+                target=""
+              >
+                Request a proof
+              </a>
+               to preview this template properly.
+            </div>
+          </div>
           <a
             class="nhsuk-link nhsuk-body-m nhsuk-u-display-inline-block"
             data-testid="back-link-bottom"

frontend/src/__tests__/app/request-a-proof/__snapshots__/page.test.tsx.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RequestADigitalProofPage matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="nhsuk-width-container"
+  >
+    <a
+      class="nhsuk-back-link"
+      data-testid="back-link-top"
+      href="/preview-nhs-app-template/app-template-id"
+    >
+      Back to template
+    </a>
+    <main
+      class="nhsuk-main-wrapper"
+      id="maincontent"
+      role="main"
+    >
+      <div
+        class="nhsuk-grid-row"
+      >
+        <div
+          class="nhsuk-grid-column-two-thirds"
+        >
+          <h1
+            id="request-a-proof"
+          >
+            Request a proof
+          </h1>
+          <p>
+            You must request and approve proofs of your templates before you add them to a message plan.
+          </p>
+          <p>
+            This ensures we send your messages exactly as you expect your recipients to get them.
+          </p>
+          <h2
+            class="nhsuk-heading-m"
+            id="before-you-start"
+          >
+            Before you start
+          </h2>
+          <p>
+            Only request proofs once your templates are final.
+          </p>
+          <p>
+            You can request proofs for one template or a group of templates in a campaign.
+          </p>
+          <p>
+            Find out more about how to 
+            <a
+              href="https://notify.nhs.uk/using-nhs-notify/approve-your-messages"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              approve your messages (opens in a new tab)
+            </a>
+            .
+          </p>
+          <p
+            class="nhsuk-inset-text"
+          >
+            This process is for NHS App messages, emails and text messages only. Find out 
+            <a
+              href="https://notify.nhs.uk/using-nhs-notify/approve-your-messages#requesting-letter-proofs"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              how to approve letter templates (opens in a new tab)
+            </a>
+            .
+          </p>
+          <h2
+            class="nhsuk-heading-m"
+            id="how-to-request-a-proof"
+          >
+            How to request a proof
+          </h2>
+          <p>
+            You'll need:
+          </p>
+          <ul>
+            <li>
+              the template ID or IDs
+            </li>
+            <li>
+              the email address you want the proofs sent to
+            </li>
+            <li>
+              your service name
+            </li>
+            <li>
+              the campaign name, if you have one
+            </li>
+          </ul>
+          <p>
+            <a
+              href="https://nhsdigitallive.service-now.com/csm"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Request a proof using ServiceNow (opens in a new tab)
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </main>
+  </div>
+</DocumentFragment>
+`;

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');
+  });
+});

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(
+        <PreviewEmailTemplate
+          initialState={mockDeep<TemplateFormState<EmailTemplate>>({
+            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();
+    });
+  });
 });