diff --git a/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue
index 78ff6fc5a..c9a62e3be 100644
--- a/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_05/components/BannerVar.vue
@@ -39,6 +39,10 @@
+
+
+
+
@@ -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',
diff --git a/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss
index dbc72eb30..2361a26cf 100644
--- a/banners/english/C24_WMDE_Desktop_EN_05/styles/FallbackBanner.scss
+++ b/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;
diff --git a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss b/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss
index fba213019..1e0e5a7f3 100644
--- a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles.scss
+++ b/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
);
diff --git a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss
index 5b30b5ab3..7a126e0a0 100644
--- a/banners/english/C24_WMDE_Desktop_EN_05/styles/styles_var.scss
+++ b/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
);
diff --git a/campaign_info.toml b/campaign_info.toml
index b7d6a1d76..798732e30 100644
--- a/campaign_info.toml
+++ b/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"]
diff --git a/package-lock.json b/package-lock.json
index 6f0bbfaba..3d5f71755 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4499,9 +4499,9 @@
"license": "MIT"
},
"node_modules/cross-spawn": {
- "version": "7.0.3",
- "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
- "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+ "version": "7.0.6",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+ "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -6637,7 +6637,7 @@
},
"node_modules/fundraising-frontend-content": {
"version": "1.0.0",
- "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#a15a417b75aba9b485df180e537047b4b47f065a",
+ "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#23c5bb8aa1130d6d1a8ca95ce939e95e8751a5d2",
"license": "CC0-1.0"
},
"node_modules/get-intrinsic": {
@@ -8920,9 +8920,9 @@
"license": "MIT"
},
"node_modules/npm-run-all/node_modules/cross-spawn": {
- "version": "6.0.5",
- "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
- "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+ "version": "6.0.6",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+ "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
"dev": true,
"license": "MIT",
"dependencies": {
diff --git a/src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue b/src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue
new file mode 100644
index 000000000..a64f6820c
--- /dev/null
+++ b/src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue
@@ -0,0 +1,36 @@
+
+
+
+
+
diff --git a/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue b/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue
index 2649f47bc..ffe5d9741 100644
--- a/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue
+++ b/src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue
@@ -1,551 +1,4 @@
-
+
+
-
-
diff --git a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss
index 68dd716bc..a7604bd17 100644
--- a/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss
+++ b/src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble.scss
@@ -71,3 +71,14 @@ $font-size: 0.9em !default;
}
}
}
+
+html[ lang='en' ] .wmde-banner {
+ .wmde-banner-select-custom-amount-euro-symbol {
+ right: auto;
+ left: 20px;
+ }
+
+ .wmde-banner-select-custom-amount-input {
+ padding: 0 10px 0 30px;
+ }
+}
diff --git a/src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt.scss b/src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt.scss
index 4fc1a296f..279055b90 100644
--- a/src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt.scss
+++ b/src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt.scss
@@ -26,6 +26,7 @@ $padding: 0 !default;
&-form-donation-receipt-checkbox {
input[ type='checkbox' ] {
+ cursor: pointer;
appearance: none;
background: var( --input-checkbox-background );
border: 1px solid var( --input-checkbox-border );
@@ -37,5 +38,9 @@ $padding: 0 !default;
border-color: var( --input-checkbox-border-checked );
}
}
+
+ label {
+ cursor: pointer;
+ }
}
}
diff --git a/test/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.spec.ts b/test/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.spec.ts
new file mode 100644
index 000000000..dc4b3afd4
--- /dev/null
+++ b/test/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.spec.ts
@@ -0,0 +1,79 @@
+import { describe, expect, test } from 'vitest';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { shallowMount } from '@vue/test-utils';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import MainDonationFormPaymentsAndReceiptButton from '@src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue';
+import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes';
+
+const translate = ( key: string ): string => key;
+
+describe( 'MainDonationFormPaymentsAndReceiptButton.vue', () => {
+
+ test.each( [
+ [ Intervals.ONCE.value, 'submit-label-short' ],
+ [ Intervals.MONTHLY.value, 'submit-label' ],
+ [ Intervals.BIANNUAL.value, 'submit-label' ],
+ [ Intervals.YEARLY.value, 'submit-label' ],
+ [ Intervals.QUARTERLY.value, 'submit-label' ]
+ ] )( 'shows the correct label for interval %i', ( interval: string, label: string ) => {
+ const formModel = useFormModel();
+ formModel.interval.value = interval;
+ formModel.addressType.value = interval;
+ formModel.paymentMethod.value = PaymentMethods.PAYPAL.value;
+
+ const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+ global: {
+ provide: {
+ translator: { translate }
+ }
+ }
+ } );
+
+ expect( wrapper.text() ).toStrictEqual( label );
+ } );
+
+ test.each( [
+ [ AddressTypes.ANONYMOUS.value, 'submit-label-paypal' ],
+ [ AddressTypes.EMAIL.value, 'submit-label' ],
+ [ AddressTypes.FULL.value, 'submit-label' ]
+ ] )( 'shows the correct label for address type %s', ( addressType: string, label: string ) => {
+ const formModel = useFormModel();
+ formModel.addressType.value = addressType;
+ formModel.paymentMethod.value = PaymentMethods.PAYPAL.value;
+
+ const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+ global: {
+ provide: {
+ translator: { translate }
+ }
+ }
+ } );
+
+ expect( wrapper.text() ).toStrictEqual( label );
+ } );
+
+ test.each( [
+ [ PaymentMethods.PAYPAL.value, 'submit-label-paypal' ],
+ [ PaymentMethods.BANK_TRANSFER.value, 'submit-label-bank-transfer' ],
+ [ PaymentMethods.CREDIT_CARD.value, 'submit-label-credit-card' ],
+ [ PaymentMethods.SOFORT.value, 'submit-label-sofort' ],
+ [ PaymentMethods.DIRECT_DEBIT.value, 'submit-label' ]
+ ] )( 'shows the correct label when anonymous for payment method %s', ( paymentMethod: string, label: string ) => {
+ const formModel = useFormModel();
+ formModel.interval.value = Intervals.MONTHLY.value;
+ formModel.addressType.value = AddressTypes.ANONYMOUS.value;
+ formModel.paymentMethod.value = paymentMethod;
+
+ const wrapper = shallowMount( MainDonationFormPaymentsAndReceiptButton, {
+ global: {
+ provide: {
+ translator: { translate }
+ }
+ }
+ } );
+
+ expect( wrapper.text() ).toStrictEqual( label );
+ } );
+
+} );