@defra/forms-engine-plugin 5.0.0-alpha.1 → 5.0.0-alpha.10

package/.server/server/plugins/postcode-lookup/views/postcode-lookup-details.html

@@ -33,7 +33,7 @@
             <!-- Postcode lookup select -->
             <!-- Postcode lookup details display -->
             {%- set detailsHtml -%}
-              <strong>{{ details.postcodeQuery }}</strong>{% if details.buildingNameQuery %} and <strong>{{ details.buildingNameQuery }}</strong>{% endif %}
+              <strong>{{ details.postcodeQuery }}</strong>{% if details.buildingNameQuery %} {{ t('common.and')}} <strong>{{ details.buildingNameQuery }}</strong>{% endif %}
             {%- endset -%}
 
             {% if hasAddresses %}
@@ -72,9 +72,9 @@
           {{ govukButton(buttons.continueButton) }}
 
           {% if buttons.manualLink %}
-            <p class="govuk-body">or <a class="govuk-link govuk-link--no-visited-state" href="{{ buttons.manualLink.href }}">{{buttons.manualLink.text}}</a></p>
+            <p class="govuk-body">{{ t('common.or')}} <a class="govuk-link govuk-link--no-visited-state" href="{{ buttons.manualLink.href }}">{{buttons.manualLink.text}}</a></p>
           {% elif buttons.detailsLink %}
-            <p class="govuk-body">or <a class="govuk-link govuk-link--no-visited-state" href="{{ buttons.detailsLink.href }}">{{buttons.detailsLink.text}}</a></p>
+            <p class="govuk-body">{{ t('common.or')}} <a class="govuk-link govuk-link--no-visited-state" href="{{ buttons.detailsLink.href }}">{{buttons.detailsLink.text}}</a></p>
           {% endif %}
         </div>
       </form>

package/.server/server/utils/type-utils.d.ts

@@ -1,3 +1,2 @@
-import { type JoiExpression, type LanguageMessages, type LanguageMessagesExt } from 'joi';
-export declare function convertToLanguageMessages(extLanguageMessages: LanguageMessagesExt): LanguageMessages;
+import { type JoiExpression } from 'joi';
 export declare function createJoiExpression(expr: string): JoiExpression;

package/.server/server/utils/type-utils.js

@@ -1,7 +1,4 @@
 import Joi from 'joi';
-export function convertToLanguageMessages(extLanguageMessages) {
-  return extLanguageMessages;
-}
 export function createJoiExpression(expr) {
   return Joi.expression(expr);
 }

package/.server/server/utils/type-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"type-utils.js","names":["Joi","convertToLanguageMessages","extLanguageMessages","createJoiExpression","expr","expression"],"sources":["../../../src/server/utils/type-utils.ts"],"sourcesContent":["import Joi, {\n  type JoiExpression,\n  type LanguageMessages,\n  type LanguageMessagesExt\n} from 'joi'\n\nexport function convertToLanguageMessages(\n  extLanguageMessages: LanguageMessagesExt\n): LanguageMessages {\n  return extLanguageMessages as unknown as LanguageMessages\n}\n\nexport function createJoiExpression(expr: string): JoiExpression {\n  return Joi.expression(expr) as unknown as JoiExpression\n}\n"],"mappings":"AAAA,OAAOA,GAAG,MAIH,KAAK;AAEZ,OAAO,SAASC,yBAAyBA,CACvCC,mBAAwC,EACtB;EAClB,OAAOA,mBAAmB;AAC5B;AAEA,OAAO,SAASC,mBAAmBA,CAACC,IAAY,EAAiB;EAC/D,OAAOJ,GAAG,CAACK,UAAU,CAACD,IAAI,CAAC;AAC7B","ignoreList":[]}
+{"version":3,"file":"type-utils.js","names":["Joi","createJoiExpression","expr","expression"],"sources":["../../../src/server/utils/type-utils.ts"],"sourcesContent":["import Joi, { type JoiExpression } from 'joi'\n\nexport function createJoiExpression(expr: string): JoiExpression {\n  return Joi.expression(expr) as unknown as JoiExpression\n}\n"],"mappings":"AAAA,OAAOA,GAAG,MAA8B,KAAK;AAE7C,OAAO,SAASC,mBAAmBA,CAACC,IAAY,EAAiB;EAC/D,OAAOF,GAAG,CAACG,UAAU,CAACD,IAAI,CAAC;AAC7B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-engine-plugin",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.10",
   "description": "Defra forms engine",
   "type": "module",
   "files": [
@@ -19,6 +19,11 @@
       "import": "./.server/server/plugins/engine/types/index.js",
       "default": "./.server/server/plugins/engine/types/index.js"
     },
+    "./maps": {
+      "sass": "./.server/client/stylesheets/maps.scss",
+      "import": "./.server/client/javascripts/maps.js",
+      "default": "./.server/client/javascripts/maps.js"
+    },
     "./shared.js": "./.server/client/javascripts/shared.js",
     "./shared.min.js": "./.public/javascripts/shared.min.js",
     "./shared.min.js.map": "./.public/javascripts/shared.min.js.map",
@@ -87,7 +92,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@defra/forms-model": "^3.0.687",
+    "@defra/forms-model": "^3.0.693",
     "@defra/hapi-tracing": "^1.29.0",
     "@defra/interactive-map": "^0.0.33-alpha",
     "@elastic/ecs-pino-format": "^1.5.0",
@@ -131,6 +136,7 @@
     "joi": "^17.13.3",
     "liquidjs": "^10.24.0",
     "lodash": "^4.17.21",
+    "lru-cache": "^11.5.1",
     "maplibre-gl": "^5.24.0",
     "marked": "^15.0.12",
     "nunjucks": "^3.2.4",

package/src/client/javascripts/file-upload.js

@@ -305,17 +305,19 @@ function pollUploadStatus(uploadId) {
  * @param {HTMLButtonElement} uploadButton - The upload button
  * @param {HTMLButtonElement} continueButton - The continue button
  * @param {File[]} selectedFiles - The selected files
+ * @param {string} uploadingLabel - The text to display while uploading (can be multiple languages)
  */
 function handleStandardFormSubmission(
   formElement,
   fileInput,
   uploadButton,
   continueButton,
-  selectedFiles
+  selectedFiles,
+  uploadingLabel
 ) {
   // Render in reverse so first file ends up at the top of the summary list
   for (let i = selectedFiles.length - 1; i >= 0; i--) {
-    renderSummary(selectedFiles[i], 'Uploading…', formElement)
+    renderSummary(selectedFiles[i], uploadingLabel, formElement)
   }
 
   fileInput.focus()
@@ -405,6 +407,10 @@ function initUpload() {
     return
   }
 
+  const uploadingLabel =
+    document.getElementById('uploadedFilesContainer')?.dataset.uploadinglabel ??
+    'Uploading…'
+
   const formElement = /** @type {HTMLFormElement} */ (form)
   /** @type {File[]} */
   let selectedFiles = []
@@ -445,7 +451,8 @@ function initUpload() {
       fileInput,
       uploadButton,
       continueButton,
-      selectedFiles
+      selectedFiles,
+      uploadingLabel
     )
 
     handleAjaxFormSubmission(

package/src/client/javascripts/geospatial-map.js

@@ -172,45 +172,47 @@ export function processGeospatial(config, geospatial, index) {
   const bounds = geojson.features.length ? getBoundingBox(geojson) : undefined
   const drawPlugin = createDrawPlugin()
   const plugins = [drawPlugin]
+  const datasets = []
   const country = geospatial.dataset.country
   const mapLayers = getMapLayers(geospatial.dataset.maplayers)
 
   if (country) {
-    // Add the country bounds as a dataset plugin to show the valid area on the map
+    // Add the country bounds to the datasets array to show the valid area on the map
     // and provide feedback to the user when they add features outside of the bounds.
-    const countriesDatasetPlugin = createDatasetsPlugin({
-      datasets: [
-        {
-          id: 'invalid-area',
-          label: 'Invalid areas',
-          geojson: `${config.apiPath}/maps/countries.geojson?omit=${country}`,
-          showInKey: false,
-          showInMenu: false,
-          style: {
-            stroke: 'gray',
-            strokeWidth: 1,
-            fill: 'rgba(211,211,211,0.8)'
-          }
-        },
-        {
-          id: 'valid-area',
-          label: 'Valid areas',
-          geojson: `${config.apiPath}/maps/countries.geojson?only=${country}`,
-          showInKey: false,
-          showInMenu: false,
-          style: {
-            stroke: 'rgba(0,112,60,1)',
-            strokeWidth: 1
-          }
+    datasets.push(
+      {
+        id: 'invalid-area',
+        label: 'Invalid areas',
+        geojson: `${config.apiPath}/maps/countries.geojson?omit=${country}`,
+        showInKey: false,
+        showInMenu: false,
+        style: {
+          stroke: 'gray',
+          strokeWidth: 1,
+          fill: 'rgba(211,211,211,0.8)'
         }
-      ]
-    })
-
-    plugins.push(countriesDatasetPlugin)
+      },
+      {
+        id: 'valid-area',
+        label: 'Valid areas',
+        geojson: `${config.apiPath}/maps/countries.geojson?only=${country}`,
+        showInKey: false,
+        showInMenu: false,
+        style: {
+          stroke: 'rgba(0,112,60,1)',
+          strokeWidth: 1
+        }
+      }
+    )
   }
 
   if (mapLayers.includes('sssi')) {
-    plugins.push(createDatasetsPlugin(sssiDataset))
+    datasets.push(...sssiDataset)
+  }
+
+  // Create a map dataset plugin if there are any present
+  if (datasets.length) {
+    plugins.push(createDatasetsPlugin({ datasets }))
   }
 
   const initConfig = {

package/src/client/javascripts/location-map.js

@@ -423,10 +423,16 @@ export function processLocation(config, location, index) {
 
   locationInputs.after(mapContainer)
 
+  const datasets = []
   const mapLayers = getMapLayers(location.dataset.maplayers)
 
   if (mapLayers.includes('sssi')) {
-    initConfig.plugins = [createDatasetsPlugin(sssiDataset)]
+    datasets.push(...sssiDataset)
+  }
+
+  // Create a map dataset plugin if there are any present
+  if (datasets.length) {
+    initConfig.plugins = [createDatasetsPlugin({ datasets })]
   }
 
   const { map, interactPlugin } = createMap(mapId, initConfig, config)

package/src/client/javascripts/maps.js

@@ -0,0 +1,5 @@
+export { initMaps } from './map.js'
+export * as map from './map.js'
+export * as locationMap from './location-map.js'
+export * as geospatialMap from './geospatial-map.js'
+export * as sssiDataset from './sssi-dataset.js'

package/src/client/javascripts/shared.js

@@ -3,9 +3,7 @@ import { initDebounceClick as initDebounceClickImp } from './debounce-click.js'
 import { initFileUpload as initFileUploadImp } from './file-upload.js'
 import { initAllGovuk as initAllGovukImp } from './govuk.js'
 import { initPreviewCloseLink as initPreviewCloseLinkImp } from './preview-close-link.js'
-export { initMaps } from './map.js'
-export * as map from './map.js'
-export * as geospatialMap from './geospatial-map.js'
+export * from './maps.js'
 
 export const initAllGovuk = initAllGovukImp
 export const initAllAutocomplete = initAllAutocompleteImp

package/src/client/javascripts/sssi-dataset.js

@@ -49,49 +49,47 @@ export function sssiScotlandRequestTransformer(url, { bbox }) {
   }
 }
 
-export default {
-  datasets: [
-    {
-      id: 'sssi-england',
-      label: 'Sites of Special Scientific Interest',
-      dynamicGeoJSON: {
-        url: englandWFS,
-        idProperty: 'ref_code',
-        transformRequest: sssiEnglandRequestTransformer
-      },
-      minZoom,
-      style,
-      showInKey: true,
-      showInMenu: false
+export default [
+  {
+    id: 'sssi-england',
+    label: 'Sites of Special Scientific Interest',
+    dynamicGeoJSON: {
+      url: englandWFS,
+      idProperty: 'ref_code',
+      transformRequest: sssiEnglandRequestTransformer
     },
-    {
-      id: 'sssi-wales',
-      label: 'SSSI Wales',
-      dynamicGeoJSON: {
-        url: walesWFS,
-        idProperty: 'id',
-        transformRequest: sssiWalesRequestTransformer
-      },
-      minZoom,
-      style,
-      showInKey: false,
-      showInMenu: false
+    minZoom,
+    style,
+    showInKey: true,
+    showInMenu: false
+  },
+  {
+    id: 'sssi-wales',
+    label: 'SSSI Wales',
+    dynamicGeoJSON: {
+      url: walesWFS,
+      idProperty: 'id',
+      transformRequest: sssiWalesRequestTransformer
     },
-    {
-      id: 'sssi-scotland',
-      label: 'SSSI Scotland',
-      dynamicGeoJSON: {
-        url: scotlandWFS,
-        idProperty: 'OBJECTID',
-        transformRequest: sssiScotlandRequestTransformer
-      },
-      minZoom,
-      style,
-      showInKey: false,
-      showInMenu: false
-    }
-  ]
-}
+    minZoom,
+    style,
+    showInKey: false,
+    showInMenu: false
+  },
+  {
+    id: 'sssi-scotland',
+    label: 'SSSI Scotland',
+    dynamicGeoJSON: {
+      url: scotlandWFS,
+      idProperty: 'OBJECTID',
+      transformRequest: sssiScotlandRequestTransformer
+    },
+    minZoom,
+    style,
+    showInKey: false,
+    showInMenu: false
+  }
+]
 
 /**
  * @typedef {object} TransformRequestOptions

package/src/client/stylesheets/maps.scss

@@ -0,0 +1,4 @@
+@use "@defra/interactive-map/css" as core;
+@use "@defra/interactive-map/plugins/map-styles/css" as mapStyles;
+@use "@defra/interactive-map/plugins/search/css" as search;
+@use "@defra/interactive-map/plugins/scale-bar/css" as scaleBar;

package/src/client/stylesheets/shared.scss

@@ -3,11 +3,7 @@
 @use "prose";
 @use "summary-list";
 @use "location-fields";
-
-@use "@defra/interactive-map/css" as core;
-@use "@defra/interactive-map/plugins/map-styles/css" as mapStyles;
-@use "@defra/interactive-map/plugins/search/css" as search;
-@use "@defra/interactive-map/plugins/scale-bar/css" as scaleBar;
+@use "maps";
 
 // Use default GDS Transport font for autocomplete
 .autocomplete__hint,

package/src/server/constants.js

@@ -5,3 +5,5 @@ export const EXTERNAL_STATE_PAYLOAD = 'EXTERNAL_STATE_PAYLOAD'
 export const EXTERNAL_STATE_APPENDAGE = 'EXTERNAL_STATE_APPENDAGE'
 export const COMPONENT_STATE_ERROR = 'COMPONENT_STATE_ERROR'
 export const PAYMENT_EXPIRED_NOTIFICATION = 'PAYMENT_EXPIRED_NOTIFICATION'
+export const EN_GB = 'en-GB' // English language
+export const CY = 'cy' // Welsh language

package/src/server/plugins/engine/components/AutocompleteField.ts

@@ -1,8 +1,11 @@
 import { type AutocompleteFieldComponent } from '@defra/forms-model'
+import { type LanguageMessages } from 'joi'
 
 import { SelectField } from './SelectField.js'
 import { type RenderContext } from './types.js'
+import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
+import { type Translator } from '../types/index.js'
 
 export class AutocompleteField extends SelectField {
   declare options: AutocompleteFieldComponent['options']
@@ -45,4 +48,14 @@ export class AutocompleteField extends SelectField {
       formGroup
     }
   }
+
+  getValidationMessagesOverride(translator: Translator) {
+    const { t } = translator
+    return {
+      [this.name]: {
+        'any.required': buildValidationMessages(t).objectRequired,
+        'any.only': buildValidationMessages(t).objectRequired
+      } as LanguageMessages
+    }
+  }
 }

package/src/server/plugins/engine/components/CheckboxesField.ts

@@ -1,8 +1,9 @@
 import { type CheckboxesFieldComponent, type Item } from '@defra/forms-model'
-import joi, { type ArraySchema } from 'joi'
+import joi, { type ArraySchema, type LanguageMessages } from 'joi'
 
 import { isFormValue } from './FormComponent.js'
 import { SelectionControlField } from './SelectionControlField.js'
+import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { type Translator } from '../i18n/types.js'
 import { type FormModel } from '../models/FormModel.js'
 import { type QuestionPageController } from '../pageControllers/QuestionPageController.js'
@@ -133,6 +134,17 @@ export class CheckboxesField extends SelectionControlField {
     return this.getContextValueFromFormValue(values)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const { t } = translator
+    return {
+      [this.name]: {
+        'array.min': buildValidationMessages(t).arrayMin,
+        'array.max': buildValidationMessages(t).arrayMax,
+        'array.length': buildValidationMessages(t).arrayLength
+      } as LanguageMessages
+    }
+  }
+
   /**
    * For error preview page that shows all possible errors on a component
    */

package/src/server/plugins/engine/components/ComponentBase.ts

@@ -28,6 +28,7 @@ export class ComponentBase {
 
   isFormComponent = false
   model: FormModel
+  def: ComponentDef
 
   /** joi schemas based on a component defined in the form JSON. This validates a user's answer and is generated from {@link ComponentDef} */
   formSchema: ComponentSchema = joi.string()
@@ -45,6 +46,7 @@ export class ComponentBase {
     this.type = def.type
     this.name = def.name
     this.title = def.title
+    this.def = def
 
     if ('schema' in def) {
       this.schema = def.schema

package/src/server/plugins/engine/components/ComponentCollection.ts

@@ -15,6 +15,7 @@ import {
   type Field,
   type Guidance
 } from './helpers/components.js'
+import { getTranslatedLabel } from './helpers/index.js'
 import {
   type ComponentViewModel,
   type RenderContext
@@ -302,26 +303,28 @@ export class ComponentCollection {
           for (const subField of field.collection.fields) {
             const translatedSubLabel = t(subField.title) || subField.label
             let patchedSchema = subField.formSchema.label(translatedSubLabel)
-            if (messagesOverride) {
-              patchedSchema = patchedSchema.messages(messagesOverride)
+            const subFieldMessages = messagesOverride
+              ? messagesOverride[subField.name]
+              : undefined
+            if (subFieldMessages) {
+              patchedSchema = patchedSchema.messages(subFieldMessages)
             }
             labelOverrides[subField.name] = patchedSchema
           }
         } else {
-          const translatedLabel =
-            translator.tComponent(
-              field as unknown as ComponentDef,
-              'shortDescription'
-            ) ||
-            translator.tComponent(field as unknown as ComponentDef, 'title')
+          const fieldDef = field.def
+          const translatedLabel = getTranslatedLabel(fieldDef, translator)
           const messagesOverride =
             field.getValidationMessagesOverride(translator)
           let patchedSchema = field.formSchema
           if (translatedLabel && translatedLabel !== field.label) {
             patchedSchema = patchedSchema.label(translatedLabel)
           }
-          if (messagesOverride) {
-            patchedSchema = patchedSchema.messages(messagesOverride)
+          const fieldMessages = messagesOverride
+            ? messagesOverride[field.name]
+            : undefined
+          if (fieldMessages) {
+            patchedSchema = patchedSchema.messages(fieldMessages)
           }
           if (patchedSchema !== field.formSchema) {
             labelOverrides[field.name] = patchedSchema
@@ -340,10 +343,12 @@ export class ComponentCollection {
     })
 
     const details = result.error?.details
+    const language = translator?.language
 
     return {
       value: (result.value ?? {}) as typeof value,
-      errors: this.page?.getErrors(details) ?? getErrors(details)
+      errors:
+        this.page?.getErrors(details, language) ?? getErrors(language, details)
     }
   }
 

package/src/server/plugins/engine/components/DatePartsField.ts

@@ -1,6 +1,11 @@
 import { ComponentType, type DatePartsFieldComponent } from '@defra/forms-model'
 import { add, format, isValid, parse, startOfToday, sub } from 'date-fns'
-import { type Context, type CustomValidator, type ObjectSchema } from 'joi'
+import {
+  type Context,
+  type CustomValidator,
+  type LanguageMessages,
+  type ObjectSchema
+} from 'joi'
 
 import { ComponentCollection } from './ComponentCollection.js'
 import {
@@ -25,7 +30,7 @@ import {
   type FormStateValue,
   type FormSubmissionState
 } from '../types.js'
-import { convertToLanguageMessages } from '../../../utils/type-utils.js'
+import { formatDateForLanguage } from '../../payment/helper.js'
 
 export class DatePartsField extends FormComponent {
   declare options: DatePartsFieldComponent['options']
@@ -43,7 +48,7 @@ export class DatePartsField extends FormComponent {
 
     const isRequired = options.required !== false
 
-    const customValidationMessages = convertToLanguageMessages({
+    const customValidationMessages = {
       'any.required': messageTemplate.objectMissing,
       'number.base': messageTemplate.objectMissing,
       'number.precision': messageTemplate.dateFormat,
@@ -51,7 +56,7 @@ export class DatePartsField extends FormComponent {
       'number.unsafe': messageTemplate.dateFormat,
       'number.min': messageTemplate.dateFormat,
       'number.max': messageTemplate.dateFormat
-    })
+    } as LanguageMessages
 
     this.collection = new ComponentCollection(
       [
@@ -111,15 +116,16 @@ export class DatePartsField extends FormComponent {
 
   getDisplayStringFromFormValue(
     formValue: DatePartsState | undefined,
-    _translator: Translator
+    translator: Translator
   ) {
     if (!formValue) {
       return ''
     }
 
-    return format(
+    return formatDateForLanguage(
       `${formValue.year}-${formValue.month}-${formValue.day}`,
-      'd MMMM yyyy'
+      'd MMMM yyyy',
+      translator.language
     )
   }
 
@@ -158,7 +164,7 @@ export class DatePartsField extends FormComponent {
 
   getValidationMessagesOverride(translator: Translator) {
     const { t } = translator
-    return convertToLanguageMessages({
+    const messages = {
       'any.required': buildValidationMessages(t).objectMissing,
       'number.base': buildValidationMessages(t).objectMissing,
       'number.precision': buildValidationMessages(t).dateFormat,
@@ -166,7 +172,12 @@ export class DatePartsField extends FormComponent {
       'number.unsafe': buildValidationMessages(t).dateFormat,
       'number.min': buildValidationMessages(t).dateFormat,
       'number.max': buildValidationMessages(t).dateFormat
-    })
+    } as LanguageMessages
+    return {
+      [`${this.name}__day`]: messages,
+      [`${this.name}__month`]: messages,
+      [`${this.name}__year`]: messages
+    }
   }
 
   getViewModel(context: RenderContext) {

package/src/server/plugins/engine/components/DeclarationField.ts

@@ -2,7 +2,6 @@ import {
   ComponentType,
   hasFormComponents,
   isFormType,
-  type ComponentDef,
   type DeclarationFieldComponent,
   type Item
 } from '@defra/forms-model'
@@ -121,10 +120,12 @@ export class DeclarationField extends FormComponent {
     const { declarationRequired } = buildValidationMessages(translator.t)
     const msg = declarationRequired as unknown as string
     return {
-      'any.required': msg,
-      'any.unknown': msg,
-      'array.includesRequiredUnknowns': msg
-    } as unknown as LanguageMessages
+      [this.name]: {
+        'any.required': msg,
+        'any.unknown': msg,
+        'array.includesRequiredUnknowns': msg
+      } as unknown as LanguageMessages
+    }
   }
 
   getDisplayStringFromFormValue(
@@ -148,7 +149,7 @@ export class DeclarationField extends FormComponent {
         'components.declarationField.defaultLabel'
       )
     } = this
-    const content = tComponent(this as unknown as ComponentDef, 'content')
+    const content = tComponent(this.def, 'content')
 
     const viewModel = super.getViewModel(context)
     let { fieldset, label } = viewModel