CCM-14754: approval confirmation

frontend/src/__tests__/app/letter-template-approved/__snapshots__/page.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LetterTemplateApprovedPage should render page and match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="nhsuk-width-container"
+  >
+    <main
+      class="nhsuk-main-wrapper"
+      id="maincontent"
+      role="main"
+    >
+      <div
+        class="nhsuk-grid-row"
+      >
+        <div
+          class="nhsuk-grid-column-two-thirds"
+        >
+          <div
+            class="notify-confirmation-panel"
+          >
+            <h1
+              class="nhsuk-heading-l nhsuk-u-margin-bottom-0"
+              id="template-submitted"
+            >
+              Letter template approved
+            </h1>
+          </div>
+        </div>
+      </div>
+      <dl>
+        <dt
+          class="nhsuk-heading-xs nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-1"
+        >
+          Template name
+        </dt>
+        <dd
+          class="nhsuk-body-s nhsuk-u-margin-left-0"
+          data-testid="template-name"
+        >
+          authoring letter template name
+        </dd>
+      </dl>
+      <p>
+        You can now use this letter in your 
+        <a
+          data-testid="message-plans-link"
+          href="/templates/message-plans"
+        >
+          message plans
+        </a>
+        .
+      </p>
+      <p>
+        Or go back to your 
+        <a
+          data-testid="templates-link"
+          href="/templates/message-templates"
+        >
+          templates
+        </a>
+        .
+      </p>
+    </main>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,108 @@
+import { render, screen } from '@testing-library/react';
+import { getTemplate } from '@utils/form-actions';
+import {
+  AUTHORING_LETTER_TEMPLATE,
+  EMAIL_TEMPLATE,
+  NHS_APP_TEMPLATE,
+  PDF_LETTER_TEMPLATE,
+  SMS_TEMPLATE,
+} from '@testhelpers/helpers';
+import Page, {
+  generateMetadata,
+} from '@app/letter-template-approved/[templateId]/page';
+import { redirect } from 'next/navigation';
+
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getTemplateMock = jest.mocked(getTemplate);
+const redirectMock = jest.mocked(redirect);
+
+describe('LetterTemplateApprovedPage', () => {
+  beforeEach(jest.resetAllMocks);
+
+  test('should render page and match snapshot', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...AUTHORING_LETTER_TEMPLATE,
+      templateStatus: 'PROOF_APPROVED',
+    });
+
+    const { asFragment } = render(
+      await Page({
+        params: Promise.resolve({ templateId: 'template-id' }),
+      })
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('should generate page title', async () => {
+    expect(await generateMetadata()).toEqual({
+      title: 'Letter template approved - NHS Notify',
+    });
+  });
+
+  test('should render page with expected links', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...AUTHORING_LETTER_TEMPLATE,
+      templateStatus: 'PROOF_APPROVED',
+    });
+
+    render(
+      await Page({
+        params: Promise.resolve({ templateId: 'template-id' }),
+      })
+    );
+
+    const messagePlansLink = screen.getByRole('link', {
+      name: 'message plans',
+    });
+
+    expect(messagePlansLink).toHaveAttribute(
+      'href',
+      '/templates/message-plans'
+    );
+
+    const templatesLink = screen.getByRole('link', { name: 'templates' });
+
+    expect(templatesLink).toHaveAttribute(
+      'href',
+      '/templates/message-templates'
+    );
+  });
+
+  test.each([
+    { case: 'undefined', value: undefined },
+    { case: 'EMAIL', value: EMAIL_TEMPLATE },
+    { case: 'SMS', value: SMS_TEMPLATE },
+    { case: 'NHS_APP', value: NHS_APP_TEMPLATE },
+    { case: 'PDF LETTER', value: PDF_LETTER_TEMPLATE },
+  ])(
+    'should redirect to /invalid-template when template is $case',
+    async ({ value }) => {
+      getTemplateMock.mockResolvedValueOnce(value);
+
+      await Page({
+        params: Promise.resolve({ templateId: 'template-id' }),
+      });
+
+      expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+    }
+  );
+
+  test('should redirect to /preview-letter-template when templateStatus is not PROOF_APPROVED', async () => {
+    getTemplateMock.mockResolvedValueOnce({
+      ...AUTHORING_LETTER_TEMPLATE,
+      templateStatus: 'NOT_YET_SUBMITTED',
+    });
+
+    await Page({
+      params: Promise.resolve({ templateId: 'template-id' }),
+    });
+
+    expect(redirectMock).toHaveBeenCalledWith(
+      '/preview-letter-template/template-id',
+      'replace'
+    );
+  });
+});

frontend/src/app/letter-template-approved/[templateId]/page.tsx

@@ -0,0 +1,78 @@
+'use server';
+
+import {
+  TemplatePageProps,
+  validateLetterTemplate,
+} from 'nhs-notify-web-template-management-utils';
+import { getTemplate } from '@utils/form-actions';
+import { redirect, RedirectType } from 'next/navigation';
+import content from '@content/content';
+import { Metadata } from 'next';
+import { NHSNotifyContainer } from '@layouts/container/container';
+import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import { ContentRenderer } from '@molecules/ContentRenderer/ContentRenderer';
+import { getBasePath } from '@utils/get-base-path';
+
+const { title, bannerText, nameLabel, doNext } =
+  content.pages.letterTemplateApproved;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title,
+  };
+}
+
+const LetterTemplateApprovedPage = async (props: TemplatePageProps) => {
+  const { templateId } = await props.params;
+
+  const template = await getTemplate(templateId);
+
+  const validatedTemplate = validateLetterTemplate(template);
+
+  if (!validatedTemplate || validatedTemplate.letterVersion !== 'AUTHORING') {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  if (validatedTemplate.templateStatus !== 'PROOF_APPROVED') {
+    return redirect(
+      `/preview-letter-template/${templateId}`,
+      RedirectType.replace
+    );
+  }
+
+  return (
+    <NHSNotifyContainer>
+      <NHSNotifyMain>
+        <div className='nhsuk-grid-row'>
+          <div className='nhsuk-grid-column-two-thirds'>
+            <div className='notify-confirmation-panel'>
+              <h1
+                id='template-submitted'
+                className='nhsuk-heading-l nhsuk-u-margin-bottom-0'
+              >
+                {bannerText}
+              </h1>
+            </div>
+          </div>
+        </div>
+        <dl>
+          <dt className='nhsuk-heading-xs nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-1'>
+            {nameLabel}
+          </dt>
+          <dd
+            data-testid='template-name'
+            className='nhsuk-body-s nhsuk-u-margin-left-0'
+          >
+            {validatedTemplate.name}
+          </dd>
+        </dl>
+        <ContentRenderer
+          content={doNext}
+          variables={{ basePath: getBasePath() }}
+        />
+      </NHSNotifyMain>
+    </NHSNotifyContainer>
+  );
+};
+
+export default LetterTemplateApprovedPage;

frontend/src/content/content.ts

@@ -717,6 +717,24 @@ const letterTemplateInvalidConfiguration = {
   backLinkUrl: '/choose-a-template-type',
 };
 
+const letterTemplateApproved = {
+  title: generatePageTitle('Letter template approved'),
+  bannerText: 'Letter template approved',
+  nameLabel: 'Template name',
+  doNext: [
+    {
+      type: 'text',
+      text: 'You can now use this letter in your [message plans]({{basePath}}/message-plans).',
+      overrides: { a: { props: { 'data-testid': 'message-plans-link' } } },
+    },
+    {
+      type: 'text',
+      text: 'Or go back to your [templates]({{basePath}}/message-templates).',
+      overrides: { a: { props: { 'data-testid': 'templates-link' } } },
+    },
+  ] satisfies ContentBlock[],
+};
+
 const messagePlanInvalidConfiguration = {
   title: generatePageTitle('Configuration error'),
   heading: 'You cannot create message plans yet',
@@ -1890,6 +1908,7 @@ const content = {
     editTemplateNamePage,
     error404,
     homePage,
+    letterTemplateApproved,
     letterTemplateInvalidConfiguration,
     messagePlanGetReadyToMoveToProduction,
     messagePlanInvalidConfiguration,

frontend/src/middleware.ts

@@ -19,6 +19,7 @@ const protectedPaths = [
   /^\/edit-text-message-template\/[^/]+$/,
   /^\/email-template-submitted\/[^/]+$/,
   /^\/invalid-template$/,
+  /^\/letter-template-approved\/[^/]+$/,
   /^\/letter-template-submitted\/[^/]+$/,
   /^\/message-plans\/campaign-id-required$/,
   /^\/message-plans\/choose-email-template\/[^/]+$/,