@defra/forms-model 3.0.687 → 3.0.688

package/dist/types/form/utils/list.d.ts

@@ -1,4 +1,4 @@
-import { type ListComponentsDef } from '../../components/types.js';
+import { type ComponentDef, type ListComponentsDef } from '../../components/types.js';
 import { type FormDefinition, type List } from '../../form/form-definition/types.js';
 /**
  * Given a SelectionComponent finds the associated list
@@ -7,4 +7,11 @@ import { type FormDefinition, type List } from '../../form/form-definition/types
  * @returns {List}
  */
 export declare function findDefinitionListFromComponent(selectionComponent: ListComponentsDef, definition: FormDefinition): List;
+/**
+ * Finds the list in the component, if it exists. Handles a Yes/No list which doesn't link to the list in the normal way
+ * @param { ComponentDef | undefined } component
+ * @param {FormDefinition} definition
+ * @returns { List | undefined }
+ */
+export declare function getListFromComponent(component: ComponentDef | undefined, definition: FormDefinition): List | undefined;
 //# sourceMappingURL=list.d.ts.map

package/dist/types/form/utils/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/form/utils/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EACV,MAAM,qCAAqC,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,+BAA+B,CAC7C,kBAAkB,EAAE,iBAAiB,EACrC,UAAU,EAAE,cAAc,GACzB,IAAI,CASN"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../../src/form/utils/list.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACvB,MAAM,2BAA2B,CAAA;AAElC,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EACV,MAAM,qCAAqC,CAAA;AAE5C;;;;;GAKG;AACH,wBAAgB,+BAA+B,CAC7C,kBAAkB,EAAE,iBAAiB,EACrC,UAAU,EAAE,cAAc,GACzB,IAAI,CASN;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,YAAY,GAAG,SAAS,EACnC,UAAU,EAAE,cAAc,oBAiB3B"}

package/dist/types/form/utils/numbering.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @param {FormDefinition} definition
+ * @param {string} pageId
+ */
+export function getPageNum(definition: FormDefinition, pageId: string): number;
+/**
+ * @param {FormDefinition} definition
+ * @param {string} pageId
+ */
+export function getQuestionsOnPage(definition: FormDefinition, pageId: string): import("../../index.js").ComponentDef[];
+/**
+ * @param {FormDefinition} definition
+ * @param {string} pageId
+ * @param {string} questionId
+ */
+export function getQuestionNum(definition: FormDefinition, pageId: string, questionId: string): number;
+import type { FormDefinition } from '../../form/form-definition/types.js';
+//# sourceMappingURL=numbering.d.ts.map

package/dist/types/form/utils/numbering.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numbering.d.ts","sourceRoot":"","sources":["../../../../src/form/utils/numbering.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH,uCAHW,cAAc,UACd,MAAM,UAQhB;AAED;;;GAGG;AACH,+CAHW,cAAc,UACd,MAAM,2CAKhB;AAED;;;;GAIG;AACH,2CAJW,cAAc,UACd,MAAM,cACN,MAAM,UAWhB;oCAGkC,qCAAqC"}

package/dist/types/index.d.ts

@@ -19,6 +19,8 @@ export * from './form/utils/index.js';
 export * from './form/form-editor/enums.js';
 export * from './form/form-editor/index.js';
 export * from './form/form-editor/preview/index.js';
+export * from './form/form-editor/translations/translations-config.js';
+export * from './form/form-editor/translations/translations.js';
 export * from './form/form-manager/types.js';
 export * from './form/form-manager/errors.js';
 export * from './manage/dead-letter-queues.js';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,uCAAuC,CAAA;AACrD,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wCAAwC,CAAA;AAEtD,mBAAmB,uBAAuB,CAAA;AAC1C,mBAAmB,kCAAkC,CAAA;AACrD,mBAAmB,8BAA8B,CAAA;AACjD,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,mCAAmC,CAAA;AACtD,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,yCAAyC,CAAA;AAC5D,mBAAmB,iCAAiC,CAAA;AACpD,mBAAmB,wCAAwC,CAAA;AAC3D,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,uCAAuC,CAAA;AACrD,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,qCAAqC,CAAA;AACnD,cAAc,qCAAqC,CAAA;AACnD,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,4DAA4D,CAAA;AAC1E,cAAc,qDAAqD,CAAA;AACnE,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wCAAwC,CAAA;AAEtD,mBAAmB,uBAAuB,CAAA;AAC1C,mBAAmB,kCAAkC,CAAA;AACrD,mBAAmB,8BAA8B,CAAA;AACjD,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,mCAAmC,CAAA;AACtD,mBAAmB,qCAAqC,CAAA;AACxD,mBAAmB,yCAAyC,CAAA;AAC5D,mBAAmB,iCAAiC,CAAA;AACpD,mBAAmB,wCAAwC,CAAA;AAC3D,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,uBAAuB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-model",
-  "version": "3.0.687",
+  "version": "3.0.688",
   "description": "A hapi plugin providing the model for Defra forms",
   "homepage": "https://github.com/DEFRA/forms-designer/tree/main/model#readme",
   "types": "dist/types/index.d.ts",

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

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

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

@@ -0,0 +1,137 @@
+import { lookupTranslation } from '~/src/form/form-editor/translations/translations-config.js'
+
+const formNameKey = 'form.title'
+const contactEmailAddressKey = 'form.contact.email.address'
+const contactEmailResponseKey = 'form.contact.email.responseTime'
+const contactOnlineUrlKey = 'form.contact.online.url'
+const contactOnlineTextKey = 'form.contact.online.text'
+const contactPhoneKey = 'form.contact.phone'
+const submissionGuidanceKey = 'form.submissionGuidance'
+const privacyNoticeUrlKey = 'form.privacyNoticeUrl'
+const privacyNoticeTextKey = 'form.privacyNoticeText'
+
+/**
+ * Determine a field value, either from the user-entered payload (validation) or from a translation lookup
+ * @param {string} key
+ * @param {Record<string, string>} translations
+ * @param {ValidationFailure<any>} [validation]
+ * @returns { string | undefined }
+ */
+function getTranslation(key, translations, validation) {
+  return validation?.formValues[key] ?? lookupTranslation(key, translations)
+}
+
+/**
+ * Build all translation rows in the form overview section (metatdata values).
+ * @param {FormMetadata} metadata
+ * @param {FormDefinition} definition
+ * @param {Record<string, string>} translations
+ * @param {ValidationFailure<any>} [validation]
+ * @returns {TranslationRow[]}
+ */
+export function buildOverviewSection(
+  metadata,
+  definition,
+  translations,
+  validation
+) {
+  /** @type {TranslationRow[]} */
+  const rows = []
+
+  rows.push(
+    {
+      name: formNameKey,
+      englishContent: definition.name,
+      welshContent: getTranslation(formNameKey, translations, validation),
+      label: 'Welsh form name'
+    },
+    {
+      name: contactEmailAddressKey,
+      englishContent: metadata.contact?.email?.address ?? 'Not set',
+      welshContent: getTranslation(
+        contactEmailAddressKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh support email address'
+    },
+    {
+      name: contactEmailResponseKey,
+      englishContent: metadata.contact?.email?.responseTime ?? '--',
+      welshContent: getTranslation(
+        contactEmailResponseKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh response time message'
+    },
+    {
+      name: contactOnlineUrlKey,
+      englishContent: metadata.contact?.online?.url ?? 'Not set',
+      welshContent: getTranslation(
+        contactOnlineUrlKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh contact link URL'
+    },
+    {
+      name: contactOnlineTextKey,
+      englishContent: metadata.contact?.online?.text ?? '--',
+      welshContent: getTranslation(
+        contactOnlineTextKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh text for the contact link'
+    },
+    {
+      name: contactPhoneKey,
+      englishContent: metadata.contact?.phone ?? 'Not set',
+      welshContent: getTranslation(contactPhoneKey, translations, validation),
+      label: 'Welsh phone number and opening times'
+    },
+    {
+      name: submissionGuidanceKey,
+      englishContent: metadata.submissionGuidance ?? 'Not set',
+      welshContent: getTranslation(
+        submissionGuidanceKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh information about what happens next'
+    }
+  )
+
+  if (metadata.privacyNoticeType === 'link') {
+    rows.push({
+      name: privacyNoticeUrlKey,
+      englishContent: metadata.privacyNoticeUrl ?? 'Not set',
+      welshContent: getTranslation(
+        privacyNoticeUrlKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh privacy notice URL'
+    })
+  } else {
+    rows.push({
+      name: privacyNoticeTextKey,
+      englishContent: metadata.privacyNoticeText ?? 'Not set',
+      welshContent: getTranslation(
+        privacyNoticeTextKey,
+        translations,
+        validation
+      ),
+      label: 'Welsh privacy notice text'
+    })
+  }
+
+  return /** @type {TranslationRow[]} */ (rows)
+}
+
+/**
+ * @import { FormMetadata } from '~/src/form/form-metadata/types.js'
+ * @import { FormDefinition } from '~/src/form/form-definition/types.js'
+ * @import { TranslationRow, ValidationFailure} from '~/src/form/form-editor/translations/translations-config.js'
+ */