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

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

@@ -15,7 +15,10 @@ import {
   getLocationFieldViewModel
 } from './LocationFieldHelpers.js'
 import { NumberField } from './NumberField.js'
-import { createLowerFirstExpression } from './helpers/index.js'
+import {
+  createLowerFirstExpression,
+  getTranslatedLabel
+} from './helpers/index.js'
 import {
   type EastingNorthingState,
   type RenderContext
@@ -31,7 +34,6 @@ import {
   type FormSubmissionError,
   type FormSubmissionState
 } from '../types.js'
-import { convertToLanguageMessages } from '../../../utils/type-utils.js'
 
 // British National Grid coordinate limits
 const DEFAULT_EASTING_MIN = 0
@@ -55,89 +57,18 @@ export class EastingNorthingField extends FormComponent {
 
     const isRequired = options.required !== false
 
-    const eastingMin = schema?.easting?.min ?? DEFAULT_EASTING_MIN
-    const eastingMax = schema?.easting?.max ?? DEFAULT_EASTING_MAX
-    const northingMin = schema?.northing?.min ?? DEFAULT_NORTHING_MIN
-    const northingMax = schema?.northing?.max ?? DEFAULT_NORTHING_MAX
-
-    const fieldLabel = lowerFirst(this.label)
+    const { eastingMin, eastingMax, northingMin, northingMax } =
+      EastingNorthingField.getMinMax(schema)
 
-    const eastingDigitsMessage = tPlugin(
-      'components.eastingNorthingField.eastingDigits',
-      'en-GB',
-      { fieldLabel }
-    )
-    const northingDigitsMessage = tPlugin(
-      'components.eastingNorthingField.northingDigits',
-      'en-GB',
-      { fieldLabel }
-    )
-
-    const customValidationMessages: LanguageMessages =
-      convertToLanguageMessages({
-        'any.required': tPlugin(
-          'components.eastingNorthingField.eastingRequired',
-          'en-GB'
-        ),
-        'number.base': tPlugin(
-          'components.eastingNorthingField.eastingRequired',
-          'en-GB'
-        ),
-        'number.min': tPlugin(
-          'components.eastingNorthingField.eastingRange',
-          'en-GB',
-          {
-            fieldLabel,
-            min: eastingMin,
-            max: eastingMax
-          }
-        ),
-        'number.max': tPlugin(
-          'components.eastingNorthingField.eastingRange',
-          'en-GB',
-          {
-            fieldLabel,
-            min: eastingMin,
-            max: eastingMax
-          }
-        ),
-        'number.precision': eastingDigitsMessage,
-        'number.integer': eastingDigitsMessage,
-        'number.unsafe': eastingDigitsMessage
-      })
-
-    const northingValidationMessages: LanguageMessages =
-      convertToLanguageMessages({
-        'any.required': tPlugin(
-          'components.eastingNorthingField.northingRequired',
-          'en-GB'
-        ),
-        'number.base': tPlugin(
-          'components.eastingNorthingField.northingRequired',
-          'en-GB'
-        ),
-        'number.min': tPlugin(
-          'components.eastingNorthingField.northingRange',
-          'en-GB',
-          {
-            fieldLabel,
-            min: northingMin,
-            max: northingMax
-          }
-        ),
-        'number.max': tPlugin(
-          'components.eastingNorthingField.northingRange',
-          'en-GB',
-          {
-            fieldLabel,
-            min: northingMin,
-            max: northingMax
-          }
-        ),
-        'number.precision': northingDigitsMessage,
-        'number.integer': northingDigitsMessage,
-        'number.unsafe': northingDigitsMessage
-      })
+    const { eastingValidationMessages, northingValidationMessages } =
+      EastingNorthingField.buildErrorMessages(
+        this.label,
+        eastingMin,
+        eastingMax,
+        northingMin,
+        northingMax,
+        'en-GB'
+      )
 
     this.collection = new ComponentCollection(
       [
@@ -154,7 +85,7 @@ export class EastingNorthingField extends FormComponent {
             required: isRequired,
             optionalText: true,
             classes: 'govuk-input--width-10',
-            customValidationMessages
+            customValidationMessages: eastingValidationMessages
           }
         },
         {
@@ -192,14 +123,15 @@ export class EastingNorthingField extends FormComponent {
 
   getDisplayStringFromFormValue(
     value: EastingNorthingState | undefined,
-    _translator: Translator
+    translator: Translator
   ): string {
     if (!value) {
       return ''
     }
 
-    // CYA page format: <<eastingvalue, northingvalue>>
-    return `${value.easting}, ${value.northing}`
+    const { t } = translator
+
+    return `${t('components.eastingNorthingField.easting')}: ${value.easting}\n${t('components.eastingNorthingField.northing')}: ${value.northing}`
   }
 
   getDisplayStringFromState(
@@ -218,7 +150,7 @@ export class EastingNorthingField extends FormComponent {
       return null
     }
 
-    return `Easting: ${value.easting}\nNorthing: ${value.northing}`
+    return `${value.easting}, ${value.northing}`
   }
 
   getContextValueFromState(state: FormSubmissionState) {
@@ -244,6 +176,26 @@ export class EastingNorthingField extends FormComponent {
     return EastingNorthingField.isEastingNorthing(value)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const def = this.def as EastingNorthingFieldComponent
+    const translatedLabel = getTranslatedLabel(def, translator)
+    const { eastingMin, eastingMax, northingMin, northingMax } =
+      EastingNorthingField.getMinMax(def.schema)
+    const { eastingValidationMessages, northingValidationMessages } =
+      EastingNorthingField.buildErrorMessages(
+        translatedLabel,
+        eastingMin,
+        eastingMax,
+        northingMin,
+        northingMax,
+        translator.language
+      )
+    return {
+      [`${this.name}__easting`]: eastingValidationMessages,
+      [`${this.name}__northing`]: northingValidationMessages
+    }
+  }
+
   /**
    * For error preview page that shows all possible errors on a component
    */
@@ -309,4 +261,117 @@ export class EastingNorthingField extends FormComponent {
       NumberField.isNumber(value.northing)
     )
   }
+
+  static buildErrorMessages(
+    label: string,
+    eastingMin: number,
+    eastingMax: number,
+    northingMin: number,
+    northingMax: number,
+    language: string
+  ) {
+    const fieldLabel = lowerFirst(label)
+
+    const eastingDigitsMessage = tPlugin(
+      'components.eastingNorthingField.eastingDigits',
+      language,
+      { fieldLabel }
+    )
+    const northingDigitsMessage = tPlugin(
+      'components.eastingNorthingField.northingDigits',
+      language,
+      { fieldLabel }
+    )
+
+    const eastingValidationMessages: LanguageMessages = {
+      'any.required': tPlugin(
+        'components.eastingNorthingField.eastingRequired',
+        language
+      ),
+      'number.base': tPlugin(
+        'components.eastingNorthingField.eastingRequired',
+        language
+      ),
+      'number.min': tPlugin(
+        'components.eastingNorthingField.eastingRange',
+        language,
+        {
+          fieldLabel,
+          min: eastingMin,
+          max: eastingMax
+        }
+      ),
+      'number.max': tPlugin(
+        'components.eastingNorthingField.eastingRange',
+        language,
+        {
+          fieldLabel,
+          min: eastingMin,
+          max: eastingMax
+        }
+      ),
+      'number.precision': eastingDigitsMessage,
+      'number.integer': eastingDigitsMessage,
+      'number.unsafe': eastingDigitsMessage
+    }
+
+    const northingValidationMessages: LanguageMessages = {
+      'any.required': tPlugin(
+        'components.eastingNorthingField.northingRequired',
+        language
+      ),
+      'number.base': tPlugin(
+        'components.eastingNorthingField.northingRequired',
+        language
+      ),
+      'number.min': tPlugin(
+        'components.eastingNorthingField.northingRange',
+        language,
+        {
+          fieldLabel,
+          min: northingMin,
+          max: northingMax
+        }
+      ),
+      'number.max': tPlugin(
+        'components.eastingNorthingField.northingRange',
+        language,
+        {
+          fieldLabel,
+          min: northingMin,
+          max: northingMax
+        }
+      ),
+      'number.precision': northingDigitsMessage,
+      'number.integer': northingDigitsMessage,
+      'number.unsafe': northingDigitsMessage
+    }
+    return {
+      eastingValidationMessages,
+      northingValidationMessages
+    }
+  }
+
+  // Read schema values from def.schema with fallback defaults
+  static getMinMax(
+    schema:
+      | {
+          easting?: {
+            min?: number
+            max?: number
+          }
+          northing?: {
+            min?: number
+            max?: number
+          }
+        }
+      | undefined
+  ) {
+    return {
+      eastingMin: schema?.easting?.min ?? DEFAULT_EASTING_MIN,
+      eastingMax: schema?.easting?.max ?? DEFAULT_EASTING_MAX,
+      northingMin: schema?.northing?.min ?? DEFAULT_NORTHING_MIN,
+      northingMax: schema?.northing?.max ?? DEFAULT_NORTHING_MAX
+    }
+  }
 }

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

@@ -40,7 +40,8 @@ export class EmailAddressField extends FormComponent {
       formSchema = formSchema.messages({
         'any.required': message,
         'string.empty': message,
-        'string.email': message
+        'string.email': message,
+        'string.unicode': message
       })
     } else if (options.customValidationMessages) {
       formSchema = formSchema.messages(options.customValidationMessages)

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

@@ -5,11 +5,13 @@ import {
 import Boom from '@hapi/boom'
 import joi, { type ArraySchema } from 'joi'
 
+import { EN_GB } from '../../../constants.js'
 import {
   FormComponent,
   isUploadState
 } from './FormComponent.js'
 import { type RenderContext } from './types.js'
+import { t as tPlugin } from '../i18n/index.js'
 import { type Translator } from '../i18n/types.js'
 import { InvalidComponentStateError } from '../pageControllers/errors.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
@@ -142,6 +144,8 @@ export class FileUploadField extends FormComponent {
       formSchema = formSchema.length(schema.length)
     }
 
+    formSchema = formSchema.messages(FileUploadField.buildErrorMessages(EN_GB))
+
     this.formSchema = formSchema.items(formItemSchema)
     this.stateSchema = formSchema
       .items(formItemSchema)
@@ -169,7 +173,7 @@ export class FileUploadField extends FormComponent {
       return ''
     }
 
-    return translator.t('components.fileUploadField.filesCount', {
+    return translator.t('pages.summary.fileUpload', {
       count: files.length
     })
   }
@@ -244,7 +248,7 @@ export class FileUploadField extends FormComponent {
 
         items.push({
           href,
-          text: 'Remove',
+          text: t('pages.fileUpload.remove'),
           classes: 'govuk-link--no-visited-state',
           attributes: { id: `${id}__${index}` },
           visuallyHiddenText: file.filename
@@ -300,6 +304,13 @@ export class FileUploadField extends FormComponent {
     return isUploadState(value)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const { language } = translator
+    return {
+      [this.name]: FileUploadField.buildErrorMessages(language)
+    }
+  }
+
   /**
    * For error preview page that shows all possible errors on a component
    */
@@ -403,4 +414,12 @@ export class FileUploadField extends FormComponent {
       ]
     }
   }
+
+  static buildErrorMessages(language: string) {
+    return {
+      'array.min': tPlugin('validation.filesMin', language),
+      'array.max': tPlugin('validation.filesMax', language),
+      'array.length': tPlugin('validation.filesLength', language)
+    }
+  }
 }

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

@@ -1,5 +1,4 @@
 import {
-  type ComponentDef,
   type FormComponentsDef,
   type FormMetadata,
   type Item
@@ -158,10 +157,13 @@ export class FormComponent extends ComponentBase {
    * Override in composite fields to return translated Joi message overrides for
    * their sub-fields, applied at validation time so schema-level English messages
    * are replaced with the correct language. Return null to skip message patching.
+   * The return object may contain message overrides at component-level, or sub-field-level.
+   * This would allow different error message overrides per field within a collection e.g.
+   * for EastingNothingField
    */
   getValidationMessagesOverride(
     _translator: Translator
-  ): LanguageMessages | null {
+  ): Record<string, LanguageMessages> | null {
     return null
   }
 
@@ -178,15 +180,14 @@ export class FormComponent extends ComponentBase {
     const isRequired = !('required' in options) || options.required !== false
     const hideOptional = 'optionalText' in options && options.optionalText
 
-    const resolvedTitle =
-      tComponent(this as unknown as ComponentDef, 'title') || title
+    const resolvedTitle = tComponent(this.def, 'title') || title
     const optionalTag =
       !isRequired && !hideOptional ? ` ${t('common.optional')}` : ''
     const label = `${resolvedTitle}${optionalTag}`
 
     if (hint) {
       viewModel.hint = {
-        text: tComponent(this as unknown as ComponentDef, 'hint') || hint
+        text: tComponent(this.def, 'hint') || hint
       }
     }
 

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

@@ -125,7 +125,12 @@ export class GeospatialField extends FormComponent {
         err.href = `#description_${err.path[1]}`
         err.text = translator.t(
           'components.geospatialField.validation.wrongCountry',
-          { count: Number(err.path[1]) + 1, country: err.context.country }
+          {
+            count: Number(err.path[1]) + 1,
+            country: translator.t(
+              `common.${(err.context.country as string).toLowerCase()}`
+            )
+          }
         )
       }
     })

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

@@ -12,7 +12,10 @@ import {
   getLocationFieldViewModel
 } from './LocationFieldHelpers.js'
 import { NumberField } from './NumberField.js'
-import { createLowerFirstExpression } from './helpers/index.js'
+import {
+  createLowerFirstExpression,
+  getTranslatedLabel
+} from './helpers/index.js'
 import {
   type LatLongState,
   type RenderContext
@@ -28,7 +31,6 @@ import {
   type FormSubmissionError,
   type FormSubmissionState
 } from '../types.js'
-import { convertToLanguageMessages } from '../../../utils/type-utils.js'
 
 // Precision constants
 // UK latitude/longitude requires high precision for accurate location (within ~11mm)
@@ -50,59 +52,18 @@ export class LatLongField extends FormComponent {
 
     const isRequired = options.required !== false
 
-    // Read schema values from def.schema with fallback defaults
-    const latitudeMin = schema?.latitude?.min ?? 49.85
-    const latitudeMax = schema?.latitude?.max ?? 60.859
-    const longitudeMin = schema?.longitude?.min ?? -13.687
-    const longitudeMax = schema?.longitude?.max ?? 1.767
-
-    const fieldLabel = lowerFirst(this.label)
-
-    const customValidationMessages: LanguageMessages =
-      convertToLanguageMessages({
-        'number.precision': tPlugin(
-          'components.latLongField.precision',
-          'en-GB'
-        ),
-        'number.unsafe': tPlugin('components.latLongField.notANumber', 'en-GB')
-      })
-
-    const latitudeRangeMessage = tPlugin(
-      'components.latLongField.latitudeRange',
-      'en-GB',
-      { fieldLabel, min: latitudeMin, max: latitudeMax }
-    )
-    const longitudeRangeMessage = tPlugin(
-      'components.latLongField.longitudeRange',
-      'en-GB',
-      { fieldLabel, min: longitudeMin, max: longitudeMax }
-    )
-
-    const latitudeMessages: LanguageMessages = convertToLanguageMessages({
-      ...customValidationMessages,
-      'any.required': tPlugin(
-        'components.latLongField.latitudeRequired',
-        'en-GB'
-      ),
-      'number.base': tPlugin('components.latLongField.latitudeBase', 'en-GB', {
-        fieldLabel
-      }),
-      'number.min': latitudeRangeMessage,
-      'number.max': latitudeRangeMessage
-    })
+    const { latitudeMin, latitudeMax, longitudeMin, longitudeMax } =
+      LatLongField.getMinMax(schema)
 
-    const longitudeMessages: LanguageMessages = convertToLanguageMessages({
-      ...customValidationMessages,
-      'any.required': tPlugin(
-        'components.latLongField.longitudeRequired',
+    const { latitudeMessages, longitudeMessages } =
+      LatLongField.buildErrorMessages(
+        this.label,
+        latitudeMin,
+        latitudeMax,
+        longitudeMin,
+        longitudeMax,
         'en-GB'
-      ),
-      'number.base': tPlugin('components.latLongField.longitudeBase', 'en-GB', {
-        fieldLabel
-      }),
-      'number.min': longitudeRangeMessage,
-      'number.max': longitudeRangeMessage
-    })
+      )
 
     this.collection = new ComponentCollection(
       [
@@ -159,14 +120,16 @@ export class LatLongField extends FormComponent {
 
   getDisplayStringFromFormValue(
     value: LatLongState | undefined,
-    _translator: Translator
+    translator: Translator
   ): string {
     if (!value) {
       return ''
     }
 
-    // CYA page format: <<latvalue, langvalue>>
-    return `${value.latitude}, ${value.longitude}`
+    const { t } = translator
+
+    // Output format: Latitude: <<entry>>\nLongitude: <<entry>>
+    return `${t('components.latLongField.latitude')}: ${value.latitude}\n${t('components.latLongField.longitude')}: ${value.longitude}`
   }
 
   getDisplayStringFromState(
@@ -183,8 +146,7 @@ export class LatLongField extends FormComponent {
       return null
     }
 
-    // Output format: Latitude: <<entry>>\nLongitude: <<entry>>
-    return `Latitude: ${value.latitude}\nLongitude: ${value.longitude}`
+    return `${value.latitude}, ${value.longitude}`
   }
 
   getContextValueFromState(state: FormSubmissionState) {
@@ -210,6 +172,26 @@ export class LatLongField extends FormComponent {
     return LatLongField.isLatLong(value)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const def = this.def as LatLongFieldComponent
+    const translatedLabel = getTranslatedLabel(def, translator)
+    const { latitudeMin, latitudeMax, longitudeMin, longitudeMax } =
+      LatLongField.getMinMax(def.schema)
+    const { latitudeMessages, longitudeMessages } =
+      LatLongField.buildErrorMessages(
+        translatedLabel,
+        latitudeMin,
+        latitudeMax,
+        longitudeMin,
+        longitudeMax,
+        translator.language
+      )
+    return {
+      [`${this.name}__latitude`]: latitudeMessages,
+      [`${this.name}__longitude`]: longitudeMessages
+    }
+  }
+
   /**
    * For error preview page that shows all possible errors on a component
    */
@@ -273,4 +255,92 @@ export class LatLongField extends FormComponent {
       NumberField.isNumber(value.longitude)
     )
   }
+
+  static buildErrorMessages(
+    label: string,
+    latitudeMin: number,
+    latitudeMax: number,
+    longitudeMin: number,
+    longitudeMax: number,
+    language: string
+  ) {
+    const fieldLabel = lowerFirst(label)
+
+    const customValidationMessages: LanguageMessages = {
+      'number.precision': tPlugin(
+        'components.latLongField.precision',
+        language
+      ),
+      'number.unsafe': tPlugin('components.latLongField.notANumber', language)
+    }
+
+    const latitudeRangeMessage = tPlugin(
+      'components.latLongField.latitudeRange',
+      language,
+      { fieldLabel, min: latitudeMin, max: latitudeMax }
+    )
+    const longitudeRangeMessage = tPlugin(
+      'components.latLongField.longitudeRange',
+      language,
+      { fieldLabel, min: longitudeMin, max: longitudeMax }
+    )
+
+    const latitudeMessages: LanguageMessages = {
+      ...customValidationMessages,
+      'any.required': tPlugin(
+        'components.latLongField.latitudeRequired',
+        language
+      ),
+      'number.base': tPlugin('components.latLongField.latitudeBase', language, {
+        fieldLabel
+      }),
+      'number.min': latitudeRangeMessage,
+      'number.max': latitudeRangeMessage
+    }
+
+    const longitudeMessages: LanguageMessages = {
+      ...customValidationMessages,
+      'any.required': tPlugin(
+        'components.latLongField.longitudeRequired',
+        language
+      ),
+      'number.base': tPlugin(
+        'components.latLongField.longitudeBase',
+        language,
+        {
+          fieldLabel
+        }
+      ),
+      'number.min': longitudeRangeMessage,
+      'number.max': longitudeRangeMessage
+    }
+
+    return {
+      latitudeMessages,
+      longitudeMessages
+    }
+  }
+
+  // Read schema values from def.schema with fallback defaults
+  static getMinMax(
+    schema:
+      | {
+          latitude?: {
+            min?: number
+            max?: number
+          }
+          longitude?: {
+            min?: number
+            max?: number
+          }
+        }
+      | undefined
+  ) {
+    return {
+      latitudeMin: schema?.latitude?.min ?? 49.85,
+      latitudeMax: schema?.latitude?.max ?? 60.859,
+      longitudeMin: schema?.longitude?.min ?? -13.687,
+      longitudeMax: schema?.longitude?.max ?? 1.767
+    }
+  }
 }