Fix bugs in C24_WMDE_Desktop_EN_05

- UoF infographic was missing an arrow
- Add payment types to VAR submit button
- Fix font size on upgrade form
- Fix currency symbol placement in custom amount
- Fix fallback close button size

Ticket: https://phabricator.wikimedia.org/T380360

banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue

@@ -39,6 +39,10 @@
 									<MastercardLogo/>
 								</span>
 							</template>
+
+							<template #button>
+								<MainDonationFormPaymentsAndReceiptButton/>
+							</template>
 						</MainDonationFormAddressType>
 					</template>
 
@@ -108,6 +112,7 @@ import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue';
 import { useBannerHider } from '@src/components/composables/useBannerHider';
 import MainDonationFormAddressType from '@src/components/DonationForm/Forms/MainDonationFormDonationReceipt.vue';
+import MainDonationFormPaymentsAndReceiptButton from '@src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',

banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss

@@ -88,6 +88,8 @@ $breakpoint: 800px;
 			width: 16px;
 			top: 8px;
 			right: 8px;
+			margin: 0;
+			padding: 0;
 
 			@media ( min-width: $breakpoint ) {
 				height: 30px;

banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss

@@ -43,8 +43,9 @@
 @use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
 	$padding: 14px 0 0
 );
-@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm';
-@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
 @use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
 	$right-column-width: 300px
 );

banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss

@@ -43,8 +43,9 @@
 @use 'src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt' with (
 	$padding: 14px 0 0
 );
-@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm';
-@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
 @use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
 	$right-column-width: 300px
 );

campaign_info.toml

@@ -141,7 +141,7 @@ name = "English Desktop"
 icon = "desktop"
 campaign = "C24_WMDE_Desktop_EN_05"
 description = "Based on CTRL desktop EN 04"
-campaign_tracking = "en05-ba-241125"
+campaign_tracking = "en05-ba-241126"
 preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
 preview_link_darkmode = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1"
 preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode'
@@ -151,12 +151,12 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_EN"
 [english.banners.ctrl]
 filename = "./banners/english/C24_WMDE_Desktop_EN_05/banner_ctrl.ts"
 pagename = "B24_WMDE_Desktop_EN_05_ctrl"
-tracking = "org-en05-241125-ctrl"
+tracking = "org-en05-241126-ctrl"
 
 [english.banners.var]
 filename = "./banners/english/C24_WMDE_Desktop_EN_05/banner_var.ts"
 pagename = "B24_WMDE_Desktop_EN_05_var"
-tracking = "org-en05-241125-var"
+tracking = "org-en05-241126-var"
 
 [english.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]

src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue

@@ -0,0 +1,36 @@
+<template>
+	<button class="wmde-banner-form-button t-submit-main-donation" type="submit">
+		{{ submitButtonLabel }}
+	</button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { Translator } from '@src/Translator';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes';
+
+const formModel = useFormModel();
+const translator = inject<Translator>( 'translator' );
+const { paymentMethod, interval, addressType } = formModel;
+
+const submitButtonLabel = computed( (): string => {
+	if ( interval.value === Intervals.ONCE.value ) {
+		return translator.translate( 'submit-label-short' );
+	}
+	if ( addressType.value === AddressTypes.ANONYMOUS.value ) {
+		if ( paymentMethod.value === PaymentMethods.PAYPAL.value ) {
+			return translator.translate( 'submit-label-paypal' );
+		} else if ( paymentMethod.value === PaymentMethods.CREDIT_CARD.value ) {
+			return translator.translate( 'submit-label-credit-card' );
+		} else if ( paymentMethod.value === PaymentMethods.SOFORT.value ) {
+			return translator.translate( 'submit-label-sofort' );
+		} else if ( paymentMethod.value === PaymentMethods.BANK_TRANSFER.value ) {
+			return translator.translate( 'submit-label-bank-transfer' );
+		}
+	}
+	return translator.translate( 'submit-label' );
+} );
+</script>