@defra/forms-engine-plugin 5.0.0-alpha.3 → 5.0.0-alpha.30

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
@@ -258,10 +259,7 @@ export class ComponentCollection {
 
         // Update error with parent title
         if (translator && parent) {
-          error.local.title ??= translator.tComponent(
-            parent as ComponentDef,
-            'title'
-          )
+          error.local.title ??= getTranslatedLabel(parent.def, translator)
         } else {
           error.local.title ??= parent?.label
         }
@@ -302,26 +300,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 +340,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,15 +2,13 @@ import {
   ComponentType,
   hasFormComponents,
   isFormType,
-  type ComponentDef,
   type DeclarationFieldComponent,
   type Item
 } from '@defra/forms-model'
 import joi, {
   type ArraySchema,
   type BooleanSchema,
-  type LanguageMessages,
-  type StringSchema
+  type LanguageMessages
 } from 'joi'
 
 import {
@@ -35,7 +33,7 @@ export class DeclarationField extends FormComponent {
 
   declare declarationConfirmationLabel: string | undefined
 
-  declare formSchema: ArraySchema<StringSchema[]>
+  declare formSchema: ArraySchema<string[]>
   declare stateSchema: BooleanSchema
   declare content: string
   headerStartLevel: number
@@ -64,7 +62,7 @@ export class DeclarationField extends FormComponent {
         'any.unknown': messageTemplate.declarationRequired as string,
         'array.includesRequiredUnknowns':
           messageTemplate.declarationRequired as string
-      }) as ArraySchema<StringSchema[]>
+      })
 
     this.formSchema = formSchema
     this.stateSchema = joi.boolean().cast('string').label(this.label).required()
@@ -121,10 +119,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 +148,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

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

@@ -15,7 +15,11 @@ import {
   getLocationFieldViewModel
 } from './LocationFieldHelpers.js'
 import { NumberField } from './NumberField.js'
-import { createLowerFirstExpression } from './helpers/index.js'
+import { getEastingNorthingCountryValidator } from './helpers/geospatial.js'
+import {
+  createLowerFirstExpression,
+  getTranslatedLabel
+} from './helpers/index.js'
 import {
   type EastingNorthingState,
   type RenderContext
@@ -31,7 +35,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 +58,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 +86,7 @@ export class EastingNorthingField extends FormComponent {
             required: isRequired,
             optionalText: true,
             classes: 'govuk-input--width-10',
-            customValidationMessages
+            customValidationMessages: eastingValidationMessages
           }
         },
         {
@@ -181,6 +113,18 @@ export class EastingNorthingField extends FormComponent {
     )
 
     this.options = options
+
+    const country = options.countries?.at(0)
+
+    if (country) {
+      this.collection.formSchema = this.collection.formSchema.custom(
+        getEastingNorthingCountryValidator(this, country)
+      )
+      this.collection.stateSchema = this.collection.stateSchema.custom(
+        getEastingNorthingCountryValidator(this, country)
+      )
+    }
+
     this.formSchema = this.collection.formSchema
     this.stateSchema = this.collection.stateSchema
   }
@@ -192,14 +136,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 +163,7 @@ export class EastingNorthingField extends FormComponent {
       return null
     }
 
-    return `Easting: ${value.easting}\nNorthing: ${value.northing}`
+    return `${value.easting}, ${value.northing}`
   }
 
   getContextValueFromState(state: FormSubmissionState) {
@@ -232,6 +177,24 @@ export class EastingNorthingField extends FormComponent {
     return getLocationFieldViewModel(this, viewModel, context)
   }
 
+  getErrors(
+    translator: Translator,
+    errors?: FormSubmissionError[]
+  ): FormSubmissionError[] | undefined {
+    const fieldErrors = super.getErrors(translator, errors)
+
+    fieldErrors?.forEach((err) => {
+      if (err.context?.country) {
+        err.text = translator.t(
+          'components.eastingNorthingField.wrongCountry',
+          { country: translator.t(`common.${err.context.country}`) }
+        )
+      }
+    })
+
+    return fieldErrors
+  }
+
   getViewErrors(
     translator: Translator,
     errors?: FormSubmissionError[]
@@ -244,6 +207,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 +292,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'
@@ -50,7 +52,9 @@ export const tempFileSchema = fileSchema.append({
     .string()
     .valid(FileStatus.complete, FileStatus.rejected, FileStatus.pending)
     .required(),
-  errorMessage: joi.string().optional()
+  errorMessage: joi.string().optional(),
+  errorCode: joi.string().optional(),
+  errorParams: joi.any().optional()
 })
 
 export const formFileSchema = fileSchema.append({
@@ -107,8 +111,9 @@ export const formItemSchema = itemSchema.append({
 export class FileUploadField extends FormComponent {
   declare options: FileUploadFieldComponent['options']
   declare schema: FileUploadFieldComponent['schema']
-  declare formSchema: ArraySchema<FileState>
-  declare stateSchema: ArraySchema<FileState>
+  declare formSchema: ArraySchema<FileState[]>
+  declare stateSchema: ArraySchema<FileState[]>
+  declare limits: { min?: number; max?: number; length?: number }
 
   constructor(
     def: FileUploadFieldComponent,
@@ -128,20 +133,32 @@ export class FileUploadField extends FormComponent {
       formSchema = formSchema.optional()
     }
 
+    const limits: { min?: number; max?: number; length?: number } = {}
+
     if (typeof schema.length !== 'number') {
       if (typeof schema.max === 'number') {
         formSchema = formSchema.max(schema.max)
+        limits.max = schema.max
       }
 
       if (typeof schema.min === 'number') {
         formSchema = formSchema.min(schema.min)
+        limits.min = schema.min
       } else if (options.required !== false) {
         formSchema = formSchema.min(1)
+        limits.min = 1
       }
     } else {
       formSchema = formSchema.length(schema.length)
+      limits.length = schema.length
     }
 
+    this.limits = limits
+
+    formSchema = formSchema.messages(
+      FileUploadField.buildErrorMessages(EN_GB, limits)
+    )
+
     this.formSchema = formSchema.items(formItemSchema)
     this.stateSchema = formSchema
       .items(formItemSchema)
@@ -169,7 +186,7 @@ export class FileUploadField extends FormComponent {
       return ''
     }
 
-    return translator.t('components.fileUploadField.filesCount', {
+    return translator.t('pages.summary.fileUpload', {
       count: files.length
     })
   }
@@ -244,7 +261,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 +317,13 @@ export class FileUploadField extends FormComponent {
     return isUploadState(value)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const { language } = translator
+    return {
+      [this.name]: FileUploadField.buildErrorMessages(language, this.limits)
+    }
+  }
+
   /**
    * For error preview page that shows all possible errors on a component
    */
@@ -403,4 +427,21 @@ export class FileUploadField extends FormComponent {
       ]
     }
   }
+
+  static buildErrorMessages(
+    language: string,
+    limits: { min?: number; max?: number; length?: number } = {}
+  ) {
+    return {
+      'array.min': tPlugin('validation.filesMin', language, {
+        count: limits.min ?? 1
+      }),
+      'array.max': tPlugin('validation.filesMax', language, {
+        count: limits.max ?? 1
+      }),
+      'array.length': tPlugin('validation.filesLength', language, {
+        count: limits.length ?? 1
+      })
+    }
+  }
 }