CAR-180 'Do Not Report' Page

designer/client/page-create.js

@@ -206,6 +206,9 @@ class PageCreate extends React.Component {
               <option value="">Question Page</option>
               <option value="./pages/start.js">Start Page</option>
               <option value="./pages/summary.js">Summary Page</option>
+              <option value="NonSubmittingSummaryPage">
+                Non-submitting Summary Page
+              </option>
             </select>
           </div>
 

designer/client/page-edit.js

@@ -235,6 +235,9 @@ export class PageEdit extends React.Component {
               <option value="./pages/summary.js">
                 {i18n("page.types.summary")}
               </option>
+              <option value="NonSubmittingSummaryPage">
+                Non-submitting Summary Page
+              </option>
             </select>
           </div>
           <Input

model/src/components/types.ts

@@ -132,6 +132,7 @@ interface ListFieldBase {
     allowPrePopulationOverwrite?: boolean;
     disableChangingFromSummary?: boolean;
     customValidationMessages?: Record<string, string>;
+    shortTitle?: string;
   };
   list: string;
   schema: {};

model/src/data-model/types.ts

@@ -31,6 +31,12 @@ export interface RepeatingFieldPage extends Page {
     };
   };
 }
+export interface NonSubmittingSummaryPage extends Page {
+  controller: "NonSubmittingSummaryPageController";
+  options: {
+    customText: any;
+  };
+}
 
 export interface Section {
   name: string;

runner/src/server/plugins/engine/pageControllers/NonSubmittingSummaryPageController.ts

@@ -0,0 +1,158 @@
+import { HapiRequest, HapiResponseToolkit } from "server/types";
+import { PageController } from "server/plugins/engine/pageControllers/PageController";
+
+import { FormComponent } from "server/plugins/engine/components";
+import { PageControllerBase } from "server/plugins/engine/pageControllers/PageControllerBase";
+import { FormModel } from "server/plugins/engine/models";
+import { NonSubmittingSummaryPage } from "@xgovformbuilder/model";
+
+const DEFAULT_OPTIONS = {
+  customText: {},
+};
+
+export class NonSubmittingSummaryPageController extends PageController {
+  returnUrlParameter: string;
+  options: NonSubmittingSummaryPage["options"];
+
+  constructor(model: FormModel, pageDef: NonSubmittingSummaryPage) {
+    super(model, pageDef);
+
+    const returnPath = `/${this.model.basePath}${this.path}`;
+    this.returnUrlParameter = `?returnUrl=${encodeURIComponent(returnPath)}`;
+    this.options = pageDef?.options ?? DEFAULT_OPTIONS;
+    this.options.customText ??= DEFAULT_OPTIONS.customText;
+  }
+  /**
+   * Returns an async function. This is called in plugin.ts when there is a GET request at `/{id}/{path*}`,
+   */
+  makeGetRouteHandler() {
+    return async (request: HapiRequest, h: HapiResponseToolkit) => {
+      this.langFromRequest(request);
+
+      const viewModel = await this.summaryViewModel(request);
+
+      return h.view("non-submitting-summary", viewModel);
+    };
+  }
+
+  /**
+   * Returns an async function. This is called in plugin.ts when there is a POST request at `/{id}/{path*}`.
+   * If a form is incomplete, a user will be redirected to the start page.
+   */
+  makePostRouteHandler() {
+    return async (request: HapiRequest, h: HapiResponseToolkit) => {
+      const { cacheService } = request.services([]);
+      const model = this.model;
+      const state = await cacheService.getState(request);
+
+      request.yar.set("basePath", model.basePath);
+
+      const nextPage = this.getNext(state);
+      return h.redirect(nextPage);
+    };
+  }
+
+  get postRouteOptions() {
+    return {
+      ext: {
+        onPreHandler: {
+          method: async (_request: HapiRequest, h: HapiResponseToolkit) => {
+            return h.continue;
+          },
+        },
+      },
+    };
+  }
+
+  async summaryViewModel(request: HapiRequest) {
+    const { cacheService } = request.services([]);
+    const state = await cacheService.getState(request);
+    const { progress = [] } = state;
+
+    const { relevantPages } = this.model.getRelevantPages(state);
+
+    const rowsBySection = relevantPages.reduce((prev, page) => {
+      const sectionName = page.section?.name;
+      const section = prev[sectionName] ?? [];
+      let sectionState = sectionName ? state[sectionName] || {} : state;
+
+      const toRow = this.formItemsToRowByPage({
+        page,
+        sectionState,
+        fullState: state,
+      });
+
+      section.push(...page.components.formItems.map(toRow));
+
+      prev[sectionName] = section;
+      return prev;
+    }, {});
+
+    const summaryLists = Object.entries(rowsBySection).map(
+      ([section, rows]) => {
+        const modelSection = this.model.sections.find(
+          (mSection) => mSection.name === section
+        );
+
+        return {
+          sectionTitle: !modelSection?.hideTitle ? modelSection?.title : "",
+          section,
+          rows,
+        };
+      }
+    );
+
+    return {
+      pageTitle: this.title,
+      sectionTitle: this.section?.title,
+      backLink: progress[progress.length - 1] ?? this.backLinkFallback,
+      name: this.model.name,
+      summaryLists,
+      showTitle: true,
+      customText: this.options.customText,
+    };
+  }
+
+  formItemsToRowByPage({
+    page,
+    sectionState,
+    fullState,
+  }: {
+    page: PageControllerBase;
+    sectionState: { [key: string]: any };
+    fullState: { [key: string]: any };
+  }) {
+    const pagePath = `/${page.model.basePath}${page.path}`;
+    const returnPath = `${pagePath}${this.returnUrlParameter}`;
+    const model = this.model;
+    return function (component: FormComponent) {
+      let valueText = component.getDisplayStringFromState(sectionState);
+
+      if (
+        component.type === "FileUploadField" &&
+        model.showFilenamesOnSummaryPage
+      ) {
+        valueText =
+          fullState.originalFilenames?.[component.name]?.originalFilename;
+      }
+
+      return {
+        key: {
+          text: component.options.shortTitle ?? component.title,
+        },
+        value: {
+          text: valueText || "Not supplied",
+        },
+        actions: {
+          items: [
+            {
+              text: "Change",
+              visuallyHiddenText: component.title,
+              href: returnPath,
+            },
+          ],
+        },
+      };
+    };
+  }
+}

runner/src/server/plugins/engine/pageControllers/helpers.ts

@@ -11,6 +11,7 @@ import { RepeatingFieldPageController } from "./RepeatingFieldPageController";
 import { Page } from "@xgovformbuilder/model";
 import { UploadPageController } from "server/plugins/engine/pageControllers/UploadPageController";
 import { MultiStartPageController } from "server/plugins/engine/pageControllers/MultiStartPageController";
+import { NonSubmittingSummaryPageController } from "src/server/plugins/engine/pageControllers/NonSubmittingSummaryPageController";
 
 const PageControllers = {
   DobPageController,
@@ -23,6 +24,7 @@ const PageControllers = {
   RepeatingFieldPageController,
   UploadPageController,
   MultiStartPageController,
+  NonSubmittingSummaryPageController,
 };
 
 export const controllerNameFromPath = (filePath: string) => {

runner/src/server/plugins/engine/pageControllers/index.ts

@@ -6,3 +6,4 @@ export { StartPageController } from "./StartPageController";
 export { SummaryPageController } from "./SummaryPageController";
 export { PageControllerBase } from "./PageControllerBase";
 export { getPageController, controllerNameFromPath } from "./helpers";
+export { NonSubmittingSummaryPageController } from "./NonSubmittingSummaryPageController";

runner/src/server/views/non-submitting-summary.html

@@ -0,0 +1,45 @@
+{% from "partials/summary-detail.html" import summaryDetail %}
+
+{% from "components/checkboxes/macro.njk" import govukCheckboxes %}
+{% from "summary-list/macro.njk" import govukSummaryList %}
+{% extends 'layout.html' %}
+
+{% block content %}
+  {% include "partials/heading.html" %}
+
+  {% if customText.insetText %}
+    <div class="govuk-inset-text">
+      {{ customText.insetText | safe }}
+    </div>
+  {% endif %}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+
+      <div class="govuk-summary-card">
+        <div class="govuk-summary-card__title-wrapper">
+          <h2 class="govuk-summary-card__title">
+            {{ customText.cardTitle | safe }}
+          </h2>
+        </div>
+        <div class="govuk-summary-card__content">
+        {% for list in summaryLists %}
+          {{ govukSummaryList(list) }}
+        {% endfor %}
+        </div>
+      </div>
+    {% if customText.details %}
+      <p class="govuk-body">
+        {{ customText.details | safe }}
+      </p>
+    {% endif %}
+
+    <a href="{{serviceStartPage}}">
+      <button data-prevent-double-click="true" class="govuk-button" data-module="govuk-button">
+        Back to start
+      </button>
+    </a>
+    </div>
+
+  </div>
+{% endblock %}