CCM-14583: Get ready to approve letter template

frontend/src/__tests__/app/get-ready-to-approve-letter-template/__snapshots__/page.test.tsx.snap

@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GetReadyToApproveLetterTemplatePage matches 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"
+        >
+          <span
+            class="nhsuk-caption-xl"
+          >
+            Step 1 of 2
+          </span>
+          <h1
+            class="nhsuk-heading-xl"
+          >
+            Get ready to approve 'authoring letter template name'
+          </h1>
+          <p
+            class="nhsuk-body-l"
+          >
+            After you approve this letter, you can use it in your message plans.
+          </p>
+          <h2
+            class="nhsuk-heading-m"
+            id="before-you-approve"
+          >
+            Before you approve
+          </h2>
+          <p>
+            Make sure:
+          </p>
+          <ul>
+            <li>
+              the relevant stakeholders in your team have approved your letter template
+            </li>
+            <li>
+              your letter does not have any errors
+            </li>
+          </ul>
+          <h2
+            class="nhsuk-heading-m"
+            id="personalisation"
+          >
+            Personalisation
+          </h2>
+          <p>
+            Longer personalisation data can affect the final number of pages and price of your letter.
+          </p>
+          <div
+            class="nhsuk-warning-callout"
+          >
+            <h3
+              class="nhsuk-warning-callout__label"
+            >
+              Important
+              <span
+                class="nhsuk-u-visually-hidden"
+              >
+                :
+              </span>
+            </h3>
+            <p>
+              You cannot change your template settings after you approve this template.
+            </p>
+            <p>
+              If you need to make changes, edit your original template file on your computer then upload it as a new template.
+            </p>
+          </div>
+          <div
+            class="nhsuk-form-group"
+          >
+            <a
+              aria-disabled="false"
+              class="nhsuk-button"
+              data-testid="continue-link"
+              draggable="false"
+              href="/templates/review-and-approve-letter-template/authoring-letter-template-id"
+              role="button"
+            >
+              Continue
+            </a>
+            <a
+              aria-disabled="false"
+              class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-left-3"
+              data-testid="back-link"
+              draggable="false"
+              href="/templates/preview-letter-template/authoring-letter-template-id"
+              role="button"
+            >
+              Go back
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</DocumentFragment>
+`;

frontend/src/__tests__/app/get-ready-to-approve-letter-template/page.test.tsx

@@ -0,0 +1,109 @@
+import GetReadyToApproveLetterTemplatePage, {
+  generateMetadata,
+} from '@app/get-ready-to-approve-letter-template/[templateId]/page';
+import { render } from '@testing-library/react';
+import pageContent from '@content/content';
+import { redirect } from 'next/navigation';
+import { getTemplate } from '@utils/form-actions';
+import {
+  EMAIL_TEMPLATE,
+  NHS_APP_TEMPLATE,
+  AUTHORING_LETTER_TEMPLATE,
+  SMS_TEMPLATE,
+  PDF_LETTER_TEMPLATE,
+} from '@testhelpers/helpers';
+
+jest.mock('@utils/form-actions');
+jest.mock('next/navigation');
+
+const getTemplateMock = jest.mocked(getTemplate);
+const redirectMock = jest.mocked(redirect);
+
+const {
+  pageTitle,
+  continue: continueLink,
+  back,
+} = pageContent.pages.getReadyToApproveLetterTemplate;
+
+describe('GetReadyToApproveLetterTemplatePage', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('matches snapshot', async () => {
+    getTemplateMock.mockResolvedValueOnce(AUTHORING_LETTER_TEMPLATE);
+
+    const page = render(
+      await GetReadyToApproveLetterTemplatePage({
+        params: Promise.resolve({
+          templateId: AUTHORING_LETTER_TEMPLATE.id,
+        }),
+      })
+    );
+
+    const continueElement = page.getByRole('button', {
+      name: continueLink.text,
+    });
+
+    expect(continueElement).toHaveAttribute(
+      'href',
+      `/templates/review-and-approve-letter-template/${AUTHORING_LETTER_TEMPLATE.id}`
+    );
+
+    const backLinkElement = page.getByRole('button', { name: back.text });
+
+    expect(backLinkElement).toHaveAttribute(
+      'href',
+      `/templates/preview-letter-template/${AUTHORING_LETTER_TEMPLATE.id}`
+    );
+
+    expect(page.asFragment()).toMatchSnapshot();
+  });
+
+  it('should return metadata', async () => {
+    expect(await generateMetadata()).toEqual({
+      title: pageTitle,
+    });
+  });
+
+  test.each([
+    ['NHS_APP', NHS_APP_TEMPLATE],
+    ['SMS', SMS_TEMPLATE],
+    ['EMAIL', EMAIL_TEMPLATE],
+  ])('should redirect user when templateType is %s', async (_, template) => {
+    getTemplateMock.mockResolvedValueOnce(template);
+
+    render(
+      await GetReadyToApproveLetterTemplatePage({
+        params: Promise.resolve({
+          templateId: template.id,
+        }),
+      })
+    );
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
+  it('should redirect to invalid template page when letter template is not a authoring template', async () => {
+    getTemplateMock.mockResolvedValueOnce(PDF_LETTER_TEMPLATE);
+
+    await GetReadyToApproveLetterTemplatePage({
+      params: Promise.resolve({
+        templateId: PDF_LETTER_TEMPLATE.id,
+      }),
+    });
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+
+  it('should redirect to invalid template page when no template is found', async () => {
+    getTemplateMock.mockResolvedValueOnce(undefined);
+
+    await GetReadyToApproveLetterTemplatePage({
+      params: Promise.resolve({
+        templateId: 'template-id',
+      }),
+    });
+
+    expect(redirectMock).toHaveBeenCalledWith('/invalid-template', 'replace');
+  });
+});

frontend/src/app/get-ready-to-approve-letter-template/[templateId]/page.tsx

@@ -0,0 +1,81 @@
+import { Metadata } from 'next';
+import { redirect, RedirectType } from 'next/navigation';
+import { TemplatePageProps } from 'nhs-notify-web-template-management-utils';
+import { ContentRenderer } from '@molecules/ContentRenderer/ContentRenderer';
+import { getTemplate } from '@utils/form-actions';
+import { interpolate } from '@utils/interpolate';
+import { NHSNotifyButton } from '@atoms/NHSNotifyButton/NHSNotifyButton';
+import { NHSNotifyContainer } from '@layouts/container/container';
+import { NHSNotifyMain } from '@atoms/NHSNotifyMain/NHSNotifyMain';
+import content from '@content/content';
+
+const pageContent = content.pages.getReadyToApproveLetterTemplate;
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: pageContent.pageTitle,
+  };
+}
+const GetReadyToApproveLetterTemplatePage = async (
+  props: TemplatePageProps
+) => {
+  const { templateId } = await props.params;
+
+  const template = await getTemplate(templateId);
+
+  if (
+    !template ||
+    template.templateType !== 'LETTER' ||
+    template.letterVersion !== 'AUTHORING'
+  ) {
+    return redirect('/invalid-template', RedirectType.replace);
+  }
+
+  return (
+    <NHSNotifyContainer>
+      <NHSNotifyMain>
+        <div className='nhsuk-grid-row'>
+          <div className='nhsuk-grid-column-two-thirds'>
+            <span className='nhsuk-caption-xl'>{pageContent.stepCounter}</span>
+
+            <h1 className='nhsuk-heading-xl'>
+              {interpolate(pageContent.heading, {
+                templateName: template.name,
+              })}
+            </h1>
+
+            <ContentRenderer content={pageContent.body} />
+
+            <div className='nhsuk-warning-callout'>
+              <h3 className='nhsuk-warning-callout__label'>
+                {pageContent.callout.label}
+                <span className='nhsuk-u-visually-hidden'>:</span>
+              </h3>
+              <ContentRenderer content={pageContent.callout.content} />
+            </div>
+
+            <div className='nhsuk-form-group'>
+              <NHSNotifyButton
+                href={pageContent.continue.href(template.id)}
+                data-testid='continue-link'
+              >
+                {pageContent.continue.text}
+              </NHSNotifyButton>
+
+              <NHSNotifyButton
+                secondary
+                href={pageContent.back.href(template.id)}
+                className='nhsuk-u-margin-left-3'
+                data-testid='back-link'
+              >
+                {pageContent.back.text}
+              </NHSNotifyButton>
+            </div>
+          </div>
+        </div>
+      </NHSNotifyMain>
+    </NHSNotifyContainer>
+  );
+};
+
+export default GetReadyToApproveLetterTemplatePage;

frontend/src/content/content.ts

@@ -708,6 +708,82 @@ const error404 = {
   },
 };
 
+const getReadyToApproveLetterTemplate: {
+  pageTitle: string;
+  stepCounter: string;
+  heading: string;
+  body: ContentBlock[];
+  callout: {
+    label: string;
+    content: ContentBlock[];
+  };
+  continue: {
+    text: string;
+    href: (id: string) => string;
+  };
+  back: {
+    text: string;
+    href: (id: string) => string;
+  };
+} = {
+  pageTitle: generatePageTitle('Get ready to approve letter template'),
+  stepCounter: 'Step 1 of 2',
+  heading: "Get ready to approve '{{templateName}}'",
+  body: [
+    {
+      type: 'text',
+      text: 'After you approve this letter, you can use it in your message plans.',
+      overrides: { p: { props: { className: 'nhsuk-body-l' } } },
+    },
+    {
+      type: 'text',
+      text: '## Before you approve',
+      overrides: { h2: { props: { className: 'nhsuk-heading-m' } } },
+    },
+    {
+      type: 'text',
+      text: 'Make sure:',
+    },
+    {
+      type: 'text',
+      text: markdownList('ul', [
+        'the relevant stakeholders in your team have approved your letter template',
+        'your letter does not have any errors',
+      ]),
+    },
+    {
+      type: 'text',
+      text: '## Personalisation',
+      overrides: { h2: { props: { className: 'nhsuk-heading-m' } } },
+    },
+    {
+      type: 'text',
+      text: 'Longer personalisation data can affect the final number of pages and price of your letter.',
+    },
+  ],
+  callout: {
+    label: 'Important',
+    content: [
+      {
+        type: 'text',
+        text: 'You cannot change your template settings after you approve this template.',
+      },
+      {
+        type: 'text',
+        text: 'If you need to make changes, edit your original template file on your computer then upload it as a new template.',
+      },
+    ],
+  },
+  continue: {
+    text: 'Continue',
+    href: (id: string) => `/templates/review-and-approve-letter-template/${id}`,
+  },
+  back: {
+    text: goBackButtonText,
+    href: (id: string) => `/templates/preview-letter-template/${id}`,
+  },
+};
+
 const letterTemplateInvalidConfiguration = {
   title: generatePageTitle('Configuration error'),
   heading: 'You cannot create letter templates yet',
@@ -1889,6 +1965,7 @@ const content = {
     editTemplateCampaignPage,
     editTemplateNamePage,
     error404,
+    getReadyToApproveLetterTemplate,
     homePage,
     letterTemplateInvalidConfiguration,
     messagePlanGetReadyToMoveToProduction,