CCM-15018: How to request a digital proof

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/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>
+              yo,ur service name
+            </li>
+            <li>
+              the campaign name, if you have one
+            </li>
+          </ul>
+          <p>
+            <a
+              href="#"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Request a proof using our online form (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_TEMPLATE, 'nhs-app'],
+    [SMS_TEMPLATE, 'text-message'],
+    [EMAIL_TEMPLATE, 'email'],
+  ])(
+    'should render page for %s template type with expected back link',
+    async (template, channelSlug) => {
+      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/__snapshots__/PreviewEmailTemplate.test.tsx.snap

@@ -952,6 +952,24 @@ exports[`Preview email form renders matches snapshot when navigating from edit s
             </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="message-banner"
+          >
+            This is only a basic preview. 
+            <a
+              href="/templates/request-a-proof/template-id"
+              rel=""
+              target=""
+            >
+              Request a proof
+            </a>
+             to preview this template properly.
+          </div>
+        </div>
         <a
           aria-disabled="false"
           class="nhsuk-button nhsuk-button--secondary"
@@ -1360,6 +1378,24 @@ exports[`Preview email form renders matches snapshot when navigating from manage
             </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="message-banner"
+          >
+            This is only a basic preview. 
+            <a
+              href="/templates/request-a-proof/template-id"
+              rel=""
+              target=""
+            >
+              Request a proof
+            </a>
+             to preview this template properly.
+          </div>
+        </div>
         <a
           aria-disabled="false"
           class="nhsuk-button nhsuk-button--secondary"

frontend/src/__tests__/components/forms/PreviewNHSAppTemplate/__snapshots__/PreviewNHSAppTemplate.test.tsx.snap

@@ -855,6 +855,24 @@ exports[`Preview nhs app form renders matches snapshot when navigating from edit
             </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="message-banner"
+          >
+            This is only a basic preview. 
+            <a
+              href="/templates/request-a-proof/template-id"
+              rel=""
+              target=""
+            >
+              Request a proof
+            </a>
+             to preview this template properly.
+          </div>
+        </div>
         <a
           aria-disabled="false"
           class="nhsuk-button nhsuk-button--secondary"
@@ -1215,6 +1233,24 @@ exports[`Preview nhs app form renders matches snapshot when navigating from mana
             </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="message-banner"
+          >
+            This is only a basic preview. 
+            <a
+              href="/templates/request-a-proof/template-id"
+              rel=""
+              target=""
+            >
+              Request a proof
+            </a>
+             to preview this template properly.
+          </div>
+        </div>
         <a
           aria-disabled="false"
           class="nhsuk-button nhsuk-button--secondary"

frontend/src/__tests__/components/forms/PreviewSMSTemplate/__snapshots__/PreviewSMSTemplate.test.tsx.snap

@@ -852,6 +852,24 @@ exports[`Review sms form renders matches snapshot when navigating from edit scre
             </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="message-banner"
+          >
+            This is only a basic preview. 
+            <a
+              href="/templates/request-a-proof/template-id"
+              rel=""
+              target=""
+            >
+              Request a proof
+            </a>
+             to preview this template properly.
+          </div>
+        </div>
         <a
           aria-disabled="false"
           class="nhsuk-button nhsuk-button--secondary"
@@ -1210,6 +1228,24 @@ exports[`Review sms form renders matches snapshot when navigating from manage te
             </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="message-banner"
+          >
+            This is only a basic preview. 
+            <a
+              href="/templates/request-a-proof/template-id"
+              rel=""
+              target=""
+            >
+              Request a proof
+            </a>
+             to preview this template properly.
+          </div>
+        </div>
         <a
           aria-disabled="false"
           class="nhsuk-button nhsuk-button--secondary"