Skip to content

Commit

Permalink
Refactor Bank Data store
Browse files Browse the repository at this point in the history
- Make field names a little more consistent
- Update implementations and tests

Ticket: https://phabricator.wikimedia.org/T364953
  • Loading branch information
Abban committed Aug 20, 2024
1 parent b25ae5e commit 7474df2
Show file tree
Hide file tree
Showing 17 changed files with 394 additions and 277 deletions.
4 changes: 2 additions & 2 deletions src/components/pages/donation_form/SubmitValues.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
<input type="hidden" name="interval" :value="payment.interval">
<input type="hidden" name="amount" :value="payment.amount">

<input type="hidden" name="iban" :value="bankdata.iban">
<input type="hidden" name="bic" :value="bankdata.bic">
<input type="hidden" name="iban" :value="bankdata.accountNumber">
<input type="hidden" name="bic" :value="bankdata.bankCode">

<input type="hidden" name="addressType" :value="addressType">

Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/membership_form/SubmitValues.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<input type="hidden" name="payment_type" :value="fee.type">
<input type="hidden" name="membership_fee_interval" :value="fee.interval">
<input type="hidden" name="membership_fee" :value="fee.fee">
<input type="hidden" name="iban" :value="bankdata.iban">
<input type="hidden" name="bic" :value="bankdata.bic">
<input type="hidden" name="iban" :value="bankdata.accountNumber">
<input type="hidden" name="bic" :value="bankdata.bankCode">

<input type="hidden" name="adresstyp" :value="addressType">

Expand Down
62 changes: 31 additions & 31 deletions src/components/shared/PaymentBankData.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<AccountNumberField
:id="'iban'"
:placeholder="$t( 'donation_form_payment_bankdata_account_iban_placeholder' )"
:account-id="accountId"
:account-id="accountNumber"
:data-track-content="getTrackingCode !== ''"
:data-content-piece="getTrackingCode"
@validate="validate"
Expand All @@ -19,22 +19,22 @@
</div>
</div>

<TextField
v-show="isBankFieldEnabled"
:label="$t( labels.bic )"
:placeholder="labels.bicPlaceholder != '' ? $t( labels.bicPlaceholder ) : ''"
v-model="bankIdentifier"
name="bic"
input-id="bic"
:show-error="bankDataIsInvalid"
:error-message="''"
@field-changed="validate"
/>
<TextField
v-show="isBankFieldEnabled"
:label="$t( labels.bic )"
:placeholder="labels.bicPlaceholder != '' ? $t( labels.bicPlaceholder ) : ''"
v-model="bankIdentifier"
name="bic"
input-id="bic"
:show-error="bankDataIsInvalid"
:error-message="''"
@field-changed="validate"
/>

<div id="bank-name-info">
<span v-show="bankInfoValidated" class="help">
<span id="bank-name-legacy">
<span id="bank-name-iban">{{ getBankName }}</span>
<span v-show="showBankId"> ({{ bankIdentifier }})</span>
<span id="bank-name-iban">{{ bankName }}</span><span v-show="showBankId"> ({{ bankIdentifier }})</span>
</span>
</span>
<span v-if="bankInfoValidatedButInfoMissing" id="bank-name-not-available" class="help">
Expand Down Expand Up @@ -63,8 +63,8 @@ export default defineComponent( {
},
data: function (): BankAccountData {
return {
accountId: this.$store.getters[ 'bankdata/getAccountId' ],
bankId: this.$store.getters[ 'bankdata/getBankId' ],
accountNumber: this.$store.getters[ 'bankdata/accountNumber' ],
bankCode: this.$store.getters[ 'bankdata/bankCode' ],
};
},
props: {
Expand All @@ -87,15 +87,15 @@ export default defineComponent( {
if ( this.bankIdentifier !== '' ) {
return true;
}
if ( this.$store.getters[ 'bankdata/getBankId' ] !== '' ) {
if ( this.$store.getters[ 'bankdata/bankCode' ] !== '' ) {
return true;
}
return false;
},
bankInfoValidatedButInfoMissing(): boolean {
return this.$store.getters[ 'bankdata/bankDataIsValid' ] &&
this.bankIdentifier === '' &&
this.$store.getters[ 'bankdata/getBankId' ] === '';
this.$store.getters[ 'bankdata/bankCode' ] === '';
},
showBankId(): boolean {
return this.bankIdentifier !== '' && this.looksLikeIban();
Expand All @@ -106,12 +106,12 @@ export default defineComponent( {
bankIdentifier: {
get: function (): string {
if ( this.looksLikeGermanIban() ) {
return this.$store.getters[ 'bankdata/getBankId' ];
return this.$store.getters[ 'bankdata/bankCode' ];
}
return this.$data.bankId;
return this.$data.bankCode;
},
set: function ( bankId: string ) {
this.$data.bankId = bankId;
set: function ( bankCode: string ) {
this.$data.bankCode = bankCode;
},
},
labels() {
Expand All @@ -136,7 +136,7 @@ export default defineComponent( {
},
...mapGetters( 'bankdata', [
'bankDataIsInvalid',
'getBankName',
'bankName',
] ),
},
methods: {
Expand All @@ -154,36 +154,36 @@ export default defineComponent( {
action( 'bankdata', 'setBankData' ),
{
validationUrl: this.validateBankDataUrl,
requestParams: { iban: this.$data.accountId.toUpperCase() },
requestParams: { iban: this.$data.accountNumber.toUpperCase() },
} as BankAccountRequest
);
} else {
this.$store.dispatch(
action( 'bankdata', 'setBankData' ),
{
validationUrl: this.validateLegacyBankDataUrl,
requestParams: { accountNumber: this.$data.accountId, bankCode: this.$data.bankId },
requestParams: { accountNumber: this.$data.accountNumber, bankCode: this.$data.bankCode },
} as BankAccountRequest
);
}
},
setAccountId: function ( accountId: string ) {
this.$data.accountId = accountId;
setAccountId: function ( accountNumber: string ) {
this.$data.accountNumber = accountNumber;
},
isAccountIdEmpty: function () {
return this.$data.accountId === '';
return this.$data.accountNumber === '';
},
isBankIdEmpty: function () {
return this.bankId === '';
},
looksLikeIban: function () {
return /^[A-Z]{2}[A-Z0-9\s]+$/i.test( this.$data.accountId );
return /^[A-Z]{2}[A-Z0-9\s]+$/i.test( this.$data.accountNumber );
},
looksLikeBankAccountNumber: function () {
return /^\d+$/.test( this.$data.accountId );
return /^\d+$/.test( this.$data.accountNumber );
},
looksLikeGermanIban() {
return /^DE[0-9\s]+$/i.test( this.$data.accountId );
return /^DE[0-9\s]+$/i.test( this.$data.accountNumber );
},
looksLikeValidAccountNumber() {
return this.looksLikeIban() || this.looksLikeBankAccountNumber();
Expand Down
63 changes: 43 additions & 20 deletions src/store/bankdata/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,68 @@ import { Validity } from '@src/view_models/Validity';
export const actions = {
setBankData( context: ActionContext<BankAccount, any>, payload: BankAccountRequest ): Promise<void> {
context.commit( 'SET_IS_VALIDATING', true );

return axios( payload.validationUrl, {
method: 'get',
headers: { 'Content-Type': 'multipart/form-data' },
params: payload.requestParams,
} ).then( ( validationResult: AxiosResponse<BankAccountResponse> ) => {
const validity = validationResult.data.status === 'ERR' ? Validity.INVALID : Validity.VALID;
context.commit( 'SET_BANK_DATA_VALIDITY', validity );

context.commit( 'SET_ACCOUNT_NUMBER_VALIDITY', validity );
context.commit( 'SET_BANK_CODE_VALIDITY', validity );

if ( validity === Validity.VALID ) {
context.commit( 'SET_BANKNAME', validationResult.data.bankName );
context.commit( 'SET_BANKDATA', {
accountId: validationResult.data.iban,
bankId: validationResult.data.bic,
} );
context.commit( 'SET_ACCOUNT_NUMBER', validationResult.data.accountNumber );
context.commit( 'SET_BANK_CODE', validationResult.data.bankCode );
context.commit( 'SET_BANK_NAME', validationResult.data.bankName );
} else {
context.commit( 'SET_BANKNAME', '' );
context.commit( 'SET_BANK_NAME', '' );
}

context.commit( 'SET_IS_VALIDATING', false );
} );
},
initializeBankData( context: ActionContext<BankAccount, any>, payload: BankAccountData & { bankName: string} ): void {
if ( payload.accountId === '' ) {
return;
setValidating( context: ActionContext<BankAccount, any>, payload: boolean ): void {
context.commit( 'SET_IS_VALIDATING', payload );
},
setAccountNumber( context: ActionContext<BankAccount, any>, payload: string ): void {
context.commit( 'SET_ACCOUNT_NUMBER', payload );
},
setBankCode( context: ActionContext<BankAccount, any>, payload: string ): void {
context.commit( 'SET_BANK_CODE', payload );
},
setBankName( context: ActionContext<BankAccount, any>, payload: string ): void {
context.commit( 'SET_BANK_NAME', payload );
},
initializeBankData( context: ActionContext<BankAccount, any>, payload: BankAccountData ): void {
context.commit( 'SET_ACCOUNT_NUMBER', payload.accountNumber );
context.commit( 'SET_BANK_CODE', payload.bankCode );
context.commit( 'SET_BANK_NAME', payload.bankName );

if ( payload.accountNumber !== '' ) {
context.commit( 'SET_ACCOUNT_NUMBER_VALIDITY', Validity.RESTORED );
}

if ( payload.bankCode !== '' ) {
context.commit( 'SET_BANK_CODE_VALIDITY', Validity.RESTORED );
}
context.commit( 'SET_BANKDATA', {
accountId: payload.accountId,
bankId: payload.bankId,
} );
context.commit( 'SET_BANKNAME', payload.bankName );
context.commit( 'SET_BANK_DATA_VALIDITY', Validity.VALID );
},
markEmptyFieldsAsInvalid( context: ActionContext<BankAccount, any> ): void {
context.commit( 'MARK_EMPTY_FIELDS_INVALID' );
},
setBankDataValidity( context: ActionContext<BankAccount, any>, payload: Validity ): void {
context.commit( 'SET_ACCOUNT_NUMBER_VALIDITY', payload );
context.commit( 'SET_BANK_CODE_VALIDITY', payload );
},
markBankDataAsIncomplete( context: ActionContext<BankAccount, any> ): void {
context.commit( 'MARK_BANKDATA_INCOMPLETE' );
context.commit( 'SET_BANKNAME', '' );
context.commit( 'SET_ACCOUNT_NUMBER_VALIDITY', Validity.INCOMPLETE );
context.commit( 'SET_BANK_CODE_VALIDITY', Validity.INCOMPLETE );
context.commit( 'SET_BANK_NAME', '' );
},
markBankDataAsInvalid( context: ActionContext<BankAccount, any> ): void {
context.commit( 'SET_BANK_DATA_VALIDITY', Validity.INVALID );
context.commit( 'SET_BANKNAME', '' );
context.commit( 'SET_ACCOUNT_NUMBER_VALIDITY', Validity.INVALID );
context.commit( 'SET_BANK_CODE_VALIDITY', Validity.INVALID );
context.commit( 'SET_BANK_NAME', '' );
},
};
25 changes: 17 additions & 8 deletions src/store/bankdata/getters.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
import { GetterTree } from 'vuex';
import { BankAccount } from '@src/view_models/BankAccount';
import { Validity } from '@src/view_models/Validity';
import { looksLikeIban } from '@src/util/bank_account_number_helpers';

export const getters: GetterTree<BankAccount, any> = {
bankDataIsInvalid: function ( state: BankAccount ): boolean {
return state.validity.bankdata === Validity.INVALID;
if ( state.values.accountNumber === '' || looksLikeIban( state.values.accountNumber ) ) {
return state.validity.accountNumber === Validity.INVALID;
}

return state.validity.accountNumber === Validity.INVALID || state.validity.bankCode === Validity.INVALID;
},
bankDataIsValid: function ( state: BankAccount ): boolean {
return state.validity.bankdata === Validity.VALID;
if ( state.values.accountNumber === '' || looksLikeIban( state.values.accountNumber ) ) {
return state.validity.accountNumber === Validity.VALID;
}

return state.validity.accountNumber === Validity.VALID && state.validity.bankCode === Validity.VALID;
},
getBankName: function ( state: BankAccount ): string {
return state.values.bankName;
accountNumber: function ( state: BankAccount ): string {
return state.values.accountNumber;
},
getAccountId: function ( state: BankAccount ): string {
return state.values.iban;
bankCode: function ( state: BankAccount ): string {
return state.values.bankCode;
},
getBankId: function ( state: BankAccount ): string {
return state.values.bic;
bankName: function ( state: BankAccount ): string {
return state.values.bankName;
},
};
7 changes: 4 additions & 3 deletions src/store/bankdata/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@ export default function (): Module<BankAccount, any> {
const state: BankAccount = {
isValidating: false,
validity: {
bankdata: Validity.INCOMPLETE,
accountNumber: Validity.INCOMPLETE,
bankCode: Validity.INCOMPLETE,
},
values: {
iban: '',
bic: '',
accountNumber: '',
bankCode: '',
bankName: '',
},
};
Expand Down
31 changes: 20 additions & 11 deletions src/store/bankdata/mutations.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,36 @@
import { MutationTree } from 'vuex';
import { BankAccount } from '@src/view_models/BankAccount';
import { Validity } from '@src/view_models/Validity';
import { looksLikeIban } from '@src/util/bank_account_number_helpers';

export const mutations: MutationTree<BankAccount> = {
SET_BANKDATA( state: BankAccount, bankData: any ) {
state.values.iban = bankData.accountId;
state.values.bic = bankData.bankId;
SET_ACCOUNT_NUMBER( state: BankAccount, accountNumber: string ) {
state.values.accountNumber = accountNumber;
},
SET_BANKNAME( state: BankAccount, bankName: string ) {
SET_BANK_CODE( state: BankAccount, bankCode: string ) {
state.values.bankCode = bankCode;
},
SET_BANK_NAME( state: BankAccount, bankName: string ) {
state.values.bankName = bankName;
},
SET_BANK_DATA_VALIDITY( state: BankAccount, validity: Validity ) {
state.validity.bankdata = validity;
SET_ACCOUNT_NUMBER_VALIDITY( state: BankAccount, validity: Validity ) {
state.validity.accountNumber = validity;
},
SET_BANK_CODE_VALIDITY( state: BankAccount, validity: Validity ) {
state.validity.bankCode = validity;
},
SET_IS_VALIDATING( state: BankAccount, isValidating: boolean ) {
state.isValidating = isValidating;
},
MARK_EMPTY_FIELDS_INVALID( state: BankAccount ) {
if ( state.validity.bankdata === Validity.INCOMPLETE ) {
state.validity.bankdata = Validity.INVALID;
if ( [ Validity.INCOMPLETE, Validity.RESTORED ].includes( state.validity.accountNumber ) ) {
state.validity.accountNumber = Validity.INVALID;
}

if ( looksLikeIban( state.values.accountNumber ) ) {
state.validity.bankCode = Validity.INCOMPLETE;
} else if ( [ Validity.INCOMPLETE, Validity.RESTORED ].includes( state.validity.bankCode ) ) {
state.validity.bankCode = Validity.INVALID;
}
},
MARK_BANKDATA_INCOMPLETE( state: BankAccount ) {
state.validity.bankdata = Validity.INCOMPLETE;
},
};
20 changes: 10 additions & 10 deletions src/store/dataInitializers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,21 +120,21 @@ export const createInitialMembershipFeeValues = ( dataPersister: DataPersister,
/**
* Look for initial bank fields in initial form data
*/
export const createInitialBankDataValues = ( initialFormValues: InitialBankAccountData|null ): BankAccountData & { bankName: string } => {
export const createInitialBankDataValues = ( initialFormValues: InitialBankAccountData|null ): BankAccountData => {

let iban = '';
let bic = '';
let bankname = '';
let accountNumber = '';
let bankCode = '';
let bankName = '';

if ( initialFormValues ) {
iban = initialFormValues.iban || '';
bic = initialFormValues.bic || '';
bankname = initialFormValues.bankname || '';
accountNumber = initialFormValues.accountNumber || '';
bankCode = initialFormValues.bankCode || '';
bankName = initialFormValues.bankname || '';
}

return {
accountId: iban,
bankId: bic,
bankName: bankname,
accountNumber: accountNumber,
bankCode: bankCode,
bankName: bankName,
};
};
Loading

0 comments on commit 7474df2

Please sign in to comment.