All the answers you have provided are true to the best of your knowledge.
" pages: diff --git a/src/server/plugins/engine/components/FormComponent.ts b/src/server/plugins/engine/components/FormComponent.ts index 015274975..09ad39eb0 100644 --- a/src/server/plugins/engine/components/FormComponent.ts +++ b/src/server/plugins/engine/components/FormComponent.ts @@ -191,7 +191,7 @@ export class FormComponent extends ComponentBase { return value.filter(isFormValue) } - return this.isValue(value) ? value : null + return this.isValue(value) ? (value as Item['value']) : null } getContextValueFromState( diff --git a/src/server/plugins/engine/components/PaymentField.test.ts b/src/server/plugins/engine/components/PaymentField.test.ts new file mode 100644 index 000000000..6f11d2afb --- /dev/null +++ b/src/server/plugins/engine/components/PaymentField.test.ts @@ -0,0 +1,490 @@ +import { + ComponentType, + type FormMetadata, + type PaymentFieldComponent +} from '@defra/forms-model' + +import { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js' +import { PaymentField } from '~/src/server/plugins/engine/components/PaymentField.js' +import { + getAnswer, + type Field +} from '~/src/server/plugins/engine/components/helpers/components.js' +import { FormModel } from '~/src/server/plugins/engine/models/FormModel.js' +import { InvalidComponentStateError } from '~/src/server/plugins/engine/pageControllers/errors.js' +import { + type FormContext, + type FormValue +} from '~/src/server/plugins/engine/types.js' +import { + type FormRequestPayload, + type FormResponseToolkit +} from '~/src/server/routes/types.js' +import { get, post, postJson } from '~/src/server/services/httpService.js' +import definition from '~/test/form/definitions/blank.js' +import { getFormData, getFormState } from '~/test/helpers/component-helpers.js' + +jest.mock('~/src/server/services/httpService.ts') + +describe('PaymentField', () => { + let model: FormModel + + beforeEach(() => { + model = new FormModel(definition, { + basePath: 'test' + }) + }) + + describe('Defaults', () => { + let def: PaymentFieldComponent + let collection: ComponentCollection + let field: Field + + beforeEach(() => { + def = { + title: 'Example payment field', + name: 'myComponent', + type: ComponentType.PaymentField, + options: { + amount: 100, + description: 'Test payment description' + } + } satisfies PaymentFieldComponent + + collection = new ComponentCollection([def], { model }) + field = collection.fields[0] + }) + + describe('Schema', () => { + it('uses component title as label as default', () => { + const { formSchema } = collection + const { keys } = formSchema.describe() + + expect(keys).toHaveProperty( + 'myComponent', + expect.objectContaining({ + flags: expect.objectContaining({ + label: 'Example payment field' + }) + }) + ) + }) + + it('uses component name as keys', () => { + const { formSchema } = collection + const { keys } = formSchema.describe() + + expect(field.keys).toEqual(['myComponent']) + expect(field.collection).toBeUndefined() + + for (const key of field.keys) { + expect(keys).toHaveProperty(key) + } + }) + + it('is required by default', () => { + const { formSchema } = collection + const { keys } = formSchema.describe() + + expect(keys).toHaveProperty( + 'myComponent', + expect.objectContaining({ + keys: expect.objectContaining({ + amount: expect.objectContaining({ + flags: expect.objectContaining({ + presence: 'required' + }) + }) + }) + }) + ) + }) + + it('adds errors for empty value', () => { + const payment = { + paymentId: '', + reference: '', + amount: 0, + description: '', + uuid: '', + formId: '', + isLivePayment: false + } + const result = collection.validate(getFormData(payment)) + + const errors = result.errors ?? [] + + expect(errors[0]).toEqual( + expect.objectContaining({ + text: 'Enter myComponent.paymentId' + }) + ) + + expect(errors[1]).toEqual( + expect.objectContaining({ + text: 'Enter myComponent.reference' + }) + ) + + expect(errors[2]).toEqual( + expect.objectContaining({ + text: 'Enter myComponent.description' + }) + ) + + expect(errors[3]).toEqual( + expect.objectContaining({ + text: 'Enter myComponent.uuid' + }) + ) + + expect(errors[4]).toEqual( + expect.objectContaining({ + text: 'Enter myComponent.formId' + }) + ) + + expect(errors[5]).toEqual( + expect.objectContaining({ + text: 'Select myComponent.preAuth' + }) + ) + }) + + it('adds errors for invalid values', () => { + const result1 = collection.validate(getFormData(['invalid'])) + const result2 = collection.validate( + // @ts-expect-error - Allow invalid param for test + getFormData({ unknown: 'invalid' }) + ) + + expect(result1.errors).toBeTruthy() + expect(result2.errors).toBeTruthy() + }) + }) + + describe('State', () => { + const paymentForState = { + paymentId: 'payment-id', + reference: 'payment-ref', + amount: 150, + description: 'payment description', + uuid: 'ee501106-4ce1-4947-91a7-7cc1a335ccd8', + formId: 'form-id', + isLivePayment: false + } + it('returns text from state', () => { + const state1 = getFormState(paymentForState) + const state2 = getFormState(null) + + const answer1 = getAnswer(field, state1) + const answer2 = getAnswer(field, state2) + + expect(answer1).toBe('£150.00 - payment description') + expect(answer2).toBe('') + }) + }) + + describe('View model', () => { + it('sets Nunjucks component defaults', () => { + const viewModel = field.getViewModel(getFormData(undefined)) + + expect(viewModel).toEqual( + expect.objectContaining({ + label: { text: def.title }, + name: 'myComponent', + id: 'myComponent', + amount: '100.00', + attributes: {}, + description: 'Test payment description' + }) + ) + }) + + it('sets Nunjucks component values', () => { + const paymentForViewModel = { + paymentId: 'payment-id', + reference: 'payment-ref', + uuid: 'ee501106-4ce1-4947-91a7-7cc1a335ccd8', + formId: 'form-id', + amount: 100, + description: 'Test payment description', + isLivePayment: false + } as unknown as FormValue + const viewModel = field.getViewModel(getFormData(paymentForViewModel)) + + expect(viewModel).toEqual( + expect.objectContaining({ + label: { text: def.title }, + name: 'myComponent', + id: 'myComponent', + amount: '100.00', + attributes: {}, + description: 'Test payment description' + }) + ) + }) + }) + + describe('AllPossibleErrors', () => { + it('should return errors', () => { + const errors = field.getAllPossibleErrors() + expect(errors.baseErrors).not.toBeEmpty() + expect(errors.advancedSettingsErrors).toBeEmpty() + }) + }) + }) + + describe('dispatcher and onSubmit', () => { + const def = { + title: 'Example payment field', + name: 'myComponent', + type: ComponentType.PaymentField, + options: { + amount: 100, + description: 'Test payment description' + } + } satisfies PaymentFieldComponent + + const collection = new ComponentCollection([def], { model }) + const paymentField = collection.fields[0] as PaymentField + + describe('dispatcher', () => { + it('should create payment and redirect to gov pay', async () => { + const mockYarSet = jest.fn() + const mockRequest = { + server: { + plugins: { + // eslint-disable-next-line no-useless-computed-key + ['forms-engine-plugin']: { + baseUrl: 'base-url' + } + } + }, + yar: { + set: mockYarSet + } + } as unknown as FormRequestPayload + const mockH = { + redirect: jest + .fn() + .mockReturnValueOnce({ code: jest.fn().mockReturnValueOnce('ok') }) + } as unknown as FormResponseToolkit + const args = { + controller: { + model: { + formId: 'form-id', + basePath: 'base-path', + name: 'PaymentModel' + }, + getState: jest + .fn() + .mockResolvedValueOnce({ $$__referenceNumber: 'pay-ref-123' }) + }, + component: paymentField, + sourceUrl: 'http://localhost:3009/test-payment', + isLive: false, + isPreview: true + } + // @ts-expect-error - partial mock + jest.mocked(postJson).mockResolvedValueOnce({ + payload: { + state: { + status: 'created' + }, + payment_id: 'new-payment-id', + _links: { + next_url: { + href: '/next-url' + } + } + } + }) + + const res = await PaymentField.dispatcher(mockRequest, mockH, args) + expect(res).toBe('ok') + expect(mockYarSet).toHaveBeenCalledWith(expect.any(String), { + amount: 100, + componentName: 'myComponent', + description: 'Test payment description', + failureUrl: 'http://localhost:3009/test-payment', + formId: 'form-id', + isLivePayment: false, + paymentId: 'new-payment-id', + reference: 'pay-ref-123', + returnUrl: 'base-url/base-path/summary', + uuid: expect.any(String) + }) + }) + }) + + describe('onSubmit', () => { + it('should throw if missing state', async () => { + const mockRequest = {} as unknown as FormRequestPayload + + const error = await paymentField + .onSubmit( + mockRequest, + {} as FormMetadata, + { state: {} } as FormContext + ) + .catch((e: unknown) => e) + + expect(error).toBeInstanceOf(InvalidComponentStateError) + expect((error as InvalidComponentStateError).component).toBe( + paymentField + ) + expect((error as InvalidComponentStateError).userMessage).toBe( + 'Complete the payment to continue' + ) + }) + + it('should ignore if our state says payment already captured', async () => { + const mockRequest = {} as unknown as FormRequestPayload + + await paymentField.onSubmit( + mockRequest, + {} as FormMetadata, + { + state: { + myComponent: { + capture: { + status: 'success' + }, + paymentId: 'payment-id', + amount: 123, + description: 'Payment desc' + } + } + } as unknown as FormContext + ) + expect(get).not.toHaveBeenCalled() + expect(post).not.toHaveBeenCalled() + }) + + it('should mark payment already captured according to gov pay', async () => { + const mockRequest = {} as unknown as FormRequestPayload + jest + .mocked(get) + // @ts-expect-error - partial mock + .mockResolvedValueOnce({ payload: { state: { status: 'success' } } }) + await paymentField.onSubmit( + mockRequest, + {} as FormMetadata, + { + state: { + myComponent: { + paymentId: 'payment-id', + amount: 123, + description: 'Payment desc', + isLivePayment: false, + formId: 'form-id' + } + } + } as unknown as FormContext + ) + expect(get).toHaveBeenCalled() + expect(post).not.toHaveBeenCalled() + }) + + it('should throw if bad status', async () => { + const mockRequest = {} as unknown as FormRequestPayload + jest + .mocked(get) + // @ts-expect-error - partial mock + .mockResolvedValueOnce({ payload: { state: { status: 'bad' } } }) + const error = await paymentField + .onSubmit( + mockRequest, + {} as FormMetadata, + { + state: { + myComponent: { + paymentId: 'payment-id', + amount: 123, + description: 'Payment desc', + isLivePayment: false, + formId: 'form-id' + } + } + } as unknown as FormContext + ) + .catch((e: unknown) => e) + + expect(error).toBeInstanceOf(InvalidComponentStateError) + expect((error as InvalidComponentStateError).component).toBe( + paymentField + ) + expect((error as InvalidComponentStateError).userMessage).toBe( + 'Your payment authorisation has expired. Please add your payment details again.' + ) + }) + + it('should throw if error during capture', async () => { + const mockRequest = {} as unknown as FormRequestPayload + jest + .mocked(get) + // @ts-expect-error - partial mock + .mockResolvedValueOnce({ + payload: { state: { status: 'capturable' } } + }) + // @ts-expect-error - partial mock + jest.mocked(post).mockResolvedValueOnce({ res: { statusCode: 400 } }) + const error = await paymentField + .onSubmit( + mockRequest, + {} as FormMetadata, + { + state: { + myComponent: { + paymentId: 'payment-id', + amount: 123, + description: 'Payment desc', + isLivePayment: false, + formId: 'form-id' + } + } + } as unknown as FormContext + ) + .catch((e: unknown) => e) + + expect(error).toBeInstanceOf(InvalidComponentStateError) + expect((error as InvalidComponentStateError).component).toBe( + paymentField + ) + expect((error as InvalidComponentStateError).userMessage).toBe( + 'There was a problem and your form was not submitted. Try submitting the form again.' + ) + }) + + it('should capture payment if no errors', async () => { + const mockRequest = {} as unknown as FormRequestPayload + jest + .mocked(get) + // @ts-expect-error - partial mock + .mockResolvedValueOnce({ + payload: { state: { status: 'capturable' } } + }) + // @ts-expect-error - partial mock + jest.mocked(post).mockResolvedValueOnce({ res: { statusCode: 200 } }) + await paymentField.onSubmit( + mockRequest, + {} as FormMetadata, + { + state: { + myComponent: { + paymentId: 'payment-id', + amount: 123, + description: 'Payment desc', + isLivePayment: false, + formId: 'form-id' + } + } + } as unknown as FormContext + ) + expect(get).toHaveBeenCalled() + expect(post).toHaveBeenCalled() + }) + }) + }) +}) diff --git a/src/server/plugins/engine/components/PaymentField.ts b/src/server/plugins/engine/components/PaymentField.ts index 0c2175196..19d8b18f1 100644 --- a/src/server/plugins/engine/components/PaymentField.ts +++ b/src/server/plugins/engine/components/PaymentField.ts @@ -5,9 +5,12 @@ import { type PaymentFieldComponent } from '@defra/forms-model' import { StatusCodes } from 'http-status-codes' +import joi, { type ObjectSchema } from 'joi' import { FormComponent } from '~/src/server/plugins/engine/components/FormComponent.js' import { type PaymentState } from '~/src/server/plugins/engine/components/PaymentField.types.js' +import { getPluginOptions } from '~/src/server/plugins/engine/helpers.js' +import { InvalidComponentStateError } from '~/src/server/plugins/engine/pageControllers/errors.js' import { type AnyFormRequest, type FormContext, @@ -17,13 +20,17 @@ import { import { type ErrorMessageTemplateList, type FormPayload, + type FormState, + type FormStateValue, type FormSubmissionError, type FormSubmissionState } from '~/src/server/plugins/engine/types.js' -import { PaymentService } from '~/src/server/plugins/payment/service.js' +import { createPaymentService } from '~/src/server/plugins/payment/helper.js' export class PaymentField extends FormComponent { declare options: PaymentFieldComponent['options'] + declare formSchema: ObjectSchema + declare stateSchema: ObjectSchema constructor( def: PaymentFieldComponent, @@ -32,6 +39,31 @@ export class PaymentField extends FormComponent { super(def, props) this.options = def.options + + const paymentStateSchema = joi + .object({ + paymentId: joi.string().required(), + reference: joi.string().required(), + amount: joi.number().required(), + description: joi.string().required(), + uuid: joi.string().uuid().required(), + formId: joi.string().required(), + isLivePayment: joi.boolean().required(), + preAuth: joi + .object({ + status: joi + .string() + .valid('success', 'failed', 'started') + .required(), + createdAt: joi.string().isoDate().required() + }) + .required() + }) + .unknown(true) + .label(this.label) + + this.formSchema = paymentStateSchema + this.stateSchema = paymentStateSchema.default(null).allow(null) } /** @@ -40,7 +72,7 @@ export class PaymentField extends FormComponent { getPaymentStateFromState( state: FormSubmissionState ): PaymentState | undefined { - const value = state[this.name] as unknown + const value = state[this.name] return this.isPaymentState(value) ? value : undefined } @@ -88,6 +120,13 @@ export class PaymentField extends FormComponent { ) } + /** + * Override base isState to validate PaymentState + */ + isState(value?: FormStateValue | FormState): value is FormState { + return this.isPaymentState(value) + } + /** * For error preview page that shows all possible errors on a component */ @@ -112,67 +151,139 @@ export class PaymentField extends FormComponent { /** * Dispatcher for external redirect to GOV.UK Pay - * STUB - Jez to implement */ static async dispatcher( request: FormRequestPayload, h: FormResponseToolkit, args: PaymentDispatcherArgs ): PromiseYou can submit the form after you have added your payment details.
Total amount:
-£{{ amount }}
+£{{ amount }}
- {% if paymentState and paymentState.preAuth and paymentState.preAuth.status == 'success' %} - {# Payment pre-authorised - show confirmation #} -- Payment ready -
-- Reference: {{ paymentState.reference }} -
- {{ govukButton({ - text: "Use different payment details", - attributes: { - name: "action", - value: "external-" + model.name - }, - classes: "govuk-button--secondary govuk-!-margin-bottom-0" - }) }} - {% else %} - {# No payment yet - show button to initiate #} - {{ govukButton({ - text: "Add payment details", - attributes: { - name: "action", - value: "external-" + model.name - }, - classes: "govuk-!-margin-bottom-0" - }) }} - {% endif %} + {{ govukButton({ + text: "Add payment details", + attributes: { + name: "action", + value: "external-" + model.name + }, + classes: "govuk-!-margin-bottom-0" + }) }} {% endmacro %} diff --git a/src/server/plugins/engine/views/index.html b/src/server/plugins/engine/views/index.html index c5cc8d8f3..2c142e569 100644 --- a/src/server/plugins/engine/views/index.html +++ b/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: 'Your payment details were deleted because the form was inactive for 5 days.
Add your payment details again.
' + }) }} + {% endif %} + + {% if errors | length and not showPaymentExpiredNotification %} {{ govukErrorSummary({ titleText: "There is a problem", errorList: checkErrorTemplates(errors) diff --git a/src/server/plugins/engine/views/summary.html b/src/server/plugins/engine/views/summary.html index 765c52487..100c952dc 100644 --- a/src/server/plugins/engine/views/summary.html +++ b/src/server/plugins/engine/views/summary.html @@ -3,6 +3,7 @@ {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %} {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {% from "govuk/components/button/macro.njk" import govukButton %} +{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %} {% from "partials/components.html" import componentList with context %} {% from "govuk/components/input/macro.njk" import govukInput %} @@ -13,6 +14,14 @@ {% include "partials/preview-banner.html" %} {% endif %} + {% if paymentState and paymentState.preAuth and paymentState.preAuth.status == 'success' %} + {{ govukNotificationBanner({ + type: "success", + titleText: "Success", + html: "Your payment is on hold. We will charge you when you submit the form.
" + }) }} + {% endif %} + {% if errors %} {{ govukErrorSummary({ titleText: "There is a problem", @@ -41,6 +50,13 @@