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

package/src/server/plugins/engine/components/EastingNorthingField.ts

@@ -15,6 +15,7 @@ import {
   getLocationFieldViewModel
 } from './LocationFieldHelpers.js'
 import { NumberField } from './NumberField.js'
+import { getEastingNorthingCountryValidator } from './helpers/geospatial.js'
 import {
   createLowerFirstExpression,
   getTranslatedLabel
@@ -112,6 +113,18 @@ export class EastingNorthingField extends FormComponent {
     )
 
     this.options = options
+
+    const country = options.countries?.at(0)
+
+    if (country) {
+      this.collection.formSchema = this.collection.formSchema.custom(
+        getEastingNorthingCountryValidator(this, country)
+      )
+      this.collection.stateSchema = this.collection.stateSchema.custom(
+        getEastingNorthingCountryValidator(this, country)
+      )
+    }
+
     this.formSchema = this.collection.formSchema
     this.stateSchema = this.collection.stateSchema
   }
@@ -164,6 +177,24 @@ export class EastingNorthingField extends FormComponent {
     return getLocationFieldViewModel(this, viewModel, context)
   }
 
+  getErrors(
+    translator: Translator,
+    errors?: FormSubmissionError[]
+  ): FormSubmissionError[] | undefined {
+    const fieldErrors = super.getErrors(translator, errors)
+
+    fieldErrors?.forEach((err) => {
+      if (err.context?.country) {
+        err.text = translator.t(
+          'components.eastingNorthingField.wrongCountry',
+          { country: err.context.country }
+        )
+      }
+    })
+
+    return fieldErrors
+  }
+
   getViewErrors(
     translator: Translator,
     errors?: FormSubmissionError[]

package/src/server/plugins/engine/components/FileUploadField.ts

@@ -52,7 +52,9 @@ export const tempFileSchema = fileSchema.append({
     .string()
     .valid(FileStatus.complete, FileStatus.rejected, FileStatus.pending)
     .required(),
-  errorMessage: joi.string().optional()
+  errorMessage: joi.string().optional(),
+  errorCode: joi.string().optional(),
+  errorParams: joi.any().optional()
 })
 
 export const formFileSchema = fileSchema.append({

package/src/server/plugins/engine/components/LocationFieldHelpers.ts

@@ -1,6 +1,6 @@
 import { type Context, type CustomValidator } from 'joi'
 
-import { type EastingNorthingField } from './EastingNorthingField.js'
+import { EastingNorthingField } from './EastingNorthingField.js'
 import { isFormValue } from './FormComponent.js'
 import { type GeospatialField } from './GeospatialField.js'
 import { type LatLongField } from './LatLongField.js'
@@ -190,7 +190,11 @@ export function getLocationFieldViewModel(
     ...viewModel,
     fieldset,
     items,
-    mapLayers: getMapLayers(component)
+    mapLayers: getMapLayers(component),
+    country:
+      component instanceof EastingNorthingField
+        ? component.options.countries?.at(0)
+        : undefined
   }
 
   if (component.options.instructionText) {

package/src/server/plugins/engine/components/helpers/geospatial.ts

@@ -5,8 +5,13 @@ import {
 } from '@defra/forms-model'
 import Bourne from '@hapi/bourne'
 import { booleanWithin } from '@turf/boolean-within'
+import { point } from '@turf/helpers'
+// @ts-expect-error - no types
+import OsGridRef from 'geodesy/osgridref.js'
 import JoiBase, { type CustomValidator } from 'joi'
 
+import { type EastingNorthingField } from '../EastingNorthingField.js'
+import { type EastingNorthingState } from '../types.js'
 import {
   type Coordinates,
   type Feature,
@@ -171,3 +176,51 @@ export function getGeospatialSchema(
     def
   )
 }
+
+export function getEastingNorthingCountryValidator(
+  field: EastingNorthingField,
+  country: GeospatialFieldOptionsCountry
+) {
+  const validateCountryBounds: CustomValidator = (value, helpers) => {
+    const countryFeature = countries.features.find(
+      (feature) => feature.id === country
+    )
+
+    if (!countryFeature) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return value
+    }
+
+    const eastingNorthing = field.getFormValueFromState(
+      value as EastingNorthingState
+    )
+
+    if (!eastingNorthing) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+      return value
+    }
+
+    const gridRef = new OsGridRef(
+      eastingNorthing.easting,
+      eastingNorthing.northing
+    )
+    const latLong = gridRef.toLatLon()
+    const coord = point([latLong.longitude, latLong.latitude])
+    const within = booleanWithin(coord, countryFeature)
+
+    if (!within) {
+      return helpers.error(
+        'any.custom',
+        {
+          country: countriesDesc[country as GeospatialFieldOptionsCountryEnum]
+        },
+        { path: [field.name] }
+      )
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+    return value
+  }
+
+  return validateCountryBounds
+}

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

@@ -129,7 +129,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": {
@@ -244,7 +250,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 +326,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

@@ -113,7 +113,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": {
@@ -224,7 +230,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 +298,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/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/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/views/components/_location-field-base.html

@@ -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/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'
  */