Reset Invalid Payment Data

src/pages/donation_form.ts

@@ -50,7 +50,11 @@ dataPersister.initialize( persistenceItems ).then( () => {
 	Promise.all( [
 		store.dispatch(
 			action( NS_PAYMENT, initializePayment ),
-			createInitialDonationPaymentValues( dataPersister, pageData.applicationVars.initialFormValues )
+			{
+				initialValues: createInitialDonationPaymentValues( dataPersister, pageData.applicationVars.initialFormValues ),
+				allowedIntervals: pageData.applicationVars.paymentIntervals,
+				allowedPaymentTypes: pageData.applicationVars.paymentTypes,
+			}
 		),
 		store.dispatch(
 			action( NS_ADDRESS, initializeAddress ),

src/store/intervalValidator.ts

@@ -0,0 +1,7 @@
+export function isValidInterval( interval: string, allowedIntervals: number[] ): boolean {
+	if ( !allowedIntervals.includes( Number( interval ) ) ) {
+		return false;
+	}
+
+	return true;
+}

src/store/payment/actions.ts

@@ -1,5 +1,5 @@
 import { ActionContext } from 'vuex';
-import { InitialPaymentValues, IntervalData, TypeData } from '@src/view_models/Payment';
+import { IntervalData, TypeData } from '@src/view_models/Payment';
 import { DonationPayment } from '@src/store/payment/types';
 
 import {
@@ -23,28 +23,37 @@ import {
 } from '@src/store/payment/mutationTypes';
 import { Validity } from '@src/view_models/Validity';
 import { isValidAmount } from '@src/store/amountValidator';
+import { PaymentInitialisationPayload } from '@src/view_models/PaymentInitialisationPayload';
+import { isValidPaymentType } from '@src/store/paymentTypeValidator';
+import { isValidInterval } from '@src/store/intervalValidator';
 
 export const actions = {
 	[ discardInitialization ]( context: ActionContext<DonationPayment, any> ): void {
 		context.commit( SET_INITIALIZED, false );
 	},
-	[ initializePayment ]( context: ActionContext<DonationPayment, any>, initialValues: InitialPaymentValues ): Promise<boolean> {
-		let amountIsFilledAndValid = false, paymentIsFilled = false;
-		if ( initialValues.amount && initialValues.amount !== '0' ) {
-			amountIsFilledAndValid = isValidAmount( Number( initialValues.amount ) );
+	[ initializePayment ]( context: ActionContext<DonationPayment, any>, payload: PaymentInitialisationPayload ): Promise<boolean> {
+		const { initialValues, allowedPaymentTypes, allowedIntervals } = payload;
+
+		const amountIsValid = isValidAmount( Number( initialValues.amount ) );
+		const intervalIsValid = isValidInterval( initialValues.paymentIntervalInMonths, allowedIntervals );
+		const paymentTypeIsValid = isValidPaymentType( initialValues.type, initialValues.paymentIntervalInMonths, allowedPaymentTypes );
+
+		if ( amountIsValid ) {
 			context.commit( SET_AMOUNT, initialValues.amount );
-			context.commit( SET_AMOUNT_VALIDITY, amountIsFilledAndValid ? Validity.VALID : Validity.INVALID );
+			context.commit( SET_AMOUNT_VALIDITY, Validity.VALID );
 		}
 
-		if ( initialValues.type && initialValues.type !== '' ) {
+		context.commit( SET_INTERVAL, intervalIsValid ? initialValues.paymentIntervalInMonths : '0' );
+
+		if ( paymentTypeIsValid ) {
 			context.commit( SET_TYPE, initialValues.type );
 			context.commit( SET_TYPE_VALIDITY, Validity.VALID );
-			paymentIsFilled = true;
 		}
-		context.commit( SET_INTERVAL, initialValues.paymentIntervalInMonths );
-		context.commit( SET_INITIALIZED, amountIsFilledAndValid && paymentIsFilled );
 
-		return Promise.resolve( amountIsFilledAndValid && paymentIsFilled );
+		const paymentIsFilledAndValid = amountIsValid && paymentTypeIsValid;
+		context.commit( SET_INITIALIZED, paymentIsFilledAndValid );
+
+		return Promise.resolve( paymentIsFilledAndValid );
 	},
 	[ markEmptyValuesAsInvalid ]( context: ActionContext<DonationPayment, any> ): void {
 		context.commit( MARK_EMPTY_FIELDS_INVALID );

src/store/paymentTypeValidator.ts

@@ -0,0 +1,14 @@
+import { PaymentType } from '@src/view_models/PaymentType';
+
+export function isValidPaymentType( paymentType: string, interval: string, allowedPaymentTypes: string[] ): boolean {
+	if ( !allowedPaymentTypes.includes( paymentType ) ) {
+		return false;
+	}
+
+	// Sofort payments can't be recurring so clear the type if it is initialised with an interval
+	if ( paymentType === PaymentType.SOFORT && ![ '', '0' ].includes( interval ) ) {
+		return false;
+	}
+
+	return true;
+}

src/view_models/PaymentInitialisationPayload.ts

@@ -0,0 +1,7 @@
+import { InitialPaymentValues } from '@src/view_models/Payment';
+
+export interface PaymentInitialisationPayload {
+	initialValues: InitialPaymentValues,
+	allowedIntervals: number[],
+	allowedPaymentTypes: string[]
+}

src/view_models/PaymentType.ts

@@ -0,0 +1,7 @@
+export enum PaymentType {
+	DIRECT_DEBIT = 'BEZ',
+	BANK_TRANSFER = 'UEB',
+	CREDIT_CARD = 'MCP',
+	PAYPAL = 'PPL',
+	SOFORT = 'SUB'
+}

tests/unit/components/pages/donation_form/AddressPage.spec.ts

@@ -17,6 +17,7 @@ import { nextTick } from 'vue';
 import AddressTypeBasic from '@src/components/pages/donation_form/AddressTypeBasic.vue';
 import { Validity } from '@src/view_models/Validity';
 import { Salutation } from '@src/view_models/Salutation';
+import { PaymentInitialisationPayload } from '@src/view_models/PaymentInitialisationPayload';
 
 const testCountry = {
 	countryCode: 'de',
@@ -72,10 +73,14 @@ describe( 'AddressPage.vue', () => {
 
 	const setPaymentType = ( store: Store<any>, paymentType: string ): Promise<any> => {
 		return store.dispatch( action( NS_PAYMENT, initializePayment ), {
-			amount: '100',
-			type: paymentType,
-			paymentIntervalInMonths: '0',
-			isCustomAmount: false,
+			allowedIntervals: [ 0 ],
+			allowedPaymentTypes: [ paymentType ],
+			initialValues: {
+				amount: '100',
+				type: paymentType,
+				paymentIntervalInMonths: '0',
+				isCustomAmount: false,
+			},
 		} );
 	};
 

tests/unit/store/donation_store.spec.ts

@@ -5,6 +5,8 @@ import { action } from '@src/store/util';
 import { NS_ADDRESS, NS_PAYMENT } from '@src/store/namespaces';
 import { initializeAddress } from '@src/store/address/actionTypes';
 import { initializePayment } from '@src/store/payment/actionTypes';
+import { PaymentInitialisationPayload } from '@src/view_models/PaymentInitialisationPayload';
+import { PaymentType } from '@src/view_models/PaymentType';
 
 describe( 'Donation Store', () => {
 
@@ -29,15 +31,19 @@ describe( 'Donation Store', () => {
 			const type = 'person';
 			const paymentIntervalInMonths = '1';
 			const isCustomAmount = false;
-
-			const initialData = {
-				amount,
-				type,
-				paymentIntervalInMonths,
-				isCustomAmount,
+			const payload: PaymentInitialisationPayload = {
+				allowedIntervals: [ 1 ],
+				allowedPaymentTypes: [ 'person' ],
+				initialValues: {
+					amount,
+					type,
+					paymentIntervalInMonths,
+					isCustomAmount,
+				},
 			};
+
 			const store = createStore();
-			await store.dispatch( action( NS_PAYMENT, initializePayment ), initialData );
+			await store.dispatch( action( NS_PAYMENT, initializePayment ), payload );
 
 			expect( store.state.payment.values.amount ).toBe( amount );
 			expect( store.state.payment.values.type ).toBe( type );