@defra/forms-model 3.0.611 → 3.0.613

package/src/form/form-editor/__stubs__/preview.js

@@ -236,6 +236,31 @@ export class LocationPreviewElements extends QuestionPreviewElements {
   }
 }
 
+/**
+ * @implements {PaymentElements}
+ */
+export class PaymentPreviewElements extends QuestionPreviewElements {
+  /**
+   * @param {BaseSettings & {paymentAmount: number, paymentDescription: string}} elements
+   */
+  constructor({ paymentAmount, paymentDescription, ...elements }) {
+    super(elements)
+    this._paymentAmount = paymentAmount
+    this._paymentDescription = paymentDescription
+  }
+
+  /**
+   * @returns {PaymentSettings}
+   */
+  get values() {
+    return {
+      ...super.values,
+      paymentAmount: this._paymentAmount,
+      paymentDescription: this._paymentDescription
+    }
+  }
+}
+
 /**
  * @implements {PageOverviewElements}
  */
@@ -452,5 +477,5 @@ export class NumberPreviewElements {
 /**
  * @import { ListElement } from  '~/src/form/form-editor/types.js'
  * @import { PagePreviewPanelMacro } from '~/src/form/form-editor/macros/types.js'
- * @import { BaseSettings, ListElements, NumberSettings, RenderContext, QuestionBaseModel, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer, UkAddressElements, UkAddressSettings, DeclarationElements, DeclarationSettings, LocationElements, LocationSettings } from  '~/src/form/form-editor/preview/types.js'
+ * @import { BaseSettings, ListElements, NumberSettings, RenderContext, QuestionBaseModel, QuestionRenderer, AutocompleteElements, PageOverviewElements, PageRenderer, UkAddressElements, UkAddressSettings, DeclarationElements, DeclarationSettings, LocationElements, LocationSettings, PaymentElements, PaymentSettings } from  '~/src/form/form-editor/preview/types.js'
  */

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

@@ -670,7 +670,9 @@ export function govukFieldValueIsString(
     'autoCompleteOptions',
     'classes',
     'prefix',
-    'suffix'
+    'suffix',
+    'paymentAmount',
+    'paymentDescription'
   ].includes(`${govukField.name}`)
 }
 

package/src/form/form-editor/macros/types.ts

@@ -121,6 +121,12 @@ export interface LatLongModel extends QuestionBaseModel {
   }
 }
 
+export interface PaymentModel extends QuestionBaseModel {
+  amount?: string
+  description?: string
+  headingClasses?: string
+}
+
 export interface AppPreviewPanelMacro extends AppPreviewPanelTabsMacro {
   model: QuestionBaseModel
 }

package/src/form/form-editor/preview/controller/page-controller.js

@@ -129,10 +129,16 @@ export class PreviewPageController extends PreviewPageControllerBase {
         }
       : {}
 
+    const headingClasses =
+      'headingClasses' in component.renderInput
+        ? { headingClasses: largeTitle ? 'govuk-heading-l' : 'govuk-heading-m' }
+        : {}
+
     return {
       ...component.renderInput,
       ...fieldset,
-      ...label
+      ...label,
+      ...headingClasses
     }
   }
 

package/src/form/form-editor/preview/controller/summary-page-controller.js

@@ -46,6 +46,11 @@ export class SummaryPageController extends PreviewPageControllerBase {
    * @private
    */
   _unassignedPages = []
+  /**
+   * @type {PaymentPreviewInfo | undefined}
+   * @private
+   */
+  _payment
 
   /**
    * @param {SummaryPageElements} elements
@@ -67,6 +72,7 @@ export class SummaryPageController extends PreviewPageControllerBase {
       elements.isConfirmationEmailSettingsPanel
     this._sections = elements.sections ?? []
     this._unassignedPages = elements.unassignedPages ?? []
+    this._payment = elements.payment
   }
 
   /**
@@ -179,6 +185,13 @@ export class SummaryPageController extends PreviewPageControllerBase {
     return this._unassignedPages
   }
 
+  /**
+   * @returns {PaymentPreviewInfo | undefined}
+   */
+  get payment() {
+    return this._payment
+  }
+
   /**
    * @returns {Markdown[]}
    * @protected
@@ -208,7 +221,7 @@ export class SummaryPageController extends PreviewPageControllerBase {
 /**
  * @import { ComponentDef, ContentComponentsDef, ListComponent, FormComponentsDef } from '~/src/components/types.js'
  * @import { FormDefinition } from '~/src/form/form-definition/types.js'
- * @import { PageRenderer, PagePreviewBaseElements, SummaryPageElements, SectionForPreview } from '~/src/form/form-editor/preview/types.js'
+ * @import { PageRenderer, PagePreviewBaseElements, SummaryPageElements, SectionForPreview, PaymentPreviewInfo } from '~/src/form/form-editor/preview/types.js'
  * @import { SummaryRowActionItem, SummaryRow } from '~/src/form/form-editor/macros/types.js'
  * @import { Markdown } from '~/src/form/form-editor/preview/markdown.js'
  */

package/src/form/form-editor/preview/helpers.js

@@ -47,6 +47,10 @@ import {
   OsGridRefComponentPreviewElements,
   OsGridRefQuestion
 } from '~/src/form/form-editor/preview/os-grid-ref.js'
+import {
+  PaymentComponentPreviewElements,
+  PaymentQuestion
+} from '~/src/form/form-editor/preview/payment.js'
 import { PhoneNumberQuestion } from '~/src/form/form-editor/preview/phone-number.js'
 import { QuestionComponentElements } from '~/src/form/form-editor/preview/question.js'
 import { RadioQuestion } from '~/src/form/form-editor/preview/radio.js'
@@ -93,7 +97,8 @@ const InputFieldComponentDictionary = {
   [ComponentType.OsGridRefField]: OsGridRefQuestion,
   [ComponentType.NationalGridFieldNumberField]: NationalGridQuestion,
   [ComponentType.LatLongField]: LatLongQuestion,
-  [ComponentType.HiddenField]: HiddenQuestion
+  [ComponentType.HiddenField]: HiddenQuestion,
+  [ComponentType.PaymentField]: PaymentQuestion
 }
 
 /**
@@ -154,6 +159,10 @@ const ComponentToPreviewQuestion = {
   [ComponentType.LatLongField]: (component, _definition) => {
     const componentCoerced = /** @type {LatLongFieldComponent} */ (component)
     return new LatLongComponentPreviewElements(componentCoerced)
+  },
+  [ComponentType.PaymentField]: (component, _definition) => {
+    const componentCoerced = /** @type {PaymentFieldComponent} */ (component)
+    return new PaymentComponentPreviewElements(componentCoerced)
   }
 }
 
@@ -202,5 +211,5 @@ export function mapComponentToPreviewQuestion(questionRenderer, definition) {
  * @import { Question } from '~/src/form/form-editor/preview/question.js'
  * @import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
  * @import { FormDefinition } from '~/src/form/form-definition/types.js'
- * @import { AutocompleteFieldComponent, ComponentDef, DeclarationFieldComponent, EastingNorthingFieldComponent, LatLongFieldComponent, MultilineTextFieldComponent, NationalGridFieldNumberFieldComponent, NumberFieldComponent, OsGridRefFieldComponent, SelectFieldComponent, UkAddressFieldComponent, YesNoFieldComponent } from '~/src/components/types.js'
+ * @import { AutocompleteFieldComponent, ComponentDef, DeclarationFieldComponent, EastingNorthingFieldComponent, LatLongFieldComponent, MultilineTextFieldComponent, NationalGridFieldNumberFieldComponent, NumberFieldComponent, OsGridRefFieldComponent, PaymentFieldComponent, SelectFieldComponent, UkAddressFieldComponent, YesNoFieldComponent } from '~/src/components/types.js'
  */

package/src/form/form-editor/preview/index.js

@@ -27,6 +27,7 @@ export * from '~/src/form/form-editor/preview/uk-address.js'
 export * from '~/src/form/form-editor/preview/unsupported-question.js'
 export * from '~/src/form/form-editor/preview/yes-no.js'
 export * from '~/src/form/form-editor/preview/hidden.js'
+export * from '~/src/form/form-editor/preview/payment.js'
 export * from '~/src/form/form-editor/preview/controller/page-controller-base.js'
 export * from '~/src/form/form-editor/preview/controller/page-controller.js'
 export * from '~/src/form/form-editor/preview/controller/guidance-page-controller.js'

package/src/form/form-editor/preview/payment.js

@@ -0,0 +1,142 @@
+import { ComponentType } from '~/src/components/enums.js'
+import { PreviewComponent } from '~/src/form/form-editor/preview/preview.js'
+import {
+  Question,
+  QuestionComponentElements
+} from '~/src/form/form-editor/preview/question.js'
+
+/**
+ * Formats a currency amount with thousand separators and two decimal places
+ * @param {number} value
+ * @param {'en-GB'} [locale] - locale for formatting
+ * @param {'GBP'} [currency] - currency code
+ * @returns {string} Formatted amount (e.g., "£1,234.56")
+ */
+function formatCurrency(value, locale = 'en-GB', currency = 'GBP') {
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency
+  })
+
+  return formatter.format(value)
+}
+
+/**
+ * @implements {PaymentElements}
+ */
+export class PaymentComponentPreviewElements extends QuestionComponentElements {
+  /**
+   * @type {number}
+   * @protected
+   */
+  _paymentAmount = 0
+
+  /**
+   * @type {string}
+   * @protected
+   */
+  _paymentDescription = ''
+
+  /**
+   * @param {PaymentFieldComponent} component
+   */
+  constructor(component) {
+    super(component)
+    this._paymentAmount = component.options.amount
+    this._paymentDescription = component.options.description
+  }
+
+  /**
+   * @returns {PaymentSettings}
+   */
+  get values() {
+    return {
+      ...super.values,
+      paymentAmount: this._paymentAmount,
+      paymentDescription: this._paymentDescription
+    }
+  }
+}
+
+export class PaymentQuestion extends Question {
+  /**
+   * @type {ComponentType}
+   */
+  componentType = ComponentType.PaymentField
+  /**
+   * @type {string}
+   * @protected
+   */
+  _questionTemplate = PreviewComponent.PATH + 'paymentfield.njk'
+  _fieldName = 'PaymentField'
+
+  /**
+   * @type {number}
+   * @protected
+   */
+  _paymentAmount = 0
+
+  /**
+   * @type {string}
+   * @protected
+   */
+  _paymentDescription = ''
+
+  /**
+   * @param {PaymentElements} htmlElements
+   * @param {QuestionRenderer} questionRenderer
+   */
+  constructor(htmlElements, questionRenderer) {
+    super(htmlElements, questionRenderer)
+    this._paymentAmount = htmlElements.values.paymentAmount
+    this._paymentDescription = htmlElements.values.paymentDescription
+  }
+
+  get paymentAmount() {
+    return this._paymentAmount
+  }
+
+  /**
+   * @param {number} val
+   */
+  set paymentAmount(val) {
+    this._paymentAmount = val
+    this.render()
+  }
+
+  get paymentDescription() {
+    return this._paymentDescription
+  }
+
+  /**
+   * @param {string} val
+   */
+  set paymentDescription(val) {
+    this._paymentDescription = val
+    this.render()
+  }
+
+  /**
+   * @protected
+   * @returns {PaymentModel}
+   */
+  _renderInput() {
+    const amount =
+      typeof this._paymentAmount === 'number'
+        ? formatCurrency(this._paymentAmount)
+        : '£0.00'
+
+    return {
+      ...super._renderInput(),
+      amount,
+      description: this._paymentDescription || 'Payment description',
+      headingClasses: 'govuk-heading-m'
+    }
+  }
+}
+
+/**
+ * @import { PaymentSettings, PaymentElements, QuestionRenderer } from '~/src/form/form-editor/preview/types.js'
+ * @import { PaymentModel } from '~/src/form/form-editor/macros/types.js'
+ * @import { PaymentFieldComponent } from '~/src/components/types.js'
+ */

package/src/form/form-editor/preview/types.ts

@@ -100,6 +100,15 @@ export interface LocationElements extends DomElementsBase {
   readonly values: LocationSettings
 }
 
+export interface PaymentSettings extends BaseSettings {
+  paymentAmount: number
+  paymentDescription: string
+}
+
+export interface PaymentElements extends DomElementsBase {
+  readonly values: PaymentSettings
+}
+
 export interface LocationFieldModel extends QuestionBaseModel {
   userClasses: string
   fieldset: {
@@ -169,12 +178,19 @@ export interface SectionForPreview {
   pages: { title: string }[]
 }
 
+export interface PaymentPreviewInfo {
+  hasPayment: boolean
+  description: string
+  amount: string
+}
+
 export interface SummaryPageElements extends PagePreviewBaseElements {
   declaration: boolean
   showConfirmationEmail: boolean
   isConfirmationEmailSettingsPanel: boolean
   sections?: SectionForPreview[]
   unassignedPages?: { title: string }[]
+  payment?: PaymentPreviewInfo
 }
 
 export interface SummaryPageInitialState {
@@ -184,6 +200,7 @@ export interface SummaryPageInitialState {
   isConfirmationEmailSettingsPanel: boolean
   sections?: SectionForPreview[]
   unassignedPages?: { title: string }[]
+  payment?: PaymentPreviewInfo
 }
 
 export type PreviewQuestion =