From cb47bf6e89f1b6ac239e2f7ddfe3059a4cf10c4c Mon Sep 17 00:00:00 2001 From: Abban Dunne Date: Tue, 3 Sep 2024 16:00:31 +0200 Subject: [PATCH] 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 --- src/pages/donation_form.ts | 12 ++++++- src/pages/membership_application.ts | 6 ++-- src/store/bankdata/actions.ts | 6 ++-- src/store/dataInitializers.ts | 23 ++++-------- src/store/data_persistence/bankdata.ts | 35 +++++++++++++++++++ src/store/data_persistence/donation_form.ts | 2 ++ .../membership_application.ts | 2 ++ src/view_models/BankAccount.ts | 4 ++- tests/unit/store/dataInitializers.spec.ts | 19 +++++----- 9 files changed, 76 insertions(+), 33 deletions(-) create mode 100644 src/store/data_persistence/bankdata.ts diff --git a/src/pages/donation_form.ts b/src/pages/donation_form.ts index 3e5ccd965..caff74e50 100644 --- 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 index fcd2141ad..9ffd35e46 100644 --- 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 index 8ee44dd74..308be406a 100644 --- 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, payload: BankAccountData ): void { + initializeBankData( context: ActionContext, 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 index 0e329dd1b..62259b34f 100644 --- 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 new file mode 100644 index 000000000..d450af28c --- /dev/null +++ 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 index 1b1c3c22b..fa1a0a180 100644 --- 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 index fa2f35e7d..d724725a8 100644 --- 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 index d858288f6..b8e150ed3 100644 --- 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 index b651f9d3b..6cc30f82b 100644 --- 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 ); } ); } );