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

package/src/server/plugins/engine/models/SummaryViewModel.ts

@@ -4,6 +4,7 @@ import {
   type Section
 } from '@defra/forms-model'
 
+import { EN_GB } from '../../../constants.js'
 import { PaymentField } from '../components/PaymentField.js'
 import { type PaymentState } from '../components/PaymentField.types.js'
 import {
@@ -96,7 +97,7 @@ export class SummaryViewModel {
       .validate(this.context.relevantState, { ...opts, stripUnknown: true })
 
     // Format errors
-    this.errors = result.error?.details.map(getError)
+    this.errors = result.error?.details.map((item) => getError(EN_GB, item))
     this.details = this.summaryDetails(request, sections, translator)
 
     // Format check answers
@@ -212,12 +213,12 @@ function ItemRepeat(
   translator: Translator
 ): DetailItemRepeat {
   const { collection, repeat } = page
-  const { name, title } = repeat.options
-
+  const { name } = repeat.options
+  const { t, tPage } = translator
+  const title = tPage(page.pageDef, 'repeatTitle') || repeat.options.title
   const values = page.getListFromState(state)
   const count = values.length
-  const value =
-    count === 0 ? '' : translator.t('pages.repeater.pageTitle', { count })
+  const value = count === 0 ? '' : t('pages.repeater.pageTitle', { count })
 
   return {
     name,

package/src/server/plugins/engine/outputFormatters/adapter/v1.ts

@@ -3,6 +3,7 @@ import {
   type SubmitResponsePayload
 } from '@defra/forms-model'
 
+import { EN_GB } from '../../../../constants.js'
 import {
   getFormVersion,
   type checkFormStatus
@@ -42,18 +43,14 @@ export function format(
     formSlug: formMetadata?.slug ?? '',
     status: formStatus.state,
     isPreview: formStatus.isPreview,
-    notificationEmail: formMetadata?.notificationEmail ?? ''
+    notificationEmail: formMetadata?.notificationEmail ?? '',
+    language: context.translator?.language ?? EN_GB
   }
 
   if (versionMetadata) {
     meta.versionMetadata = versionMetadata
   }
 
-  const definitionLanguage = model.def.metadata?.language
-  if (typeof definitionLanguage === 'string') {
-    meta.language = definitionLanguage
-  }
-
   const main = Object.fromEntries(
     Object.entries(v2Main).map(([key, value]) => {
       if (value === undefined) {

package/src/server/plugins/engine/outputFormatters/human/v1.ts

@@ -5,6 +5,7 @@ import {
 import { addDays, format as dateFormat } from 'date-fns'
 
 import { config } from '../../../../../config/index.js'
+import { EN_GB } from '../../../../constants.js'
 import { getAnswer } from '../../components/helpers/components.js'
 import { escapeMarkdown } from '../../components/helpers/index.js'
 import { PaymentField } from '../../components/index.js'
@@ -116,7 +117,7 @@ function appendPaymentSection(paymentItems: DetailItem[], lines: string[]) {
 
   const formattedAmount = formatCurrency(paymentState.amount)
   const dateOfPayment = paymentState.preAuth?.createdAt
-    ? formatPaymentDate(paymentState.preAuth.createdAt)
+    ? formatPaymentDate(paymentState.preAuth.createdAt, EN_GB)
     : ''
 
   lines.push(

package/src/server/plugins/engine/outputFormatters/machine/v2.ts

@@ -28,6 +28,7 @@ interface PaymentOutput {
   reference: string
   amount: number
   description: string
+  descriptionInEng?: string
   createdAt: string
 }
 
@@ -93,6 +94,7 @@ export function format(
  *        reference: 'REF-123',
  *        amount: 10.00,
  *        description: 'Application fee',
+ *        descriptionInEng: 'Applicaiton fee',
  *        createdAt: '2025-01-23T10:30:00.000Z'
  *      }
  *    }
@@ -204,6 +206,7 @@ function extractPayment(
     reference: paymentState.reference,
     amount: paymentState.amount,
     description: paymentState.description,
+    descriptionInEng: item.field.def.options.description,
     createdAt: paymentState.preAuth?.createdAt ?? ''
   }
 }

package/src/server/plugins/engine/pageControllers/FileUploadPageController.ts

@@ -188,17 +188,19 @@ export class FileUploadPageController extends QuestionPageController {
 
       const { filename } = fileToRemove.status.form.file
 
-      const { t } = this.getTranslator(request)
+      const translator = this.getTranslator(request)
+      const { t } = translator
 
       return h.view(this.fileDeleteViewName, {
         ...viewModel,
         context,
         backLink: this.getBackLink(request, context, t),
-        pageTitle: `Are you sure you want to remove this file?`,
+        pageTitle: t('pages.fileUpload.removeFileTitle'),
         itemTitle: filename,
-        confirmation: { text: 'You cannot recover removed files.' },
-        buttonConfirm: { text: 'Remove file' },
-        buttonCancel: { text: 'Cancel' }
+        confirmation: { text: t('pages.fileUpload.removeFileBody') },
+        buttonConfirm: { text: t('pages.fileUpload.removeFileButton') },
+        buttonCancel: { text: t('pages.fileUpload.cancel') },
+        t
       } satisfies ItemDeletePageViewModel)
     }
   }
@@ -224,7 +226,7 @@ export class FileUploadPageController extends QuestionPageController {
     }
   }
 
-  getErrors(details?: ValidationErrorItem[]) {
+  getErrors(details?: ValidationErrorItem[], language?: string) {
     const { fileUpload } = this
 
     if (details) {
@@ -237,7 +239,7 @@ export class FileUploadPageController extends QuestionPageController {
         if (!isUploadError || isUploadRootError) {
           // The error is for the root of the upload or another
           // field on the page so defer to the getError helper
-          errors.push(getError(error))
+          errors.push(getError(language, error))
         } else {
           const { context, path, type } = error
 
@@ -266,6 +268,7 @@ export class FileUploadPageController extends QuestionPageController {
   ): FeaturedFormPageViewModel {
     const { fileUpload } = this
     const { state } = context
+    const { t } = translator
 
     const upload = this.getUploadFromState(state)
 
@@ -277,6 +280,12 @@ export class FileUploadPageController extends QuestionPageController {
       ({ model }) => model.id === fileUpload.name
     )
 
+    formComponent.model.upload = {
+      count: formComponent.model.upload?.count ?? 0,
+      summaryList: formComponent.model.upload?.summaryList ?? { rows: [] },
+      uploadingLabel: t('components.fileUploadField.uploading')
+    }
+
     const index = components.indexOf(formComponent)
 
     const proxyUrl = getProxyUrlForLocalDevelopment(upload?.uploadUrl)
@@ -290,7 +299,8 @@ export class FileUploadPageController extends QuestionPageController {
       // Split out components before/after
       componentsBefore: components.slice(0, index),
       components: components.slice(index),
-      proxyUrl
+      proxyUrl,
+      t
     }
   }
 

package/src/server/plugins/engine/pageControllers/QuestionPageController.ts

@@ -174,9 +174,14 @@ export class QuestionPageController extends PageController {
           if (!pageTitle) {
             pageTitle = labelOrLegend.text
           }
-          labelOrLegend.text = isOptional
-            ? `${pageTitle} ${t('common.optional')}`
-            : pageTitle
+
+          // The question text may have already appended 'optional' in the relevant language
+          const optionalWord = t('common.optional')
+          const optionalAlreadyAppended = pageTitle.endsWith(` ${optionalWord}`)
+          labelOrLegend.text =
+            isOptional && !optionalAlreadyAppended
+              ? `${pageTitle} ${optionalWord}`
+              : pageTitle
         }
 
         // Fallback if still no pageTitle set
@@ -359,8 +364,8 @@ export class QuestionPageController extends PageController {
     return this.collection.getStateFromValidForm(payload)
   }
 
-  getErrors(details?: ValidationErrorItem[]) {
-    return getErrors(details)
+  getErrors(details?: ValidationErrorItem[], language?: string) {
+    return getErrors(language, details)
   }
 
   async getState(request: AnyFormRequest) {

package/src/server/plugins/engine/pageControllers/RepeatPageController.ts

@@ -406,9 +406,9 @@ export class RepeatPageController extends QuestionPageController {
     const { query } = request
     const { isForceAccess, errors } = context
 
-    const { t } = translator
+    const { t, tPage } = translator
 
-    const { title } = repeat.options
+    const title = tPage(this.pageDef, 'repeatTitle') || repeat.options.title
 
     const summaryList: SummaryList = {
       classes: 'govuk-summary-list--long-actions',

package/src/server/plugins/engine/pageControllers/SummaryPageController.ts

@@ -114,7 +114,7 @@ export class SummaryPageController extends QuestionPageController {
         viewModel.paymentDetails = this.buildPaymentDetails(
           paymentField,
           paymentState,
-          t
+          translator
         )
       }
 
@@ -151,8 +151,9 @@ export class SummaryPageController extends QuestionPageController {
     paymentState: NonNullable<
       ReturnType<PaymentField['getPaymentStateFromState']>
     >,
-    t: (key: string, opts?: Record<string, unknown>) => string
+    translator: Translator
   ) {
+    const { t } = translator
     const rows = [
       {
         key: { text: t('pages.summary.paymentFor') },
@@ -171,7 +172,12 @@ export class SummaryPageController extends QuestionPageController {
     if (paymentState.preAuth?.createdAt) {
       rows.push({
         key: { text: t('pages.summary.dateOfPayment') },
-        value: { text: formatPaymentDate(paymentState.preAuth.createdAt) }
+        value: {
+          text: formatPaymentDate(
+            paymentState.preAuth.createdAt,
+            translator.language
+          )
+        }
       })
     }
 
@@ -557,7 +563,12 @@ function submitData(
     retrievalKey,
     referenceNumber,
     main: buildMainRecords(items, translator),
-    repeaters: buildRepeaterRecords(items, translator)
+    repeaters: buildRepeaterRecords(items, translator),
+    // Only populate the language property if the form is multi-language enabled
+    // @ts-expect-error - dynamic language property
+    language: model.def.metadata?.translations?.cy
+      ? translator.language
+      : undefined
   }
   return submit(payload)
 }

package/src/server/plugins/engine/pageControllers/helpers/submission.ts

@@ -36,7 +36,7 @@ export function buildMainRecords(
 
   for (const item of fieldItems) {
     if (item.field instanceof PaymentField) {
-      records.push(...buildPaymentRecords(item))
+      records.push(...buildPaymentRecords(item, translator))
     } else if (item.field instanceof GeospatialField) {
       // Stringify of GeoJSON is done here rather than inside `getContextValueFromState`
       // so we don't incur the overhead of JSON.stringify on every request when building context
@@ -67,7 +67,10 @@ export function buildMainRecords(
  *
  * Returns an empty array if no payment state exists.
  */
-export function buildPaymentRecords(item: DetailItemField): SubmitRecord[] {
+export function buildPaymentRecords(
+  item: DetailItemField,
+  translator: Translator
+): SubmitRecord[] {
   const paymentState = (item.field as PaymentField).getPaymentStateFromState(
     item.state
   )
@@ -96,7 +99,7 @@ export function buildPaymentRecords(item: DetailItemField): SubmitRecord[] {
       name: `${item.name}_paymentDate`,
       title: 'Payment date',
       value: paymentState.preAuth?.createdAt
-        ? formatPaymentDate(paymentState.preAuth.createdAt)
+        ? formatPaymentDate(paymentState.preAuth.createdAt, translator.language)
         : ''
     }
   ]

package/src/server/plugins/engine/pageControllers/validationOptions.ts

@@ -58,7 +58,21 @@ export const messages: LanguageMessagesExt = {
   'date.min': messageTemplate.dateMin,
   'date.max': messageTemplate.dateMax,
 
-  'object.invalidjson': messageTemplate.format
+  'array.min': messageTemplate.arrayMin,
+  'array.max': messageTemplate.arrayMax,
+  'array.length': messageTemplate.arrayLength,
+
+  'features.min': messageTemplate.featuresMin,
+  'features.max': messageTemplate.featuresMax,
+  'features.length': messageTemplate.featuresLength,
+
+  'files.min': messageTemplate.filesMin,
+  'files.max': messageTemplate.filesMax,
+  'filees.length': messageTemplate.filesLength,
+
+  'object.invalidjson': messageTemplate.format,
+
+  'phoneNumber.invalid': messageTemplate.format
 }
 
 export const messagesPre: LanguageMessages =
@@ -76,6 +90,7 @@ export function buildLanguageMessages(
     'string.email': vm.format,
     'string.pattern.base': vm.pattern,
     'string.maxWords': vm.maxWords,
+    'string.unicode': vm.unicode,
     'number.base': vm.number,
     'number.precision': vm.numberPrecision,
     'number.integer': vm.numberInteger,
@@ -91,7 +106,17 @@ export function buildLanguageMessages(
     'date.format': vm.dateFormat,
     'date.min': vm.dateMin,
     'date.max': vm.dateMax,
-    'object.invalidjson': vm.format
+    'array.min': vm.arrayMin,
+    'array.max': vm.arrayMax,
+    'array.length': vm.arrayLength,
+    'features.min': vm.featuresMin,
+    'features.max': vm.featuresMax,
+    'features.length': vm.featuresLength,
+    'files.min': vm.filesMin,
+    'files.max': vm.filesMax,
+    'files.length': vm.filesLength,
+    'object.invalidjson': vm.format,
+    'phoneNumber.invalid': vm.format
   } as unknown as LanguageMessages
 }
 

package/src/server/plugins/engine/types/schema.ts

@@ -50,6 +50,7 @@ export const formAdapterSubmissionMessageDataSchema =
         reference: Joi.string().required(),
         amount: Joi.number().required(),
         description: Joi.string().required(),
+        descriptionInEng: Joi.string().optional(),
         createdAt: Joi.string().required()
       })
       .optional(),

package/src/server/plugins/engine/types.ts

@@ -558,6 +558,7 @@ export interface FormAdapterPayment {
   reference: string
   amount: number
   description: string
+  descriptionInEng?: string
   createdAt: string
 }
 

package/src/server/plugins/engine/views/components/fileuploadfield.html

@@ -3,7 +3,7 @@
 {% macro FileUploadField(component) %}
   {% set upload = component.model.upload %}
 
-  <div id="uploadedFilesContainer">
+  <div id="uploadedFilesContainer" data-uploadinglabel="{{ upload.uploadingLabel }}">
     <h2 class="govuk-heading-m">{{ t('components.fileUploadField.uploadedFilesHeading') }}</h2>
     {% if upload.count %}
       <p class="govuk-body" role="alert">{{ t('components.fileUploadField.filesCount', { count: upload.count }) }}</p>

package/src/server/plugins/engine/views/components/multilinetextfield.html

@@ -3,7 +3,18 @@
 
 {% macro MultilineTextField(component) %}
   {% if component.model.isCharacterOrWordCount == true %}
-    {{ govukCharacterCount(component.model) }}
+    {% set characterParams = component.model | merge({
+      charactersUnderLimitText: {
+        one: t('components.characterCount.underLimit.one'),
+        other: t('components.characterCount.underLimit.other')
+      },
+      charactersAtLimitText: t('components.characterCount.atLimit'),
+      charactersOverLimitText: {
+        one: t('components.characterCount.overLimit.one'),
+        other: t('components.characterCount.overLimit.other')
+      }
+    } ) %}
+    {{ govukCharacterCount(characterParams) }}
   {% else %}
     {{ govukTextarea(component.model) }}
   {% endif %}

package/src/server/plugins/engine/views/components/paymentfield.html

@@ -16,7 +16,7 @@
       <p class="govuk-body">{{ t('components.paymentField.preAuthorisedBody') }}</p>
     {% else %}
       {# No pre-authorisation - show payment form #}
-      <h2 class="govuk-heading-m">{{ model.label.text if model.label and model.label.text else t('components.paymentField.detailsRequired') }}</h2>
+      <h2 class="govuk-heading-m">{{ t('components.paymentField.detailsRequired') }}</h2>
 
       <p class="govuk-body">{{ description }}</p>
 

package/src/server/plugins/engine/views/components/ukaddressfield.html

@@ -61,7 +61,7 @@
               },
               classes: "govuk-button--secondary govuk-!-margin-right-1 govuk-!-margin-bottom-0"
             }) }}
-            <p class="govuk-body govuk-!-margin-bottom-0">or <button class="govuk-link govuk-button--link govuk-!-margin-right-1 govuk-!-margin-bottom-0" name="action" value="external-{{component.model.name}}--step:manual">{{ t('components.addressField.enterManually') }}</button></p>
+            <p class="govuk-body govuk-!-margin-bottom-0">{{ t('common.or')}} <button class="govuk-link govuk-button--link govuk-!-margin-right-1 govuk-!-margin-bottom-0" name="action" value="external-{{component.model.name}}--step:manual">{{ t('components.addressField.enterManually') }}</button></p>
           </div>
           {# Include a line break if this is the last component #}
           {% if components[components.length - 1] == component %}

package/src/server/plugins/engine/views/partials/preview-banner.html

@@ -8,7 +8,9 @@
   </p>
 {%- endmacro -%}
 
-{% call govukNotificationBanner() %}
+{% call govukNotificationBanner({
+  titleText: t('pages.preview.bannerTitle')
+}) %}
   {% set previewModeTranslated = t('common.' + previewMode) %}
   {% if not context.isForceAccess %}
     <p class="govuk-notification-banner__heading govuk-!-margin-bottom-0">

package/src/server/plugins/nunjucks/filters/applyUrlParam.js

@@ -0,0 +1,17 @@
+/**
+ * Nunjucks filter to add/replace a parameter on a query string of a url.
+ * Currently only used in forms-runner.
+ * @param {string} urlPath - existing relative url with query string
+ * @param {string} paramName - name of parameter
+ * @param {string} paramValue - value of parameter
+ * @returns {string}
+ */
+export function applyUrlParam(urlPath, paramName, paramValue) {
+  if (typeof urlPath !== 'string') {
+    return ''
+  }
+  const url = new URL(urlPath, 'https://dummy')
+  url.searchParams.set(paramName, paramValue)
+
+  return url.pathname + url.search
+}

package/src/server/plugins/nunjucks/filters/index.js

@@ -6,3 +6,4 @@ export { href } from './href.js'
 export { field } from './field.js'
 export { page } from './page.js'
 export { merge } from './merge.js'
+export { applyUrlParam } from './applyUrlParam.js'

package/src/server/plugins/payment/helper.js

@@ -1,5 +1,6 @@
 import { format } from 'date-fns'
 
+import { toLanguageLocale } from '../engine/helpers.js'
 import { PaymentService } from './service.js'
 
 export const DEFAULT_PAYMENT_HELP_URL =
@@ -28,10 +29,29 @@ export async function createPaymentService(
 /**
  * Formats a payment date for display
  * @param {string} isoString - ISO date string
+ * @param {string} language - the target language
  * @returns {string} Formatted date string (e.g., "26 January 2026 5:01pm")
  */
-export function formatPaymentDate(isoString) {
-  return format(new Date(isoString), 'd MMMM yyyy h:mmaaa')
+export function formatPaymentDate(isoString, language) {
+  return formatDateForLanguage(
+    new Date(isoString),
+    'd MMMM yyyy h:mmaaa',
+    language
+  )
+}
+
+/**
+ * Formats a date for display in a specific language.
+ * To use additional languages, the appropriate module must be imported from 'date-fns/locale'
+ * @param { Date | string } date - the date
+ * @param {string} formatMask - the format mask
+ * @param {string} language - the target language
+ * @returns {string} Formatted date string (e.g., "26 January 2026 5:01pm")
+ */
+export function formatDateForLanguage(date, formatMask, language) {
+  return format(date, formatMask, {
+    locale: toLanguageLocale(language)
+  })
 }
 
 /**

package/src/server/plugins/payment/service.js

@@ -1,6 +1,7 @@
 import { StatusCodes } from 'http-status-codes'
 
 import { logger } from '../../common/helpers/logging/logger.js'
+import { toPayLanguageCode } from '../engine/helpers.js'
 import {
   buildPaymentInfo,
   convertPenceToPounds
@@ -38,7 +39,7 @@ export class PaymentService {
    * @param {string} returnUrl
    * @param {string} reference
    * @param {boolean} isLivePayment
-   * @param {{ formId: string, slug: string } | undefined } metadata
+   * @param {{ formId: string, slug: string, language: string } | undefined } metadata
    * @param {string} [email] - optional email to prepopulate on GOV.UK Pay
    */
   async createPayment(
@@ -50,6 +51,8 @@ export class PaymentService {
     metadata,
     email
   ) {
+    const language = toPayLanguageCode(metadata?.language)
+
     try {
       /** @type {CreatePaymentRequest} */
       const payload = {
@@ -58,7 +61,8 @@ export class PaymentService {
         reference,
         metadata,
         return_url: returnUrl,
-        delayed_capture: true
+        delayed_capture: true,
+        language
       }
 
       // Prepopulate email on GOV.UK Pay if provided

package/src/server/plugins/payment/types.js

@@ -18,6 +18,7 @@
  * @property {string} reference - Unique reference for the payment
  * @property {string} description - Human-readable description of the payment
  * @property {string} return_url - URL to redirect the user to after payment
+ * @property {string} language - the desired language for translations
  * @property {boolean} [delayed_capture] - Whether to delay capturing the payment
  * @property {{ formId: string, slug: string }} [metadata] - Additional metadata for the payment
  * @property {string} [email] - Email to prepopulate on GOV.UK Pay (max 254 chars)