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

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

@@ -1,6 +1,7 @@
-import { type MarkdownComponent } from '@defra/forms-model'
+import { type ComponentDef, type MarkdownComponent } from '@defra/forms-model'
 
 import { ComponentBase } from './ComponentBase.js'
+import { type RenderContext } from './types.js'
 
 export class Markdown extends ComponentBase {
   declare options: MarkdownComponent['options']
@@ -20,12 +21,15 @@ export class Markdown extends ComponentBase {
     this.headerStartLevel = 2
   }
 
-  getViewModel() {
+  getViewModel(context: RenderContext) {
     const { content, viewModel } = this
 
+    const { tComponent } = context.translator
+
     return {
       ...viewModel,
-      content,
+      content:
+        tComponent(this as unknown as ComponentDef, 'content') || content,
       headerStartLevel: this.headerStartLevel
     }
   }

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

@@ -16,16 +16,18 @@ import {
 import { NumberField } from './NumberField.js'
 import {
   type DateInputItem,
-  type MonthYearState
+  type MonthYearState,
+  type RenderContext
 } from './types.js'
 import { parseStrictDate } from '../date-helper.js'
+import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
+import { type Translator } from '../i18n/types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
 import {
   type ErrorMessageTemplateList,
   type FormPayload,
   type FormState,
   type FormStateValue,
-  type FormSubmissionError,
   type FormSubmissionState
 } from '../types.js'
 import { convertToLanguageMessages } from '../../../utils/type-utils.js'
@@ -62,7 +64,7 @@ export class MonthYearField extends FormComponent {
         {
           type: ComponentType.NumberField,
           name: `${name}__month`,
-          title: 'Month',
+          title: 'components.monthYearField.month',
           schema: { min: 1, max: 12, precision: 0 },
           options: {
             required: isRequired,
@@ -74,7 +76,7 @@ export class MonthYearField extends FormComponent {
         {
           type: ComponentType.NumberField,
           name: `${name}__year`,
-          title: 'Year',
+          title: 'components.monthYearField.year',
           schema: { min: 1000, max: 3000, precision: 0 },
           options: {
             required: isRequired,
@@ -101,7 +103,10 @@ export class MonthYearField extends FormComponent {
     return MonthYearField.isMonthYear(value) ? value : undefined
   }
 
-  getDisplayStringFromFormValue(value: MonthYearState | undefined): string {
+  getDisplayStringFromFormValue(
+    value: MonthYearState | undefined,
+    _translator: Translator
+  ): string {
     if (!value) {
       return ''
     }
@@ -113,10 +118,13 @@ export class MonthYearField extends FormComponent {
     return `${monthString} ${value.year}`
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
+  getDisplayStringFromState(
+    state: FormSubmissionState,
+    translator: Translator
+  ) {
     const value = this.getFormValueFromState(state)
 
-    return this.getDisplayStringFromFormValue(value)
+    return this.getDisplayStringFromFormValue(value, translator)
   }
 
   getContextValueFromFormValue(
@@ -145,10 +153,24 @@ export class MonthYearField extends FormComponent {
     return this.getContextValueFromFormValue(value)
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
+  getValidationMessagesOverride(translator: Translator) {
+    const { t } = translator
+    return convertToLanguageMessages({
+      'any.required': buildValidationMessages(t).objectMissing,
+      'number.base': buildValidationMessages(t).objectMissing,
+      'number.precision': buildValidationMessages(t).dateFormat,
+      'number.integer': buildValidationMessages(t).dateFormat,
+      'number.unsafe': buildValidationMessages(t).dateFormat,
+      'number.min': buildValidationMessages(t).dateFormat,
+      'number.max': buildValidationMessages(t).dateFormat
+    })
+  }
+
+  getViewModel(context: RenderContext) {
+    const { errors } = context
     const { collection, name } = this
 
-    const viewModel = super.getViewModel(payload, errors)
+    const viewModel = super.getViewModel(context)
     let { fieldset, label } = viewModel
 
     // Check for component errors only
@@ -156,7 +178,7 @@ export class MonthYearField extends FormComponent {
 
     // Use the component collection to generate the subitems
     const items: DateInputItem[] = collection
-      .getViewModel(payload, errors)
+      .getViewModel(context)
       .map(({ model }) => {
         let { label, type, value, classes, errorMessage } = model
 

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

@@ -3,12 +3,9 @@ import Joi, { type CustomValidator, type StringSchema } from 'joi'
 
 import { type ComponentBase } from './ComponentBase.js'
 import { FormComponent } from './FormComponent.js'
+import { type RenderContext } from './types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
-import {
-  type ErrorMessageTemplateList,
-  type FormPayload,
-  type FormSubmissionError
-} from '../types.js'
+import { type ErrorMessageTemplateList } from '../types.js'
 
 export class MultilineTextField extends FormComponent {
   declare options: MultilineTextFieldComponent['options']
@@ -94,10 +91,10 @@ export class MultilineTextField extends FormComponent {
     this.schema = schema
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
+  getViewModel(context: RenderContext) {
     const { schema, options, isCharacterOrWordCount } = this
 
-    const viewModel = super.getViewModel(payload, errors)
+    const viewModel = super.getViewModel(context)
     let { maxlength, maxwords, rows } = viewModel
 
     if (schema.max) {
@@ -122,7 +119,7 @@ export class MultilineTextField extends FormComponent {
   }
 
   buildMinMaxText(min?: number, max?: number): string {
-    const minMaxError = messageTemplate.minMax as string
+    const minMaxError = messageTemplate.minMax
     return minMaxError
       .replace('{{#min}}', min ? min.toString() : '[min length]')
       .replace('{{#max}}', max ? max.toString() : '[max length]')

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

@@ -2,6 +2,8 @@ import { type NationalGridFieldNumberFieldComponent } from '@defra/forms-model'
 
 import { LocationFieldBase } from './LocationFieldBase.js'
 import { createLowerFirstExpression } from './helpers/index.js'
+import { t } from '../i18n/index.js'
+import { type ErrorMessageTemplateList } from '../types.js'
 
 export class NationalGridFieldNumberField extends LocationFieldBase {
   declare options: NationalGridFieldNumberFieldComponent['options']
@@ -13,14 +15,13 @@ export class NationalGridFieldNumberField extends LocationFieldBase {
     const pattern =
       /^((([sS]|[nN])[a-hA-Hj-zJ-Z])|(([tT]|[oO])[abfglmqrvwABFGLMQRVW])|([hH][l-zL-Z])|([jJ][lmqrvwLMQRVW]))\s?([0-9]{4})\s?([0-9]{4})$/
 
-    const patternTemplate =
-      'Enter a valid National Grid field number for {{lowerFirst(#title)}} like NG 1234 5678'
-
     return {
       pattern,
-      patternErrorMessage: createLowerFirstExpression(patternTemplate),
+      patternErrorMessage: createLowerFirstExpression(
+        t('components.nationalGridField.pattern', 'en-GB')
+      ),
       requiredMessage: createLowerFirstExpression(
-        'Enter {{lowerFirst(#title)}}'
+        t('components.nationalGridField.required', 'en-GB')
       )
     }
   }
@@ -30,7 +31,7 @@ export class NationalGridFieldNumberField extends LocationFieldBase {
       {
         type: 'pattern',
         template: createLowerFirstExpression(
-          'Enter a valid National Grid field number for {{lowerFirst(#title)}} like NG 1234 5678'
+          t('components.nationalGridField.pattern', 'en-GB')
         )
       }
     ]
@@ -39,10 +40,23 @@ export class NationalGridFieldNumberField extends LocationFieldBase {
   /**
    * Static version of getAllPossibleErrors that doesn't require a component instance.
    */
-  static getAllPossibleErrors() {
-    const instance = Object.create(
-      NationalGridFieldNumberField.prototype
-    ) as NationalGridFieldNumberField
-    return instance.getAllPossibleErrors()
+  static getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [
+        {
+          type: 'required',
+          template: createLowerFirstExpression(
+            t('components.nationalGridField.required', 'en-GB')
+          )
+        },
+        {
+          type: 'pattern',
+          template: createLowerFirstExpression(
+            t('components.nationalGridField.pattern', 'en-GB')
+          )
+        }
+      ],
+      advancedSettingsErrors: []
+    }
   }
 }

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

@@ -5,13 +5,12 @@ import {
   FormComponent,
   isFormValue
 } from './FormComponent.js'
+import { type RenderContext } from './types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
 import {
   type ErrorMessageTemplateList,
-  type FormPayload,
   type FormState,
   type FormStateValue,
-  type FormSubmissionError,
   type FormSubmissionState
 } from '../types.js'
 
@@ -88,10 +87,10 @@ export class NumberField extends FormComponent {
     return this.isValue(value) ? value : undefined
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
+  getViewModel(context: RenderContext) {
     const { options, schema } = this
 
-    const viewModel = super.getViewModel(payload, errors)
+    const viewModel = super.getViewModel(context)
     let { attributes, prefix, suffix, value } = viewModel
 
     if (typeof schema.precision === 'undefined' || schema.precision <= 0) {

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

@@ -2,6 +2,8 @@ import { type OsGridRefFieldComponent } from '@defra/forms-model'
 
 import { LocationFieldBase } from './LocationFieldBase.js'
 import { createLowerFirstExpression } from './helpers/index.js'
+import { t } from '../i18n/index.js'
+import { type ErrorMessageTemplateList } from '../types.js'
 
 export class OsGridRefField extends LocationFieldBase {
   declare options: OsGridRefFieldComponent['options']
@@ -16,14 +18,13 @@ export class OsGridRefField extends LocationFieldBase {
     const pattern =
       /^((([sS]|[nN])[a-hA-Hj-zJ-Z])|(([tT]|[oO])[abfglmqrvwABFGLMQRVW])|([hH][l-zL-Z])|([jJ][lmqrvwLMQRVW]))\s?(([0-9]{3})\s?([0-9]{3})|([0-9]{4})\s?([0-9]{4})|([0-9]{5})\s?([0-9]{5}))$/
 
-    const patternTemplate =
-      'Enter a valid OS grid reference for {{lowerFirst(#title)}} like TQ123456'
-
     return {
       pattern,
-      patternErrorMessage: createLowerFirstExpression(patternTemplate),
+      patternErrorMessage: createLowerFirstExpression(
+        t('components.osGridRefField.pattern', 'en-GB')
+      ),
       requiredMessage: createLowerFirstExpression(
-        'Enter {{lowerFirst(#title)}}'
+        t('components.osGridRefField.required', 'en-GB')
       )
     }
   }
@@ -33,7 +34,7 @@ export class OsGridRefField extends LocationFieldBase {
       {
         type: 'pattern',
         template: createLowerFirstExpression(
-          'Enter a valid OS grid reference for {{lowerFirst(#title)}} like TQ123456'
+          t('components.osGridRefField.pattern', 'en-GB')
         )
       }
     ]
@@ -42,8 +43,23 @@ export class OsGridRefField extends LocationFieldBase {
   /**
    * Static version of getAllPossibleErrors that doesn't require a component instance.
    */
-  static getAllPossibleErrors() {
-    const instance = Object.create(OsGridRefField.prototype) as OsGridRefField
-    return instance.getAllPossibleErrors()
+  static getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [
+        {
+          type: 'required',
+          template: createLowerFirstExpression(
+            t('components.osGridRefField.required', 'en-GB')
+          )
+        },
+        {
+          type: 'pattern',
+          template: createLowerFirstExpression(
+            t('components.osGridRefField.pattern', 'en-GB')
+          )
+        }
+      ],
+      advancedSettingsErrors: []
+    }
   }
 }

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

@@ -11,10 +11,12 @@ import { logger } from '../../../common/helpers/logging/logger.js'
 import { COMPONENT_STATE_ERROR } from '../../../constants.js'
 import { FormComponent } from './FormComponent.js'
 import { type PaymentState } from './PaymentField.types.js'
+import { type RenderContext } from './types.js'
 import {
   createError,
   getPluginOptions
 } from '../helpers.js'
+import { type Translator } from '../i18n/types.js'
 import { type FormModel } from '../models/index.js'
 import {
   PaymentErrorTypes,
@@ -28,10 +30,8 @@ import {
 } from '../types/index.js'
 import {
   type ErrorMessageTemplateList,
-  type FormPayload,
   type FormState,
   type FormStateValue,
-  type FormSubmissionError,
   type FormSubmissionState,
   type PaymentExternalArgs
 } from '../types.js'
@@ -39,6 +39,7 @@ import {
   createPaymentService,
   formatCurrency
 } from '../../payment/helper.js'
+import { resolveLanguage } from '../../../utils/utils.js'
 
 export class PaymentField extends FormComponent {
   declare options: PaymentFieldComponent['options']
@@ -93,7 +94,10 @@ export class PaymentField extends FormComponent {
     return this.isPaymentState(value) ? value : undefined
   }
 
-  getDisplayStringFromState(state: FormSubmissionState): string {
+  getDisplayStringFromState(
+    state: FormSubmissionState,
+    _translator: Translator
+  ): string {
     const value = this.getPaymentStateFromState(state)
 
     if (!value) {
@@ -103,8 +107,9 @@ export class PaymentField extends FormComponent {
     return `${formatCurrency(value.amount)} - ${value.description}`
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
-    const viewModel = super.getViewModel(payload, errors)
+  getViewModel(context: RenderContext) {
+    const { payload } = context
+    const viewModel = super.getViewModel(context)
 
     // Payload is pre-populated from state if a payment has already been made
     const paymentState = this.isPaymentState(payload[this.name] as unknown)
@@ -229,7 +234,8 @@ export class PaymentField extends FormComponent {
   ): Promise<unknown> {
     const { options, name: componentName } = args.component
     const { model } = args.controller
-
+    const language = resolveLanguage(request)
+    const { t } = model.createTranslator(language)
     const state = await args.controller.getState(request)
     const { baseUrl } = getPluginOptions(request.server)
     const summaryUrl = `${baseUrl}/${model.basePath}/summary`
@@ -287,8 +293,8 @@ export class PaymentField extends FormComponent {
 
     if (!payment) {
       const message = isLivePayment
-        ? 'There is a problem and we cannot take a payment. Contact us (details in the footer of this form) or save your progress and return to the form later.'
-        : 'Add a valid test API key before you can preview the payment journey.'
+        ? t('components.paymentField.cannotTakePayment')
+        : t('components.paymentField.testApiKey')
       const govukError = createError(componentName, message)
       request.yar.flash(COMPONENT_STATE_ERROR, govukError, true)
       return h
@@ -323,6 +329,9 @@ export class PaymentField extends FormComponent {
     _metadata: FormMetadata,
     context: FormContext
   ): Promise<void> {
+    const language = resolveLanguage(request)
+    const { t } = this.model.createTranslator(language)
+
     // Zero-amount bypass — no capture needed
     const resolvedAmount = PaymentField.resolveAmount(
       this.options,
@@ -338,7 +347,7 @@ export class PaymentField extends FormComponent {
     if (!paymentState) {
       throw new PaymentPreAuthError(
         this,
-        'Complete the payment to continue',
+        t('components.paymentField.completePayment'),
         true,
         PaymentErrorTypes.PaymentIncomplete
       )
@@ -367,7 +376,8 @@ export class PaymentField extends FormComponent {
     PaymentSubmissionError.checkPaymentAmount(
       status.amount,
       resolvedAmount,
-      this
+      this,
+      t
     )
 
     if (status.state.status === 'success') {
@@ -378,7 +388,7 @@ export class PaymentField extends FormComponent {
     if (status.state.status !== 'capturable') {
       throw new PaymentPreAuthError(
         this,
-        'Your payment authorisation has expired. Please add your payment details again.',
+        t('components.paymentField.paymentExpired'),
         true,
         PaymentErrorTypes.PaymentExpired
       )
@@ -392,7 +402,7 @@ export class PaymentField extends FormComponent {
     if (!captured) {
       throw new PaymentPreAuthError(
         this,
-        'There was a problem and your form was not submitted. Try submitting the form again.',
+        t('components.paymentField.submissionFailed'),
         false
       )
     }

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

@@ -4,10 +4,7 @@ import {
 } from '@defra/forms-model'
 
 import { ListFormComponent } from './ListFormComponent.js'
-import {
-  type FormPayload,
-  type FormSubmissionError
-} from '../types.js'
+import { type RenderContext } from './types.js'
 
 export class SelectField extends ListFormComponent {
   declare options:
@@ -33,8 +30,8 @@ export class SelectField extends ListFormComponent {
     this.options = options
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
-    const viewModel = super.getViewModel(payload, errors)
+  getViewModel(context: RenderContext) {
+    const viewModel = super.getViewModel(context)
     let { items } = viewModel
 
     items = [{ value: '' }, ...items]

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

@@ -1,20 +1,19 @@
 import { ListFormComponent } from './ListFormComponent.js'
-import { type ListItem } from './types.js'
-import { messageTemplate } from '../pageControllers/validationOptions.js'
 import {
-  type ErrorMessageTemplateList,
-  type FormPayload,
-  type FormSubmissionError
-} from '../types.js'
+  type ListItem,
+  type RenderContext
+} from './types.js'
+import { messageTemplate } from '../pageControllers/validationOptions.js'
+import { type ErrorMessageTemplateList } from '../types.js'
 
 /**
  * "Selection controls" are checkboxes and radios (and switches), as per Material UI nomenclature.
  */
 export class SelectionControlField extends ListFormComponent {
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
+  getViewModel(context: RenderContext) {
     const { options } = this
 
-    const viewModel = super.getViewModel(payload, errors)
+    const viewModel = super.getViewModel(context)
     let { fieldset, items, label } = viewModel
 
     fieldset ??= {

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

@@ -7,12 +7,9 @@ import {
   INVALID_ERROR_CODE,
   joi
 } from './helpers/telephone.js'
+import { type RenderContext } from './types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
-import {
-  type ErrorMessageTemplateList,
-  type FormPayload,
-  type FormSubmissionError
-} from '../types.js'
+import { type ErrorMessageTemplateList } from '../types.js'
 
 export class TelephoneNumberField extends FormComponent {
   declare options: TelephoneNumberFieldComponent['options']
@@ -59,8 +56,8 @@ export class TelephoneNumberField extends FormComponent {
     this.options = options
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
-    const viewModel = super.getViewModel(payload, errors)
+  getViewModel(context: RenderContext) {
+    const viewModel = super.getViewModel(context)
     const { attributes } = viewModel
 
     attributes.autocomplete = 'tel'