hof 23.0.2-vite-sourcemap-beta → 23.0.3

package/components/amount-with-unit-select/utils.js

@@ -0,0 +1,197 @@
+'use strict';
+
+const _ = require('lodash');
+
+/**
+ * Translates a field property (given its key and a translation function),
+ * returning null if there is no translation (enabling conditional statements to branch if there is no translation).
+ * @param {string} key - The key of the field property to translate
+ * (E.G. 'fields.amountWithUnitSelect-amount.label' - references the amount field label).
+ * @param {function(string): string} translate - The translation function to apply.
+ * @returns {string|null} Returns the translation or null if there is no translation.
+ */
+const conditionalTranslate = (key, translate) => {
+  let result = translate(key);
+  if (result === key) {
+    result = null;
+  }
+  return result;
+};
+
+/**
+ * Gets the classname specified for the field's legend.
+ * Defaults to an empty string if not specified.
+ * @param {object} field - The field with (potentially) the legend classname.
+ * @returns {string} The classname specified for the field's legend text.
+ */
+const getLegendClassName = field =>
+  field?.legend?.className || '';
+
+/**
+ * Gets a boolean determining if the field's heading has been set to be the page heading.
+ * @param {Object} field - The field with the heading to (potentially) make the page title.
+ * @returns {string} A boolean that indicates if the field's heading is also the page heading.
+ */
+const getIsPageHeading = field =>
+  field?.isPageHeading || '';
+
+/**
+ * Creates a new object with the component's assigned 'amount' and 'unit' values.
+ * It does this by looking for the 'amountWithUnitSelect-amount' and 'amountWithUnitSelect-unit' fields in req.body
+ * and making a new object that copies those 2 fields and values, and removes the 'amountWithUnitSelect-' suffix.
+ * @param {Object} body - The submitted request's body (req.body) containing K:V pairs
+ * (E.G. 'amountWithUnitSelect-amount : 12').
+ * @param {Object} fields - The set of fields relevant to this component (I.E. fields defined in ./fields.js).
+ * @param {string} key - The grouped child fields' parent name/key ('amountWithUnitSelect' in this case).
+ * @returns {{ amount: string, unit: string }} Returns a map of values in the format { amount: '1', unit: 'litres' }.
+ */
+const getParts = (body, fields, key) =>
+  _.mapKeys(_.pick(body, Object.keys(fields)), (value, fieldKey) =>
+    fieldKey.replace(`${key}-`, '')
+  );
+
+/**
+ * Splits the AmountWithUnitSelect value (usually in the format '[Amount]-[Unit]') by the last hyphen in the text
+ * into an Array with 2 elements (the amount and unit - the value before and after the hyphen respectively).
+ * Returns an empty string for each element if in an unexpected format.
+ * @param {string} amountWithUnitSelectVal - The amountWithUnitSelect value (E.G. '1-Litre').
+ * @returns {string[]} Returns an array in format [amount, unit].
+ */
+const getAmountWithUnitSelectValues = amountWithUnitSelectVal => {
+  const splitPointIndex = typeof amountWithUnitSelectVal === 'string' ?
+    amountWithUnitSelectVal.lastIndexOf('-') :
+    -1;
+
+  return splitPointIndex === -1 ?
+    ['', ''] :
+    [amountWithUnitSelectVal.substring(0, splitPointIndex), amountWithUnitSelectVal.substring(splitPointIndex + 1)];
+};
+
+/**
+ * Returns a map of the component's fields' keys and their assigned values.
+ * (E.G. If amountWithUnitSelectVal = 1-L,
+ * it returns { amountWithUnitSelect-amount: '1', amountWithUnitSelect-unit: 'L' }).
+ * @param {string} amountWithUnitSelectVal - AmountWithUnitSelect value in the format '[Amount]-[Unit]'.
+ * @param {Object} fields - The component's child field definitions and configurations.
+ * @returns {amountWithUnitSelect-amount: string, amountWithUnitSelect-unit: string} Returns a map of K:V pairs
+ * for each child field.
+ */
+const getPartsFromAmountWithUnitSelect = (amountWithUnitSelectVal, fields) =>
+  getAmountWithUnitSelectValues(amountWithUnitSelectVal).reduce(
+    (obj, value, index) => Object.assign({},
+      obj,
+      {[fields[index]]: value }),
+    {});
+
+/**
+ * Translates the labels of the child fields of the AmountWithUnitSelect component.
+ * Depending on which exists, labels are set in the following order of precedence:
+ * 1. A specific child-component translation (I.E. amountWithUnitSelect-amount.label).
+ * 2. A parent-component translation for the child field (I.E. amountWithUnitSelect.amountLabel).
+ * 3. A specific child-component (non-translated) label configuration.
+ * 4. A parent-component (non-translated) label configuration for the child field.
+ * @param {Object} req - The form's request object.
+ * @param {Object} fields - The component's child field definitions and configurations.
+ * @param {string} pKey - The parent component's key (E.G. 'amountWithUnitSelect').
+ * @param {string[]} keys - The list of child components (by keys) to translate (E.G. ['amount', 'unit']).
+ */
+const translateLabels = (req, fields, pKey, keys) => {
+  keys.forEach(key => {
+    fields[`${pKey}-${key}`].label =
+      conditionalTranslate(`fields.${pKey}-${key}.label`, req.translate) ||
+      conditionalTranslate(`fields.${pKey}.${key}Label`, req.translate) ||
+      fields[`${pKey}-${key}`].label ||
+      req.form.options.fields[`${pKey}`]?.[`${key}Label`];
+  });
+};
+
+/**
+ * Adds the component's child fields to the request's form options fields (req.form.options.fields).
+ * @param {Object} req - The form's request object.
+ * @param {Object} fields - The component's child field definitions and configurations.
+ * @param {string} key - The parent component's key (E.G. 'amountWithUnitSelect').
+ */
+const addChildFieldsToRequestForm = (req, fields, key) => {
+  Object.assign(req.form.options.fields, _.mapValues(fields, (v, k) => {
+    const rawKey = k.replace(`${key}-`, '');
+    const labelKey = `fields.${key}.parts.${rawKey}`;
+    const label = req.translate(labelKey);
+
+    return Object.assign({}, v, {
+      label: label === labelKey ? v.label : label
+    });
+  }));
+};
+
+/**
+ * Sets a default null option for a select component if undefined.
+ * The default null option has a label of 'Select...' and a value of an empty string.
+ * @param {Object[]} options - The dropdown menu options.
+ * @returns {Object[]} Returns the options with the null/default option resolved.
+ */
+const resolveNullOption = options => {
+  const nullOptionLabel = options.find(opt => opt.null !== undefined && Object.keys(opt).length === 1);
+  const nonNullOptions = options.filter(opt => opt.null === undefined || Object.keys(opt).length !== 1);
+
+  return [{label: (nullOptionLabel !== undefined ? nullOptionLabel.null : 'Select...'), value: ''}]
+    .concat(nonNullOptions);
+};
+
+/**
+ * Translates the unit field's/component's options (dropdown menu options) for the AmountWithUnitSelect component.
+ * Also resolves the null/default select option's label and value.
+ * @param {Object} req - The form's request object.
+ * @param {Object} fields - The component's child field definitions and configurations.
+ * @param {Object} options - The component's configuration options.
+ * @param {String} key - The parent component's key (E.G. 'amountWithUnitSelect').
+ */
+const translateUnitOptions = (req, fields, options, key) => {
+  // sets unit options as either translations (if they exist) or default untranslated options
+  const optionsToDisplay = conditionalTranslate(`fields.${key}-unit.options`, req.translate) ||
+    conditionalTranslate(`fields.${key}.options`, req.translate) ||
+    options.options;
+
+  // resolves the null/default select option
+  fields[`${key}-unit`].options = resolveNullOption(optionsToDisplay);
+};
+
+/**
+ * Constructs an object with field data required to render the AmountWithUnitSelect component.
+ * @param {Object} req - The form's request object.
+ * @param {Object} fields - The component's child field definitions and configurations.
+ * @param {Object} options - The component's configuration options.
+ * @param {string} key - The parent component's key.
+ * @returns {Object} Returns an object with field data required to render the component.
+ */
+const constructFieldToRender = (req, fields, options, key) => {
+  addChildFieldsToRequestForm(req, fields, key);
+
+  const reqForm = req.form;
+  const legend = conditionalTranslate(`fields.${key}.legend`, req.translate) ||
+    reqForm.options.fields[`${key}`]?.legend;
+  const hint = conditionalTranslate(`fields.${key}.hint`, req.translate) ||
+    reqForm.options.fields[`${key}`]?.hint;
+  const legendClassName = getLegendClassName(options);
+  const isPageHeading = getIsPageHeading(options);
+  const error = reqForm.errors && (
+    (reqForm.errors[key]?.type && reqForm.errors[key]) ||
+    reqForm.errors[`${key}-amount`]?.type && reqForm.errors[`${key}-amount`] ||
+    reqForm.errors[`${key}-unit`]?.type && reqForm.errors[`${key}-unit`]
+  );
+
+  return { key, legend, legendClassName, isPageHeading, hint, error };
+};
+
+module.exports = {
+  conditionalTranslate,
+  getLegendClassName,
+  getIsPageHeading,
+  getParts,
+  getAmountWithUnitSelectValues,
+  getPartsFromAmountWithUnitSelect,
+  translateLabels,
+  addChildFieldsToRequestForm,
+  resolveNullOption,
+  translateUnitOptions,
+  constructFieldToRender
+};

package/components/amount-with-unit-select/validation.js

@@ -0,0 +1,175 @@
+'use strict';
+
+const _ = require('lodash');
+const controller = require('../../controller/controller').prototype;
+const utils = require('./utils');
+
+/**
+ * Validates the value is a string consisting of two hyphen-separated values.
+ * Can be passed to the list of field validators to run as a custom validator.
+ * @param {string} value - The amountWithUnitSelect value to validate (E.G. '1-Litre').
+ * @returns {boolean} Returns true if the value is in the expected format, false otherwise.
+ */
+const isTwoHyphenSeparatedValues = value => {
+  if (typeof value !== 'string' || value.indexOf('-') === -1) {
+    return false;
+  }
+  const selectValue = [value.split('-').pop()];
+  return Array.isArray(selectValue) && selectValue.length;
+};
+
+/**
+ * Creates a custom 'equal' validator for a select component.
+ * @param {Object[]} options - The select component options.
+ * @returns {Object[]} Returns a custom 'equal' validator object for the select component.
+ */
+const createCustomEqualValidator = options => [{
+  type: 'equal',
+  arguments: _.map(options, opt =>
+    typeof opt === 'string' ? opt : opt.value)
+}];
+
+/**
+ * Adds a validator to a field's validate array, ensuring no duplicates.
+ * @param {Object} field - The field to add the validator to.
+ * @param {Object|Object[]|string|string[]|function(string): boolean|(function(string): boolean)[]} newValidator -
+ * The validator to add.
+ */
+const addValidator = (field, newValidator) => {
+  field.validate = _.uniq(field.validate.concat(newValidator));
+};
+
+/**
+ * Adds the 'groupedFieldsWithOptions' property to the specified field.
+ * This property prevents the 'equal' validator being applied to the parent component by default,
+ * and enables it to separately be added to the unit child component instead.
+ * @param {Object} field - The field to add the property to.
+ */
+const addGroupedFieldsWithOptionsProperty = field => {
+  field.groupedFieldsWithOptions = true;
+};
+
+/**
+ * Resolves configurations related to making the amount and/or unit fields optional (E.G. amountOptional, unitOptional).
+ * @param {Object[]} parentField - The parent component's field definition and configuration.
+ * @param {Object[]} childFields - The child component's field definitions and configurations.
+ * @param {Array} validators - The list of validators assigned to the parent component.
+ * @param {string} key - The parent component's key.
+ */
+const resolveOptionalFields = (parentField, childFields, validators, key) => {
+  // adds existing required validators from parent component to the child components
+  // and resolves configurations that determine if the child components should be optional
+  (validators?.indexOf('required') !== -1 || parentField[key]?.amountOptional !== 'true') &&
+    addValidator(childFields[`${key}-amount`], 'required');
+  (validators?.indexOf('required') !== -1 || parentField[key]?.unitOptional !== 'true') &&
+    addValidator(childFields[`${key}-unit`], 'required');
+};
+
+/**
+ * Propagates the child component's (amount and unit) field data and values into the form request to enable validation.
+ * @param {Object} formReq - The form's request object.
+ * @param {Object[]} fields - The child components' definitions and configurations.
+ * @param {string} key - The parent component's key.
+ */
+const propagateChildFieldValidation = (formReq, fields, key) => {
+  // adds child component field definitions to the form request
+  Object.assign(formReq.options.fields,
+    { [`${key}-amount`]: fields[`${key}-amount`] },
+    { [`${key}-unit`]: fields[`${key}-unit`] }
+  );
+  // splits and assigns the component's values to the form request
+  const amountWithUnitSelectValues = utils.getAmountWithUnitSelectValues(formReq.values[key]);
+  Object.assign(formReq.values,
+    { [`${key}-amount`]: amountWithUnitSelectValues[0] },
+    { [`${key}-unit`]: amountWithUnitSelectValues[1] }
+  );
+};
+
+/**
+ * Moves validators, that are not the 'required' or 'equal' type, from the parent component to
+ * the 'amount' child component,
+ * ensuring all other validators are applied to the amount field only.
+ * @param {Object} formReqFields - The fields in the form's request object (req.form.options.fields).
+ * @param {Object[]} fields - The child components' definitions and configurations.
+ * @param {string} key - The parent component's key.
+ */
+const moveExcessValidatorToChildComponent = (formReqFields, fields, key) => {
+  _.remove(formReqFields[key]?.validate, validator => {
+    if (!((typeof validator === 'object' &&
+      (validator.type === 'equal' ||
+        validator.type === 'required')) ||
+      (typeof validator === 'string' &&
+        (validator === 'equal' ||
+          validator === 'required')))) {
+      if (formReqFields[`${key}-amount`] === null) {
+        Object.assign(formReqFields, {
+          [`${key}-amount`]: fields[`${key}-amount`]
+        });
+      }
+      if (!formReqFields[`${key}-amount`]?.validate?.includes(validator)) {
+        formReqFields[`${key}-amount`].validate.push(validator);
+      }
+      return true;
+    }
+    return false;
+  });
+};
+
+/**
+ * Creates and adds a validation error for a child component into the form request's errors list.
+ * @param {Object} req - The request object given to the component.
+ * @param {Object} res - The response object given to the component.
+ * @param {Object[]} errors - The validation errors recorded in the session model.
+ * @param {string} pKey - The parent component's key.
+ * @param {string} key - The child component's key.
+ */
+const addValidationError = (req, res, errors, pKey, key) => {
+  // manually creates and adds an error object
+  req.form.errors[`${pKey}-${key}`] = {
+    errorLinkId: `${pKey}-${key}`,
+    key: errors[`${pKey}-${key}`]?.key || `${key}-${key}`,
+    type: errors[`${pKey}-${key}`]?.type || null
+  };
+  // ensure the error message is processed and translated by the controller
+  req.form.errors[`${pKey}-${key}`].message =
+    controller.getErrorMessage(req.form.errors[`${pKey}-${key}`], req, res) ||
+    controller.getErrorMessage({
+      errorLinkId: `${pKey}-${key}`,
+      key: `${pKey}`,
+      type: errors[`${pKey}-${key}`]?.type || null
+    }, req, res);
+};
+
+/**
+ * Inserts child component validation errors into the form request if there is no parent component error.
+ * Only one error from the component is added to the request's error list in the order of the parent, amount,
+ * and then unit component.
+ * @param {Object} req - The request object given to the component.
+ * @param {Object} res - The response object given to the component.
+ * @param {string} pKey - The parent component's key.
+ * @param {Object[]} errors - The validation errors recorded in the session model.
+ */
+const insertChildValidationErrors = (req, res, pKey, errors) => {
+  let key;
+  if (errors && !errors[pKey] && req?.form?.errors) {
+    if (errors[`${pKey}-amount`] && req.form.errors[`${pKey}-amount`]) {
+      key = 'amount';
+    } else if (errors[`${pKey}-unit`] && req.form.errors[`${pKey}-unit`]) {
+      key = 'unit';
+    }
+  }
+  // if there are not parent or child errors, no errors are added
+  key && addValidationError(req, res, errors, pKey, key);
+};
+
+module.exports = {
+  isTwoHyphenSeparatedValues,
+  createCustomEqualValidator,
+  addValidator,
+  addGroupedFieldsWithOptionsProperty,
+  resolveOptionalFields,
+  propagateChildFieldValidation,
+  moveExcessValidatorToChildComponent,
+  addValidationError,
+  insertChildValidationErrors
+};

package/components/index.js

@@ -5,6 +5,7 @@ module.exports = {
   clearSession: require('./clear-session'),
   combineAndLoopFields: require('./combine-and-loop-fields'),
   date: require('./date'),
+  amountWithUnitSelect: require('./amount-with-unit-select'),
   emailer: require('./emailer'),
   homeOfficeCountries: require('./homeoffice-countries'),
   notify: require('./notify'),

package/controller/controller.js

@@ -200,10 +200,12 @@ module.exports = class Controller extends BaseController {
               req.form.errors[key].errorLinkId = key + '-' + field.options[0];
             }
             // eslint-disable-next-line brace-style
-          }
-          // get first field for date input control
-          else if (field && field.mixin === 'input-date') {
+          } else if (field && field.mixin === 'input-date') {
+            // get first field for date input control
             req.form.errors[key].errorLinkId = key + '-day';
+          } else if (field && field.mixin === 'input-amount-with-unit-select') {
+            // get first field for amount-unit input control
+            req.form.errors[key].errorLinkId = key + '-amount';
           } else {
             req.form.errors[key].errorLinkId = key;
           }

package/controller/validation/index.js

@@ -47,7 +47,7 @@ function validate(fields) {
       fields[key].validate = [fields[key].validate];
     }
 
-    if (fields[key].options) {
+    if (fields[key].options && !fields[key].groupedFieldsWithOptions) {
       fields[key].validate = fields[key].validate || [];
       fields[key].validate.push({
         type: 'equal',

package/controller/validation/validators.js

@@ -177,5 +177,4 @@ module.exports = Validators = {
     // eslint-disable-next-line max-len
     return value === '' || Validators.regex(value, /^(([GIR] ?0[A]{2})|((([A-Z][0-9]{1,2})|(([A-Z][A-HJ-Y][0-9]{1,2})|(([A-Z][0-9][A-Z])|([A-Z][A-HJ-Y][0-9]?[A-Z])))) ?[0-9][A-Z]{2}))$/i);
   }
-
 };

package/frontend/template-mixins/mixins/template-mixins.js

@@ -14,6 +14,8 @@ const PARTIALS = [
   'partials/forms/input-text-group',
   'partials/forms/input-text-date',
   'partials/forms/input-submit',
+  'partials/forms/grouped-inputs-select',
+  'partials/forms/grouped-inputs-text',
   'partials/forms/select',
   'partials/forms/checkbox',
   'partials/forms/textarea-group',
@@ -214,6 +216,7 @@ module.exports = function (options) {
         labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
         formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
         hint: hint,
+        amountWithUnitSelectItemClassName: 'grouped-inputs__item',
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
         maxlengthAttribute: field.maxlengthAttribute === true,
@@ -222,6 +225,7 @@ module.exports = function (options) {
         required: required,
         pattern: extension.pattern,
         date: extension.date,
+        amountWithUnitSelect: extension.amountWithUnitSelect,
         autocomplete: autocomplete,
         child: field.child,
         isPageHeading: field.isPageHeading,
@@ -232,7 +236,7 @@ module.exports = function (options) {
       });
     }
 
-    function optionGroup(key, opts) {
+    function optionGroup(key, opts, pKey = key) {
       opts = opts || {};
       const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
       const legend = field.legend;
@@ -248,6 +252,7 @@ module.exports = function (options) {
           legendValue = legend.value;
         }
       }
+
       return {
         key: key,
         error: this.errors && this.errors[key],
@@ -270,15 +275,16 @@ module.exports = function (options) {
 
           if (typeof obj === 'string') {
             value = obj;
-            label = 'fields.' + key + '.options.' + obj + '.label';
-            optionHint = 'fields.' + key + '.options.' + obj + '.hint';
+            // pKey - optional param that demotes parent key for group components - set to key param val by default
+            label = 'fields.' + pKey + '.options.' + obj + '.label';
+            optionHint = 'fields.' + pKey + '.options.' + obj + '.hint';
           } else {
             value = obj.value;
-            label = obj.label || 'fields.' + key + '.options.' + obj.value + '.label';
+            label = obj.label || 'fields.' + pKey + '.options.' + obj.value + '.label';
             toggle = obj.toggle;
             child = obj.child;
             useHintText = obj.useHintText;
-            optionHint = obj.hint || 'fields.' + key + '.options.' + obj.value + '.hint';
+            optionHint = obj.hint || 'fields.' + pKey + '.options.' + obj.value + '.hint';
           }
 
           if (this.values && this.values[key] !== undefined) {
@@ -470,6 +476,50 @@ module.exports = function (options) {
             return parts.concat(monthPart, yearPart).join('\n');
           };
         }
+      },
+      'input-amount-with-unit-select': {
+        handler: function () {
+          return function (key) {
+            key = (key === '{{key}}' || key === '' || key === undefined) ? hoganRender(key, this) : key;
+            const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
+
+            let autocomplete = field.autocomplete || 'off';
+            if (autocomplete === 'off') {
+              autocomplete = { amount: 'off'};
+            } else if (typeof autocomplete === 'string') {
+              autocomplete = { amount: autocomplete + '-amount' };
+            }
+
+            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
+            const classNameAmount = (field.controlsClass && field.controlsClass.amount) ? field.controlsClass.amount : 'govuk-input--width-3';
+            const classNameUnit = (field.controlsClass && field.controlsClass.unit) ? field.controlsClass.unit : 'govuk-input--width-5';
+
+            const parts = [];
+
+            // basically does the '_.each(mixins, function (mixin, name)' part manually (which renders the HTML
+            // for both child components and looks for a 'renderWith' and optional 'Options' method to use)
+            const amountPart = compiled['partials/forms/grouped-inputs-text']
+              .render(inputText.call(this,
+                key + '-amount', {
+                  formGroupClassName,
+                  autocomplete: autocomplete.amount,
+                  className: classNameAmount,
+                  amountWithUnitSelect: true }
+              ));
+
+            const unitPart = compiled['partials/forms/grouped-inputs-select']
+              .render(inputText.call(this, key + '-unit',
+                optionGroup.call(this,
+                  key + '-unit', {
+                    formGroupClassName,
+                    className: classNameUnit,
+                    amountWithUnitSelect: true },
+                  key
+                )));
+
+            return parts.concat(amountPart, unitPart).join('\n');
+          };
+        }
       }
     };
 

package/frontend/template-mixins/partials/forms/grouped-inputs-select.html

@@ -0,0 +1,13 @@
+<div class="{{amountWithUnitSelectItemClassName}}">
+  <div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+        <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</div>{{/hint}}
+      <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} govuk-select--error{{/error}}" name="{{id}}" aria-required="{{required}}">
+      {{#options}}
+          <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
+      {{/options}}
+      </select>
+  </div>
+</div>

package/frontend/template-mixins/partials/forms/grouped-inputs-text.html

@@ -0,0 +1,37 @@
+<div class="{{amountWithUnitSelectItemClassName}}"> 
+    <div id="{{id}}-group" class="{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+          <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{{hint}}}</span>{{/hint}}
+      {{#renderChild}}{{/renderChild}}
+          {{#attributes}}
+              {{#prefix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+              {{/prefix}}
+          {{/attributes}}
+          <input
+              type="{{type}}"
+              name="{{id}}"
+              id="{{id}}"
+              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+              aria-required="{{required}}"
+              {{#value}} value="{{value}}"{{/value}}
+              {{#min}} min="{{min}}"{{/min}}
+              {{#max}} max="{{max}}"{{/max}}
+              {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+              {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+              {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+              {{#error}} aria-invalid="true"{{/error}}
+              {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+              {{#attributes}}
+                  {{attribute}}="{{value}}"
+              {{/attributes}}
+          >
+          {{#attributes}}
+              {{#suffix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+              {{/suffix}}
+          {{/attributes}}
+    </div>
+</div>

package/frontend/themes/gov-uk/styles/_grouped-input.scss

@@ -0,0 +1,5 @@
+.grouped-inputs__item {
+  display: inline-block;
+  margin-right: 20px;
+  margin-bottom: 0;
+}

package/frontend/themes/gov-uk/styles/govuk.scss

@@ -27,6 +27,7 @@ $path: "/images/" !default;
 @import "check_your_answers";
 @import "pdf";
 @import "session-timeout-dialog";
+@import "grouped-input";
 
 // Modules
 @import "modules/validation";

package/frontend/toolkit/assets/javascript/form-focus.js

@@ -85,6 +85,10 @@ function formFocus() {
     document.getElementById(getElementFromSummaryLink + '-day').focus();
   }
 
+  if (document.getElementById(getElementFromSummaryLink + '-amount') && forms.length === 1 && editMode) {
+    document.getElementById(getElementFromSummaryLink + '-amount').focus();
+  }
+
   if (forms.length > 0) {
     labels = document.getElementsByTagName('label');
     if (labels) {

package/lib/sessions.js

@@ -7,17 +7,28 @@ const cookieParser = require('cookie-parser');
 
 const secureHttps = config => config.protocol === 'https' || config.env === 'production';
 
-module.exports = (app, config) => {
-  const logger = config.logger || console;
+const validateSessionSecret = secret => {
+  if (!secret || !String(secret).trim()) {
+    throw new Error(
+      'Session secret is required. Set the SESSION_SECRET environment variable to a 32-byte value.'
+    );
+  }
 
-  const secretBuffer = Buffer.from(config.session.secret, 'utf8');
+  const secretBuffer = Buffer.from(secret, 'utf8');
   if (secretBuffer.byteLength !== 32) {
     throw new Error(
       `Session secret must be exactly 32 bytes. Current: ${secretBuffer.byteLength} bytes.`
     );
   }
 
-  app.use(cookieParser(config.session.secret, {
+  return secret;
+};
+
+module.exports = (app, config) => {
+  const logger = config.logger || console;
+  const sessionSecret = validateSessionSecret(config.session.secret);
+
+  app.use(cookieParser(sessionSecret, {
     path: '/',
     httpOnly: true,
     secure: secureHttps(config)
@@ -32,7 +43,7 @@ module.exports = (app, config) => {
     }));
   }
 
-  const encryption = require('./encryption')(config.session.secret);
+  const encryption = require('./encryption')(sessionSecret);
   const RedisStore = connectRedis(session);
   const client = redis.createClient(config.redis);
 
@@ -57,7 +68,7 @@ module.exports = (app, config) => {
   const store = new RedisStore({
     client: client,
     ttl: config.session.ttl,
-    secret: config.session.secret,
+    secret: sessionSecret,
     serializer: {
       parse: data => JSON.parse(encryption.decrypt(data)),
       stringify: data => encryption.encrypt(JSON.stringify(data))
@@ -74,7 +85,7 @@ module.exports = (app, config) => {
       sameSite: config.cookie?.sameSite === 'lax' ? config.cookie?.sameSite : 'strict',
       httpOnly: true
     },
-    secret: config.session.secret,
+    secret: sessionSecret,
     saveUninitialized: true,
     resave: true
   }, config.session);