Hook up bank data store to local storage persistence

Now the bank data values are all part of the store we can restore them on refresh. Ticket: https://phabricator.wikimedia.org/T364953
wmde · Sep 3, 2024 · 471f0d4 · 471f0d4
1 parent 94cd8c3
commit 471f0d4
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 34 deletions.
diff --git a/src/components/shared/form_fields/DirectDebitField.vue b/src/components/shared/form_fields/DirectDebitField.vue
@@ -14,7 +14,7 @@
 			@input="onAccountNumberInput"
 		>
 			<template #message>
-				<span v-if="bankName !== '' && accountNumberType === AccountNumberType.IBAN" class="iban-bank-name">{{ bankName }} ({{ bic }})</span>
+				<span v-if="bankName && accountNumberType === AccountNumberType.IBAN" class="iban-bank-name">{{ bankName }} ({{ bic }})</span>
 			</template>
 		</TextValueField>
 

diff --git a/src/pages/donation_form.ts b/src/pages/donation_form.ts
@@ -13,7 +13,7 @@ import { TrackingData } from '@src/view_models/TrackingData';
 import { action } from '@src/store/util';
 import { bucketIdToCssClass } from '@src/util/bucket_id_to_css_class';
 import { createDataPersister } from '@src/store/create_data_persister';
-import { createInitialDonationAddressValues, createInitialDonationPaymentValues } from '@src/store/dataInitializers';
+import { createInitialBankDataValues, createInitialDonationAddressValues, createInitialDonationPaymentValues } from '@src/store/dataInitializers';
 import { createTrackFormErrorsPlugin } from '@src/store/track_form_errors_plugin';
 
 import App from '@src/components/App.vue';
@@ -55,6 +55,16 @@ dataPersister.initialize( persistenceItems ).then( () => {
 				allowedPaymentTypes: pageData.applicationVars.paymentTypes,
 			}
 		),
+		store.dispatch(
+			action( 'bankdata', 'initializeBankData' ),
+			createInitialBankDataValues( dataPersister, {
+				accountNumber: '',
+				bankCode: '',
+				bankName: '',
+				iban: '',
+				bic: '',
+			} ),
+		),
 		store.dispatch(
 			action( 'address', 'initializeAddress' ),
 			createInitialDonationAddressValues( dataPersister, pageData.applicationVars.initialFormValues )

diff --git a/src/pages/membership_application.ts b/src/pages/membership_application.ts
@@ -62,9 +62,11 @@ dataPersister.initialize( persistenceItems ).then( () => {
 	);
 	initialFeeValues.setTypeFromAvailablePaymentTypes( pageData.applicationVars.paymentTypes );
 	const initialBankAccountData = {
+		accountNumber: initialFormValues.get( 'iban' ),
+		bankCode: '',
+		bankName: initialFormValues.get( 'bankname' ),
 		iban: initialFormValues.get( 'iban' ),
 		bic: initialFormValues.get( 'bic' ),
-		bankname: initialFormValues.get( 'bankname' ),
 	};
 
 	// Combine the initial values (from app data and URL) with the values from the local storage.
@@ -81,7 +83,7 @@ dataPersister.initialize( persistenceItems ).then( () => {
 		),
 		store.dispatch(
 			action( 'bankdata', 'initializeBankData' ),
-			createInitialBankDataValues( initialBankAccountData ),
+			createInitialBankDataValues( dataPersister, initialBankAccountData ),
 		),
 	] ).then( () => {
 		const app = createVueApp( App,

diff --git a/src/store/bankdata/actions.ts b/src/store/bankdata/actions.ts
@@ -1,12 +1,14 @@
 import { ActionContext } from 'vuex';
-import { BankAccount, BankAccountData } from '@src/view_models/BankAccount';
+import { BankAccount, InitialBankAccountData } from '@src/view_models/BankAccount';
 import { Validity } from '@src/view_models/Validity';
 
 export const actions = {
-	initializeBankData( context: ActionContext<BankAccount, any>, payload: BankAccountData ): void {
+	initializeBankData( context: ActionContext<BankAccount, any>, payload: InitialBankAccountData ): void {
 		context.commit( 'SET_ACCOUNT_NUMBER', payload.accountNumber );
 		context.commit( 'SET_BANK_CODE', payload.bankCode );
 		context.commit( 'SET_BANK_NAME', payload.bankName );
+		context.commit( 'SET_IBAN', payload.iban );
+		context.commit( 'SET_BIC', payload.bic );
 
 		if ( payload.accountNumber !== '' ) {
 			context.commit( 'SET_ACCOUNT_NUMBER_VALIDITY', Validity.RESTORED );

diff --git a/src/store/dataInitializers.ts b/src/store/dataInitializers.ts
@@ -5,7 +5,7 @@ import { DataPersister } from '@src/view_models/DataPersistence';
 import { InitialAddressValues, InitialMembershipAddressValues } from '@src/view_models/Address';
 import { addressTypeFromName } from '@src/view_models/AddressTypeModel';
 import { InitialPaymentValues } from '@src/view_models/Payment';
-import { BankAccountData, InitialBankAccountData } from '@src/view_models/BankAccount';
+import { InitialBankAccountData } from '@src/view_models/BankAccount';
 import { InitialMembershipFeeValues } from '@src/view_models/MembershipFee';
 import { trackFormFieldRestored } from '@src/util/tracking';
 import { MAILING_LIST_ADDRESS_PAGE } from '@src/config';
@@ -120,21 +120,12 @@ export const createInitialMembershipFeeValues = ( dataPersister: DataPersister,
 /**
  * Look for initial bank fields in initial form data
  */
-export const createInitialBankDataValues = ( initialFormValues: InitialBankAccountData|null ): BankAccountData => {
-
-	let accountNumber = '';
-	let bankCode = '';
-	let bankName = '';
-
-	if ( initialFormValues ) {
-		accountNumber = initialFormValues.accountNumber || '';
-		bankCode = initialFormValues.bankCode || '';
-		bankName = initialFormValues.bankname || '';
-	}
-
+export const createInitialBankDataValues = ( dataPersister: DataPersister, initialFormValues: InitialBankAccountData ): InitialBankAccountData => {
 	return {
-		accountNumber: accountNumber,
-		bankCode: bankCode,
-		bankName: bankName,
+		accountNumber: replaceInitialValue( initialFormValues.accountNumber, dataPersister.getValue( 'accountNumber' ) ),
+		bankCode: replaceInitialValue( initialFormValues.bankCode, dataPersister.getValue( 'bankCode' ) ),
+		bankName: replaceInitialValue( initialFormValues.bankName, dataPersister.getValue( 'bankName' ) ),
+		iban: replaceInitialValue( initialFormValues.iban, dataPersister.getValue( 'iban' ) ),
+		bic: replaceInitialValue( initialFormValues.bic, dataPersister.getValue( 'bic' ) ),
 	};
 };
diff --git a/src/store/data_persistence/bankdata.ts b/src/store/data_persistence/bankdata.ts
@@ -0,0 +1,35 @@
+import { DataPersistenceMutationType } from '@src/view_models/DataPersistence';
+import { mutation } from '@src/store/util';
+
+export default [
+	{
+		storageKey: 'accountNumber',
+		mutationType: DataPersistenceMutationType.VALUE,
+		mutationKey: mutation( 'bankdata', 'SET_ACCOUNT_NUMBER' ),
+		fields: [],
+	},
+	{
+		storageKey: 'bankCode',
+		mutationType: DataPersistenceMutationType.VALUE,
+		mutationKey: mutation( 'bankdata', 'SET_BANK_CODE' ),
+		fields: [],
+	},
+	{
+		storageKey: 'bankName',
+		mutationType: DataPersistenceMutationType.VALUE,
+		mutationKey: mutation( 'bankdata', 'SET_BANK_NAME' ),
+		fields: [],
+	},
+	{
+		storageKey: 'iban',
+		mutationType: DataPersistenceMutationType.VALUE,
+		mutationKey: mutation( 'bankdata', 'SET_IBAN' ),
+		fields: [],
+	},
+	{
+		storageKey: 'bic',
+		mutationType: DataPersistenceMutationType.VALUE,
+		mutationKey: mutation( 'bankdata', 'SET_BIC' ),
+		fields: [],
+	},
+];
diff --git a/src/store/data_persistence/donation_form.ts b/src/store/data_persistence/donation_form.ts
@@ -1,6 +1,7 @@
 import { mutation } from '@src/store/util';
 import { DataPersistenceMutationType } from '@src/view_models/DataPersistence';
 import address from '@src/store/data_persistence/address';
+import bankdata from '@src/store/data_persistence/bankdata';
 
 export default [
 	{
@@ -40,4 +41,5 @@ export default [
 		fields: [],
 	},
 	address( 'address' ),
+	...bankdata,
 ];
diff --git a/src/store/data_persistence/membership_application.ts b/src/store/data_persistence/membership_application.ts
@@ -1,6 +1,7 @@
 import { mutation } from '@src/store/util';
 import { DataPersistenceMutationType } from '@src/view_models/DataPersistence';
 import address from '@src/store/data_persistence/address';
+import bankdata from '@src/store/data_persistence/bankdata';
 
 export default [
 	{
@@ -46,4 +47,5 @@ export default [
 		fields: [],
 	},
 	address( 'membership_address' ),
+	...bankdata,
 ];
diff --git a/src/view_models/BankAccount.ts b/src/view_models/BankAccount.ts
@@ -30,7 +30,9 @@ export interface BankAccountData {
 export interface InitialBankAccountData {
     accountNumber?: string;
     bankCode?: string;
-    bankname?: string;
+    bankName?: string;
+    iban?: string;
+    bic?: string;
 }
 
 export interface BankAccountRequest {

diff --git a/tests/unit/store/dataInitializers.spec.ts b/tests/unit/store/dataInitializers.spec.ts
@@ -265,24 +265,21 @@ describe( 'createInitialMembershipFeeValues', () => {
 
 describe( 'createInitialBankDataValues', () => {
 	it( 'fills data from initial data', () => {
+		const dataPersister = new FakeDataPersister( [] );
 		const initialValues: InitialBankAccountData = {
 			accountNumber: 'fakeAccountID',
 			bankCode: 'IAmBIC',
-			bankname: 'Bank of fakey fake',
+			bankName: 'Bank of fakey fake',
+			iban: 'IBANANA',
+			bic: 'BISCUIT',
 		};
 
-		const values = createInitialBankDataValues( initialValues );
+		const values = createInitialBankDataValues( dataPersister, initialValues );
 
 		expect( values.accountNumber ).toEqual( initialValues.accountNumber );
 		expect( values.bankCode ).toEqual( initialValues.bankCode );
-		expect( values.bankName ).toEqual( initialValues.bankname );
-	} );
-
-	it( 'handles null initial value object', () => {
-		const values = createInitialBankDataValues( null );
-
-		expect( values.accountNumber ).toEqual( '' );
-		expect( values.bankCode ).toEqual( '' );
-		expect( values.bankName ).toEqual( '' );
+		expect( values.bankName ).toEqual( initialValues.bankName );
+		expect( values.iban ).toEqual( initialValues.iban );
+		expect( values.bic ).toEqual( initialValues.bic );
 	} );
 } );