GAP-2251: MQ Conditional Logic - Choose organisation type (#161)

* GAP-2251 | move org type before org name in MQ, add conditional logic for summary screen * GAP-2251 | fix failing test * GAP-2251 | add tests for summary screen * GAP-2251|remove CH and CC from UI even if they've been filled out * GAP-2251 | bump tinymce-react to 4.3.1 to resolve xss vulnerability * GAP-2251 | fix back button for GAP-2297 and GAP-2298 * GAP-2251 | rename file --------- Co-authored-by: conor <[email protected]>
cabinetoffice · Nov 17, 2023 · 36bac43 · 36bac43
1 parent d03e964
commit 36bac43
Show file tree

Hide file tree

Showing 17 changed files with 342 additions and 73 deletions.
diff --git a/packages/applicant/src/pages/api/create-mandatory-question.page.tsx b/packages/applicant/src/pages/api/create-mandatory-question.page.tsx
@@ -18,11 +18,11 @@ export default async function handler(
       );
 
     const organisationProfileKeys = [
+      'orgType',
       'name',
       'addressLine1',
       'city',
       'postcode',
-      'orgType',
       'companiesHouseNumber',
       'charityCommissionNumber',
     ];
@@ -35,7 +35,7 @@ export default async function handler(
 
     const redirectionUrl = areOrganisationProfileQuestionsComplete
       ? routes.mandatoryQuestions.fundingAmountPage(mandatoryQuestion.id)
-      : routes.mandatoryQuestions.namePage(mandatoryQuestion.id);
+      : routes.mandatoryQuestions.typePage(mandatoryQuestion.id);
 
     return res.redirect(`${process.env.HOST}${redirectionUrl}`);
   } catch (e) {

diff --git a/packages/applicant/src/pages/api/create-mandatory-question.test.tsx b/packages/applicant/src/pages/api/create-mandatory-question.test.tsx
@@ -61,7 +61,7 @@ describe('API Handler Tests', () => {
     await handler(req(), res());
 
     expect(mockedRedirect).toHaveBeenCalledWith(
-      `http://localhost${routes.mandatoryQuestions.namePage(
+      `http://localhost${routes.mandatoryQuestions.typePage(
         'mandatoryQuestionId'
       )}`
     );

diff --git a/...applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/getServerSideProps.test.tsx b/...applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/getServerSideProps.test.tsx
@@ -52,6 +52,11 @@ describe('getServerSideProps', () => {
 
   describe('when handling a GET request', () => {
     const getDefaultContext = (): Optional<GetServerSidePropsContext> => ({
+      req: {
+        headers: {
+          referer: `${process.env.HOST}/test/path`,
+        },
+      },
       params: { mandatoryQuestionId: 'mandatoryQuestionId' },
       query: {},
     });
@@ -72,6 +77,7 @@ describe('getServerSideProps', () => {
           defaultFields: getDefaultGrantMandatoryQuestion(),
           mandatoryQuestion: getDefaultGrantMandatoryQuestion(),
           mandatoryQuestionId: 'mandatoryQuestionId',
+          backButtonUrl: '/test/path',
         },
       });
     });
@@ -110,6 +116,9 @@ describe('getServerSideProps', () => {
     const getDefaultContext = (): Optional<GetServerSidePropsContext> => ({
       req: {
         method: 'POST',
+        headers: {
+          referer: `${process.env.HOST}/test/path`,
+        },
       },
       params: { mandatoryQuestionId: 'mandatoryQuestionId' },
       query: {},
@@ -160,6 +169,9 @@ describe('getServerSideProps', () => {
       const getDefaultContext = (): Optional<GetServerSidePropsContext> => ({
         req: {
           method: 'POST',
+          headers: {
+            referer: `${process.env.HOST}/test/path`,
+          },
         },
         params: { mandatoryQuestionId: 'mandatoryQuestionId' },
         query: { fromSummaryPage: 'true' },
@@ -180,6 +192,9 @@ describe('getServerSideProps', () => {
       const getDefaultContext = (): Optional<GetServerSidePropsContext> => ({
         req: {
           method: 'POST',
+          headers: {
+            referer: `${process.env.HOST}/test/path`,
+          },
         },
         params: {
           mandatoryQuestionId: 'mandatoryQuestionId',
@@ -245,6 +260,7 @@ describe('getServerSideProps', () => {
           defaultFields: { name: 'test name' },
           mandatoryQuestion: getDefaultGrantMandatoryQuestion(),
           mandatoryQuestionId: 'mandatoryQuestionId',
+          backButtonUrl: '/test/path',
         },
       });
     });

diff --git a/...ages/applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/getServerSideProps.tsx b/...ages/applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/getServerSideProps.tsx
@@ -17,6 +17,7 @@ export default async function getServerSideProps({
   query,
   resolvedUrl, //the url that the user requested
 }: GetServerSidePropsContext) {
+  const backButtonUrl = req.headers.referer.replace(process.env.HOST, '');
   const { mandatoryQuestionId } = params as Record<string, string>;
   const {
     fromSummaryPage = false,
@@ -109,6 +110,7 @@ export default async function getServerSideProps({
       defaultFields,
       mandatoryQuestion,
       mandatoryQuestionId,
+      backButtonUrl,
     },
   };
 }
diff --git a/...plicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-address.page.tsx b/...plicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-address.page.tsx
@@ -13,10 +13,8 @@ export default function MandatoryQuestionOrganisationAddressPage({
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
-  mandatoryQuestionId,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl = routes.mandatoryQuestions.namePage(mandatoryQuestionId);
   const commonAddressInputProps = {
     boldHeading: false,
     titleSize: 's',

diff --git a/...mandatory-questions/[mandatoryQuestionId]/organisation-charity-commission-number.page.tsx b/...mandatory-questions/[mandatoryQuestionId]/organisation-charity-commission-number.page.tsx
@@ -13,11 +13,8 @@ export default function MandatoryQuestionOrganisationCharityCommissionNumberPage
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
-  mandatoryQuestionId,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl =
-    routes.mandatoryQuestions.companiesHouseNumberPage(mandatoryQuestionId);
   return (
     <>
       <Meta

diff --git a/...es/mandatory-questions/[mandatoryQuestionId]/organisation-companies-house-number.page.tsx b/...es/mandatory-questions/[mandatoryQuestionId]/organisation-companies-house-number.page.tsx
@@ -13,10 +13,8 @@ export default function MandatoryQuestionOrganisationCompaniesHouseNumberPage({
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
-  mandatoryQuestionId,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl = routes.mandatoryQuestions.typePage(mandatoryQuestionId);
   return (
     <>
       <Meta

diff --git a/.../src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-funding-amount.page.tsx b/.../src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-funding-amount.page.tsx
@@ -17,11 +17,8 @@ export default function MandatoryQuestionOrganisationFundingAmountPage({
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
-  mandatoryQuestionId,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl =
-    routes.mandatoryQuestions.charityCommissionNumberPage(mandatoryQuestionId);
   return (
     <>
       <>

diff --git a/...rc/pages/mandatory-questions/[mandatoryQuestionId]/organisation-funding-location.page.tsx b/...rc/pages/mandatory-questions/[mandatoryQuestionId]/organisation-funding-location.page.tsx
@@ -16,11 +16,8 @@ export default function MandatoryQuestionOrganisationFundingLocationPage({
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
-  mandatoryQuestionId,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl =
-    routes.mandatoryQuestions.fundingAmountPage(mandatoryQuestionId);
   return (
     <>
       <>

diff --git a/.../applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-name.page.tsx b/.../applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-name.page.tsx
@@ -16,11 +16,8 @@ export default function MandatoryQuestionOrganisationNamePage({
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl = routes.mandatoryQuestions.startPage(
-    mandatoryQuestion.schemeId.toString()
-  );
   return (
     <>
       <>

diff --git a/...nt/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-summary.page.test.tsx b/...nt/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-summary.page.test.tsx
@@ -10,30 +10,50 @@ import MandatoryQuestionOrganisationSummaryPage, {
 } from './organisation-summary.page';
 
 describe('Organisation summary page', () => {
-  const mandatoryQuestion = {
+  const defaultMandatoryQuestion = {
     schemeId: 1,
+    orgType: 'Limited company',
     name: 'Test Organisation',
     addressLine1: 'Test Address 1',
     addressLine2: 'Test Address 2',
     city: 'Test City',
     county: 'Test County',
     postcode: 'Test Postcode',
-    orgType: 'Test Organisation Type',
     companiesHouseNumber: 'Test Companies House Number',
     charityCommissionNumber: 'Test Charity Commission Number',
     fundingAmount: '1000',
     fundingLocation: ['Test Funding Location'],
   };
 
-  const getDefaultProps = (): InferProps<typeof getServerSideProps> => ({
+  const getDefaultProps = (
+    mandatoryQuestion = defaultMandatoryQuestion
+  ): InferProps<typeof getServerSideProps> => ({
     fieldErrors: [],
     csrfToken: 'testCSRFToken',
     formAction: 'testFormAction',
     defaultFields: {},
     mandatoryQuestion,
     mandatoryQuestionId: 'mandatoryQuestionId',
+    backButtonUrl: '/test/path',
   });
 
+  const checkDetailItem = (detail) => {
+    const labelElement = screen.getByText(detail.label);
+    expect(labelElement).toBeInTheDocument();
+
+    if (Array.isArray(detail.value)) {
+      detail.value.forEach((v) => {
+        const valueElement = screen.getByText(new RegExp(`${v}`));
+        expect(valueElement).toBeInTheDocument();
+      });
+    } else {
+      const valueElement = screen.getByText(
+        detail.showCurrency ? `£ ${detail.value}` : detail.value
+      );
+      expect(valueElement).toBeInTheDocument();
+    }
+  };
+
   it('should display a heading', () => {
     renderWithRouter(
       <MandatoryQuestionOrganisationSummaryPage
@@ -53,30 +73,46 @@ describe('Organisation summary page', () => {
       />
     );
     const mandatoryQuestionDetails = generateMandatoryQuestionDetails(
-      mandatoryQuestion,
+      defaultMandatoryQuestion,
       'mandatoryQuestionId'
     );
 
-    mandatoryQuestionDetails.forEach((detail) => {
-      const labelElement = screen.getByText(detail.label);
-      expect(labelElement).toBeInTheDocument();
+    mandatoryQuestionDetails.forEach(checkDetailItem);
+    const changeLinks = screen.getAllByText('Change', {
+      selector: 'a',
+    });
+    expect(changeLinks).toHaveLength(7);
+  });
 
-      if (Array.isArray(detail.value)) {
-        detail.value.forEach((v) => {
-          const valueElement = screen.getByText(new RegExp(`${v}`));
-          expect(valueElement).toBeInTheDocument();
-        });
+  it('should not display all the mandatory question details for certain org types', () => {
+    const mandatoryQuestionForIndividual = {
+      ...defaultMandatoryQuestion,
+      orgType: 'Individual',
+      companiesHouseNumber: '',
+      charityCommissionNumber: '',
+    };
+    renderWithRouter(
+      <MandatoryQuestionOrganisationSummaryPage
+        {...getPageProps(() => getDefaultProps(mandatoryQuestionForIndividual))}
+      />
+    );
+    const mandatoryQuestionDetails = generateMandatoryQuestionDetails(
+      mandatoryQuestionForIndividual,
+      'mandatoryQuestionId'
+    );
+
+    mandatoryQuestionDetails.forEach((detail) => {
+      if (!detail.hidden) {
+        checkDetailItem(detail);
       } else {
-        const valueElement = screen.getByText(
-          detail.showCurrency ? `£ ${detail.value}` : detail.value
-        );
-        expect(valueElement).toBeInTheDocument();
+        const labelElement = screen.queryByText(detail.label);
+        expect(labelElement).not.toBeInTheDocument();
       }
     });
     const changeLinks = screen.getAllByText('Change', {
       selector: 'a',
     });
-    expect(changeLinks).toHaveLength(7);
+    expect(changeLinks).toHaveLength(5);
   });
 
   it('should display a confirm and submit button', () => {

diff --git a/...plicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-summary.page.tsx b/...plicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-summary.page.tsx
@@ -11,7 +11,19 @@ export const generateMandatoryQuestionDetails = (
   mandatoryQuestion,
   mandatoryQuestionId
 ): MandatoryQuestionDetails[] => {
+  const shouldDisplayExtraFields = [
+    'Limited company',
+    'Charity',
+    'Other',
+  ].includes(mandatoryQuestion.orgType);
   return [
+    {
+      id: 'organisationType',
+      label: 'Type of organisation',
+      value: mandatoryQuestion?.orgType,
+      url: routes.mandatoryQuestions.typePage(mandatoryQuestionId),
+      status: 'Change',
+    },
     {
       id: 'organisationName',
       label: 'Name',
@@ -32,13 +44,6 @@ export const generateMandatoryQuestionDetails = (
       url: routes.mandatoryQuestions.addressPage(mandatoryQuestionId),
       status: 'Change',
     },
-    {
-      id: 'organisationType',
-      label: 'Type of organisation',
-      value: mandatoryQuestion?.orgType,
-      url: routes.mandatoryQuestions.typePage(mandatoryQuestionId),
-      status: 'Change',
-    },
     {
       id: 'organisationCompaniesHouseNumber',
       label: 'Companies House number',
@@ -47,6 +52,7 @@ export const generateMandatoryQuestionDetails = (
         mandatoryQuestionId
       ),
       status: 'Change',
+      hidden: !shouldDisplayExtraFields,
     },
     {
       id: 'organisationCharity',
@@ -56,6 +62,7 @@ export const generateMandatoryQuestionDetails = (
         mandatoryQuestionId
       ),
       status: 'Change',
+      hidden: !shouldDisplayExtraFields,
     },
     {
       id: 'fundingAmount',
@@ -109,8 +116,9 @@ export default function MandatoryQuestionOrganisationSummaryPage({
               they can run checks to prevent fraud.
             </p>
             <dl className="govuk-summary-list">
-              {mandatoryQuestionDetails?.map((mandatoryQuestionDetail) => {
-                return (
+              {mandatoryQuestionDetails
+                ?.filter((item) => !item.hidden)
+                ?.map((mandatoryQuestionDetail) => (
                   <div
                     className="govuk-summary-list__row"
                     key={'row-' + mandatoryQuestionDetail.id}
@@ -157,8 +165,7 @@ export default function MandatoryQuestionOrganisationSummaryPage({
                       </Link>
                     </dd>
                   </div>
-                );
-              })}
+                ))}
             </dl>
             <Link
               href={routes.api.mandatoryQuestions.createSubmission(
@@ -189,6 +196,7 @@ interface MandatoryQuestionDetails {
   url?: string;
   status?: 'Change';
   showCurrency?: boolean;
+  hidden?: boolean;
 }
 interface DisplayArrayDataProps {
   data: string[];

diff --git a/.../applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-type.page.tsx b/.../applicant/src/pages/mandatory-questions/[mandatoryQuestionId]/organisation-type.page.tsx
@@ -12,11 +12,8 @@ export default function MandatoryQuestionOrganisationTypePage({
   fieldErrors,
   formAction,
   defaultFields,
-  mandatoryQuestion,
-  mandatoryQuestionId,
+  backButtonUrl,
 }: InferProps<typeof getServerSideProps>) {
-  const backButtonUrl =
-    routes.mandatoryQuestions.addressPage(mandatoryQuestionId);
   return (
     <>
       <Meta