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

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

@@ -5,8 +5,11 @@ import {
   FormComponent,
   isFormValue
 } from './FormComponent.js'
+import { withCustomValidationOverrides } 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,
@@ -130,6 +133,27 @@ export class NumberField extends FormComponent {
     return NumberField.isNumber(value)
   }
 
+  getValidationMessagesOverride(translator: Translator) {
+    const { customValidationMessage, customValidationMessages } = this.options
+    const { t } = translator
+    const defaults = {
+      '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
+    }
+
+    return {
+      [this.name]: withCustomValidationOverrides(
+        defaults,
+        customValidationMessage,
+        customValidationMessages
+      )
+    }
+  }
+
   /**
    * 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)
       )
     }
   }

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

@@ -63,6 +63,7 @@ export class PaymentField extends FormComponent {
         reference: joi.string().required(),
         amount: joi.number().required(),
         description: joi.string().required(),
+        descriptionInEng: joi.string().optional(),
         uuid: joi.string().uuid().required(),
         formId: joi.string().required(),
         isLivePayment: joi.boolean().required(),
@@ -239,8 +240,9 @@ 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 { language, t, tComponent } = model.createTranslator(
+      resolveLanguage(request)
+    )
     const state = await args.controller.getState(request)
     const { baseUrl } = getPluginOptions(request.server)
     const summaryUrl = `${baseUrl}/${model.basePath}/summary`
@@ -272,7 +274,8 @@ export class PaymentField extends FormComponent {
       return h.redirect(summaryUrl).code(StatusCodes.SEE_OTHER)
     }
 
-    const description = options.description
+    const description =
+      tComponent(args.component, 'paymentDescription') || options.description
 
     const slug = `/${model.basePath}`
 
@@ -292,7 +295,7 @@ export class PaymentField extends FormComponent {
       payCallbackUrl,
       reference,
       isLivePayment,
-      { formId, slug },
+      { formId, slug, language },
       prefilledEmail
     )
 
@@ -313,6 +316,7 @@ export class PaymentField extends FormComponent {
       reference,
       amount: resolvedAmount,
       description,
+      descriptionInEng: options.description,
       paymentId: payment.paymentId,
       componentName,
       returnUrl: summaryUrl,
@@ -449,6 +453,7 @@ export interface PaymentSessionData {
   reference: string
   amount: number
   description: string
+  descriptionInEng?: string
   paymentId: string
   componentName: string
   returnUrl: string

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

@@ -0,0 +1,64 @@
+import { type TrackingFieldComponent } from '@defra/forms-model'
+import joi, { type BooleanSchema } from 'joi'
+
+import {
+  FormComponent,
+  isFormValue
+} from './FormComponent.js'
+import { messageTemplate } from '../pageControllers/validationOptions.js'
+import {
+  type ErrorMessageTemplateList,
+  type FormState,
+  type FormStateValue,
+  type FormSubmissionState
+} from '../types.js'
+
+export class TrackingField extends FormComponent {
+  declare formSchema: BooleanSchema
+  declare stateSchema: BooleanSchema
+  declare options: TrackingFieldComponent['options']
+
+  constructor(
+    def: TrackingFieldComponent,
+    props: ConstructorParameters<typeof FormComponent>[1]
+  ) {
+    super(def, props)
+
+    const formSchema = joi.boolean().valid(true).label(this.label).required()
+
+    this.formSchema = formSchema.default(false)
+    this.stateSchema = formSchema.default(null).allow(null)
+    this.schema = {}
+    this.options = {}
+  }
+
+  getFormValueFromState(state: FormSubmissionState) {
+    const { name } = this
+    return this.getFormValue(state[name])
+  }
+
+  isValue(value?: FormStateValue | FormState): value is true {
+    return TrackingField.isTracking(value)
+  }
+
+  /**
+   * For error preview page that shows all possible errors on a component
+   */
+  getAllPossibleErrors(): ErrorMessageTemplateList {
+    return TrackingField.getAllPossibleErrors()
+  }
+
+  static isTracking(value?: FormStateValue | FormState): value is true {
+    return isFormValue(value) && typeof value === 'boolean'
+  }
+
+  /**
+   * Static version of getAllPossibleErrors that doesn't require a component instance.
+   */
+  static getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [{ type: 'required', template: messageTemplate.required }],
+      advancedSettingsErrors: []
+    }
+  }
+}

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

@@ -1,4 +1,9 @@
-import { ComponentType, type UkAddressFieldComponent } from '@defra/forms-model'
+import {
+  ComponentType,
+  FormStatus,
+  type FormMetadata,
+  type UkAddressFieldComponent
+} from '@defra/forms-model'
 import { type ObjectSchema } from 'joi'
 import lowerFirst from 'lodash/lowerFirst.js'
 
@@ -9,6 +14,8 @@ import {
 } from './FormComponent.js'
 import { TextField } from './TextField.js'
 import { type RenderContext } from './types.js'
+import { getCachedPluginTranslator } from '../i18n/form.js'
+import { getAvailableLanguages } from '../i18n/languages.js'
 import { type Translator } from '../i18n/types.js'
 import {
   type FormRequestPayload,
@@ -207,7 +214,7 @@ export class UkAddressField extends FormComponent {
 
         /**
          * For screen readers, only hide legend visually. This can be overridden
-         * by single component {@link QuestionPageController | `showTitle` handling}
+         * by single component (see QuestionPageController and showTitle handling)
          */
         classes: options.hideTitle
           ? 'govuk-visually-hidden'
@@ -290,7 +297,6 @@ export class UkAddressField extends FormComponent {
     )
   }
 
-  // eslint-disable-next-line @typescript-eslint/require-await
   static async dispatcher(
     request: FormRequestPayload,
     h: FormResponseToolkit,
@@ -299,14 +305,31 @@ export class UkAddressField extends FormComponent {
     const { controller, component } = args
     const language = resolveLanguage(request)
 
+    const availableLanguages = getAvailableLanguages(controller.model.def)
+    const languages = availableLanguages.length
+      ? { languages: availableLanguages }
+      : {}
+
+    const translator = await getCachedPluginTranslator(
+      request,
+      { id: controller.model.formId } as unknown as FormMetadata,
+      args.isLive ? FormStatus.Live : FormStatus.Draft,
+      language
+    )
+    const { tComponent, tForm } = translator
+
     return dispatch(request, h, {
-      formName: controller.model.name,
+      formName: tForm('title'),
+      formId: controller.model.formId,
+      formStatus: args.isLive ? FormStatus.Live : FormStatus.Draft,
+      componentId: component.id ?? 'unknown',
       componentName: component.name,
-      componentHint: component.hint,
-      componentTitle: component.title || controller.title,
+      componentHint: tComponent(component, 'hint'),
+      componentTitle: tComponent(component, 'title') || controller.title,
       step: args.actionArgs.step,
       sourceUrl: args.sourceUrl,
-      language
+      language,
+      ...languages
     })
   }
 }

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

@@ -4,15 +4,16 @@ import {
   yesNoListName,
   type YesNoFieldComponent
 } from '@defra/forms-model'
-import { type LanguageMessages } from 'joi'
 
 import { SelectionControlField } from './SelectionControlField.js'
-import { addClassOptionIfNone } from './helpers/index.js'
+import {
+  addClassOptionIfNone,
+  withCustomValidationOverrides
+} from './helpers/index.js'
 import { buildValidationMessages } from '../i18n/buildValidationMessages.js'
 import { type Translator } from '../i18n/types.js'
 import { messageTemplate } from '../pageControllers/validationOptions.js'
 import { type ErrorMessageTemplateList } from '../types.js'
-import { convertToLanguageMessages } from '../../../utils/type-utils.js'
 
 /**
  * @description
@@ -45,21 +46,38 @@ export class YesNoField extends SelectionControlField {
       formSchema = formSchema.optional()
     }
 
-    formSchema = formSchema.messages(
-      convertToLanguageMessages({
+    if (options.customValidationMessage) {
+      const message = options.customValidationMessage
+
+      formSchema = formSchema.messages({
+        'any.required': message
+      })
+    } else if (options.customValidationMessages) {
+      formSchema = formSchema.messages(options.customValidationMessages)
+    } else {
+      formSchema = formSchema.messages({
         'any.required': messageTemplate.selectYesNoRequired
       })
-    )
+    }
 
     this.formSchema = formSchema
     this.options = options
   }
 
-  getValidationMessagesOverride(translator: Translator): LanguageMessages {
+  getValidationMessagesOverride(translator: Translator) {
+    const { customValidationMessage, customValidationMessages } = this.options
     const { selectYesNoRequired } = buildValidationMessages(translator.t)
-    return convertToLanguageMessages({
+    const defaults = {
       'any.required': selectYesNoRequired
-    })
+    }
+
+    return {
+      [this.name]: withCustomValidationOverrides(
+        defaults,
+        customValidationMessage,
+        customValidationMessages
+      )
+    }
   }
 
   /**

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

@@ -6,6 +6,7 @@ import { ListFormComponent } from '../ListFormComponent.js'
 import { escapeMarkdown } from './index.js'
 import * as Components from '../index.js'
 import { markdown } from '../markdownParser.js'
+import { UnknownComponentTypeError } from '../../errors.js'
 import { type Translator } from '../../i18n/types.js'
 import { type FormState } from '../../types.js'
 
@@ -36,6 +37,7 @@ export type Field = InstanceType<
   | typeof Components.UkAddressField
   | typeof Components.FileUploadField
   | typeof Components.HiddenField
+  | typeof Components.TrackingField
   | typeof Components.PaymentField
   | typeof Components.GeospatialField
 >
@@ -200,6 +202,10 @@ export function createComponent(
       component = new Components.HiddenField(def, options)
       break
 
+    case ComponentType.TrackingField:
+      component = new Components.TrackingField(def, options)
+      break
+
     case ComponentType.PaymentField:
       component = new Components.PaymentField(def, options)
       break
@@ -210,7 +216,7 @@ export function createComponent(
   }
 
   if (typeof component === 'undefined') {
-    throw new Error(`Component type ${def.type} does not exist`)
+    throw new UnknownComponentTypeError(def.type)
   }
 
   return component
@@ -347,8 +353,7 @@ export function getAnswerMarkdown(
     field instanceof Components.EastingNorthingField ||
     field instanceof Components.LatLongField
   ) {
-    const contextValue = field.getContextValueFromState(state)
-    answerEscaped = contextValue ? `${contextValue}\n` : ''
+    answerEscaped = answer ? `${answer}\n` : ''
   } else if (field instanceof Components.GeospatialField) {
     const features = field.getFormValueFromState(state)
     const value = field.getDisplayStringFromFormValue(features, translator)

package/src/server/plugins/engine/components/helpers/geospatial.ts

@@ -1,26 +1,23 @@
 import {
-  GeospatialFieldOptionsCountryEnum,
   type GeospatialFieldComponent,
   type GeospatialFieldOptionsCountry
 } from '@defra/forms-model'
 import Bourne from '@hapi/bourne'
 import { booleanWithin } from '@turf/boolean-within'
+import { point } from '@turf/helpers'
+import OsGridRef from 'geodesy/osgridref.js'
 import JoiBase, { type CustomValidator } from 'joi'
 
+import { type EastingNorthingField } from '../EastingNorthingField.js'
+import { type EastingNorthingState } from '../types.js'
 import {
   type Coordinates,
   type Feature,
   type FeatureProperties,
   type Geometry
 } from '../../types.js'
-import { countries } from '../../../map/routes/index.js'
-
-const countriesDesc: Record<GeospatialFieldOptionsCountryEnum, string> = {
-  [GeospatialFieldOptionsCountryEnum.England]: 'England',
-  [GeospatialFieldOptionsCountryEnum.NorthernIreland]: 'Northern Ireland',
-  [GeospatialFieldOptionsCountryEnum.Scotland]: 'Scotland',
-  [GeospatialFieldOptionsCountryEnum.Wales]: 'Wales'
-}
+import { countriesValidate } from '../../../map/routes/index.js'
+import { CountryMap } from '../../../map/types.js'
 
 const Joi = JoiBase.extend({
   type: 'array',
@@ -98,25 +95,43 @@ const featureSchema = Joi.object<Feature>().keys({
   geometry: featureGeometrySchema
 })
 
-function applySchemaConstraints(
-  schema: JoiBase.ArraySchema<Feature[]>,
-  def: GeospatialFieldComponent
+export function determineLimits(
+  def: GeospatialFieldComponent,
+  isOptional: boolean
 ) {
-  const { options, schema: constraints } = def
-  const isOptional = options.required === false
-
+  const { schema: constraints } = def
+  const limits: { min?: number; max?: number; length?: number } = {}
   if (typeof constraints?.length === 'number') {
-    schema = schema.length(constraints.length)
+    limits.length = constraints.length
   } else {
     if (typeof constraints?.min === 'number') {
-      schema = schema.min(constraints.min)
+      limits.min = constraints.min
     } else if (!isOptional) {
-      schema = schema.min(1)
+      limits.min = 1
     }
 
-    schema = schema.max(
-      typeof constraints?.max === 'number' ? constraints.max : 50
-    )
+    limits.max = typeof constraints?.max === 'number' ? constraints.max : 50
+  }
+  return limits
+}
+
+function applySchemaConstraints(
+  schema: JoiBase.ArraySchema<Feature[]>,
+  def: GeospatialFieldComponent
+) {
+  const { options } = def
+  const isOptional = options.required === false
+
+  const limits = determineLimits(def, isOptional)
+
+  if (limits.length !== undefined) {
+    schema = schema.length(limits.length)
+  }
+  if (limits.min !== undefined) {
+    schema = schema.min(limits.min)
+  }
+  if (limits.max !== undefined) {
+    schema = schema.max(limits.max)
   }
 
   if (isOptional) {
@@ -143,8 +158,8 @@ export function getGeospatialSchema(
   }
 
   const validateCountryBounds: CustomValidator = (value, helpers) => {
-    const countryFeature = countries.features.find(
-      (feature) => feature.id === country
+    const countryFeature = countriesValidate.features.find(
+      (feature) => feature.id === CountryMap[country]
     )
 
     if (!countryFeature) {
@@ -156,7 +171,7 @@ export function getGeospatialSchema(
 
     if (!result) {
       return helpers.error('any.custom', {
-        country: countriesDesc[country as GeospatialFieldOptionsCountryEnum]
+        country
       })
     }
 
@@ -171,3 +186,51 @@ export function getGeospatialSchema(
     def
   )
 }
+
+export function getEastingNorthingCountryValidator(
+  field: EastingNorthingField,
+  country: GeospatialFieldOptionsCountry
+) {
+  const validateCountryBounds: CustomValidator = (value, helpers) => {
+    const countryFeature = countriesValidate.features.find(
+      (feature) => feature.id === CountryMap[country]
+    )
+
+    if (!countryFeature) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return value
+    }
+
+    const eastingNorthing = field.getFormValueFromState(
+      value as EastingNorthingState
+    )
+
+    if (!eastingNorthing) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return value
+    }
+
+    const gridRef = new OsGridRef(
+      eastingNorthing.easting,
+      eastingNorthing.northing
+    )
+    const latLong = gridRef.toLatLon()
+    const coord = point([latLong.longitude, latLong.latitude])
+    const within = booleanWithin(coord, countryFeature)
+
+    if (!within) {
+      return helpers.error(
+        'any.custom',
+        {
+          country
+        },
+        { path: [field.name] }
+      )
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return value
+  }
+
+  return validateCountryBounds
+}