@defra/forms-model 3.0.608 → 3.0.612

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,126 @@
+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'
+
+/**
+ * @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'
+        ? this._paymentAmount.toFixed(2)
+        : '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 =

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

@@ -304,6 +304,16 @@ export interface FormEditor {
    * Denotes if the UK address question supports postcode lookup
    */
   usePostcodeLookup: string
+
+  /**
+   * Amount of payment in pounds
+   */
+  paymentAmount: string
+
+  /**
+   * Description of the payment (will appear in the payment provider's pages)
+   */
+  paymentDescription: string
 }
 
 export type FormEditorInputPage = Pick<
@@ -371,6 +381,8 @@ export type FormEditorInputQuestion = Pick<
   | 'usePostcodeLookup'
   | 'giveInstructions'
   | 'instructionText'
+  | 'paymentAmount'
+  | 'paymentDescription'
 >
 
 export type FormEditorInputPageSettings = Pick<
@@ -539,6 +551,9 @@ export interface GovukField {
   formGroup?: {
     classes?: string
   }
+  prefix?: {
+    text?: string
+  }
   preContent?: {
     path?: string
   }
@@ -585,6 +600,8 @@ export interface FormEditorGovukField {
   autoCompleteOptions?: GovukField
   usePostcodeLookup?: GovukField
   declarationText?: GovukField
+  paymentAmount?: GovukField
+  paymentDescription?: GovukField
   errorMessage?: { text: string }
 }
 

package/src/pages/helpers.ts

@@ -129,6 +129,12 @@ export function onlyDeclarationComponents(components: ComponentDef[]): boolean {
     .every((component) => component.type === ComponentType.DeclarationField)
 }
 
+export function includesPaymentField(components: ComponentDef[]): boolean {
+  return components.some(
+    (component) => component.type === ComponentType.PaymentField
+  )
+}
+
 const SHOW_REPEATER_CONTROLLERS = [ControllerType.Page, ControllerType.Repeat]
 
 export function showRepeaterSettings(page: Page): boolean {
@@ -142,6 +148,9 @@ export function showRepeaterSettings(page: Page): boolean {
     if (onlyDeclarationComponents(page.components)) {
       return false
     }
+    if (includesPaymentField(page.components)) {
+      return false
+    }
   }
   return true
 }
@@ -218,3 +227,26 @@ export function replaceCustomControllers(definition: FormDefinition) {
     })
   } as FormDefinition
 }
+
+/**
+ * Helper function to determine if the current page contains a payment question
+ * @param page - the page of the form
+ * @returns {boolean}
+ */
+export function isPaymentPage(page: Page | undefined) {
+  if (hasComponentsEvenIfNoNext(page)) {
+    return page.components.some(
+      (comp) => comp.type === ComponentType.PaymentField
+    )
+  }
+  return false
+}
+
+/**
+ * Helper function to determine if the current page is an end page i.e. summary page or payment page
+ * @param page - the page of the form
+ * @returns {boolean}
+ */
+export function isEndPage(page: Page | undefined) {
+  return isSummaryPage(page) || isPaymentPage(page)
+}

package/src/pages/index.ts

@@ -16,7 +16,10 @@ export {
   hasNext,
   hasRepeater,
   includesFileUploadField,
+  includesPaymentField,
   isControllerName,
+  isEndPage,
+  isPaymentPage,
   isSummaryPage,
   replaceCustomControllers,
   showRepeaterSettings,