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

package/src/server/plugins/engine/pageControllers/__stubs__/translator.ts

@@ -0,0 +1,28 @@
+import { t as resolveKey } from '../../i18n/index.js'
+import { type Translator } from '../../i18n/types.js'
+
+/**
+ * Shared Translator stub for tests where translation content is not the focus.
+ * Uses the real English i18n keys so tests that assert on English text still pass.
+ * Each tX function resolves the entity's property via the real English t() so
+ * i18n key constants (e.g. 'components.yesNoField.yes') resolve to their English
+ * values ("Yes") rather than being returned verbatim.
+ */
+function resolveEntity(entity: unknown, prop: string): string {
+  if (typeof entity !== 'object' || entity === null) return ''
+  const raw =
+    ((entity as Record<string, unknown>)[prop] as string | undefined) ?? ''
+  if (!raw) return ''
+  return resolveKey(raw, 'en-GB') || raw
+}
+
+export const stubTranslator: Translator = {
+  t: (key: string, opts?: Record<string, unknown>) =>
+    resolveKey(key, 'en-GB', opts),
+  tForm: (prop) => resolveEntity({}, prop),
+  tPage: (entity, prop) => resolveEntity(entity, prop as string),
+  tComponent: (entity, prop) => resolveEntity(entity, prop as string),
+  tSection: (entity, prop) => resolveEntity(entity, prop as string),
+  tListItem: (entity, prop) => resolveEntity(entity, prop as string),
+  language: 'en-GB'
+}

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

@@ -65,12 +65,14 @@ export class PaymentSubmissionError extends Error {
   static checkPaymentAmount(
     stateAmount: number,
     expectedAmount: number | undefined,
-    component: FormComponent
+    component: FormComponent,
+    t: (key: string) => string
   ) {
     if (stateAmount / 100 !== expectedAmount) {
+      const message = t('components.paymentField.paymentAmountMismatch')
       throw new PaymentPreAuthError(
         component,
-        'The pre-authorised payment amount is somehow different from that requested. Try adding payment details again.',
+        message,
         true,
         PaymentErrorTypes.PaymentIncomplete
       )

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

@@ -3,6 +3,7 @@ import { type SubmitPayload } from '@defra/forms-model'
 import { GeospatialField } from '../../components/GeospatialField.js'
 import { PaymentField } from '../../components/PaymentField.js'
 import { getAnswer } from '../../components/helpers/components.js'
+import { type Translator } from '../../i18n/types.js'
 import {
   type DetailItem,
   type DetailItemField
@@ -23,7 +24,10 @@ export interface SubmitRecord {
  * Regular fields are converted to single records, while PaymentField
  * components are expanded into four separate records.
  */
-export function buildMainRecords(items: DetailItem[]): SubmitRecord[] {
+export function buildMainRecords(
+  items: DetailItem[],
+  translator: Translator
+): SubmitRecord[] {
   const fieldItems = items.filter(
     (item): item is DetailItemField => 'field' in item
   )
@@ -46,7 +50,7 @@ export function buildMainRecords(items: DetailItem[]): SubmitRecord[] {
       records.push({
         name: item.name,
         title: item.label,
-        value: getAnswer(item.field, item.state, { format: 'data' })
+        value: getAnswer(item.field, item.state, translator, { format: 'data' })
       })
     }
   }
@@ -102,7 +106,8 @@ export function buildPaymentRecords(item: DetailItemField): SubmitRecord[] {
  * Builds the repeater submission records from repeater items.
  */
 export function buildRepeaterRecords(
-  items: DetailItem[]
+  items: DetailItem[],
+  translator: Translator
 ): SubmitPayload['repeaters'] {
   return items
     .filter((item) => 'subItems' in item)
@@ -119,7 +124,9 @@ export function buildRepeaterRecords(
             const formValue = subItem.field.getFormValueFromState(subItem.state)
             value = formValue === undefined ? '' : JSON.stringify(formValue)
           } else {
-            value = getAnswer(subItem.field, subItem.state, { format: 'data' })
+            value = getAnswer(subItem.field, subItem.state, translator, {
+              format: 'data'
+            })
           }
 
           return {

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

@@ -1,7 +1,6 @@
 // Declaration above is needed for: https://github.com/hapijs/joi/issues/3064
 
-import joi, {
-  type JoiExpression,
+import {
   type LanguageMessages,
   type LanguageMessagesExt,
   type ReferenceOptions,
@@ -9,6 +8,11 @@ import joi, {
 } from 'joi'
 
 import { lowerFirstPreserveProperNouns } from '../components/helpers/index.js'
+import {
+  buildValidationMessages,
+  type ValidationMessages
+} from '../i18n/buildValidationMessages.js'
+import { t } from '../i18n/index.js'
 
 export const opts = {
   functions: {
@@ -17,58 +21,13 @@ export const opts = {
 } as ReferenceOptions
 
 /**
- * see @link https://joi.dev/api/?v=17.4.2#template-syntax for template syntax
+ * Module-level English message templates — built via the same factory used per-form.
+ * Components that have not yet been migrated to use model.validationMessages still
+ * import messageTemplate directly and get the English version.
  */
-export const messageTemplate: Record<string, JoiExpression> = {
-  declarationRequired: joi.expression(
-    'You must confirm you understand and agree with the {{lowerFirst(#label)}} to continue',
-    opts
-  ) as JoiExpression,
-  required: joi.expression(
-    'Enter {{lowerFirst(#label)}}',
-    opts
-  ) as JoiExpression,
-  selectRequired: joi.expression(
-    'Select {{lowerFirst(#label)}}',
-    opts
-  ) as JoiExpression,
-  selectYesNoRequired: '{{#label}} - select yes or no',
-  max: '{{#label}} must be {{#limit}} characters or less',
-  min: '{{#label}} must be {{#limit}} characters or more',
-  minMax: '{{#label}} must be between {{#min}} and {{#max}} characters',
-  pattern: joi.expression(
-    'Enter a valid {{lowerFirst(#label)}}',
-    opts
-  ) as JoiExpression,
-  format: joi.expression(
-    'Enter {{lowerFirst(#label)}} in the correct format',
-    opts
-  ) as JoiExpression,
-  unicode: '{{#label}} includes invalid characters, for example, long dashes',
-  number: '{{#label}} must be a number',
-  numberPrecision: '{{#label}} must have {{#limit}} or fewer decimal places',
-  numberInteger: '{{#label}} must be a whole number',
-  numberMin: '{{#label}} must be {{#limit}} or higher',
-  numberMax: '{{#label}} must be {{#limit}} or lower',
-  maxWords: '{{#label}} must be {{#limit}} words or fewer',
-
-  // Nested fields use component title
-
-  objectRequired: joi.expression('Enter {{#label}}', opts) as JoiExpression,
-  objectMissing: joi.expression(
-    '{{#title}} must include a {{lowerFirst(#label)}}',
-    opts
-  ) as JoiExpression,
-  dateFormat: '{{#title}} must be a real date',
-  dateMin: '{{#title}} must be the same as or after {{#limit}}',
-  dateMax: '{{#title}} must be the same as or before {{#limit}}',
-  arrayMin: 'Select at least {{#limit}} options from the list',
-  arrayMax: 'Only {{#limit}} can be selected from the list',
-  arrayLength: 'Select only {{#limit}} options from the list',
-  featuresMin: 'Define at least {{#limit}} features',
-  featuresMax: 'Only {{#limit}} features can be defined',
-  featuresLength: 'Define exactly {{#limit}} features'
-}
+export const messageTemplate: ValidationMessages = buildValidationMessages(
+  (key) => t(key, 'en-GB')
+)
 
 export const messages: LanguageMessagesExt = {
   'string.base': messageTemplate.required,
@@ -105,6 +64,37 @@ export const messages: LanguageMessagesExt = {
 export const messagesPre: LanguageMessages =
   messages as unknown as LanguageMessages
 
+export function buildLanguageMessages(
+  t: (key: string) => string
+): LanguageMessages {
+  const vm = buildValidationMessages(t)
+  return {
+    'string.base': vm.required,
+    'string.min': vm.min,
+    'string.empty': vm.required,
+    'string.max': vm.max,
+    'string.email': vm.format,
+    'string.pattern.base': vm.pattern,
+    'string.maxWords': vm.maxWords,
+    'number.base': vm.number,
+    'number.precision': vm.numberPrecision,
+    'number.integer': vm.numberInteger,
+    'number.unsafe': vm.format,
+    'number.min': vm.numberMin,
+    'number.max': vm.numberMax,
+    'object.required': vm.objectRequired,
+    'object.and': vm.objectMissing,
+    'any.only': vm.selectRequired,
+    'any.required': vm.selectRequired,
+    'any.empty': vm.required,
+    'date.base': vm.dateFormat,
+    'date.format': vm.dateFormat,
+    'date.min': vm.dateMin,
+    'date.max': vm.dateMax,
+    'object.invalidjson': vm.format
+  } as unknown as LanguageMessages
+}
+
 export const validationOptions: ValidationOptions = {
   abortEarly: false,
   messages: messagesPre,

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

@@ -36,6 +36,7 @@ export const plugin = {
       model,
       cache,
       saveAndExit,
+      getLanguage,
       nunjucks: nunjucksOptions,
       viewContext,
       preparePageEventRequestOptions,
@@ -78,6 +79,7 @@ export const plugin = {
     server.expose('viewContext', viewContext)
     server.expose('cacheService', cacheService)
     server.expose('saveAndExit', saveAndExit)
+    server.expose('getLanguage', getLanguage)
     server.expose('baseUrl', baseUrl)
     server.expose('services', services)
 

package/src/server/plugins/engine/routes/index.ts

@@ -43,6 +43,7 @@ import {
   type FormRequest,
   type FormResponseToolkit
 } from '../../../routes/types.js'
+import { resolveLanguage } from '../../../utils/utils.js'
 
 export async function redirectOrMakeHandler(
   request: AnyFormRequest,
@@ -82,7 +83,14 @@ export async function redirectOrMakeHandler(
   state = await importExternalComponentState(request, page, state)
 
   const flash = cacheService.getFlash(request)
-  const context = model.getFormContext(request, state, flash?.errors)
+  const language = resolveLanguage(request)
+  const translator = model.createTranslator(language)
+  const context = model.getFormContext(
+    request,
+    state,
+    flash?.errors,
+    translator
+  )
 
   await copyNotYetValidatedState(request, context)
 

package/src/server/plugins/engine/routes/questions.ts

@@ -44,6 +44,7 @@ import {
   stateSchema
 } from '../../../schemas/index.js'
 import * as httpService from '../../../services/httpService.js'
+import { resolveLanguage } from '../../../utils/utils.js'
 
 async function handleHttpEvent(
   request: AnyFormRequest,
@@ -58,10 +59,13 @@ async function handleHttpEvent(
 
   // TODO: Update structured data POST payload with when helper
   // is updated to removing the dependency on `SummaryViewModel` etc.
-  const viewModel = new SummaryViewModel(request, page, context)
+  const language = resolveLanguage(request)
+  const translator = model.createTranslator(language)
+  const viewModel = new SummaryViewModel(request, page, context, translator)
   const items = getFormSubmissionData(
     viewModel.context,
     viewModel.details,
+    translator,
     model
   )
 

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

@@ -94,3 +94,8 @@ export type {
 
 export * from './schema.js'
 export { FormAdapterSubmissionSchemaVersion } from './enums.js'
+
+export type {
+  FormDefinitionTranslations,
+  Translator
+} from '../i18n/types.js'

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

@@ -32,6 +32,7 @@ export const formAdapterSubmissionMessageMetaSchema =
     isPreview: Joi.boolean().required(),
     notificationEmail: notificationEmailAddressSchema.required(),
     versionMetadata: formVersionMetadataSchema.optional(),
+    language: Joi.string().optional(),
     custom: Joi.object()
       .pattern(/^/, Joi.any())
       .unknown()

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

@@ -11,8 +11,10 @@ import {
 import {
   type PluginProperties,
   type Request,
+  type RequestQuery,
   type ResponseObject
 } from '@hapi/hapi'
+import { type Yar } from '@hapi/yar'
 import { type JoiExpression, type ValidationErrorItem } from 'joi'
 
 import { FormComponent } from './components/FormComponent.js'
@@ -31,6 +33,7 @@ import {
   type LatLongState,
   type MonthYearState
 } from './components/types.js'
+import { type Translator } from './i18n/types.js'
 import { type FormModel } from './models/index.js'
 import { type DetailItemField } from './models/types.js'
 import { type PageController } from './pageControllers/PageController.js'
@@ -199,6 +202,8 @@ export interface FormContext {
   pageMap: Map<string, PageControllerClass>
   componentMap: Map<string, Component>
   referenceNumber: string
+  languages: { name: string; code: string }[]
+  translator: Translator | undefined
 }
 
 export type FormContextRequest = (
@@ -394,6 +399,7 @@ export interface PageViewModelBase extends Partial<ViewContext> {
   feedbackLink?: string
   serviceUrl: string
   phaseTag?: string
+  t?: (key: string, opts?: Record<string, unknown>) => string
 }
 
 export interface ItemDeletePageViewModel extends PageViewModelBase {
@@ -471,6 +477,8 @@ export type SaveAndExitHandler = (
   context: FormContext
 ) => ResponseObject
 
+export type GetLanguageHandler = (query?: RequestQuery, yar?: Yar) => string
+
 export interface ExternalArgs {
   component: ComponentDef
   controller: QuestionPageController
@@ -510,6 +518,7 @@ export interface PluginOptions {
   viewContext: PluginProperties['forms-engine-plugin']['viewContext']
   preparePageEventRequestOptions?: PreparePageEventRequestOptions
   onRequest?: OnRequestCallback
+  getLanguage?: GetLanguageHandler
   baseUrl: string // base URL of the application, protocol and hostname e.g. "https://myapp.com"
   ordnanceSurveyApiKey?: string
   ordnanceSurveyApiSecret?: string
@@ -526,6 +535,7 @@ export interface FormAdapterSubmissionMessageMeta {
   isPreview: boolean
   notificationEmail: string
   versionMetadata?: FormVersionMetadata
+  language?: string
   custom?: Record<string, unknown>
 }
 

package/src/server/plugins/engine/views/components/_location-field-base.html

@@ -61,7 +61,7 @@
   {% set detailsHtml %}
     {% if component.model.instructionText %}
       {{ govukDetails({
-        summaryText: "How to find location details",
+        summaryText: t('components.locationFieldBase.howToFind'),
         html: component.model.instructionText | markdown | safe,
         classes: "govuk-!-margin-top-3"
       }) }}
@@ -70,7 +70,9 @@
 
   {% set hasErrors = showFieldsetError and component.model.errorMessage %}
 
-  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}" data-locationtype="{{component.type | lower}}">
+  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}"
+    data-locationtype="{{component.type | lower}}"
+    data-maplayers="{{component.model.mapLayers}}">
     {{ govukFieldset({
       legend: {
         text: component.model.fieldset.legend.text,

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

@@ -4,9 +4,9 @@
   {% set upload = component.model.upload %}
 
   <div id="uploadedFilesContainer">
-    <h2 class="govuk-heading-m">Uploaded files</h2>
+    <h2 class="govuk-heading-m">{{ t('components.fileUploadField.uploadedFilesHeading') }}</h2>
     {% if upload.count %}
-      <p class="govuk-body" role="alert">{{upload.count}} file{{ "s" if upload.count > 1}} uploaded</p>
+      <p class="govuk-body" role="alert">{{ t('components.fileUploadField.filesCount', { count: upload.count }) }}</p>
       <p class="govuk-body">
       </p>
 
@@ -14,7 +14,7 @@
         {{ govukSummaryList(upload.summaryList) }}
       {% endif %}
     {% else %}
-      <p class="govuk-body">{{upload.count}} files uploaded</p>
+      <p class="govuk-body">{{ t('components.fileUploadField.filesCount', { count: upload.count }) }}</p>
     {% endif %}
   </div>
 {% endmacro %}

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

@@ -1,7 +1,10 @@
 {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
 
 {% macro GeospatialField(component) %}
-  <div class="app-geospatial-field" data-country="{{component.model.country}}" data-geometryTypes="{{component.model.geometryTypes}}">
+  <div class="app-geospatial-field"
+    data-country="{{component.model.country}}"
+    data-geometryTypes="{{component.model.geometryTypes}}"
+    data-maplayers="{{component.model.mapLayers}}">
     {{ govukTextarea(component.model) }}
   </div>
 {% endmacro %}

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

@@ -8,7 +8,7 @@
 
     {% if component.model.instructionText %}
       {{ govukDetails({
-        summaryText: "How to find location details",
+        summaryText: t('components.nationalGridField.howToFind'),
         html: component.model.instructionText | markdown | safe,
         classes: "govuk-!-margin-top-3"
       }) }}

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

@@ -10,7 +10,7 @@
 
     {% if component.model.instructionText %}
       {{ govukDetails({
-        summaryText: "How to find location details",
+        summaryText: t('components.osGridRefField.howToFind'),
         html: component.model.instructionText | markdown | safe,
         classes: "govuk-!-margin-top-3"
       }) }}

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

@@ -11,27 +11,27 @@
   <div class="app-payment-field">
     {% if isPreAuthorised %}
       {# Payment already pre-authorised - show confirmation message #}
-      <h2 class="govuk-heading-m">You have already authorised a payment for this form</h2>
+      <h2 class="govuk-heading-m">{{ t('components.paymentField.preAuthorisedTitle') }}</h2>
 
-      <p class="govuk-body">Continue to submit the form. You will not be charged twice.</p>
+      <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 "Payment details required" }}</h2>
+      <h2 class="govuk-heading-m">{{ model.label.text if model.label and model.label.text else t('components.paymentField.detailsRequired') }}</h2>
 
       <p class="govuk-body">{{ description }}</p>
 
       {{ govukWarningText({
-        text: "You may see a pending transaction in your bank account but you will only be charged when you submit the form.",
-        iconFallbackText: "Warning"
+        text: t('components.paymentField.pendingTransaction'),
+        iconFallbackText: t('common.warningIconFallback')
       }) }}
 
-      <p class="govuk-body">You can submit the form after you have added your payment details.</p>
+      <p class="govuk-body">{{ t('components.paymentField.canSubmitAfterPayment') }}</p>
 
-      <p class="govuk-body govuk-!-margin-bottom-1">Total amount:</p>
+      <p class="govuk-body govuk-!-margin-bottom-1">{{ t('components.paymentField.totalAmountLabel') }}</p>
       <p class="govuk-heading-l govuk-!-margin-bottom-4 govuk-!-padding-top-0">{{ amount }}</p>
 
       {{ govukButton({
-        text: "Add payment details",
+        text: t('components.paymentField.addPaymentDetails'),
         attributes: {
           name: "action",
           value: "external-" + model.name

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

@@ -37,13 +37,13 @@
 
         {% if value %}
           {% set insetHtml %}
-            <strong>Selected address:</strong>
+            <strong>{{ t('components.addressField.selectedAddress') }}</strong>
             <br><br>
             {{ value }}
             <br><br>
             <p class="govuk-body">
               <button class="govuk-link govuk-button--link govuk-!-margin-right-1" name="action"
-                value="external-{{component.model.name}}">Use a different address</button>
+                value="external-{{component.model.name}}">{{ t('components.addressField.useDifferentAddress') }}</button>
             </p>
           {% endset %}
 
@@ -54,14 +54,14 @@
         {% else %}
           <div class="govuk-button-group govuk-!-margin-bottom-0">
             {{ govukButton({
-              text: "Find an address",
+              text: t('components.addressField.findAddress'),
               attributes: {
                 name: "action",
                 value: "external-" + component.model.name
               },
               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">enter address manually</button></p>
+            <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>
           </div>
           {# Include a line break if this is the last component #}
           {% if components[components.length - 1] == component %}

package/src/server/plugins/engine/views/confirmation.html

@@ -8,16 +8,16 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       {{ govukPanel({
-        titleText: pageTitle,
-        html: "Your reference number<br><strong>" + referenceNumber + "</strong>" if showReferenceNumber
+        titleText: t('pages.confirmation.formSubmitted'),
+        html: t('pages.confirmation.referenceNumber') + "<br><strong>" + referenceNumber + "</strong>" if showReferenceNumber
       }) }}
-      <h2 class="govuk-heading-m">What happens next</h2>
+      <h2 class="govuk-heading-m">{{ t('pages.confirmation.whatHappensNext') }}</h2>
       <div class="app-prose-scope">
         {{ submissionGuidance | markdown(3) | safe }}
       </div>
       {% if feedbackLink %}
         <p class="govuk-body">
-          <a href="{{ feedbackLink }}" class="govuk-link govuk-link--no-visited-state">What do you think of this service?</a> (takes 30 seconds)
+          <a href="{{ feedbackLink }}" class="govuk-link govuk-link--no-visited-state">{{ t('pages.confirmation.feedbackLink') }}</a>
         </p>
       {% endif %}
     </div>

package/src/server/plugins/engine/views/exit.html

@@ -9,17 +9,17 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       {{ govukPanel({
-        titleText: pageTitle or "Your progress has been saved"
+        titleText: pageTitle or t('pages.exit.defaultTitle')
       }) }}
 
-      <h2 class="govuk-heading-m">What happens next</h2>
+      <h2 class="govuk-heading-m">{{ t('pages.exit.whatHappensNext') }}</h2>
       <div class="app-prose-scope">
-        <p class="govuk-body">Your form progress has been saved. You can return to complete your application at any time using the link provided.</p>
+        <p class="govuk-body">{{ t('pages.exit.body') }}</p>
 
         {% if returnUrl %}
           <p class="govuk-body">
             {{ govukButton({
-              text: "Return to application",
+              text: t('pages.exit.returnToApplication'),
               href: returnUrl,
               classes: "govuk-button--secondary"
             }) }}

package/src/server/plugins/engine/views/file-upload.html

@@ -14,15 +14,15 @@
 
     {% if formAction %}
       {{ govukButton({
-        text: "Upload file",
+        text: t('pages.fileUpload.upload'),
         classes: "govuk-button--secondary upload-file-button",
         preventDoubleClick: true,
         disabled: context.isForceAccess
       }) }}
     {% else %}
       {{ govukWarningText({
-        text: "You have reached the maximum number of files. Please remove a file to upload more.",
-        iconFallbackText: "Warning"
+        text: t('pages.fileUpload.maxFilesReached'),
+        iconFallbackText: t('common.warningIconFallback')
       }) }}
     {% endif %}
   </form>

package/src/server/plugins/engine/views/index.html

@@ -13,14 +13,14 @@
 
       {% if showPaymentExpiredNotification %}
         {{ govukNotificationBanner({
-          titleText: "Important",
-          html: '<h3 class="govuk-notification-banner__heading">Your payment has been cancelled</h3><p class="govuk-body">Your payment details were deleted because the form was inactive for 5 days.</p><p class="govuk-body">Add your payment details again.</p>'
+          titleText: t('pages.question.paymentCancelledBannerTitle'),
+          html: '<h3 class="govuk-notification-banner__heading">' + t('pages.question.paymentCancelledTitle') + '</h3><p class="govuk-body">' + t('pages.question.paymentCancelledBody') + '</p><p class="govuk-body">' + t('pages.question.paymentCancelledAction') + '</p>'
         }) }}
       {% endif %}
 
       {% if errors | length and not showPaymentExpiredNotification %}
         {{ govukErrorSummary({
-          titleText: "There is a problem",
+          titleText: t('errors.title'),
           errorList: checkErrorTemplates(errors)
         }) }}
       {% endif %}

package/src/server/plugins/engine/views/item-delete.html

@@ -13,7 +13,7 @@
 
       {% if errors %}
         {{ govukErrorSummary({
-          titleText: "There is a problem",
+          titleText: t('errors.title'),
           errorList: errors
         }) }}
       {% endif %}

package/src/server/plugins/engine/views/partials/form.html

@@ -20,11 +20,11 @@
   {{ componentList(components) }}
 
   {% if isStartPage %}
-    {% set buttonText = "Start now" %}
+    {% set buttonText = t('pages.question.startNow') %}
   {% elif submitButtonText %}
     {% set buttonText = submitButtonText %}
   {% else %}
-    {% set buttonText = "Continue" %}
+    {% set buttonText = t('common.continue') %}
   {% endif %}
 
   <div class="govuk-button-group">
@@ -38,7 +38,7 @@
 
     {% if allowSaveAndExit %}
       {{ govukButton({
-        text: "Save and exit",
+        text: t('common.saveAndExit'),
         classes: "govuk-button--secondary",
         name: "action",
         value: "save-and-exit",