From cac260c130cced8f1e2dbfdebfec0e42e2c4e8e8 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Wed, 28 Aug 2024 19:18:53 +0200
Subject: [PATCH] Create combined ErrorSummary component

- combines error items for payment and address data

https://phabricator.wikimedia.org/T368525
---
 .../SinglePageErrorSummary.vue                | 216 ++++++++++++++++++
 .../PersonalDataSection.vue                   |  11 +-
 .../PersonalDataSectionDonationReceipt.vue    |   5 +-
 .../SinglePageErrorSummary.vue                | 216 ++++++++++++++++++
 .../usePersonalDataSectionEventHandlers.ts    |  17 +-
 5 files changed, 454 insertions(+), 11 deletions(-)
 create mode 100644 src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue
 create mode 100644 src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue

diff --git a/src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue b/src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue
new file mode 100644
index 000000000..5a6f36057
--- /dev/null
+++ b/src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue
@@ -0,0 +1,216 @@
+<template>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.PERSON || addressType === AddressTypeModel.UNSET"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.bankdata.validity.bankdata,
+				message: $t( 'donation_form_payment_bankdata_error' ),
+				focusElement: 'iban',
+				scrollElement: 'iban-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.addressType,
+				message: $t( 'donation_form_section_address_error' ),
+				focusElement: 'addressType-0',
+				scrollElement: 'address-type-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.salutation,
+				message: $t( 'donation_form_salutation_error' ),
+				focusElement: 'person-salutation-0',
+				scrollElement: 'person-salutation-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.firstName,
+				message: $t( 'donation_form_firstname_error' ),
+				focusElement: 'person-first-name',
+				scrollElement: 'person-first-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.lastName,
+				message: $t( 'donation_form_lastname_error' ),
+				focusElement: 'person-last-name',
+				scrollElement: 'person-last-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.country,
+				message: $t( 'donation_form_country_error' ),
+				focusElement: 'person-country',
+				scrollElement: 'person-country-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.postcode,
+				message: $t( 'donation_form_zip_error' ),
+				focusElement: 'person-post-code',
+				scrollElement: 'person-post-code-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.city,
+				message: $t( 'donation_form_city_error' ),
+				focusElement: 'person-city',
+				scrollElement: 'person-city-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.street,
+				message: $t( 'donation_form_street_error' ),
+				focusElement: 'person-street',
+				scrollElement: 'person-street-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.email,
+				message: $t( 'donation_form_email_error' ),
+				focusElement: 'person-email',
+				scrollElement: 'person-email-scroll-target'
+			},
+		]"
+	/>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.COMPANY"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.bankdata.validity.bankdata,
+				message: $t( 'donation_form_payment_bankdata_error' ),
+				focusElement: 'iban',
+				scrollElement: 'iban-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.companyName,
+				message: $t( 'donation_form_companyname_error' ),
+				focusElement: 'company-company-name',
+				scrollElement: 'company-company-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.country,
+				message: $t( 'donation_form_country_error' ),
+				focusElement: 'company-country',
+				scrollElement: 'company-country-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.postcode,
+				message: $t( 'donation_form_zip_error' ),
+				focusElement: 'company-post-code',
+				scrollElement: 'company-post-code-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.city,
+				message: $t( 'donation_form_city_error' ),
+				focusElement: 'company-city',
+				scrollElement: 'company-city-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.street,
+				message: $t( 'donation_form_street_error' ),
+				focusElement: 'company-street',
+				scrollElement: 'company-street-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.email,
+				message: $t( 'donation_form_email_error' ),
+				focusElement: 'company-email',
+				scrollElement: 'company-email-scroll-target'
+			},
+		]"
+	/>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.EMAIL"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.address.validity.salutation,
+				message: $t( 'donation_form_salutation_error' ),
+				focusElement: 'email-salutation-0',
+				scrollElement: 'email-salutation-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.firstName,
+				message: $t( 'donation_form_firstname_error' ),
+				focusElement: 'email-first-name',
+				scrollElement: 'email-first-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.lastName,
+				message: $t( 'donation_form_lastname_error' ),
+				focusElement: 'email-last-name',
+				scrollElement: 'email-last-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.email,
+				message: $t( 'donation_form_email_error' ),
+				focusElement: 'email-email',
+				scrollElement: 'email-email-scroll-target'
+			},
+		]"
+	/>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.ANON"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+		]"
+	/>
+</template>
+
+<script setup lang="ts">
+
+import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
+import { useStore } from 'vuex';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+
+interface Props {
+	showErrorSummary: boolean;
+	addressType: AddressTypeModel;
+}
+
+defineProps<Props>();
+const store = useStore();
+
+</script>
diff --git a/src/components/pages/donation_form/singlePageFromSections/PersonalDataSection.vue b/src/components/pages/donation_form/singlePageFromSections/PersonalDataSection.vue
index df6444e9d..0c6cd838d 100644
--- a/src/components/pages/donation_form/singlePageFromSections/PersonalDataSection.vue
+++ b/src/components/pages/donation_form/singlePageFromSections/PersonalDataSection.vue
@@ -43,11 +43,11 @@
 
 		<FeatureToggle default-template="campaigns.address_field_order.legacy">
 			<template #campaigns.address_field_order.legacy>
-				<AddressFormErrorSummaries :show-error-summary="showErrorSummary" :address-type="addressType"/>
+				<SinglePageErrorSummary :show-error-summary="showErrorSummary" :address-type="addressType"/>
 			</template>
 
 			<template #campaigns.address_field_order.new_order>
-				<StreetAutocompleteAddressFormErrorSummaries :show-error-summary="showErrorSummary" :address-type="addressType"/>
+				<StreetAutocompleteSinglePageErrorSummaries :show-error-summary="showErrorSummary" :address-type="addressType"/>
 			</template>
 		</FeatureToggle>
 
@@ -92,9 +92,10 @@ import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 import PaymentBankData from '@src/components/shared/PaymentBankData.vue';
 import AddressTypeBasic from '@src/components/pages/donation_form/AddressTypeBasic.vue';
 import AddressForms from '@src/components/pages/donation_form/AddressForms.vue';
-import AddressFormErrorSummaries from '@src/components/pages/donation_form/AddressFormErrorSummaries.vue';
-import StreetAutocompleteAddressFormErrorSummaries
-	from '@src/components/pages/donation_form/StreetAutocomplete/AddressFormErrorSummaries.vue';
+import SinglePageErrorSummary
+	from '@src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue';
+import StreetAutocompleteSinglePageErrorSummaries
+	from '@src/components/pages/donation_form/StreetAutocomplete/SinglePageErrorSummary.vue';
 import PaymentTextFormButton from '@src/components/shared/form_elements/PaymentTextFormButton.vue';
 import FormButton from '@src/components/shared/form_elements/FormButton.vue';
 import DonationSummary from '@src/components/pages/donation_form/DonationSummary.vue';
diff --git a/src/components/pages/donation_form/singlePageFromSections/PersonalDataSectionDonationReceipt.vue b/src/components/pages/donation_form/singlePageFromSections/PersonalDataSectionDonationReceipt.vue
index 264a6b0cd..d5e0b7241 100644
--- a/src/components/pages/donation_form/singlePageFromSections/PersonalDataSectionDonationReceipt.vue
+++ b/src/components/pages/donation_form/singlePageFromSections/PersonalDataSectionDonationReceipt.vue
@@ -73,7 +73,7 @@
 
 			</AutofillHandler>
 
-			<AddressFormErrorSummaries
+			<SinglePageErrorSummary
 				:show-error-summary="showErrorSummary"
 				:address-type="addressType"
 				:show-receipt-option-error="showReceiptOptionError"
@@ -117,8 +117,6 @@
 
 <script setup lang="ts">
 
-import AddressFormErrorSummaries
-	from '@src/components/pages/donation_form/DonationReceipt/AddressFormErrorSummaries.vue';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 import EmailField from '@src/components/shared/form_fields/EmailField.vue';
 import MailingListField from '@src/components/shared/form_fields/MailingListField.vue';
@@ -156,6 +154,7 @@ import {
 import { Validity } from '@src/view_models/Validity';
 import { trackDynamicForm } from '@src/util/tracking';
 import { adjustSalutationLocaleIfNeeded } from '@src/components/shared/SalutationLocaleAdjuster';
+import SinglePageErrorSummary from '@src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue';
 
 interface Props {
 	assetsPath: string;
diff --git a/src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue b/src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue
new file mode 100644
index 000000000..fa8f4e06d
--- /dev/null
+++ b/src/components/pages/donation_form/singlePageFromSections/SinglePageErrorSummary.vue
@@ -0,0 +1,216 @@
+<template>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.PERSON || addressType === AddressTypeModel.UNSET"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.bankdata.validity.bankdata,
+				message: $t( 'donation_form_payment_bankdata_error' ),
+				focusElement: 'iban',
+				scrollElement: 'iban-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.addressType,
+				message: $t( 'donation_form_section_address_error' ),
+				focusElement: 'addressType-0',
+				scrollElement: 'address-type-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.salutation,
+				message: $t( 'donation_form_salutation_error' ),
+				focusElement: 'person-salutation-0',
+				scrollElement: 'person-salutation-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.firstName,
+				message: $t( 'donation_form_firstname_error' ),
+				focusElement: 'person-first-name',
+				scrollElement: 'person-first-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.lastName,
+				message: $t( 'donation_form_lastname_error' ),
+				focusElement: 'person-last-name',
+				scrollElement: 'person-last-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.street,
+				message: $t( 'donation_form_street_error' ),
+				focusElement: 'person-street',
+				scrollElement: 'person-street-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.postcode,
+				message: $t( 'donation_form_zip_error' ),
+				focusElement: 'person-post-code',
+				scrollElement: 'person-post-code-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.city,
+				message: $t( 'donation_form_city_error' ),
+				focusElement: 'person-city',
+				scrollElement: 'person-city-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.country,
+				message: $t( 'donation_form_country_error' ),
+				focusElement: 'person-country',
+				scrollElement: 'person-country-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.email,
+				message: $t( 'donation_form_email_error' ),
+				focusElement: 'person-email',
+				scrollElement: 'person-email-scroll-target'
+			},
+		]"
+	/>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.COMPANY"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.bankdata.validity.bankdata,
+				message: $t( 'donation_form_payment_bankdata_error' ),
+				focusElement: 'iban',
+				scrollElement: 'iban-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.companyName,
+				message: $t( 'donation_form_companyname_error' ),
+				focusElement: 'company-company-name',
+				scrollElement: 'company-company-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.street,
+				message: $t( 'donation_form_street_error' ),
+				focusElement: 'company-street',
+				scrollElement: 'company-street-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.postcode,
+				message: $t( 'donation_form_zip_error' ),
+				focusElement: 'company-post-code',
+				scrollElement: 'company-post-code-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.city,
+				message: $t( 'donation_form_city_error' ),
+				focusElement: 'company-city',
+				scrollElement: 'company-city-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.country,
+				message: $t( 'donation_form_country_error' ),
+				focusElement: 'company-country',
+				scrollElement: 'company-country-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.email,
+				message: $t( 'donation_form_email_error' ),
+				focusElement: 'company-email',
+				scrollElement: 'company-email-scroll-target'
+			},
+		]"
+	/>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.EMAIL"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+			{
+				validity: store.state.address.validity.salutation,
+				message: $t( 'donation_form_salutation_error' ),
+				focusElement: 'email-salutation-0',
+				scrollElement: 'email-salutation-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.firstName,
+				message: $t( 'donation_form_firstname_error' ),
+				focusElement: 'email-first-name',
+				scrollElement: 'email-first-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.lastName,
+				message: $t( 'donation_form_lastname_error' ),
+				focusElement: 'email-last-name',
+				scrollElement: 'email-last-name-scroll-target'
+			},
+			{
+				validity: store.state.address.validity.email,
+				message: $t( 'donation_form_email_error' ),
+				focusElement: 'email-email',
+				scrollElement: 'email-email-scroll-target'
+			},
+		]"
+	/>
+	<ErrorSummary
+		v-if="addressType === AddressTypeModel.ANON"
+		:is-visible="showErrorSummary"
+		:items="[
+			{
+				validity: store.state.payment.validity.amount,
+				message: $t( 'error_summary_amount' ),
+				focusElement: 'amount-500',
+				scrollElement: 'payment-form-amount-scroll-target',
+			},
+			{
+				validity: store.state.payment.validity.type,
+				message: $t( 'error_summary_payment_type' ),
+				focusElement: 'paymentType-0',
+				scrollElement: 'payment-form-type-scroll-target',
+			},
+		]"
+	/>
+</template>
+
+<script setup lang="ts">
+
+import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
+import { useStore } from 'vuex';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+
+interface Props {
+	showErrorSummary: boolean;
+	addressType: AddressTypeModel;
+}
+
+defineProps<Props>();
+const store = useStore();
+
+</script>
diff --git a/src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts b/src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts
index 75817e11c..ecccb7cb1 100644
--- a/src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts
+++ b/src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts
@@ -36,13 +36,13 @@ export function usePersonalDataSectionEventHandlers(
 	validateEmailUrl: string,
 ): ReturnType {
 	const submitValuesForm = ref<HTMLFormElement>();
+	const paymentDataIsValid = ref<boolean>( true );
 	const bankDataIsValid = ref<boolean>( true );
 	const addressDataIsValid = ref<boolean>( true );
-	const showErrorSummary = computed<boolean>( () => !bankDataIsValid.value || !addressDataIsValid.value );
+	const showErrorSummary = computed<boolean>( () => !bankDataIsValid.value || !addressDataIsValid.value || !paymentDataIsValid.value );
 	const submit = async (): Promise<void> => {
 		const validationCalls: Promise<any>[] = [
-			//TODO add more payment validation calls here
-			// store.dispatch( action( 'payment', 'markEmptyValuesAsInvalid' ) ),
+			store.dispatch( action( 'payment', 'markEmptyValuesAsInvalid' ) ),
 			store.dispatch( action( 'address', 'validateAddressType' ), {
 				type: store.state.address.addressType,
 				disallowed: [ AddressTypeModel.UNSET ],
@@ -59,6 +59,11 @@ export function usePersonalDataSectionEventHandlers(
 		// We need to wait for the asynchronous bank data validation, that might still be going on
 		await waitForServerValidationToFinish( store );
 
+		if ( !store.getters[ 'payment/paymentDataIsValid' ] ) {
+			paymentDataIsValid.value = false;
+			return;
+		}
+
 		if ( !store.getters[ 'address/requiredFieldsAreValid' ] ) {
 			addressDataIsValid.value = false;
 			return;
@@ -75,6 +80,12 @@ export function usePersonalDataSectionEventHandlers(
 		submitValuesForm.value.submit();
 	};
 
+	store.watch( ( state, getters ) => getters[ 'payment/requiredFieldsAreValid' ], ( isValid: boolean ) => {
+		if ( !paymentDataIsValid.value && isValid ) {
+			paymentDataIsValid.value = true;
+		}
+	} );
+
 	store.watch( ( state, getters ) => getters[ 'address/requiredFieldsAreValid' ], ( isValid: boolean ) => {
 		if ( !addressDataIsValid.value && isValid ) {
 			addressDataIsValid.value = true;