@planning-inspectorate/dynamic-forms 3.20.5 → 3.22.0

package/src/questions/question.js

@@ -1,7 +1,7 @@
 import escape from 'escape-html';
 import { capitalize, nl2br, trimTrailingSlash } from '../lib/utils.js';
 import MultiFieldInputValidator from '../validator/multi-field-input-validator.js';
-import { answerObjectForManageList } from '#src/components/manage-list/utils.js';
+import { answerObjectForListItem } from '#src/lib/answer-utils.js';
 
 /**
  * A specific question within a journey which is made up of one (usually) or many (sometimes) components and their required content.
@@ -202,7 +202,8 @@ export class Question {
 	toViewModel({ params, manageListQuestion, section, journey, customViewData, payload }) {
 		const viewModel = this.prepQuestionForRendering(section, journey, customViewData, payload, {
 			params,
-			manageListQuestion
+			manageListQuestion,
+			dynamicSection: section.isDynamicSection ? section : undefined
 		});
 		viewModel.backLink = journey.getBackLink({ params, manageListQuestion });
 		return viewModel;
@@ -215,7 +216,7 @@ export class Question {
 	 * @param {import('../journey/journey.js').Journey} journey - the journey we are in
 	 * @param {Record<string, unknown>} [customViewData] additional data to send to view
 	 * @param {unknown} [payload]
-	 * @param {import('#typedefs/question-types.d.ts').PrepQuestionForRenderingOptions} [options] - required to support manage list question
+	 * @param {import('#typedefs/question-types.d.ts').PrepQuestionForRenderingOptions} [options] - required to support manage list question and dynamic sections
 	 * @returns {import('#typedefs/question-types.d.ts').QuestionViewModel}
 	 */
 	prepQuestionForRendering(section, journey, customViewData, payload, options) {
@@ -280,13 +281,13 @@ export class Question {
 	addCustomDataToViewModel(viewModel) {}
 
 	/**
-	 * Get the answers object from the journey response, which may be nested in an array for manage list questions
+	 * Get the answers object from the journey response, which may be nested in an array for manage list questions or dynamic sections
 	 *
 	 * @param {import('../journey/journey-response.js').JourneyResponse} response
 	 * @param {import('#typedefs/question-types.d.ts').PrepQuestionForRenderingOptions} [options]
 	 * @returns {Record<string, any>}
 	 */
-	answerObjectFromJourneyResponse(response, { params, manageListQuestion } = {}) {
+	answerObjectFromJourneyResponse(response, { params, manageListQuestion, dynamicSection } = {}) {
 		if (this.isInManageListSection) {
 			if (!params?.manageListItemId) {
 				throw new Error('no list item id for manage list question');
@@ -295,7 +296,11 @@ export class Question {
 				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
-			return answerObjectForManageList(response, manageListQuestion, params.manageListItemId);
+			return answerObjectForListItem(response, manageListQuestion, params.manageListItemId);
+		}
+		if (dynamicSection) {
+			// if this is a question in a dynamic section, the response is within an answers array, key by section
+			return answerObjectForListItem(response, dynamicSection, params.section);
 		}
 		return response.answers;
 	}
@@ -393,6 +398,11 @@ export class Question {
 
 	/**
 	 * returns the formatted answers values to be used to build task list elements
+	 *
+	 * If overriding this method and access answers on the journey, use journey.responseForSection
+	 * to get the answers, instead of `journey.response` directly. This is to support DynamicSections
+	 * where answers are in an array. See `MultiFieldInputQuestion` for an example.
+	 *
 	 * @param {string} sectionSegment
 	 * @param {import('../journey/journey.js').Journey} journey
 	 * @param {unknown} answer

package/src/questions/question.test.js

@@ -285,6 +285,25 @@ describe('./src/dynamic-forms/question.js', () => {
 				/no manageListQuestion for manage list question/
 			);
 		});
+
+		it('should return dynamic section object', () => {
+			const question = getTestQuestion();
+			const answers = {
+				id: 'section-1',
+				myField: 'my-value'
+			};
+			const journeyResponse = {
+				answers: {
+					myList: [answers]
+				}
+			};
+			const params = { section: 'section-1' };
+			const got = question.answerObjectFromJourneyResponse(journeyResponse, {
+				params,
+				dynamicSection: { fieldName: 'myList' }
+			});
+			assert.strictEqual(got, answers);
+		});
 	});
 
 	describe('renderAction', () => {

package/src/section.d.ts

@@ -37,6 +37,15 @@ export class Section {
      * @type {Array<import('./questions/question.js').Question>} - questions within the section
      */
     questions: Array<import("./questions/question.js").Question>;
+    /**
+     * Is this section dynamic?
+     *
+     * Implemented as a getter so dynamic section can override it,
+     * but it cannot be changed at runtime.
+     *
+     * @returns {boolean}
+     */
+    get isDynamicSection(): boolean;
     /**
      * Add a condition to all questions in this section
      *
@@ -83,6 +92,16 @@ export class Section {
      * @returns {SectionStatus}
      */
     getStatus(journeyResponse: import("#journey-response").JourneyResponse): SectionStatus;
+    /**
+     * Get the journey response (answers) for this section
+     * That is most often the root answers object
+     * For dynamic sections, it is an object within the configured array
+     *
+     * @param {import('#journey-response').JourneyResponse} journeyResponse
+     */
+    getResponse(journeyResponse: import("#journey-response").JourneyResponse): import("#journey-response").JourneyResponse<import("./index.js").JourneyAnswers> | {
+        answers: Record<string, unknown>;
+    };
     /**
      * checks answers on response and return true if the status of the section is complete
      * @param {import('#journey-response').JourneyResponse} journeyResponse

package/src/section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["section.js"],"names":[],"mappings":"AAGA;;GAEG;AAEH;;;;GAIG;AACH,6BAFU,MAAM,CAEuC;AAEvD;;;GAGG;AACH;IAgNC;;;;;OAKG;IACH,8FAHW,OAAO,8BAA8B,EAAE,2BAA2B,GAChE,OAAO,yBAAyB,EAAE,QAAQ,GAAC,MAAM,GAAC,IAAI,CAoBlE;IAvMD;;;;OAIG;IACH,kBAHW,MAAM,WACN,MAAM,EAKhB;IAxCD;;OAEG;IACH,MAFU,MAAM,CAEX;IAEL;;OAEG;IACH,SAFU,MAAM,CAER;IAER;;OAEG;IACH,WAFU,KAAK,CAAC,OAAO,yBAAyB,EAAE,QAAQ,CAAC,CAE5C;IA6Bf;;;;;OAKG;IACH,2CAHW,iBAAiB,GACf,IAAI,CAchB;IAED;;;;;OAKG;IACH,sBAJW,OAAO,yBAAyB,EAAE,QAAQ,sBAC1C,OAAO,iDAAiD,EAAE,iBAAiB,GACzE,IAAI,CAgBhB;IA8BD;;;;OAIG;IACH,qCAHW,iBAAiB,GACf,IAAI,CAahB;IAED,kFAoBC;IAED;;;;;OAKG;IACH,2CAJW,MAAM,yBACN,iBAAiB,GACf,IAAI,CAQhB;IAED;;;;OAIG;IACH,yCAHW,MAAM,GACJ,IAAI,CAQhB;IAED;;;;OAIG;IACH,wBAHW,OAAO,8BAA8B,EAAE,qBAAqB,GAC1D,OAAO,yBAAyB,EAAE,QAAQ,GAAC,MAAM,GAAC,IAAI,CAuBlE;IA4BD;;;;OAIG;IACH,2BAHW,OAAO,mBAAmB,EAAE,eAAe,GACzC,aAAa,CAoDzB;IAED;;;;OAIG;IACH,4BAHW,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAInB;;CAKD;6BAOS,aAAa;AALvB;;GAEG;AAEH;;GAEG;AACH;;;;GAIG;gCA1UU,CAAC,CAAC,QAAQ,EAAE,OAAO,mBAAmB,EAAE,eAAe,KAAK,OAAO,CAAC;4BAgUpE,MAAM"}
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["section.js"],"names":[],"mappings":"AAGA;;GAEG;AAEH;;;;GAIG;AACH,6BAFU,MAAM,CAEuC;AAEvD;;;GAGG;AACH;IAkOC;;;;;OAKG;IACH,8FAHW,OAAO,8BAA8B,EAAE,2BAA2B,GAChE,OAAO,yBAAyB,EAAE,QAAQ,GAAC,MAAM,GAAC,IAAI,CAoBlE;IAzND;;;;OAIG;IACH,kBAHW,MAAM,WACN,MAAM,EAKhB;IAxCD;;OAEG;IACH,MAFU,MAAM,CAEX;IAEL;;OAEG;IACH,SAFU,MAAM,CAER;IAER;;OAEG;IACH,WAFU,KAAK,CAAC,OAAO,yBAAyB,EAAE,QAAQ,CAAC,CAE5C;IA6Bf;;;;;;;OAOG;IACH,wBAFa,OAAO,CAInB;IAED;;;;;OAKG;IACH,2CAHW,iBAAiB,GACf,IAAI,CAchB;IAED;;;;;OAKG;IACH,sBAJW,OAAO,yBAAyB,EAAE,QAAQ,sBAC1C,OAAO,iDAAiD,EAAE,iBAAiB,GACzE,IAAI,CAgBhB;IA8BD;;;;OAIG;IACH,qCAHW,iBAAiB,GACf,IAAI,CAahB;IAED,kFAoBC;IAED;;;;;OAKG;IACH,2CAJW,MAAM,yBACN,iBAAiB,GACf,IAAI,CAQhB;IAED;;;;OAIG;IACH,yCAHW,MAAM,GACJ,IAAI,CAQhB;IAED;;;;OAIG;IACH,wBAHW,OAAO,8BAA8B,EAAE,qBAAqB,GAC1D,OAAO,yBAAyB,EAAE,QAAQ,GAAC,MAAM,GAAC,IAAI,CA6BlE;IA4BD;;;;OAIG;IACH,2BAHW,OAAO,mBAAmB,EAAE,eAAe,GACzC,aAAa,CAuDzB;IAED;;;;;;OAMG;IACH,6BAFW,OAAO,mBAAmB,EAAE,eAAe;;MAarD;IAED;;;;OAIG;IACH,4BAHW,OAAO,mBAAmB,EAAE,eAAe,GACzC,OAAO,CAInB;;CAKD;6BAOS,aAAa;AALvB;;GAEG;AAEH;;GAEG;AACH;;;;GAIG;gCAnXU,CAAC,CAAC,QAAQ,EAAE,OAAO,mBAAmB,EAAE,eAAe,KAAK,OAAO,CAAC;4BAyWpE,MAAM"}

package/src/section.js

@@ -1,5 +1,5 @@
 import RequiredValidator from './validator/required-validator.js';
-import { answerObjectForManageList } from '#src/components/manage-list/utils.js';
+import { answerObjectForListItem } from '#src/lib/answer-utils.js';
 
 /**
  * @typedef {((response: import('#journey-response').JourneyResponse) => boolean)} QuestionCondition
@@ -59,6 +59,18 @@ export class Section {
 		this.segment = segment;
 	}
 
+	/**
+	 * Is this section dynamic?
+	 *
+	 * Implemented as a getter so dynamic section can override it,
+	 * but it cannot be changed at runtime.
+	 *
+	 * @returns {boolean}
+	 */
+	get isDynamicSection() {
+		return false;
+	}
+
 	/**
 	 * Add a condition to all questions in this section
 	 *
@@ -206,7 +218,7 @@ export class Section {
 		if (manageListQuestion) {
 			// first check if the next question is within the manage list section
 			// here we get the answers for the manage list item for the question.shouldDisplay logic
-			const answers = answerObjectForManageList(response, manageListQuestion, routeParams.manageListItemId);
+			const answers = answerObjectForListItem(response, manageListQuestion, routeParams.manageListItemId);
 			const next = Section.getNextQuestion({
 				...params,
 				response: { answers },
@@ -218,10 +230,16 @@ export class Section {
 			}
 			return next;
 		}
-		return Section.getNextQuestion({
+		const nextQuestionParams = {
 			...params,
 			questions: this.questions
-		});
+		};
+		if (this.isDynamicSection) {
+			// for dynamic sections, the answers are within an array
+			const answers = answerObjectForListItem(response, this, this.segment);
+			nextQuestionParams.response = { answers };
+		}
+		return Section.getNextQuestion(nextQuestionParams);
 	}
 
 	/**
@@ -261,8 +279,11 @@ export class Section {
 		let requiredAnswerCount = 0;
 		let answerCount = 0;
 
+		// answers for this section may be within an array, for example dynamic sections
+		const response = this.getResponse(journeyResponse);
+
 		for (let question of this.questions) {
-			if (!question.shouldDisplay(journeyResponse)) {
+			if (!question.shouldDisplay(response)) {
 				continue;
 			}
 			// if question is a multi field input question, check all fields
@@ -271,10 +292,10 @@ export class Section {
 					if (question.fieldIsRequired(field.fieldName)) {
 						requiredQuestionCount++;
 					}
-					if (question.isAnswered(journeyResponse, field.fieldName)) {
+					if (question.isAnswered(response, field.fieldName)) {
 						answerCount++;
 					}
-					if (question.isAnswered(journeyResponse, field.fieldName) && question.fieldIsRequired(field.fieldName)) {
+					if (question.isAnswered(response, field.fieldName) && question.fieldIsRequired(field.fieldName)) {
 						requiredAnswerCount++;
 					}
 				}
@@ -283,11 +304,11 @@ export class Section {
 					requiredQuestionCount++;
 				}
 
-				if (question.isAnswered(journeyResponse)) {
+				if (question.isAnswered(response)) {
 					answerCount++;
 				}
 
-				if (question.isAnswered(journeyResponse) && question.isRequired()) {
+				if (question.isAnswered(response) && question.isRequired()) {
 					requiredAnswerCount++;
 				}
 			}
@@ -307,6 +328,26 @@ export class Section {
 		return result;
 	}
 
+	/**
+	 * Get the journey response (answers) for this section
+	 * That is most often the root answers object
+	 * For dynamic sections, it is an object within the configured array
+	 *
+	 * @param {import('#journey-response').JourneyResponse} journeyResponse
+	 */
+	getResponse(journeyResponse) {
+		// if this is a dynamic section, answers are within an array
+		// only answers within the dynamic section can be used for display logic
+		if (this.isDynamicSection) {
+			// this is not a JourneyResponse class, but is like it
+			// DF-46 will likely replace usage of JourneyResponse with an interface
+			return {
+				answers: answerObjectForListItem(journeyResponse, this, this.segment)
+			};
+		}
+		return journeyResponse;
+	}
+
 	/**
 	 * checks answers on response and return true if the status of the section is complete
 	 * @param {import('#journey-response').JourneyResponse} journeyResponse

package/src/section.test.js

@@ -754,4 +754,13 @@ describe('./src/dynamic-forms/section.js', () => {
 			});
 		});
 	});
+
+	describe('getResponse', () => {
+		it('should return response for normal section', () => {
+			const section = new Section('s1', 'S');
+			const res = { answers: {} };
+			const got = section.getResponse(res);
+			assert.strictEqual(got, res);
+		});
+	});
 });

package/test/dynamic-journey.test.js

@@ -0,0 +1,372 @@
+import { describe, it } from 'node:test';
+import assert from 'assert';
+import { Section } from '#src/section.js';
+import { DynamicSection } from '#src/dynamic-section.js';
+import { Journey } from '#src/journey/journey.js';
+import { COMPONENT_TYPES } from '#src/index.js';
+import { createQuestions } from '#src/questions/create-questions.js';
+import { questionClasses } from '#src/questions/questions.js';
+import { whenQuestionHasAnswer } from '#src/components/utils/question-has-answer.js';
+import { BOOLEAN_OPTIONS } from '#src/components/boolean/question.js';
+import { createAppWithQuestions, renderQuestionCheck, postAnswer } from '#test/utils/question-test-utils.js';
+
+const JOURNEY_ID = 'dynamic-journey';
+
+/**
+ * Question props for conditional journey tests
+ * @type {Record<string, import('#src/questions/question-props.js').QuestionProps>}
+ */
+const questionProps = {
+	// Section 1: Insurance (simple + chained conditions)
+	wantsInsurance: {
+		type: COMPONENT_TYPES.BOOLEAN,
+		title: 'Want Insurance',
+		question: 'Do you want to add travel insurance?',
+		fieldName: 'wantsInsurance',
+		url: 'wants-insurance',
+		label: 'Add insurance?'
+	},
+	insuranceLevel: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Insurance Level',
+		question: 'What level of insurance do you want?',
+		fieldName: 'insuranceLevel',
+		url: 'insurance-level',
+		label: 'Select an insurance level',
+		options: [
+			{ value: 'basic', text: 'Basic' },
+			{ value: 'premium', text: 'Premium' }
+		]
+	},
+	premiumBenefits: {
+		type: COMPONENT_TYPES.CHECKBOX,
+		title: 'Premium Benefits',
+		question: 'Which premium benefits do you want?',
+		fieldName: 'premiumBenefits',
+		url: 'premium-benefits',
+		label: 'Select all that apply',
+		options: [
+			{ value: 'cancellation', text: 'Cancellation cover' },
+			{ value: 'medical', text: 'Medical cover' },
+			{ value: 'luggage', text: 'Luggage cover' }
+		]
+	},
+	// Section 2: Contact (always shown)
+	contactEmail: {
+		type: COMPONENT_TYPES.EMAIL,
+		title: 'Contact Email',
+		question: 'What is your email address?',
+		fieldName: 'contactEmail',
+		url: 'contact-email',
+		label: 'Email address'
+	},
+	// Section after the dynamic sections (regular section)
+	paymentMethod: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Payment Method',
+		question: 'How would you like to pay?',
+		fieldName: 'paymentMethod',
+		url: 'payment-method',
+		label: 'Select a payment method',
+		options: [
+			{ value: 'card', text: 'Card' },
+			{ value: 'bank-transfer', text: 'Bank transfer' }
+		]
+	}
+};
+
+// Dynamic sections: questions asked once per traveller (holiday-goer)
+const travellerQuestionProps = {
+	passportStatus: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Passport Status',
+		question: 'Does this traveller have a valid passport?',
+		fieldName: 'passportStatus',
+		url: 'passport-status',
+		label: 'Select passport status',
+		options: [
+			{ value: 'has-passport', text: 'Has a valid passport' },
+			{ value: 'needs-passport', text: 'Needs to apply for a passport' }
+		]
+	},
+	passportNumber: {
+		type: COMPONENT_TYPES.SINGLE_LINE_INPUT,
+		title: 'Passport Number',
+		question: 'What is the passport number?',
+		fieldName: 'passportNumber',
+		url: 'passport-number',
+		label: 'Passport number'
+	},
+	dietaryRequirements: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Dietary Requirements',
+		question: 'Does this traveller have any dietary requirements?',
+		fieldName: 'dietaryRequirements',
+		url: 'dietary-requirements',
+		label: 'Select dietary requirements',
+		options: [
+			{ value: 'none', text: 'No requirements' },
+			{ value: 'vegetarian', text: 'Vegetarian' },
+			{ value: 'other', text: 'Other' }
+		]
+	},
+	dietaryDetails: {
+		type: COMPONENT_TYPES.SINGLE_LINE_INPUT,
+		title: 'Dietary Details',
+		question: 'Please describe the dietary requirements',
+		fieldName: 'dietaryDetails',
+		url: 'dietary-details',
+		label: 'Dietary details'
+	}
+};
+
+/**
+ * The travellers that each get their own DynamicSection.
+ * In a real journey this list would typically come from a ManageList question
+ * or a database; here it is fixed to keep the test deterministic.
+ *
+ * @type {Array<{ id: string, name: string }>}
+ */
+const travellers = [
+	{ id: 'traveller-1', name: 'Din Djarin' },
+	{ id: 'traveller-2', name: 'Grogu' }
+];
+
+/**
+ * Create a single journey with various conditional logic scenarios:
+ *
+ * Section 1 - Insurance (simple + chained conditions):
+ *   - wantsInsurance: always shown
+ *   - insuranceLevel: shown if wantsInsurance = 'yes' (simple condition)
+ *   - premiumBenefits: shown if insuranceLevel = 'premium' (chained condition)
+ *
+ * Section 2 - Trip:
+ *   - tripType: always shown
+ *
+ * Section 3 - Visa (section-wide condition):
+ *   - Entire section shown only if tripType = 'international'
+ *   - visaRequired: shown if section condition met
+ *   - visaType: shown if section condition met AND visaRequired = 'yes'
+ *
+ * Section 4 - Accommodation (multi-question condition):
+ *   - accommodation: always shown
+ *   - hotelStars + hotelBreakfast: shown only if accommodation = 'hotel' (multi-question group)
+ *
+ * Section 5 - Contact:
+ *   - contactEmail: always shown
+ *
+ * Dynamic Sections - one per traveller (holiday-goer):
+ *   - Each traveller gets a DynamicSection with its own answers stored in the
+ *     `travellers` array (matched by the section segment / traveller id)
+ *   - passportStatus: always shown
+ *   - passportNumber: shown if passportStatus = 'has-passport' (question condition)
+ *   - dietaryRequirements: always shown
+ *   - dietaryDetails: shown if dietaryRequirements = 'other' (question condition)
+ *   - conditions are evaluated per traveller, independently of other travellers
+ *
+ * Section 6 - Payment (regular section following the dynamic sections):
+ *   - paymentMethod: always shown
+ */
+function createConditionalJourney(questions, response) {
+	return new Journey({
+		journeyId: JOURNEY_ID,
+		sections: [
+			// Section 1: Insurance with simple and chained conditions
+			new Section('Insurance', 'insurance')
+				.addQuestion(questions.wantsInsurance)
+				.addQuestion(questions.insuranceLevel)
+				.withCondition(whenQuestionHasAnswer(questions.wantsInsurance, BOOLEAN_OPTIONS.YES))
+				.addQuestion(questions.premiumBenefits)
+				.withCondition(whenQuestionHasAnswer(questions.insuranceLevel, 'premium')),
+
+			// Section 2: Contact (always shown)
+			new Section('Contact', 'contact').addQuestion(questions.contactEmail),
+
+			// Dynamic sections: one per traveller, each with their own question conditions.
+			// The DynamicSection segment is the traveller id, and 'travellers' is the
+			// answers array key. Question conditions can only reference answers within
+			// the same (per-traveller) section.
+			...travellers.map((traveller) => {
+				// create a fresh set of questions for each section
+				const qs = createQuestions(travellerQuestionProps, questionClasses, {});
+
+				return new DynamicSection(traveller.name, traveller.id, 'travellers')
+					.addQuestion(qs.passportStatus)
+					.addQuestion(qs.passportNumber)
+					.withCondition(whenQuestionHasAnswer(qs.passportStatus, 'has-passport'))
+					.addQuestion(qs.dietaryRequirements)
+					.addQuestion(qs.dietaryDetails)
+					.withCondition(whenQuestionHasAnswer(qs.dietaryRequirements, 'other'));
+			}),
+
+			// Section 5: Payment (regular section after the dynamic sections)
+			new Section('Payment', 'payment').addQuestion(questions.paymentMethod)
+		],
+		taskListUrl: 'check-your-answers',
+		journeyTemplate: 'views/layout-journey.njk',
+		taskListTemplate: 'views/layout-check-your-answers.njk',
+		journeyTitle: 'Conditional Journey',
+		returnToListing: false,
+		makeBaseUrl: () => '/',
+		initialBackLink: '/start',
+		response
+	});
+}
+
+/**
+ * Helper to create an app with the conditional journey
+ * @param {import('node:test').TestContext} ctx
+ * @returns {Promise<import('#test/utils/test-server.js').TestServer>}
+ */
+function createAppWithJourney(ctx) {
+	return createAppWithQuestions(ctx, {
+		journeyId: JOURNEY_ID,
+		questions: createQuestions(questionProps, questionClasses, {}),
+		createJourneyFn: createConditionalJourney
+	});
+}
+
+describe('dynamic journey tests', () => {
+	// test largely copied from conditional-journey test to ensure that logic isn't broken by DynamicSections in a Journey
+	describe('simple condition (whenQuestionHasAnswer on single question)', () => {
+		const q = questionProps;
+		// noinspection DuplicatedCode
+		it('should show conditional question when condition is met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// First, render the initial question
+			await renderQuestionCheck(ctx, testServer, '/insurance/wants-insurance', q.wantsInsurance.question);
+
+			// Answer 'yes' to wantsInsurance
+			const location = await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.YES
+			});
+
+			// Should redirect to insuranceLevel (conditional question)
+			assert.strictEqual(location, 'insurance/insurance-level');
+
+			// Render the conditional question
+			await renderQuestionCheck(ctx, testServer, '/insurance/insurance-level', q.insuranceLevel.question);
+		});
+
+		it('should skip conditional question when condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer 'no' to wantsInsurance
+			const location = await postAnswer(testServer, '/insurance/wants-insurance', {
+				[q.wantsInsurance.fieldName]: BOOLEAN_OPTIONS.NO
+			});
+
+			// Should skip insuranceLevel and premiumBenefits, go to next section (contact)
+			assert.strictEqual(location, 'contact/contact-email');
+		});
+	});
+
+	describe('dynamic sections (DynamicSection per traveller)', () => {
+		const q = travellerQuestionProps;
+		it('should navigate from a regular section into the first dynamic traveller section', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Answer the last regular question before the dynamic sections
+			const location = await postAnswer(testServer, '/contact/contact-email', {
+				[questionProps.contactEmail.fieldName]: 'traveller@example.com'
+			});
+
+			// Should move into the first traveller's dynamic section
+			assert.strictEqual(location, 'traveller-1/passport-status');
+
+			// Render the first question of the dynamic section
+			await renderQuestionCheck(ctx, testServer, '/traveller-1/passport-status', q.passportStatus.question);
+		});
+
+		it('should show a conditional question within a traveller section when its condition is met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Traveller has a passport -> should ask for the passport number
+			const location = await postAnswer(testServer, '/traveller-1/passport-status', {
+				[q.passportStatus.fieldName]: 'has-passport'
+			});
+
+			assert.strictEqual(location, 'traveller-1/passport-number');
+
+			// Render the conditional question within the dynamic section
+			await renderQuestionCheck(ctx, testServer, '/traveller-1/passport-number', q.passportNumber.question);
+		});
+
+		it('should skip a conditional question within a traveller section when its condition is not met', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Traveller needs to apply for a passport -> skip passport-number
+			const location = await postAnswer(testServer, '/traveller-1/passport-status', {
+				[q.passportStatus.fieldName]: 'needs-passport'
+			});
+
+			// Should skip passport-number and go to the next question in the section
+			assert.strictEqual(location, 'traveller-1/dietary-requirements');
+		});
+
+		it('should support a second independent condition within the same traveller section', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Skip the passport branch
+			await postAnswer(testServer, '/traveller-1/passport-status', {
+				[q.passportStatus.fieldName]: 'needs-passport'
+			});
+
+			// Choose 'other' dietary requirements -> should ask for details
+			const location = await postAnswer(testServer, '/traveller-1/dietary-requirements', {
+				[q.dietaryRequirements.fieldName]: 'other'
+			});
+
+			assert.strictEqual(location, 'traveller-1/dietary-details');
+
+			await renderQuestionCheck(ctx, testServer, '/traveller-1/dietary-details', q.dietaryDetails.question);
+		});
+
+		it('should keep answers and conditions isolated per traveller', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Traveller 1 has a passport -> conditional question is shown
+			const traveller1Location = await postAnswer(testServer, '/traveller-1/passport-status', {
+				[q.passportStatus.fieldName]: 'has-passport'
+			});
+			assert.strictEqual(traveller1Location, 'traveller-1/passport-number');
+
+			// Traveller 2 needs a passport -> same conditional question is skipped
+			const traveller2Location = await postAnswer(testServer, '/traveller-2/passport-status', {
+				[q.passportStatus.fieldName]: 'needs-passport'
+			});
+			assert.strictEqual(traveller2Location, 'traveller-2/dietary-requirements');
+		});
+
+		it('should navigate from one traveller section to the next', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Complete traveller 1's section
+			await postAnswer(testServer, '/traveller-1/passport-status', {
+				[q.passportStatus.fieldName]: 'needs-passport'
+			});
+			const location = await postAnswer(testServer, '/traveller-1/dietary-requirements', {
+				[q.dietaryRequirements.fieldName]: 'none'
+			});
+
+			// Should move into the second traveller's dynamic section
+			assert.strictEqual(location, 'traveller-2/passport-status');
+		});
+
+		it('should navigate from the last traveller section into the following regular section', async (ctx) => {
+			const testServer = await createAppWithJourney(ctx);
+
+			// Complete the last traveller's section
+			await postAnswer(testServer, '/traveller-2/passport-status', {
+				[q.passportStatus.fieldName]: 'needs-passport'
+			});
+			const location = await postAnswer(testServer, '/traveller-2/dietary-requirements', {
+				[q.dietaryRequirements.fieldName]: 'none'
+			});
+
+			// Should move into the regular Payment section after the dynamic sections
+			assert.strictEqual(location, 'payment/payment-method');
+		});
+	});
+});

package/typedefs/question-props.d.ts

@@ -68,7 +68,7 @@ export type SelectableOption = {
 	attributes?: Record<string, string>;
 	behaviour?: 'exclusive';
 	conditional?: {
-		question: string;
+		question?: string;
 		type: string;
 		fieldName: string;
 		inputClasses?: string;
@@ -261,6 +261,8 @@ export type SingleLineInputQuestionParams = CommonQuestionParams & {
 	inputAttributes?: Record<string, string>; // HTML attributes to add to the input
 	label?: string; // if defined this will show as a label for the input and the question will just be a standard h1
 	classes?: string; // HTML classes to add to the input
+	prefix?: Affix;
+	suffix?: Affix;
 };
 
 type SingleLineInputQuestionProps = SingleLineInputQuestionParams & {

package/typedefs/question-types.d.ts

@@ -92,6 +92,9 @@ export interface QuestionViewModel<TQuestionViewData extends BaseQuestionViewDat
 export interface PrepQuestionForRenderingOptions {
 	params: RouteParams;
 	manageListQuestion?: ManageListQuestion;
+	dynamicSection?: {
+		fieldName: string;
+	};
 }
 
 /**