From bc097da7e10be76b8f723c428b8f0677d62cc810 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Thu, 14 Sep 2023 17:08:54 +0200
Subject: [PATCH] Make address form submittable

This fixes validation and field names to make sure
the form submits to the application correctly.

https://phabricator.wikimedia.org/T345528
---
 .../DonationReceipt/AddressFields.vue         |  8 +--
 .../DonationReceipt/NameFields.vue            |  3 +-
 .../useAddressFormEventHandlers.ts            | 71 +++++++++++++++++++
 .../DonationReceipt/useAddressType.ts         |  4 +-
 .../useAddressTypeFromReceiptSetter.ts        | 28 ++++++++
 .../subpages/AddressPageDonationReceipt.vue   | 21 +++---
 src/components/shared/Postal.vue              | 22 +++---
 .../form_fields/CityAutocompleteField.vue     |  2 +-
 .../form_fields/CountryAutocompleteField.vue  |  2 +-
 .../shared/form_fields/MailingListField.vue   |  2 +-
 .../form_inputs/CheckboxSingleFormInput.vue   |  1 +
 src/scss/components/form_field.scss           |  5 +-
 src/store/address/constants.ts                |  2 +
 src/view_models/AddressTypeModel.ts           | 11 +--
 14 files changed, 149 insertions(+), 33 deletions(-)
 create mode 100644 src/components/pages/donation_form/DonationReceipt/useAddressFormEventHandlers.ts
 create mode 100644 src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter.ts

diff --git a/src/components/pages/donation_form/DonationReceipt/AddressFields.vue b/src/components/pages/donation_form/DonationReceipt/AddressFields.vue
index 683059b4b..b911d348b 100644
--- a/src/components/pages/donation_form/DonationReceipt/AddressFields.vue
+++ b/src/components/pages/donation_form/DonationReceipt/AddressFields.vue
@@ -3,10 +3,10 @@
 
 		<RadioField
 			v-model="addressType"
-			name="addressType"
+			name="addressTypeSelector"
 			:options="[
 				{ value: AddressTypeModel.PERSON, label: $t( 'donation_form_addresstype_option_private_addresstype' ) },
-				{ value: AddressTypeModel.COMPANY, label: $t( 'donation_form_addresstype_option_company_addresstype' ) },
+				{ value: AddressTypeModel.COMPANY_WITH_CONTACT, label: $t( 'donation_form_addresstype_option_company_addresstype' ) },
 			]"
 			:label="$t( 'donation_form_address_choice_title_addresstype_basic' )"
 			:show-error="showAddressTypeError"
@@ -14,8 +14,8 @@
 		/>
 
 		<TextField
-			v-if="addressType === AddressTypeModel.COMPANY"
-			name="company-name"
+			v-if="addressType === AddressTypeModel.COMPANY_WITH_CONTACT"
+			name="companyName"
 			input-id="company-name"
 			v-model="formData.companyName.value"
 			:show-error="showError.companyName"
diff --git a/src/components/pages/donation_form/DonationReceipt/NameFields.vue b/src/components/pages/donation_form/DonationReceipt/NameFields.vue
index 97ad9a326..9f4e3e2f5 100644
--- a/src/components/pages/donation_form/DonationReceipt/NameFields.vue
+++ b/src/components/pages/donation_form/DonationReceipt/NameFields.vue
@@ -1,7 +1,8 @@
 <template>
 	<div class="name-section">
+
 		<RadioField
-			name="salutationInternal"
+			name="salutation"
 			v-model="formData.salutation.value"
 			:label="$t( 'donation_form_salutation_label' )"
 			:options="salutations"
diff --git a/src/components/pages/donation_form/DonationReceipt/useAddressFormEventHandlers.ts b/src/components/pages/donation_form/DonationReceipt/useAddressFormEventHandlers.ts
new file mode 100644
index 000000000..fb68c5e52
--- /dev/null
+++ b/src/components/pages/donation_form/DonationReceipt/useAddressFormEventHandlers.ts
@@ -0,0 +1,71 @@
+import { Store } from 'vuex';
+import { trackFormSubmission } from '@src/tracking';
+import { action } from '@src/store/util';
+import { NS_ADDRESS, NS_BANKDATA, NS_PAYMENT } from '@src/store/namespaces';
+import { validateAddress, validateAddressType, validateEmail } from '@src/store/address/actionTypes';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+import { markEmptyValuesAsInvalid } from '@src/store/bankdata/actionTypes';
+import { waitForServerValidationToFinish } from '@src/wait_for_server_validation';
+import { discardInitialization } from '@src/store/payment/actionTypes';
+import { ComputedRef } from 'vue';
+
+const scrollToFirstError = () => {
+	document.getElementsByClassName( 'help is-danger' )[ 0 ]
+		.scrollIntoView( { behavior: 'smooth', block: 'center', inline: 'nearest' } );
+};
+
+type ReturnType = {
+	submit: ( e: Event ) => Promise<void>,
+	previousPage: () => void,
+}
+
+export function useAddressFormEventHandlers(
+	store: Store<any>,
+	emit: ( eventName: string ) => void,
+	isDirectDebit: ComputedRef<any>,
+	validateAddressUrl: string,
+	validateEmailUrl: string
+): ReturnType {
+	const submit = async ( e: Event ) => {
+		e.preventDefault();
+
+		await store.dispatch( action( NS_ADDRESS, validateAddressType ), {
+			type: store.state.address.addressType,
+			disallowed: [ AddressTypeModel.UNSET ],
+		} );
+		await store.dispatch( action( NS_ADDRESS, validateAddress ), validateAddressUrl );
+		await store.dispatch( action( NS_ADDRESS, validateEmail ), validateEmailUrl );
+
+		if ( isDirectDebit.value ) {
+			await store.dispatch( action( NS_BANKDATA, markEmptyValuesAsInvalid ) );
+		}
+
+		// We need to wait for the asynchronous bank data validation, that might still be going on
+		await waitForServerValidationToFinish( store );
+
+		if ( !store.getters[ NS_ADDRESS + '/requiredFieldsAreValid' ] ) {
+			scrollToFirstError();
+			return;
+		}
+
+		if ( isDirectDebit.value && !store.getters[ NS_BANKDATA + '/bankDataIsValid' ] ) {
+			scrollToFirstError();
+			return;
+		}
+
+		const form = e.target as HTMLFormElement;
+
+		trackFormSubmission( form );
+		form.submit();
+	};
+
+	const previousPage = async () => {
+		await store.dispatch( action( NS_PAYMENT, discardInitialization ) );
+		emit( 'previous-page' );
+	};
+
+	return {
+		submit,
+		previousPage,
+	};
+}
diff --git a/src/components/pages/donation_form/DonationReceipt/useAddressType.ts b/src/components/pages/donation_form/DonationReceipt/useAddressType.ts
index 040095345..05208e3a8 100644
--- a/src/components/pages/donation_form/DonationReceipt/useAddressType.ts
+++ b/src/components/pages/donation_form/DonationReceipt/useAddressType.ts
@@ -3,12 +3,12 @@ import { Store } from 'vuex';
 import { addressTypeName as getAddressTypeName } from '@src/view_models/AddressTypeModel';
 
 type ReturnType = {
-	addressType: ComputedRef<string>,
+	addressType: ComputedRef<number>,
 	addressTypeName: ComputedRef<string>,
 };
 
 export function useAddressType( store: Store<any> ): ReturnType {
-	const addressType = computed<string>( () => store.getters[ 'address/addressType' ] );
+	const addressType = computed<number>( () => store.getters[ 'address/addressType' ] );
 	const addressTypeName = computed<string>( (): string => getAddressTypeName( store.state.address.addressType ) );
 
 	return {
diff --git a/src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter.ts b/src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter.ts
new file mode 100644
index 000000000..bd8755d07
--- /dev/null
+++ b/src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter.ts
@@ -0,0 +1,28 @@
+import { ComputedRef, Ref, ref, watch } from 'vue';
+import { Store } from 'vuex';
+import { action } from '@src/store/util';
+import { NS_ADDRESS } from '@src/store/namespaces';
+import { setAddressType as setAddressTypeActionType } from '@src/store/address/actionTypes';
+import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+
+export function useAddressTypeFromReceiptSetter( receiptModel: Ref<boolean | null>, addressType: ComputedRef<number>, store: Store<any> ): void {
+	const lastAddressType = ref<number>( addressType.value );
+
+	if ( !receiptModel.value ) {
+		store.dispatch( action( NS_ADDRESS, setAddressTypeActionType ), AddressTypeModel.EMAIL );
+	} else if ( ![ AddressTypeModel.PERSON, AddressTypeModel.COMPANY_WITH_CONTACT ].includes( addressType.value ) ) {
+		store.dispatch( action( NS_ADDRESS, setAddressTypeActionType ), AddressTypeModel.UNSET );
+	}
+
+	const setAddressTypeFromReceipt = ( receipt: boolean | null ): void => {
+		if ( !receipt ) {
+			lastAddressType.value = addressType.value;
+			store.dispatch( action( NS_ADDRESS, setAddressTypeActionType ), AddressTypeModel.EMAIL );
+		} else {
+			store.dispatch( action( NS_ADDRESS, setAddressTypeActionType ), lastAddressType.value );
+			lastAddressType.value = AddressTypeModel.UNSET;
+		}
+	};
+
+	watch( receiptModel, setAddressTypeFromReceipt );
+}
diff --git a/src/components/pages/donation_form/subpages/AddressPageDonationReceipt.vue b/src/components/pages/donation_form/subpages/AddressPageDonationReceipt.vue
index dbb829868..dd0e56c1a 100644
--- a/src/components/pages/donation_form/subpages/AddressPageDonationReceipt.vue
+++ b/src/components/pages/donation_form/subpages/AddressPageDonationReceipt.vue
@@ -1,6 +1,7 @@
 <template>
 	<div class="address-page">
 		<h1 v-if="!paymentWasInitialized" class="title is-size-1">{{ $t( 'donation_form_section_headline' ) }}</h1>
+
 		<PaymentSummary
 			v-if="paymentWasInitialized"
 			:amount="paymentSummary.amount"
@@ -9,7 +10,7 @@
 			@previous-page="previousPage">
 		</PaymentSummary>
 
-		<form @submit="evt => evt.preventDefault()">
+		<form @submit="submit" action="/donation/add" method="post">
 			<AutofillHandler @autofill="onAutofill">
 
 				<PaymentBankData
@@ -43,10 +44,10 @@
 
 				<RadioField
 					v-model="receiptModel"
-					name="receipt"
+					name="donationReceipt"
 					:options="[
-						{ value: true, label: $t( 'yes' ) },
 						{ value: false, label: $t( 'no' ) },
+						{ value: true, label: $t( 'yes' ) },
 					]"
 					:label="$t( 'donation_confirmation_cta_title_alt' )"
 					@field-changed="onFieldChange"
@@ -88,7 +89,8 @@
 						<FunButton
 							id="submit-btn"
 							:class="[ 'level-item is-primary is-main', { 'is-loading' : store.getters.isValidating } ]"
-							@click="submit">
+							button-type="submit"
+						>
 							{{ $t( 'donation_form_finalize' ) }}
 						</FunButton>
 					</div>
@@ -101,7 +103,7 @@
 				</div>
 			</div>
 
-			<input v-if="!receiptModel" type="hidden" name="addressType" :value="AddressTypeModel.EMAIL">
+			<input type="hidden" name="addressType" :value="addressTypeName">
 			<input type="hidden" name="paymentType" :value="paymentType">
 			<input type="hidden" name="interval" :value="interval">
 			<input type="hidden" name="amount" :value="amount">
@@ -127,7 +129,7 @@ import { Salutation } from '@src/view_models/Salutation';
 import { StoreKey } from '@src/store/donation_store';
 import { TrackingData } from '@src/view_models/TrackingData';
 import { trackDynamicForm } from '@src/tracking';
-import { useAddressFormEventHandlers } from '@src/components/pages/donation_form/useAddressFormEventHandlers';
+import { useAddressFormEventHandlers } from '@src/components/pages/donation_form/DonationReceipt/useAddressFormEventHandlers';
 import { useAddressSummary } from '@src/components/pages/donation_form/useAddressSummary';
 import { usePaymentFunctions } from '@src/components/pages/donation_form/usePaymentFunctions';
 import NameFields from '@src/components/pages/donation_form/DonationReceipt/NameFields.vue';
@@ -143,8 +145,8 @@ import { useAddressType } from '@src/components/pages/donation_form/DonationRece
 import { useStore } from 'vuex';
 import AutofillHandler from '@src/components/shared/AutofillHandler.vue';
 import { Validity } from '@src/view_models/Validity';
-import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
 import { usePaymentValues } from '@src/components/pages/donation_form/DonationReceipt/usePaymentValues';
+import { useAddressTypeFromReceiptSetter } from '@src/components/pages/donation_form/DonationReceipt/useAddressTypeFromReceiptSetter';
 
 interface Props {
 	assetsPath: string;
@@ -186,12 +188,15 @@ const {
 	paymentWasInitialized,
 } = usePaymentFunctions( store );
 
-const { submit, previousPage } = useAddressFormEventHandlers( store, emit, addressType, isDirectDebit, props.validateAddressUrl, props.validateEmailUrl );
+const { submit, previousPage } = useAddressFormEventHandlers( store, emit, isDirectDebit, props.validateAddressUrl, props.validateEmailUrl );
+
+useAddressTypeFromReceiptSetter( receiptModel, addressType, store );
 
 onBeforeMount( () => {
 	countryWasRestored.value = store.state.address.validity.country === Validity.RESTORED;
 	initializeDataFromStore();
 } );
+
 onMounted( trackDynamicForm );
 
 </script>
diff --git a/src/components/shared/Postal.vue b/src/components/shared/Postal.vue
index 3d90d9392..d572856f3 100644
--- a/src/components/shared/Postal.vue
+++ b/src/components/shared/Postal.vue
@@ -59,16 +59,18 @@
 		/>
 	</div>
 
-	<CountryAutocompleteField
-		v-model="formData.country.value"
-		:countries="countries"
-		:was-restored="countryWasRestored"
-		:show-error="showError.country"
-		:error-message="$t('donation_form_country_error')"
-		:label="$t( 'donation_form_country_label' )"
-		:placeholder="$t( 'form_for_example', { example: countries[0].countryFullName } )"
-		@field-changed="onCountryFieldChanged"
-	/>
+	<div style="margin-top: 36px;">
+		<CountryAutocompleteField
+			v-model="formData.country.value"
+			:countries="countries"
+			:was-restored="countryWasRestored"
+			:show-error="showError.country"
+			:error-message="$t('donation_form_country_error')"
+			:label="$t( 'donation_form_country_label' )"
+			:placeholder="$t( 'form_for_example', { example: countries[0].countryFullName } )"
+			@field-changed="onCountryFieldChanged"
+		/>
+	</div>
 
 </div>
 </template>
diff --git a/src/components/shared/form_fields/CityAutocompleteField.vue b/src/components/shared/form_fields/CityAutocompleteField.vue
index e8d1f08ec..b77be7b5d 100644
--- a/src/components/shared/form_fields/CityAutocompleteField.vue
+++ b/src/components/shared/form_fields/CityAutocompleteField.vue
@@ -14,7 +14,7 @@
 				@blur="onBlur"
 			/>
 			<transition name="fade">
-				<div class="dropdown-menu" v-show="autocompleteIsActive">
+				<div class="dropdown-menu" v-show="autocompleteIsActive && cities.length > 0">
 					<div class="dropdown-content">
 						<template v-for="city in cities">
 							<a class="dropdown-item" role="button" tabindex="0" @click.stop="onSelectItem( city )">
diff --git a/src/components/shared/form_fields/CountryAutocompleteField.vue b/src/components/shared/form_fields/CountryAutocompleteField.vue
index feae57910..654768e39 100644
--- a/src/components/shared/form_fields/CountryAutocompleteField.vue
+++ b/src/components/shared/form_fields/CountryAutocompleteField.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="form-field form-field-autocomplete" :class="{ 'is-invalid': showError }">
 		<label for="country" class="form-field-label">{{ label }}</label>
-		<div class="autocomplete control">
+		<div class="form-field-autocomplete-container">
 			<TextFormInput
 				v-model="countryName"
 				input-type="text"
diff --git a/src/components/shared/form_fields/MailingListField.vue b/src/components/shared/form_fields/MailingListField.vue
index d9bceec64..0cb44a801 100644
--- a/src/components/shared/form_fields/MailingListField.vue
+++ b/src/components/shared/form_fields/MailingListField.vue
@@ -2,7 +2,7 @@
 	<div class="form-field form-field-checkbox">
 		<CheckboxSingleFormInput
 			v-model="fieldModel"
-			name="newsletter"
+			name="info"
 			input-id="newsletter"
 			@update:modelValue="onUpdateModel"
 		>
diff --git a/src/components/shared/form_inputs/CheckboxSingleFormInput.vue b/src/components/shared/form_inputs/CheckboxSingleFormInput.vue
index 68e21cd4b..7cb5aef45 100644
--- a/src/components/shared/form_inputs/CheckboxSingleFormInput.vue
+++ b/src/components/shared/form_inputs/CheckboxSingleFormInput.vue
@@ -9,6 +9,7 @@
 		>
 			<input
 				v-model="inputModel"
+				:value="inputModel"
 				type="checkbox"
 				ref="inputRef"
 				:name="name"
diff --git a/src/scss/components/form_field.scss b/src/scss/components/form_field.scss
index 04bef878e..45bd9d212 100644
--- a/src/scss/components/form_field.scss
+++ b/src/scss/components/form_field.scss
@@ -13,10 +13,13 @@
 	&-select,
 	&-email,
 	&-autocomplete {
-		max-width: map.get( forms.$input, 'max-width' );
+		.control {
+			max-width: map.get( forms.$input, 'max-width' );
+		}
 	}
 
 	&-autocomplete-container {
+		max-width: map.get( forms.$input, 'max-width' );
 		position: relative;
 	}
 
diff --git a/src/store/address/constants.ts b/src/store/address/constants.ts
index 658120d8e..bd87faead 100644
--- a/src/store/address/constants.ts
+++ b/src/store/address/constants.ts
@@ -8,6 +8,7 @@ export interface AddressRequirements {
 export const REQUIRED_FIELDS: AddressRequirements = {
 	[ AddressTypeModel.PERSON ]: [ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'country', 'email', 'addressType' ],
 	[ AddressTypeModel.COMPANY ]: [ 'companyName', 'street', 'postcode', 'city', 'country', 'email', 'addressType' ],
+	[ AddressTypeModel.COMPANY_WITH_CONTACT ]: [ 'salutation', 'firstName', 'lastName', 'companyName', 'street', 'postcode', 'city', 'country', 'email', 'addressType' ],
 	[ AddressTypeModel.EMAIL ]: [ 'email', 'salutation', 'firstName', 'lastName' ],
 	[ AddressTypeModel.ANON ]: [],
 	[ AddressTypeModel.UNSET ]: [ 'addressType' ],
@@ -16,4 +17,5 @@ export const REQUIRED_FIELDS: AddressRequirements = {
 export const REQUIRED_FIELDS_ADDRESS_UPDATE: AddressRequirements = {
 	[ AddressTypeModel.PERSON ]: [ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'country' ],
 	[ AddressTypeModel.COMPANY ]: [ 'companyName', 'street', 'postcode', 'city', 'country' ],
+	[ AddressTypeModel.COMPANY_WITH_CONTACT ]: [ 'salutation', 'firstName', 'lastName', 'companyName', 'street', 'postcode', 'city', 'country' ],
 };
diff --git a/src/view_models/AddressTypeModel.ts b/src/view_models/AddressTypeModel.ts
index d1347462a..d973ff3cf 100644
--- a/src/view_models/AddressTypeModel.ts
+++ b/src/view_models/AddressTypeModel.ts
@@ -1,24 +1,27 @@
 export enum AddressTypeModel {
     PERSON,
     COMPANY,
+    COMPANY_WITH_CONTACT,
 	EMAIL,
     ANON,
 	UNSET,
 }
 
 export const AddressTypeNames = new Map<number, string>( [
-	[ AddressTypeModel.ANON, 'anonym' ],
-	[ AddressTypeModel.EMAIL, 'email' ],
 	[ AddressTypeModel.PERSON, 'person' ],
 	[ AddressTypeModel.COMPANY, 'firma' ],
+	[ AddressTypeModel.COMPANY_WITH_CONTACT, 'company_with_contact' ],
+	[ AddressTypeModel.EMAIL, 'email' ],
+	[ AddressTypeModel.ANON, 'anonym' ],
 	[ AddressTypeModel.UNSET, 'unset' ],
 ] );
 
 export const AddressTypes = new Map<string, number>( [
-	[ 'anonym', AddressTypeModel.ANON ],
-	[ 'email', AddressTypeModel.EMAIL ],
 	[ 'person', AddressTypeModel.PERSON ],
 	[ 'firma', AddressTypeModel.COMPANY ],
+	[ 'company_with_contact', AddressTypeModel.COMPANY_WITH_CONTACT ],
+	[ 'email', AddressTypeModel.EMAIL ],
+	[ 'anonym', AddressTypeModel.ANON ],
 	[ 'unset', AddressTypeModel.UNSET ],
 ] );