From 7b3ba6163f5af0ad675f5bd61e171ba70b646c90 Mon Sep 17 00:00:00 2001
From: Gabriel Birke <gabriel.birke@wikimedia.de>
Date: Fri, 6 Dec 2024 15:33:41 +0100
Subject: [PATCH 1/4] Prepare campaign for C24_WMDE_Desktop_EN_06

Ticket: https://phabricator.wikimedia.org/T381396
---
 .../C24_WMDE_Desktop_EN_06/banner_ctrl.ts     |  71 ++++++++
 .../C24_WMDE_Desktop_EN_06/banner_var.ts      |  71 ++++++++
 .../components/BannerCtrl.vue                 | 160 +++++++++++++++++
 .../components/BannerVar.vue                  | 161 ++++++++++++++++++
 .../components/FallbackBanner.vue             | 106 ++++++++++++
 .../components/MainBanner.vue                 |  50 ++++++
 .../content/BannerSlides.vue                  |  51 ++++++
 .../content/BannerText.vue                    |  44 +++++
 .../content/FallbackSlides.vue                |  27 +++
 .../content/FallbackText.vue                  |  32 ++++
 .../C24_WMDE_Desktop_EN_06/event_map.ts       |  38 +++++
 .../C24_WMDE_Desktop_EN_06/form_items.ts      |  21 +++
 .../C24_WMDE_Desktop_EN_06/messages.ts        |  27 +++
 .../C24_WMDE_Desktop_EN_06/messages_var.ts    |  28 +++
 .../C24_WMDE_Desktop_EN_06/styles/Banner.scss |  17 ++
 .../styles/FallbackBanner.scss                | 136 +++++++++++++++
 .../styles/MainBanner.scss                    |  44 +++++
 .../C24_WMDE_Desktop_EN_06/styles/styles.scss |  61 +++++++
 .../styles/styles_var.scss                    |  61 +++++++
 campaign_info.toml                            |  18 +-
 .../components/BannerCtrl.spec.ts             | 141 +++++++++++++++
 .../components/BannerVar.spec.ts              | 142 +++++++++++++++
 .../components/FallbackBanner.spec.ts         |  64 +++++++
 23 files changed, 1562 insertions(+), 9 deletions(-)
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/banner_ctrl.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/components/MainBanner.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/content/BannerSlides.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/content/BannerText.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/content/FallbackSlides.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/content/FallbackText.vue
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/event_map.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/form_items.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/messages.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/Banner.scss
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/MainBanner.scss
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/styles.scss
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
 create mode 100644 test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.spec.ts
 create mode 100644 test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
 create mode 100644 test/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.spec.ts

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/banner_ctrl.ts b/banners/english/C24_WMDE_Desktop_EN_06/banner_ctrl.ts
new file mode 100644
index 000000000..5ac47a488
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/banner_ctrl.ts
@@ -0,0 +1,71 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import { Locales } from '@src/domain/Locales';
+import messages from './messages';
+import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import eventMappings from './event_map';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryEn();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'english' ) ),
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount, { locale: Locales.EN } )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN } ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
new file mode 100644
index 000000000..9883c3e6d
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
@@ -0,0 +1,71 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import { Locales } from '@src/domain/Locales';
+import messages from './messages_var';
+import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import eventMappings from './event_map';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryEn();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'english' ) ),
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount, { locale: Locales.EN } )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN } ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
new file mode 100644
index 000000000..d5f616146
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
@@ -0,0 +1,160 @@
+<template>
+    <div class="wmde-banner-wrapper" :class="contentState">
+        <MainBanner
+			@close="onCloseMain"
+			@form-interaction="$emit( 'bannerContentChanged' )"
+            :banner-state="bannerState"
+            v-if="contentState === ContentStates.Main"
+        >
+            <template #banner-text>
+                <BannerText/>
+            </template>
+
+            <template #banner-slides="{ play }: any">
+                <KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000">
+
+                    <template #slides="{ currentSlide }: any">
+                        <BannerSlides :currentSlide="currentSlide"/>
+                    </template>
+
+                </KeenSlider>
+            </template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+							<template #label-payment-ppl>
+								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
+							</template>
+
+							<template #label-payment-mcp>
+								<span class="wmde-banner-select-group-label with-logos credit-cards">
+									<VisaLogo/>
+									<MastercardLogo/>
+								</span>
+							</template>
+						</MainDonationForm>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:page-index="pageIndex"
+							:is-current="isCurrent"
+							:show-manual-upgrade-option="false"
+							@submit="submit"
+							@previous="previous"
+						/>
+					</template>
+
+                </MultiStepDonation>
+            </template>
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="isFundsModalVisible = true"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+        </MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+        <FundsModal
+            :content="useOfFundsContent"
+            :is-funds-modal-visible="isFundsModalVisible"
+            @hideFundsModal="isFundsModalVisible = false"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingEN/>
+			</template>
+		</FundsModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ref, watch } from 'vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue';
+import { useBannerHider } from '@src/components/composables/useBannerHider';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+useBannerHider( 800, emit );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMain(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
new file mode 100644
index 000000000..c9a62e3be
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="wmde-banner-wrapper" :class="contentState">
+        <MainBanner
+			@close="onCloseMain"
+			@form-interaction="$emit( 'bannerContentChanged' )"
+            :banner-state="bannerState"
+            v-if="contentState === ContentStates.Main"
+        >
+            <template #banner-text>
+                <BannerText/>
+            </template>
+
+            <template #banner-slides="{ play }: any">
+                <KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000">
+
+                    <template #slides="{ currentSlide }: any">
+                        <BannerSlides :currentSlide="currentSlide"/>
+                    </template>
+
+                </KeenSlider>
+            </template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationFormAddressType :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+							<template #label-payment-ppl>
+								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
+							</template>
+
+							<template #label-payment-mcp>
+								<span class="wmde-banner-select-group-label with-logos credit-cards">
+									<VisaLogo/>
+									<MastercardLogo/>
+								</span>
+							</template>
+
+							<template #button>
+								<MainDonationFormPaymentsAndReceiptButton/>
+							</template>
+						</MainDonationFormAddressType>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:page-index="pageIndex"
+							:is-current="isCurrent"
+							:show-manual-upgrade-option="false"
+							@submit="submit"
+							@previous="previous"
+						/>
+					</template>
+
+                </MultiStepDonation>
+            </template>
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="isFundsModalVisible = true"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+        </MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+        <FundsModal
+            :content="useOfFundsContent"
+            :is-funds-modal-visible="isFundsModalVisible"
+            @hideFundsModal="isFundsModalVisible = false"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingEN/>
+			</template>
+		</FundsModal>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ref, watch } from 'vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { createSubmittableMainDonationForm } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import { createSubmittableUpgradeToYearly } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
+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',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+useBannerHider( 800, emit );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMain(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.vue
new file mode 100644
index 000000000..75e469475
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.vue
@@ -0,0 +1,106 @@
+<template>
+	<div class="wmde-banner-fallback">
+		<ButtonClose @close="onClose"/>
+
+		<div class="wmde-banner-fallback-small" v-if="!onLargeScreen">
+			<KeenSlider
+				:with-pagination="false"
+				:play="slideshowShouldPlay"
+				:interval="10000"
+				:delay="2000"
+				@slideChanged="onSlideChange"
+			>
+				<template #slides="{ currentSlide }: any">
+					<FallbackSlides :current-slide="currentSlide"/>
+				</template>
+
+				<template #left-icon>
+					<ChevronLeftIcon :fill="'#990a00'"/>
+				</template>
+
+				<template #right-icon>
+					<ChevronRightIcon :fill="'#990a00'"/>
+				</template>
+			</KeenSlider>
+
+			<FallbackButton @buttonClicked="onSubmit"/>
+
+			<SmallFooter :slide-index="slideIndex" :slide-count="slideCount" @useOfFundsButtonClicked="isFundsModalVisible = true"/>
+		</div>
+
+		<div class="wmde-banner-fallback-large" v-if="onLargeScreen">
+			<div class="wmde-banner-fallback-message">
+				<FallbackText/>
+			</div>
+
+			<LargeFooter @useOfFundsButtonClicked="isFundsModalVisible = true" @submitButtonClicked="onSubmit"/>
+		</div>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingEN/>
+			</template>
+		</FundsModal>
+
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { computed, inject, ref } from 'vue';
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import FallbackSlides from '../content/FallbackSlides.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import FallbackText from '../content/FallbackText.vue';
+import FallbackButton from '@src/components/FallbackBanner/FallbackButton.vue';
+import SmallFooter from '@src/components/FallbackBanner/SmallFooter.vue';
+import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
+import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue';
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	donationLink: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+const slideIndex = ref<number>( 0 );
+const slideCount = ref<number>( 0 );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const isFundsModalVisible = ref<boolean>( false );
+
+const onLargeScreen = useDisplaySwitch( 799 );
+
+function onClose(): void {
+	emit( 'bannerClosed', new CloseEvent( 'FallbackBanner', CloseChoices.Close ) );
+}
+
+function onSlideChange( newIndex: number, newSlideCount: number ): void {
+	slideIndex.value = newIndex;
+	slideCount.value = newSlideCount;
+}
+
+function onSubmit(): void {
+	tracker.trackEvent( new FallbackBannerSubmitEvent() );
+	window.location.href = props.donationLink;
+}
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/MainBanner.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/MainBanner.vue
new file mode 100644
index 000000000..9f9ebe572
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/MainBanner.vue
@@ -0,0 +1,50 @@
+<template>
+	<div class="wmde-banner-main">
+		<slot name="close-button">
+			<ButtonClose @close="$emit( 'close' )"/>
+		</slot>
+		<div class="wmde-banner-content">
+			<div class="wmde-banner-column-left">
+				<slot name="banner-text" v-if="onLargeScreen"/>
+				<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
+				<slot name="progress"/>
+			</div>
+			<div class="wmde-banner-column-right">
+				<slot name="donation-form" :form-interaction="onFormInteraction"/>
+			</div>
+		</div>
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import { computed, nextTick, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+
+interface Props {
+	bannerState: BannerStates;
+	minWidthForLargeScreen?: number;
+}
+
+const props = withDefaults( defineProps<Props>(), {
+	minWidthForLargeScreen: 1300
+} );
+const emit = defineEmits( [ 'close', 'formInteraction' ] );
+
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+
+const onLargeScreen = useDisplaySwitch( props.minWidthForLargeScreen );
+
+const onFormInteraction = (): void => {
+	slideShowStopped.value = true;
+
+	nextTick( () => {
+		emit( 'formInteraction' );
+	} );
+};
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/content/BannerSlides.vue b/banners/english/C24_WMDE_Desktop_EN_06/content/BannerSlides.vue
new file mode 100644
index 000000000..ac14de304
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/content/BannerSlides.vue
@@ -0,0 +1,51 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<strong>
+				<InfoIcon fill="#990a00"/>
+				{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: &#8220;Wikipedia still can't be
+				sold.&#8221; - An important update for readers in Germany.
+			</strong>
+		</p>
+		<p>
+			Today is the day. We're sorry to interrupt, but it's {{ currentDayName }}, {{ currentDate }}, and this
+			message will be up for only a few hours.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			We ask you to reflect on the number of times you visited Wikipedia in the past year and if you're able to give €5 back.
+			<AnimatedText content="If everyone reading this gave just €5, we'd hit our goal in a few hours."/>
+			In the age of AI, access to verifiable facts is crucial. Wikipedia is at the heart of online information,
+			powering everything from your personal searches to emerging AI technologies.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Your gift strengthens the knowledge of today and tomorrow. Just 1% of our readers donate, so if
+			you have given in the past and Wikipedia still provides you with €5 worth of knowledge, kindly donate
+			today. If you are undecided, remember that any contribution helps, whether it's €5 or €25. Thank&nbsp;you.
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted } from 'vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const { currentDayName, currentDate, getCurrentDateAndTime }: DynamicContent = inject( 'dynamicCampaignText' );
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/content/BannerText.vue b/banners/english/C24_WMDE_Desktop_EN_06/content/BannerText.vue
new file mode 100644
index 000000000..7129d9b38
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/content/BannerText.vue
@@ -0,0 +1,44 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<strong>
+					<InfoIcon fill="#990a00"/>
+					{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: &#8220;Wikipedia still
+					can't be sold.&#8221; - An important update for readers in Germany.
+				</strong>
+			</p>
+			<p>
+				Today is the day. We're sorry to interrupt, but it's {{ currentDayName }}, {{ currentDate }}, and this
+				message will be up for only a few hours.
+				We ask you to reflect on the number of times you visited
+				Wikipedia in the past year and if you're able to give €5 back.
+				<AnimatedText content="If everyone reading this gave just €5, we'd hit our goal in a few hours."/>
+			</p>
+			<p>
+				In the age of AI, access to verifiable facts is crucial. Wikipedia is at the heart of online
+				information, powering everything from your personal searches to emerging AI technologies. Your gift
+				strengthens the knowledge of today and tomorrow.
+			</p>
+			<p>
+				Just 1% of our readers donate, so if you have
+				given in the past and Wikipedia still provides you with €5 worth of knowledge, kindly donate today. If
+				you are undecided, remember that any contribution helps, whether it's €5 or €25. Thank you.
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+
+const { currentDayName, currentDate, getCurrentDateAndTime }: DynamicContent = inject( 'dynamicCampaignText' );
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/content/FallbackSlides.vue b/banners/english/C24_WMDE_Desktop_EN_06/content/FallbackSlides.vue
new file mode 100644
index 000000000..a50a81082
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/content/FallbackSlides.vue
@@ -0,0 +1,27 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p>
+			If Wikipedia has given you €5 worth of knowledge this year, please give back.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			If you can, please join the 1% of readers who give. <em>Thank you.</em>
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<FallbackBank/>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import FallbackBank from '@src/components/FallbackBanner/FallbackBank.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/content/FallbackText.vue b/banners/english/C24_WMDE_Desktop_EN_06/content/FallbackText.vue
new file mode 100644
index 000000000..60a58e80d
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/content/FallbackText.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/> <strong>Please don't ignore this 1-minute read</strong>
+			</p>
+			<p>
+				This {{ currentDayName }}, {{ liveDateAndTime.currentDate }} at {{ liveDateAndTime.currentTime }}, please
+				reflect on the number of times you visited
+				Wikipedia in the past year, the value you got from it, and whether you're able to give €5 back. If you
+				can, please join the 1% of readers who give. <em>Thank you.</em>
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+
+const {
+	currentDayName,
+	getCurrentDateAndTime
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/event_map.ts b/banners/english/C24_WMDE_Desktop_EN_06/event_map.ts
new file mode 100644
index 000000000..612f999a8
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/event_map.ts
@@ -0,0 +1,38 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
+import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
+import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
+import { ShownEvent } from '@src/tracking/events/ShownEvent';
+import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ ShownEvent.EVENT_NAME, mapShownEvent ],
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ CustomAmountChangedEvent.EVENT_NAME,
+		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
+	],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			case 'CustomAmountForm':
+				return new WMDESizeIssueEvent( `submit-different-amount`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ FallbackBannerSubmitEvent.EVENT_NAME, ( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent => new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 ) ]
+] );
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/form_items.ts b/banners/english/C24_WMDE_Desktop_EN_06/form_items.ts
new file mode 100644
index 000000000..95a254ccb
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/form_items.ts
@@ -0,0 +1,21 @@
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
+
+export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
+	return new FormItemsBuilder( translations, amountFormatter )
+		.setIntervals(
+			Intervals.ONCE,
+			Intervals.MONTHLY,
+			Intervals.QUARTERLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.CREDIT_CARD
+		).getItems();
+}
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/messages.ts b/banners/english/C24_WMDE_Desktop_EN_06/messages.ts
new file mode 100644
index 000000000..24d57a42d
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/messages.ts
@@ -0,0 +1,27 @@
+import CustomAmountFormEn from '@src/components/DonationForm/Forms/messages/CustomAmountForm.en';
+import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
+import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
+import AddressFormEn from '@src/components/DonationForm/Forms/messages/AddressForm.en';
+import FooterEn from '@src/components/Footer/messages/Footer.en';
+import MainDonationFormEn from '@src/components/DonationForm/Forms/messages/MainDonationForm.en';
+import AlreadyDonatedModalEn from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.en';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.en';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormEn,
+	...DynamicCampaignTextEn,
+	...UpgradeToYearlyEn,
+	...SoftCloseEn,
+	...AddressFormEn,
+	...FooterEn,
+	...MainDonationFormEn,
+	...AlreadyDonatedModalEn,
+	...FallbackBanner,
+	'upgrade-to-yearly-copy': '<p>Every year we are dependent on the support of people like you. Yearly donations ' +
+		'help sustainably and enable long term development.</p>' +
+		'<p>No risks attached, you can tell us to stop at any time.</p>'
+};
+
+export default messages;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
new file mode 100644
index 000000000..4b3e5c0e9
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
@@ -0,0 +1,28 @@
+import CustomAmountFormEn from '@src/components/DonationForm/Forms/messages/CustomAmountForm.en';
+import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
+import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
+import AddressFormEn from '@src/components/DonationForm/Forms/messages/AddressForm.en';
+import FooterEn from '@src/components/Footer/messages/Footer.en';
+import MainDonationFormEn from '@src/components/DonationForm/Forms/messages/MainDonationForm.en';
+import AlreadyDonatedModalEn from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.en';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.en';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormEn,
+	...DynamicCampaignTextEn,
+	...UpgradeToYearlyEn,
+	...SoftCloseEn,
+	...AddressFormEn,
+	...FooterEn,
+	...MainDonationFormEn,
+	...AlreadyDonatedModalEn,
+	...FallbackBanner,
+	'upgrade-to-yearly-copy': '<p>Every year we are dependent on the support of people like you. Yearly donations ' +
+		'help sustainably and enable long term development.</p>' +
+		'<p>No risks attached, you can tell us to stop at any time.</p>',
+	'donation-receipt-checkbox-label': 'Please send me a tax deductible donation receipt to my postal address.'
+};
+
+export default messages;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/Banner.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/Banner.scss
new file mode 100644
index 000000000..f88657686
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/Banner.scss
@@ -0,0 +1,17 @@
+@use 'src/themes/Treedip/variables/fonts';
+
+.wmde-banner {
+	&-wrapper {
+		font-size: 14px;
+		font-family: fonts.$ui;
+		box-shadow: var( --main-box-shadow );
+		background-color: var( --main-background );
+		color: var( --main-color );
+	}
+
+	&--closed {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
new file mode 100644
index 000000000..2361a26cf
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
@@ -0,0 +1,136 @@
+@use 'src/themes/Treedip/variables/globals';
+@use 'src/themes/Treedip/variables/fonts';
+
+$breakpoint: 800px;
+
+.wmde-banner {
+	&-fallback {
+		width: 100%;
+		height: 150px;
+		display: flex;
+		flex-direction: column;
+		background: var( --fallback-background );
+		box-shadow: var( --main-box-shadow );
+
+		@media ( min-width: $breakpoint ) {
+			height: auto;
+			min-height: 250px;
+			padding: 4px;
+		}
+
+		&-small,
+		&-large {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&-small {
+			align-items: center;
+			border: 4px solid var( --fallback-border );
+			border-radius: 4px;
+			padding: 8px;
+
+			.wmde-banner-progress-bar {
+				height: 25px;
+				line-height: 25px;
+			}
+
+			.wmde-banner-progress-bar-text,
+			.wmde-banner-progress-bar-fill-wrapper {
+				height: 25px;
+			}
+
+			.wmde-banner-progress-bar-fill {
+				line-height: 20px;
+			}
+
+			.wmde-banner-fallback-button {
+				margin: 0 0 8px;
+			}
+
+			.wmde-banner-selection-input-text,
+			.wmde-banner-selection-input-input {
+				font-family: fonts.$content;
+				font-size: 14px;
+				font-weight: normal;
+			}
+		}
+
+		&-large {
+			align-items: stretch;
+		}
+
+		&-usage-link {
+			color: var( --fallback-uof-link );
+		}
+
+		&-message {
+			flex: 1 1 auto;
+			display: flex;
+			flex-direction: column;
+			background: var( --fallback-message-background );
+			border: 4px solid var( --fallback-message-border );
+			border-radius: 4px;
+			padding: 8px 0;
+		}
+
+		&-bank-item {
+			display: block;
+
+			&-label {
+				font-weight: bold;
+			}
+		}
+
+		.wmde-banner-close {
+			height: 16px;
+			width: 16px;
+			top: 8px;
+			right: 8px;
+			margin: 0;
+			padding: 0;
+
+			@media ( min-width: $breakpoint ) {
+				height: 30px;
+				width: 30px;
+				top: 12px;
+				right: 12px;
+			}
+		}
+
+		.wmde-banner-slider-container {
+			padding: 0 0 8px;
+		}
+
+		.wmde-banner-slide-content {
+			font-size: 14px;
+			p {
+				margin-bottom: 8px;
+			}
+		}
+
+		.wmde-banner-slider-navigation-previous,
+		.wmde-banner-slider-navigation-next {
+			align-items: end;
+		}
+
+		.wmde-banner-slider-pagination-dot {
+			cursor: default;
+		}
+
+		.wmde-banner-message {
+			flex: 1 1 auto;
+
+			p {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	&--pending {
+		.wmde-banner-fallback {
+			box-shadow: none;
+		}
+	}
+}
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBanner.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBanner.scss
new file mode 100644
index 000000000..518b8c959
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBanner.scss
@@ -0,0 +1,44 @@
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		padding: 0 15px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		margin-bottom: 0;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		background: var( --message-background );
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 10px 0;
+	}
+}
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles.scss
new file mode 100644
index 000000000..1e0e5a7f3
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles.scss
@@ -0,0 +1,61 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/themes/Treedip/swatches/skin_vector-2022' with (
+	$slider: true,
+	$select-group-bubble: true,
+	$select-group-image-label: true,
+	$upgrade-to-yearly: true,
+	$fallback-banner: true,
+	$progress-bar: true,
+	$soft-close: true,
+);
+@use 'src/themes/Treedip/variables/breakpoints';
+@use 'src/components/BannerConductor/banner-transition';
+@use 'Banner';
+@use 'MainBanner' with (
+	$banner-height: 355px,
+	$form-width: 300px
+);
+@use 'src/themes/UseOfFunds/swatches/skin_vector-2022' as uof-vector-2022;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose' with (
+	$padding: 4px,
+	$top: 12px,
+	$right: 8px,
+	$margin: -4.5px
+);
+@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubble';
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles' with (
+	$height: 34px,
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble' with (
+	$height: 34px,
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
+	$padding: 14px 0 0
+);
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
+	$right-column-width: 300px
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message' with (
+	$font-sizes: ( 1400px: 15px, 1600px: 16px, 1800px: 18px )
+);
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'FallbackBanner';
+@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
+@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
+@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
new file mode 100644
index 000000000..7a126e0a0
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
@@ -0,0 +1,61 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/themes/Treedip/swatches/skin_vector-2022' with (
+	$slider: true,
+	$select-group-bubble: true,
+	$select-group-image-label: true,
+	$upgrade-to-yearly: true,
+	$fallback-banner: true,
+	$progress-bar: true,
+	$soft-close: true,
+);
+@use 'src/themes/Treedip/variables/breakpoints';
+@use 'src/components/BannerConductor/banner-transition';
+@use 'Banner';
+@use 'MainBanner' with (
+	$banner-height: 355px,
+	$form-width: 300px
+);
+@use 'src/themes/UseOfFunds/swatches/skin_vector-2022' as uof-vector-2022;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose' with (
+	$padding: 4px,
+	$top: 12px,
+	$right: 8px,
+	$margin: -4.5px
+);
+@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubble';
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles' with (
+	$height: 34px,
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble' with (
+	$height: 34px,
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt' with (
+	$padding: 14px 0 0
+);
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated' with (
+	$right-column-width: 300px
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message' with (
+	$font-sizes: ( 1400px: 15px, 1600px: 16px, 1800px: 18px )
+);
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/SoftClose/SoftClose';
+@use 'FallbackBanner';
+@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
+@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
+@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';
diff --git a/campaign_info.toml b/campaign_info.toml
index fe8063f62..26930e350 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -139,9 +139,9 @@ tracking = "wpde-mob01-241028-var"
 [english]
 name = "English Desktop"
 icon = "desktop"
-campaign = "C24_WMDE_Desktop_EN_05"
-description = "Based on CTRL desktop EN 04"
-campaign_tracking = "en05-ba-241126"
+campaign = "C24_WMDE_Desktop_EN_06"
+description = "Based on CTRL desktop EN 05"
+campaign_tracking = "en06-ba-241209"
 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'
@@ -149,14 +149,14 @@ wrapper_template = "wikipedia_org"
 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-241126-ctrl"
+filename = "./banners/english/C24_WMDE_Desktop_EN_06/banner_ctrl.ts"
+pagename = "B24_WMDE_Desktop_EN_06_ctrl"
+tracking = "org-en06-241209-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-241126-var"
+filename = "./banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts"
+pagename = "B24_WMDE_Desktop_EN_06_var"
+tracking = "org-en06-241209-var"
 
 [english.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
diff --git a/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.spec.ts b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.spec.ts
new file mode 100644
index 000000000..37fea86fa
--- /dev/null
+++ b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.spec.ts
@@ -0,0 +1,141 @@
+import { beforeEach, describe, test } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures, bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
+import { TrackerStub } from '@test/fixtures/TrackerStub';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+
+describe( 'BannerCtrl.vue', () => {
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		return mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				remainingImpressions: 10
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker: new TrackerStub(),
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectClosesBannerWhenWindowBecomesSmall' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerAutoHideFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectShowsSlideShowOnSmallSizes' ],
+			[ 'expectShowsMessageOnLargeSizes' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInMessage' ],
+			[ 'expectShowsLiveDateAndTimeInSlideshow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Already Donated', () => {
+		test.each( [
+			[ 'expectFiresMaybeLaterEventOnLinkClick' ]
+		] )( '%s', async ( testName: string ) => {
+			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
new file mode 100644
index 000000000..a3a49d6fa
--- /dev/null
+++ b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
@@ -0,0 +1,142 @@
+import { beforeEach, describe, test } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures, bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
+import { TrackerStub } from '@test/fixtures/TrackerStub';
+import { donationFormFeatures } from '@test/features/forms/MainDonationDonationReceipt_UpgradeToYearlyButton';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+
+describe( 'BannerVar.vue', () => {
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		return mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				remainingImpressions: 10
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker: new TrackerStub(),
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectClosesBannerWhenWindowBecomesSmall' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerAutoHideFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectShowsSlideShowOnSmallSizes' ],
+			[ 'expectShowsMessageOnLargeSizes' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInMessage' ],
+			[ 'expectShowsLiveDateAndTimeInSlideshow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
+			[ 'expectMainDonationFormShowsDonationReceiptCheckbox' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Already Donated', () => {
+		test.each( [
+			[ 'expectFiresMaybeLaterEventOnLinkClick' ]
+		] )( '%s', async ( testName: string ) => {
+			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.spec.ts b/test/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.spec.ts
new file mode 100644
index 000000000..9c9f301be
--- /dev/null
+++ b/test/banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.spec.ts
@@ -0,0 +1,64 @@
+import { describe, test } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import FallbackBanner from '@banners/english/C24_WMDE_Desktop_EN_06/components/FallbackBanner.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { Tracker } from '@src/tracking/Tracker';
+import { TrackerStub } from '@test/fixtures/TrackerStub';
+import { dynamicContentFeatures, fallbackBannerFeatures, submitFeatures } from '@test/features/FallbackBanner';
+import { TimerStub } from '@test/fixtures/TimerStub';
+import { Timer } from '@src/utils/Timer';
+
+const translator = ( key: string ): string => key;
+
+describe( 'FallbackBanner.vue', () => {
+	const getWrapperAtWidth = ( width: number, dynamicContent: DynamicContent = null, tracker: Tracker = null, timer: Timer = null ): VueWrapper<any> => {
+		Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: width } );
+		return mount( FallbackBanner, {
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				donationLink: 'https://spenden.wikimedia.de'
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					tracker: tracker ?? new TrackerStub(),
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	test.each( [
+		[ 'showsTheSmallBanner' ],
+		[ 'showsTheLargeBanner' ],
+		[ 'emitsTheBannerCloseEvent' ],
+		[ 'playsTheSlideshowWhenBecomesVisible' ],
+		[ 'showsUseOfFundsFromSmallBanner' ],
+		[ 'hidesUseOfFundsFromSmallBanner' ],
+		[ 'showsUseOfFundsFromLargeBanner' ],
+		[ 'hidesUseOfFundsFromLargeBanner' ]
+	] )( '%s', async ( testName: string ) => {
+		await fallbackBannerFeatures[ testName ]( getWrapperAtWidth );
+	} );
+
+	test.each( [
+		[ 'showsLiveTimeInLargeBanner' ]
+	] )( '%s', async ( testName: string ) => {
+		await dynamicContentFeatures[ testName ]( getWrapperAtWidth );
+	} );
+
+	test.each( [
+		[ 'submitsFromLargeBanner' ],
+		[ 'submitsFromSmallBanner' ]
+	] )( '%s', async ( testName: string ) => {
+		await submitFeatures[ testName ]( getWrapperAtWidth );
+	} );
+} );

From 9246b0913bd1e154fa2a22bac395d08dc5aaf609 Mon Sep 17 00:00:00 2001
From: Gabriel Birke <gabriel.birke@wikimedia.de>
Date: Fri, 6 Dec 2024 16:15:18 +0100
Subject: [PATCH 2/4] Prepare CTRL for C24_WMDE_Desktop_EN_06

- Add `modalOpened` and `modalClosed` events to use of funds.
- Reset VAR files

Ticket: https://phabricator.wikimedia.org/T381396
---
 .../C24_WMDE_Desktop_EN_06/banner_var.ts      |  2 +-
 .../components/BannerCtrl.vue                 | 22 +++++++---
 .../components/BannerVar.vue                  | 41 +++++++++++--------
 .../C24_WMDE_Desktop_EN_06/messages_var.ts    | 28 -------------
 .../styles/styles_var.scss                    |  2 +-
 .../components/BannerVar.spec.ts              |  5 +--
 6 files changed, 45 insertions(+), 55 deletions(-)
 delete mode 100644 banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
index 9883c3e6d..a43bf7aaa 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
+++ b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
@@ -17,7 +17,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
 import { Locales } from '@src/domain/Locales';
-import messages from './messages_var';
+import messages from './messages';
 import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
index d5f616146..32ae64f83 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
@@ -56,7 +56,7 @@
             </template>
 			<template #footer>
 				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
+					@showFundsModal="onOpenUseOfFunds"
 					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
 				/>
 			</template>
@@ -70,10 +70,10 @@
 			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
 		/>
 
-        <FundsModal
-            :content="useOfFundsContent"
-            :is-funds-modal-visible="isFundsModalVisible"
-            @hideFundsModal="isFundsModalVisible = false"
+    <FundsModal
+        :content="useOfFundsContent"
+        :is-funds-modal-visible="isFundsModalVisible"
+        @hideFundsModal="onCloseUseOfFunds"
 		>
 			<template #infographic>
 				<WMDEFundsForwardingEN/>
@@ -130,7 +130,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
 useBannerHider( 800, emit );
 
 const isFundsModalVisible = ref<boolean>( false );
@@ -145,6 +145,16 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onOpenUseOfFunds(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+function onCloseUseOfFunds(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
 function onCloseMain(): void {
 	if ( props.remainingImpressions > 0 ) {
 		contentState.value = ContentStates.SoftClosing;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
index c9a62e3be..32ae64f83 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
@@ -28,7 +28,7 @@
 				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
 					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<MainDonationFormAddressType :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
 							<template #label-payment-ppl>
 								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
 							</template>
@@ -39,11 +39,7 @@
 									<MastercardLogo/>
 								</span>
 							</template>
-
-							<template #button>
-								<MainDonationFormPaymentsAndReceiptButton/>
-							</template>
-						</MainDonationFormAddressType>
+						</MainDonationForm>
 					</template>
 
 					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
@@ -60,7 +56,7 @@
             </template>
 			<template #footer>
 				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
+					@showFundsModal="onOpenUseOfFunds"
 					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
 				/>
 			</template>
@@ -74,10 +70,10 @@
 			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
 		/>
 
-        <FundsModal
-            :content="useOfFundsContent"
-            :is-funds-modal-visible="isFundsModalVisible"
-            @hideFundsModal="isFundsModalVisible = false"
+    <FundsModal
+        :content="useOfFundsContent"
+        :is-funds-modal-visible="isFundsModalVisible"
+        @hideFundsModal="onCloseUseOfFunds"
 		>
 			<template #infographic>
 				<WMDEFundsForwardingEN/>
@@ -94,13 +90,18 @@ import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
 import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
 import BannerSlides from '../content/BannerSlides.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import BannerText from '../content/BannerText.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
-import { createSubmittableMainDonationForm } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
-import { createSubmittableUpgradeToYearly } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
@@ -111,8 +112,6 @@ import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue'
 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',
@@ -131,7 +130,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
 useBannerHider( 800, emit );
 
 const isFundsModalVisible = ref<boolean>( false );
@@ -146,6 +145,16 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onOpenUseOfFunds(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+function onCloseUseOfFunds(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
 function onCloseMain(): void {
 	if ( props.remainingImpressions > 0 ) {
 		contentState.value = ContentStates.SoftClosing;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
deleted file mode 100644
index 4b3e5c0e9..000000000
--- a/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import CustomAmountFormEn from '@src/components/DonationForm/Forms/messages/CustomAmountForm.en';
-import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
-import { TranslationMessages } from '@src/Translator';
-import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
-import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
-import AddressFormEn from '@src/components/DonationForm/Forms/messages/AddressForm.en';
-import FooterEn from '@src/components/Footer/messages/Footer.en';
-import MainDonationFormEn from '@src/components/DonationForm/Forms/messages/MainDonationForm.en';
-import AlreadyDonatedModalEn from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.en';
-import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.en';
-
-const messages: TranslationMessages = {
-	...CustomAmountFormEn,
-	...DynamicCampaignTextEn,
-	...UpgradeToYearlyEn,
-	...SoftCloseEn,
-	...AddressFormEn,
-	...FooterEn,
-	...MainDonationFormEn,
-	...AlreadyDonatedModalEn,
-	...FallbackBanner,
-	'upgrade-to-yearly-copy': '<p>Every year we are dependent on the support of people like you. Yearly donations ' +
-		'help sustainably and enable long term development.</p>' +
-		'<p>No risks attached, you can tell us to stop at any time.</p>',
-	'donation-receipt-checkbox-label': 'Please send me a tax deductible donation receipt to my postal address.'
-};
-
-export default messages;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
index 7a126e0a0..1e0e5a7f3 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
@@ -40,7 +40,7 @@
 );
 @use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel';
 @use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
-@use 'src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt' with (
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
 	$padding: 14px 0 0
 );
 @use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
diff --git a/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
index a3a49d6fa..b95b0de2f 100644
--- a/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
+++ b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
@@ -9,7 +9,7 @@ import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures, bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
-import { donationFormFeatures } from '@test/features/forms/MainDonationDonationReceipt_UpgradeToYearlyButton';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
 import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
@@ -103,8 +103,7 @@ describe( 'BannerVar.vue', () => {
 			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
 			[ 'expectMainDonationFormGoesToUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
-			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
-			[ 'expectMainDonationFormShowsDonationReceiptCheckbox' ]
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );

From d26a008eae4c91ff89d1c6c50ea67e897dac5fa3 Mon Sep 17 00:00:00 2001
From: Gabriel Birke <gabriel.birke@wikimedia.de>
Date: Fri, 6 Dec 2024 16:45:58 +0100
Subject: [PATCH 3/4] Add DoubleProgressBar styles to Treedip

Copied style files and swatches from Svingle.

Ticket: https://phabricator.wikimedia.org/T381396
---
 .../ProgressBar/DoubleProgressBar.scss        | 76 +++++++++++++++++++
 .../ProgressBar/_transitionsDouble.scss       | 41 ++++++++++
 src/themes/Treedip/swatches/color_dark.scss   | 14 ++++
 src/themes/Treedip/swatches/color_light.scss  | 15 ++++
 src/themes/Treedip/swatches/skin_default.scss |  2 +
 .../Treedip/swatches/skin_vector-2022.scss    |  5 ++
 6 files changed, 153 insertions(+)
 create mode 100644 src/themes/Treedip/ProgressBar/DoubleProgressBar.scss
 create mode 100644 src/themes/Treedip/ProgressBar/_transitionsDouble.scss

diff --git a/src/themes/Treedip/ProgressBar/DoubleProgressBar.scss b/src/themes/Treedip/ProgressBar/DoubleProgressBar.scss
new file mode 100644
index 000000000..c3eacf459
--- /dev/null
+++ b/src/themes/Treedip/ProgressBar/DoubleProgressBar.scss
@@ -0,0 +1,76 @@
+@use 'src/components/ProgressBar/DoubleProgressBar';
+@use 'transitionsDouble';
+
+.wmde-banner {
+	@include DoubleProgressBar.layout;
+
+	.wmde-banner {
+		&-double-progress {
+			margin: 0;
+			font-weight: bold;
+			font-size: 12px;
+
+			&-amount,
+			&-time {
+				height: 24px;
+				line-height: 24px;
+				padding-right: 10px;
+				border-radius: 12px;
+
+				&-fill,
+				&-difference {
+					color: var( --double-progress-color );
+					height: 100%;
+					padding: 0 10px;
+				}
+
+				&-fill {
+					display: flex;
+					justify-content: right;
+				}
+			}
+
+			&-right-text {
+				float: right;
+				color: var( --double-progress-right-text-color );
+			}
+
+			&-amount {
+				margin-bottom: 5px;
+				background: var( --double-progress-time-background );
+
+				&-fill,
+				&-difference {
+					border-radius: 12px;
+				}
+
+				&-fill {
+					background: var( --double-progress-time-fill-background );
+					z-index: 2;
+				}
+
+				&-difference {
+					background: var( --double-progress-difference-background );
+					z-index: 1;
+					text-align: right;
+				}
+			}
+
+			&-time {
+				background: var( --double-progress-amount-background );
+
+				&-fill {
+					border-radius: 12px;
+					background: var( --double-progress-amount-fill-background );
+				}
+			}
+
+			&.is-late-progress {
+				.wmde-banner-double-progress-amount-fill,
+				.wmde-banner-double-progress-time-fill {
+					justify-content: space-between;
+				}
+			}
+		}
+	}
+}
diff --git a/src/themes/Treedip/ProgressBar/_transitionsDouble.scss b/src/themes/Treedip/ProgressBar/_transitionsDouble.scss
new file mode 100644
index 000000000..5754bdb76
--- /dev/null
+++ b/src/themes/Treedip/ProgressBar/_transitionsDouble.scss
@@ -0,0 +1,41 @@
+@use '../variables/globals';
+
+.wmde-banner {
+	&-double-progress-amount-difference,
+	&-double-progress-time-fill,
+	&-double-progress-amount-fill {
+		transition: width 3000ms globals.$banner-easing;
+		width: 0;
+		max-width: 100%;
+	}
+
+	&-double-progress-amount-difference,
+	&-double-progress-time-fill {
+		min-width: 80px;
+	}
+
+	&-double-progress-amount-fill {
+		min-width: 80px;
+	}
+
+	&-double-progress .text-fade {
+		opacity: 0;
+		transition: opacity 300ms globals.$banner-easing;
+		transition-delay: 3000ms;
+	}
+
+	&--visible {
+		.wmde-banner-double-progress-amount-difference,
+		.wmde-banner-double-progress-time-fill {
+			width: var( --wmde-banner-progress-bar-time-width );
+		}
+
+		.wmde-banner-double-progress-amount-fill {
+			width: var( --wmde-banner-progress-bar-width );
+		}
+
+		.wmde-banner-double-progress .text-fade {
+			opacity: 1;
+		}
+	}
+}
diff --git a/src/themes/Treedip/swatches/color_dark.scss b/src/themes/Treedip/swatches/color_dark.scss
index 44731ebad..37d3e6086 100644
--- a/src/themes/Treedip/swatches/color_dark.scss
+++ b/src/themes/Treedip/swatches/color_dark.scss
@@ -12,8 +12,10 @@ $grey700: #292929;
 $grey800: #1f1f1f;
 
 $red100: #ff8888;
+$red500: #fb4848;
 $red600: #e60f00;
 
+$blue100: #dff1ff;
 $blue600: #547fd5;
 $blue700: #436fc7;
 $blue800: #20303f;
@@ -21,6 +23,7 @@ $blue800: #20303f;
 @mixin swatch(
 	$slider: false,
 	$progress-bar: false,
+	$double-progress-bar: false,
 	$select-group: false,
 	$select-group-bubble: false,
 	$select-group-button: false,
@@ -84,6 +87,17 @@ $blue800: #20303f;
 		--progress-bar-fill-color: #{$white};
 	}
 
+	@if $double-progress-bar {
+		--double-progress-color: #{$white};
+		--double-progress-time-background: #{$red100};
+		--double-progress-time-fill-background: #{$red600};
+		--double-progress-difference-background: #{$red500};
+
+		--double-progress-amount-background: #{$blue100};
+		--double-progress-amount-fill-background: #{$blue700};
+		--double-progress-right-text-color: #{$grey700};
+	}
+
 	@if $select-group {
 		--select-group-background: #{$white};
 		--select-group-radio-label-color: #{$black};
diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss
index 3061bd40e..24ea6d1e7 100644
--- a/src/themes/Treedip/swatches/color_light.scss
+++ b/src/themes/Treedip/swatches/color_light.scss
@@ -10,15 +10,19 @@ $grey500: #808080;
 $grey600: #747474;
 $grey700: #202122;
 
+$red100: #ffe8e8;
+$red500: #fb4848;
 $red600: #990a00;
 $red700: #7d0a00;
 
+$blue100: #dff1ff;
 $blue600: #4465a7;
 $blue700: #2a4b8d;
 
 @mixin swatch(
 	$slider: false,
 	$progress-bar: false,
+	$double-progress-bar: false,
 	$select-group: false,
 	$select-group-bubble: false,
 	$select-group-button: false,
@@ -83,6 +87,17 @@ $blue700: #2a4b8d;
 		--progress-bar-fill-color: #{$white};
 	}
 
+	@if $double-progress-bar {
+		--double-progress-color: #{$white};
+		--double-progress-time-background: #{$red100};
+		--double-progress-time-fill-background: #{$red600};
+		--double-progress-difference-background: #{$red500};
+
+		--double-progress-amount-background: #{$blue100};
+		--double-progress-amount-fill-background: #{$blue700};
+		--double-progress-right-text-color: #{$grey700};
+	}
+
 	@if $select-group {
 		--select-group-background: #{$white};
 		--select-group-radio-label-color: #{$black};
diff --git a/src/themes/Treedip/swatches/skin_default.scss b/src/themes/Treedip/swatches/skin_default.scss
index 093a49adc..24bf47d99 100644
--- a/src/themes/Treedip/swatches/skin_default.scss
+++ b/src/themes/Treedip/swatches/skin_default.scss
@@ -2,6 +2,7 @@
 
 $slider: false !default;
 $progress-bar: false !default;
+$double-progress-bar: false !default;
 $select-group: false !default;
 $select-group-bubble: false !default;
 $select-group-button: false !default;
@@ -16,6 +17,7 @@ $minimised-banner: false !default;
 	@include color_light.swatch(
 		$slider,
 		$progress-bar,
+		$double-progress-bar,
 		$select-group,
 		$select-group-bubble,
 		$select-group-button,
diff --git a/src/themes/Treedip/swatches/skin_vector-2022.scss b/src/themes/Treedip/swatches/skin_vector-2022.scss
index 17e6ab071..1a974465e 100644
--- a/src/themes/Treedip/swatches/skin_vector-2022.scss
+++ b/src/themes/Treedip/swatches/skin_vector-2022.scss
@@ -3,6 +3,7 @@
 
 $slider: false !default;
 $progress-bar: false !default;
+$double-progress-bar: false !default;
 $select-group: false !default;
 $select-group-bubble: false !default;
 $select-group-button: false !default;
@@ -16,6 +17,7 @@ $fallback-banner: false !default;
 	@include color_light.swatch(
 		$slider,
 		$progress-bar,
+		$double-progress-bar,
 		$select-group,
 		$select-group-bubble,
 		$select-group-button,
@@ -31,6 +33,7 @@ $fallback-banner: false !default;
 	@include color_dark.swatch(
 		$slider,
 		$progress-bar,
+		$double-progress-bar,
 		$select-group,
 		$select-group-bubble,
 		$select-group-button,
@@ -47,6 +50,7 @@ $fallback-banner: false !default;
 		@include color_dark.swatch(
 			$slider,
 			$progress-bar,
+			$double-progress-bar,
 			$select-group,
 			$select-group-bubble,
 			$select-group-button,
@@ -62,6 +66,7 @@ $fallback-banner: false !default;
 		@include color_light.swatch(
 			$slider,
 			$progress-bar,
+			$double-progress-bar,
 			$select-group,
 			$select-group-bubble,
 			$select-group-button,

From efce92322e38a65ad9c9241fdc2095335e11f382 Mon Sep 17 00:00:00 2001
From: Gabriel Birke <gabriel.birke@wikimedia.de>
Date: Fri, 6 Dec 2024 16:47:15 +0100
Subject: [PATCH 4/4] Prepare VAR for C24_WMDE_Desktop_EN_06

Add double progress bar to VAR

- add comment to `currentCampaignTimePercentage`
- add English translations for `DoubleProgressBar` component
- switch back to "million" formatting (instead of whole number
  formatting) for the "amount remaining" in the late progress content.
  This was switched before in 2023 Desktop DE 24

Ticket: https://phabricator.wikimedia.org/T381396
---
 .../C24_WMDE_Desktop_EN_06/banner_var.ts      |  4 +-
 .../components/BannerVar.vue                  |  4 +-
 .../C24_WMDE_Desktop_EN_06/messages_var.ts    | 29 +++++++++++
 .../styles/FallbackBanner.scss                |  1 +
 .../styles/MainBannerVar.scss                 | 50 +++++++++++++++++++
 .../styles/styles_var.scss                    |  8 ++-
 .../currentCampaignTimePercentage.ts          |  3 ++
 .../messages/DoubleProgressBar.en.ts          |  7 +++
 .../dev/CampaignParameterOverride.ts          |  2 +-
 .../generators/ProgressBarContent.ts          |  2 +-
 .../DynamicCampaignText.spec.ts               |  2 +-
 11 files changed, 101 insertions(+), 11 deletions(-)
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
 create mode 100644 src/components/ProgressBar/messages/DoubleProgressBar.en.ts

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
index a43bf7aaa..6e9590ac4 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
+++ b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
@@ -17,13 +17,14 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
 import { Locales } from '@src/domain/Locales';
-import messages from './messages';
+import messages from './messages_var';
 import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import eventMappings from './event_map';
 import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const localeFactory = new LocaleFactoryEn();
 const translator = new Translator( messages );
@@ -67,5 +68,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN } ) );
 app.provide( 'tracker', tracker );
 app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
 
 app.mount( page.getBannerContainer() );
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
index 32ae64f83..af094f8e7 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
@@ -21,7 +21,7 @@
             </template>
 
 			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
+				<DoubleProgressBar />
 			</template>
 
 			<template #donation-form="{ formInteraction }: any">
@@ -108,7 +108,7 @@ import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
 import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
 import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
-import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue';
 import { useBannerHider } from '@src/components/composables/useBannerHider';
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
new file mode 100644
index 000000000..959c1ddbc
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
@@ -0,0 +1,29 @@
+import CustomAmountFormEn from '@src/components/DonationForm/Forms/messages/CustomAmountForm.en';
+import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
+import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
+import AddressFormEn from '@src/components/DonationForm/Forms/messages/AddressForm.en';
+import FooterEn from '@src/components/Footer/messages/Footer.en';
+import MainDonationFormEn from '@src/components/DonationForm/Forms/messages/MainDonationForm.en';
+import AlreadyDonatedModalEn from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.en';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.en';
+import DoubleProgressBarEn from '@src/components/ProgressBar/messages/DoubleProgressBar.en';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormEn,
+	...DynamicCampaignTextEn,
+	...UpgradeToYearlyEn,
+	...SoftCloseEn,
+	...AddressFormEn,
+	...FooterEn,
+	...MainDonationFormEn,
+	...AlreadyDonatedModalEn,
+	...FallbackBanner,
+	...DoubleProgressBarEn,
+	'upgrade-to-yearly-copy': '<p>Every year we are dependent on the support of people like you. Yearly donations ' +
+		'help sustainably and enable long term development.</p>' +
+		'<p>No risks attached, you can tell us to stop at any time.</p>'
+};
+
+export default messages;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
index 2361a26cf..755514912 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
@@ -101,6 +101,7 @@ $breakpoint: 800px;
 
 		.wmde-banner-slider-container {
 			padding: 0 0 8px;
+			border: none;
 		}
 
 		.wmde-banner-slide-content {
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
new file mode 100644
index 000000000..4bb783cb2
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
@@ -0,0 +1,50 @@
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		padding: 0 15px;
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+		margin-bottom: 10px;
+	}
+
+	&-slider-container {
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+		margin-bottom: 10px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		background: var( --message-background );
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 10px 0;
+	}
+}
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
index 1e0e5a7f3..325a6b8fe 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
@@ -5,13 +5,13 @@
 	$select-group-image-label: true,
 	$upgrade-to-yearly: true,
 	$fallback-banner: true,
-	$progress-bar: true,
+	$double-progress-bar: true,
 	$soft-close: true,
 );
 @use 'src/themes/Treedip/variables/breakpoints';
 @use 'src/components/BannerConductor/banner-transition';
 @use 'Banner';
-@use 'MainBanner' with (
+@use 'MainBannerVar' with (
 	$banner-height: 355px,
 	$form-width: 300px
 );
@@ -24,9 +24,7 @@
 	$right: 8px,
 	$margin: -4.5px
 );
-@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with (
-	$progress-bar-margin: 0 15px
-);
+@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
 @use 'src/themes/Treedip/DonationForm/DonationForm';
 @use 'src/themes/Treedip/DonationForm/MultiStepDonation';
 @use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubble';
diff --git a/src/components/ProgressBar/currentCampaignTimePercentage.ts b/src/components/ProgressBar/currentCampaignTimePercentage.ts
index 55eeaba6e..f87d7e350 100644
--- a/src/components/ProgressBar/currentCampaignTimePercentage.ts
+++ b/src/components/ProgressBar/currentCampaignTimePercentage.ts
@@ -1,6 +1,9 @@
 import { CampaignParameters } from '@src/domain/CampaignParameters';
 import TimeRange from '@src/utils/TimeRange';
 
+/**
+ * Calculate how much of the campaign has passed (in percent), using the campaign start and end date and the current date
+ */
 export function currentCampaignTimePercentage( date: Date, campaignParameters: CampaignParameters ): number {
 	const timeRange = TimeRange.createFromStrings(
 		campaignParameters.startDate,
diff --git a/src/components/ProgressBar/messages/DoubleProgressBar.en.ts b/src/components/ProgressBar/messages/DoubleProgressBar.en.ts
new file mode 100644
index 000000000..817740647
--- /dev/null
+++ b/src/components/ProgressBar/messages/DoubleProgressBar.en.ts
@@ -0,0 +1,7 @@
+import { TranslationMessages } from '@src/Translator';
+
+const translations: TranslationMessages = {
+	'double-progress-close': 'Time is running out!'
+};
+
+export default translations;
diff --git a/src/environment/dev/CampaignParameterOverride.ts b/src/environment/dev/CampaignParameterOverride.ts
index 9e6099926..f3ad1d316 100644
--- a/src/environment/dev/CampaignParameterOverride.ts
+++ b/src/environment/dev/CampaignParameterOverride.ts
@@ -17,6 +17,6 @@ export function getCampaignParameterOverride( campaignParameters: CampaignParame
 		...campaignParameters,
 		startDate: '2024-10-28',
 		endDate: '2024-12-31',
-		isLateProgress: false
+		isLateProgress: true
 	};
 }
diff --git a/src/utils/DynamicContent/generators/ProgressBarContent.ts b/src/utils/DynamicContent/generators/ProgressBarContent.ts
index a09bf653d..046f5dcac 100644
--- a/src/utils/DynamicContent/generators/ProgressBarContent.ts
+++ b/src/utils/DynamicContent/generators/ProgressBarContent.ts
@@ -50,7 +50,7 @@ export class ProgressBarContent implements DynamicProgressBarContent {
 
 	public get amountNeeded(): string {
 		return this._translator.translate( 'amount-missing', {
-			amount: this._currencyFormatter.euroAmountWithThousandSeparator( this._remainingDonationSum )
+			amount: this._currencyFormatter.millions( this._remainingDonationSum )
 		} );
 	}
 
diff --git a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
index bc41ff0d0..5662a1afa 100644
--- a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
+++ b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
@@ -130,7 +130,7 @@ describe( 'DynamicCampaignText', () => {
 		expect( dynamicCampaignText.progressBarContent.donationTarget ).toBe( 'Progress total €9.0M' );
 		expect( dynamicCampaignText.progressBarContent.donationTargetAmount ).toBe( '€9.0M' );
 		expect( dynamicCampaignText.progressBarContent.amountDonated ).toBe( '€0.1M' );
-		expect( dynamicCampaignText.progressBarContent.amountNeeded ).toBe( 'Progress missing 8,900,000 euro' );
+		expect( dynamicCampaignText.progressBarContent.amountNeeded ).toBe( 'Progress missing €8.9M' );
 	} );
 
 	it( 'Gets the average donation', () => {