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

Author: jbarnsley10

src/server/constants.js

@@ -3,3 +3,4 @@ export const FORM_PREFIX = ''
 export const EXTERNAL_STATE_PAYLOAD = 'EXTERNAL_STATE_PAYLOAD'
 export const EXTERNAL_STATE_APPENDAGE = 'EXTERNAL_STATE_APPENDAGE'
 export const COMPONENT_STATE_ERROR = 'COMPONENT_STATE_ERROR'
+export const PAYMENT_EXPIRED_NOTIFICATION = 'PAYMENT_EXPIRED_NOTIFICATION'

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

@@ -259,7 +259,7 @@ export class PaymentField extends FormComponent {
       throw new InvalidComponentStateError(
         this,
         'Your payment authorisation has expired. Please add your payment details again.',
-        { shouldResetState: true }
+        { shouldResetState: true, isPaymentExpired: true }
       )
     }
 

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

@@ -15,7 +15,8 @@ import { type ValidationErrorItem } from 'joi'
 import {
   COMPONENT_STATE_ERROR,
   EXTERNAL_STATE_APPENDAGE,
-  EXTERNAL_STATE_PAYLOAD
+  EXTERNAL_STATE_PAYLOAD,
+  PAYMENT_EXPIRED_NOTIFICATION
 } from '~/src/server/constants.js'
 import { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'
 import { optionalText } from '~/src/server/plugins/engine/components/constants.js'
@@ -439,6 +440,12 @@ export class QuestionPageController extends PageController {
 
       viewModel.errors = (viewModel.errors ?? []).concat(flashedErrors)
 
+      const paymentExpiredFlash = request.yar.flash(
+        PAYMENT_EXPIRED_NOTIFICATION
+      )
+      viewModel.showPaymentExpiredNotification =
+        !Array.isArray(paymentExpiredFlash)
+
       /**
        * Content components can be hidden based on a condition. If the condition evaluates to true, it is safe to be kept, otherwise discard it
        */

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

@@ -7,7 +7,10 @@ import {
 import Boom from '@hapi/boom'
 import { type RouteOptions } from '@hapi/hapi'
 
-import { COMPONENT_STATE_ERROR } from '~/src/server/constants.js'
+import {
+  COMPONENT_STATE_ERROR,
+  PAYMENT_EXPIRED_NOTIFICATION
+} from '~/src/server/constants.js'
 import { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'
 import { PaymentField } from '~/src/server/plugins/engine/components/PaymentField.js'
 import { getAnswer } from '~/src/server/plugins/engine/components/helpers/components.js'
@@ -228,6 +231,18 @@ export class SummaryPageController extends QuestionPageController {
         )
       } catch (error) {
         if (error instanceof InvalidComponentStateError) {
+          if (error.shouldResetState) {
+            await cacheService.resetComponentStates(
+              request,
+              error.getStateKeys()
+            )
+
+            if (error.isPaymentExpired) {
+              request.yar.flash(PAYMENT_EXPIRED_NOTIFICATION, true, true)
+              return this.proceed(request, h, error.component.page?.path)
+            }
+          }
+
           const govukError = createError(
             error.component.name,
             error.userMessage
@@ -236,15 +251,9 @@ export class SummaryPageController extends QuestionPageController {
           request.yar.flash(COMPONENT_STATE_ERROR, govukError, true)
 
           if (error.shouldResetState) {
-            // Reset state and redirect to component page (e.g., payment expired)
-            await cacheService.resetComponentStates(
-              request,
-              error.getStateKeys()
-            )
             return this.proceed(request, h, error.component.page?.path)
           }
 
-          // Stay on CYA page with error (e.g., capture failed, user can retry)
           return this.proceed(request, h)
         }
 

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

@@ -24,6 +24,13 @@ export interface InvalidComponentStateErrorOptions {
    * @default true
    */
   shouldResetState?: boolean
+
+  /**
+   * Whether this error is due to payment expiry.
+   * When true, an "Important" notification banner will be shown on the payment page.
+   * @default false
+   */
+  isPaymentExpired?: boolean
 }
 
 /**
@@ -38,6 +45,7 @@ export class InvalidComponentStateError extends Error {
   public readonly component: FormComponent
   public readonly userMessage: string
   public readonly shouldResetState: boolean
+  public readonly isPaymentExpired: boolean
 
   constructor(
     component: FormComponent,
@@ -50,6 +58,7 @@ export class InvalidComponentStateError extends Error {
     this.component = component
     this.userMessage = userMessage
     this.shouldResetState = options.shouldResetState ?? true
+    this.isPaymentExpired = options.isPaymentExpired ?? false
   }
 
   getStateKeys() {

src/server/plugins/engine/types.ts

@@ -334,6 +334,7 @@ export interface FormPageViewModel extends PageViewModelBase {
   hasMissingNotificationEmail?: boolean
   allowSaveAndExit: boolean
   showSubmitButton?: boolean
+  showPaymentExpiredNotification?: boolean
 }
 
 export interface RepeaterSummaryPageViewModel extends PageViewModelBase {

src/server/plugins/engine/views/index.html

@@ -1,6 +1,7 @@
 {% extends baseLayoutPath %}
 
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
 {% from "partials/components.html" import componentList with context %}
 
 {% block content %}
@@ -10,7 +11,14 @@
         {% include "partials/preview-banner.html" %}
       {% endif %}
 
-      {% if errors | length  %}
+      {% if showPaymentExpiredNotification %}
+        {{ govukNotificationBanner({
+          titleText: "Important",
+          html: '<h3 class="govuk-notification-banner__heading">Your payment has been cancelled</h3><p class="govuk-body">Your payment details were deleted because the form was inactive for 5 days.</p><p class="govuk-body">Add your payment details again.</p>'
+        }) }}
+      {% endif %}
+
+      {% if errors | length and not showPaymentExpiredNotification %}
         {{ govukErrorSummary({
           titleText: "There is a problem",
           errorList: checkErrorTemplates(errors)