Merge pull request #522 from wmde/fix-payment-validation

Fix payment field validation issue
wmde · Oct 11, 2024 · cf3dfca · cf3dfca
2 parents fe3aba3 + 28ceff8
commit cf3dfca
Show file tree

Hide file tree

Showing 12 changed files with 1,734 additions and 859 deletions.
diff --git a/src/components/pages/donation_form/DonationReceipt/usePersonalDataSectionEventHandlers.ts b/src/components/pages/donation_form/DonationReceipt/usePersonalDataSectionEventHandlers.ts
@@ -76,7 +76,7 @@ export function usePersonalDataSectionEventHandlers(
 		}
 	} );
 
-	store.watch( ( state, getters ) => getters[ 'payment/requiredFieldsAreValid' ], ( isValid: boolean ) => {
+	store.watch( ( state, getters ) => getters[ 'payment/paymentDataIsValid' ], ( isValid: boolean ) => {
 		if ( !paymentDataIsValid.value && isValid ) {
 			paymentDataIsValid.value = true;
 		}

diff --git a/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue b/src/components/pages/donation_form/singlePageFormSections/PersonalDataSection.vue
@@ -23,10 +23,6 @@
 				:initial-address-type="addressType"
 				:address-type-is-invalid="addressTypeIsInvalid"
 			/>
-			<div
-				class="address-type-anonymous-disclaimer"
-				v-show="!addressTypeIsNotAnon">{{ $t( 'donation_addresstype_option_anonymous_disclaimer' ) }}
-			</div>
 		</form>
 
 		<AddressForms
@@ -148,7 +144,6 @@ onMounted( trackDynamicForm );
 const {
 	disabledAddressTypes,
 	addressType,
-	addressTypeIsNotAnon,
 	addressTypeIsInvalid,
 	addressTypeName,
 	setAddressType,

diff --git a/src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts b/src/components/pages/donation_form/usePersonalDataSectionEventHandlers.ts
@@ -47,10 +47,13 @@ export function usePersonalDataSectionEventHandlers(
 				type: store.state.address.addressType,
 				disallowed: [ AddressTypeModel.UNSET ],
 			} ),
-			store.dispatch( action( 'address', 'validateAddress' ), validateAddressUrl ),
-			store.dispatch( action( 'address', 'validateEmail' ), validateEmailUrl ),
 		];
 
+		if ( store.state.address.addressType !== AddressTypeModel.ANON ) {
+			validationCalls.push( store.dispatch( action( 'address', 'validateAddress' ), validateAddressUrl ) );
+			validationCalls.push( store.dispatch( action( 'address', 'validateEmail' ), validateEmailUrl ) );
+		}
+
 		if ( isDirectDebit.value ) {
 			validationCalls.push( store.dispatch( action( 'bankdata', 'markEmptyFieldsAsInvalid' ) ) );
 		}
@@ -93,7 +96,7 @@ export function usePersonalDataSectionEventHandlers(
 		}
 	} );
 
-	store.watch( ( state, getters ) => getters[ 'payment/requiredFieldsAreValid' ], ( isValid: boolean ) => {
+	store.watch( ( state, getters ) => getters[ 'payment/paymentDataIsValid' ], ( isValid: boolean ) => {
 		if ( !paymentDataIsValid.value && isValid ) {
 			paymentDataIsValid.value = true;
 		}

diff --git a/src/components/shared/form_fields/CountryAutocompleteField.vue b/src/components/shared/form_fields/CountryAutocompleteField.vue
@@ -160,7 +160,7 @@ const onBlur = ( selectedCountry: Country ) => {
 		autocompleteIsActive.value = false;
 
 		if ( !itemWasJustSelectedFromList ) {
-			emit( 'field-changed', selectedCountry );
+			emit( 'field-changed', selectedCountry ?? '' );
 		}
 		itemWasJustSelectedFromList = false;
 	}, 200 );