@planning-inspectorate/dynamic-forms 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

package/src/components/manage-list/README.md

@@ -79,6 +79,10 @@ new Section('New Holiday', 'holiday')
 
 `{/:manageListAction/:manageListItemId/:manageListQuestion}` optional route parameters are added to the get and post routes for questions
 
+* manageListAction should be either `add`, `edit` or `remove` to indicate the action being taken in the manage list. These can be imported from `manage-list-actions.js`.
+* manageListItemId should be a unique identifier for the item being edited or removed, for example an id. When adding an item, an ID is generated.
+* manageListQuestion should be the fieldName of the question being added, edited or removed, this is needed to know which question in the manage list journey to show when adding or editing an item.
+
 ```js
 router.get('/:section/:question{/:manageListAction/:manageListItemId/:manageListQuestion}',
         getJourneyResponse,
@@ -114,3 +118,4 @@ new Section('New Holiday', 'holiday')
         .addQuestion(questions.departureDate)
         .addQuestion(questions.holidayPeriod)
 ```
+

package/src/components/manage-list/confirm.njk

@@ -0,0 +1,22 @@
+{% extends layoutTemplate %}
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{% block dynQuestionContent %}
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
+                <h1 class="govuk-heading-l">Are you sure you want to remove the following {{ titleSingular }}?</h1>
+                {% for item in questionSummary %}
+                    <p class="govuk-body">{{ item.answer | safe }}</p>
+                {% endfor %}
+                {{ govukButton({
+                    text: continueButtonText,
+                    type: "submit",
+                    attributes: { "data-cy":"button-save-and-continue"}
+                }) }}
+            </form>
+        </div>
+    </div>
+{% endblock %}

package/src/components/manage-list/index.njk

@@ -31,12 +31,12 @@
                             <dd class="govuk-summary-list__actions">
                                 <ul class="govuk-summary-list__actions-list">
                                     <li class="govuk-summary-list__actions-list-item">
-                                        <a class="govuk-link" href="{{ util.trimTrailingSlash(originalUrl) }}/edit/{{ item.id }}/{{ question.firstQuestionUrl }}">
+                                        <a class="govuk-link" href="{{ util.trimTrailingSlash(originalUrl) }}/{{ actionParams.edit }}/{{ item.id }}/{{ question.firstQuestionUrl }}">
                                             Change <span class="govuk-visually-hidden">{{ titleSingular }} {{ loop.index }}</span>
                                         </a>
                                     </li>
                                     <li class="govuk-summary-list__actions-list-item">
-                                        <a class="govuk-link" href="{{ util.trimTrailingSlash(originalUrl) }}/remove/{{ item.id }}/confirm">
+                                        <a class="govuk-link" href="{{ util.trimTrailingSlash(originalUrl) }}/{{ actionParams.remove }}/{{ item.id }}/{{ actionParams.confirmRemove }}">
                                             Remove <span class="govuk-visually-hidden">{{ titleSingular }} {{ loop.index }}</span>
                                         </a>
                                     </li>

package/src/components/manage-list/manage-list-actions.js

@@ -0,0 +1,9 @@
+/**
+ *
+ * @type {Readonly<{ADD: string, EDIT: string, REMOVE: string}>}
+ */
+export const MANAGE_LIST_ACTIONS = Object.freeze({
+	ADD: 'add',
+	EDIT: 'edit',
+	REMOVE: 'remove'
+});

package/src/components/manage-list/question.js

@@ -1,12 +1,14 @@
 import { Question } from '#question';
 import { Uuid } from '#src/lib/uuid.js';
 import nunjucks from 'nunjucks';
+import { MANAGE_LIST_ACTIONS } from './manage-list-actions.js';
 
 /**
  * @typedef {Object} ManageListQuestionParameters
  * @property {string} titleSingular - the single name of the list item, e.g. "Holiday activity"
  * @property {boolean} [showManageListQuestions] - whether to show the question titles as well as answers on the manage list summary page
  * @property {boolean} [showAnswersInSummary] - whether to show the answers on the main check-your-answers page (or just a count)
+ * @property {string} [confirmationQuestion] - the name of the confirmation question to use when removing an item, default 'confirm'
  */
 
 export default class ManageListQuestion extends Question {
@@ -14,6 +16,7 @@ export default class ManageListQuestion extends Question {
 	#section;
 	/** @type {boolean} */
 	#showAnswersInSummary;
+	#confirmationQuestionParam;
 
 	/**
 	 * @param {import('#question-types').QuestionParameters & ManageListQuestionParameters} params
@@ -30,6 +33,7 @@ export default class ManageListQuestion extends Question {
 			}
 		});
 		this.#showAnswersInSummary = params.showAnswersInSummary || false;
+		this.#confirmationQuestionParam = params.confirmationQuestion || 'confirm';
 	}
 
 	/**
@@ -44,6 +48,10 @@ export default class ManageListQuestion extends Question {
 		return true;
 	}
 
+	get confirmationQuestionParam() {
+		return this.#confirmationQuestionParam;
+	}
+
 	/**
 	 * @param {import('#question').QuestionViewModel} viewModel
 	 */
@@ -51,6 +59,11 @@ export default class ManageListQuestion extends Question {
 		viewModel.question.addAnotherLink = this.#addAnotherLink;
 		viewModel.question.firstQuestionUrl = this.#firstQuestionUrl;
 		viewModel.question.valueSummary = [];
+		viewModel.actionParams = {
+			edit: MANAGE_LIST_ACTIONS.EDIT,
+			remove: MANAGE_LIST_ACTIONS.REMOVE,
+			confirmRemove: this.#confirmationQuestionParam
+		};
 		if (viewModel.question.value && Array.isArray(viewModel.question.value)) {
 			viewModel.question.valueSummary = viewModel.question.value.map((v) => {
 				return {
@@ -126,6 +139,16 @@ export default class ManageListQuestion extends Question {
 		];
 	}
 
+	renderConfirmationAction(res, itemToRemove, viewModel) {
+		viewModel.questionSummary = this.#formatItemAnswers(itemToRemove);
+		let view = `components/${this.viewFolder}/${this.confirmationQuestionParam}`;
+		if (this.viewFolder.includes('/')) {
+			// custom view folder
+			view = `${this.viewFolder}/${this.confirmationQuestionParam}`;
+		}
+		res.render(view, viewModel);
+	}
+
 	/**
 	 * Create an 'add another' link,
 	 * to the first question in the manage list section

package/src/components/manage-list/question.test.js

@@ -124,6 +124,21 @@ describe('components/manage-list/question', () => {
 		assertSnapshot(ctx, res.render.mock.calls[0].result, 'manage-list-render-questions.html');
 	});
 
+	it('should render the confirmation view model', (ctx) => {
+		const { q, journey } = questionWithManageQuestions(ctx, {
+			showManageListQuestions: true
+		});
+		const itemToRemove = { id: 'id-1', name: 'Test' };
+		const viewModel = q.prepQuestionForRendering({}, journey);
+		const nunjucks = configureNunjucksTestEnv();
+		const res = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		q.renderConfirmationAction(res, itemToRemove, viewModel);
+		assert.strictEqual(res.render.mock.callCount(), 1);
+		assertSnapshot(ctx, res.render.mock.calls[0].result, 'manage-list-confirmation-render.html');
+	});
+
 	describe('getDataToSave', () => {
 		it('should return existing journey answers if present', async () => {
 			const q = newQuestion();

package/src/controller.js

@@ -2,6 +2,7 @@ import { SECTION_STATUS } from './section.js';
 import questionUtils from './components/utils/question-utils.js';
 import { answerObjectForManageListSaving } from '#src/components/manage-list/utils.js';
 import { booleanToYesNoValue } from '#src/components/boolean/question.js';
+import { MANAGE_LIST_ACTIONS } from '#src/components/manage-list/manage-list-actions.js';
 
 /**
  * @typedef {import('./journey/journey.js').Journey} Journey
@@ -177,6 +178,19 @@ export async function question(req, res) {
 			originalUrl: req.originalUrl
 		}
 	});
+	if (
+		question.isManageListQuestion &&
+		typeof question.renderConfirmationAction === 'function' &&
+		req.params.manageListAction === MANAGE_LIST_ACTIONS.REMOVE
+	) {
+		const answers = journey.response.answers;
+		if (answers && Object.hasOwn(answers, question.fieldName) && Array.isArray(answers[question.fieldName])) {
+			const item = answers[question.fieldName].find((i) => i.id === req.params.manageListItemId);
+			if (item) return question.renderConfirmationAction(res, item, viewModel);
+		}
+		// if we can't find the item to remove, redirect to task list rather than erroring out as the session may have expired or been tampered with
+		return res.redirect(journey.taskListUrl);
+	}
 	return question.renderAction(res, viewModel);
 }
 
@@ -188,6 +202,7 @@ export async function question(req, res) {
  * @property {string} referenceId
  * @property {boolean} isManageListItem
  * @property {string} [manageListQuestionFieldName]
+ * @property {boolean} [manageListItemRemove]
  * @property {Object<string, any>} data
  */
 
@@ -215,7 +230,7 @@ export function buildSave(saveData, redirectToTaskListOnSuccess) {
 		}
 
 		let manageListQuestion;
-		if (question.isInManageListSection) {
+		if (question.isInManageListSection || req.params.manageListAction === MANAGE_LIST_ACTIONS.REMOVE) {
 			// find parent question for the manage list
 			manageListQuestion = journey.getQuestionByParams({ section: req.params.section, question: req.params.question });
 			if (!manageListQuestion) {
@@ -240,6 +255,7 @@ export function buildSave(saveData, redirectToTaskListOnSuccess) {
 				referenceId: journeyResponse.referenceId,
 				isManageListItem: question.isInManageListSection,
 				manageListQuestionFieldName: manageListQuestion?.fieldName,
+				manageListItemRemove: req.params?.manageListAction === MANAGE_LIST_ACTIONS.REMOVE,
 				data
 			});
 

package/src/controller.test.js

@@ -7,6 +7,7 @@ import { SECTION_STATUS } from './section.js';
 
 import { mockReq, mockRes } from '#test/utils/utils.js';
 import { BOOLEAN_OPTIONS } from '#src/components/boolean/question.js';
+import { MANAGE_LIST_ACTIONS } from '#src/components/manage-list/manage-list-actions.js';
 
 const res = mockRes();
 const mockBaseUrl = '/manage-appeals/questionnaire';
@@ -351,6 +352,129 @@ describe('dynamic-form/controller', () => {
 			assert.ok(args?.customViewData?.originalUrl);
 			assert.strictEqual(args?.customViewData?.originalUrl, req.originalUrl);
 		});
+
+		it('should redirect to tasklist when manage list action is remove and journey response has no answers', async () => {
+			res.redirect.mock.resetCalls();
+
+			sampleQuestionObj.isManageListQuestion = true;
+			sampleQuestionObj.renderConfirmationAction = mock.fn();
+
+			req.params = {
+				referenceId: mockRef,
+				section: mockSection.name,
+				question: sampleQuestionObj.fieldName,
+				manageListAction: MANAGE_LIST_ACTIONS.REMOVE
+			};
+			const mockAnswer = undefined;
+			const mockBackLink = 'back';
+			const mockQuestionRendering = 'test';
+
+			sampleQuestionObj.toViewModel.mock.mockImplementationOnce(() => mockQuestionRendering);
+			mockJourney.getQuestionByParams = mock.fn();
+			mockJourney.getQuestionByParams.mock.mockImplementation(() => sampleQuestionObj);
+			mockJourney.response.answers = mockAnswer;
+			mockJourney.getNextQuestionUrl = mock.fn(() => mockBackLink);
+			mockJourney.getSection = mock.fn(() => mockSection);
+
+			await question(req, res);
+
+			assert.strictEqual(res.redirect.mock.callCount(), 1);
+			assert.deepStrictEqual(res.redirect.mock.calls[0].arguments, [mockJourney.taskListUrl]);
+		});
+
+		it('should redirect to tasklist when manage list action is remove and the manage list answer is undefined', async () => {
+			res.redirect.mock.resetCalls();
+
+			sampleQuestionObj.isManageListQuestion = true;
+			sampleQuestionObj.renderConfirmationAction = mock.fn();
+
+			req.params = {
+				referenceId: mockRef,
+				section: mockSection.name,
+				question: sampleQuestionObj.fieldName,
+				manageListAction: MANAGE_LIST_ACTIONS.REMOVE
+			};
+			const mockAnswer = {
+				wrongFieldName: 'Some value'
+			};
+			const mockBackLink = 'back';
+			const mockQuestionRendering = 'test';
+
+			sampleQuestionObj.toViewModel.mock.mockImplementationOnce(() => mockQuestionRendering);
+			mockJourney.getQuestionByParams = mock.fn();
+			mockJourney.getQuestionByParams.mock.mockImplementation(() => sampleQuestionObj);
+			mockJourney.response.answers = mockAnswer;
+			mockJourney.getNextQuestionUrl = mock.fn(() => mockBackLink);
+			mockJourney.getSection = mock.fn(() => mockSection);
+
+			await question(req, res);
+
+			assert.strictEqual(res.redirect.mock.callCount(), 1);
+			assert.deepStrictEqual(res.redirect.mock.calls[0].arguments, [mockJourney.taskListUrl]);
+		});
+
+		it('should redirect to tasklist when manage list action is remove and the manage list answer is not an array', async () => {
+			res.redirect.mock.resetCalls();
+
+			sampleQuestionObj.isManageListQuestion = true;
+			sampleQuestionObj.renderConfirmationAction = mock.fn();
+
+			req.params = {
+				referenceId: mockRef,
+				section: mockSection.name,
+				question: sampleQuestionObj.fieldName,
+				manageListAction: MANAGE_LIST_ACTIONS.REMOVE
+			};
+			const mockAnswer = {
+				sampleFieldName: 'not-an-array'
+			};
+			const mockBackLink = 'back';
+			const mockQuestionRendering = 'test';
+
+			sampleQuestionObj.toViewModel.mock.mockImplementationOnce(() => mockQuestionRendering);
+			mockJourney.getQuestionByParams = mock.fn();
+			mockJourney.getQuestionByParams.mock.mockImplementation(() => sampleQuestionObj);
+			mockJourney.response.answers = mockAnswer;
+			mockJourney.getNextQuestionUrl = mock.fn(() => mockBackLink);
+			mockJourney.getSection = mock.fn(() => mockSection);
+
+			await question(req, res);
+
+			assert.strictEqual(res.redirect.mock.callCount(), 1);
+			assert.deepStrictEqual(res.redirect.mock.calls[0].arguments, [mockJourney.taskListUrl]);
+		});
+
+		it('should render the confirmation page when manage list action is remove and the question has a renderConfirmationAction function', async () => {
+			res.redirect.mock.resetCalls();
+
+			sampleQuestionObj.isManageListQuestion = true;
+
+			req.params = {
+				referenceId: mockRef,
+				section: mockSection.name,
+				question: sampleQuestionObj.fieldName,
+				manageListAction: MANAGE_LIST_ACTIONS.REMOVE,
+				manageListItemId: 'item-id-1'
+			};
+			const mockAnswer = {
+				sampleFieldName: [{ id: 'item-id-1', name: 'Item 1' }]
+			};
+			const mockBackLink = 'back';
+			const mockQuestionRendering = 'test';
+
+			sampleQuestionObj.toViewModel.mock.mockImplementationOnce(() => mockQuestionRendering);
+			sampleQuestionObj.renderConfirmationAction = mock.fn();
+			mockJourney.getQuestionByParams = mock.fn();
+			mockJourney.getQuestionByParams.mock.mockImplementation(() => sampleQuestionObj);
+			mockJourney.response.answers = mockAnswer;
+			mockJourney.getNextQuestionUrl = mock.fn(() => mockBackLink);
+			mockJourney.getSection = mock.fn(() => mockSection);
+
+			await question(req, res);
+
+			assert.strictEqual(res.redirect.mock.callCount(), 0);
+			assert.strictEqual(sampleQuestionObj.renderConfirmationAction.mock.callCount(), 1);
+		});
 	});
 
 	describe('save', () => {
@@ -389,6 +513,7 @@ describe('dynamic-form/controller', () => {
 					journeyId: journeyParams.journeyId,
 					referenceId: journeyParams.referenceId,
 					isManageListItem: undefined,
+					manageListItemRemove: false,
 					manageListQuestionFieldName: undefined,
 					data: undefined
 				}
@@ -449,6 +574,7 @@ describe('dynamic-form/controller', () => {
 						referenceId: journeyParams.referenceId,
 						data: undefined,
 						isManageListItem: undefined,
+						manageListItemRemove: false,
 						manageListQuestionFieldName: undefined
 					}
 				],
@@ -633,6 +759,14 @@ describe('dynamic-form/controller', () => {
 				const params = journey.redirectToNextQuestion.mock.calls[0].arguments[1];
 				assert.deepStrictEqual(params, req.params);
 			});
+			it('should set manageListItemRemove is true when manageListAction is remove', async () => {
+				const { journey, req, res } = setupJourney();
+				req.params.manageListAction = MANAGE_LIST_ACTIONS.REMOVE;
+				const saveData = mock.fn();
+				await buildSave(saveData)(req, res, 'journey-1');
+				assert.strictEqual(journey.redirectToNextQuestion.mock.callCount(), 1);
+				assert.strictEqual(saveData.mock.calls[0].arguments[0].manageListItemRemove, true);
+			});
 		});
 	});
 });

package/src/journey/journey.js

@@ -4,6 +4,7 @@
  * instances of this class                                 *
  ***********************************************************/
 import { END_OF_SECTION } from '#src/section.js';
+import { MANAGE_LIST_ACTIONS } from '#src/components/manage-list/manage-list-actions.js';
 
 /**
  * @typedef {import('./journey-response').JourneyResponse} JourneyResponse
@@ -174,6 +175,13 @@ export class Journey {
 			return undefined;
 		}
 		if (manageListParams && question.isManageListQuestion) {
+			if (
+				manageListParams.question === question.confirmationQuestionParam &&
+				manageListParams.action === MANAGE_LIST_ACTIONS.REMOVE
+			) {
+				// special case for the delete confirmation page
+				return question;
+			}
 			return question.section.questions.find((q) => matchQuestion(q, manageListParams.question));
 		}
 		return question;
@@ -247,6 +255,17 @@ export class Journey {
 		const numberOfSections = this.sections.length;
 		const sectionsStart = reverse ? numberOfSections - 1 : 0;
 		const questionFieldName = manageListQuestion ? params.manageListQuestion : params.question;
+		if (
+			params.manageListAction === MANAGE_LIST_ACTIONS.REMOVE &&
+			Object.hasOwn(params, 'manageListItemId') &&
+			Object.hasOwn(params, 'manageListQuestion')
+		) {
+			// If you have just confirmed removal of an item, go back to the parent manage list question
+			return this.#buildQuestionUrl({
+				section: params.section,
+				question: params.question
+			});
+		}
 
 		let currentSectionIndex;
 		let foundSection = false;

package/src/journey/journey.test.js

@@ -2,6 +2,7 @@ import { describe, it, mock, beforeEach } from 'node:test';
 import assert from 'node:assert';
 import { Journey } from './journey.js';
 import { Section } from '#src/section.js';
+import { MANAGE_LIST_ACTIONS } from '#src/components/manage-list/manage-list-actions.js';
 
 const mockSectionDetails = [
 	{
@@ -229,6 +230,19 @@ describe('Journey class', () => {
 
 			assert.strictEqual(question, undefined);
 		});
+
+		it('should return the parent question if the question is a remove manage list item confirmation', () => {
+			const journey = new Journey(constructorArgs);
+			journey.sections = mockSections;
+			const question = journey.getQuestionByParams({
+				section: mockSections[0].segment,
+				question: mockSections[0].questions[0].fieldName,
+				manageListAction: MANAGE_LIST_ACTIONS.REMOVE,
+				manageListQuestion: 'confirm',
+				manageListItemId: '123'
+			});
+			assert.strictEqual(question, mockSections[0].questions[0]);
+		});
 	});
 
 	describe('getBackLink', () => {
@@ -291,6 +305,25 @@ describe('Journey class', () => {
 	});
 
 	describe('getNextQuestionUrl', () => {
+		it('should return to parent manageList question if removing an answer', () => {
+			const section = mockSections[2];
+			const name = section.questions[0].fieldName;
+			const journey = new Journey(constructorArgs);
+			journey.sections = mockSections;
+			journey.returnToListing = false;
+			const nextQuestionUrl = journey.getNextQuestionUrl({
+				section: section.segment,
+				question: name,
+				manageListAction: MANAGE_LIST_ACTIONS.REMOVE,
+				manageListQuestion: 'confirm',
+				manageListItemId: '123'
+			});
+			assert.strictEqual(
+				nextQuestionUrl,
+				`${constructorArgs.makeBaseUrl()}/${section.segment}/${section.questions[0].fieldName}`
+			);
+		});
+
 		for (const returnToListing of [true, false]) {
 			it(`should return null if section is not found [${returnToListing}]`, () => {
 				const section = 'section3'; // Non-existent section

package/src/lib/session-answer-store.js

@@ -33,6 +33,10 @@ import { booleanToYesNoValue } from '../components/boolean/question.js';
  * 	}
  * }
  *
+ * Delete behavior for manage-list items:
+ * - When `manageListItemRemove === true`, and both `manageListQuestionFieldName` and `req.params.manageListItemId`
+ *   are present, the item with a matching `id` is removed from the array stored at `answers[manageListQuestionFieldName]`.
+ * - If the list does not exist or is not an array, no action is taken.
  *
  * @param {Object} opts
  * @param {string} [opts.reqParam]
@@ -40,7 +44,14 @@ import { booleanToYesNoValue } from '../components/boolean/question.js';
  * @returns {import('../controller').SaveDataFn}
  */
 export function buildSaveDataToSession({ reqParam } = {}) {
-	return async ({ req, journeyId, data, isManageListItem, manageListQuestionFieldName }) => {
+	return async ({
+		req,
+		journeyId,
+		data,
+		isManageListItem,
+		manageListQuestionFieldName,
+		manageListItemRemove = false
+	}) => {
 		if (!req.session) {
 			throw new Error('request session required');
 		}
@@ -52,14 +63,25 @@ export function buildSaveDataToSession({ reqParam } = {}) {
 			forms = forms[reqParamValue] || (forms[reqParamValue] = {});
 		}
 		let answers = forms[journeyId] || (forms[journeyId] = {});
+
 		if (isManageListItem) {
 			const answersList = answers[manageListQuestionFieldName] || (answers[manageListQuestionFieldName] = []);
 			answers = answersList.find((item) => item.id === req.params.manageListItemId);
-
 			if (!answers) {
 				answers = { id: req.params.manageListItemId };
 				answersList.push(answers);
 			}
+		} else if (manageListItemRemove && manageListQuestionFieldName && req.params.manageListItemId) {
+			const answersList = answers[manageListQuestionFieldName];
+
+			if (!answersList || !Array.isArray(answersList)) return; // nothing to remove
+
+			const index = answersList.findIndex((item) => item.id === req.params.manageListItemId);
+			if (index > -1) {
+				answersList.splice(index, 1);
+				return;
+			}
+			return; // item not found, nothing to remove
 		}
 		for (const [k, v] of Object.entries(data?.answers || {})) {
 			answers[k] = v;

package/src/lib/session-answer-store.test.js

@@ -123,6 +123,34 @@ describe('session-answer-store', () => {
 			});
 		});
 
+		it('should remove a managed list item using the id when present in the session', async () => {
+			const req = mockReq();
+			req.params = { manageListItemId: '56789' };
+			req.session = {
+				forms: {
+					'j-1': {
+						myManagedList: [
+							{ id: '12345', q1: 'keep value' },
+							{ id: '56789', q1: 'remove value' }
+						]
+					}
+				}
+			};
+			const data = {};
+			const journeyId = 'j-1';
+			const manageListQuestionFieldName = 'myManagedList';
+			const manageListItemRemove = true;
+			const saveDataToSession = buildSaveDataToSession();
+			await saveDataToSession({ req, journeyId, data, manageListQuestionFieldName, manageListItemRemove });
+			assert.deepStrictEqual(req.session, {
+				forms: {
+					'j-1': {
+						myManagedList: [{ id: '12345', q1: 'keep value' }]
+					}
+				}
+			});
+		});
+
 		it('should overwrite existing data by reqParam & journeyId', async () => {
 			const req = mockReq();
 			req.params = { myParam: 'req-1' };

package/src/validator/document-upload-validator.js

@@ -4,10 +4,12 @@ import { body } from 'express-validator';
 export default class DocumentUploadValidator extends BaseValidator {
 	/**
 	 * @param {string} fieldName
+	 * @param {string} errorMessage
 	 */
-	constructor(fieldName) {
+	constructor(fieldName, errorMessage = 'Upload an attachment') {
 		super();
 		this.fieldName = fieldName;
+		this.errorMessage = errorMessage;
 	}
 
 	validate() {
@@ -17,7 +19,7 @@ export default class DocumentUploadValidator extends BaseValidator {
 				const parsed = JSON.parse(decodedJson);
 
 				if (parsed.length === 0) {
-					throw new Error('Upload an attachment');
+					throw new Error(this.errorMessage);
 				}
 				return true;
 			})

package/src/validator/document-upload-validator.test.js

@@ -20,7 +20,7 @@ describe('./src/dynamic-forms/validator/document-upload-validator.js', () => {
 		assert.strictEqual(Object.keys(errors).length, 0);
 	});
 
-	it('should return an error message if documents have not been uploaded', async () => {
+	it('should return default error message if documents have not been uploaded', async () => {
 		const req = {
 			body: {
 				myselfAttachments: 'W10='
@@ -33,6 +33,20 @@ describe('./src/dynamic-forms/validator/document-upload-validator.js', () => {
 		assert.strictEqual(Object.keys(errors).length, 1);
 		assert.strictEqual(errors[FIELD_NAME].msg, 'Upload an attachment');
 	});
+
+	it('should return custom error message if documents have not been uploaded', async () => {
+		const req = {
+			body: {
+				myselfAttachments: 'W10='
+			}
+		};
+		const documentUploadValidator = new DocumentUploadValidator(FIELD_NAME, 'Please ensure you upload your documents');
+
+		const errors = await _validationMappedErrors(req, documentUploadValidator);
+
+		assert.strictEqual(Object.keys(errors).length, 1);
+		assert.strictEqual(errors[FIELD_NAME].msg, 'Please ensure you upload your documents');
+	});
 });
 
 const _validationMappedErrors = async (req, validator) => {

package/test/snapshots/manage-list-confirmation-render.html

@@ -0,0 +1,12 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <h1 class="govuk-heading-l">Are you sure you want to remove the following Thing?</h1>
+                    <p class="govuk-body">mock answer</p>
+                    <p class="govuk-body">mock answer 2</p>
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/types/src/components/manage-list/manage-list-actions.d.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * @type {Readonly<{ADD: string, EDIT: string, REMOVE: string}>}
+ */
+export const MANAGE_LIST_ACTIONS: Readonly<{
+    ADD: string;
+    EDIT: string;
+    REMOVE: string;
+}>;
+//# sourceMappingURL=manage-list-actions.d.ts.map

package/types/src/components/manage-list/manage-list-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"manage-list-actions.d.ts","sourceRoot":"","sources":["../../../../src/components/manage-list/manage-list-actions.js"],"names":[],"mappings":"AAAA;;;GAGG;AACH,kCAFU,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAC,CAAC,CAM5D"}

package/types/src/components/manage-list/question.d.ts

@@ -3,12 +3,14 @@
  * @property {string} titleSingular - the single name of the list item, e.g. "Holiday activity"
  * @property {boolean} [showManageListQuestions] - whether to show the question titles as well as answers on the manage list summary page
  * @property {boolean} [showAnswersInSummary] - whether to show the answers on the main check-your-answers page (or just a count)
+ * @property {string} [confirmationQuestion] - the name of the confirmation question to use when removing an item, default 'confirm'
  */
 export default class ManageListQuestion extends Question {
     /**
      * @param {import('#question-types').QuestionParameters & ManageListQuestionParameters} params
      */
     constructor(params: import("#question-types").QuestionParameters & ManageListQuestionParameters);
+    get confirmationQuestionParam(): string;
     getDataToSave(req: any, journeyResponse: any): Promise<{
         answers: {
             [x: string]: any;
@@ -19,6 +21,7 @@ export default class ManageListQuestion extends Question {
         value: string;
         action: import("../../controller.js").ActionView | import("../../controller.js").ActionView[] | undefined;
     }[];
+    renderConfirmationAction(res: any, itemToRemove: any, viewModel: any): void;
     set section(section: import("../../section.js").Section);
     get section(): import("../../section.js").Section;
     #private;
@@ -36,6 +39,10 @@ export type ManageListQuestionParameters = {
      * - whether to show the answers on the main check-your-answers page (or just a count)
      */
     showAnswersInSummary?: boolean | undefined;
+    /**
+     * - the name of the confirmation question to use when removing an item, default 'confirm'
+     */
+    confirmationQuestion?: string | undefined;
 };
 import { Question } from '#question';
 //# sourceMappingURL=question.d.ts.map

package/types/src/components/manage-list/question.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/manage-list/question.js"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH;IAMC;;OAEG;IACH,oBAFW,OAAO,iBAAiB,EAAE,kBAAkB,GAAG,4BAA4B,EAcrF;IAgED;;;;OAMC;IAED;;;;QAsBC;IAoCD,yDAEC;IATD,kDAKC;;CAKD;;;;;mBA/Ja,MAAM;;;;;;;;;;yBANK,WAAW"}
+{"version":3,"file":"question.d.ts","sourceRoot":"","sources":["../../../../src/components/manage-list/question.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AAEH;IAOC;;OAEG;IACH,oBAFW,OAAO,iBAAiB,EAAE,kBAAkB,GAAG,4BAA4B,EAerF;IAcD,wCAEC;IAyDD;;;;OAMC;IAED;;;;QAsBC;IAED,4EAQC;IAoCD,yDAEC;IATD,kDAKC;;CAKD;;;;;mBArLa,MAAM;;;;;;;;;;;;;;yBAPK,WAAW"}

package/types/src/controller.d.ts

@@ -24,6 +24,7 @@ export function question(req: any, res: any): Promise<any>;
  * @property {string} referenceId
  * @property {boolean} isManageListItem
  * @property {string} [manageListQuestionFieldName]
+ * @property {boolean} [manageListItemRemove]
  * @property {Object<string, any>} data
  */
 /**
@@ -70,6 +71,7 @@ export type SaveParams = {
     referenceId: string;
     isManageListItem: boolean;
     manageListQuestionFieldName?: string | undefined;
+    manageListItemRemove?: boolean | undefined;
     data: {
         [x: string]: any;
     };

package/types/src/controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/controller.js"],"names":[],"mappings":"AAsEA;;;GAGG;AACH,qCAHW,MAAM,OAKhB;AAED;;;;;GAKG;AACH,sDAHW,MAAM,YACN,MAAM,gBA8DhB;AAED;;;;GAIG;AACH,2DA6BC;AAED;;;;;;;;;GASG;AAEH;;GAEG;AAEH;;;;GAIG;AACH,oCAJW,UAAU,gCACV,OAAO,OAsFjB;sBAvRY,OAAO,sBAAsB,EAAE,OAAO;uBACtC,OAAO,yBAAyB,EAAE,QAAQ;;;aAMzC,MAAM;YACN,MAAM;UAEjB;QAAiC,IAAI,EAA1B,KAAK,CAAE,OAAO,CAAC;KAC5B;;;SAIa;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;WAChB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;eAC1B,UAAU,EAAE;;;;UAKrB,MAAM;UACN,MAAM;;;;;;eA6JN,MAAM;iBACN,MAAM;sBACN,OAAO;;;;;;yBAMR,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC"}
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../src/controller.js"],"names":[],"mappings":"AAuEA;;;GAGG;AACH,qCAHW,MAAM,OAKhB;AAED;;;;;GAKG;AACH,sDAHW,MAAM,YACN,MAAM,gBA8DhB;AAED;;;;GAIG;AACH,2DA0CC;AAED;;;;;;;;;;GAUG;AAEH;;GAEG;AAEH;;;;GAIG;AACH,oCAJW,UAAU,gCACV,OAAO,OAuFjB;sBAtSY,OAAO,sBAAsB,EAAE,OAAO;uBACtC,OAAO,yBAAyB,EAAE,QAAQ;;;aAMzC,MAAM;YACN,MAAM;UAEjB;QAAiC,IAAI,EAA1B,KAAK,CAAE,OAAO,CAAC;KAC5B;;;SAIa;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;WAChB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE;;eAC1B,UAAU,EAAE;;;;UAKrB,MAAM;UACN,MAAM;;;;;;eA0KN,MAAM;iBACN,MAAM;sBACN,OAAO;;;;;;;yBAOR,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC"}

package/types/src/journey/journey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"journey.d.ts","sourceRoot":"","sources":["../../../src/journey/journey.js"],"names":[],"mappings":"AAOA;;;;GAIG;AAEH;;;GAGG;AACH;IAwBC;;;;;;;;;;;;;;OAcG;IACH,qLAZG;QAAwB,SAAS,EAAzB,MAAM;QACyC,WAAW,EAA1D,CAAC,QAAQ,EAAE,eAAe,KAAK,MAAM;QACpB,WAAW;QACH,QAAQ,EAAjC,eAAe;QACC,eAAe,EAA/B,MAAM;QACU,gBAAgB,EAAhC,MAAM;QACW,uBAAuB;QACxB,YAAY,EAA5B,MAAM;QACY,eAAe;QACd,QAAQ,EAA3B,OAAO,EAAE;QACQ,eAAe;KAC1C,EAoDA;IAzFD,8EAA8E;IAC9E,WADW,MAAM,CACP;IACV,qEAAqE;IACrE,UADW,KAAK,CAAE,OAAO,CAAC,CACZ;IACd,mFAAmF;IACnF,UADW,eAAe,CACjB;IACT,wFAAwF;IACxF,SADW,MAAM,CACJ;IACb,8HAA8H;IAC9H,aADW,CAAC,eAAe,EAAE,eAAe,KAAK,MAAM,CAChC;IACvB,kEAAkE;IAClE,aADW,MAAM,CACA;IACjB,uEAAuE;IACvE,iBADW,MAAM,CACI;IACrB,qFAAqF;IACrF,kBADW,MAAM,CACK;IACtB,4GAA4G;IAC5G,yBADW,MAAM,CACY;IAC7B,qFAAqF;IACrF,iBADW,OAAO,CACM;IACxB,2DAA2D;IAC3D,cADU,MAAM,CACH;IAmEZ,+BAA8C;IA2C/C;;;;OAIG;IACH,2BAHW,MAAM,GACJ,OAAO,GAAG,SAAS,CAM/B;IAuBD;;;;OAIG;IACH,4BAHW,OAAO,sBAAsB,EAAE,WAAW,GACxC,QAAQ,GAAG,SAAS,CAiBhC;IAED;;;;;;;OAOG;IACH,4CAJG;QAA4D,MAAM,EAA1D,OAAO,sBAAsB,EAAE,WAAW;QACkB,kBAAkB;KACtF,GAAU,MAAM,GAAC,IAAI,CAWvB;IAED;;;;;;;;OAQG;IACH,yCAJW,OAAO,sBAAsB,EAAE,WAAW,kFAExC,IAAI,CAKhB;IAED;;;;;;;;OAQG;IACH,2BANW,OAAO,sBAAsB,EAAE,WAAW,oCAElD;QAA0B,OAAO;QACmC,kBAAkB;KACtF,GAAU,MAAM,GAAC,IAAI,CA8DvB;IAED;;;;;OAKG;IACH,wBAAyB,gBAJd,MAI4B,EAAE,iBAH9B,MAG6C,KAF3C,MAAM,CAqBjB;IAEF;;;;OAIG;IACH,sCAAuC,iBAH5B,MAG2C,KAFzC,MAAM,CAIjB;IAEF;;;;;;OAMG;IACH,0BAA2B,gBALhB,MAK8B,EAAE,iBAJhC,MAI+C,EAAE,UAHjD,MAGyD,KAFvD,MAAM,CAuBjB;IAEF;;;OAGG;IACH,cAFa,OAAO,CAInB;IAED;;OAEG;IACH,6BAFW,eAAe,QAKzB;;CACD"}
+{"version":3,"file":"journey.d.ts","sourceRoot":"","sources":["../../../src/journey/journey.js"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH;;;GAGG;AACH;IAwBC;;;;;;;;;;;;;;OAcG;IACH,qLAZG;QAAwB,SAAS,EAAzB,MAAM;QACyC,WAAW,EAA1D,CAAC,QAAQ,EAAE,eAAe,KAAK,MAAM;QACpB,WAAW;QACH,QAAQ,EAAjC,eAAe;QACC,eAAe,EAA/B,MAAM;QACU,gBAAgB,EAAhC,MAAM;QACW,uBAAuB;QACxB,YAAY,EAA5B,MAAM;QACY,eAAe;QACd,QAAQ,EAA3B,OAAO,EAAE;QACQ,eAAe;KAC1C,EAoDA;IAzFD,8EAA8E;IAC9E,WADW,MAAM,CACP;IACV,qEAAqE;IACrE,UADW,KAAK,CAAE,OAAO,CAAC,CACZ;IACd,mFAAmF;IACnF,UADW,eAAe,CACjB;IACT,wFAAwF;IACxF,SADW,MAAM,CACJ;IACb,8HAA8H;IAC9H,aADW,CAAC,eAAe,EAAE,eAAe,KAAK,MAAM,CAChC;IACvB,kEAAkE;IAClE,aADW,MAAM,CACA;IACjB,uEAAuE;IACvE,iBADW,MAAM,CACI;IACrB,qFAAqF;IACrF,kBADW,MAAM,CACK;IACtB,4GAA4G;IAC5G,yBADW,MAAM,CACY;IAC7B,qFAAqF;IACrF,iBADW,OAAO,CACM;IACxB,2DAA2D;IAC3D,cADU,MAAM,CACH;IAmEZ,+BAA8C;IA2C/C;;;;OAIG;IACH,2BAHW,MAAM,GACJ,OAAO,GAAG,SAAS,CAM/B;IA8BD;;;;OAIG;IACH,4BAHW,OAAO,sBAAsB,EAAE,WAAW,GACxC,QAAQ,GAAG,SAAS,CAiBhC;IAED;;;;;;;OAOG;IACH,4CAJG;QAA4D,MAAM,EAA1D,OAAO,sBAAsB,EAAE,WAAW;QACkB,kBAAkB;KACtF,GAAU,MAAM,GAAC,IAAI,CAWvB;IAED;;;;;;;;OAQG;IACH,yCAJW,OAAO,sBAAsB,EAAE,WAAW,kFAExC,IAAI,CAKhB;IAED;;;;;;;;OAQG;IACH,2BANW,OAAO,sBAAsB,EAAE,WAAW,oCAElD;QAA0B,OAAO;QACmC,kBAAkB;KACtF,GAAU,MAAM,GAAC,IAAI,CAyEvB;IAED;;;;;OAKG;IACH,wBAAyB,gBAJd,MAI4B,EAAE,iBAH9B,MAG6C,KAF3C,MAAM,CAqBjB;IAEF;;;;OAIG;IACH,sCAAuC,iBAH5B,MAG2C,KAFzC,MAAM,CAIjB;IAEF;;;;;;OAMG;IACH,0BAA2B,gBALhB,MAK8B,EAAE,iBAJhC,MAI+C,EAAE,UAHjD,MAGyD,KAFvD,MAAM,CAuBjB;IAEF;;;OAGG;IACH,cAFa,OAAO,CAInB;IAED;;OAEG;IACH,6BAFW,eAAe,QAKzB;;CACD"}

package/types/src/lib/session-answer-store.d.ts

@@ -28,6 +28,10 @@
  * 	}
  * }
  *
+ * Delete behavior for manage-list items:
+ * - When `manageListItemRemove === true`, and both `manageListQuestionFieldName` and `req.params.manageListItemId`
+ *   are present, the item with a matching `id` is removed from the array stored at `answers[manageListQuestionFieldName]`.
+ * - If the list does not exist or is not an array, no action is taken.
  *
  * @param {Object} opts
  * @param {string} [opts.reqParam]

package/types/src/lib/session-answer-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"session-answer-store.d.ts","sourceRoot":"","sources":["../../../src/lib/session-answer-store.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,sDAJG;IAAsB,QAAQ;CAE9B,OA4BF;AASD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,gFANG;IAA0C,GAAG,EAArC,GAAyB;IACV,SAAS,EAAxB,MAAM;IACuB,WAAW;;;IACxB,QAAQ;CAChC,GAAU,IAAI,CAkBhB;AAED;;;;;;GAMG;AACH,8DAJW,MAAM,aACN,MAAM,OA4BhB;AA/ED;;;;GAIG;AACH,oCAA0D"}
+{"version":3,"file":"session-answer-store.d.ts","sourceRoot":"","sources":["../../../src/lib/session-answer-store.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,sDAJG;IAAsB,QAAQ;CAE9B,OA8CF;AASD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,gFANG;IAA0C,GAAG,EAArC,GAAyB;IACV,SAAS,EAAxB,MAAM;IACuB,WAAW;;;IACxB,QAAQ;CAChC,GAAU,IAAI,CAkBhB;AAED;;;;;;GAMG;AACH,8DAJW,MAAM,aACN,MAAM,OA4BhB;AA/ED;;;;GAIG;AACH,oCAA0D"}

package/types/src/validator/document-upload-validator.d.ts

@@ -1,8 +1,9 @@
 export default class DocumentUploadValidator extends BaseValidator {
     /**
      * @param {string} fieldName
+     * @param {string} errorMessage
      */
-    constructor(fieldName: string);
+    constructor(fieldName: string, errorMessage?: string);
     fieldName: string;
     validate(): import("express-validator").ValidationChain[];
 }

package/types/src/validator/document-upload-validator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document-upload-validator.d.ts","sourceRoot":"","sources":["../../../src/validator/document-upload-validator.js"],"names":[],"mappings":"AAGA;IACC;;OAEG;IACH,uBAFW,MAAM,EAKhB;IADA,kBAA0B;IAG3B,0DAYC;CACD;0BAzByB,qBAAqB"}
+{"version":3,"file":"document-upload-validator.d.ts","sourceRoot":"","sources":["../../../src/validator/document-upload-validator.js"],"names":[],"mappings":"AAGA;IACC;;;OAGG;IACH,uBAHW,MAAM,iBACN,MAAM,EAMhB;IAFA,kBAA0B;IAI3B,0DAYC;CACD;0BA3ByB,qBAAqB"}