@defra/forms-model 3.0.686 → 3.0.688

package/schemas/page-schema-v2.json

@@ -385,6 +385,19 @@
                         },
                         "title": "Geometry Types"
                       },
+                      "mapLayers": {
+                        "type": "object",
+                        "description": "Supported map layers",
+                        "properties": {
+                          "sssi": {
+                            "type": "boolean",
+                            "description": "Sites of Special Scientific Interest layer",
+                            "title": "Sssi"
+                          }
+                        },
+                        "additionalProperties": false,
+                        "title": "Map Layers"
+                      },
                       "format": {
                         "type": "string",
                         "description": "Format for telephone number - for TelephoneNumberField only",
@@ -680,6 +693,19 @@
                         },
                         "title": "Geometry Types"
                       },
+                      "mapLayers": {
+                        "type": "object",
+                        "description": "Supported map layers",
+                        "properties": {
+                          "sssi": {
+                            "type": "boolean",
+                            "description": "Sites of Special Scientific Interest layer",
+                            "title": "Sssi"
+                          }
+                        },
+                        "additionalProperties": false,
+                        "title": "Map Layers"
+                      },
                       "format": {
                         "type": "string",
                         "description": "Format for telephone number - for TelephoneNumberField only",
@@ -1059,6 +1085,19 @@
                     },
                     "title": "Geometry Types"
                   },
+                  "mapLayers": {
+                    "type": "object",
+                    "description": "Supported map layers",
+                    "properties": {
+                      "sssi": {
+                        "type": "boolean",
+                        "description": "Sites of Special Scientific Interest layer",
+                        "title": "Sssi"
+                      }
+                    },
+                    "additionalProperties": false,
+                    "title": "Map Layers"
+                  },
                   "format": {
                     "type": "string",
                     "description": "Format for telephone number - for TelephoneNumberField only",

package/schemas/page-schema.json

@@ -248,6 +248,19 @@
                 },
                 "title": "Geometry Types"
               },
+              "mapLayers": {
+                "type": "object",
+                "description": "Supported map layers",
+                "properties": {
+                  "sssi": {
+                    "type": "boolean",
+                    "description": "Sites of Special Scientific Interest layer",
+                    "title": "Sssi"
+                  }
+                },
+                "additionalProperties": false,
+                "title": "Map Layers"
+              },
               "format": {
                 "type": "string",
                 "description": "Format for telephone number - for TelephoneNumberField only",

package/src/__stubs__/examples.js

@@ -0,0 +1,231 @@
+import {
+  buildDeclarationFieldComponent,
+  buildLatLongFieldComponent,
+  buildMarkdownComponent,
+  buildRadiosComponent,
+  buildTextFieldComponent
+} from '~/src/__stubs__/components.js'
+import { buildDefinition } from '~/src/__stubs__/form-definition.js'
+import {
+  buildQuestionPage,
+  buildRepeaterPage,
+  buildSummaryPage
+} from '~/src/__stubs__/pages.js'
+
+export const formDefinitionWithSinglePage = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildTextFieldComponent({
+          id: 'c1',
+          name: 'textField',
+          title: 'This is your first field',
+          hint: 'Help text'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'c2'
+    })
+  ]
+})
+
+export const formDefinitionWithoutSummary = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildTextFieldComponent({
+          id: 'c1',
+          name: 'textField',
+          title: 'This is your first field',
+          hint: 'Help text'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    })
+  ]
+})
+
+export const formDefinitionWithTwoQuestions = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildTextFieldComponent({
+          id: 'q1',
+          name: 'textField',
+          title: 'This is your first question',
+          hint: 'Help text'
+        }),
+        buildTextFieldComponent({
+          id: 'q2',
+          name: 'textField',
+          title: 'This is your second question',
+          hint: 'Help text'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'p2'
+    })
+  ]
+})
+
+export const formDefinitionWithTwoQuestionsAndGuidance = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildMarkdownComponent({ content: 'My markdown text' }),
+        buildTextFieldComponent({
+          id: 'q1',
+          name: 'textField',
+          title: 'This is the first textfield question',
+          hint: 'Help text'
+        }),
+        buildTextFieldComponent({
+          id: 'q2',
+          name: 'textField',
+          title: 'This is the second textfield question',
+          hint: 'Help text'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'p2'
+    })
+  ]
+})
+
+export const formDefinitionWithLocationAndDeclaration = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildLatLongFieldComponent({
+          id: 'q1',
+          name: 'latLongField',
+          title: 'This is the first lat long field question',
+          hint: 'Hint text',
+          options: {
+            instructionText: 'Some instruction text'
+          }
+        }),
+        buildDeclarationFieldComponent({
+          id: 'q2',
+          name: 'declarationField',
+          title: 'This is a declaration question',
+          hint: 'Declaration hint text',
+          content: 'This is the declaration that needs agreeing to',
+          shortDescription: 'Declaration short desc'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'p2'
+    })
+  ]
+})
+
+export const formDefinitionWithRepeater = buildDefinition({
+  pages: [
+    buildRepeaterPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildTextFieldComponent({
+          id: 'q1',
+          name: 'TextField',
+          title: 'This is the first text field field question',
+          hint: 'Hint text',
+          shortDescription: 'Short desc'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'p2'
+    })
+  ]
+})
+
+export const formDefinitionWithNoQuestions = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'p2'
+    })
+  ]
+})
+
+export const formDefinitionWithRadioQuestion = buildDefinition({
+  pages: [
+    buildQuestionPage({
+      id: 'p1',
+      section: 'section',
+      components: [
+        buildRadiosComponent({
+          id: 'q1',
+          name: 'radioField',
+          title: 'This is a radio question',
+          hint: 'Help text',
+          list: 'my-list-id'
+        })
+      ],
+      next: [{ path: '/summary' }]
+    }),
+    buildSummaryPage({
+      id: 'p2'
+    })
+  ],
+  lists: [
+    {
+      name: 'my-list',
+      id: 'my-list-id',
+      type: 'string',
+      title: 'list for radio',
+      items: [
+        {
+          id: 'option-1',
+          text: 'Option 1',
+          hint: {
+            text: 'Option 1 hint'
+          },
+          value: 'Option1'
+        },
+        {
+          id: 'option-2',
+          text: 'Option 2',
+          hint: {
+            text: 'Option 2 hint'
+          },
+          value: 'Option2'
+        },
+        {
+          id: 'option-3',
+          text: 'Option 3',
+          hint: {
+            text: 'Option 3 hint'
+          },
+          value: 'Option3'
+        }
+      ]
+    }
+  ]
+})

package/src/components/helpers.ts

@@ -2,6 +2,7 @@ import { ComponentTypes } from '~/src/components/component-types.js'
 import { ComponentType } from '~/src/components/enums.js'
 import {
   type ComponentDef,
+  type ComponentsDefWithInstructions,
   type ConditionalComponentType,
   type ConditionalComponentsDef,
   type ContentComponentsDef,
@@ -145,6 +146,19 @@ export function isListType(
   return !!type && allowedTypes.includes(type)
 }
 
+export function isTypeWithInstructions(
+  type?: ComponentType
+): type is ComponentsDefWithInstructions['type'] {
+  const allowedTypes = [
+    ComponentType.EastingNorthingField,
+    ComponentType.OsGridRefField,
+    ComponentType.NationalGridFieldNumberField,
+    ComponentType.LatLongField
+  ]
+
+  return !!type && allowedTypes.includes(type)
+}
+
 /**
  * Filter known form components with input fields
  * (excludes content and selection fields)

package/src/components/types.ts

@@ -188,12 +188,17 @@ export interface UkAddressFieldComponent extends FormFieldBase {
   }
 }
 
+export interface MapLayerOptions {
+  sssi?: boolean
+}
+
 // Precise Location Fields
 export interface EastingNorthingFieldComponent extends FormFieldBase {
   type: ComponentType.EastingNorthingField
   options: FormFieldBase['options'] & {
     condition?: string
     customValidationMessage?: string
+    mapLayers?: MapLayerOptions
   }
   schema?: {
     easting?: {
@@ -212,6 +217,7 @@ export interface OsGridRefFieldComponent extends FormFieldBase {
   options: FormFieldBase['options'] & {
     condition?: string
     customValidationMessage?: string
+    mapLayers?: MapLayerOptions
   }
 }
 
@@ -228,6 +234,7 @@ export interface LatLongFieldComponent extends FormFieldBase {
   options: FormFieldBase['options'] & {
     condition?: string
     customValidationMessage?: string
+    mapLayers?: MapLayerOptions
   }
   schema?: {
     latitude?: {
@@ -290,6 +297,7 @@ export interface GeospatialFieldComponent extends FormFieldBase {
     condition?: string
     countries?: GeospatialFieldOptionsCountry[]
     geometryTypes?: GeospatialFieldGeometryTypesEnum[]
+    mapLayers?: MapLayerOptions
   }
   schema?: {
     max?: number
@@ -435,6 +443,13 @@ export type SelectionComponentsDef =
   | SelectFieldComponent
   | YesNoFieldComponent
 
+// Components that have instruction fields
+export type ComponentsDefWithInstructions =
+  | EastingNorthingFieldComponent
+  | OsGridRefFieldComponent
+  | NationalGridFieldNumberFieldComponent
+  | LatLongFieldComponent
+
 // Components that have condition support
 export type ConditionalComponentsDef = Exclude<
   ComponentDef,

package/src/form/form-definition/index.ts

@@ -680,6 +680,25 @@ export const componentSchema = Joi.object<ComponentDef>()
             'Geometry types for geospatial data - for GeospatialField only'
           )
       }).description('Geometry types - for GeospatialField only'),
+      mapLayers: Joi.when('type', {
+        is: Joi.string()
+          .trim()
+          .valid(
+            ComponentType.GeospatialField,
+            ComponentType.EastingNorthingField,
+            ComponentType.LatLongField,
+            ComponentType.OsGridRefField
+          )
+          .required(),
+        then: Joi.object()
+          .keys({
+            sssi: Joi.boolean()
+              .optional()
+              .description('Sites of Special Scientific Interest layer')
+          })
+          .optional()
+          .description('Supported map layers')
+      }).description('Map layers'),
       format: Joi.when('type', {
         is: Joi.string()
           .trim()

package/src/form/form-editor/index.ts

@@ -471,6 +471,11 @@ export const countriesSchema = Joi.array()
   .single()
   .description('The country to be included in a geospatial field')
 
+export const mapLayersSchema = Joi.array()
+  .items(Joi.string().valid('sssi'))
+  .single()
+  .description('The map layers to be displayed')
+
 export const exactFeaturesSchema = Joi.number()
   .empty('')
   .integer()
@@ -693,6 +698,7 @@ export const questionDetailsFullSchema = {
   maxChecksSchema,
   exactChecksSchema,
   countriesSchema,
+  mapLayersSchema,
   minFeaturesSchema,
   maxFeaturesSchema,
   exactFeaturesSchema,

package/src/form/form-editor/translations/translations-config.js

@@ -0,0 +1,186 @@
+import { ComponentType } from '~/src/components/enums.js'
+
+/**
+ * @typedef {object} TranslationRow
+ * @property {string} name - the key name
+ * @property {string} [type] - type of text
+ * @property {string | undefined} englishContent - English text
+ * @property {string | undefined} welshContent - Welsh text
+ * @property {number} [pageNum] - page number
+ * @property {number} [questionNum] - question number
+ * @property {number} [itemNum] - list item number
+ * @property {string} [label] - label for field
+ */
+
+/**
+ * @typedef {{ text: string, href?: string }} ErrorDetailsItem
+ * @typedef {Record<string, ErrorDetailsItem>} ErrorDetails
+ */
+
+/**
+ * @template {object} [Schema=object]
+ * @typedef {object} ValidationFailure
+ * @property {ErrorDetails} formErrors - Formatted errors for error summary
+ * @property {Schema} formValues - Form POST payload from Hapi request
+ */
+
+export const TranslationRowTypes = {
+  PageHeading: 'PageHeading',
+  PageGuidance: 'PageGuidance',
+  RepeatTitle: 'RepeatTitle',
+  QuestionText: 'QuestionText',
+  QuestionHint: 'QuestionHint',
+  ShortDescription: 'ShortDescription',
+  ErrorDescription: 'ErrorDescription',
+  ListItemText: 'ListItemText',
+  ListItemHint: 'ListItemHint',
+  InstructionText: 'InstructionText',
+  DeclarationBody: 'DeclarationBody',
+  PaymentDescription: 'PaymentDescription'
+}
+
+export const TEXTAREA_3_ROWS = 'textarea3'
+export const TEXTAREA_5_ROWS = 'textarea5'
+export const TEXTAREA_12_ROWS_WITH_MARKDOWN = 'textarea12markdown'
+export const LIST_ITEM_HINT = 'listitemhint'
+export const LIST_ITEM_WITH_HINT_FOLLOWING = 'listoptionwithhintfollowing'
+
+/** @type {Record<string, { jsonPrefix: string, jsonSuffix: string, displayName: string, getLabel: (pageNum: number, questionNum?: number, itemNum?: number) => string }>} */
+export const keyConfig = {
+  [TranslationRowTypes.QuestionText]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'title',
+    displayName: 'Question text',
+    getLabel: (pageNum, questionNum) =>
+      `Welsh question text - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.QuestionHint]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'hint',
+    displayName: 'Hint',
+    getLabel: (pageNum, questionNum) =>
+      `Welsh hint - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.ShortDescription]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'shortDescription',
+    displayName: 'Short description',
+    getLabel: (pageNum, questionNum) =>
+      `Welsh short description - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.InstructionText]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'instructionText',
+    displayName: 'Instruction text',
+    getLabel: (pageNum, questionNum) =>
+      `Welsh instruction text - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.DeclarationBody]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'content',
+    displayName: 'Declaration body',
+    getLabel: (pageNum, questionNum) =>
+      `Welsh declaration body - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.PaymentDescription]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'paymentDescription',
+    displayName: 'Payment description',
+    getLabel: (pageNum, questionNum) =>
+      `Welsh payment description - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.ListItemText]: {
+    jsonPrefix: 'listItems',
+    jsonSuffix: 'text',
+    displayName: 'Option',
+    getLabel: (pageNum, questionNum, itemNum) =>
+      `Welsh option ${itemNum} - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.ListItemHint]: {
+    jsonPrefix: 'listItems',
+    jsonSuffix: 'hint',
+    displayName: 'Option hint',
+    getLabel: (pageNum, questionNum, itemNum) =>
+      `Welsh hint for option ${itemNum} - Page ${pageNum}, question ${questionNum}`
+  },
+  [TranslationRowTypes.PageGuidance]: {
+    jsonPrefix: 'components',
+    jsonSuffix: 'content',
+    displayName: 'Guidance text',
+    getLabel: (pageNum) => `Welsh guidance text (markdown) - page ${pageNum}`
+  },
+  [TranslationRowTypes.PageHeading]: {
+    jsonPrefix: 'pages',
+    jsonSuffix: 'title',
+    displayName: 'Page heading',
+    getLabel: (pageNum) => `Welsh page heading - page ${pageNum}`
+  },
+  [TranslationRowTypes.RepeatTitle]: {
+    jsonPrefix: 'pages',
+    jsonSuffix: 'repeatTitle',
+    displayName: 'Repeat name',
+    getLabel: (pageNum) => `Welsh repeat name - page ${pageNum}`
+  }
+}
+
+export const IGNORE_FIELDS = [
+  ComponentType.Details,
+  ComponentType.Html,
+  ComponentType.InsetText,
+  ComponentType.HiddenField
+]
+
+/**
+ * Lookup a translation from a list of translation records.
+ * @param {string} key - The translation key to look up.
+ * @param {Record<string, string> | undefined} translations - The translation values to search.
+ */
+export function lookupTranslation(key, translations) {
+  if (!translations) {
+    return ''
+  }
+  return translations[key] ?? ''
+}
+
+/**
+ * Resolve the underlying content for a translation row from an entity.
+ * Involves using the appropriate child properties if necessary.
+ * @param {string} keyType - The translation row type being resolved.
+ * @param {ComponentDef | Page | Item} entity - The entity that may contain the content to translate.
+ * @param {string} jsonSuffix - The property name to read from the entity.
+ */
+export function drillDown(keyType, entity, jsonSuffix) {
+  /** @type {Partial<Record<string, (entity: ComponentDef | Page | Item) => string>>} */
+  const resolveData = {
+    [TranslationRowTypes.InstructionText]: () =>
+      // @ts-expect-error - dynamic property lookup
+      'options' in entity ? entity.options?.instructionText : '',
+    [TranslationRowTypes.ListItemHint]: () =>
+      // @ts-expect-error - dynamic property lookup
+      'hint' in entity ? entity.hint.text : '',
+    [TranslationRowTypes.DeclarationBody]: () =>
+      'content' in entity ? entity.content : '',
+    [TranslationRowTypes.PaymentDescription]: () =>
+      // @ts-expect-error - dynamic property lookup
+      'options' in entity ? entity.options?.description : ''
+  }
+  const func = resolveData[keyType]
+  if (func) {
+    return func(entity)
+  } else {
+    const entityWithDynamicProperties = /** @type {Record<string, unknown>} */ (
+      /** @type {unknown} */ (entity)
+    )
+    if (typeof entity === 'object') {
+      return jsonSuffix in entityWithDynamicProperties
+        ? /** @type {string} */ (entityWithDynamicProperties[jsonSuffix])
+        : ''
+    }
+  }
+  return entity
+}
+
+/**
+ * @import { ComponentDef } from '~/src/components/types.js'
+ * @import { Item, Page } from '~/src/form/form-definition/types.js'
+ */