@defra/forms-engine-plugin 4.22.0 → 5.0.0-alpha

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

@@ -13,7 +13,12 @@ import {
 } from './LocationFieldHelpers.js'
 import { NumberField } from './NumberField.js'
 import { createLowerFirstExpression } from './helpers/index.js'
-import { type LatLongState } from './types.js'
+import {
+  type LatLongState,
+  type RenderContext
+} from './types.js'
+import { t as tPlugin } from '../i18n/index.js'
+import { type Translator } from '../i18n/types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
 import {
   type ErrorMessageTemplateList,
@@ -51,31 +56,50 @@ export class LatLongField extends FormComponent {
     const longitudeMin = schema?.longitude?.min ?? -13.687
     const longitudeMax = schema?.longitude?.max ?? 1.767
 
-    const latitudeRequired = 'Enter latitude'
-    const longitudeRequired = 'Enter longitude'
+    const fieldLabel = lowerFirst(this.label)
 
     const customValidationMessages: LanguageMessages =
       convertToLanguageMessages({
-        'number.precision':
-          '{{#label}} must have no more than 7 decimal places',
-        'number.unsafe': '{{#label}} must be a valid number'
+        'number.precision': tPlugin(
+          'components.latLongField.precision',
+          'en-GB'
+        ),
+        'number.unsafe': tPlugin('components.latLongField.notANumber', 'en-GB')
       })
 
-    const latitudeRangeMessage = `Latitude for ${lowerFirst(this.label)} must be between ${latitudeMin} and ${latitudeMax}`
-    const longitudeRangeMessage = `Longitude for ${lowerFirst(this.label)} must be between ${longitudeMin} and ${longitudeMax}`
+    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': latitudeRequired,
-      'number.base': `Enter a valid latitude for ${lowerFirst(this.label)} like 51.519450`,
+      'any.required': tPlugin(
+        'components.latLongField.latitudeRequired',
+        'en-GB'
+      ),
+      'number.base': tPlugin('components.latLongField.latitudeBase', 'en-GB', {
+        fieldLabel
+      }),
       'number.min': latitudeRangeMessage,
       'number.max': latitudeRangeMessage
     })
 
     const longitudeMessages: LanguageMessages = convertToLanguageMessages({
       ...customValidationMessages,
-      'any.required': longitudeRequired,
-      'number.base': `Enter a valid longitude for ${lowerFirst(this.label)} like -0.127758`,
+      'any.required': tPlugin(
+        'components.latLongField.longitudeRequired',
+        'en-GB'
+      ),
+      'number.base': tPlugin('components.latLongField.longitudeBase', 'en-GB', {
+        fieldLabel
+      }),
       'number.min': longitudeRangeMessage,
       'number.max': longitudeRangeMessage
     })
@@ -85,7 +109,7 @@ export class LatLongField extends FormComponent {
         {
           type: ComponentType.NumberField,
           name: `${name}__latitude`,
-          title: 'Latitude',
+          title: 'components.latLongField.latitude',
           schema: {
             min: latitudeMin,
             max: latitudeMax,
@@ -102,7 +126,7 @@ export class LatLongField extends FormComponent {
         {
           type: ComponentType.NumberField,
           name: `${name}__longitude`,
-          title: 'Longitude',
+          title: 'components.latLongField.longitude',
           schema: {
             min: longitudeMin,
             max: longitudeMax,
@@ -133,7 +157,10 @@ export class LatLongField extends FormComponent {
     return LatLongField.isLatLong(value) ? value : undefined
   }
 
-  getDisplayStringFromFormValue(value: LatLongState | undefined): string {
+  getDisplayStringFromFormValue(
+    value: LatLongState | undefined,
+    _translator: Translator
+  ): string {
     if (!value) {
       return ''
     }
@@ -142,10 +169,13 @@ export class LatLongField extends FormComponent {
     return `${value.latitude}, ${value.longitude}`
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
+  getDisplayStringFromState(
+    state: FormSubmissionState,
+    translator: Translator
+  ) {
     const value = this.getFormValueFromState(state)
 
-    return this.getDisplayStringFromFormValue(value)
+    return this.getDisplayStringFromFormValue(value, translator)
   }
 
   getContextValueFromFormValue(value: LatLongState | undefined): string | null {
@@ -163,15 +193,16 @@ export class LatLongField extends FormComponent {
     return this.getContextValueFromFormValue(value)
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
-    const viewModel = super.getViewModel(payload, errors)
-    return getLocationFieldViewModel(this, viewModel, payload, errors)
+  getViewModel(context: RenderContext) {
+    const viewModel = super.getViewModel(context)
+    return getLocationFieldViewModel(this, viewModel, context)
   }
 
   getViewErrors(
+    translator: Translator,
     errors?: FormSubmissionError[]
   ): FormSubmissionError[] | undefined {
-    const allErrors = this.getErrors(errors)
+    const allErrors = this.getErrors(translator, errors)
     return deduplicateErrorsByHref(allErrors)
   }
 

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

@@ -13,12 +13,14 @@ import joi, {
 } from 'joi'
 
 import { FormComponent } from './FormComponent.js'
-import { type ListItem } from './types.js'
+import {
+  type ListItem,
+  type RenderContext
+} from './types.js'
+import { type Translator } from '../i18n/types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
 import {
   type ErrorMessageTemplateList,
-  type FormPayload,
-  type FormSubmissionError,
   type FormSubmissionState
 } from '../types.js'
 
@@ -100,7 +102,8 @@ export class ListFormComponent extends FormComponent {
   }
 
   getDisplayStringFromFormValue(
-    value: string | number | boolean | Item['value'][] | undefined
+    value: string | number | boolean | Item['value'][] | undefined,
+    translator: Translator
   ): string {
     const { items } = this
 
@@ -108,29 +111,42 @@ export class ListFormComponent extends FormComponent {
 
     return items
       .filter((item) => values.includes(item.value))
-      .map((item) => item.text)
+      .map((item) => translator.tListItem(item, 'text') || item.text)
       .join(', ')
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
+  getDisplayStringFromState(
+    state: FormSubmissionState,
+    translator: Translator
+  ) {
     // Allow for array values via subclass
     const value = this.getFormValueFromState(state)
 
-    return this.getDisplayStringFromFormValue(value)
+    return this.getDisplayStringFromFormValue(value, translator)
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
+  getViewModel(context: RenderContext) {
     const { items: listItems } = this
 
-    const viewModel = super.getViewModel(payload, errors)
+    const viewModel = super.getViewModel(context)
     const { value } = viewModel
 
     // Support multiple values for checkboxes
     const values = this.isValue(value) ? [value].flat() : []
 
+    const { tListItem } = context.translator
+
     const items = listItems.map((item) => {
       const selected = values.includes(item.value)
-      const itemModel: ListItem = { ...item, selected }
+      const resolvedText = tListItem(item, 'text') || item.text
+      const resolvedHint = tListItem(item, 'hint') || item.hint?.text
+      const hintAttr = resolvedHint ? { hint: { text: resolvedHint } } : {}
+      const itemModel: ListItem = {
+        ...item,
+        text: resolvedText,
+        selected,
+        ...hintAttr
+      }
 
       if ('id' in itemModel) {
         delete itemModel.id

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

@@ -10,13 +10,12 @@ import {
   isFormValue
 } from './FormComponent.js'
 import { addClassOptionIfNone } from './helpers/index.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'
 import { convertToLanguageMessages } from '../../../utils/type-utils.js'
@@ -63,8 +62,7 @@ export abstract class LocationFieldBase extends FormComponent {
     addClassOptionIfNone(locationOptions, 'govuk-input--width-10')
 
     const config = this.getValidationConfig()
-    const requiredMessage =
-      config.requiredMessage ?? (messageTemplate.required as string)
+    const requiredMessage = config.requiredMessage ?? messageTemplate.required
 
     const messages = convertToLanguageMessages({
       'any.required': requiredMessage,
@@ -120,8 +118,8 @@ export abstract class LocationFieldBase extends FormComponent {
     return LocationFieldBase.isText(value)
   }
 
-  getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
-    const viewModel = super.getViewModel(payload, errors)
+  getViewModel(context: RenderContext) {
+    const viewModel = super.getViewModel(context)
 
     if (this.instructionText) {
       return {
@@ -140,8 +138,7 @@ export abstract class LocationFieldBase extends FormComponent {
       baseErrors: [
         {
           type: 'required',
-          template:
-            config.requiredMessage ?? (messageTemplate.required as string)
+          template: config.requiredMessage ?? messageTemplate.required
         },
         ...this.getErrorTemplates()
       ],

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

@@ -6,6 +6,7 @@ import { type LatLongField } from './LatLongField.js'
 import {
   type DateInputItem,
   type Label,
+  type RenderContext,
   type ViewModel
 } from './types.js'
 import {
@@ -94,13 +95,12 @@ export function getLocationFieldViewModel(
     name: string
     value: FormValue
   },
-  payload: FormPayload,
-  errors?: FormSubmissionError[]
+  context: RenderContext
 ) {
   const { collection } = component
   const { fieldset: existingFieldset, label } = viewModel
 
-  const subViewModels = collection.getViewModel(payload, errors)
+  const subViewModels = collection.getViewModel(context)
 
   const fieldErrors: string[] = []
   subViewModels.forEach(({ model }) => {

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: []
+    }
   }
 }