@planning-inspectorate/dynamic-forms 3.0.0 → 3.1.0

package/README.md

@@ -296,4 +296,15 @@ There are some lightweight tests in the `test` directory which sets up a basic j
 
 When adding a new question type, be sure to add an example question into `test/questions.js`, and mock answers into `test/questions.test.js#mockAnswerBody` and `test/questions.test.js#mockAnswer`. Also, the question should be added to the journey in `test/journey.js`.
 
-To update any snapshots with rendering changes (or new questions), run `node --test --test-update-snapshots`.
+To update any snapshots with rendering changes (or new questions), run `node --test --test-update-snapshots`.
+
+### Components
+
+When implement a new component, extend the base `Question` class. Common methods to override are:
+
+* `formatAnswerForSummary` - used for check-your-answers display
+* `getDataToSave` - answer data to save
+* `addCustomDataToViewModel` - customise the view model with extra data/configuration
+* `answerForViewModel` - customise the view model answer value
+
+Where possible `addCustomDataToViewModel` and `answerForViewModel` should be overridden instead of `prepQuestionForRendering`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",
@@ -27,7 +27,8 @@
   "imports": {
     "#question-types": "./src/questions/question-types.d.ts",
     "#src/*": "./src/*",
-    "#test/*": "./test/*"
+    "#test/*": "./test/*",
+    "#question": "./src/questions/question.js"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.0.0",

package/src/components/address/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 
 import escape from 'escape-html';
 import { Address } from '../../lib/address.js';
@@ -40,29 +40,35 @@ export default class AddressQuestion extends Question {
 	}
 
 	/**
-	 * @param {Section} section
-	 * @param {Journey} journey
-	 * @param {Record<string, unknown>} customViewData
-	 * @returns {QuestionViewModel}
+	 * @param {Record<string, any>} answers
+	 * @returns {*|string}
 	 */
-	prepQuestionForRendering(section, journey, customViewData) {
-		const viewModel = super.prepQuestionForRendering(section, journey, customViewData);
-		const address = journey.response.answers[this.fieldName] || {};
-
-		// will only ever have 1
-		if (address) {
-			viewModel.question.value = {
-				addressLine1: address.addressLine1 || '',
-				addressLine2: address.addressLine2 || '',
-				townCity: address.townCity || '',
-				county: address.county || '',
-				postcode: address.postcode || ''
+	answerForViewModel(answers) {
+		let address = answers[this.fieldName];
+		if (!address) {
+			address = {
+				addressLine1: answers[this.fieldName + '_addressLine1'],
+				addressLine2: answers[this.fieldName + '_addressLine2'],
+				townCity: answers[this.fieldName + '_townCity'],
+				county: answers[this.fieldName + '_county'],
+				postcode: answers[this.fieldName + '_postcode']
 			};
 		}
 
-		viewModel.question.labels = this.addressLabels;
+		return {
+			addressLine1: address?.addressLine1 || '',
+			addressLine2: address?.addressLine2 || '',
+			townCity: address?.townCity || '',
+			county: address?.county || '',
+			postcode: address?.postcode || ''
+		};
+	}
 
-		return viewModel;
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
+		viewModel.question.labels = this.addressLabels;
 	}
 
 	/**

package/src/components/address/question.test.js

@@ -3,7 +3,7 @@ import assert from 'node:assert';
 import AddressQuestion from './question.js';
 import { Address } from '../../lib/address.js';
 import AddressValidator from '../../validator/address-validator.js';
-import { configureNunjucksTestEnv } from '../../../test/utils/nunjucks.js';
+import { configureNunjucksTestEnv } from '#test/utils/nunjucks.js';
 
 describe('AddressQuestion', () => {
 	const TITLE = 'What is the site address?';

package/src/components/date/question.js

@@ -50,29 +50,17 @@ export default class DateQuestion extends Question {
 		return responseToSave;
 	}
 
-	/**
-	 * gets the view model for this question
-	 * @param {Section} section - the current section
-	 * @param {Journey} journey - the journey we are in
-	 * @param {Object|undefined} [customViewData] additional data to send to view
-	 * @returns {QuestionViewModel & { answer: Record<string, unknown> }}
-	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
-
-		/** @type {Record<string, unknown>} */
-		let answer = {};
+	answerForViewModel(answers, isPayload) {
 		let day;
 		let month;
 		let year;
 
-		if (payload) {
-			day = payload[`${this.fieldName}_day`];
-			month = payload[`${this.fieldName}_month`];
-			year = payload[`${this.fieldName}_year`];
+		if (isPayload && answers) {
+			day = answers[`${this.fieldName}_day`];
+			month = answers[`${this.fieldName}_month`];
+			year = answers[`${this.fieldName}_year`];
 		} else {
-			const answerDateString = journey.response.answers[this.fieldName];
-
+			const answerDateString = answers[this.fieldName];
 			if (answerDateString && (typeof answerDateString === 'string' || answerDateString instanceof Date)) {
 				const answerDate = new Date(answerDateString);
 				day = formatDateForDisplay(answerDate, { format: 'd' });
@@ -81,13 +69,11 @@ export default class DateQuestion extends Question {
 			}
 		}
 
-		answer = {
+		return {
 			[`${this.fieldName}_day`]: day,
 			[`${this.fieldName}_month`]: month,
 			[`${this.fieldName}_year`]: year
 		};
-
-		return { ...viewModel, answer, question: { ...viewModel.question, value: answer } };
 	}
 
 	/**

package/src/components/date/question.test.js

@@ -1,7 +1,7 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert';
 
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import DateQuestion from './question.js';
 
 describe('DateQuestion', () => {

package/src/components/date-period/question.js

@@ -1,5 +1,5 @@
 import { formatDateForDisplay, parseDateInput } from '../../lib/date-utils.js';
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import { nl2br } from '../../lib/utils.js';
 import escape from 'escape-html';
 
@@ -77,20 +77,7 @@ export default class DatePeriodQuestion extends Question {
 		return responseToSave;
 	}
 
-	/**
-	 * gets the view model for this question
-	 * @param {Section} section - the current section
-	 * @param {Journey} journey - the journey we are in
-	 * @param {Object|undefined} [customViewData] additional data to send to view
-	 * @param {Object|undefined} [payload] the current payload
-	 * @returns {QuestionViewModel & { answer: Record<string, unknown> }}
-	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
-		viewModel.labels = this.labels;
-
-		/** @type {Record<string, unknown>} */
-		let answer;
+	answerForViewModel(answers, isPayload) {
 		let startDay;
 		let startMonth;
 		let startYear;
@@ -98,15 +85,15 @@ export default class DatePeriodQuestion extends Question {
 		let endMonth;
 		let endYear;
 
-		if (payload) {
-			startDay = payload[`${this.fieldName}_start_day`];
-			startMonth = payload[`${this.fieldName}_start_month`];
-			startYear = payload[`${this.fieldName}_start_year`];
-			endDay = payload[`${this.fieldName}_end_day`];
-			endMonth = payload[`${this.fieldName}_end_month`];
-			endYear = payload[`${this.fieldName}_end_year`];
+		if (isPayload) {
+			startDay = answers[`${this.fieldName}_start_day`];
+			startMonth = answers[`${this.fieldName}_start_month`];
+			startYear = answers[`${this.fieldName}_start_year`];
+			endDay = answers[`${this.fieldName}_end_day`];
+			endMonth = answers[`${this.fieldName}_end_month`];
+			endYear = answers[`${this.fieldName}_end_year`];
 		} else {
-			const answerPeriod = journey.response.answers[this.fieldName];
+			const answerPeriod = answers[this.fieldName];
 			if (answerPeriod && answerPeriod.start) {
 				const startDate = new Date(answerPeriod.start);
 				startDay = formatDateForDisplay(startDate, { format: 'd' });
@@ -121,7 +108,7 @@ export default class DatePeriodQuestion extends Question {
 			}
 		}
 
-		answer = {
+		return {
 			[`${this.fieldName}_start_day`]: startDay,
 			[`${this.fieldName}_start_month`]: startMonth,
 			[`${this.fieldName}_start_year`]: startYear,
@@ -129,8 +116,13 @@ export default class DatePeriodQuestion extends Question {
 			[`${this.fieldName}_end_month`]: endMonth,
 			[`${this.fieldName}_end_year`]: endYear
 		};
+	}
 
-		return { ...viewModel, answer, question: { ...viewModel.question, value: answer } };
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
+		viewModel.labels = this.labels;
 	}
 
 	/**

package/src/components/date-period/question.test.js

@@ -1,7 +1,7 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert';
 
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import DatePeriodQuestion from './question.js';
 
 describe('DatePeriodQuestion', () => {

package/src/components/date-time/question.js

@@ -52,18 +52,7 @@ export default class DateTimeQuestion extends Question {
 		return responseToSave;
 	}
 
-	/**
-	 * gets the view model for this question
-	 * @param {Section} section - the current section
-	 * @param {Journey} journey - the journey we are in
-	 * @param {Object|undefined} [customViewData] additional data to send to view
-	 * @returns {QuestionViewModel & { answer: Record<string, unknown> }}
-	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
-
-		/** @type {Record<string, unknown>} */
-		let answer = {};
+	answerForViewModel(answers, isPayload) {
 		let day;
 		let month;
 		let year;
@@ -71,15 +60,15 @@ export default class DateTimeQuestion extends Question {
 		let minutes;
 		let period;
 
-		if (payload) {
-			day = payload[`${this.fieldName}_day`];
-			month = payload[`${this.fieldName}_month`];
-			year = payload[`${this.fieldName}_year`];
-			hour = payload[`${this.fieldName}_hour`];
-			minutes = payload[`${this.fieldName}_minutes`];
-			period = payload[`${this.fieldName}_period`];
+		if (isPayload) {
+			day = answers[`${this.fieldName}_day`];
+			month = answers[`${this.fieldName}_month`];
+			year = answers[`${this.fieldName}_year`];
+			hour = answers[`${this.fieldName}_hour`];
+			minutes = answers[`${this.fieldName}_minutes`];
+			period = answers[`${this.fieldName}_period`];
 		} else {
-			const answerDateString = journey.response.answers[this.fieldName];
+			const answerDateString = answers[this.fieldName];
 
 			if (answerDateString && (typeof answerDateString === 'string' || answerDateString instanceof Date)) {
 				const answerDate = new Date(answerDateString);
@@ -92,7 +81,7 @@ export default class DateTimeQuestion extends Question {
 			}
 		}
 
-		answer = {
+		return {
 			[`${this.fieldName}_day`]: day,
 			[`${this.fieldName}_month`]: month,
 			[`${this.fieldName}_year`]: year,
@@ -100,8 +89,6 @@ export default class DateTimeQuestion extends Question {
 			[`${this.fieldName}_minutes`]: minutes,
 			[`${this.fieldName}_period`]: period
 		};
-
-		return { ...viewModel, answer, question: { ...viewModel.question, value: answer } };
 	}
 
 	/**

package/src/components/identifier/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 
 export default class IdentifierQuestion extends Question {
 	/** @type {string|undefined} page h1, optional, will default to use question's label */
@@ -22,13 +22,10 @@ export default class IdentifierQuestion extends Question {
 	}
 
 	/**
-	 * adds custom identifier info to view model
+	 * @param {import('#question').QuestionViewModel} viewModel
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.inputClasses = this.inputClasses;
 		viewModel.question.label = this.label;
-		viewModel.question.value = payload ? payload[viewModel.question.fieldName] : viewModel.question.value;
-		return viewModel;
 	}
 }

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

@@ -21,7 +21,7 @@
                                     {% if showManageListQuestions %}
                                     {{ value.question }}:<br>
                                     {% endif %}
-                                    {{ value.answer }}
+                                    {{ value.answer | safe }}
                                     {% if not loop.last %}
                                     <br>{% if showManageListQuestions %}<br>{% endif %}
 

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

@@ -1,6 +1,5 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import { Uuid } from '#src/lib/uuid.js';
-import escape from 'escape-html';
 import { nunjucksEnv } from '#src/components/utils/nunjucks.js';
 
 /**
@@ -45,8 +44,10 @@ export default class ManageListQuestion extends Question {
 		return true;
 	}
 
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		const viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload);
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.addAnotherLink = this.#addAnotherLink;
 		viewModel.question.firstQuestionUrl = this.#firstQuestionUrl;
 		viewModel.question.valueSummary = [];
@@ -58,7 +59,6 @@ export default class ManageListQuestion extends Question {
 				};
 			});
 		}
-		return viewModel;
 	}
 
 	/**
@@ -76,7 +76,7 @@ export default class ManageListQuestion extends Question {
 		return this.section.questions.map((q) => {
 			const formatted = q
 				.formatAnswerForSummary('', mockJourney, answer[q.fieldName])
-				.map((a) => escape(a.value))
+				.map((a) => a.value)
 				.join(', ');
 
 			return {

package/src/components/multi-field-input/index.njk

@@ -5,7 +5,7 @@
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
-{% set inputFields = question.inputFields %}
+{% set inputFields = question.value %}
 
 {% block dynQuestionContent %}
     <div class="govuk-grid-row">

package/src/components/multi-field-input/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import escape from 'escape-html';
 import { nl2br } from '../../lib/utils.js';
 
@@ -56,22 +56,21 @@ export default class MultiFieldInputQuestion extends Question {
 		}
 	}
 
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
-
-		const inputFields = this.inputFields.map((inputField) => {
-			return payload
-				? { ...inputField, value: this.#formatValue(payload[inputField.fieldName], inputField.formatTextFunction) }
-				: {
-						...inputField,
-						value: this.#formatValue(journey.response.answers[inputField.fieldName], inputField.formatTextFunction)
-					};
+	answerForViewModel(answers) {
+		return this.inputFields.map((inputField) => {
+			return {
+				...inputField,
+				value: this.#formatValue(answers[inputField.fieldName], inputField.formatTextFunction)
+			};
 		});
+	}
 
-		viewModel.question.inputFields = inputFields;
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.attributes = this.inputAttributes;
-		return viewModel;
 	}
 
 	/**

package/src/components/multi-field-input/question.test.js

@@ -73,8 +73,8 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 			const result = question.prepQuestionForRendering({}, journey, customViewData);
 
 			assert.strictEqual(result.question?.fieldName, FIELDNAME);
-			assert.strictEqual(result.question?.inputFields[0].fieldName, INPUTFIELDS[0].fieldName);
-			assert.strictEqual(result.question?.inputFields[1].fieldName, INPUTFIELDS[1].fieldName);
+			assert.strictEqual(result.question?.value[0].fieldName, INPUTFIELDS[0].fieldName);
+			assert.strictEqual(result.question?.value[1].fieldName, INPUTFIELDS[1].fieldName);
 			assert.strictEqual(result.hello, 'hi');
 		});
 		it('should set inputFields with values from payload if provided', () => {
@@ -94,8 +94,8 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 
 			const result = question.prepQuestionForRendering({}, journey, {}, payload);
 
-			assert.strictEqual(result.question?.inputFields[0].value, 'payloadValue1');
-			assert.strictEqual(result.question?.inputFields[1].value, 'payloadValue2');
+			assert.strictEqual(result.question?.value[0].value, 'payloadValue1');
+			assert.strictEqual(result.question?.value[1].value, 'payloadValue2');
 		});
 		it('should set inputFields with values from journey response if payload is not provided', () => {
 			const question = createMultiFieldInputQuestion();
@@ -113,8 +113,8 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 
 			const result = question.prepQuestionForRendering({}, journey, {});
 
-			assert.strictEqual(result.question?.inputFields[0].value, 'responseValue1');
-			assert.strictEqual(result.question?.inputFields[1].value, 'responseValue2');
+			assert.strictEqual(result.question?.value[0].value, 'responseValue1');
+			assert.strictEqual(result.question?.value[1].value, 'responseValue2');
 		});
 		it('should set inputFields with formatted values from journey response if formatTextFunction is provided', () => {
 			const formatTextFunction = (value) => `Formatted: ${value}`;
@@ -136,8 +136,8 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 
 			const result = question.prepQuestionForRendering({}, journey, {});
 
-			assert.strictEqual(result.question?.inputFields[0].value, 'Formatted: responseValue1');
-			assert.strictEqual(result.question?.inputFields[1].value, 'Formatted: responseValue2');
+			assert.strictEqual(result.question?.value[0].value, 'Formatted: responseValue1');
+			assert.strictEqual(result.question?.value[1].value, 'Formatted: responseValue2');
 		});
 	});
 

package/src/components/number-entry/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import { getPersistedNumberAnswer } from '../utils/persisted-number-answer.js';
 
 /**
@@ -21,22 +21,16 @@ export default class NumberEntryQuestion extends Question {
 		this.label = label;
 	}
 
+	answerForViewModel(answers) {
+		return getPersistedNumberAnswer(answers[this.fieldName] || '');
+	}
+
 	/**
-	 * adds label and suffix property to view model
+	 * @param {import('#question').QuestionViewModel} viewModel
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload);
-
-		const answer = journey.response.answers[this.fieldName];
-		const persistedAnswer = getPersistedNumberAnswer(answer);
-
-		viewModel.question.value = persistedAnswer;
-		viewModel.answer = persistedAnswer;
-
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.suffix = this.suffix;
-
-		return viewModel;
 	}
 
 	/**

package/src/components/radio/question.js

@@ -60,13 +60,11 @@ export default class RadioQuestion extends OptionsQuestion {
 	}
 
 	/**
-	 * adds label property to view model
+	 * @param {import('#question').QuestionViewModel} viewModel
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload);
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.legend = this.legend;
-		return viewModel;
 	}
 
 	/**

package/src/components/select/question.js

@@ -54,13 +54,11 @@ export default class SelectQuestion extends OptionsQuestion {
 	}
 
 	/**
-	 * adds label property to view model
+	 * @param {import('#question').QuestionViewModel} viewModel
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload);
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.legend = this.legend;
-		return viewModel;
 	}
 
 	/**

package/src/components/single-line-input/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 
 /**
  * @typedef {import('../../questions/question.js').QuestionViewModel} QuestionViewModel
@@ -32,17 +32,16 @@ export default class SingleLineInputQuestion extends Question {
 		this.classes = params.classes || '';
 	}
 
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
-		viewModel.question.value = payload ? payload[viewModel.question.fieldName] : viewModel.question.value;
-
 		// Extract type from attributes to pass separately to avoid duplication
 		const { type, ...otherAttributes } = this.inputAttributes;
 		viewModel.question.attributes = otherAttributes;
 		viewModel.question.type = type;
 
 		viewModel.question.classes = this.classes;
-		return viewModel;
 	}
 }

package/src/components/text-entry/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 /**
  * @typedef {import('../../questions/question.js').QuestionViewModel} QuestionViewModel
  * @typedef {import('../../journey/journey.js').Journey} Journey
@@ -33,11 +33,11 @@ export default class TextEntryQuestion extends Question {
 		this.label = label;
 	}
 
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.textEntryCheckbox = this.textEntryCheckbox;
-		viewModel.question.value = payload ? payload[viewModel.question.fieldName] : viewModel.question.value;
-		return viewModel;
 	}
 }

package/src/components/text-entry-redact/question.js

@@ -1,4 +1,4 @@
-import { Question } from '../../questions/question.js';
+import { Question } from '#question';
 import { nl2br } from '../../lib/utils.js';
 
 /**
@@ -68,18 +68,27 @@ export default class TextEntryRedactQuestion extends Question {
 		return super.getDataToSave(req, journeyResponse);
 	}
 
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
+	prepQuestionForRendering(section, journey, customViewData, payload, options) {
+		const viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload, options);
+		const answers = this.answerObjectFromJourneyResponse(journey.response, options);
+		const answer = viewModel.question.value;
+		viewModel.question.valueRedacted = answers[this.fieldName + 'Redacted'] || answer;
+		viewModel.question.valueOriginal = answers[this.fieldName + 'Original'] || answer;
+		return viewModel;
+	}
+
+	answerForViewModel(answers) {
+		return nl2br(answers[this.fieldName]);
+	}
+
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.textEntryCheckbox = this.textEntryCheckbox;
-		viewModel.question.value = nl2br(payload ? payload[viewModel.question.fieldName] : viewModel.question.value);
-		viewModel.question.valueRedacted =
-			journey.response.answers[this.fieldName + 'Redacted'] || viewModel.question.value;
-		viewModel.question.valueOriginal =
-			journey.response.answers[this.fieldName + 'Original'] || viewModel.question.value;
 		viewModel.question.summaryText = this.summaryText;
 		viewModel.showSuggestionsUi = this.showSuggestionsUi;
-		return viewModel;
 	}
 
 	formatAnswerForSummary(sectionSegment, journey, answer, capitals = true) {

package/src/components/text-entry-redact/question.test.js

@@ -5,7 +5,7 @@ import { configureNunjucksTestEnv } from '../../../test/utils/nunjucks.js';
 
 describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 	const TITLE = 'title';
-	const QUESTION = 'Question?';
+	const QUESTION = 'Redaction Question';
 	const FIELDNAME = 'field-name';
 	const VALIDATORS = [1, 2];
 	const HTML = '/path/to/html.njk';
@@ -130,18 +130,15 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				return 'back';
 			},
 			response: {
-				answers: {}
+				answers: {
+					'field-name': 'value',
+					'field-nameRedacted': 'value-redacted',
+					'field-nameOriginal': 'value'
+				}
 			}
 		};
 		const customViewData = {
 			layoutTemplate: 'views/layout-journey.njk',
-			question: {
-				question: 'Redaction Question',
-				fieldName: 'field-name',
-				value: 'value',
-				valueRedacted: 'value-redacted',
-				valueOriginal: 'value'
-			},
 			redactionSuggestions: [
 				{ category: 'Person', suggestion: 'Test Person' },
 				{ category: 'Address', suggestion: '123 Fake Street' }
@@ -177,17 +174,13 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				return 'back';
 			},
 			response: {
-				answers: {}
+				answers: {
+					'field-name': 'This is my comment.\nIt has multiple lines.\r\nHere is another line.'
+				}
 			}
 		};
 		const customViewData = {
 			layoutTemplate: 'views/layout-journey.njk',
-			question: {
-				question: 'Redaction Question',
-				fieldName: 'field-name',
-				value: 'This is my comment.\nIt has multiple lines.\r\nHere is another line.',
-				valueRedacted: 'value-redacted'
-			},
 			redactionSuggestions: [
 				{ category: 'Person', suggestion: 'Test Person' },
 				{ category: 'Address', suggestion: '123 Fake Street' }
@@ -235,7 +228,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				action: {
 					href: '/redacted-comment',
 					text: 'Change',
-					visuallyHiddenText: 'Question?'
+					visuallyHiddenText: 'Redaction Question'
 				}
 			}
 		]);
@@ -271,7 +264,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				action: {
 					href: '/redacted-comment',
 					text: 'Change',
-					visuallyHiddenText: 'Question?'
+					visuallyHiddenText: 'Redaction Question'
 				}
 			}
 		]);
@@ -308,7 +301,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				action: {
 					href: '/redacted-comment',
 					text: 'Change',
-					visuallyHiddenText: 'Question?'
+					visuallyHiddenText: 'Redaction Question'
 				}
 			}
 		]);

package/src/components/unit-option-entry/question.js

@@ -71,19 +71,20 @@ export default class UnitOptionEntryQuestion extends Question {
 	 * @param {Journey} journey - the journey we are in
 	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
 	 * @param {Record<string, unknown>} [payload]
+	 * @param {import('#src/questions/question-types.d.ts').PrepQuestionForRenderingOptions} options
 	 * @returns {QuestionViewModel & {
 	 *   question: QuestionViewModel['question'] & {
 	 *     options:UnitOption[]
 	 *   }
 	 * }}
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		const answer = payload ? payload[this.fieldName] : journey.response.answers[this.fieldName] || '';
-
-		const viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload);
+	prepQuestionForRendering(section, journey, customViewData, payload, options) {
+		const viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload, options);
+		const answer = viewModel.question.value;
+		const answers = this.answerObjectFromJourneyResponse(journey.response, options);
 
 		/** @type {Array<UnitOption>} */
-		const options = [];
+		viewModel.question.options = [];
 
 		for (const option of this.options) {
 			let optionData = { ...option };
@@ -101,7 +102,7 @@ export default class UnitOptionEntryQuestion extends Question {
 				if (conditionalIsJustHTML(conditionalField)) continue;
 
 				const conversionFactor = conditionalField.conversionFactor || 1;
-				const unconvertedAnswer = journey.response.answers[this.conditionalFieldName];
+				const unconvertedAnswer = answers[this.conditionalFieldName];
 
 				const existingValue =
 					answer === optionData.value && typeof unconvertedAnswer === 'number'
@@ -119,10 +120,10 @@ export default class UnitOptionEntryQuestion extends Question {
 				};
 			}
 
-			options.push(optionData);
+			viewModel.question.options.push(optionData);
 		}
 
-		return { ...viewModel, question: { ...viewModel.question, options } };
+		return viewModel;
 	}
 
 	/**

package/src/journey/journey-response.js

@@ -18,7 +18,7 @@ export class JourneyResponse {
 	journeyId;
 
 	/**
-	 * @type {Record<string, unknown>} - answers to the journey
+	 * @type {import('./journey-types.d.ts').JourneyAnswers} - answers to the journey
 	 */
 	answers;
 
@@ -26,7 +26,7 @@ export class JourneyResponse {
 	 * creates an instance of a JourneyResponse
 	 * @param {JourneyType} journeyId
 	 * @param {string} referenceId
-	 * @param {Record<string, unknown> | null} answers
+	 * @param {import('./journey-types.d.ts').JourneyAnswers | null} answers
 	 * @param {string} [lpaCode]
 	 */
 	constructor(journeyId, referenceId, answers, lpaCode) {

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

@@ -16,3 +16,13 @@ export type ManageListRouteParams =
 			manageListQuestion: string;
 	  }
 	| {};
+
+export interface JourneyAnswers {
+	// if the answer is for a manage list question, the answer will be an array of answer objects
+	[k: string]: unknown | ManageListAnswers[];
+}
+
+export interface ManageListAnswers {
+	id: string;
+	[k: string]: unknown;
+}

package/src/questions/options-question.js

@@ -69,12 +69,13 @@ export default class OptionsQuestion extends Question {
 	 * @param {Journey} journey - the journey we are in
 	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
 	 * @param {Record<string, unknown>} [payload]
+	 * @param {import('#src/questions/question-types.d.ts').PrepQuestionForRenderingOptions} options
 	 * @returns {QuestionViewModel}
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		const answer = payload ? payload[this.fieldName] : journey.response.answers[this.fieldName] || '';
-
-		const viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload);
+	prepQuestionForRendering(section, journey, customViewData, payload, options) {
+		const viewModel = super.prepQuestionForRendering(section, journey, customViewData, payload, options);
+		const answers = payload || this.answerObjectFromJourneyResponse(journey.response, options);
+		const answer = viewModel.question.value;
 
 		viewModel.question.options = [];
 
@@ -96,9 +97,7 @@ export default class OptionsQuestion extends Question {
 				let conditionalField = { ...optionData.conditional };
 
 				conditionalField.fieldName = getConditionalFieldName(this.fieldName, conditionalField.fieldName);
-				conditionalField.value = payload
-					? payload[conditionalField.fieldName]
-					: journey.response.answers[conditionalField.fieldName] || '';
+				conditionalField.value = answers[conditionalField.fieldName] || '';
 
 				optionData.conditional = {
 					html: nunjucks.render(`./components/conditional/${conditionalField.type}.njk`, {

package/src/questions/question-types.d.ts

@@ -1,5 +1,7 @@
 import BaseValidator from '../validator/base-validator';
 import { JourneyResponse } from '../journey/journey-response';
+import { RouteParams } from '#src/journey/journey-types.d.ts';
+import ManageListQuestion from '#src/components/manage-list/question.js';
 
 export interface QuestionParameters {
 	title: string;
@@ -27,3 +29,27 @@ export interface ActionLink {
 	text: string;
 	href: string;
 }
+
+export interface QuestionViewModel {
+	question: {
+		value: string | number | Record<string, any>;
+		question: string;
+		fieldName: string;
+		pageTitle: string;
+		description?: string;
+		html?: string;
+	};
+	layoutTemplate: string;
+	pageCaption: string;
+	continueButtonText: string;
+	backLink: string;
+	showBackToListLink: string;
+	listLink: string;
+	journeyTitle: string;
+	[k: string]: any;
+}
+
+export interface PrepQuestionForRenderingOptions {
+	params: RouteParams;
+	manageListQuestion?: ManageListQuestion;
+}

package/src/questions/question.js

@@ -25,7 +25,7 @@ import MultiFieldInputValidator from '../validator/multi-field-input-validator.j
  */
 
 /**
- * @typedef {Object} QuestionViewModel
+ * @typedef {Record<string, any>} QuestionViewModel
  * @property {PreppedQuestion} question
  * @property {string} layoutTemplate
  * @property {string} pageCaption
@@ -186,14 +186,17 @@ export class Question {
 	 * @param {Object} options
 	 * @param {import('#src/journey/journey-types.d.ts').RouteParams} options.params
 	 * @param {import('#src/components/manage-list/question.js')} [options.manageListQuestion]
-	 * @param {Section} section - the current section
-	 * @param {Journey} journey - the journey we are in
-	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
-	 * @param {unknown} [payload]
+	 * @param {Section} options.section - the current section
+	 * @param {Journey} options.journey - the journey we are in
+	 * @param {Record<string, unknown>} [options.customViewData] additional data to send to view
+	 * @param {unknown} [options.payload]
 	 * @returns {QuestionViewModel}
 	 */
 	toViewModel({ params, manageListQuestion, section, journey, customViewData, payload }) {
-		const viewModel = this.prepQuestionForRendering(section, journey, customViewData, payload);
+		const viewModel = this.prepQuestionForRendering(section, journey, customViewData, payload, {
+			params,
+			manageListQuestion
+		});
 		viewModel.backLink = journey.getBackLink({ params, manageListQuestion });
 		return viewModel;
 	}
@@ -205,11 +208,14 @@ export class Question {
 	 * @param {Journey} journey - the journey we are in
 	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
 	 * @param {unknown} [payload]
+	 * @param {import('./question-types.d.ts').PrepQuestionForRenderingOptions} [options] - required to support manage list question
 	 * @returns {QuestionViewModel}
 	 */
-	prepQuestionForRendering(section, journey, customViewData, payload) {
-		const answer = journey.response.answers[this.fieldName] || '';
-		return {
+	prepQuestionForRendering(section, journey, customViewData, payload, options) {
+		const answers = payload || this.answerObjectFromJourneyResponse(journey.response, options);
+		const answer = this.answerForViewModel(answers, Boolean(payload));
+
+		const viewModel = {
 			question: {
 				value: answer,
 				question: this.question,
@@ -236,6 +242,56 @@ export class Question {
 			...customViewData,
 			...this.viewData
 		};
+		this.addCustomDataToViewModel(viewModel);
+		return viewModel;
+	}
+
+	/**
+	 * The answer to this question for use in the viewModel
+	 *
+	 * Question implementations can override this for more complex answer types
+	 *
+	 * @param {Record<string, any>} answers - collection of answers to pull the answer from, may be from the response or the request/payload
+	 * @param {Boolean} isPayload - whether the answers object is from the request/payload
+	 * @returns {*|string}
+	 */ // eslint-disable-next-line no-unused-vars
+	answerForViewModel(answers, isPayload) {
+		return answers[this.fieldName] || '';
+	}
+
+	/**
+	 * Question implementations can override this to add configuration or other values to the view model
+	 *
+	 * If possible override this method instead of prepQuestionForRendering for simple changes to the view model
+	 *
+	 * @param {QuestionViewModel} viewModel
+	 */ // eslint-disable-next-line no-unused-vars
+	addCustomDataToViewModel(viewModel) {}
+
+	/**
+	 * Get the answers object from the journey response, which may be nested in an array for manage list questions
+	 *
+	 * @param {JourneyResponse} response
+	 * @param {import('./question-types.d.ts').PrepQuestionForRenderingOptions} [options]
+	 * @returns {Record<string, any>}
+	 */
+	answerObjectFromJourneyResponse(response, { params, manageListQuestion } = {}) {
+		if (this.isInManageListSection) {
+			if (!params?.manageListItemId) {
+				throw new Error('no list item id for manage list question');
+			}
+			if (!manageListQuestion) {
+				throw new Error('no manageListQuestion for manage list question');
+			}
+			// if this is a manage list question, the response is within the 'parent' manage list answers array
+			const answers = response.answers[manageListQuestion.fieldName];
+			if (!Array.isArray(answers)) {
+				return {};
+			}
+			const itemId = params.manageListItemId;
+			return answers.find((a) => a.id === itemId) || {};
+		}
+		return response.answers;
 	}
 
 	/**

package/src/questions/question.test.js

@@ -1,7 +1,7 @@
 import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
-import { Question } from './question.js';
-import { mockRes } from '../../test/utils/utils.js';
+import { Question } from '#question';
+import { mockRes } from '#test/utils/utils.js';
 
 const res = mockRes();
 
@@ -208,6 +208,76 @@ describe('./src/dynamic-forms/question.js', () => {
 		});
 	});
 
+	describe('answerObjectFromJourney', () => {
+		it('should return journey response for regular questions', () => {
+			const question = getTestQuestion();
+			const answers = { myField: 'my-value' };
+			const journeyResponse = {
+				answers
+			};
+			const got = question.answerObjectFromJourneyResponse(journeyResponse);
+			assert.strictEqual(got, answers);
+		});
+		it('should return the manage list item object for manage list questions', () => {
+			const question = getTestQuestion();
+			question.isInManageListSection = true;
+			const manageListQuestion = {
+				fieldName: 'manageListQuestion'
+			};
+			const answers = {
+				id: '1',
+				myField: 'my-value'
+			};
+			const journeyResponse = {
+				answers: {
+					manageListQuestion: [answers]
+				}
+			};
+			const params = { manageListItemId: '1' };
+			const got = question.answerObjectFromJourneyResponse(journeyResponse, { params, manageListQuestion });
+			assert.strictEqual(got, answers);
+		});
+
+		it('should fallback to {} if manage list item id not found', () => {
+			const question = getTestQuestion();
+			question.isInManageListSection = true;
+			const manageListQuestion = {
+				fieldName: 'manageListQuestion'
+			};
+			const answers = {
+				id: '2',
+				myField: 'my-value'
+			};
+			const journeyResponse = {
+				answers: {
+					manageListQuestion: [answers]
+				}
+			};
+			const params = { manageListItemId: '1' };
+			let got = question.answerObjectFromJourneyResponse(journeyResponse, { params, manageListQuestion });
+			assert.deepStrictEqual(got, {});
+			// also fallback to {} if there is no manageListQuestion answer
+			delete journeyResponse.answers.manageListQuestion;
+			got = question.answerObjectFromJourneyResponse(journeyResponse, { params, manageListQuestion });
+			assert.deepStrictEqual(got, {});
+		});
+		it('should error if a manage list question is missing required parameters', () => {
+			const question = getTestQuestion();
+			question.isInManageListSection = true;
+			const answers = { myField: 'my-value' };
+			const journeyResponse = { answers };
+			assert.throws(
+				() => question.answerObjectFromJourneyResponse(journeyResponse),
+				/no list item id for manage list question/
+			);
+			const params = { manageListItemId: '1' };
+			assert.throws(
+				() => question.answerObjectFromJourneyResponse(journeyResponse, { params }),
+				/no manageListQuestion for manage list question/
+			);
+		});
+	});
+
 	describe('renderAction', () => {
 		it('should renderAction', () => {
 			const question = getTestQuestion();

package/tsconfig.json

@@ -17,7 +17,8 @@
 		"paths": {
 			"#question-types": ["./src/questions/question-types.d.ts"],
 			"#src/*": ["./src/*"],
-			"#test/*": ["./test/*"]
+			"#test/*": ["./test/*"],
+			"#question": ["./src/questions/question.js"]
 		}
 	}
 }