CCM-11966: proof approved status

frontend/src/__tests__/app/submit-letter-template/page.test.tsx

@@ -15,13 +15,17 @@ import {
   SMS_TEMPLATE,
 } from '@testhelpers/helpers';
 import { LetterTemplate } from 'nhs-notify-web-template-management-utils';
+import content from '@content/content';
+import { serverIsFeatureEnabled } from '@utils/server-features';
 
 jest.mock('@utils/form-actions');
 jest.mock('next/navigation');
 jest.mock('@forms/SubmitTemplate/SubmitLetterTemplate');
+jest.mock('@utils/server-features');
 
 const getTemplateMock = jest.mocked(getTemplate);
 const redirectMock = jest.mocked(redirect);
+const serverIsFeatureEnabledMock = jest.mocked(serverIsFeatureEnabled);
 
 describe('SubmitLetterTemplatePage', () => {
   beforeEach(() => {
@@ -112,11 +116,27 @@ describe('SubmitLetterTemplatePage', () => {
     );
   });
 
-  test('should generate metadata', async () => {
+  test('should generate metadata with routing-enabled title when routing feature is enabled', async () => {
+    serverIsFeatureEnabledMock.mockResolvedValueOnce(true);
+
+    const metadata = await generateMetadata();
+
+    expect(metadata).toEqual({
+      title: content.pages.submitLetterTemplate.routingFlagEnabled.pageTitle,
+    });
+
+    expect(serverIsFeatureEnabledMock).toHaveBeenCalledWith('routing');
+  });
+
+  test('should generate metadata with routing-disabled title when routing feature is disabled', async () => {
+    serverIsFeatureEnabledMock.mockResolvedValueOnce(false);
+
     const metadata = await generateMetadata();
 
     expect(metadata).toEqual({
-      title: 'Submit letter template',
+      title: content.pages.submitLetterTemplate.routingFlagDisabled.pageTitle,
     });
+
+    expect(serverIsFeatureEnabledMock).toHaveBeenCalledWith('routing');
   });
 });

frontend/src/__tests__/components/forms/SubmitTemplate/SubmitLetterTemplate.test.tsx

@@ -22,7 +22,7 @@ jest.mock('@forms/SubmitTemplate/server-action', () => ({
 jest.mock('@providers/client-config-provider');
 
 describe('SubmitLetterTemplate component', () => {
-  it('should render', () => {
+  it('should render with client proofing enabled', () => {
     jest.mocked(useFeatureFlags).mockReturnValueOnce({ proofing: true });
 
     const container = render(
@@ -36,8 +36,24 @@ describe('SubmitLetterTemplate component', () => {
     expect(container.asFragment()).toMatchSnapshot();
   });
 
-  it('should render with client proofing disabled', () => {
-    jest.mocked(useFeatureFlags).mockReturnValueOnce({ proofing: false });
+  it('should render with client proofing and routing enabled', () => {
+    jest
+      .mocked(useFeatureFlags)
+      .mockReturnValueOnce({ proofing: true, routing: true });
+
+    const container = render(
+      <SubmitLetterTemplate
+        templateId='template-id'
+        templateName='template-name'
+        lockNumber={1234}
+      />
+    );
+
+    expect(container.asFragment()).toMatchSnapshot();
+  });
+
+  it('should render with client proofing and routing disabled', () => {
+    jest.mocked(useFeatureFlags).mockReturnValueOnce({});
 
     const container = render(
       <SubmitLetterTemplate

frontend/src/__tests__/components/forms/SubmitTemplate/__snapshots__/SubmitLetterTemplate.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SubmitLetterTemplate component should render 1`] = `
+exports[`SubmitLetterTemplate component should render with client proofing and routing disabled 1`] = `
 <DocumentFragment>
   <main
     class="nhsuk-main-wrapper"
@@ -14,17 +14,138 @@ exports[`SubmitLetterTemplate component should render 1`] = `
         class="nhsuk-grid-column-two-thirds"
       >
         <h1>
-          Approve and submit 'template-name'
+          Submit 'template-name'
+        </h1>
+        <h2
+          class="nhsuk-heading-s"
+        >
+          Before you submit
+        </h2>
+        <p>
+          You should check that your template:
+        </p>
+        <ul
+          class="nhsuk-list nhsuk-list--bullet"
+        >
+          <li>
+            is approved by the relevant stakeholders in your team
+          </li>
+          <li>
+            does not have any spelling errors
+          </li>
+          <li>
+            is formatted correctly
+          </li>
+        </ul>
+        <h2
+          class="nhsuk-heading-s"
+        >
+          After you submit this template
+        </h2>
+        <p>
+          Our service team will send you a proof of this letter template by email.
+        </p>
+        <p>
+          This email will also tell you what you need to do next.
+        </p>
+        <div
+          class="nhsuk-warning-callout"
+        >
+          <h2
+            class="nhsuk-warning-callout__label"
+          >
+            <span
+              role="text"
+            >
+              <span
+                class="nhsuk-u-visually-hidden"
+              >
+                Important: 
+              </span>
+              Important
+            </span>
+          </h2>
+          <p>
+            You cannot edit a template after you've submitted it. You can only replace it with a new template.
+          </p>
+        </div>
+        <form
+          action="/action"
+        >
+          <input
+            name="form-id"
+            readonly=""
+            type="hidden"
+            value="submit-template-form"
+          />
+          <input
+            name="csrf_token"
+            readonly=""
+            type="hidden"
+            value="no_token"
+          />
+          <input
+            name="templateId"
+            readonly=""
+            type="hidden"
+            value="template-id"
+          />
+          <input
+            name="lockNumber"
+            readonly=""
+            type="hidden"
+            value="1234"
+          />
+          <button
+            aria-disabled="false"
+            class="nhsuk-button nhsuk-u-margin-right-3"
+            id="submit-template-button"
+            type="submit"
+          >
+            Submit template
+          </button>
+          <a
+            aria-disabled="false"
+            class="nhsuk-button nhsuk-button--secondary"
+            data-testid="back-link-bottom"
+            draggable="false"
+            href="/templates/preview-letter-template/template-id"
+            role="button"
+          >
+            Go back
+          </a>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;
+
+exports[`SubmitLetterTemplate component should render with client proofing and routing enabled 1`] = `
+<DocumentFragment>
+  <main
+    class="nhsuk-main-wrapper"
+    id="maincontent"
+    role="main"
+  >
+    <div
+      class="nhsuk-grid-row"
+    >
+      <div
+        class="nhsuk-grid-column-two-thirds"
+      >
+        <h1>
+          Approve 'template-name'
         </h1>
         <p
           class="nhsuk-body-l"
         >
-          When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.
+          When you approve your template proof, your template will be ready to add to a message plan.
         </p>
         <h2
           class="nhsuk-heading-s"
         >
-          Before you submit this template
+          Before you approve this template proof
         </h2>
         <p>
           Check that your template proof:
@@ -60,7 +181,7 @@ exports[`SubmitLetterTemplate component should render 1`] = `
             </span>
           </h2>
           <p>
-            You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.
+            You cannot edit a template after you've approved the template proof. You can only create a new template to replace it.
           </p>
         </div>
         <form
@@ -90,32 +211,33 @@ exports[`SubmitLetterTemplate component should render 1`] = `
             type="hidden"
             value="1234"
           />
+          <button
+            aria-disabled="false"
+            class="nhsuk-button nhsuk-u-margin-right-3"
+            id="submit-template-button"
+            type="submit"
+          >
+            Approve template proof
+          </button>
           <a
             aria-disabled="false"
-            class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-right-3"
+            class="nhsuk-button nhsuk-button--secondary"
             data-testid="back-link-bottom"
             draggable="false"
             href="/templates/preview-letter-template/template-id"
+            id="go-back-button"
             role="button"
           >
             Go back
           </a>
-          <button
-            aria-disabled="false"
-            class="nhsuk-button"
-            id="submit-template-button"
-            type="submit"
-          >
-            Approve and submit
-          </button>
         </form>
       </div>
     </div>
   </main>
 </DocumentFragment>
 `;
 
-exports[`SubmitLetterTemplate component should render with client proofing disabled 1`] = `
+exports[`SubmitLetterTemplate component should render with client proofing enabled 1`] = `
 <DocumentFragment>
   <main
     class="nhsuk-main-wrapper"
@@ -129,40 +251,34 @@ exports[`SubmitLetterTemplate component should render with client proofing disab
         class="nhsuk-grid-column-two-thirds"
       >
         <h1>
-          Submit 'template-name'
+          Approve and submit 'template-name'
         </h1>
+        <p
+          class="nhsuk-body-l"
+        >
+          When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.
+        </p>
         <h2
           class="nhsuk-heading-s"
         >
-          Before you submit
+          Before you submit this template
         </h2>
         <p>
-          You should check that your template:
+          Check that your template proof:
         </p>
         <ul
           class="nhsuk-list nhsuk-list--bullet"
         >
           <li>
-            is approved by the relevant stakeholders in your team
+            looks exactly as you expect your recipient to get it
           </li>
           <li>
-            does not have any spelling errors
+            uses personalisation as you expect
           </li>
           <li>
-            is formatted correctly
+            shows QR codes correctly (if used)
           </li>
         </ul>
-        <h2
-          class="nhsuk-heading-s"
-        >
-          After you submit this template
-        </h2>
-        <p>
-          Our service team will send you a proof of this letter template by email.
-        </p>
-        <p>
-          This email will also tell you what you need to do next.
-        </p>
         <div
           class="nhsuk-warning-callout"
         >
@@ -181,7 +297,7 @@ exports[`SubmitLetterTemplate component should render with client proofing disab
             </span>
           </h2>
           <p>
-            You cannot edit a template after you've submitted it. You can only replace it with a new template.
+            You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.
           </p>
         </div>
         <form
@@ -211,24 +327,25 @@ exports[`SubmitLetterTemplate component should render with client proofing disab
             type="hidden"
             value="1234"
           />
+          <button
+            aria-disabled="false"
+            class="nhsuk-button nhsuk-u-margin-right-3"
+            id="submit-template-button"
+            type="submit"
+          >
+            Approve and submit
+          </button>
           <a
             aria-disabled="false"
-            class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-right-3"
+            class="nhsuk-button nhsuk-button--secondary"
             data-testid="back-link-bottom"
             draggable="false"
             href="/templates/preview-letter-template/template-id"
+            id="go-back-button"
             role="button"
           >
             Go back
           </a>
-          <button
-            aria-disabled="false"
-            class="nhsuk-button"
-            id="submit-template-button"
-            type="submit"
-          >
-            Submit template
-          </button>
         </form>
       </div>
     </div>