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

package/src/server/plugins/engine/i18n/translations/cy.json

@@ -16,15 +16,61 @@
     "numberMax": "Rhaid i {{#label}} fod yn {{#limit}} neu is",
     "maxWords": "Rhaid i {{#label}} fod yn {{#limit}} o eiriau neu lai",
     "unicode": "Mae {{#label}} yn cynnwys nodau annilys, er enghraifft, dashes hirion",
-    "arrayMin": "Dewiswch o leiaf {{#limit}} o opsiynau o'r rhestr",
-    "arrayMax": "Dim ond {{#limit}} y gellir eu dewis o'r rhestr",
-    "arrayLength": "Dewiswch ddim ond {{#limit}} o opsiynau o'r rhestr",
-    "featuresMin": "Diffiniwch o leiaf {{#limit}} nodwedd",
-    "featuresMax": "Dim ond {{#limit}} nodwedd y gellir eu diffinio",
-    "featuresLength": "Diffiniwch nodweddion {{#limit}} yn union",
-    "filesMin": "Rhaid i chi uwchlwytho {{#limit}} o ffeiliau neu fwy",
-    "filesMax": "Dim ond {{#limit}} o ffeiliau neu lai y gallwch eu huwchlwytho",
-    "filesLength": "Rhaid i chi uwchlwytho'n union {{#limit}} o ffeiliau"
+    "arrayMin_zero": "Dewiswch o leiaf 1 opsiwn o'r rhestr",
+    "arrayMin_one": "Dewiswch o leiaf {{#limit}} opsiwn o'r rhestr",
+    "arrayMin_two": "Dewiswch o leiaf ddau opsiwn o'r rhestr",
+    "arrayMin_few": "Dewiswch o leiaf {{#limit}} opsiwn o'r rhestr",
+    "arrayMin_many": "Dewiswch o leiaf {{#limit}} opsiwn o'r rhestr",
+    "arrayMin_other": "Dewiswch o leiaf {{#limit}} opsiwn o'r rhestr",
+    "arrayMax_zero": "Dim ond {{#limit}} opsiynau y gellir eu dewis o'r rhestr",
+    "arrayMax_one": "Dim ond {{#limit}} opsiwn y gellir ei ddewis o'r rhestr",
+    "arrayMax_two": "Dim ond dwy opsiwn y gellir eu dewis o'r rhestr",
+    "arrayMax_few": "Dim ond {{#limit}} opsiwn y gellir eu dewis o'r rhestr",
+    "arrayMax_many": "Dim ond {{#limit}} opsiwn y gellir eu dewis o'r rhestr",
+    "arrayMax_other": "Dim ond {{#limit}} opsiwn y gellir eu dewis o'r rhestr",
+    "arrayLength_zero": "Dewiswch 0 opsiwn yn unig o'r rhestr",
+    "arrayLength_one": "Dewiswch un opsiwn yn unig o'r rhestr",
+    "arrayLength_two": "Dewiswch {{#limit}} opsiwn yn unig o'r rhestr",
+    "arrayLength_few": "Dewiswch {{#limit}} opsiwn yn unig o'r rhestr",
+    "arrayLength_many": "Dewiswch {{#limit}} opsiwn yn unig o'r rhestr",
+    "arrayLength_other": "Dewiswch {{#limit}} opsiwn yn unig o'r rhestr",
+
+    "featuresMin_zero": "Diffiniwch o leiaf {{#limit}} nodwedd",
+    "featuresMin_one": "Diffiniwch o leiaf un nodwedd",
+    "featuresMin_two": "Diffiniwch o leiaf {{#limit}} nodwedd",
+    "featuresMin_few": "Diffiniwch o leiaf {{#limit}} nodwedd",
+    "featuresMin_many": "Diffiniwch o leiaf {{#limit}} nodwedd",
+    "featuresMin_other": "Diffiniwch o leiaf {{#limit}} nodwedd",
+    "featuresMax_zero": "Dim ond {{#limit}} nodwedd y gellir eu diffinio",
+    "featuresMax_one": "Dim ond {{#limit}} nodwedd y gellir ei diffinio",
+    "featuresMax_two": "Dim ond {{#limit}} nodwedd y gellir eu diffinio",
+    "featuresMax_few": "Dim ond {{#limit}} nodwedd y gellir eu diffinio",
+    "featuresMax_many": "Dim ond {{#limit}} nodwedd y gellir eu diffinio",
+    "featuresMax_other": "Dim ond {{#limit}} nodwedd y gellir eu diffinio",
+    "featuresLength_zero": "Diffiniwch yn union {{#limit}} nodwedd",
+    "featuresLength_one": "Diffiniwch un nodwedd yn union",
+    "featuresLength_two": "Diffiniwch nodweddion {{#limit}} yn union",
+    "featuresLength_few": "Diffiniwch nodweddion {{#limit}} yn union",
+    "featuresLength_many": "Diffiniwch nodweddion {{#limit}} yn union",
+    "featuresLength_other": "Diffiniwch nodweddion {{#limit}} yn union",
+    "filesMin_zero": "Rhaid i chi uwchlwytho {{#limit}} ffeil neu fwy",
+    "filesMin_one": "Rhaid i chi uwchlwytho un ffeil neu fwy",
+    "filesMin_two": "Rhaid i chi uwchlwytho {{#limit}} o ffeiliau neu fwy",
+    "filesMin_few": "Rhaid i chi uwchlwytho {{#limit}} o ffeiliau neu fwy",
+    "filesMin_many": "Rhaid i chi uwchlwytho {{#limit}} o ffeiliau neu fwy",
+    "filesMin_other": "Rhaid i chi uwchlwytho {{#limit}} o ffeiliau neu fwy",
+    "filesMax_zero": "Dim ond {{#limit}} ffeil neu lai y gallwch eu huwchlwytho",
+    "filesMax_one": "Dim ond un ffeil neu lai y gallwch ei huwchlwytho",
+    "filesMax_two": "Dim ond {{#limit}} o ffeiliau neu lai y gallwch eu huwchlwytho",
+    "filesMax_few": "Dim ond {{#limit}} o ffeiliau neu lai y gallwch eu huwchlwytho",
+    "filesMax_many": "Dim ond {{#limit}} o ffeiliau neu lai y gallwch eu huwchlwytho",
+    "filesMax_other": "Dim ond {{#limit}} o ffeiliau neu lai y gallwch eu huwchlwytho",
+    "filesLength_zero": "Rhaid i chi uwchlwytho union {{#limit}} ffeil",
+    "filesLength_one": "Rhaid i chi uwchlwytho union un ffeil",
+    "filesLength_two": "Rhaid i chi uwchlwytho'n union {{#limit}} o ffeiliau",
+    "filesLength_few": "Rhaid i chi uwchlwytho'n union {{#limit}} o ffeiliau",
+    "filesLength_many": "Rhaid i chi uwchlwytho'n union {{#limit}} o ffeiliau",
+    "filesLength_other": "Rhaid i chi uwchlwytho'n union {{#limit}} o ffeiliau"
   },
 
   "errors": {
@@ -44,7 +90,7 @@
     "and": "a",
     "england": "Lloegr",
     "wales": "Cymru",
-    "northernIreland": "Gogledd Iwerddon",
+    "northern-ireland": "Gogledd Iwerddon",
     "scotland": "Yr Alban",
     "sendFeedback": "Anfon adborth"
   },
@@ -129,7 +175,13 @@
       "removeFileTitle": "Ydych chi'n siŵr eich bod chi eisiau dileu'r ffeil hon?",
       "removeFileBody": "Ni allwch adfer ffeiliau a dynnwyd.",
       "removeFileButton": "Dileu ffeil",
-      "cancel": "Canslo"
+      "cancel": "Canslo",
+      "FILE_VIRUS": "Mae'r ffeil a ddewiswyd yn cynnwys firws",
+      "FILE_EMPTY": "Mae'r ffeil a ddewiswyd yn wag",
+      "FILE_TOO_LARGE": "Rhaid i'r ffeil a ddewiswyd fod yn llai na [[maxFileSizeFormatted]]",
+      "FILE_INVALID_TYPE": "Rhaid i'r ffeil a ddewiswyd fod yn [[fileExtensions]]",
+      "FILE_UPLOAD_FAILED": "Ni ellid uwchlwytho'r ffeil a ddewiswyd - rhowch gynnig arall arni",
+      "FILE_ERROR_UNKNOWN": "Gwall anhysbys"
     },
 
     "exit": {
@@ -155,6 +207,16 @@
       "bannerForce": "Rhagolwg o ffurflen [[previewMode]] yw hon. Peidiwch â rhoi gwybodaeth bersonol.",
       "bannerText": "Dyma ragolwg o dudalen ffurflen [[previewMode]] rydych chi'n ei golygu.",
       "previousPages": "Mae'n dibynnu ar atebion o dudalennau cynharach yn y ffurflen. Yn y fersiwn fyw, bydd angen i ddefnyddwyr gwblhau'r cwestiynau hynny yn gyntaf."
+    },
+
+    "formUnavailable": {
+      "title": "Mae'n ddrwg gennyf, nid yw'r ffurflen hon ar gael",
+      "subHeading": "Nid yw '[[formTitle]]' ar gael mwyach.",
+      "contactDetailsHeading": "Manylion cyswllt ar gyfer [[organisationName]]",
+      "telephone": "Ffôn",
+      "callCharges": "Dysgwch am gostau galwadau",
+      "email": "E-bost",
+      "onlineContactForm": "Ffurflen gyswllt ar-lein"
     }
   },
 
@@ -244,7 +306,8 @@
       "eastingDigits": "Rhaid i {{#label}} ar gyfer [[fieldLabel]] fod rhwng 1 a 6 digid",
       "northingDigits": "Rhaid i {{#label}} ar gyfer [[fieldLabel]] fod rhwng 1 a 7 digid",
       "eastingRange": "Rhaid i {{#label}} ar gyfer [[fieldLabel]] fod rhwng [[min]] a [[max]]",
-      "northingRange": "Rhaid i {{#label}} ar gyfer [[fieldLabel]] fod rhwng [[min]] a [[max]]"
+      "northingRange": "Rhaid i {{#label}} ar gyfer [[fieldLabel]] fod rhwng [[min]] a [[max]]",
+      "wrongCountry": "Rhaid i leoliad fod y tu mewn i [[country]]"
     },
 
     "nationalGridField": {
@@ -319,7 +382,10 @@
       "filesCount_two": "Uwchlwythwyd [[count]] ffeil",
       "filesCount_few": "Uwchlwythwyd [[count]] ffeil",
       "filesCount_many": "Uwchlwythwyd [[count]] o ffeiliau",
-      "filesCount_other": "Uwchlwythwyd [[count]] ffeil"
+      "filesCount_other": "Uwchlwythwyd [[count]] ffeil",
+      "chooseFile": "Dewiswch ffeil",
+      "dropFile": "neu ollwng ffeil",
+      "noFileChosen": "Dim ffeil wedi'i dewis"
     },
 
     "characterCount": {

package/src/server/plugins/engine/i18n/translations/en-GB.json

@@ -16,15 +16,24 @@
     "numberMax": "{{#label}} must be {{#limit}} or lower",
     "maxWords": "{{#label}} must be {{#limit}} words or fewer",
     "unicode": "{{#label}} includes invalid characters, for example, long dashes",
-    "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",
-    "filesMin": "You must upload {{#limit}} files or more",
-    "filesMax": "You can only upload {{#limit}} files or less",
-    "filesLength": "You must upload exactly {{#limit}} files"
+    "arrayMin_one": "Select at least {{#limit}} option from the list",
+    "arrayMin_other": "Select at least {{#limit}} options from the list",
+    "arrayMax_one": "Only {{#limit}} option can be selected from the list",
+    "arrayMax_other": "Only {{#limit}} options can be selected from the list",
+    "arrayLength_one": "Select only {{#limit}} option from the list",
+    "arrayLength_other": "Select only {{#limit}} options from the list",
+    "featuresMin_one": "Define at least {{#limit}} feature",
+    "featuresMin_other": "Define at least {{#limit}} features",
+    "featuresMax_one": "Only {{#limit}} feature can be defined",
+    "featuresMax_other": "Only {{#limit}} features can be defined",
+    "featuresLength_one": "Define exactly {{#limit}} feature",
+    "featuresLength_other": "Define exactly {{#limit}} features",
+    "filesMin_one": "You must upload {{#limit}} file or more",
+    "filesMin_other": "You must upload {{#limit}} files or more",
+    "filesMax_one": "You can only upload {{#limit}} file or less",
+    "filesMax_other": "You can only upload {{#limit}} files or less",
+    "filesLength_one": "You must upload exactly {{#limit}} file",
+    "filesLength_other": "You must upload exactly {{#limit}} files"
   },
 
   "errors": {
@@ -44,7 +53,7 @@
     "and": "and",
     "england": "England",
     "wales": "Wales",
-    "northernIreland": "Northern Ireland",
+    "northern-ireland": "Northern Ireland",
     "scotland": "Scotland",
     "sendFeedback": "Send feedback"
   },
@@ -113,7 +122,13 @@
       "removeFileTitle": "Are you sure you want to remove this file?",
       "removeFileBody": "You cannot recover removed files.",
       "removeFileButton": "Remove file",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "FILE_VIRUS": "The selected file contains a virus",
+      "FILE_EMPTY": "The selected file is empty",
+      "FILE_TOO_LARGE": "The selected file must be smaller than [[maxFileSizeFormatted]]",
+      "FILE_INVALID_TYPE": "The selected file must be a [[fileExtensions]]",
+      "FILE_UPLOAD_FAILED": "The selected file could not be uploaded - try again",
+      "FILE_ERROR_UNKNOWN": "Unknown error"
     },
 
     "exit": {
@@ -139,6 +154,16 @@
       "bannerForce": "This is a preview of a [[previewMode]] form. Do not enter personal information.",
       "bannerText": "This is a preview of a [[previewMode]] form page you are editing.",
       "previousPages": "It depends on answers from earlier pages in the form. In the live version, users will need to complete those questions first."
+    },
+
+    "formUnavailable": {
+      "title": "Sorry, this form is unavailable",
+      "subHeading": "'[[formTitle]]' is no longer available.",
+      "contactDetailsHeading": "Contact details for [[organisationName]]",
+      "telephone": "Telephone",
+      "callCharges": "Find out about call charges",
+      "email": "Email",
+      "onlineContactForm": "Online contact form"
     }
   },
 
@@ -224,7 +249,8 @@
       "eastingDigits": "{{#label}} for [[fieldLabel]] must be between 1 and 6 digits",
       "northingDigits": "{{#label}} for [[fieldLabel]] must be between 1 and 7 digits",
       "eastingRange": "{{#label}} for [[fieldLabel]] must be between [[min]] and [[max]]",
-      "northingRange": "{{#label}} for [[fieldLabel]] must be between [[min]] and [[max]]"
+      "northingRange": "{{#label}} for [[fieldLabel]] must be between [[min]] and [[max]]",
+      "wrongCountry": "Location must be within [[country]]"
     },
 
     "nationalGridField": {
@@ -291,7 +317,10 @@
       "uploadFailed": "There was a problem with your uploaded files. Re-upload them before submitting the form again.",
       "uploadedFilesHeading": "Uploaded files",
       "filesCount_one": "[[count]] file uploaded",
-      "filesCount_other": "[[count]] files uploaded"
+      "filesCount_other": "[[count]] files uploaded",
+      "chooseFile": "Choose file",
+      "dropFile": "or drop file",
+      "noFileChosen": "No file chosen"
     },
 
     "characterCount": {

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

@@ -24,6 +24,7 @@ export type FormDefinitionTranslations = Record<
         shortDescription: string
         errorDescription: string
         paymentDescription: string
+        instructionText: string
       }>
     >
     sections: Record<string, Partial<Pick<Section, 'title'>>>

package/src/server/plugins/engine/models/unavailable-view-model.ts

@@ -1,19 +1,40 @@
-import { type FormMetadata, type FormMetadataContact } from '@defra/forms-model'
+import {
+  type FormDefinition,
+  type FormMetadata,
+  type FormMetadataContact
+} from '@defra/forms-model'
+
+import { createFormTranslator } from '../i18n/createFormTranslator.js'
+import { getAvailableLanguages } from '../i18n/languages.js'
+import { type Translator } from '../types/index.js'
 
 export interface UnavailableViewModel {
   pageTitle: string
   formTitle: string
   organisationName: string
   contact?: FormMetadataContact
+  context: { translator: Translator }
+  language: string
+  languages: { code: string; name: string }[]
 }
 
 export function unavailableViewModel(
-  metadata: FormMetadata
+  metadata: FormMetadata,
+  definition: FormDefinition | undefined,
+  language: string
 ): UnavailableViewModel {
+  const translator = createFormTranslator(metadata, definition, language)
+  const { t, tForm } = translator
   return {
-    pageTitle: 'Sorry, this form is unavailable',
-    formTitle: metadata.title,
+    pageTitle: t('pages.formUnavailable.title'),
+    formTitle: tForm('title') || metadata.title,
     organisationName: metadata.organisation,
-    contact: metadata.contact
+    contact: metadata.contact,
+    context: { translator },
+    language,
+    // Always get Welsh and English
+    languages: getAvailableLanguages({
+      metadata: { translations: { cy: {} } }
+    } as unknown as FormDefinition)
   }
 }

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

@@ -42,6 +42,7 @@ import {
   type FormRequestPayload,
   type FormResponseToolkit
 } from '../../../routes/types.js'
+import { joinWithOr } from '../../../utils/utils.js'
 
 const MAX_UPLOADS = 25
 const CDP_UPLOAD_TIMEOUT_MS = 60000 // 1 minute
@@ -285,6 +286,13 @@ export class FileUploadPageController extends QuestionPageController {
       summaryList: formComponent.model.upload?.summaryList ?? { rows: [] },
       uploadingLabel: t('components.fileUploadField.uploading')
     }
+    formComponent.model = {
+      ...formComponent.model,
+      javascript: true,
+      chooseFilesButtonText: t('components.fileUploadField.chooseFile'),
+      dropInstructionText: t('components.fileUploadField.dropFile'),
+      noFileChosenText: t('components.fileUploadField.noFileChosen')
+    }
 
     const index = components.indexOf(formComponent)
 
@@ -451,6 +459,9 @@ export class FileUploadPageController extends QuestionPageController {
 
     const allErrors: FormSubmissionError[] = []
 
+    const translator = this.getTranslator(request)
+    const { t } = translator
+
     for (const file of uploadedFiles) {
       if (file.fileStatus === FileStatus.complete) {
         const perFileState: FileState = {
@@ -465,7 +476,14 @@ export class FileUploadPageController extends QuestionPageController {
         // Collect the error for rejected/pending files.
         const { fileUpload } = this
         const name = fileUpload.name
-        const text = file.errorMessage ?? 'Unknown error'
+        const errorParams = this.expandErrorParams(
+          file.errorParams,
+          t('common.or')
+        )
+        const text = t(
+          `pages.fileUpload.${file.errorCode ?? 'FILE_ERROR_UNKNOWN'}`,
+          errorParams
+        )
         allErrors.push({ path: [name], href: `#${name}`, name, text })
       }
     }
@@ -482,6 +500,29 @@ export class FileUploadPageController extends QuestionPageController {
     }
   }
 
+  /**
+   * Process the error parameters so any arrays get expanded (joined), ready to be passed into the error message
+   * @param errorParams - received from the file upload (may be a number, a string, or a string array)
+   * @param finalSeparator - 'or' in English, and 'neu' in Welsh
+   */
+  private expandErrorParams(
+    errorParams: Record<string, number | string | string[]> | undefined,
+    finalSeparator: string
+  ) {
+    if (!errorParams) {
+      return {}
+    }
+    const expanded = {} as Record<string, number | string>
+    for (const [key, value] of Object.entries(errorParams)) {
+      if (Array.isArray(value)) {
+        expanded[key] = joinWithOr(value, finalSeparator)
+      } else {
+        expanded[key] = value
+      }
+    }
+    return expanded
+  }
+
   /**
    * Checks the payload for a file getting removed
    * and removes it from the upload files if found

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

@@ -26,7 +26,7 @@ export const opts = {
  * import messageTemplate directly and get the English version.
  */
 export const messageTemplate: ValidationMessages = buildValidationMessages(
-  (key) => t(key, 'en-GB')
+  (key, options) => t(key, 'en-GB', options)
 )
 
 export const messages: LanguageMessagesExt = {
@@ -79,7 +79,7 @@ export const messagesPre: LanguageMessages =
   messages as unknown as LanguageMessages
 
 export function buildLanguageMessages(
-  t: (key: string) => string
+  t: (key: string, options?: Record<string, unknown>) => string
 ): LanguageMessages {
   const vm = buildValidationMessages(t)
   return {

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

@@ -245,11 +245,15 @@ export type FileUpload = {
 } & (
   | {
       fileStatus: FileStatus.complete | FileStatus.rejected | FileStatus.pending
+      errorCode?: string
       errorMessage?: string
+      errorParams?: Record<string, number | string | string[]>
     }
   | {
       fileStatus: FileStatus.complete
+      errorCode?: string
       errorMessage?: undefined
+      errorParams?: Record<string, number | string | string[]>
     }
 )
 

package/src/server/plugins/engine/unavailable-response.ts

@@ -2,6 +2,8 @@ import { type Request, type ResponseToolkit, type Server } from '@hapi/hapi'
 
 import { isOfflineBoom } from './form-availability.js'
 import { unavailableViewModel } from './models/unavailable-view-model.js'
+import { type AnyFormRequest } from './types.js'
+import { resolveLanguage } from '../../utils/utils.js'
 
 /**
  * Registers a server-wide onPreResponse extension that intercepts the offline
@@ -17,10 +19,12 @@ export function registerUnavailableResponse(server: Server) {
       return h.continue
     }
 
-    const { metadata } = response.data
+    const { metadata, definition } = response.data
+
+    const language = resolveLanguage(request as unknown as AnyFormRequest)
 
     return h
-      .view('unavailable', unavailableViewModel(metadata))
+      .view('unavailable', unavailableViewModel(metadata, definition, language))
       .header('Cache-Control', 'no-store, no-cache, must-revalidate')
       .header('X-Robots-Tag', 'noindex, nofollow')
       .code(200)

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

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

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

@@ -15,7 +15,7 @@
     {% if formAction %}
       {{ govukButton({
         text: t('pages.fileUpload.upload'),
-        classes: "govuk-button--secondary upload-file-button",
+        classes: "govuk-button--secondary upload-file-button js-hidden",
         preventDoubleClick: true,
         disabled: context.isForceAccess
       }) }}

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

@@ -1,32 +1,35 @@
 {% extends baseLayoutPath %}
 
+{% set t = context.translator.t %}
+{% set tForm = context.translator.tForm %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Sorry, this form is unavailable</h1>
-      <p class="govuk-body">'{{ formTitle }}' is no longer available.</p>
-      <h2 class="govuk-heading-m">Contact details for {{ organisationName }}</h2>
+      <h1 class="govuk-heading-l">{{ t('pages.formUnavailable.title') }}</h1>
+      <p class="govuk-body">{{ t('pages.formUnavailable.subHeading', { formTitle: formTitle }) }}</p>
+      <h2 class="govuk-heading-m">{{ t('pages.formUnavailable.contactDetailsHeading', { organisationName: organisationName }) }}</h2>
 
       {% if contact.phone %}
-        <h3 class="govuk-heading-s">Telephone</h3>
+        <h3 class="govuk-heading-s">{{ t('pages.formUnavailable.telephone') }}</h3>
         <div class="app-prose-scope">
-          {{ contact.phone | markdown(3) | safe }}
+          {{ tForm('contact.phone') | markdown(3) | safe }}
         </div>
-        <p class="govuk-body"><a href="https://www.gov.uk/call-charges" class="govuk-link govuk-link--no-visited-state">Find out about call charges</a></p>
+        <p class="govuk-body"><a href="https://www.gov.uk/call-charges" class="govuk-link govuk-link--no-visited-state">{{ t('pages.formUnavailable.callCharges') }}</a></p>
       {% endif %}
 
       {% if contact.email %}
-        <h3 class="govuk-heading-s">Email</h3>
+        <h3 class="govuk-heading-s">{{ t('pages.formUnavailable.email') }}</h3>
         <ul class="govuk-list">
-          <li><a class="govuk-link govuk-link--no-visited-state" href="mailto:{{ contact.email.address }}">{{ contact.email.address }}</a></li>
-          <li>{{ contact.email.responseTime }}</li>
+          <li><a class="govuk-link govuk-link--no-visited-state" href="mailto:{{ tForm('contact.email.address') }}">{{ tForm('contact.email.address') }}</a></li>
+          <li>{{ tForm('contact.email.responseTime') }}</li>
         </ul>
       {% endif %}
 
       {% if contact.online %}
-        <h3 class="govuk-heading-s">Online contact form</h3>
+        <h3 class="govuk-heading-s">{{ t('pages.formUnavailable.onlineContactForm') }}</h3>
         <ul class="govuk-list">
-          <li><a class="govuk-link govuk-link--no-visited-state" href="{{ contact.online.url }}">{{ contact.online.text }}</a></li>
+          <li><a class="govuk-link govuk-link--no-visited-state" href="{{ tForm('contact.online.url') }}">{{ tForm('contact.online.text') }}</a></li>
         </ul>
       {% endif %}
     </div>

package/src/server/utils/utils.js

@@ -44,6 +44,24 @@ export function resolveLanguage(request) {
 }
 
 /**
- * @import { FormMetadata } from '@defra/forms-model'
+ * Create a comma-separated list with the last seperator being 'or'
+ * @param { string[] | undefined } items
+ * @param {string} [finalSeparator]
+ */
+export function joinWithOr(items, finalSeparator = 'or') {
+  if (!items || items.length === 0) {
+    return ''
+  }
+  if (items.length === 1) {
+    return items[0]
+  }
+  if (items.length === 2) {
+    return `${items[0]} ${finalSeparator} ${items[1]}`
+  }
+
+  return `${items.slice(0, -1).join(', ')} ${finalSeparator} ${items.at(-1)}`
+}
+
+/**
  * @import { AnyFormRequest } from '../plugins/engine/types.js'
  */