Disable "no" option for direct debit

- we demand a full address from users when they select direct debit as a payment option.
when asking about if they want to have a receipt, they need to say yes (give address),
so we have to disable the "no" option.
- respectively the DirectDebit option should be disabled when "no" got selected first

- lift the tooltip message above other neighboring elements that updated dynamically

this fixes https://phabricator.wikimedia.org/T379565

src/components/pages/donation_form/FormSections/PersonalDataSectionDonationReceipt.vue

@@ -37,21 +37,24 @@
 				<RadioField
 					v-model="receiptModel.receiptNeeded"
 					name="donationReceipt"
-					:options="[
-						{ value: true, label: $t( 'yes' ), id: 'donationReceipt-0' },
-						{ value: false, label: $t( 'no' ), id: 'donationReceipt-1' },
-					]"
+					:options="receiptNeededOptions"
 					:label="$t( 'donation_confirmation_cta_title_alt' )"
 					:show-error="receiptModel.showReceiptOptionError"
 					:error-message="$t( 'C24_WMDE_Desktop_DE_01_receipt_error' )"
 					alignment="row"
 					aria-describedby="donation-receipt-help-text"
+					:disabled="disabledReceiptNeededOptions"
 				>
 					<template #intro-message>
 						<div class="form-field-intro" id="donation-receipt-help-text">
 							{{ $t( 'C24_WMDE_Desktop_DE_01_help_text' ) }}
 						</div>
 					</template>
+					<template #tooltip-false>
+						<RadioFieldHelpText v-if="isDirectDebitPayment">
+							{{ $t( 'donation_form_address_choice_direct_debit_disclaimer' ) }}
+						</RadioFieldHelpText>
+					</template>
 				</RadioField>
 
 				<AddressFields
@@ -69,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, toRef } from 'vue';
+import { computed, onBeforeMount, toRef } from 'vue';
 import AddressFields from '@src/components/pages/donation_form/DonationReceipt/AddressFields.vue';
 import AutofillHandler from '@src/components/shared/AutofillHandler.vue';
 import EmailField from '@src/components/shared/form_fields/EmailField.vue';
@@ -89,6 +92,8 @@ import { ReceiptModel } from '@src/components/pages/donation_form/DonationReceip
 import { useStore } from 'vuex';
 import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
 import { AddressTypeModel } from '@src/view_models/AddressTypeModel';
+import { useI18n } from 'vue-i18n';
+import RadioFieldHelpText from '@src/components/shared/form_elements/RadioFieldTooltip.vue';
 
 interface Props {
 	countries: Country[];
@@ -105,10 +110,16 @@ interface Props {
 
 const props = defineProps<Props>();
 const store = useStore();
+const { t } = useI18n();
 
 const mailingList = useMailingListModel( store );
 const receiptModel = toRef<ReceiptModel>( props.receiptModel );
 
+const receiptNeededOptions = [
+	{ value: true, label: t( 'yes' ), id: 'donationReceipt-0' },
+	{ value: false, label: t( 'no' ), id: 'donationReceipt-1' },
+];
+
 const {
 	formData,
 	fieldErrors,
@@ -121,4 +132,14 @@ useAddressTypeFromReceiptSetter( props.receiptModel.receiptNeeded, toRef( props.
 
 onBeforeMount( initializeDataFromStore );
 
+const disabledReceiptNeededOptions = computed<string[]>( () => {
+	let disabledOptions: string[] = [];
+	if ( props.isDirectDebitPayment ) {
+		disabledOptions = receiptNeededOptions
+			.filter( ( receiptNeededOption: Object ) => receiptNeededOption.value === false )
+			.map( ( receiptNeededOption: Object ) => receiptNeededOption.value );
+	}
+	return disabledOptions;
+} );
+
 </script>

src/components/pages/donation_form/Payment.vue

@@ -106,6 +106,9 @@ const disabledPaymentTypes = computed<string[]>( () => {
 	if ( store.state.address.addressType === AddressTypeModel.ANON ) {
 		disabledTypes.push( 'BEZ' );
 	}
+	if ( store.state.address.addressType === AddressTypeModel.EMAIL ) {
+		disabledTypes.push( 'BEZ' );
+	}
 	if ( store.state.payment.values.interval !== '0' ) {
 		disabledTypes.push( 'SUB' );
 	}

src/components/shared/form_elements/RadioFieldTooltip.vue

@@ -34,6 +34,7 @@ defineProps<Props>();
 	background: colors.$white;
 
 	&-text {
+		z-index: 10;
 		position: absolute;
 		display: block;
 		visibility: hidden;

tests/unit/components/pages/donation_form/FormSections/PersonalDataSectionDonationReceipt.spec.ts

@@ -107,4 +107,22 @@ describe( 'PersonalDataSectionDonationReceipt.vue', () => {
 
 		expect( wrapper.find( '.address-section' ).exists() ).toBeTruthy();
 	} );
+
+	it( 'disables NO option on question for full address and shows info icon', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.setProps( { isDirectDebitPayment: true } );
+		await nextTick();
+
+		expect( wrapper.find( '.radio-field-tooltip' ).isVisible() ).toBe( true );
+	} );
+
+	it( 'NO option is not disabled when direct debit is not selected', async () => {
+		const wrapper = getWrapper();
+
+		await wrapper.setProps( { isDirectDebitPayment: false } );
+		await nextTick();
+
+		expect( wrapper.find( '.radio-field-tooltip' ).exists() ).toBe( false );
+	} );
 } );