@defra/forms-engine-plugin 4.22.0 → 5.0.0-alpha

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"
       }) }}

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/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",

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

@@ -9,23 +9,23 @@
 {%- endmacro -%}
 
 {% call govukNotificationBanner() %}
+  {% set previewModeTranslated = t('common.' + previewMode) %}
   {% if not context.isForceAccess %}
     <p class="govuk-notification-banner__heading govuk-!-margin-bottom-0">
-      This is a preview of a {{ previewMode }} form. Do not enter personal information.
+      {{ t('pages.preview.bannerForce', { previewMode: previewModeTranslated }) }}
     </p>
 
     {{ _closeLink() }}
   {% else %}
     <p class="govuk-notification-banner__heading govuk-!-margin-bottom-0">
-      This is a preview of a {{ previewMode }} form page you are editing.
+      {{ t('pages.preview.bannerText', { previewMode: previewModeTranslated }) }}
     </p>
 
     {{ _closeLink() }}
 
     {% if hasPreviousPages %}
       <p class="govuk-body govuk-!-margin-top-2">
-        It depends on answers from earlier pages in the form. In the live
-        version, users will need to complete those questions first.
+        {{ t('pages.preview.previousPages') }}
       </p>
     {% endif %}
   {% endif %}

package/src/server/plugins/engine/views/partials/warn-missing-notification-email.html

@@ -1,10 +1,9 @@
 {% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
 
-{% set html %}
-    If you want to receive a test email, <a target="_blank" rel="noopener noreferrer" class="govuk-link" href="{{ config.designerUrl }}/library/{{ slug }}/edit/notification-email">enter the email address (opens in new tab)</a> you want form submissions to go to.
-{% endset %}
+{% set linkText %}{{ t('pages.preview.warnMissingNotificationEmail.linkText') }}{% endset %}
+{% set linkHtml %}<a target="_blank" rel="noopener noreferrer" class="govuk-link" href="{{ config.designerUrl }}/library/{{ slug }}/edit/notification-email">{{ linkText }}</a>{% endset %}
 
 {{ govukWarningText({
-    html: html,
-    iconFallbackText: "Warning"
+    html: t('pages.preview.warnMissingNotificationEmail.body', { link: linkHtml }),
+    iconFallbackText: t('common.warningIconFallback')
 }) }}

package/src/server/plugins/engine/views/repeat-list-summary.html

@@ -13,7 +13,7 @@
 
       {% if errors %}
         {{ govukErrorSummary({
-          titleText: "There is a problem",
+          titleText: t('errors.title'),
           errorList: errors
         }) }}
       {% endif %}
@@ -29,14 +29,14 @@
 
         <div class="govuk-button-group">
           {{ govukButton({
-            text: "Continue",
+            text: t('pages.repeater.continue'),
             name: "action",
             value: "continue",
             preventDoubleClick: true
           }) }}
 
           {{ govukButton({
-            text: "Add another",
+            text: t('pages.repeater.addAnother'),
             name: "action",
             value: "add-another",
             classes: "govuk-button--secondary",
@@ -45,7 +45,7 @@
 
           {% if allowSaveAndExit %}
             {{ govukButton({
-              text: "Save and exit",
+              text: t('pages.repeater.saveAndExit'),
               classes: "govuk-button--secondary",
               name: "action",
               value: "save-and-exit",

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

@@ -17,14 +17,14 @@
       {% if paymentState and paymentState.preAuth and paymentState.preAuth.status == 'success' %}
         {{ govukNotificationBanner({
           type: "success",
-          titleText: "Success",
-          html: "<h3 class=\"govuk-notification-banner__heading\">We have your payment details</h3><p class=\"govuk-body\">Your payment is on hold. We will charge you when you submit the form.</p>"
+          titleText: t('pages.summary.paymentSuccessBannerTitle'),
+          html: "<h3 class=\"govuk-notification-banner__heading\">" + t('pages.summary.paymentSuccessTitle') + "</h3><p class=\"govuk-body\">" + t('pages.summary.paymentSuccessBody') + "</p>"
         }) }}
       {% endif %}
 
       {% if errors %}
         {{ govukErrorSummary({
-          titleText: "There is a problem",
+          titleText: t('errors.title'),
           errorList: checkErrorTemplates(errors)
         }) }}
       {% endif %}
@@ -65,7 +65,7 @@
         {{ componentList(components) }}
 
         {% if declaration %}
-          <h2 class="govuk-heading-m" id="declaration">Declaration</h2>
+          <h2 class="govuk-heading-m" id="declaration">{{ t('pages.summary.declaration') }}</h2>
           <div class="govuk-body">
           {{ declaration | safe }}
           </div>
@@ -75,12 +75,19 @@
           {% set isDeclaration = declaration or components | length %}
           {% set paymentPending = paymentRequired and not paymentState %}
 
+          {% set submitButtonText = t('pages.summary.submit') %}
+          {% if paymentPending %}
+            {% set submitButtonText = t('pages.summary.payAndSubmit') %}
+          {% endif %}
+          {% if isDeclaration %}
+            {% set submitButtonText = t('pages.summary.acceptAndSubmit') %}
+          {% endif %}
+
           {# The prevent-multiple-clicks CSS class wires up to debounce-click.js to disable the button for 10s.
               For those with JS enabled, it will help prevent multiple submissions when a large form is taking a while to submit.
               When a better fix is implemented, this class can be removed and preventDoubleClick should be set back to true. #}
           {{ govukButton({
-            text: "Pay and submit" if paymentPending else ("Accept and submit" if isDeclaration else "Submit"),
-            classes: "prevent-multiple-clicks",
+            text: submitButtonText,
             name: "action",
             value: "send",
             preventDoubleClick: false
@@ -88,7 +95,7 @@
 
           {% if allowSaveAndExit %}
             {{ govukButton({
-              text: "Save and exit",
+              text: t('pages.summary.saveAndExit'),
               classes: "govuk-button--secondary",
               name: "action",
               value: "save-and-exit",