@defra/forms-engine-plugin 5.0.0-alpha.2 → 5.0.0-alpha.21

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
+    }
+  }
 }

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

@@ -11,14 +11,15 @@ import {
 } from './FormComponent.js'
 import { addClassOptionIfNone } from './helpers/index.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'
 import {
   type ErrorMessageTemplateList,
   type FormState,
   type FormStateValue,
   type FormSubmissionState
 } from '../types.js'
-import { convertToLanguageMessages } from '../../../utils/type-utils.js'
 
 interface LocationFieldOptions {
   instructionText?: string
@@ -43,7 +44,9 @@ export abstract class LocationFieldBase extends FormComponent {
   declare stateSchema: StringSchema
   instructionText?: string
 
-  protected abstract getValidationConfig(): ValidationConfig
+  protected abstract getValidationConfig(
+    translator: Translator | undefined
+  ): ValidationConfig
   protected abstract getErrorTemplates(): {
     type: string
     template: JoiExpression
@@ -61,14 +64,14 @@ export abstract class LocationFieldBase extends FormComponent {
 
     addClassOptionIfNone(locationOptions, 'govuk-input--width-10')
 
-    const config = this.getValidationConfig()
+    const config = this.getValidationConfig(undefined)
     const requiredMessage = config.requiredMessage ?? messageTemplate.required
 
-    const messages = convertToLanguageMessages({
+    const messages = {
       'any.required': requiredMessage,
       'string.empty': requiredMessage,
       'string.pattern.base': config.patternErrorMessage
-    })
+    } as LanguageMessages
 
     let formSchema = joi
       .string()
@@ -121,18 +124,38 @@ export abstract class LocationFieldBase extends FormComponent {
   getViewModel(context: RenderContext) {
     const viewModel = super.getViewModel(context)
 
+    Object.assign(viewModel, {
+      lang: context.translator.language
+    })
+
     if (this.instructionText) {
+      const { tComponent } = context.translator
       return {
         ...viewModel,
-        instructionText: this.instructionText
+        instructionText:
+          tComponent(this.def, 'instructionText') || this.instructionText
       }
     }
 
     return viewModel
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const { t } = translator
+    const config = this.getValidationConfig(translator)
+    return {
+      [this.name]: {
+        'any.required':
+          config.requiredMessage ?? buildValidationMessages(t).objectRequired,
+        'string.empty':
+          config.requiredMessage ?? buildValidationMessages(t).objectRequired,
+        'string.pattern.base': config.patternErrorMessage
+      } as LanguageMessages
+    }
+  }
+
   getAllPossibleErrors(): ErrorMessageTemplateList {
-    const config = this.getValidationConfig()
+    const config = this.getValidationConfig(undefined)
 
     return {
       baseErrors: [

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

@@ -1,6 +1,6 @@
 import { type Context, type CustomValidator } from 'joi'
 
-import { type EastingNorthingField } from './EastingNorthingField.js'
+import { EastingNorthingField } from './EastingNorthingField.js'
 import { isFormValue } from './FormComponent.js'
 import { type GeospatialField } from './GeospatialField.js'
 import { type LatLongField } from './LatLongField.js'
@@ -11,6 +11,7 @@ import {
   type RenderContext,
   type ViewModel
 } from './types.js'
+import { type Translator } from '../i18n/types.js'
 import {
   type FormPayload,
   type FormSubmissionError,
@@ -29,25 +30,25 @@ export type LocationField =
  * - "latitude must be..." -> "latitude must be..."
  */
 function lowercaseMessageStart(message: string): string {
-  if (message.startsWith('Enter ')) {
-    return 'enter' + message.slice(5)
-  }
-
-  // Lowercase first character for any other message
+  // Lowercase first character for a message
   return message.charAt(0).toLowerCase() + message.slice(1)
 }
 
-export function joinWithAnd(items: string[]): string {
+export function joinWithAnd(items: string[], translator: Translator): string {
+  const { t } = translator
   if (items.length === 2) {
-    return `${items[0]} and ${items[1]}`
+    return `${items[0]} ${t('common.and')} ${items[1]}`
   }
 
   const leading = items.slice(0, -1).join(', ')
   const last = items[items.length - 1]
-  return `${leading} and ${last}`
+  return `${leading} ${t('common.and')} ${last}`
 }
 
-export function formatErrorList(messages: string[]): string {
+export function formatErrorList(
+  messages: string[],
+  translator: Translator
+): string {
   if (!messages.length) {
     return ''
   }
@@ -60,7 +61,7 @@ export function formatErrorList(messages: string[]): string {
     index === 0 ? msg : lowercaseMessageStart(msg)
   )
 
-  return joinWithAnd(formattedMessages)
+  return joinWithAnd(formattedMessages, translator)
 }
 
 export function mergeCssClasses(...classNames: (string | undefined)[]) {
@@ -172,7 +173,9 @@ export function getLocationFieldViewModel(
   if (hasFieldErrors) {
     viewModel.errorMessage = {
       text:
-        fieldErrors.length === 1 ? fieldErrors[0] : formatErrorList(fieldErrors)
+        fieldErrors.length === 1
+          ? fieldErrors[0]
+          : formatErrorList(fieldErrors, context.translator)
     }
   }
 
@@ -187,13 +190,24 @@ export function getLocationFieldViewModel(
     ...viewModel,
     fieldset,
     items,
-    mapLayers: getMapLayers(component)
+    mapLayers: getMapLayers(component),
+    country:
+      component instanceof EastingNorthingField
+        ? component.options.countries?.at(0)
+        : undefined,
+    lang: context.translator.language
   }
 
   if (component.options.instructionText) {
+    const { t, tComponent } = context.translator
+
     return {
       ...result,
-      instructionText: component.options.instructionText
+      instructionSummary: t('components.locationFieldBase.howToFind'),
+      instructionText:
+        tComponent(component.def, 'instructionText') ||
+        component.options.instructionText,
+      t
     }
   }
 

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

@@ -1,4 +1,4 @@
-import { type ComponentDef, type MarkdownComponent } from '@defra/forms-model'
+import { type MarkdownComponent } from '@defra/forms-model'
 
 import { ComponentBase } from './ComponentBase.js'
 import { type RenderContext } from './types.js'
@@ -28,8 +28,7 @@ export class Markdown extends ComponentBase {
 
     return {
       ...viewModel,
-      content:
-        tComponent(this as unknown as ComponentDef, 'content') || content,
+      content: tComponent(this.def, 'content') || content,
       headerStartLevel: this.headerStartLevel
     }
   }

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

@@ -30,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 MonthYearField extends FormComponent {
   declare options: MonthYearFieldComponent['options']
@@ -48,16 +48,15 @@ export class MonthYearField extends FormComponent {
 
     const isRequired = options.required !== false
 
-    const customValidationMessages: LanguageMessages =
-      convertToLanguageMessages({
-        'any.required': messageTemplate.objectMissing,
-        'number.base': messageTemplate.objectMissing,
-        'number.precision': messageTemplate.dateFormat,
-        'number.integer': messageTemplate.dateFormat,
-        'number.unsafe': messageTemplate.dateFormat,
-        'number.min': messageTemplate.dateFormat,
-        'number.max': messageTemplate.dateFormat
-      })
+    const customValidationMessages = {
+      'any.required': messageTemplate.objectMissing,
+      'number.base': messageTemplate.objectMissing,
+      'number.precision': messageTemplate.dateFormat,
+      'number.integer': messageTemplate.dateFormat,
+      'number.unsafe': messageTemplate.dateFormat,
+      'number.min': messageTemplate.dateFormat,
+      'number.max': messageTemplate.dateFormat
+    } as LanguageMessages
 
     this.collection = new ComponentCollection(
       [
@@ -105,16 +104,18 @@ export class MonthYearField extends FormComponent {
 
   getDisplayStringFromFormValue(
     value: MonthYearState | undefined,
-    _translator: Translator
+    translator: Translator
   ): string {
     if (!value) {
       return ''
     }
 
     const date = new Date()
+    // Force to first day of month in case current date was say 31st and specified month has fewer than 31 days
+    date.setDate(1)
     date.setMonth(value.month - 1)
 
-    const monthString = date.toLocaleString('default', { month: 'long' })
+    const monthString = formatDateForLanguage(date, 'LLLL', translator.language)
     return `${monthString} ${value.year}`
   }
 
@@ -155,7 +156,7 @@ export class MonthYearField 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,
@@ -163,7 +164,11 @@ export class MonthYearField extends FormComponent {
       'number.unsafe': buildValidationMessages(t).dateFormat,
       'number.min': buildValidationMessages(t).dateFormat,
       'number.max': buildValidationMessages(t).dateFormat
-    })
+    } as LanguageMessages
+    return {
+      [`${this.name}__month`]: messages,
+      [`${this.name}__year`]: messages
+    }
   }
 
   getViewModel(context: RenderContext) {

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

@@ -1,14 +1,16 @@
 import { type NationalGridFieldNumberFieldComponent } from '@defra/forms-model'
 
+import { EN_GB } from '../../../constants.js'
 import { LocationFieldBase } from './LocationFieldBase.js'
 import { createLowerFirstExpression } from './helpers/index.js'
 import { t } from '../i18n/index.js'
+import { type Translator } from '../i18n/types.js'
 import { type ErrorMessageTemplateList } from '../types.js'
 
 export class NationalGridFieldNumberField extends LocationFieldBase {
   declare options: NationalGridFieldNumberFieldComponent['options']
 
-  protected getValidationConfig() {
+  protected getValidationConfig(translator: Translator | undefined) {
     // Regex for OS national grid field references (NGFR)
     // Validates specific valid OS grid letter combinations with:
     // - 2 letters & 8 digits in 2 blocks of 4 e.g. ST 6789 6789
@@ -18,10 +20,14 @@ export class NationalGridFieldNumberField extends LocationFieldBase {
     return {
       pattern,
       patternErrorMessage: createLowerFirstExpression(
-        t('components.nationalGridField.pattern', 'en-GB')
+        translator
+          ? translator.t('components.nationalGridField.pattern')
+          : t('components.nationalGridField.pattern', EN_GB)
       ),
       requiredMessage: createLowerFirstExpression(
-        t('components.nationalGridField.required', 'en-GB')
+        translator
+          ? translator.t('components.nationalGridField.required')
+          : t('components.nationalGridField.required', EN_GB)
       )
     }
   }

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

@@ -1,12 +1,18 @@
 import { type NumberFieldComponent } from '@defra/forms-model'
-import joi, { type CustomValidator, type NumberSchema } from 'joi'
+import joi, {
+  type CustomValidator,
+  type LanguageMessages,
+  type NumberSchema
+} from 'joi'
 
 import {
   FormComponent,
   isFormValue
 } from './FormComponent.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'
 import {
   type ErrorMessageTemplateList,
   type FormState,
@@ -130,6 +136,20 @@ export class NumberField extends FormComponent {
     return NumberField.isNumber(value)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const { t } = translator
+    return {
+      [this.name]: {
+        'any.required': buildValidationMessages(t).objectRequired,
+        'number.base': buildValidationMessages(t).objectMissing,
+        'number.precision': buildValidationMessages(t).numberPrecision,
+        'number.integer': buildValidationMessages(t).numberInteger,
+        'number.min': buildValidationMessages(t).numberMin,
+        'number.max': buildValidationMessages(t).numberMax
+      } as LanguageMessages
+    }
+  }
+
   /**
    * For error preview page that shows all possible errors on a component
    */

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

@@ -1,14 +1,29 @@
 import { type OsGridRefFieldComponent } from '@defra/forms-model'
 
+import { EN_GB } from '../../../constants.js'
 import { LocationFieldBase } from './LocationFieldBase.js'
+import { getMapLayers } from './LocationFieldHelpers.js'
 import { createLowerFirstExpression } from './helpers/index.js'
+import { type RenderContext } from './types.js'
 import { t } from '../i18n/index.js'
+import { type Translator } from '../types/index.js'
 import { type ErrorMessageTemplateList } from '../types.js'
 
 export class OsGridRefField extends LocationFieldBase {
   declare options: OsGridRefFieldComponent['options']
 
-  protected getValidationConfig() {
+  getViewModel(context: RenderContext) {
+    const viewModel = super.getViewModel(context)
+
+    Object.assign(viewModel, {
+      lang: context.translator.language,
+      mapLayers: getMapLayers(this)
+    })
+
+    return viewModel
+  }
+
+  protected getValidationConfig(translator: Translator | undefined) {
     // Regex for OS national grid references (NGR)
     // Validates specific valid OS grid letter combinations with:
     // - 2 letters & 6 digits in 2 blocks of 3 e.g. ST 678 678
@@ -21,10 +36,14 @@ export class OsGridRefField extends LocationFieldBase {
     return {
       pattern,
       patternErrorMessage: createLowerFirstExpression(
-        t('components.osGridRefField.pattern', 'en-GB')
+        translator
+          ? translator.t('components.osGridRefField.pattern')
+          : t('components.osGridRefField.pattern', EN_GB)
       ),
       requiredMessage: createLowerFirstExpression(
-        t('components.osGridRefField.required', 'en-GB')
+        translator
+          ? translator.t('components.osGridRefField.required')
+          : t('components.osGridRefField.required', EN_GB)
       )
     }
   }