refactor: improve currency formatting and add tests

Author: mokhld

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

@@ -31,7 +31,7 @@ import {
 } from '~/src/server/plugins/engine/types.js'
 import {
   createPaymentService,
-  formatPaymentAmount
+  formatCurrency
 } from '~/src/server/plugins/payment/helper.js'
 
 export class PaymentField extends FormComponent {
@@ -94,7 +94,7 @@ export class PaymentField extends FormComponent {
       return ''
     }
 
-    return `${formatPaymentAmount(value.amount)} - ${value.description}`
+    return `${formatCurrency(value.amount)} - ${value.description}`
   }
 
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
@@ -108,14 +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 = new Intl.NumberFormat('en-GB', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    }).format(amount)
-
     return {
       ...viewModel,
-      amount: formattedAmount,
+      amount: formatCurrency(amount),
       description: this.options.description,
       paymentState
     }
@@ -159,7 +154,7 @@ export class PaymentField extends FormComponent {
 
   getContextValueFromState(state: FormSubmissionState) {
     return this.isPaymentState(state)
-      ? `Reference: ${state.reference}\nAmount: ${formatPaymentAmount(state.amount)}`
+      ? `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,13 +47,17 @@ export function formatPaymentDate(isoString) {
 }
 
 /**
- * Formats a payment amount with thousand separators and two decimal places
+ * Formats a currency amount with thousand separators and two decimal places
  * @param {number} amount - amount in pounds
+ * @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 new Intl.NumberFormat('en-GB', {
+export function formatCurrency(amount, locale = 'en-GB', currency = 'GBP') {
+  const formatter = new Intl.NumberFormat(locale, {
     style: 'currency',
-    currency: 'GBP'
-  }).format(amount)
+    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,20 +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(formatPaymentAmount(1234.56)).toBe('£1,234.56')
+    expect(formatCurrency(1234.56)).toBe('£1,234.56')
   })
 
   it('should format very large amounts with thousand separators', () => {
-    expect(formatPaymentAmount(20000)).toBe('£20,000.00')
+    expect(formatCurrency(20000)).toBe('£20,000.00')
   })
 })