@planning-inspectorate/dynamic-forms 2.4.0 → 3.1.0

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

@@ -0,0 +1,147 @@
+import { Question } from '#question';
+import { Uuid } from '#src/lib/uuid.js';
+import { nunjucksEnv } from '#src/components/utils/nunjucks.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)
+ */
+
+export default class ManageListQuestion extends Question {
+	/** @type {import('../../section.js').Section} */
+	#section;
+	/** @type {boolean} */
+	#showAnswersInSummary;
+
+	/**
+	 * @param {import('#question-types').QuestionParameters & ManageListQuestionParameters} params
+	 */
+	constructor(params) {
+		super({
+			...params,
+			pageTitle: params.title,
+			viewFolder: 'manage-list',
+			viewData: {
+				...params.viewData,
+				titleSingular: params.titleSingular,
+				showManageListQuestions: params.showManageListQuestions
+			}
+		});
+		this.#showAnswersInSummary = params.showAnswersInSummary || false;
+	}
+
+	/**
+	 * Is this question a manage list question?
+	 *
+	 * Used by controller and other logic.
+	 * Added as a getter so custom components can also be a manage list question.
+	 *
+	 * @returns {boolean}
+	 */
+	get isManageListQuestion() {
+		return true;
+	}
+
+	/**
+	 * @param {import('#question').QuestionViewModel} viewModel
+	 */
+	addCustomDataToViewModel(viewModel) {
+		viewModel.question.addAnotherLink = this.#addAnotherLink;
+		viewModel.question.firstQuestionUrl = this.#firstQuestionUrl;
+		viewModel.question.valueSummary = [];
+		if (viewModel.question.value && Array.isArray(viewModel.question.value)) {
+			viewModel.question.valueSummary = viewModel.question.value.map((v) => {
+				return {
+					id: v.id,
+					value: this.#formatItemAnswers(v)
+				};
+			});
+		}
+	}
+
+	/**
+	 * Format the answers to each of the manage list questions
+	 * @param {{id: string, [k: string]: string}} answer
+	 * @returns {{question: string, answer: string}[]}
+	 */
+	#formatItemAnswers(answer) {
+		if (this.section.questions.length === 0) {
+			return [];
+		}
+		const mockJourney = {
+			getCurrentQuestionUrl() {}
+		};
+		return this.section.questions.map((q) => {
+			const formatted = q
+				.formatAnswerForSummary('', mockJourney, answer[q.fieldName])
+				.map((a) => a.value)
+				.join(', ');
+
+			return {
+				question: q.title,
+				answer: formatted
+			};
+		});
+	}
+
+	formatAnswerForSummary(sectionSegment, journey, answer) {
+		let formattedAnswer = this.notStartedText;
+		if (answer && Array.isArray(answer)) {
+			if (this.#showAnswersInSummary) {
+				const answers = answer.map((a) => this.#formatItemAnswers(a));
+				formattedAnswer = nunjucksEnv().render('components/manage-list/answer-summary-list.njk', { answers });
+			} else if (answer.length > 0) {
+				formattedAnswer = `${answer.length} ${this.title}`;
+			}
+		}
+		const action = this.getAction(sectionSegment, journey, answer);
+		const key = this.title ?? this.question;
+		return [
+			{
+				key: key,
+				value: formattedAnswer,
+				action: action
+			}
+		];
+	}
+
+	/**
+	 * Create an 'add another' link,
+	 * to the first question in the manage list section
+	 *
+	 * @returns {string}
+	 */
+	get #addAnotherLink() {
+		if (this.section.questions.length === 0) {
+			return '';
+		}
+		const nextItemId = Uuid.randomUUID();
+		const firstQuestion = this.#firstQuestionUrl;
+		return `add/${nextItemId}/${firstQuestion}`;
+	}
+
+	/**
+	 * First question URL
+	 *
+	 * @returns {string}
+	 */
+	get #firstQuestionUrl() {
+		if (this.section.questions.length === 0) {
+			return '';
+		}
+		return this.section.questions[0].url;
+	}
+
+	get section() {
+		if (!this.#section) {
+			throw new Error('manage list section not set');
+		}
+		return this.#section;
+	}
+
+	set section(section) {
+		this.#section = section;
+	}
+}

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

@@ -0,0 +1,139 @@
+import { describe, it, mock } from 'node:test';
+import assert from 'node:assert';
+import ManageListQuestion from '#src/components/manage-list/question.js';
+import { ManageListSection } from '#src/components/manage-list/manage-list-section.js';
+import { mockJourney } from '#test/mock/journey.js';
+import { mockRandomUUID } from '#src/lib/uuid.test.js';
+import { configureNunjucksTestEnv } from '#test/utils/nunjucks.js';
+import path from 'path';
+import { snapshotsDir } from '#test/utils/utils.js';
+
+describe('components/manage-list/question', () => {
+	const TITLE = 'Things';
+	const QUESTION = 'Manage list';
+	const DESCRIPTION = 'A list of things';
+	const FIELDNAME = 'manageListTest';
+	const newQuestion = (options = {}) => {
+		return new ManageListQuestion({
+			title: TITLE,
+			question: QUESTION,
+			description: DESCRIPTION,
+			fieldName: FIELDNAME,
+			titleSingular: 'Thing',
+			...options
+		});
+	};
+	it('should create', () => {
+		const q = newQuestion();
+		assert.strictEqual(q.title, TITLE);
+		assert.strictEqual(q.question, QUESTION);
+		assert.strictEqual(q.description, DESCRIPTION);
+		assert.strictEqual(q.fieldName, FIELDNAME);
+		assert.strictEqual(q.viewFolder, 'manage-list');
+		assert.strictEqual(q.isManageListQuestion, true);
+	});
+
+	it('should populate addAnotherLink & firstQuestionUrl', (ctx) => {
+		const q = newQuestion();
+		mockRandomUUID(ctx);
+		q.section = new ManageListSection().addQuestion({ url: 'first-question' });
+		const viewModel = q.prepQuestionForRendering({}, mockJourney());
+		// add/<v4-guid>/<question-url>
+		assert.match(viewModel?.question?.addAnotherLink, /^add\/00000000-0000-0000-0000-000000000000\/first-question/);
+		assert.strictEqual(viewModel?.question?.firstQuestionUrl, 'first-question');
+	});
+
+	const questionWithManageQuestions = (ctx, options) => {
+		const q = newQuestion(options);
+		const innerQ1 = {
+			url: 'first-question',
+			title: 'Q 1',
+			formatAnswerForSummary() {
+				return [{ value: 'mock answer' }];
+			}
+		};
+		const innerQ2 = {
+			url: 'second-question',
+			title: 'Q 2',
+			formatAnswerForSummary() {
+				return [{ value: 'mock answer 2' }];
+			}
+		};
+		mockRandomUUID(ctx);
+		const journey = mockJourney();
+		journey.response.answers = {
+			[FIELDNAME]: [{ id: 'id-1' }, { id: 'id-2' }, { id: 'id-3' }]
+		};
+		q.section = new ManageListSection().addQuestion(innerQ1).addQuestion(innerQ2);
+		return { q, journey };
+	};
+
+	it('should format answers to questions in the section', (ctx) => {
+		const { q, journey } = questionWithManageQuestions(ctx);
+		const viewModel = q.prepQuestionForRendering({}, journey);
+		assert.ok(Array.isArray(viewModel?.question?.valueSummary));
+		assert.strictEqual(viewModel?.question?.valueSummary.length, 3);
+		assert.deepStrictEqual(viewModel?.question?.valueSummary[0], {
+			id: 'id-1',
+			value: [
+				{ question: 'Q 1', answer: 'mock answer' },
+				{ question: 'Q 2', answer: 'mock answer 2' }
+			]
+		});
+	});
+
+	it('should format list answer for summary', (ctx) => {
+		const q = newQuestion();
+		mockRandomUUID(ctx);
+		const answerForSummary = q.formatAnswerForSummary('section-1', mockJourney(), [{}, {}, {}]);
+		assert.strictEqual(answerForSummary.length, 1);
+		assert.strictEqual(answerForSummary[0].value, '3 Things');
+	});
+
+	it('should support showing all answers in the format list answer for summary', (ctx) => {
+		const { q } = questionWithManageQuestions(ctx, { showAnswersInSummary: true });
+		const answerForSummary = q.formatAnswerForSummary('section-1', mockJourney(), [{}, {}, {}]);
+		assert.strictEqual(answerForSummary.length, 1);
+		ctx.assert.fileSnapshot(
+			answerForSummary[0].value.replaceAll('\r\n', '\n'),
+			path.join(snapshotsDir(), 'manage-list-answer-summary.html'),
+			{
+				serializers: [(v) => v]
+			}
+		);
+	});
+
+	it('should render with answers', (ctx) => {
+		const { q, journey } = questionWithManageQuestions(ctx);
+		const viewModel = q.prepQuestionForRendering({}, journey);
+		const nunjucks = configureNunjucksTestEnv();
+		const res = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		q.renderAction(res, viewModel);
+		assert.strictEqual(res.render.mock.callCount(), 1);
+		ctx.assert.fileSnapshot(res.render.mock.calls[0].result, path.join(snapshotsDir(), 'manage-list-render.html'), {
+			serializers: [(v) => v]
+		});
+	});
+
+	it('should render with answers & questions', (ctx) => {
+		const { q, journey } = questionWithManageQuestions(ctx, {
+			showManageListQuestions: true
+		});
+		const viewModel = q.prepQuestionForRendering({}, journey);
+		const nunjucks = configureNunjucksTestEnv();
+		const res = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		q.renderAction(res, viewModel);
+		assert.strictEqual(res.render.mock.callCount(), 1);
+		ctx.assert.fileSnapshot(
+			res.render.mock.calls[0].result,
+			path.join(snapshotsDir(), 'manage-list-render-questions.html'),
+			{
+				serializers: [(v) => v]
+			}
+		);
+	});
+});

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;
 	}
 
 	/**