CCM-11966: Change button text and TemplateStatus on frontend

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,6 +36,22 @@ describe('SubmitLetterTemplate component', () => {
     expect(container.asFragment()).toMatchSnapshot();
   });
 
+  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 disabled', () => {
     jest.mocked(useFeatureFlags).mockReturnValueOnce({ proofing: false });
 

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 enabled 1`] = `
 <DocumentFragment>
   <main
     class="nhsuk-main-wrapper"
@@ -14,17 +14,17 @@ exports[`SubmitLetterTemplate component should render 1`] = `
         class="nhsuk-grid-column-two-thirds"
       >
         <h1>
-          Approve and submit 'template-name'
+          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 +60,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,24 +90,24 @@ 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-background-button"
             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>
@@ -235,3 +235,118 @@ exports[`SubmitLetterTemplate component should render with client proofing disab
   </main>
 </DocumentFragment>
 `;
+
+exports[`SubmitLetterTemplate component should render with client proofing 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 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 this template
+        </h2>
+        <p>
+          Check that your template proof:
+        </p>
+        <ul
+          class="nhsuk-list nhsuk-list--bullet"
+        >
+          <li>
+            looks exactly as you expect your recipient to get it
+          </li>
+          <li>
+            uses personalisation as you expect
+          </li>
+          <li>
+            shows QR codes correctly (if used)
+          </li>
+        </ul>
+        <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 approved and 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"
+          >
+            Approve and submit
+          </button>
+          <a
+            aria-disabled="false"
+            class="nhsuk-button nhsuk-button-background-button"
+            draggable="false"
+            href="/templates/preview-letter-template/template-id"
+            id="go-back-button"
+            role="button"
+          >
+            Go back
+          </a>
+        </form>
+      </div>
+    </div>
+  </main>
+</DocumentFragment>
+`;

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

@@ -96,22 +96,30 @@ export const SubmitLetterTemplate: FC<Omit<ActionPageProps, 'channel'>> = ({
   templateId,
   lockNumber,
 }) => {
+  const features = useFeatureFlags();
   const {
-    buttonText,
+    routingFlagEnabled,
+    routingFlagDisabled,
     goBackButtonText,
     goBackPath,
-    leadParagraph,
-    pageHeading,
-    submitChecklistHeading,
     submitChecklistIntroduction,
     submitChecklistItems,
-    warningCalloutText,
     warningCalloutLabel,
   } = content.components.submitLetterTemplate;
 
   const [_, action] = useActionState(submitTemplate, 'LETTER');
 
-  const features = useFeatureFlags();
+  const pageContent = features.routing
+    ? routingFlagEnabled
+    : routingFlagDisabled;
+
+  const {
+    pageHeading,
+    leadParagraph,
+    submitChecklistHeading,
+    warningCalloutText,
+    buttonText,
+  } = pageContent;
 
   if (!features.proofing) {
     return (
@@ -159,16 +167,18 @@ export const SubmitLetterTemplate: FC<Omit<ActionPageProps, 'channel'>> = ({
               readOnly
             />
             <NHSNotifyButton
-              secondary
-              id='go-back-button'
+              id='submit-template-button'
               className='nhsuk-u-margin-right-3'
+            >
+              {buttonText}
+            </NHSNotifyButton>
+            <NHSNotifyButton
+              className='nhsuk-button-background-button'
+              id='go-back-button'
               href={`${getBasePath()}/${goBackPath}/${templateId}`}
             >
               {goBackButtonText}
             </NHSNotifyButton>
-            <NHSNotifyButton id='submit-template-button'>
-              {buttonText}
-            </NHSNotifyButton>
           </NHSNotifyFormWrapper>
         </div>
       </div>

frontend/src/content/content.ts

@@ -676,21 +676,31 @@ const submitLetterTemplate = {
     warningCalloutLabel: 'Important',
     warningCalloutText: `You cannot edit a template after you've submitted it. You can only replace it with a new template.`,
   },
-  pageHeading: 'Approve and submit',
-  leadParagraph:
-    'When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.',
-  submitChecklistHeading: 'Before you submit this template',
+  routingFlagEnabled: {
+    pageHeading: 'Approve',
+    leadParagraph:
+      'When you approve your template proof, your template will be ready to add to a message plan.',
+    submitChecklistHeading: 'Before you approve this template proof',
+    warningCalloutText: `You cannot edit a template after you've approved the template proof. You can only create a new template to replace it.`,
+    buttonText: 'Approve template proof',
+  },
+  routingFlagDisabled: {
+    pageHeading: 'Approve and submit',
+    leadParagraph:
+      'When you submit a letter template, it will be used by NHS Notify to set up the messages you want to send.',
+    submitChecklistHeading: 'Before you submit this template',
+    warningCalloutText: `You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.`,
+    buttonText: 'Approve and submit',
+  },
   submitChecklistIntroduction: 'Check that your template proof:',
   submitChecklistItems: [
     'looks exactly as you expect your recipient to get it',
     'uses personalisation as you expect',
     'shows QR codes correctly (if used)',
   ],
   warningCalloutLabel: 'Important',
-  warningCalloutText: `You cannot edit a template after you've approved and submitted it. You can only replace it with a new template.`,
   goBackPath: 'preview-letter-template',
   goBackButtonText: submitTemplate.goBackButtonText,
-  buttonText: 'Approve and submit',
 };
 
 const copyTemplate = {

frontend/src/styles/app.scss

@@ -97,6 +97,14 @@ pre {
 
 .inline-block {
   display: inline-block;
+};l,
+
+.nhsuk-button-background-button {
+  background-color: nhsuk.$nhsuk-input-border-colour;
+}
+
+.nhsuk-button-background-button:hover {
+  background-color: nhsuk.$nhsuk-text-colour;
 }
 
 a.nhsuk-link--no-visited-state {

infrastructure/terraform/modules/backend-api/spec.tmpl.json

@@ -815,7 +815,8 @@
           "VALIDATION_FAILED",
           "VIRUS_SCAN_FAILED",
           "WAITING_FOR_PROOF",
-          "PROOF_AVAILABLE"
+          "PROOF_AVAILABLE",
+          "TEMPLATE_PROOF_APPROVED"
         ],
         "type": "string"
       },