CCM-11966: Change button text and TemplateStatus on frontend

Author: m-salaudeen

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

@@ -144,16 +144,18 @@ export const SubmitLetterTemplate: FC<{
               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

@@ -666,21 +666,21 @@ 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',
+  pageHeading: 'Approve',
   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',
+    'When you approve your template proof, your template will be ready to add to a message plan.',
+  submitChecklistHeading: 'Before you approve this template proof',
   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.`,
+  warningCalloutText: `You cannot edit a template after you've approved the template proof. You can only create a new template to replace it.`,
   goBackPath: 'preview-letter-template',
   goBackButtonText: submitTemplate.goBackButtonText,
-  buttonText: 'Approve and submit',
+  buttonText: 'Approve template proof',
 };
 
 const copyTemplate = {

frontend/src/styles/app.scss

@@ -44,3 +44,11 @@ pre {
 .inline-block {
   display: inline-block;
 }
+
+.nhsuk-button-background-button {
+  background-color: nhsuk.$nhsuk-input-border-colour;
+}
+
+.nhsuk-button-background-button:hover {
+  background-color: nhsuk.$nhsuk-text-colour;
+}

lambdas/backend-client/src/schemas/union-lists.ts

@@ -50,6 +50,7 @@ export const TEMPLATE_STATUS_LIST = arrayOfAll<TemplateStatus>()([
   'VALIDATION_FAILED',
   'VIRUS_SCAN_FAILED',
   'WAITING_FOR_PROOF',
+  'TEMPLATE_PROOF_APPROVED',
 ]);
 
 export const LANGUAGE_LIST = arrayOfAll<Language>()([

lambdas/backend-client/src/types/generated/types.gen.ts

@@ -228,7 +228,8 @@ export type TemplateStatus =
   | 'VALIDATION_FAILED'
   | 'VIRUS_SCAN_FAILED'
   | 'WAITING_FOR_PROOF'
-  | 'PROOF_AVAILABLE';
+  | 'PROOF_AVAILABLE'
+  | 'TEMPLATE_PROOF_APPROVED';
 
 export type TemplateSuccess = {
   data: TemplateDto;