CCM-11457: make NOT_YET_SUBMITTED letter tag stay as blue. PR reviews

bhansell1 · bhansell1 · commit 6e5538742352 · 2025-09-16T15:03:58.000+01:00
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/MessageTemplates.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/MessageTemplates.test.tsx.snap
@@ -372,7 +372,7 @@ exports[`MessageTemplates component matches snapshot with not submitted status 1
                 Status 
               </span>
               <strong
-                class="nhsuk-tag nhsuk-tag--green"
+                class="nhsuk-tag"
               >
                 Not yet submitted
               </strong>
@@ -797,7 +797,7 @@ exports[`MessageTemplates component matches snapshot with pending proof request
                 Status 
               </span>
               <strong
-                class="nhsuk-tag nhsuk-tag--green"
+                class="nhsuk-tag"
               >
                 Not yet submitted
               </strong>
@@ -1211,7 +1211,7 @@ exports[`MessageTemplates component matches snapshot with submitted status 1`] =
                 Status 
               </span>
               <strong
-                class="nhsuk-tag nhsuk-tag--green"
+                class="nhsuk-tag"
               >
                 Not yet submitted
               </strong>
@@ -1612,7 +1612,7 @@ exports[`MessageTemplates component matches snapshot with waiting for proof stat
                 Status 
               </span>
               <strong
-                class="nhsuk-tag nhsuk-tag--green"
+                class="nhsuk-tag"
               >
                 Not yet submitted
               </strong>
diff --git a/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetails.test.tsx.snap b/frontend/src/__tests__/components/molecules/__snapshots__/PreviewTemplateDetails.test.tsx.snap
@@ -174,7 +174,7 @@ exports[`PreviewTemplateDetailsLetter if status is NOT_YET_SUBMITTED, then Not y
           class="nhsuk-summary-list__value"
         >
           <strong
-            class="nhsuk-tag nhsuk-tag--green"
+            class="nhsuk-tag"
             data-test-id="status-tag-not-yet-submitted"
           >
             Not yet submitted
diff --git a/frontend/src/components/molecules/MessageTemplates/MessageTemplates.tsx b/frontend/src/components/molecules/MessageTemplates/MessageTemplates.tsx
@@ -9,13 +9,12 @@ import Link from 'next/link';
 import {
   letterTypeDisplayMappings,
   previewTemplatePages,
-  templateStatusToColourMappings,
-  templateStatusToDisplayMappings,
   templateTypeDisplayMappings,
   previewSubmittedTemplatePages,
   templateDisplayCopyAction,
   templateDisplayDeleteAction,
-  templateStatusToDisplayMappingsDigital,
+  statusToDisplayMapping,
+  statusToColourMapping,
 } from 'nhs-notify-web-template-management-utils';
 import { TemplateDto } from 'nhs-notify-backend-client';
 import style from './MessageTemplates.module.scss';
@@ -39,11 +38,6 @@ const typeDisplayMappings = (template: TemplateDto): string =>
     ? letterTypeDisplayMappings(template.letterType, template.language)
     : templateTypeDisplayMappings(template.templateType);
 
-const statusToDisplayMapping = (template: TemplateDto): string =>
-  template.templateType === 'LETTER'
-    ? templateStatusToDisplayMappings(template.templateStatus)
-    : templateStatusToDisplayMappingsDigital(template.templateStatus);
-
 export function MessageTemplates({
   templateList,
 }: {
@@ -87,11 +81,7 @@ export function MessageTemplates({
                 </Table.Cell>
                 <Table.Cell>{typeDisplayMappings(template)}</Table.Cell>
                 <Table.Cell>
-                  <Tag
-                    color={templateStatusToColourMappings(
-                      template.templateStatus
-                    )}
-                  >
+                  <Tag color={statusToColourMapping(template)}>
                     {statusToDisplayMapping(template)}
                   </Tag>
                 </Table.Cell>
diff --git a/frontend/src/components/molecules/PreviewTemplateDetails/common.tsx b/frontend/src/components/molecules/PreviewTemplateDetails/common.tsx
@@ -1,9 +1,8 @@
 import { Tag, SummaryList } from 'nhsuk-react-components';
 import concatClassNames from '@utils/concat-class-names';
 import {
-  templateStatusToDisplayMappings,
-  templateStatusToColourMappings,
-  templateStatusToDisplayMappingsDigital,
+  statusToColourMapping,
+  statusToDisplayMapping,
 } from 'nhs-notify-web-template-management-utils';
 import styles from './PreviewTemplateDetails.module.scss';
 import { JSX } from 'react';
@@ -21,11 +20,6 @@ type ContentPreviewField = {
 const { rowHeadings, previewTemplateStatusFootnote } =
   content.components.previewTemplateDetails;
 
-const statusToDisplayMapping = (template: TemplateDto): string =>
-  template.templateType === 'LETTER'
-    ? templateStatusToDisplayMappings(template.templateStatus)
-    : templateStatusToDisplayMappingsDigital(template.templateStatus);
-
 export function DetailSection({ children }: { children: React.ReactNode }) {
   return (
     <SummaryList
@@ -84,7 +78,7 @@ export function StandardDetailRows({
         <SummaryList.Value>
           <Tag
             data-test-id={`status-tag-${toKebabCase(template.templateStatus)}`}
-            color={templateStatusToColourMappings(template.templateStatus)}
+            color={statusToColourMapping(template)}
           >
             {statusToDisplayMapping(template)}
           </Tag>
diff --git a/utils/utils/src/__tests__/enum.test.ts b/utils/utils/src/__tests__/enum.test.ts
@@ -10,8 +10,6 @@ import {
   alphabeticalLetterTypeList,
   letterTypeDisplayMappings,
   previewTemplatePages,
-  templateStatusToColourMappings,
-  templateStatusToDisplayMappings,
   templateTypeDisplayMappings,
   templateTypeToUrlTextMappings,
   previewSubmittedTemplatePages,
@@ -20,7 +18,8 @@ import {
   isRightToLeft,
   languageMapping,
   templateCreationPages,
-  templateStatusToDisplayMappingsDigital,
+  statusToDisplayMapping,
+  statusToColourMapping,
 } from '../enum';
 import { TEMPLATE_STATUS_LIST } from 'nhs-notify-backend-client';
 
@@ -107,33 +106,46 @@ describe('alphabeticalLanguageList', () => {
   });
 });
 
-describe('templateStatusToDisplayMappings', () => {
-  test('NOT_YET_SUBMITTED', () => {
-    expect(templateStatusToDisplayMappings('NOT_YET_SUBMITTED')).toEqual(
-      'Not yet submitted'
-    );
-  });
+describe('statusToDisplayMapping', () => {
+  test.each([
+    { type: 'LETTER' as TemplateType, expected: 'Not yet submitted' },
+    { type: 'NHS_APP' as TemplateType, expected: 'Draft' },
+    { type: 'SMS' as TemplateType, expected: 'Draft' },
+    { type: 'EMAIl' as TemplateType, expected: 'Draft' },
+  ])(
+    'When templateType is %type NOT_YET_SUBMITTED should be %expected',
+    ({ type, expected }) => {
+      expect(
+        statusToDisplayMapping({
+          templateType: type,
+          templateStatus: 'NOT_YET_SUBMITTED',
+        })
+      ).toEqual(expected);
+    }
+  );
 
   test('SUBMITTED', () => {
-    expect(templateStatusToDisplayMappings('SUBMITTED')).toEqual('Submitted');
+    expect(
+      statusToDisplayMapping({
+        templateType: 'SMS',
+        templateStatus: 'SUBMITTED',
+      })
+    ).toEqual('Submitted');
   });
 
   test('DELETED', () => {
-    expect(templateStatusToDisplayMappings('DELETED')).toEqual('');
+    expect(
+      statusToDisplayMapping({
+        templateType: 'SMS',
+        templateStatus: 'DELETED',
+      })
+    ).toEqual('');
   });
 });
 
-describe('templateStatusToDisplayMappingsDigital', () => {
-  test('NOT_YET_SUBMITTED', () => {
-    expect(templateStatusToDisplayMappingsDigital('NOT_YET_SUBMITTED')).toEqual(
-      'Draft'
-    );
-  });
-});
-
-describe('templateStatusToColourMappings', () => {
+describe('statusToColourMapping', () => {
   it.each(TEMPLATE_STATUS_LIST)(
-    'should give the expected colour when templateStatus is %s',
+    'should give the expected colour when templateStatus is %s for LETTERS',
     (templateStatus) => {
       const expectedColours: { [key in TemplateStatus]?: string } = {
         SUBMITTED: 'grey',
@@ -144,11 +156,36 @@ describe('templateStatusToColourMappings', () => {
         VIRUS_SCAN_FAILED: 'red',
         VALIDATION_FAILED: 'red',
         PROOF_AVAILABLE: 'orange',
-        NOT_YET_SUBMITTED: 'green',
       };
 
-      expect(templateStatusToColourMappings(templateStatus)).toEqual(
-        expectedColours[templateStatus]
+      expect(
+        statusToColourMapping({ templateStatus, templateType: 'LETTER' })
+      ).toEqual(expectedColours[templateStatus]);
+    }
+  );
+
+  describe.each(['NHS_APP', 'SMS', 'EMAIL'] as TemplateType[])(
+    'template type: %p',
+    (templateType) => {
+      it.each(TEMPLATE_STATUS_LIST)(
+        'should give the expected colour when templateStatus is %p',
+        (templateStatus) => {
+          const expectedColours: { [key in TemplateStatus]?: string } = {
+            SUBMITTED: 'grey',
+            WAITING_FOR_PROOF: 'yellow',
+            PENDING_PROOF_REQUEST: 'blue',
+            PENDING_UPLOAD: 'blue',
+            PENDING_VALIDATION: 'blue',
+            VIRUS_SCAN_FAILED: 'red',
+            VALIDATION_FAILED: 'red',
+            PROOF_AVAILABLE: 'orange',
+            NOT_YET_SUBMITTED: 'green',
+          };
+
+          expect(
+            statusToColourMapping({ templateStatus, templateType })
+          ).toEqual(expectedColours[templateStatus]);
+        }
       );
     }
   );
diff --git a/utils/utils/src/enum.ts b/utils/utils/src/enum.ts
@@ -101,35 +101,71 @@ const statusToDisplayMappings: Record<TemplateStatus, string> = {
   VIRUS_SCAN_FAILED: 'Checks failed',
   WAITING_FOR_PROOF: 'Waiting for proof',
   PROOF_AVAILABLE: 'Proof available',
-};
+} as const;
 
-export const templateStatusToDisplayMappings = (status: TemplateStatus) =>
+const templateStatusToDisplayMappingsLetter = (status: TemplateStatus) =>
   statusToDisplayMappings[status];
 
-export const templateStatusToDisplayMappingsDigital = (
-  status: TemplateStatus
-) =>
+const templateStatusToDisplayMappingsDigital = (status: TemplateStatus) =>
   ({
     ...statusToDisplayMappings,
     NOT_YET_SUBMITTED: 'Draft',
   })[status];
 
-export const templateStatusToColourMappings = (status: TemplateStatus) =>
+export const statusToDisplayMapping = (
+  template: Pick<TemplateDto, 'templateType' | 'templateStatus'>
+): string =>
+  template.templateType === 'LETTER'
+    ? templateStatusToDisplayMappingsLetter(template.templateStatus)
+    : templateStatusToDisplayMappingsDigital(template.templateStatus);
+
+type Colour =
+  | 'white'
+  | 'grey'
+  | 'green'
+  | 'aqua-green'
+  | 'blue'
+  | 'purple'
+  | 'pink'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | undefined;
+
+const colourMappings: Record<TemplateStatus, Colour> = {
+  NOT_YET_SUBMITTED: undefined,
+  SUBMITTED: 'grey',
+  DELETED: undefined,
+  PENDING_PROOF_REQUEST: 'blue',
+  PENDING_UPLOAD: 'blue',
+  PENDING_VALIDATION: 'blue',
+  VIRUS_SCAN_FAILED: 'red',
+  VALIDATION_FAILED: 'red',
+  WAITING_FOR_PROOF: 'yellow',
+  PROOF_AVAILABLE: 'orange',
+} as const;
+
+const templateStatusToColourMappingsLetter = (
+  status: TemplateStatus
+): Colour | undefined => colourMappings[status];
+
+const templateStatusToColourMappingsDigital = (
+  status: TemplateStatus
+): Colour | undefined =>
   (
     ({
+      ...colourMappings,
       NOT_YET_SUBMITTED: 'green',
-      SUBMITTED: 'grey',
-      DELETED: undefined,
-      PENDING_PROOF_REQUEST: 'blue',
-      PENDING_UPLOAD: 'blue',
-      PENDING_VALIDATION: 'blue',
-      VIRUS_SCAN_FAILED: 'red',
-      VALIDATION_FAILED: 'red',
-      WAITING_FOR_PROOF: 'yellow',
-      PROOF_AVAILABLE: 'orange',
-    }) as const
+    }) satisfies typeof colourMappings
   )[status];
 
+export const statusToColourMapping = (
+  template: Pick<TemplateDto, 'templateType' | 'templateStatus'>
+) =>
+  template.templateType === 'LETTER'
+    ? templateStatusToColourMappingsLetter(template.templateStatus)
+    : templateStatusToColourMappingsDigital(template.templateStatus);
+
 export const templateTypeToUrlTextMappings = (type: TemplateType) =>
   ({
     NHS_APP: 'nhs-app',

Original file line number	Diff line number	Diff line change
@@ -174,7 +174,7 @@ exports[`PreviewTemplateDetailsLetter if status is NOT_YET_SUBMITTED, then Not y
`174`	`174`	`class="nhsuk-summary-list__value"`
`175`	`175`	`>`
`176`	`176`	`<strong`
`177`		`- class="nhsuk-tag nhsuk-tag--green"`
	`177`	`+ class="nhsuk-tag"`
`178`	`178`	`data-test-id="status-tag-not-yet-submitted"`
`179`	`179`	`>`
`180`	`180`	`Not yet submitted`