Add DirectDebitField Component

.eslintrc.js

@@ -23,7 +23,15 @@ module.exports = {
 
 		// problematic in TypeScript / ES6
 		'no-unused-vars': 'off',
-		'@typescript-eslint/no-unused-vars': 'error',
+		'@typescript-eslint/no-unused-vars': [ 'error', {
+			'args': 'after-used',
+			'argsIgnorePattern': '^_',
+			'caughtErrors': 'none',
+			'caughtErrorsIgnorePattern': '^_',
+			'destructuredArrayIgnorePattern': '^_',
+			'varsIgnorePattern': '^_',
+			'ignoreRestSiblings': true,
+		} ],
 		'one-var': 'off',
 		'no-undef': 'off',
 		// See https://stackoverflow.com/a/65768375/130121

src/api/BankValidationResource.ts

@@ -0,0 +1,64 @@
+import { BankAccountNumberRequest, BankAccountResponse, BankIbanRequest } from '@src/view_models/BankAccount';
+import axios from 'axios';
+
+export interface BankValidationResource {
+	validateIban: ( data: BankIbanRequest ) => Promise<BankAccountResponse>;
+	validateBankNumber: ( data: BankAccountNumberRequest ) => Promise<BankAccountResponse>;
+}
+
+export interface APIResponse {
+	status: string;
+	iban: string;
+	bic: string;
+	account: string;
+	bankCode: string;
+	bankName?: string;
+}
+
+export class ApiBankValidationResource implements BankValidationResource {
+	validateIbanEndpoint: string;
+	validateBankNumberEndpoint: string;
+
+	constructor( validateIbanEndpoint: string, validateBankNumberEndpoint: string ) {
+		this.validateIbanEndpoint = validateIbanEndpoint;
+		this.validateBankNumberEndpoint = validateBankNumberEndpoint;
+	}
+
+	async validateIban( data: BankIbanRequest ): Promise<BankAccountResponse> {
+		return this.validateBankData( this.validateIbanEndpoint, data ).then( ( response: APIResponse ) => {
+			return {
+				accountNumber: response.account,
+				bankCode: response.bankCode,
+				bankName: response.bankName ?? '',
+				iban: response.iban,
+				bic: response.bic,
+			};
+		} );
+	}
+
+	async validateBankNumber( data: BankAccountNumberRequest ): Promise<BankAccountResponse> {
+		return this.validateBankData( this.validateBankNumberEndpoint, data ).then( ( response: APIResponse ) => {
+			return {
+				accountNumber: response.account,
+				bankCode: response.bankCode,
+				bankName: response.bankName ?? '',
+				iban: response.iban,
+				bic: response.bic,
+			};
+		} );
+	}
+
+	async validateBankData( endpoint: string, data: BankAccountNumberRequest | BankIbanRequest ): Promise<APIResponse> {
+		let validationResult = await axios( endpoint, {
+			method: 'get',
+			headers: { 'Content-Type': 'multipart/form-data' },
+			params: data,
+		} );
+
+		if ( validationResult.data.status === 'ERR' ) {
+			return Promise.reject( 'ERR' );
+		}
+
+		return Promise.resolve( validationResult.data );
+	}
+}

src/components/pages/donation_form/AddressFormErrorSummaries.vue

@@ -4,9 +4,9 @@
 		:is-visible="showErrorSummary"
 		:items="[
 			{
-				validity: store.state.bankdata.validity.bankdata,
+				validity: store.getters[ 'bankdata/bankDataIsInvalid' ] ? Validity.INVALID : Validity.VALID,
 				message: $t( 'donation_form_payment_bankdata_error' ),
-				focusElement: 'iban',
+				focusElement: 'account-number',
 				scrollElement: 'iban-scroll-target'
 			},
 			{
@@ -70,9 +70,9 @@
 		:is-visible="showErrorSummary"
 		:items="[
 			{
-				validity: store.state.bankdata.validity.bankdata,
+				validity: store.getters[ 'bankdata/bankDataIsInvalid' ] ? Validity.INVALID : Validity.VALID,
 				message: $t( 'donation_form_payment_bankdata_error' ),
-				focusElement: 'iban',
+				focusElement: 'account-number',
 				scrollElement: 'iban-scroll-target'
 			},
 			{
@@ -118,10 +118,10 @@
 		:is-visible="showErrorSummary"
 		:items="[
 			{
-				validity: store.state.address.validity.salutation,
-				message: $t( 'donation_form_salutation_error' ),
-				focusElement: 'email-salutation-0',
-				scrollElement: 'email-salutation-scroll-target'
+				validity: store.getters[ 'bankdata/bankDataIsInvalid' ] ? Validity.INVALID : Validity.VALID,
+				message: $t( 'donation_form_payment_bankdata_error' ),
+				focusElement: 'account-number',
+				scrollElement: 'iban-scroll-target'
 			},
 			{
 				validity: store.state.address.validity.firstName,
@@ -150,6 +150,7 @@
 import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
 import { useStore } from 'vuex';
 import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+import { Validity } from '@src/view_models/Validity';
 
 interface Props {
 	showErrorSummary: boolean;

src/components/pages/donation_form/AddressForms.vue

@@ -189,14 +189,13 @@ import { useAddressFunctions } from './AddressFunctions';
 import { Salutation } from '@src/view_models/Salutation';
 import { TrackingData } from '@src/view_models/TrackingData';
 import { CampaignValues } from '@src/view_models/CampaignValues';
-import { StoreKey } from '@src/store/donation_store';
-import { injectStrict } from '@src/util/injectStrict';
 import { AddressTypeIds } from '@src/components/pages/donation_form/AddressTypeIds';
 import { Validity } from '@src/view_models/Validity';
 import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPlaceholderWarning.vue';
 import { useReceiptModel } from '@src/components/pages/donation_form/useReceiptModel';
 import { useMailingListModel } from '@src/components/shared/form_fields/useMailingListModel';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
+import { useStore } from 'vuex';
 
 interface Props {
 	countries: Country[],
@@ -214,7 +213,7 @@ const props = withDefaults( defineProps<Props>(), {
 } );
 
 const { addressType, isFullSelected, addressValidationPatterns } = toRefs( props );
-const store = injectStrict( StoreKey );
+const store = useStore();
 const {
 	formData,
 	fieldErrors,

src/components/pages/donation_form/DonationReceipt/AddressFields.vue

@@ -109,7 +109,6 @@
 import RadioField from '@src/components/shared/form_fields/RadioField.vue';
 import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
 import { useStore } from 'vuex';
-import { StoreKey } from '@src/store/donation_store';
 import { useAddressTypeModel } from '@src/components/pages/donation_form/DonationReceipt/useAddressTypeModel';
 import { AddressFormData, AddressValidity } from '@src/view_models/Address';
 import TextField from '@src/components/shared/form_fields/TextField.vue';
@@ -131,7 +130,7 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits( [ 'field-changed' ] );
 
-const store = useStore( StoreKey );
+const store = useStore();
 const addressType = useAddressTypeModel( store );
 
 const showStreetWarning = computed<boolean>( () => /^\D+$/.test( props.formData.street.value ) );

src/components/pages/donation_form/DonationReceipt/AddressFormErrorSummaries.vue

@@ -4,9 +4,9 @@
 		:is-visible="showErrorSummary"
 		:items="[
 			{
-				validity: store.state.bankdata.validity.bankdata,
+				validity: store.getters[ 'bankdata/bankDataIsInvalid' ] ? Validity.INVALID : Validity.VALID,
 				message: $t( 'donation_form_payment_bankdata_error' ),
-				focusElement: 'iban',
+				focusElement: 'account-number',
 				scrollElement: 'iban-scroll-target'
 			},
 			{
@@ -46,9 +46,9 @@
 		:is-visible="showErrorSummary"
 		:items="[
 			{
-				validity: store.state.bankdata.validity.bankdata,
+				validity: store.getters[ 'bankdata/bankDataIsInvalid' ] ? Validity.INVALID : Validity.VALID,
 				message: $t( 'donation_form_payment_bankdata_error' ),
-				focusElement: 'iban',
+				focusElement: 'account-number',
 				scrollElement: 'iban-scroll-target'
 			},
 			{
@@ -112,9 +112,9 @@
 		:is-visible="showErrorSummary"
 		:items="[
 			{
-				validity: store.state.bankdata.validity.bankdata,
+				validity: store.getters[ 'bankdata/bankDataIsInvalid' ] ? Validity.INVALID : Validity.VALID,
 				message: $t( 'donation_form_payment_bankdata_error' ),
-				focusElement: 'iban',
+				focusElement: 'account-number',
 				scrollElement: 'iban-scroll-target'
 			},
 			{

src/components/pages/donation_form/subpages/AddressPage.vue

@@ -7,7 +7,6 @@
 		ref="pageRef"
 	>
 		<h1 id="donation-form-heading" class="form-title">{{ $t( 'donation_form_heading' ) }}</h1>
-		<h2 id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
 		<p id="donation-form-tagline">{{ $t( 'donation_form_section_address_tagline' ) }}</p>
 
 		<PaymentSummary
@@ -19,13 +18,12 @@
 		</PaymentSummary>
 
 		<form v-if="isDirectDebitPayment" id="bank-data-details" @submit="evt => evt.preventDefault()">
-			<ScrollTarget target-id="iban-scroll-target"/>
-			<PaymentBankData
-				:validateBankDataUrl="validateBankDataUrl"
-				:validateLegacyBankDataUrl="validateLegacyBankDataUrl"
-			/>
+			<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_payment_bankdata_title' ) }}</h2>
+			<BankFields/>
 		</form>
 
+		<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
+
 		<form id="address-type-selection" @submit="evt => evt.preventDefault()">
 			<ScrollTarget target-id="address-type-scroll-target"/>
 			<AddressTypeBasic
@@ -104,7 +102,6 @@ import AddressTypeBasic from '@src/components/pages/donation_form/AddressTypeBas
 import DonationSummary from '@src/components/pages/donation_form/DonationSummary.vue';
 import PaymentSummary from '@src/components/pages/donation_form/PaymentSummary.vue';
 import SubmitValues from '@src/components/pages/donation_form/SubmitValues.vue';
-import PaymentBankData from '@src/components/shared/PaymentBankData.vue';
 import PaymentTextFormButton from '@src/components/shared/form_elements/PaymentTextFormButton.vue';
 import FormButton from '@src/components/shared/form_elements/FormButton.vue';
 import FormSummary from '@src/components/shared/FormSummary.vue';
@@ -123,6 +120,7 @@ import { useStore } from 'vuex';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 import AddressFormErrorSummaries from '@src/components/pages/donation_form/AddressFormErrorSummaries.vue';
 import StreetAutocompleteAddressFormErrorSummaries from '@src/components/pages/donation_form/StreetAutocomplete/AddressFormErrorSummaries.vue';
+import BankFields from '@src/components/shared/BankFields.vue';
 
 interface Props {
 	assetsPath: string;

src/components/pages/donation_form/subpages/AddressPageDonationReceipt.vue

@@ -7,7 +7,6 @@
 		ref="pageRef"
 	>
 		<h1 id="donation-form-heading" class="form-title">{{ $t( 'donation_form_heading' ) }}</h1>
-		<h2 id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
 		<p id="donation-form-tagline">{{ $t( 'donation_form_section_address_tagline' ) }}</p>
 
 		<PaymentSummary
@@ -18,14 +17,15 @@
 			@previous-page="previousPage">
 		</PaymentSummary>
 
+		<form v-if="isDirectDebitPayment" id="bank-data-details" @submit="evt => evt.preventDefault()">
+			<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_payment_bankdata_title' ) }}</h2>
+			<BankFields/>
+		</form>
+
+		<h2 v-if="isDirectDebitPayment" id="donation-form-subheading" class="form-subtitle">{{ $t( 'donation_form_address_subheading' ) }}</h2>
+
 		<form @submit.prevent="submit" id="donation-form" action="/donation/add" method="post">
 			<AutofillHandler @autofill="onAutofill">
-				<ScrollTarget target-id="iban-scroll-target"/>
-				<PaymentBankData
-					v-if="isDirectDebitPayment"
-					:validateBankDataUrl="validateBankDataUrl"
-					:validateLegacyBankDataUrl="validateLegacyBankDataUrl"
-				/>
 
 				<NameFields
 					:show-error="fieldErrors"
@@ -133,15 +133,13 @@ import EmailField from '@src/components/shared/form_fields/EmailField.vue';
 import FormButton from '@src/components/shared/form_elements/FormButton.vue';
 import MailingListField from '@src/components/shared/form_fields/MailingListField.vue';
 import NameFields from '@src/components/pages/donation_form/DonationReceipt/NameFields.vue';
-import PaymentBankData from '@src/components/shared/PaymentBankData.vue';
 import PaymentSummary from '@src/components/pages/donation_form/PaymentSummary.vue';
 import RadioField from '@src/components/shared/form_fields/RadioField.vue';
 import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPlaceholderWarning.vue';
 import { AddressValidation } from '@src/view_models/Validation';
 import { CampaignValues } from '@src/view_models/CampaignValues';
 import { Country } from '@src/view_models/Country';
 import { Salutation } from '@src/view_models/Salutation';
-import { StoreKey } from '@src/store/donation_store';
 import { TrackingData } from '@src/view_models/TrackingData';
 import { Validity } from '@src/view_models/Validity';
 import { adjustSalutationLocaleIfNeeded } from '@src/components/shared/SalutationLocaleAdjuster';
@@ -160,6 +158,7 @@ import FormSummary from '@src/components/shared/FormSummary.vue';
 import SubmitValues from '@src/components/pages/donation_form/SubmitValues.vue';
 import AddressFormErrorSummaries from '@src/components/pages/donation_form/DonationReceipt/AddressFormErrorSummaries.vue';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
+import BankFields from '@src/components/shared/BankFields.vue';
 
 interface Props {
 	assetsPath: string;
@@ -176,7 +175,7 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits( [ 'previous-page' ] );
-const store = useStore( StoreKey );
+const store = useStore();
 
 const { addressType, addressTypeName } = useAddressType( store );
 const { addressSummary, inlineSummaryLanguageItem } = useAddressSummary( store );

src/components/pages/membership_form/Address.vue

@@ -80,15 +80,14 @@ import IncentivesField from '@src/components/shared/form_fields/IncentivesField.
 import { useAddressFunctions } from '@src/components/pages/membership_form/AddressFunctions';
 import AutofillHandler from '@src/components/shared/AutofillHandler.vue';
 import ValueEqualsPlaceholderWarning from '@src/components/shared/ValueEqualsPlaceholderWarning.vue';
-import { StoreKeyMembership } from '@src/store/membership_store';
-import { injectStrict } from '@src/util/injectStrict';
 import CheckboxSingleFormInput from '@src/components/shared/form_elements/CheckboxSingleFormInput.vue';
 import TextField from '@src/components/shared/form_fields/TextField.vue';
 import { useReceiptModel } from '@src/components/pages/membership_form/useReceiptModel';
 import { useIncentivesModel } from '@src/components/pages/membership_form/useIncentivesModel';
 import { CheckboxFormOption } from '@src/components/shared/form_fields/FormOptions';
 import { useI18n } from 'vue-i18n';
 import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+import { useStore } from 'vuex';
 
 interface Props {
 	validateAddressUrl: string,
@@ -99,7 +98,7 @@ interface Props {
 	dateOfBirthValidationPattern: String,
 }
 const props = defineProps<Props>();
-const store = injectStrict( StoreKeyMembership );
+const store = useStore();
 const { t } = useI18n();
 
 const { addressValidationPatterns } = toRefs( props );

src/components/pages/membership_form/Payment.vue

@@ -47,11 +47,7 @@
 			/>
 		</FormSection>
 
-		<PaymentBankData
-			v-if="paymentType === 'BEZ'"
-			:validateBankDataUrl="validateBankDataUrl.toString()"
-			:validateLegacyBankDataUrl="validateLegacyBankDataUrl.toString()"
-		/>
+		<BankFields v-if="paymentType === 'BEZ'"/>
 	</div>
 </template>
 
@@ -63,10 +59,10 @@ import { usePaymentFieldModel } from '@src/components/pages/membership_form/useP
 import RadioField from '@src/components/shared/form_fields/RadioField.vue';
 import FormSection from '@src/components/shared/form_elements/FormSection.vue';
 import { CheckboxFormOption } from '@src/components/shared/form_fields/FormOptions';
-import PaymentBankData from '@src/components/shared/PaymentBankData.vue';
 import AmountField from '@src/components/shared/form_fields/AmountField.vue';
 import { FeeValidity } from '@src/view_models/MembershipFee';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
+import BankFields from '@src/components/shared/BankFields.vue';
 
 interface Props {
 	validateFeeUrl: string,