Merge branch 'feat/df-623-payment' of https://github.com/DEFRA/forms-engine-plugin into feat/df-623-payment

Author: jbarnsley10

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-engine-plugin",
-  "version": "4.0.38",
+  "version": "4.0.39",
   "description": "Defra forms engine",
   "type": "module",
   "files": [
@@ -108,6 +108,7 @@
     "lodash": "^4.17.21",
     "marked": "^15.0.12",
     "nunjucks": "^3.2.4",
+    "obscenity": "^0.4.5",
     "outdent": "^0.8.0",
     "pino": "^9.14.0",
     "pino-pretty": "^13.1.2",

package.json

@@ -0,0 +1,8 @@
+@use "govuk-frontend" as *;
+
+.app-payment-field {
+  background-color: govuk-colour("light-grey");
+  border-top: 5px solid govuk-colour("blue");
+  padding: govuk-spacing(4);
+  margin-bottom: govuk-spacing(6);
+}

src/client/stylesheets/_payment-field.scss

@@ -3,6 +3,7 @@
 @use "code";
 @use "tag-env";
 @use "location-fields";
+@use "payment-field";
 
 //  An example of some user-supplied styling
 //  Not great practice but it illustrates the point

src/client/stylesheets/application.scss

@@ -23,7 +23,11 @@ const ordnanceSurveyApiKey = config.get('ordnanceSurveyApiKey')
  * Main entrypoint to the application.
  */
 async function startServer() {
-  const server = await createServer({ ordnanceSurveyApiKey })
+  const server = await createServer({
+    ordnanceSurveyApiKey,
+    // Enable save and exit for devserver
+    saveAndExit: (_request, h) => h.redirect('/')
+  })
   await server.start()
 
   process.send?.('online')

src/index.ts

@@ -61,9 +61,12 @@ export class PaymentField extends FormComponent {
       ? (payload[this.name] as unknown as PaymentState)
       : undefined
 
+    const amount = this.options.amount ?? 0
+    const formattedAmount = amount.toFixed(2)
+
     return {
       ...viewModel,
-      amount: this.options.amount,
+      amount: formattedAmount,
       description: this.options.description,
       paymentState
     }

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

@@ -39,3 +39,18 @@ export interface PaymentStatus {
   }
   createdDate: string
 }
+
+/**
+ * Service interface for GOV.UK Pay integration
+ */
+export interface PaymentService {
+  createPayment(
+    amount: number,
+    description: string,
+    metadata: { formId: string; slug: string }
+  ): Promise<{ paymentId: string; paymentUrl: string }>
+
+  getPaymentStatus(paymentId: string): Promise<PaymentStatus>
+
+  capturePayment(paymentId: string): Promise<boolean>
+}

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

@@ -182,14 +182,28 @@ export class QuestionPageController extends PageController {
       }
     }
 
+    // Check if any PaymentField component needs payment to be added
+    // If so, hide the submit button until payment is ready
+    const hasIncompletePayment = components.some(({ model }) => {
+      // Check if this is a PaymentField by looking for paymentState in model
+      if ('paymentState' in model && 'amount' in model) {
+        const paymentState = model.paymentState as
+          | { preAuth?: { status?: string } }
+          | undefined
+        return !paymentState?.preAuth?.status
+      }
+      return false
+    })
+
     return {
       ...viewModel,
       backLink: this.getBackLink(request, context),
       context,
       showTitle,
       components,
       errors,
-      allowSaveAndExit: this.shouldShowSaveAndExit(request.server)
+      allowSaveAndExit: this.shouldShowSaveAndExit(request.server),
+      showSubmitButton: !hasIncompletePayment
     }
   }
 

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

@@ -12,10 +12,12 @@ import {
 export class StatusPageController extends QuestionPageController {
   declare pageDef: PageStatus
   allowSaveAndExit = false
+  showReferenceNumber = false
 
   constructor(model: FormModel, pageDef: PageStatus) {
     super(model, pageDef)
     this.viewName = 'confirmation'
+    this.showReferenceNumber = model.def.options?.showReferenceNumber ?? false
   }
 
   getRelevantPath() {
@@ -54,7 +56,9 @@ export class StatusPageController extends QuestionPageController {
       return h.view(viewName, {
         ...viewModel,
         submissionGuidance,
-        formName
+        formName,
+        showReferenceNumber: this.showReferenceNumber,
+        referenceNumber: context.referenceNumber
       })
     }
   }

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

@@ -1,4 +1,7 @@
-import { generateUniqueReference } from '~/src/server/plugins/engine/referenceNumbers.js'
+import {
+  convertToDecAlpha,
+  generateUniqueReference
+} from '~/src/server/plugins/engine/referenceNumbers.js'
 
 describe('generateUniqueReference', () => {
   it('should generate a reference number with 3 segments when no prefix is provided', () => {
@@ -30,4 +33,42 @@ describe('generateUniqueReference', () => {
     const referenceNumber2 = generateUniqueReference()
     expect(referenceNumber1).not.toBe(referenceNumber2)
   })
+
+  describe('convertToDecAlpha', () => {
+    it('should generate correct characters in string', () => {
+      const allValuesHexPairs = Array.from(Array(256).keys())
+      expect(convertToDecAlpha(allValuesHexPairs)).toBe(
+        'AAAAAAAAA' +
+          'BBBBBBBBB' +
+          'CCCCCCCC' +
+          'DDDDDDDDD' +
+          'EEEEEEEE' +
+          'FFFFFFFFF' +
+          'HHHHHHHH' +
+          'JJJJJJJJJ' +
+          'KKKKKKKK' +
+          'LLLLLLLLL' +
+          'MMMMMMMM' +
+          'NNNNNNNNN' +
+          'PPPPPPPP' +
+          'RRRRRRRRR' +
+          'SSSSSSSS' +
+          'TTTTTTTTT' +
+          'UUUUUUUUU' +
+          'VVVVVVVV' +
+          'WWWWWWWWW' +
+          'XXXXXXXX' +
+          'YYYYYYYYY' +
+          'ZZZZZZZZ' +
+          '222222222' +
+          '33333333' +
+          '444444444' +
+          '55555555' +
+          '666666666' +
+          '77777777' +
+          '888888888' +
+          '99999999'
+      )
+    })
+  })
 })