fix(DF-626): payment formatting and add test (#305)

* ix: payment formatting and add test

* chore: update payment-test.yaml to change payment amount from 300 to 10000

* refactor: improve currency formatting and add tests

Author: mokhld

src/server/forms/payment-test.yaml

@@ -27,7 +27,7 @@ pages:
         type: PaymentField
         options:
           required: true
-          amount: 300
+          amount: 10000
           description: Processing fee for your application.
     next:
       - path: '/summary'

src/server/plugins/engine/components/PaymentField.test.ts

@@ -196,7 +196,7 @@ describe('PaymentField', () => {
             label: { text: def.title },
             name: 'myComponent',
             id: 'myComponent',
-            amount: '100.00',
+            amount: '£100.00',
             attributes: {},
             description: 'Test payment description'
           })
@@ -220,7 +220,7 @@ describe('PaymentField', () => {
             label: { text: def.title },
             name: 'myComponent',
             id: 'myComponent',
-            amount: '100.00',
+            amount: '£100.00',
             attributes: {},
             description: 'Test payment description'
           })

src/server/plugins/engine/components/PaymentField.ts

@@ -29,7 +29,10 @@ import {
   type FormSubmissionError,
   type FormSubmissionState
 } from '~/src/server/plugins/engine/types.js'
-import { createPaymentService } from '~/src/server/plugins/payment/helper.js'
+import {
+  createPaymentService,
+  formatCurrency
+} from '~/src/server/plugins/payment/helper.js'
 
 export class PaymentField extends FormComponent {
   declare options: PaymentFieldComponent['options']
@@ -91,7 +94,7 @@ export class PaymentField extends FormComponent {
       return ''
     }
 
-    return `£${value.amount.toFixed(2)} - ${value.description}`
+    return `${formatCurrency(value.amount)} - ${value.description}`
   }
 
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
@@ -105,11 +108,9 @@ export class PaymentField extends FormComponent {
     // When user initially visits the payment page, there is no payment state yet so the amount is read form the form definition.
     const amount = paymentState?.amount ?? this.options.amount
 
-    const formattedAmount = amount.toFixed(2)
-
     return {
       ...viewModel,
-      amount: formattedAmount,
+      amount: formatCurrency(amount),
       description: this.options.description,
       paymentState
     }
@@ -153,7 +154,7 @@ export class PaymentField extends FormComponent {
 
   getContextValueFromState(state: FormSubmissionState) {
     return this.isPaymentState(state)
-      ? `Reference: ${state.reference}\nAmount: ${state.amount.toFixed(2)}`
+      ? `Reference: ${state.reference}\nAmount: ${formatCurrency(state.amount)}`
       : ''
   }
 

src/server/plugins/engine/outputFormatters/human/v1.ts

@@ -16,7 +16,7 @@ import {
 } from '~/src/server/plugins/engine/models/types.js'
 import { type FormContext } from '~/src/server/plugins/engine/types.js'
 import {
-  formatPaymentAmount,
+  formatCurrency,
   formatPaymentDate
 } from '~/src/server/plugins/payment/helper.js'
 
@@ -115,7 +115,7 @@ function appendPaymentSection(paymentItems: DetailItem[], lines: string[]) {
     return
   }
 
-  const formattedAmount = formatPaymentAmount(paymentState.amount)
+  const formattedAmount = formatCurrency(paymentState.amount)
   const dateOfPayment = paymentState.preAuth?.createdAt
     ? formatPaymentDate(paymentState.preAuth.createdAt)
     : ''

src/server/plugins/engine/pageControllers/SummaryPageController.ts

@@ -46,7 +46,7 @@ import {
 } from '~/src/server/plugins/engine/types.js'
 import {
   DEFAULT_PAYMENT_HELP_URL,
-  formatPaymentAmount,
+  formatCurrency,
   formatPaymentDate
 } from '~/src/server/plugins/payment/helper.js'
 import {
@@ -125,7 +125,7 @@ export class SummaryPageController extends QuestionPageController {
       },
       {
         key: { text: 'Total amount' },
-        value: { text: formatPaymentAmount(paymentState.amount) }
+        value: { text: formatCurrency(paymentState.amount) }
       },
       {
         key: { text: 'Reference' },

src/server/plugins/engine/pageControllers/helpers/submission.ts

@@ -7,7 +7,7 @@ import {
   type DetailItemField
 } from '~/src/server/plugins/engine/models/types.js'
 import {
-  formatPaymentAmount,
+  formatCurrency,
   formatPaymentDate
 } from '~/src/server/plugins/payment/helper.js'
 
@@ -71,7 +71,7 @@ export function buildPaymentRecords(item: DetailItemField): SubmitRecord[] {
     {
       name: `${item.name}_paymentAmount`,
       title: 'Payment amount',
-      value: formatPaymentAmount(paymentState.amount)
+      value: formatCurrency(paymentState.amount)
     },
     {
       name: `${item.name}_paymentReference`,

src/server/plugins/engine/views/components/paymentfield.html

@@ -28,7 +28,7 @@ <h2 class="govuk-heading-m">{{ model.label.text if model.label and model.label.t
       <p class="govuk-body">You can submit the form after you have added your payment details.</p>
 
       <p class="govuk-body govuk-!-margin-bottom-1">Total amount:</p>
-      <p class="govuk-heading-l govuk-!-margin-bottom-4 govuk-!-padding-top-0">£{{ amount }}</p>
+      <p class="govuk-heading-l govuk-!-margin-bottom-4 govuk-!-padding-top-0">{{ amount }}</p>
 
       {{ govukButton({
         text: "Add payment details",

src/server/plugins/payment/helper.js

@@ -47,10 +47,17 @@ export function formatPaymentDate(isoString) {
 }
 
 /**
- * Formats a payment amount with two decimal places
+ * Formats a currency amount with thousand separators and two decimal places
  * @param {number} amount - amount in pounds
- * @returns {string} Formatted amount (e.g., "£10.00")
+ * @param {'en-GB'} [locale] - locale for formatting
+ * @param {'GBP'} [currency] - currency code
+ * @returns {string} Formatted amount (e.g., "£1,234.56")
  */
-export function formatPaymentAmount(amount) {
-  return `£${amount.toFixed(2)}`
+export function formatCurrency(amount, locale = 'en-GB', currency = 'GBP') {
+  const formatter = new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency
+  })
+
+  return formatter.format(amount)
 }

src/server/plugins/payment/helper.test.js

@@ -1,6 +1,6 @@
 import { config } from '~/src/config/index.js'
 import {
-  formatPaymentAmount,
+  formatCurrency,
   formatPaymentDate,
   getPaymentApiKey
 } from '~/src/server/plugins/payment/helper.js'
@@ -41,12 +41,20 @@ describe('formatPaymentDate', () => {
   })
 })
 
-describe('formatPaymentAmount', () => {
-  it('should format whole number with two decimal places', () => {
-    expect(formatPaymentAmount(10)).toBe('£10.00')
+describe('formatCurrency', () => {
+  it('should format whole number with currency symbol', () => {
+    expect(formatCurrency(10)).toBe('£10.00')
   })
 
-  it('should format decimal amount', () => {
-    expect(formatPaymentAmount(99.5)).toBe('£99.50')
+  it('should format decimal amount with currency symbol', () => {
+    expect(formatCurrency(99.5)).toBe('£99.50')
+  })
+
+  it('should format large amounts with thousand separators', () => {
+    expect(formatCurrency(1234.56)).toBe('£1,234.56')
+  })
+
+  it('should format very large amounts with thousand separators', () => {
+    expect(formatCurrency(20000)).toBe('£20,000.00')
   })
 })