@planning-inspectorate/dynamic-forms 1.13.0 → 1.14.1

package/test/questions.js

@@ -0,0 +1,189 @@
+import { COMPONENT_TYPES } from '../src/index.js';
+import { createQuestions } from '../src/questions/create-questions.js';
+import { questionClasses } from '../src/questions/questions.js';
+
+/**
+ * @typedef {import('../src/questions/question-props.js').QuestionProps} Props
+ */
+
+/** @type {Record<string, Props>} */
+export const questionProps = {
+	holidayActivities: {
+		type: COMPONENT_TYPES.CHECKBOX,
+		title: 'Holiday Activities',
+		question: 'Which activities do you want to do on holiday?',
+		fieldName: 'holidayActivities',
+		url: 'holiday-activities',
+		label: 'Select all that apply',
+		options: [
+			{ value: 'swimming', text: 'Swimming' },
+			{ value: 'hiking', text: 'Hiking' },
+			{ value: 'sightseeing', text: 'Sightseeing' }
+		]
+	},
+	addInsurance: {
+		type: COMPONENT_TYPES.BOOLEAN,
+		title: 'Travel Insurance',
+		question: 'Do you want to add travel insurance to your holiday?',
+		fieldName: 'addInsurance',
+		url: 'add-insurance',
+		label: 'Add insurance?'
+	},
+	travelInsuranceType: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Travel Insurance Type',
+		question: 'Which type of travel insurance would you like?',
+		fieldName: 'travelInsuranceType',
+		url: 'travel-insurance-type',
+		label: 'Select an insurance type',
+		options: [
+			{ value: 'basic', text: 'Basic' },
+			{ value: 'comprehensive', text: 'Comprehensive' },
+			{ value: 'premium', text: 'Premium' }
+		]
+	},
+	holidayDestination: {
+		type: COMPONENT_TYPES.RADIO,
+		title: 'Holiday Destination',
+		question: 'Where would you like to go on holiday?',
+		fieldName: 'holidayDestination',
+		url: 'holiday-destination',
+		label: 'Choose a destination',
+		options: [
+			{ value: 'beach', text: 'Beach' },
+			{ value: 'mountains', text: 'Mountains' },
+			{ value: 'city', text: 'City' }
+		]
+	},
+	departureDate: {
+		type: COMPONENT_TYPES.DATE,
+		title: 'Departure Date',
+		question: 'When do you want to start your holiday?',
+		fieldName: 'departureDate',
+		url: 'departure-date',
+		label: 'Select a date'
+	},
+	holidayPeriod: {
+		type: COMPONENT_TYPES.DATE_PERIOD,
+		title: 'Holiday Period',
+		question: 'What is the period of your holiday?',
+		fieldName: 'holidayPeriod',
+		url: 'holiday-period',
+		label: 'Select start and end dates'
+	},
+	holidayDescription: {
+		type: COMPONENT_TYPES.TEXT_ENTRY,
+		title: 'Holiday Description',
+		question: 'Describe your ideal holiday.',
+		fieldName: 'holidayDescription',
+		url: 'holiday-description',
+		label: 'Description'
+	},
+	secretWish: {
+		type: COMPONENT_TYPES.TEXT_ENTRY_REDACT,
+		title: 'Secret Holiday Wish',
+		question: 'Share a secret wish for your holiday (will be redacted).',
+		fieldName: 'secretWish',
+		url: 'secret-wish',
+		label: 'Secret wish'
+	},
+	travelClass: {
+		type: COMPONENT_TYPES.SELECT,
+		title: 'Travel Class',
+		question: 'Which class do you want to travel in?',
+		fieldName: 'travelClass',
+		url: 'travel-class',
+		label: 'Select a class',
+		options: [
+			{ value: 'economy', text: 'Economy' },
+			{ value: 'business', text: 'Business' },
+			{ value: 'first', text: 'First Class' }
+		]
+	},
+	holidayArrival: {
+		type: COMPONENT_TYPES.DATE_TIME,
+		title: 'Holiday Arrival',
+		question: 'When would you like to arrive at your destination?',
+		fieldName: 'holidayArrival',
+		url: 'holiday-arrival',
+		label: 'Enter your arrival time'
+	},
+	holidaySnack: {
+		type: COMPONENT_TYPES.SINGLE_LINE_INPUT,
+		title: 'Favourite Holiday Snack',
+		question: 'What is your favourite snack to eat on holiday?',
+		fieldName: 'holidaySnack',
+		url: 'holiday-snack',
+		label: 'Snack'
+	},
+	companions: {
+		type: COMPONENT_TYPES.MULTI_FIELD_INPUT,
+		title: 'Travel Companions',
+		question: 'Enter the names and ages of your travel companions.',
+		fieldName: 'companions',
+		url: 'companions',
+		label: 'Companions',
+		inputFields: [
+			{ fieldName: 'name', label: 'Name', type: COMPONENT_TYPES.TEXT_ENTRY },
+			{ fieldName: 'age', label: 'Age', type: COMPONENT_TYPES.NUMBER }
+		]
+	},
+	nights: {
+		type: COMPONENT_TYPES.NUMBER,
+		title: 'Number of Nights',
+		question: 'How many nights will you stay on holiday?',
+		fieldName: 'nights',
+		url: 'nights',
+		label: 'Nights'
+	},
+	hotelAddress: {
+		type: COMPONENT_TYPES.ADDRESS,
+		title: 'Hotel Address',
+		question: 'What is the address of your hotel?',
+		fieldName: 'hotelAddress',
+		url: 'hotel-address',
+		label: 'Hotel address'
+	},
+	luggageWeight: {
+		type: COMPONENT_TYPES.UNIT_OPTION,
+		title: 'Luggage Weight',
+		question: 'Select your luggage weight and unit.',
+		fieldName: 'luggageWeightUnits',
+		conditionalFieldName: 'luggageWeightValue',
+		url: 'luggage-weight-units',
+		label: 'Luggage weight',
+		options: [
+			{
+				text: 'Kilograms',
+				value: 'kg',
+				conditional: { label: 'Weight in kilograms', fieldName: 'luggageWeightValue_kg', suffix: 'kg' }
+			},
+			{
+				text: 'Pounds',
+				value: 'lbs',
+				conditional: { label: 'Weight in pounds', fieldName: 'luggageWeightValue_lbs', suffix: 'lbs' }
+			}
+		]
+	}
+};
+
+// questions in order for the journey - used to check the journey redirects to the next question correctly
+export const questionsInOrder = [
+	questionProps.holidayActivities,
+	questionProps.addInsurance,
+	questionProps.travelInsuranceType,
+	questionProps.holidayDestination,
+	questionProps.departureDate,
+	questionProps.holidayPeriod,
+	questionProps.holidayDescription,
+	questionProps.secretWish,
+	questionProps.travelClass,
+	questionProps.holidayArrival,
+	questionProps.holidaySnack,
+	questionProps.companions,
+	questionProps.nights,
+	questionProps.hotelAddress,
+	questionProps.luggageWeight
+];
+
+export const getQuestions = () => createQuestions(questionProps, questionClasses, {});

package/test/questions.test.js

@@ -0,0 +1,246 @@
+import { describe, it } from 'node:test';
+import assert from 'assert';
+import { createApp } from './utils/app.js';
+import { TestServer } from './utils/test-server.js';
+import { getQuestions, questionsInOrder } from './questions.js';
+import { buildGetJourney } from '../src/middleware/build-get-journey.js';
+import { createJourney, JOURNEY_ID } from './journey.js';
+import { buildGetJourneyResponseFromSession, saveDataToSession } from '../src/lib/session-answer-store.js';
+import validate from '../src/validator/validator.js';
+import { validationErrorHandler } from '../src/validator/validation-error-handler.js';
+import { buildSave, list, question } from '../src/controller.js';
+import path from 'path';
+import { COMPONENT_TYPES } from '../src/index.js';
+import { escapeForRegExp, snapshotsDir } from './utils/utils.js';
+import { BOOLEAN_OPTIONS } from '../src/components/boolean/question.js';
+
+/**
+ * @param {import('node:test').TestContext} ctx
+ * @returns {Promise<TestServer>}
+ */
+export async function createAppWithQuestions(ctx) {
+	const app = createApp();
+	const questions = getQuestions();
+	const getJourney = buildGetJourney((req, journeyResponse) => createJourney(questions, journeyResponse));
+	const getJourneyResponse = buildGetJourneyResponseFromSession(JOURNEY_ID);
+
+	// app.use((req, res, next) => {
+	//   console.log(req.method, req.url, req.session);
+	//   next();
+	// });
+
+	app.get('/:section/:question', getJourneyResponse, getJourney, question);
+
+	app.post(
+		'/:section/:question',
+		getJourneyResponse,
+		getJourney,
+		validate,
+		validationErrorHandler,
+		buildSave(saveDataToSession)
+	);
+
+	app.get('/check-your-answers', getJourneyResponse, getJourney, (req, res) => list(req, res, '', {}));
+
+	app.use((error, req, res, next) => {
+		if (error) {
+			console.error('Internal Server Error:', error);
+		}
+		next();
+	});
+
+	app.use((req, res) => {
+		res.status(404);
+	});
+
+	const server = new TestServer(app, { rememberCookies: true });
+	await server.start();
+	ctx.after(async () => await server.stop());
+	return server;
+}
+
+describe('question pages', () => {
+	it('should have a test for each question type', () => {
+		const questionsByType = new Map();
+		for (const q of questionsInOrder) {
+			if (!questionsByType.has(q.type)) {
+				questionsByType.set(q.type, []);
+			}
+			questionsByType.get(q.type).push(q);
+		}
+		for (const [k, v] of Object.entries(COMPONENT_TYPES)) {
+			const questions = questionsByType.get(v);
+			if (!questions || questions.length === 0) {
+				throw new Error(`no test questions for ${k}`);
+			}
+		}
+	});
+
+	for (let i = 0; i < questionsInOrder.length; i++) {
+		const q = questionsInOrder[i];
+
+		it(`should render question: ${q.url}`, async (ctx) => {
+			const testServer = await createAppWithQuestions(ctx);
+
+			const response = await testServer.get('/questions/' + q.url, {
+				redirect: 'manual'
+			});
+			assert.strictEqual(response.status, 200);
+			const text = await response.text();
+			// be sure to escape parentheses in the question text for the regex
+			assert.match(text, new RegExp(escapeForRegExp(q.question), 'i'));
+			assert.match(text, /<form action="" method="post"/i);
+			if (q.options) {
+				for (const option of q.options) {
+					if (q.type === COMPONENT_TYPES.SELECT) {
+						assert.match(
+							text,
+							new RegExp(`<option[^>]*value="${option.value}"[^>]*>\\s*${option.text}\\s*</option>`, 'i')
+						);
+					} else {
+						assert.match(text, new RegExp(`<input[^>]*value="${option.value}"[^>]*>`));
+						assert.match(text, new RegExp(`<label[^>]*>\\s*${option.text}\\s*</label>`, 'i'));
+					}
+				}
+			}
+			ctx.assert.fileSnapshot(text, path.join(snapshotsDir(), q.url + '.html'), {
+				serializers: [(v) => v]
+			});
+		});
+
+		it(`should POST valid data for question: ${q.url} and redirect to next`, async (ctx) => {
+			const testServer = await createAppWithQuestions(ctx);
+			const payload = mockAnswerBody(q);
+			const response = await testServer.post(`/questions/${q.url}`, payload, { redirect: 'manual' });
+			if (![302, 303].includes(response.status)) {
+				const text = await response.text();
+				console.log(`Response for ${q.url}:\n`, text);
+			}
+			// Should redirect (302 or 303)
+			assert.ok([302, 303].includes(response.status), `Expected redirect, got ${response.status}`);
+			// Should redirect to the next question (if there is one)
+			const location = response.headers.get('location');
+			const nextQ = questionsInOrder[i + 1];
+			if (nextQ) {
+				assert.strictEqual(location, `questions/${nextQ.url}`);
+			} else {
+				assert.strictEqual(location, 'check-your-answers');
+			}
+		});
+	}
+});
+
+/**
+ * Build a valid payload for a question.
+ * @param {import('../src/questions/question-props.js').QuestionProps} q
+ * @returns {Object}
+ */
+export function mockAnswerBody(q) {
+	switch (q.type) {
+		case COMPONENT_TYPES.BOOLEAN:
+			return { [q.fieldName]: BOOLEAN_OPTIONS.YES };
+		case COMPONENT_TYPES.CHECKBOX:
+			return { [q.fieldName]: [q.options[0].value] };
+		case COMPONENT_TYPES.RADIO:
+		case COMPONENT_TYPES.SELECT:
+			return { [q.fieldName]: q.options[0].value };
+		case COMPONENT_TYPES.NUMBER:
+			return { [q.fieldName]: 1 };
+		case COMPONENT_TYPES.DATE:
+			return {
+				[q.fieldName + '_day']: 1,
+				[q.fieldName + '_month']: 1,
+				[q.fieldName + '_year']: 2025
+			};
+		case COMPONENT_TYPES.DATE_PERIOD:
+			return {
+				[q.fieldName + '_start_day']: 1,
+				[q.fieldName + '_start_month']: 1,
+				[q.fieldName + '_start_year']: 2025,
+				[q.fieldName + '_end_day']: 2,
+				[q.fieldName + '_end_month']: 1,
+				[q.fieldName + '_end_year']: 2025
+			};
+		case COMPONENT_TYPES.DATE_TIME:
+			return {
+				[q.fieldName + '_day']: 1,
+				[q.fieldName + '_month']: 1,
+				[q.fieldName + '_year']: 2025,
+				[q.fieldName + '_hour']: 10,
+				[q.fieldName + '_minutes']: 45,
+				[q.fieldName + '_period']: 'am'
+			};
+		case COMPONENT_TYPES.TEXT_ENTRY:
+		case COMPONENT_TYPES.SINGLE_LINE_INPUT:
+			return { [q.fieldName]: 'test' };
+		case COMPONENT_TYPES.TEXT_ENTRY_REDACT:
+			return { [q.fieldName]: 'secret' };
+		case COMPONENT_TYPES.MULTI_FIELD_INPUT: {
+			const res = {};
+			for (const field of q.inputFields) {
+				res[field.fieldName] = mockAnswer(field);
+			}
+			return res;
+		}
+		case COMPONENT_TYPES.ADDRESS:
+			return {
+				[q.fieldName + '_addressLine1']: '1 Test St',
+				[q.fieldName + '_townCity']: 'Testville',
+				[q.fieldName + '_postcode']: 'TE5 5ST'
+			};
+		case COMPONENT_TYPES.UNIT_OPTION:
+			return {
+				[q.fieldName]: 'kg',
+				[q.options[0].conditional.fieldName]: 10
+			};
+		default:
+			return { [q.fieldName]: 'test' };
+	}
+}
+
+/**
+ * Build a valid & formatted answer for a question.
+ * @param {import('../src/questions/question-props.js').QuestionProps} q
+ * @returns {Object}
+ */
+export function mockAnswer(q) {
+	switch (q.type) {
+		case COMPONENT_TYPES.BOOLEAN:
+			return BOOLEAN_OPTIONS.YES;
+		case COMPONENT_TYPES.CHECKBOX:
+			return q.options[0].text;
+		case COMPONENT_TYPES.RADIO:
+		case COMPONENT_TYPES.SELECT:
+			return q.options[0].text;
+		case COMPONENT_TYPES.NUMBER:
+			return 1;
+		case COMPONENT_TYPES.DATE:
+			return '1 January 2025';
+		case COMPONENT_TYPES.DATE_PERIOD:
+			return 'Start: 00:00 1 January 2025<br>End: 00:00 2 January 2025';
+		case COMPONENT_TYPES.DATE_TIME:
+			return '1 January 2025<br>10:45am';
+		case COMPONENT_TYPES.TEXT_ENTRY:
+		case COMPONENT_TYPES.SINGLE_LINE_INPUT:
+			return 'test';
+		case COMPONENT_TYPES.TEXT_ENTRY_REDACT:
+			return 'secret';
+		case COMPONENT_TYPES.MULTI_FIELD_INPUT:
+			if (q.inputFields) {
+				let res = '';
+				for (const field of q.inputFields) {
+					res += mockAnswer(field) + '<br>';
+				}
+				return res;
+			}
+			break;
+		case COMPONENT_TYPES.ADDRESS: {
+			const answer = mockAnswerBody(q);
+			return Object.values(answer).filter(Boolean).join('<br>');
+		}
+		case COMPONENT_TYPES.UNIT_OPTION:
+			return '10 kg';
+		default:
+			return 'test';
+	}
+}

package/test/snapshots/add-insurance.html

@@ -0,0 +1,44 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                    <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="addInsurance-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+      <h1 class="govuk-fieldset__heading">
+        Do you want to add travel insurance to your holiday?
+      </h1>
+    </legend>
+    <div id="addInsurance-hint" class="govuk-hint">
+      
+    </div>
+    <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="addInsurance" name="addInsurance" type="radio" value="yes" data-cy="answer-yes">
+        <label class="govuk-label govuk-radios__label" for="addInsurance">
+          Yes
+        </label>
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="addInsurance-2" name="addInsurance" type="radio" value="no" data-cy="answer-no">
+        <label class="govuk-label govuk-radios__label" for="addInsurance-2">
+          No
+        </label>
+      </div>
+    </div>
+  </fieldset>
+</div>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/check-your-answers-not-started.html

@@ -0,0 +1,201 @@
+
+    <style >
+        .app-task-list {
+          padding-left: 0;
+        }
+        .app-task-list>li {
+          position: relative;
+          list-style-type: none;
+
+        }
+        .app-task-list__section .govuk-tag {
+          position: absolute;
+          top: 3px;
+          right: 0;
+        }
+        .app-task-list .govuk-summary-list {
+          border-top: 1px solid #b1b4b6;
+        }
+    </style>
+
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+                        <dl class="govuk-summary-list">
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Activities
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-activities">Answer<span class="govuk-visually-hidden"> Which activities do you want to do on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Insurance
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/add-insurance">Answer<span class="govuk-visually-hidden"> Do you want to add travel insurance to your holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Insurance Type
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-insurance-type">Answer<span class="govuk-visually-hidden"> Which type of travel insurance would you like?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Destination
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-destination">Answer<span class="govuk-visually-hidden"> Where would you like to go on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Departure Date
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/departure-date">Answer<span class="govuk-visually-hidden"> When do you want to start your holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Period
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-period">Answer<span class="govuk-visually-hidden"> What is the period of your holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Description
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-description">Answer<span class="govuk-visually-hidden"> Describe your ideal holiday.</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Secret Holiday Wish
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/secret-wish">Answer<span class="govuk-visually-hidden"> Share a secret wish for your holiday (will be redacted).</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Class
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/travel-class">Answer<span class="govuk-visually-hidden"> Which class do you want to travel in?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Holiday Arrival
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-arrival">Answer<span class="govuk-visually-hidden"> When would you like to arrive at your destination?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Favourite Holiday Snack
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/holiday-snack">Answer<span class="govuk-visually-hidden"> What is your favourite snack to eat on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Travel Companions
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/companions">Answer<span class="govuk-visually-hidden"> Enter the names and ages of your travel companions.</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Number of Nights
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/nights">Answer<span class="govuk-visually-hidden"> How many nights will you stay on holiday?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Hotel Address
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/hotel-address">Answer<span class="govuk-visually-hidden"> What is the address of your hotel?</span></a>
+    </dd>
+  </div>
+  <div class="govuk-summary-list__row">
+    <dt class="govuk-summary-list__key">
+      Luggage Weight
+    </dt>
+    <dd class="govuk-summary-list__value">
+      Not started
+    </dd>
+    <dd class="govuk-summary-list__actions">
+      <a class="govuk-link" href="questions/luggage-weight-units">Answer<span class="govuk-visually-hidden"> Select your luggage weight and unit.</span></a>
+    </dd>
+  </div>
+</dl>
+
+        <form action method="post">
+            <input type="hidden" name="_csrf" value="">
+            <button type="submit" class="govuk-button" data-module="govuk-button">
+  Accept &amp; Submit
+</button>
+        </form>
+
+        </div>
+    </div>
+
+