ix: payment formatting and add test

Author: mokhld

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,
+  formatPaymentAmount
+} 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 `${formatPaymentAmount(value.amount)} - ${value.description}`
   }
 
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
@@ -105,7 +108,10 @@ 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)
+    const formattedAmount = new Intl.NumberFormat('en-GB', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(amount)
 
     return {
       ...viewModel,
@@ -153,7 +159,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: ${formatPaymentAmount(state.amount)}`
       : ''
   }
 

src/server/plugins/payment/helper.js

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

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

@@ -49,4 +49,12 @@ describe('formatPaymentAmount', () => {
   it('should format decimal amount', () => {
     expect(formatPaymentAmount(99.5)).toBe('£99.50')
   })
+
+  it('should format large amounts with thousand separators', () => {
+    expect(formatPaymentAmount(1234.56)).toBe('£1,234.56')
+  })
+
+  it('should format very large amounts with thousand separators', () => {
+    expect(formatPaymentAmount(20000)).toBe('£20,000.00')
+  })
 })