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

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

@@ -21,7 +21,6 @@ import {
 } from '../../../constants.js'
 import { ComponentCollection } from '../components/ComponentCollection.js'
 import { PaymentField } from '../components/PaymentField.js'
-import { optionalText } from '../components/constants.js'
 import { type BackLink } from '../components/types.js'
 import {
   checkFormStatus,
@@ -31,6 +30,7 @@ import {
   normalisePath,
   proceed
 } from '../helpers.js'
+import { type Translator } from '../i18n/types.js'
 import { type FormModel } from '../models/index.js'
 import { PageController } from './PageController.js'
 import { prefillStateFromQueryParameters } from './helpers/state.js'
@@ -118,18 +118,28 @@ export class QuestionPageController extends PageController {
    * Used for mapping form payloads and errors to govuk-frontend's template api, so a page can be rendered
    * @param request - the hapi request
    * @param context - the form context
+   * @param translator - optional per-request translator pair
    */
   getViewModel(
     request: FormContextRequest,
-    context: FormContext
+    context: FormContext,
+    translator: Translator
   ): FormPageViewModel {
     const { collection, viewModel } = this
-    const { query } = request
     const { payload, errors } = context
 
-    let { pageTitle, showTitle } = viewModel
+    const { t, tPage, tSection } = translator
+
+    let { showTitle, sectionTitle } = viewModel
 
-    const components = collection.getViewModel(payload, errors, query)
+    let pageTitle = this.pageDef.title ? tPage(this.pageDef, 'title') : ''
+
+    if (this.section) {
+      sectionTitle =
+        this.section.hideTitle !== true ? tSection(this.section, 'title') : ''
+    }
+
+    const components = collection.getViewModel({ payload, errors, translator })
     const formComponents = components.filter(
       ({ isFormComponent }) => isFormComponent
     )
@@ -161,13 +171,17 @@ export class QuestionPageController extends PageController {
           const isOptional =
             this.collection.fields.at(0)?.options.required === false
 
-          if (pageTitle) {
-            labelOrLegend.text = isOptional
-              ? `${pageTitle}${optionalText}`
-              : pageTitle
+          if (!pageTitle) {
+            pageTitle = labelOrLegend.text
           }
+          labelOrLegend.text = isOptional
+            ? `${pageTitle} ${t('common.optional')}`
+            : pageTitle
+        }
 
-          pageTitle = pageTitle || labelOrLegend.text
+        // Fallback if still no pageTitle set
+        if (!pageTitle) {
+          pageTitle = labelOrLegend.text
         }
       }
 
@@ -216,8 +230,10 @@ export class QuestionPageController extends PageController {
 
     return {
       ...viewModel,
-      backLink: this.getBackLink(request, context),
+      backLink: this.getBackLink(request, context, t),
       context,
+      pageTitle,
+      sectionTitle,
       showTitle,
       components,
       errors,
@@ -450,14 +466,17 @@ export class QuestionPageController extends PageController {
       const { collection, model, viewName } = this
       const { evaluationState } = context
 
+      const translator = this.getTranslator(request)
+      const { t } = translator
+
       // Copy any URL params into the form state (if not already done so)
       if (await prefillStateFromQueryParameters(request, this)) {
         // Forward to same page without query string
         return h.redirect(request.url.pathname)
       }
 
-      const viewModel = this.getViewModel(request, context)
-      viewModel.errors = collection.getViewErrors(viewModel.errors)
+      const viewModel = this.getViewModel(request, context, translator)
+      viewModel.errors = collection.getViewErrors(translator, viewModel.errors)
 
       const flashedError = request.yar.flash(COMPONENT_STATE_ERROR)
       const flashedErrors = !Array.isArray(flashedError) ? [flashedError] : []
@@ -484,7 +503,10 @@ export class QuestionPageController extends PageController {
       viewModel.hasMissingNotificationEmail =
         await this.hasMissingNotificationEmail(request, context)
 
-      return h.view(viewName, viewModel)
+      return h.view(viewName, {
+        ...viewModel,
+        t
+      })
     }
   }
 
@@ -515,7 +537,8 @@ export class QuestionPageController extends PageController {
    */
   protected getBackLink(
     request: FormContextRequest,
-    context: FormContext
+    context: FormContext,
+    t: (key: string, opts?: Record<string, unknown>) => string
   ): BackLink | undefined {
     const { pageDef } = this
     const { path, query } = request
@@ -529,8 +552,8 @@ export class QuestionPageController extends PageController {
       return {
         text:
           hasRepeater(pageDef) && itemId
-            ? 'Go back to add another'
-            : 'Go back to check answers',
+            ? t('pages.question.backToAddAnother')
+            : t('pages.question.backToCheckAnswers'),
         href: returnUrl
       }
     }
@@ -548,7 +571,7 @@ export class QuestionPageController extends PageController {
 
     // Default back link
     return {
-      text: 'Back',
+      text: t('common.back'),
       href: this.getHref(backPath)
     }
   }
@@ -563,6 +586,9 @@ export class QuestionPageController extends PageController {
       const { isForceAccess, state, evaluationState } = context
       const action = request.payload.action
 
+      const translator = this.getTranslator(request)
+      const { t } = translator
+
       if (action?.startsWith(FormAction.External)) {
         return await this.dispatchExternal(request, h, context)
       }
@@ -572,8 +598,11 @@ export class QuestionPageController extends PageController {
        * @todo Refactor to match POST REDIRECT GET pattern
        */
       if (context.errors || isForceAccess) {
-        const viewModel = this.getViewModel(request, context)
-        viewModel.errors = collection.getViewErrors(viewModel.errors)
+        const viewModel = this.getViewModel(request, context, translator)
+        viewModel.errors = collection.getViewErrors(
+          translator,
+          viewModel.errors
+        )
 
         // Filter our components based on their conditions using our evaluated state
         viewModel.components = this.filterConditionalComponents(
@@ -582,7 +611,10 @@ export class QuestionPageController extends PageController {
           evaluationState
         )
 
-        return h.view(viewName, viewModel)
+        return h.view(viewName, {
+          ...viewModel,
+          t
+        })
       }
 
       // Save state

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

@@ -6,6 +6,7 @@ import Joi from 'joi'
 
 import { isRepeatState } from '../components/FormComponent.js'
 import { redirectPath } from '../helpers.js'
+import { type Translator } from '../i18n/types.js'
 import { type FormModel } from '../models/index.js'
 import { QuestionPageController } from './QuestionPageController.js'
 import {
@@ -193,9 +194,20 @@ export class RepeatPageController extends QuestionPageController {
         return super.proceed(request, h, nextPath)
       }
 
-      const viewModel = this.getListSummaryViewModel(request, context, list)
+      const translator = this.getTranslator(request)
+      const { t } = translator
 
-      return h.view(this.listSummaryViewName, viewModel)
+      const viewModel = this.getListSummaryViewModel(
+        request,
+        context,
+        list,
+        translator
+      )
+
+      return h.view(this.listSummaryViewName, {
+        ...viewModel,
+        t
+      })
     }
   }
 
@@ -220,6 +232,9 @@ export class RepeatPageController extends QuestionPageController {
         return super.proceed(request, h, nextPath)
       }
 
+      const translator = this.getTranslator(request)
+      const { t } = translator
+
       const { action } = this.getFormParams(request)
 
       const hasErrorMin =
@@ -232,7 +247,6 @@ export class RepeatPageController extends QuestionPageController {
       // Show error if repeat limits apply
       if (hasErrorMin || hasErrorMax) {
         const count = hasErrorMax ? schema.max : schema.min
-        const itemTitle = `answer${count === 1 ? '' : 's'}`
 
         context.errors = [
           {
@@ -240,14 +254,22 @@ export class RepeatPageController extends QuestionPageController {
             href: '',
             name: '',
             text: hasErrorMax
-              ? `You can only add up to ${count} ${itemTitle}`
-              : `You must add at least ${count} ${itemTitle}`
+              ? t('pages.repeater.tooMany', { count })
+              : t('pages.repeater.tooFew', { count })
           }
         ]
 
-        const viewModel = this.getListSummaryViewModel(request, context, list)
+        const viewModel = this.getListSummaryViewModel(
+          request,
+          context,
+          list,
+          translator
+        )
 
-        return h.view(this.listSummaryViewName, viewModel)
+        return h.view(this.listSummaryViewName, {
+          ...viewModel,
+          t
+        })
       }
 
       if (action === FormAction.AddAnother) {
@@ -281,11 +303,14 @@ export class RepeatPageController extends QuestionPageController {
       const itemId = this.getItemId(request)
       const item = this.getItemFromList(list, itemId)
 
+      const translator = this.getTranslator(request)
+      const { t } = translator
+
       if (!item || list.length === 1) {
         throw Boom.notFound(
           item
-            ? 'Last list item cannot be removed'
-            : 'List item to remove not found'
+            ? t('pages.repeater.lastItemCannotBeRemoved')
+            : t('pages.repeater.itemToRemoveNotFound')
         )
       }
 
@@ -294,11 +319,12 @@ export class RepeatPageController extends QuestionPageController {
       return h.view(this.listDeleteViewName, {
         ...viewModel,
         context,
-        backLink: this.getBackLink(request, context),
-        pageTitle: 'Are you sure you want to remove this answer?',
+        backLink: this.getBackLink(request, context, t),
+        pageTitle: t('pages.repeater.removeAnswer'),
         itemTitle: `${title} ${list.indexOf(item) + 1}`,
-        buttonConfirm: { text: 'Remove' },
-        buttonCancel: { text: 'Cancel' }
+        buttonConfirm: { text: t('pages.repeater.remove') },
+        buttonCancel: { text: t('pages.repeater.cancel') },
+        t
       } satisfies ItemDeletePageViewModel)
     }
   }
@@ -318,11 +344,13 @@ export class RepeatPageController extends QuestionPageController {
       const itemId = this.getItemId(request)
       const item = this.getItemFromList(list, itemId)
 
+      const { t } = this.getTranslator(request)
+
       if (!item || list.length === 1) {
         throw Boom.notFound(
           item
-            ? 'Last list item cannot be removed'
-            : 'List item to remove not found'
+            ? t('pages.repeater.lastItemCannotBeRemoved')
+            : t('pages.repeater.itemToRemoveNotFound')
         )
       }
 
@@ -343,17 +371,21 @@ export class RepeatPageController extends QuestionPageController {
 
   getViewModel(
     request: FormContextRequest,
-    context: FormContext
+    context: FormContext,
+    translator: Translator
   ): FormPageViewModel {
     const { state } = context
+    const { tPage } = translator
 
     const list = this.getListFromState(state)
     const itemId = this.getItemId(request)
     const item = this.getItemFromList(list, itemId)
 
-    const viewModel = super.getViewModel(request, context)
+    const viewModel = super.getViewModel(request, context, translator)
     const itemNumber = item ? list.indexOf(item) + 1 : list.length + 1
-    const repeatCaption = `${this.repeat.options.title} ${itemNumber}`
+    const title =
+      tPage(this.pageDef, 'repeatTitle') || this.pageDef.repeat.options.title
+    const repeatCaption = `${title} ${itemNumber}`
 
     return {
       ...viewModel,
@@ -367,12 +399,15 @@ export class RepeatPageController extends QuestionPageController {
   getListSummaryViewModel(
     request: FormContextRequest,
     context: FormContext,
-    list: RepeatListState
+    list: RepeatListState,
+    translator: Translator
   ): RepeaterSummaryPageViewModel {
     const { collection, href, repeat } = this
     const { query } = request
     const { isForceAccess, errors } = context
 
+    const { t } = translator
+
     const { title } = repeat.options
 
     const summaryList: SummaryList = {
@@ -396,9 +431,11 @@ export class RepeatPageController extends QuestionPageController {
             href: redirectPath(`${href}/${item.itemId}`, {
               returnUrl: query.returnUrl ?? this.getHref(summaryPath)
             }),
-            text: 'Change',
+            text: t('pages.repeater.change'),
             classes: 'govuk-link--no-visited-state',
-            visuallyHiddenText: `item ${index + 1}`
+            visuallyHiddenText: t('pages.repeater.visuallyHiddenItem', {
+              index: index + 1
+            })
           })
 
           if (count > 1) {
@@ -406,15 +443,17 @@ export class RepeatPageController extends QuestionPageController {
               href: redirectPath(`${href}/${item.itemId}/confirm-delete`, {
                 returnUrl: query.returnUrl
               }),
-              text: 'Remove',
+              text: t('pages.repeater.remove'),
               classes: 'govuk-link--no-visited-state',
-              visuallyHiddenText: `item ${index + 1}`
+              visuallyHiddenText: t('pages.repeater.visuallyHiddenItem', {
+                index: index + 1
+              })
             })
           }
         }
 
         const itemDisplayText = collection.fields.length
-          ? collection.fields[0].getDisplayStringFromState(item)
+          ? collection.fields[0].getDisplayStringFromState(item, translator)
           : ''
 
         summaryList.rows.push({
@@ -422,7 +461,7 @@ export class RepeatPageController extends QuestionPageController {
             text: `${title} ${index + 1}`
           },
           value: {
-            text: itemDisplayText || 'Not provided'
+            text: itemDisplayText || t('pages.repeater.notProvided')
           },
           actions: {
             items
@@ -431,13 +470,11 @@ export class RepeatPageController extends QuestionPageController {
       })
     }
 
-    const unit = count === 1 ? 'answer' : 'answers'
-
     return {
       ...this.viewModel,
-      backLink: this.getBackLink(request, context),
+      backLink: this.getBackLink(request, context, t),
       repeatTitle: title,
-      pageTitle: `You have added ${count} ${unit}`,
+      pageTitle: t('pages.repeater.pageTitle', { count }),
       showTitle: true,
       context,
       errors,

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

@@ -1,3 +1,4 @@
+import { type Translator } from '../i18n/types.js'
 import { QuestionPageController } from './QuestionPageController.js'
 import { type FormContext } from '../types.js'
 import { type FormRequest } from '../../../routes/types.js'
@@ -11,9 +12,13 @@ export class StartPageController extends QuestionPageController {
 
   allowSaveAndExit = false
 
-  getViewModel(request: FormRequest, context: FormContext) {
+  getViewModel(
+    request: FormRequest,
+    context: FormContext,
+    translator: Translator
+  ) {
     return {
-      ...super.getViewModel(request, context),
+      ...super.getViewModel(request, context, translator),
       isStartPage: true
     }
   }

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

@@ -8,6 +8,7 @@ import {
   type FormRequest,
   type FormResponseToolkit
 } from '../../../routes/types.js'
+import { resolveLanguage } from '../../../utils/utils.js'
 
 export class StatusPageController extends QuestionPageController {
   declare pageDef: PageStatus
@@ -32,6 +33,10 @@ export class StatusPageController extends QuestionPageController {
     ) => {
       const { viewModel, viewName } = this
 
+      const language = resolveLanguage(request)
+      const translator = this.model.createTranslator(language)
+      const { t, tForm } = translator
+
       const cacheService = getCacheService(request.server)
       const confirmationState = await cacheService.getConfirmationState(request)
 
@@ -55,10 +60,13 @@ export class StatusPageController extends QuestionPageController {
 
       return h.view(viewName, {
         ...viewModel,
-        submissionGuidance,
         formName,
+        submissionGuidance,
         showReferenceNumber: this.showReferenceNumber,
-        referenceNumber: confirmationState.referenceNumber
+        referenceNumber: confirmationState.referenceNumber,
+        t,
+        tForm,
+        context
       })
     }
   }

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

@@ -20,6 +20,7 @@ import {
   createError,
   getCacheService
 } from '../helpers.js'
+import { type Translator } from '../i18n/types.js'
 import {
   SummaryViewModel,
   type FormModel
@@ -89,11 +90,13 @@ export class SummaryPageController extends QuestionPageController {
 
   getSummaryViewModel(
     request: FormContextRequest,
-    context: FormContext
+    context: FormContext,
+    translator: Translator
   ): SummaryViewModel {
-    const viewModel = new SummaryViewModel(request, this, context)
+    const { t } = translator
+
+    const viewModel = new SummaryViewModel(request, this, context, translator)
 
-    const { query } = request
     const { payload, errors, state } = context
 
     const paymentField = this.findPaymentField()
@@ -110,7 +113,8 @@ export class SummaryPageController extends QuestionPageController {
         viewModel.paymentState = paymentState
         viewModel.paymentDetails = this.buildPaymentDetails(
           paymentField,
-          paymentState
+          paymentState,
+          t
         )
       }
 
@@ -126,9 +130,13 @@ export class SummaryPageController extends QuestionPageController {
       }
     }
 
-    const components = this.collection.getViewModel(payload, errors, query)
+    const components = this.collection.getViewModel({
+      payload,
+      errors,
+      translator
+    })
 
-    viewModel.backLink = this.getBackLink(request, context)
+    viewModel.backLink = this.getBackLink(request, context, t)
     viewModel.feedbackLink = this.feedbackLink
     viewModel.phaseTag = this.phaseTag
     viewModel.components = components
@@ -142,32 +150,33 @@ export class SummaryPageController extends QuestionPageController {
     paymentField: PaymentField,
     paymentState: NonNullable<
       ReturnType<PaymentField['getPaymentStateFromState']>
-    >
+    >,
+    t: (key: string, opts?: Record<string, unknown>) => string
   ) {
     const rows = [
       {
-        key: { text: 'Payment for' },
+        key: { text: t('pages.summary.paymentFor') },
         value: { text: paymentState.description }
       },
       {
-        key: { text: 'Total amount' },
+        key: { text: t('pages.summary.totalAmount') },
         value: { text: formatCurrency(paymentState.amount) }
       },
       {
-        key: { text: 'Reference' },
+        key: { text: t('pages.summary.reference') },
         value: { text: paymentState.reference }
       }
     ]
 
     if (paymentState.preAuth?.createdAt) {
       rows.push({
-        key: { text: 'Date of payment' },
+        key: { text: t('pages.summary.dateOfPayment') },
         value: { text: formatPaymentDate(paymentState.preAuth.createdAt) }
       })
     }
 
     return {
-      title: { text: 'Payment details' },
+      title: { text: t('pages.summary.paymentDetailsTitle') },
       summaryList: { rows }
     }
   }
@@ -183,6 +192,9 @@ export class SummaryPageController extends QuestionPageController {
     ) => {
       const { viewName } = this
 
+      const translator = this.getTranslator(request)
+      const { t } = translator
+
       // After GOV.UK Pay callback, auto-submit the form instead of
       // showing CYA again. The payment is already pre-authorized.
       if (request.query.paymentComplete === 'true') {
@@ -195,11 +207,12 @@ export class SummaryPageController extends QuestionPageController {
 
       await this.reconcilePaymentState(request, context)
 
-      const viewModel = this.getSummaryViewModel(request, context)
+      const viewModel = this.getSummaryViewModel(request, context, translator)
 
       viewModel.hasMissingNotificationEmail =
         await this.hasMissingNotificationEmail(request, context)
 
+      viewModel.t = t
       return h.view(viewName, viewModel)
     }
   }
@@ -270,7 +283,8 @@ export class SummaryPageController extends QuestionPageController {
     checkEmailAddressForLiveFormSubmission(notificationEmail, isPreview)
 
     if (notificationEmail) {
-      const viewModel = this.getSummaryViewModel(request, context)
+      const translator = this.getTranslator(request)
+      const viewModel = this.getSummaryViewModel(request, context, translator)
 
       try {
         await submitForm(
@@ -279,7 +293,8 @@ export class SummaryPageController extends QuestionPageController {
           request,
           viewModel,
           model,
-          notificationEmail
+          notificationEmail,
+          translator
         )
       } catch (error) {
         return this.handleSubmissionError(error, request, h)
@@ -388,12 +403,17 @@ export class SummaryPageController extends QuestionPageController {
     request: FormRequestPayload,
     h: FormResponseToolkit
   ) {
+    const { t } = this.getTranslator(request)
+
     const helpUrl = error.helpLink ?? DEFAULT_PAYMENT_HELP_URL
-    const helpLinkHtml = ` or you can <a href="${helpUrl}" target="_blank" rel="noopener noreferrer" class="govuk-link">contact us (opens in new tab)</a> and quote your reference number to arrange a refund`
+    const contactUsLink = `<a href="${helpUrl}" target="_blank" rel="noopener noreferrer" class="govuk-link">${t('pages.summary.contactUsLinkText')}</a>`
+    const helpLinkHtml = t('pages.summary.submissionFailedContactSuffix', {
+      contactUsLink
+    })
 
     const govukError = createError(
       'submission',
-      `There was a problem and your form was not submitted. Try submitting the form again${helpLinkHtml}.`
+      `${t('pages.summary.submissionFailed')}${helpLinkHtml}.`
     )
 
     request.yar.flash(COMPONENT_STATE_ERROR, govukError, true)
@@ -420,7 +440,8 @@ export async function submitForm(
   request: FormRequestPayload,
   summaryViewModel: SummaryViewModel,
   model: FormModel,
-  emailAddress: string
+  emailAddress: string,
+  translator: Translator
 ) {
   await finaliseComponents(request, formMetadata, context, model)
 
@@ -434,6 +455,7 @@ export async function submitForm(
   const items = getFormSubmissionData(
     summaryViewModel.context,
     summaryViewModel.details,
+    translator,
     model
   )
 
@@ -444,6 +466,7 @@ export async function submitForm(
       items,
       emailAddress,
       request.yar.id,
+      translator,
       summaryViewModel.context.referenceNumber
     )
 
@@ -523,6 +546,7 @@ function submitData(
   items: DetailItem[],
   retrievalKey: string,
   sessionId: string,
+  translator: Translator,
   referenceNumber: string
 ) {
   const { formSubmissionService } = model.services
@@ -532,8 +556,8 @@ function submitData(
     sessionId,
     retrievalKey,
     referenceNumber,
-    main: buildMainRecords(items),
-    repeaters: buildRepeaterRecords(items)
+    main: buildMainRecords(items, translator),
+    repeaters: buildRepeaterRecords(items, translator)
   }
   return submit(payload)
 }
@@ -541,6 +565,7 @@ function submitData(
 export function getFormSubmissionData(
   context: FormContext,
   details: Detail[],
+  translator: Translator,
   model: FormModel
 ) {
   const items = context.relevantPages
@@ -551,7 +576,7 @@ export function getFormSubmissionData(
     )
     .flat()
 
-  const paymentItems = getPaymentFieldItems(context, model)
+  const paymentItems = getPaymentFieldItems(context, translator, model)
 
   return [...items, ...paymentItems]
 }
@@ -562,6 +587,7 @@ export function getFormSubmissionData(
  */
 function getPaymentFieldItems(
   context: FormContext,
+  translator: Translator,
   model: FormModel
 ): DetailItemField[] {
   const items: DetailItemField[] = []
@@ -577,7 +603,7 @@ function getPaymentFieldItems(
           field,
           state: context.state,
           href: page.href,
-          value: field.getDisplayStringFromState(context.state)
+          value: field.getDisplayStringFromState(context.state, translator)
         })
       }
     }