From f784aad1b9cf89bcbd0cb2d108e76ac6b29140c1 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Fri, 13 Dec 2024 08:50:23 +0100
Subject: [PATCH 1/3] Prepare campaign for C24_WMDE_Mobile_DE_13

Ticket: https://phabricator.wikimedia.org/T381954
---
 .../C24_WMDE_Mobile_DE_13/banner_ctrl.ts      |  70 +++++
 .../C24_WMDE_Mobile_DE_13/banner_var.ts       |  72 +++++
 .../components/BannerCtrl.vue                 | 255 ++++++++++++++++++
 .../components/BannerVar.vue                  | 255 ++++++++++++++++++
 .../components/FullPageBanner.vue             |  46 ++++
 .../components/MiniBanner.vue                 |  36 +++
 .../content/BannerSlides.vue                  |  75 ++++++
 .../content/BannerSlidesVar.vue               |  74 +++++
 .../content/BannerText.vue                    |  50 ++++
 .../content/ProgressBar.vue                   |  30 +++
 .../mobile/C24_WMDE_Mobile_DE_13/event_map.ts |  33 +++
 .../C24_WMDE_Mobile_DE_13/form_items.ts       |  22 ++
 .../mobile/C24_WMDE_Mobile_DE_13/messages.ts  |  30 +++
 .../C24_WMDE_Mobile_DE_13/styles/Banner.scss  |  56 ++++
 .../styles/FullPageBanner.scss                | 116 ++++++++
 .../styles/MiniBanner.scss                    | 178 ++++++++++++
 .../C24_WMDE_Mobile_DE_13/styles/styles.scss  |  28 ++
 .../styles/styles_var.scss                    |  28 ++
 campaign_info.toml                            |  18 +-
 .../components/BannerCtrl.spec.ts             | 183 +++++++++++++
 .../components/BannerVar.spec.ts              | 184 +++++++++++++
 21 files changed, 1830 insertions(+), 9 deletions(-)
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/components/FullPageBanner.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/components/MiniBanner.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerText.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/ProgressBar.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/event_map.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/form_items.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/messages.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/Banner.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/FullPageBanner.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/MiniBanner.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
 create mode 100644 test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
 create mode 100644 test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
new file mode 100644
index 000000000..1c138885f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
@@ -0,0 +1,70 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.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 { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import { WindowTimer } from '@src/utils/Timer';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+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 currencyFormatter = localeFactory.getCurrencyFormatter();
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		localCloseTracker: new LocalStorageCloseTracker()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
new file mode 100644
index 000000000..130119991
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
@@ -0,0 +1,72 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerVar.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 { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+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 date = new Date();
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) ),
+		localCloseTracker: new LocalStorageCloseTracker()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date,
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
+app.provide( 'tracker', tracker );
+app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( date, page.getCampaignParameters() ) );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
new file mode 100644
index 000000000..e28a0d24c
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
@@ -0,0 +1,255 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onCloseMiniBanner"
+			@show-full-page-banner="onshowFullPageBanner"
+			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+		>
+			<template #banner-slides>
+				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation
+					:step-controllers="stepControllers"
+					@form-interaction="formInteraction"
+					:page-scroller="pageScroller"
+					:submit-callback="onSubmit"
+				>
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationFormAdaptiveAmounts
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+							:amounts-for-form-items="amountOptionsForForm"
+						>
+
+							<template #button>
+								<MainDonationFormButton/>
+							</template>
+
+						</MainDonationFormAdaptiveAmounts>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:show-manual-upgrade-option = false
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+						>
+							<template #back>
+								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter :show-funds-link="false"/>
+			</template>
+		</FullPageBanner>
+
+		<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 )"
+		>
+			<template #buttons="{ timer }: any">
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-maybe-later"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.MaybeLater )">
+					{{ $translate( 'soft-close-button-maybe-later' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-close"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.Close )">
+					{{ $translate( 'soft-close-button-close' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-already-donated"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.AlreadyDonated )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBanner.vue';
+import MiniBanner from './MiniBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import MainDonationFormAdaptiveAmounts from '@src/components/DonationForm/Forms/MainDonationFormAdaptiveAmounts.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+const localTranslator = inject<Translator>( 'translator' );
+const currencyFormatter = inject<Currency>( 'currencyFormatter' );
+
+const localFormItemsBuilder = new FormItemsBuilder( localTranslator, currencyFormatter.euroAmount.bind( currencyFormatter ) );
+const amountOptionsFive = localFormItemsBuilder.setAmounts( 5, 15, 25, 50, 100 ).getItems().amounts;
+const amountOptionsTen = localFormItemsBuilder.setAmounts( 10, 15, 25, 50, 100 ).getItems().amounts;
+const amountOptionsForForm = ref<FormItem[]>( amountOptionsTen );
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMiniBanner(): 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 ) );
+	emit( 'modalClosed' );
+	props.localCloseTracker.setItem( feature, userChoice );
+}
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+const onSubmit = (): void => {
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	emit( 'modalOpened' );
+
+	amountOptionsForForm.value = amountOptionsFive;
+
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+}
+
+function onshowFullPageBannerPreselected(): void {
+	slideShowStopped.value = true;
+
+	amountOptionsForForm.value = amountOptionsTen;
+
+	formModel.selectedAmount.value = '10';
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+}
+
+const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
+	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
+		'.wmde-banner-form' :
+		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
+	);
+	isFundsModalVisible.value = false;
+};
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
new file mode 100644
index 000000000..92d61325a
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
@@ -0,0 +1,255 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onCloseMiniBanner"
+			@show-full-page-banner="onshowFullPageBanner"
+			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+		>
+			<template #banner-slides>
+				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini">
+							<template #progress><ProgressBar/></template>
+						</BannerSlides>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
+			</template>
+
+			<template #progress><ProgressBar/></template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation
+					:step-controllers="stepControllers"
+					@form-interaction="formInteraction"
+					:page-scroller="pageScroller"
+					:submit-callback="onSubmit"
+				>
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationFormAdaptiveAmounts
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+							:amounts-for-form-items="amountOptionsForForm"
+						>
+
+							<template #button>
+								<MainDonationFormButton/>
+							</template>
+
+						</MainDonationFormAdaptiveAmounts>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:show-manual-upgrade-option = false
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+						>
+							<template #back>
+								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter :show-funds-link="false"/>
+			</template>
+		</FullPageBanner>
+
+		<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 )"
+		>
+			<template #buttons="{ timer }: any">
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-maybe-later"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.MaybeLater )">
+					{{ $translate( 'soft-close-button-maybe-later' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-close"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.Close )">
+					{{ $translate( 'soft-close-button-close' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-already-donated"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.AlreadyDonated )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBanner.vue';
+import MiniBanner from './MiniBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import MainDonationFormAdaptiveAmounts from '@src/components/DonationForm/Forms/MainDonationFormAdaptiveAmounts.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import ProgressBar from '../content/ProgressBar.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+const localTranslator = inject<Translator>( 'translator' );
+const currencyFormatter = inject<Currency>( 'currencyFormatter' );
+
+const localFormItemsBuilder = new FormItemsBuilder( localTranslator, currencyFormatter.euroAmount.bind( currencyFormatter ) );
+const amountOptionsFive = localFormItemsBuilder.setAmounts( 5, 15, 25, 50, 100 ).getItems().amounts;
+const amountOptionsTen = localFormItemsBuilder.setAmounts( 10, 15, 25, 50, 100 ).getItems().amounts;
+const amountOptionsForForm = ref<FormItem[]>( amountOptionsTen );
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMiniBanner(): 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 ) );
+	emit( 'modalClosed' );
+	props.localCloseTracker.setItem( feature, userChoice );
+}
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+const onSubmit = (): void => {
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	emit( 'modalOpened' );
+
+	amountOptionsForForm.value = amountOptionsFive;
+
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+}
+
+function onshowFullPageBannerPreselected(): void {
+	slideShowStopped.value = true;
+
+	amountOptionsForForm.value = amountOptionsTen;
+
+	formModel.selectedAmount.value = '10';
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+}
+
+const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
+	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
+		'.wmde-banner-form' :
+		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
+	);
+	isFundsModalVisible.value = false;
+};
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/FullPageBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/FullPageBanner.vue
new file mode 100644
index 000000000..7350fbfa1
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/FullPageBanner.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="wmde-banner-full">
+		<button class="wmde-banner-full-close t-close-full-banner" @click.prevent="$emit( 'close' )">
+			<CloseIconMobile/>
+		</button>
+		<div class="wmde-banner-full-content">
+			<div class="wmde-banner-full-info">
+				<slot name="banner-text"/>
+				<slot name="progress"/>
+			</div>
+
+			<div class="wmde-banner-full-call-to-action">
+				Jetzt sind Sie <span class="wmde-banner-full-call-to-action-optional-text">in Deutschland</span> gefragt.
+			</div>
+
+			<div class="wmde-banner-full-content-below-info">
+				<slot name="donation-form"/>
+
+				<ThankYouBox/>
+
+				<div class="wmde-banner-full-small-print">
+					<span>
+						<a
+							id="application-of-funds-link"
+							class="wmde-banner-footer-usage-link t-use-of-funds-link"
+							@click.prevent="$emit( 'showFundsModal' )"
+						>
+							{{ $translate( 'use-of-funds-link' ) }}
+						</a>
+					</span>
+				</div>
+
+				<slot name="footer"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+import ThankYouBox from '@src/components/ThankYouBox/ThankYouBox.vue';
+
+defineEmits( [ 'close', 'showFundsModal' ] );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/MiniBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/MiniBanner.vue
new file mode 100644
index 000000000..dcbe339c0
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/MiniBanner.vue
@@ -0,0 +1,36 @@
+<template>
+	<div class="wmde-banner-mini">
+		<div class="wmde-banner-mini-info">
+			<button class="wmde-banner-mini-close wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
+				<CloseIconMobile/>
+			</button>
+
+			<header class="wmde-banner-mini-headline">
+				<div class="wmde-banner-mini-headline-background">
+					<span class="wmde-banner-mini-headline-content">Wikipedia ist unverkäuflich</span>
+				</div>
+			</header>
+
+			<div class="wmde-banner-mini-slideshow">
+				<slot name="banner-slides"/>
+			</div>
+		</div>
+		<div class="wmde-banner-mini-button-group">
+			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselected' )">
+				Jetzt 10 &euro; spenden
+			</button>
+			<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
+				Anderen Betrag
+			</button>
+		</div>
+
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+
+defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselected', 'close' ] );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
new file mode 100644
index 000000000..48524e525
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
@@ -0,0 +1,75 @@
+<template>
+
+	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
+		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
+		<ProgressBar amount-to-show-on-right="TARGET"/>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p><strong>Hi,</strong></p>
+		<p>
+			vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }} bitten wir Sie,
+			die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			{{ campaignDaySentence }}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 4">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+			<strong> Vielen Dank!</strong>
+		</p>
+	</KeenSliderSlide>
+
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted, watch } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+
+interface Props {
+	playLiveText: boolean;
+	currentSlide: number
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	goalDonationSum,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
new file mode 100644
index 000000000..526a7fbb0
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
@@ -0,0 +1,74 @@
+<template>
+
+	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
+		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
+		<slot name="progress"/>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p><strong>Hi,</strong></p>
+		<p>
+			vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }} bitten wir Sie,
+			die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			{{ campaignDaySentence }}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 4">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+			<strong> Vielen Dank!</strong>
+		</p>
+	</KeenSliderSlide>
+
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted, watch } from '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 {
+	playLiveText: boolean;
+	currentSlide: number
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	goalDonationSum,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerText.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerText.vue
new file mode 100644
index 000000000..c0b3d6b27
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerText.vue
@@ -0,0 +1,50 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p class="banner-text-title">
+				<strong>Hi,</strong>
+			</p>
+			<p>
+				vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+				{{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }}
+				bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen. {{ campaignDaySentence }}
+				<AnimatedText :content="visitorsVsDonorsSentence"/> Die meisten Menschen spenden, weil sie Wikipedia
+				nützlich finden. Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns
+				weiter. Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann entscheiden
+				Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, watch } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	playLiveText: boolean;
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( shouldPlay ) {
+		startTimer();
+	} else {
+		stopTimer();
+	}
+} );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/ProgressBar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/ProgressBar.vue
new file mode 100644
index 000000000..54bed9a88
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/ProgressBar.vue
@@ -0,0 +1,30 @@
+<template>
+	<ProgressBar :with-extra-labels="true">
+		<template #extra-label-right>
+			{{ progressBarContent.donationTarget }}
+		</template>
+		<template #amount-fill-left>
+			<HandIcon/>
+		</template>
+		<template #amount-fill-right>
+			{{ progressBarContent ? progressBarContent.amountNeeded : progressBarContent.amountDonated }}
+		</template>
+		<template #time-fill-left>
+			<TimerIcon/>
+		</template>
+		<template #time-fill-right>
+			{{ daysLeftSentence }}
+		</template>
+	</ProgressBar>
+</template>
+
+<script setup lang="ts">
+import HandIcon from '@src/components/ProgressBar/Icons/HandIcon.vue';
+import ProgressBar from '@src/components/ProgressBar/ConfigurableDoubleProgressBar.vue';
+import TimerIcon from '@src/components/ProgressBar/Icons/TimerIcon.vue';
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+
+const { progressBarContent, daysLeftSentence } = inject<DynamicContent>( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/event_map.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/event_map.ts
new file mode 100644
index 000000000..d7a00a5dd
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/event_map.ts
@@ -0,0 +1,33 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+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 { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ MobileMiniBannerExpandedEvent.EVENT_NAME,
+		( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'MiniBanner':
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ]
+] );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/form_items.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/form_items.ts
new file mode 100644
index 000000000..5156a352e
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/form_items.ts
@@ -0,0 +1,22 @@
+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.YEARLY
+		)
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.DIRECT_DEBIT,
+			PaymentMethods.BANK_TRANSFER,
+			PaymentMethods.CREDIT_CARD,
+			PaymentMethods.SOFORT
+		).getItems();
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/messages.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/messages.ts
new file mode 100644
index 000000000..930f9b38f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/messages.ts
@@ -0,0 +1,30 @@
+import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
+import FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+
+const messages: TranslationMessages = {
+	...DynamicCampaignTextDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...UpgradeToYearlyDe,
+	...SoftCloseDe,
+
+	// custom messages here
+	'use-of-funds-link': 'Was Ihre Spende bewirkt',
+	'payment-bank-transfer': 'Überweisung',
+	'payment-sofort': 'Sofort',
+	'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns' +
+		' besonders und ermöglichen langfristige Weiterentwicklungen.</p>' +
+		'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>',
+	'upgrade-to-yearly-no': 'Nein, ich spende einmalig {{amount}}',
+	'upgrade-to-yearly-yes': 'Ja, ich spende {{amount}} jährlich',
+	'campaign-day-only-n-days': 'Heute sind es nur noch {{days}} Tage bis zum Ende unserer Spendenkampagne.',
+	'soft-close-prompt': 'Wikipedia später unterstützen?',
+	'soft-close-button-already-donated': 'Habe schon gespendet',
+	'amount-total': ''
+};
+
+export default messages;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/Banner.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/Banner.scss
new file mode 100644
index 000000000..5ff1ecbab
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/Banner.scss
@@ -0,0 +1,56 @@
+@use 'src/themes/Modo/variables/globals';
+@use 'src/themes/Modo/variables/fonts';
+
+@keyframes hide-mini {
+	0% {
+		opacity: 1;
+	}
+	99% {
+		opacity: 0;
+	}
+	100% {
+		display: none;
+	}
+}
+
+.wmde-banner {
+
+	&-full {
+		visibility: hidden;
+		opacity: 0;
+		transform: scale( 1.1 );
+		transition: opacity 500ms globals.$banner-easing, transform 500ms globals.$banner-easing;
+	}
+
+	&-wrapper {
+		font-size: 16px;
+		font-family: fonts.$ui;
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+		background-color: var( --main-background );
+		color: var( --main-color );
+
+		&--full-page {
+			.wmde-banner-mini {
+				animation: hide-mini 500ms;
+			}
+			.wmde-banner-full {
+				visibility: visible;
+				opacity: 1;
+				transform: scale( 1 );
+			}
+		}
+
+		&--soft-closing {
+			.wmde-banner-mini {
+				display: none;
+			}
+		}
+	}
+
+	&--closed,
+	&--not-shown {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/FullPageBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/FullPageBanner.scss
new file mode 100644
index 000000000..74e0d4eb9
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/FullPageBanner.scss
@@ -0,0 +1,116 @@
+@use '@src/themes/Modo/variables/globals';
+@use '@src/themes/Modo/variables/breakpoints';
+
+.wmde-banner {
+	&-full {
+		background: var( --full-background );
+		position: fixed;
+		top: 0;
+		z-index: 1000;
+		height: 100vh;
+		height: -webkit-fill-available;
+		width: 100vw;
+
+		&-content {
+			overflow-y: auto;
+			height: 100%;
+			width: 100%;
+			padding: 12px;
+		}
+
+		p {
+			padding-bottom: 16px;
+		}
+
+		&-close {
+			position: absolute;
+			top: 0;
+			right: 0;
+			height: 36px;
+			width: 36px;
+			padding: 5px 3px 5px 7px;
+			background: transparent;
+			z-index: 99;
+			border: none;
+
+			svg {
+				height: 15px;
+				width: 15px;
+				background: var( --full-close-background );
+				border-radius: 16px;
+				box-sizing: content-box;
+				border: solid 5px var( --full-close-background );
+			}
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+
+		&-info {
+			padding: 12px;
+			background: var( --full-info-background );
+			border-radius: 16px;
+			color: var( --info-color );
+		}
+
+		&-content-below-info {
+			background: var( --full-content-below-info-background );
+			border-radius: 16px;
+		}
+
+		&-call-to-action {
+			position: relative;
+			color: var( --full-cta-color );
+			background: var( --full-cta-background );
+			font-weight: bold;
+			font-size: 14px;
+			height: 25px;
+			line-height: 25px;
+			text-align: center;
+			border-radius: 16px;
+			margin-bottom: 10px;
+			margin-top: 10px;
+
+			&-optional-text {
+				display: none;
+
+				@include breakpoints.tablet-portrait-up {
+					display: inline;
+				}
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: -4px;
+				left: 50%;
+				margin-left: -4px;
+				width: 0;
+				height: 0;
+				border-style: solid;
+				border-width: 5px 4px 0;
+				border-color: var( --full-cta-background ) transparent transparent transparent;
+			}
+		}
+
+		.banner-text-title {
+			margin-right: 30px;
+		}
+
+		&-small-print {
+			text-align: center;
+			font-size: 12px;
+			margin-bottom: 16px;
+
+			a {
+				color: var( --full-smallprint-color );
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MiniBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MiniBanner.scss
new file mode 100644
index 000000000..3b6fb5289
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MiniBanner.scss
@@ -0,0 +1,178 @@
+@use '@src/themes/Modo/variables/globals';
+@use '@src/themes/Modo/variables/breakpoints';
+
+$height: 336px !default;
+$height-l-up: 288px !default;
+
+.wmde-banner {
+	&-mini {
+		display: flex;
+		flex-direction: column;
+		min-height: $height;
+		padding: 6px;
+		position: relative;
+		background: var( --mini-background );
+		color: var( --info-color );
+
+		@include breakpoints.phone-l-up {
+			min-height: $height-l-up;
+			padding: 12px;
+		}
+
+		&-info {
+			background: var( --mini-info-background );
+			border-radius: 16px;
+			margin-bottom: 6px;
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+
+			@include breakpoints.phone-l-up {
+				margin-bottom: 12px;
+			}
+		}
+
+		&-close {
+			top: -3px;
+			right: -3px;
+			position: absolute;
+			height: 36px;
+			width: 36px;
+			padding: 5px 3px 5px 7px;
+			background: transparent;
+			z-index: 99;
+			border: none;
+
+			svg {
+				height: 15px;
+				width: 15px;
+				background: var( --mini-close-background );
+				border-radius: 16px;
+				box-sizing: content-box;
+				border: solid 5px var( --mini-close-background );
+			}
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+
+		&-headline {
+			height: 25px;
+			text-align: center;
+			margin: 16px 16px 12px;
+
+			&-background {
+				position: relative;
+				text-align: left;
+
+				@media ( min-width: 400px ) {
+					text-align: center;
+				}
+
+				/* single line above container */
+				&::before {
+					content: '';
+					display: block;
+					background: var( --mini-headline-line );
+					width: 100%;
+					height: 1px;
+					position: absolute;
+					top: 50%;
+					z-index: 1;
+				}
+			}
+
+			&-content {
+				position: relative;
+				display: inline-block;
+				font-weight: bold;
+				font-size: 14px;
+				line-height: 25px;
+				background: var( --mini-headline-background );
+				padding: 0 5px;
+				z-index: 2;
+				white-space: nowrap;
+
+				@media ( min-width: 330px ) {
+					font-size: 16px;
+				}
+
+				@media ( min-width: 360px ) {
+					font-size: 18px;
+				}
+			}
+		}
+
+		&-slideshow {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+		}
+
+		&-button-group {
+			display: flex;
+			justify-content: center;
+			margin: 0 -6px;
+
+			@include breakpoints.phone-l-up {
+				margin: 0 -12px;
+			}
+		}
+
+		&-button,
+		&-button-preselect {
+			width: 50%;
+			height: 40px;
+			border: none;
+			border-radius: 20px;
+			font-weight: bold;
+			color: var( --mini-button-color );
+			font-size: 14px;
+			white-space: nowrap;
+			margin: 0 6px;
+
+			@include breakpoints.phone-l-up {
+				margin: 0 12px;
+			}
+
+			@media ( min-width: 370px ) {
+				font-size: 16px;
+			}
+		}
+
+		&-button {
+			background: var( --mini-button-background );
+
+			&:hover,
+			&:focus {
+				background: var( --mini-button-background-hover );
+			}
+		}
+
+		&-button-preselect {
+			background: var( --mini-button-alt-background );
+
+			&:hover,
+			&:focus {
+				background: var( --mini-button-alt-background-hover );
+			}
+		}
+
+		.smallprint-mini {
+			text-align: center;
+			font-size: 11px;
+			margin-top: 12px;
+			margin-bottom: -5px;
+
+			a {
+				color: var( --mini-smallprint-color );
+
+				&:hover,
+				&:focus {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
new file mode 100644
index 000000000..1231efea4
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
@@ -0,0 +1,28 @@
+@use 'src/themes/Modo/swatches/skin_default' with (
+	$upgrade-to-yearly-button-form: true,
+	$progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Modo/defaults';
+@use 'Banner';
+@use 'MiniBanner' with (
+	$height: 336px,
+	$height-l-up: 306px
+);
+@use 'FullPageBanner';
+@use 'src/themes/Modo/Footer/Footer';
+@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
+@use 'src/themes/Modo/Footer/SelectionInput';
+@use 'src/themes/Modo/DonationForm/MultiStepDonation';
+@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Modo/Slider/Slider';
+@use 'src/themes/Modo/SoftClose/SoftClose';
+@use 'src/themes/Modo/ProgressBar/ProgressBar';
+@use 'src/themes/Modo/Message/Message';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
new file mode 100644
index 000000000..82cffc1b4
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
@@ -0,0 +1,28 @@
+@use 'src/themes/Modo/swatches/skin_default' with (
+	$upgrade-to-yearly-button-form: true,
+	$double-progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Modo/defaults';
+@use 'Banner';
+@use 'MiniBanner' with (
+	$height: 336px,
+	$height-l-up: 306px
+);
+@use 'FullPageBanner';
+@use 'src/themes/Modo/Footer/Footer';
+@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
+@use 'src/themes/Modo/Footer/SelectionInput';
+@use 'src/themes/Modo/DonationForm/MultiStepDonation';
+@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Modo/Slider/Slider';
+@use 'src/themes/Modo/SoftClose/SoftClose';
+@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Modo/Message/Message';
diff --git a/campaign_info.toml b/campaign_info.toml
index d9b6ea10a..b1481a2f4 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -35,9 +35,9 @@ resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560
 [mobile]
 name = "Mobile"
 icon = "mobile"
-campaign = "C24_WMDE_Mobile_DE_12"
-description = " based on VAR of C24_WMDE_Mobile_DE_11, VAR has a double progress bar"
-campaign_tracking = "mob-de-12-ba-241210"
+campaign = "C24_WMDE_Mobile_DE_13"
+description = " based on VAR of C24_WMDE_Mobile_DE_12, VAR has auto collapse"
+campaign_tracking = "mob-de-13-ba-241217"
 preview_link = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&useskin=minerva"
 preview_link_darkmode = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&useskin=minerva&minervanightmode=1"
 preview_link_offline = ""
@@ -47,14 +47,14 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_DE"
 
 # Banners of the campaign, key after "banners" can be anything
 [mobile.banners.ctrl]
-filename = "./banners/mobile/C24_WMDE_Mobile_DE_12/banner_ctrl.ts"
-pagename = "B24_WMDE_Mobile_DE_12_ctrl"
-tracking = "org-mob12-241210-ctrl"
+filename = "./banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts"
+pagename = "B24_WMDE_Mobile_DE_13_ctrl"
+tracking = "org-mob13-241217-ctrl"
 
 [mobile.banners.var]
-filename = "./banners/mobile/C24_WMDE_Mobile_DE_12/banner_var.ts"
-pagename = "B24_WMDE_Mobile_DE_12_var"
-tracking = "org-mob12-241210-var"
+filename = "./banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts"
+pagename = "B24_WMDE_Mobile_DE_13_var"
+tracking = "org-mob13-241217-var"
 
 [mobile.test_matrix]
 device = [ 'samsung_s10', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max"]
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
new file mode 100644
index 000000000..570ee61ab
--- /dev/null
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
@@ -0,0 +1,183 @@
+import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { CurrencyDe } from '@src/utils/DynamicContent/formatters/CurrencyDe';
+import { formItems } from '@test/banners/formItems';
+import { softCloseFeatures } from '@test/features/SoftCloseMobile';
+import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds';
+import { miniBannerFeatures } from '@test/features/MiniBanner';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton_changesAmountOptions';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { fullPageBannerFeatures } from '@test/features/FullPageBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { Tracker } from '@src/tracking/Tracker';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } from '@test/features/BannerContent';
+import { softCloseSubmitTrackingFeatures } from '@test/features/SoftCloseSubmitTracking';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+
+let pageScroller: PageScroller;
+let tracker: Tracker;
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+describe( 'BannerCtrl.vue', () => {
+
+	let wrapper: VueWrapper<any>;
+	beforeEach( () => {
+		resetFormModel( formModel );
+
+		pageScroller = {
+			scrollIntoView: vi.fn(),
+			scrollToTop: vi.fn()
+		};
+
+		tracker = {
+			trackEvent: vi.fn()
+		};
+	} );
+
+	afterEach( () => {
+		wrapper.unmount();
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		// attachTo the document body to fix an issue with Vue Test Utils where
+		// clicking a submit button in a form does not fire the submit event
+		wrapper = mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				pageScroller,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com/with-address', donateAnonymouslyAction: 'https://example.com/without-address' },
+					currencyFormatter: new CurrencyDe(),
+					formItems,
+					tracker,
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+
+		return wrapper;
+	};
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInMiniBanner' ],
+			[ 'expectShowsLiveDateAndTimeInFullPageBanner' ]
+		] )( '%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() );
+		} );
+
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftCloseOnMiniBannerClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFullBannerClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseAlreadyDonatedEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectStoresMaybeLateCloseChoice' ],
+			[ 'expectStoresCloseCloseChoice' ],
+			[ 'expectStoresAlreadyDonatedCloseChoice' ],
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeatures[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectScrollsToFormWhenCallToActionIsClicked' ],
+			[ 'expectScrollsToLinkWhenCloseIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsScrollFeatures[ testName ]( getWrapper(), pageScroller );
+		} );
+	} );
+
+	describe( 'Mini Banner', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenMiniBannerBecomesVisible' ],
+			[ 'expectSlideShowStopsWhenFullBannerBecomesVisible' ],
+			[ 'expectShowsFullPageWhenCallToActionIsClicked' ],
+			[ 'expectEmitsBannerContentChangedEventWhenCallToActionIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await miniBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Full Page Banner', () => {
+		test.each( [
+			[ 'expectEmitsCloseEvent' ],
+			[ 'expectEmitsModalOpenedEvent' ],
+			[ 'expectEmitsModalClosedEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await fullPageBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
new file mode 100644
index 000000000..99fff7c95
--- /dev/null
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
@@ -0,0 +1,184 @@
+import { afterEach, beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { CurrencyDe } from '@src/utils/DynamicContent/formatters/CurrencyDe';
+import { formItems } from '@test/banners/formItems';
+import { softCloseFeatures } from '@test/features/SoftCloseMobile';
+import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds';
+import { miniBannerFeatures } from '@test/features/MiniBanner';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton_changesAmountOptions';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { fullPageBannerFeatures } from '@test/features/FullPageBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { Tracker } from '@src/tracking/Tracker';
+import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } from '@test/features/BannerContent';
+import { softCloseSubmitTrackingFeatures } from '@test/features/SoftCloseSubmitTracking';
+import { Timer } from '@src/utils/Timer';
+import { TimerStub } from '@test/fixtures/TimerStub';
+
+let pageScroller: PageScroller;
+let tracker: Tracker;
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+describe( 'BannerVar.vue', () => {
+
+	let wrapper: VueWrapper<any>;
+	beforeEach( () => {
+		resetFormModel( formModel );
+
+		pageScroller = {
+			scrollIntoView: vi.fn(),
+			scrollToTop: vi.fn()
+		};
+
+		tracker = {
+			trackEvent: vi.fn()
+		};
+	} );
+
+	afterEach( () => {
+		wrapper.unmount();
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		// attachTo the document body to fix an issue with Vue Test Utils where
+		// clicking a submit button in a form does not fire the submit event
+		wrapper = mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				pageScroller,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com/with-address', donateAnonymouslyAction: 'https://example.com/without-address' },
+					currencyFormatter: new CurrencyDe(),
+					formItems,
+					tracker,
+					timer: timer ?? new TimerStub(),
+					currentCampaignTimePercentage: 42
+				}
+			}
+		} );
+
+		return wrapper;
+	};
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInMiniBanner' ],
+			[ 'expectShowsLiveDateAndTimeInFullPageBanner' ]
+		] )( '%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() );
+		} );
+
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftCloseOnMiniBannerClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFullBannerClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseAlreadyDonatedEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectStoresMaybeLateCloseChoice' ],
+			[ 'expectStoresCloseCloseChoice' ],
+			[ 'expectStoresAlreadyDonatedCloseChoice' ],
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeatures[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectScrollsToFormWhenCallToActionIsClicked' ],
+			[ 'expectScrollsToLinkWhenCloseIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsScrollFeatures[ testName ]( getWrapper(), pageScroller );
+		} );
+	} );
+
+	describe( 'Mini Banner', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenMiniBannerBecomesVisible' ],
+			[ 'expectSlideShowStopsWhenFullBannerBecomesVisible' ],
+			[ 'expectShowsFullPageWhenCallToActionIsClicked' ],
+			[ 'expectEmitsBannerContentChangedEventWhenCallToActionIsClicked' ]
+		] )( '%s', async ( testName: string ) => {
+			await miniBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Full Page Banner', () => {
+		test.each( [
+			[ 'expectEmitsCloseEvent' ],
+			[ 'expectEmitsModalOpenedEvent' ],
+			[ 'expectEmitsModalClosedEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await fullPageBannerFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );

From fa6e20ca0a9b485c317ef51a78413457c9d51bca Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Fri, 13 Dec 2024 09:08:35 +0100
Subject: [PATCH 2/3] Prepare CTRL for C24_WMDE_Mobile_DE_13

Based on the VAR of test 12

Ticket: https://phabricator.wikimedia.org/T381954
---
 .../C24_WMDE_Mobile_DE_13/banner_ctrl.ts      |  6 +-
 .../C24_WMDE_Mobile_DE_13/banner_var.ts       |  2 +-
 .../components/BannerCtrl.vue                 | 10 +--
 .../components/BannerVar.vue                  |  2 +-
 .../content/BannerSlides.vue                  |  3 +-
 .../content/BannerSlidesVar.vue               | 74 -------------------
 .../C24_WMDE_Mobile_DE_13/styles/styles.scss  |  4 +-
 .../styles/styles_var.scss                    | 28 -------
 .../components/BannerCtrl.spec.ts             |  3 +-
 9 files changed, 16 insertions(+), 116 deletions(-)
 delete mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
 delete mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
index 1c138885f..4b3126924 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
@@ -23,6 +23,7 @@ import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
 import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -31,7 +32,7 @@ const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(
 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 date = new Date();
 const currencyFormatter = localeFactory.getCurrencyFormatter();
 
 const app = createVueApp( BannerConductor, {
@@ -54,7 +55,7 @@ const app = createVueApp( BannerConductor, {
 app.use( TranslationPlugin, translator );
 app.use( DynamicTextPlugin, {
 	campaignParameters: page.getCampaignParameters(),
-	date: new Date(),
+	date,
 	formatters: localeFactory.getFormatters(),
 	impressionCount,
 	translator,
@@ -66,5 +67,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
 app.provide( 'tracker', tracker );
 app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( date, page.getCampaignParameters() ) );
 
 app.mount( page.getBannerContainer() );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
index 130119991..64233ae0a 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
@@ -1,6 +1,6 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles_var.scss';
+import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
 import Banner from './components/BannerVar.vue';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
index e28a0d24c..8b2c17d15 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
@@ -9,7 +9,9 @@
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
-						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini">
+							<template #progress><ProgressBar/></template>
+						</BannerSlides>
 					</template>
 
 				</KeenSlider>
@@ -24,9 +26,7 @@
 				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
 			</template>
 
-			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
-			</template>
+			<template #progress><ProgressBar/></template>
 
 			<template #donation-form="{ formInteraction }: any">
 				<MultiStepDonation
@@ -143,7 +143,7 @@ import {
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
 import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
 import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
-import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import ProgressBar from '../content/ProgressBar.vue';
 import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
index 92d61325a..8b2c17d15 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
@@ -124,7 +124,7 @@ import { PageScroller } from '@src/utils/PageScroller/PageScroller';
 import MainDonationFormAdaptiveAmounts from '@src/components/DonationForm/Forms/MainDonationFormAdaptiveAmounts.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import BannerText from '../content/BannerText.vue';
-import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerSlides from '../content/BannerSlides.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import { Tracker } from '@src/tracking/Tracker';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
index 48524e525..526a7fbb0 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
@@ -2,7 +2,7 @@
 
 	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
 		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
-		<ProgressBar amount-to-show-on-right="TARGET"/>
+		<slot name="progress"/>
 	</KeenSliderSlide>
 
 	<KeenSliderSlide :is-current="currentSlide === 1">
@@ -44,7 +44,6 @@ import { inject, onMounted, onUnmounted, watch } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 
 interface Props {
 	playLiveText: boolean;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
deleted file mode 100644
index 526a7fbb0..000000000
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-
-	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
-		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
-		<slot name="progress"/>
-	</KeenSliderSlide>
-
-	<KeenSliderSlide :is-current="currentSlide === 1">
-		<p><strong>Hi,</strong></p>
-		<p>
-			vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
-			heutigen {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }} bitten wir Sie,
-			die Unabhängigkeit von Wikipedia zu unterstützen.
-		</p>
-	</KeenSliderSlide>
-
-	<KeenSliderSlide :is-current="currentSlide === 2">
-		<p>
-			{{ campaignDaySentence }}
-			<AnimatedText :content="visitorsVsDonorsSentence"/>
-			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
-		</p>
-	</KeenSliderSlide>
-
-	<KeenSliderSlide :is-current="currentSlide === 3">
-		<p>
-			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns weiter. Hat Wikipedia
-			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
-		</p>
-	</KeenSliderSlide>
-
-	<KeenSliderSlide :is-current="currentSlide === 4">
-		<p>
-			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
-			<strong> Vielen Dank!</strong>
-		</p>
-	</KeenSliderSlide>
-
-</template>
-
-<script setup lang="ts">
-import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import { inject, onMounted, onUnmounted, watch } from '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 {
-	playLiveText: boolean;
-	currentSlide: number
-}
-
-const props = defineProps<Props>();
-
-const {
-	currentDayName,
-	getCurrentDateAndTime,
-	goalDonationSum,
-	visitorsVsDonorsSentence,
-	campaignDaySentence,
-	averageDonation
-}: DynamicContent = inject( 'dynamicCampaignText' );
-
-const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
-
-watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
-	if ( !shouldPlay ) {
-		stopTimer();
-	}
-} );
-onMounted( startTimer );
-onUnmounted( stopTimer );
-
-</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
index 1231efea4..82cffc1b4 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
@@ -1,6 +1,6 @@
 @use 'src/themes/Modo/swatches/skin_default' with (
 	$upgrade-to-yearly-button-form: true,
-	$progress-bar: true,
+	$double-progress-bar: true,
 	$soft-close: true,
 	$thank-you-box: true
 );
@@ -24,5 +24,5 @@
 @use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
 @use 'src/themes/Modo/Slider/Slider';
 @use 'src/themes/Modo/SoftClose/SoftClose';
-@use 'src/themes/Modo/ProgressBar/ProgressBar';
+@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
 @use 'src/themes/Modo/Message/Message';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
deleted file mode 100644
index 82cffc1b4..000000000
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use 'src/themes/Modo/swatches/skin_default' with (
-	$upgrade-to-yearly-button-form: true,
-	$double-progress-bar: true,
-	$soft-close: true,
-	$thank-you-box: true
-);
-@use 'src/components/BannerConductor/banner-transition';
-@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
-@use 'src/themes/UseOfFunds/UseOfFunds';
-@use 'src/themes/Modo/defaults';
-@use 'Banner';
-@use 'MiniBanner' with (
-	$height: 336px,
-	$height-l-up: 306px
-);
-@use 'FullPageBanner';
-@use 'src/themes/Modo/Footer/Footer';
-@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
-@use 'src/themes/Modo/Footer/SelectionInput';
-@use 'src/themes/Modo/DonationForm/MultiStepDonation';
-@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
-@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
-@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
-@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
-@use 'src/themes/Modo/Slider/Slider';
-@use 'src/themes/Modo/SoftClose/SoftClose';
-@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
-@use 'src/themes/Modo/Message/Message';
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
index 570ee61ab..15ee4f808 100644
--- a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
@@ -72,7 +72,8 @@ describe( 'BannerCtrl.vue', () => {
 					currencyFormatter: new CurrencyDe(),
 					formItems,
 					tracker,
-					timer: timer ?? new TimerStub()
+					timer: timer ?? new TimerStub(),
+					currentCampaignTimePercentage: 42
 				}
 			}
 		} );

From 593515be0999703864bb55ecf6c29f9678e006b8 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Fri, 13 Dec 2024 12:51:01 +0100
Subject: [PATCH 3/3] Implement VAR for C24_WMDE_Mobile_DE_13

VAR has an auto-collapse feature

Ticket: https://phabricator.wikimedia.org/T381954
---
 .../C24_WMDE_Mobile_DE_13/banner_var.ts       |   4 +-
 .../components/BannerVar.vue                  |  54 +++-
 .../components/MinimisedBanner.vue            |  20 ++
 .../content/MinimisedText.vue                 |  10 +
 .../C24_WMDE_Mobile_DE_13/event_map_var.ts    |  36 +++
 .../styles/BannerVar.scss                     |  59 +++++
 .../styles/MinimisedBanner.scss               |  58 ++++
 .../styles/styles_var.scss                    |  30 +++
 .../useScrollMinimiser.ts                     |  21 ++
 docs/2025PostCampaignCleanUp.md               |  17 ++
 package-lock.json                             | 247 ++----------------
 src/components/Icons/InfoIconStraight.vue     |   2 +-
 src/components/Slider/KeenSlider.vue          |   4 +-
 src/themes/Modo/swatches/color_light.scss     |  20 +-
 src/themes/Modo/swatches/skin_default.scss    |   2 +
 .../components/BannerVar.spec.ts              |  15 +-
 test/components/Slider/KeenSlider.spec.ts     |  10 +
 test/features/AutoCollapseMobile.ts           | 122 +++++++++
 18 files changed, 478 insertions(+), 253 deletions(-)
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts
 create mode 100644 test/features/AutoCollapseMobile.ts

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
index 64233ae0a..639e571d3 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
@@ -1,6 +1,6 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles.scss';
+import './styles/styles_var.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
 import Banner from './components/BannerVar.vue';
@@ -16,7 +16,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
-import eventMappings from './event_map';
+import eventMappings from './event_map_var';
 import messages from './messages';
 import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 import { createFormItems } from './form_items';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
index 8b2c17d15..135877e1e 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
@@ -1,9 +1,10 @@
 <template>
 	<div class="wmde-banner-wrapper" :class="contentState">
 		<MiniBanner
+			v-if="contentState === ContentStates.Mini"
 			@close="onCloseMiniBanner"
-			@show-full-page-banner="onshowFullPageBanner"
-			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+			@show-full-page-banner="onShowFullPageBanner"
+			@show-full-page-banner-preselected="onShowFullPageBannerPreselected"
 		>
 			<template #banner-slides>
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
@@ -18,6 +19,12 @@
 			</template>
 		</MiniBanner>
 
+		<MinimisedBanner
+			v-if="contentState === ContentStates.Minimised"
+			@close="onCloseMinimisedBanner"
+			@show-full-page-banner="onShowFullPageBannerFromMinimised"
+		/>
+
 		<FullPageBanner
 			@showFundsModal="isFundsModalVisible = true"
 			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
@@ -151,9 +158,13 @@ import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
 import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
 import { Translator } from '@src/Translator';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+import MinimisedBanner from '@banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue';
+import { MinimisedEvent } from '@src/tracking/events/MinimisedEvent';
+import { useScrollMinimiser } from '@banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser';
 
 enum ContentStates {
 	Mini = 'wmde-banner-wrapper--mini',
+	Minimised = 'wmde-banner-wrapper--minimised',
 	FullPage = 'wmde-banner-wrapper--full-page',
 	SoftClosing = 'wmde-banner-wrapper--soft-closing'
 }
@@ -193,6 +204,16 @@ const localFormItemsBuilder = new FormItemsBuilder( localTranslator, currencyFor
 const amountOptionsFive = localFormItemsBuilder.setAmounts( 5, 15, 25, 50, 100 ).getItems().amounts;
 const amountOptionsTen = localFormItemsBuilder.setAmounts( 10, 15, 25, 50, 100 ).getItems().amounts;
 const amountOptionsForForm = ref<FormItem[]>( amountOptionsTen );
+const wasMinimised = ref<boolean>( false );
+
+useScrollMinimiser( 500, wasMinimised, () => {
+	if ( props.bannerState === BannerStates.Visible && contentState.value === ContentStates.Mini ) {
+		contentState.value = ContentStates.Minimised;
+		wasMinimised.value = true;
+		slideShowStopped.value = true;
+		tracker.trackEvent( new MinimisedEvent( 'MiniBanner', 'minimised' ) );
+	}
+} );
 
 watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
@@ -206,6 +227,14 @@ function onCloseMiniBanner(): void {
 	}
 }
 
+function onCloseMinimisedBanner(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MinimisedBanner', CloseChoices.Hide );
+	}
+}
+
 function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 	emit( 'modalClosed' );
@@ -224,24 +253,27 @@ const onSubmit = (): void => {
 	}
 };
 
-function onshowFullPageBanner(): void {
+function showFullPageBanner( fromFeature: string ): void {
 	slideShowStopped.value = true;
 	contentState.value = ContentStates.FullPage;
 	emit( 'modalOpened' );
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( fromFeature ) );
+}
 
+function onShowFullPageBanner(): void {
 	amountOptionsForForm.value = amountOptionsFive;
-
-	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+	showFullPageBanner( '' );
 }
 
-function onshowFullPageBannerPreselected(): void {
-	slideShowStopped.value = true;
-
+function onShowFullPageBannerPreselected(): void {
 	amountOptionsForForm.value = amountOptionsTen;
-
 	formModel.selectedAmount.value = '10';
-	contentState.value = ContentStates.FullPage;
-	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+	showFullPageBanner( 'preselected' );
+}
+
+function onShowFullPageBannerFromMinimised(): void {
+	amountOptionsForForm.value = amountOptionsFive;
+	showFullPageBanner( 'minimised' );
 }
 
 const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue
new file mode 100644
index 000000000..ec1e871db
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="wmde-banner-minimised">
+		<ButtonClose @close="$emit( 'close' )">
+			<span class="wmde-banner-close-icon">
+				<CloseIconMobile/>
+			</span>
+		</ButtonClose>
+
+		<MinimisedText @show-full-page-banner="$emit( 'showFullPageBanner' )"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+import MinimisedText from '@banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue';
+
+defineEmits( [ 'close', 'showFullPageBanner' ] );
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue
new file mode 100644
index 000000000..a893242e3
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue
@@ -0,0 +1,10 @@
+<template>
+	<InfoIconStraight/> Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+	<a class="wmde-banner-minimised-expand" href="#" @click.prevent="$emit( 'showFullPageBanner' )">Dann geben Sie jetzt etwas zurück!&nbsp;<HeartIcon/></a>
+</template>
+
+<script setup lang="ts">
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
+import HeartIcon from '@src/components/Icons/HeartIcon.vue';
+defineEmits( [ 'showFullPageBanner' ] );
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts
new file mode 100644
index 000000000..eb3a36efe
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts
@@ -0,0 +1,36 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+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 { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { MinimisedEvent } from '@src/tracking/events/MinimisedEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ MobileMiniBannerExpandedEvent.EVENT_NAME,
+		( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'MiniBanner':
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ MinimisedEvent.EVENT_NAME,
+		( e: MinimisedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + `-${ e.feature }-${ e.userChoice }`, 1 ) ]
+] );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss
new file mode 100644
index 000000000..b14cd2d2f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss
@@ -0,0 +1,59 @@
+@use 'src/themes/Modo/variables/globals';
+@use 'src/themes/Modo/variables/fonts';
+
+@keyframes hide-mini {
+	0% {
+		opacity: 1;
+	}
+	99% {
+		opacity: 0;
+	}
+	100% {
+		display: none;
+	}
+}
+
+.wmde-banner {
+
+	&-full {
+		visibility: hidden;
+		opacity: 0;
+		transform: scale( 1.1 );
+		transition: opacity 500ms globals.$banner-easing, transform 500ms globals.$banner-easing;
+	}
+
+	&-wrapper {
+		font-size: 16px;
+		font-family: fonts.$ui;
+		box-shadow: var( --mini-box-shadow );
+		background-color: var( --main-background );
+		color: var( --main-color );
+
+		&--full-page {
+			.wmde-banner-mini {
+				animation: hide-mini 500ms;
+			}
+			.wmde-banner-full {
+				visibility: visible;
+				opacity: 1;
+				transform: scale( 1 );
+			}
+		}
+
+		&--soft-closing {
+			.wmde-banner-minimised {
+				display: none;
+			}
+			.wmde-banner-mini {
+				display: none;
+			}
+		}
+	}
+
+	&--closed,
+	&--not-shown {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss
new file mode 100644
index 000000000..248511481
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss
@@ -0,0 +1,58 @@
+.wmde-banner {
+	&-minimised {
+		--info-icon-background: var( --minimised-info-background );
+		--info-icon-color: var( --minimised-info-color );
+
+		background: var( --minimised-background );
+		color: var( --minimised-color );
+		position: relative;
+		padding: 5px 36px 5px 10px;
+		font-size: 16px;
+		line-height: 1.8;
+
+		.wmde-banner-close {
+			all: unset;
+			border: 0;
+			position: absolute;
+			top: 0;
+			right: 0;
+			height: 36px;
+			width: 36px;
+			cursor: pointer;
+			text-align: center;
+
+			&-icon {
+				background: var( --minimised-close-background );
+				display: inline-block;
+				height: 20px;
+				width: 20px;
+				border-radius: 50%;
+			}
+
+			svg {
+				position: relative;
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				top: -5px;
+			}
+		}
+
+		a {
+			color: var( --minimised-link-color );
+			font-weight: bold;
+			svg {
+				position: relative;
+				top: 2px;
+				path {
+					fill: var( --minimised-link-color );
+				}
+			}
+		}
+	}
+
+	&-info-icon {
+		position: relative;
+		top: 2px;
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
new file mode 100644
index 000000000..0eb2d8f74
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
@@ -0,0 +1,30 @@
+@use 'src/themes/Modo/swatches/skin_default' with (
+	$minimised-banner: true,
+	$upgrade-to-yearly-button-form: true,
+	$double-progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Modo/defaults';
+@use 'BannerVar';
+@use 'MiniBanner' with (
+	$height: 336px,
+	$height-l-up: 306px
+);
+@use 'MinimisedBanner';
+@use 'FullPageBanner';
+@use 'src/themes/Modo/Footer/Footer';
+@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
+@use 'src/themes/Modo/Footer/SelectionInput';
+@use 'src/themes/Modo/DonationForm/MultiStepDonation';
+@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Modo/Slider/Slider';
+@use 'src/themes/Modo/SoftClose/SoftClose';
+@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Modo/Message/Message';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts
new file mode 100644
index 000000000..d25f66108
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts
@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted, Ref, watch } from 'vue';
+
+export function useScrollMinimiser( switchThreshold: number, hasMinimised: Ref<boolean>, onScrollBelowThreshold: () => void ): void {
+	const scrollHandler = (): void => {
+		if ( window.scrollY > switchThreshold ) {
+			onScrollBelowThreshold();
+		}
+	};
+
+	onMounted( () => {
+		window.addEventListener( 'scroll', scrollHandler );
+	} );
+
+	onUnmounted( () => {
+		window.removeEventListener( 'scroll', scrollHandler );
+	} );
+
+	watch( hasMinimised, () => {
+		window.removeEventListener( 'scroll', scrollHandler );
+	} );
+}
diff --git a/docs/2025PostCampaignCleanUp.md b/docs/2025PostCampaignCleanUp.md
index 1d96a52d2..c4e74db9d 100644
--- a/docs/2025PostCampaignCleanUp.md
+++ b/docs/2025PostCampaignCleanUp.md
@@ -146,3 +146,20 @@ Ex. If main banner uses double progress bar and FB banner uses progress bar alte
 So, somehow the progress bar on FB banner is dependant on progress bar on main banner.
 
 Could we make them fully independent of each other?
+
+## Fix Heart Icon & Thank You Box
+
+This has a CSS variable setting it's fill, which doesn't work. The fill attribute should be removed from the svg element, and the path changed to `style="fill: var( --heart-icon-fill )"`. Then in the mobile banner themes it should be set up in the thank you box CSS, something like:
+
+```css
+.thank-you-container {
+   --heart-icon-fill: var( --thank-you-box-color );
+}
+```
+Also the CSS that's currently in the Vue component should be moved or removed.
+
+### Files to look at
+- `src/components/Icons/HeartIcon.vue`
+- `src/themes/Modo/ThankYouBox/ThankYouBox.scss`
+- `src/themes/Mikings/ThankYouBox/ThankYouBox.scss`
+- `src/components/ThankYouBox/ThankYouBox.vue`
diff --git a/package-lock.json b/package-lock.json
index 3d5f71755..2a5858a67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2179,65 +2179,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
-      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.11.0.tgz",
@@ -2274,7 +2215,6 @@
       "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/types": "8.11.0",
         "@typescript-eslint/visitor-keys": "8.11.0"
@@ -2311,83 +2251,12 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
-      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@typescript-eslint/types": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
       "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -2402,7 +2271,6 @@
       "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/types": "8.11.0",
         "@typescript-eslint/visitor-keys": "8.11.0",
@@ -2448,100 +2316,12 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
-      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
-      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
       "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/types": "8.11.0",
         "eslint-visitor-keys": "^3.4.3"
@@ -2560,7 +2340,6 @@
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -6161,9 +5940,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6186,7 +5965,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -6201,6 +5980,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/debug": {
@@ -6637,7 +6420,7 @@
     },
     "node_modules/fundraising-frontend-content": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#23c5bb8aa1130d6d1a8ca95ce939e95e8751a5d2",
+      "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#9717c5dbc0a9d0c02a4b2a79c182640cd705490a",
       "license": "CC0-1.0"
     },
     "node_modules/get-intrinsic": {
@@ -8641,9 +8424,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -9337,9 +9120,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/src/components/Icons/InfoIconStraight.vue b/src/components/Icons/InfoIconStraight.vue
index 12c760f4d..ce1b61856 100644
--- a/src/components/Icons/InfoIconStraight.vue
+++ b/src/components/Icons/InfoIconStraight.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg class="wmde-banner-info-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<g clip-path="url(#clip0_2840_305)">
 			<circle cx="8" cy="8" r="8" style="fill: var( --info-icon-background );"/>
 			<path d="M8.8 5.73334V11.7173H10.2667V13.0667H5.96933V11.7173H7.33334V7.2H5.86667V5.73334H8.8ZM7.33334
diff --git a/src/components/Slider/KeenSlider.vue b/src/components/Slider/KeenSlider.vue
index bd0bb5288..022650a4d 100644
--- a/src/components/Slider/KeenSlider.vue
+++ b/src/components/Slider/KeenSlider.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, onMounted, ref, watch } from 'vue';
+import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
 import { KeenSliderOptions, useKeenSlider } from 'keen-slider/vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
@@ -128,4 +128,6 @@ onMounted( () => {
 	emit( 'slide-changed', currentSlide.value, slider.value.slides.length );
 } );
 
+onUnmounted( stopAutoplay );
+
 </script>
diff --git a/src/themes/Modo/swatches/color_light.scss b/src/themes/Modo/swatches/color_light.scss
index 2040e4e93..262d3bbf4 100644
--- a/src/themes/Modo/swatches/color_light.scss
+++ b/src/themes/Modo/swatches/color_light.scss
@@ -42,7 +42,10 @@ $purple100: #6b4ba1;
 $red200: #f17678;
 $red300: #ff5233;
 
+$pink100: #ff33f1;
+
 @mixin swatch(
+	$minimised-banner: false,
 	$address-type-button-form: false,
 	$upgrade-to-yearly-button-form: false,
 	$select-group-image-label: false,
@@ -129,11 +132,18 @@ $red300: #ff5233;
 	);
 	/* stylelint-enable */
 
-	--minimise-background: #{$grey100};
-	--minimise-fill: #{$blue600};
-	--maximise-fill: #{$blue600};
-	--minimise-color: #{$blue600};
-	--minimise-text-highlight-background: #{$yellow100};
+	@if $minimised-banner {
+		--minimised-background: #{$green800};
+		--minimised-color: #{$white};
+
+		--minimised-close-background: #{$grey50};
+
+		--minimised-link-color: #{$yellow200};
+		--minimised-link-shadow: #{$pink100};
+
+		--minimised-info-background: #{$yellow200};
+		--minimised-info-color: #{$black};
+	}
 
 	@if $address-type-button-form {
 		--address-type-button-form-notice-color: #{$grey700};
diff --git a/src/themes/Modo/swatches/skin_default.scss b/src/themes/Modo/swatches/skin_default.scss
index 0ea568f4a..b2badbed7 100644
--- a/src/themes/Modo/swatches/skin_default.scss
+++ b/src/themes/Modo/swatches/skin_default.scss
@@ -1,5 +1,6 @@
 @use 'color_light';
 
+$minimised-banner: false !default;
 $address-type-button-form: false !default;
 $upgrade-to-yearly-button-form: false !default;
 $select-group-image-label: false !default;
@@ -11,6 +12,7 @@ $thank-you-box: false !default;
 
 .wmde-banner {
 	@include color_light.swatch(
+		$minimised-banner,
 		$address-type-button-form,
 		$upgrade-to-yearly-button-form,
 		$select-group-image-label,
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
index 99fff7c95..050df56fa 100644
--- a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
@@ -21,6 +21,7 @@ import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } f
 import { softCloseSubmitTrackingFeatures } from '@test/features/SoftCloseSubmitTracking';
 import { Timer } from '@src/utils/Timer';
 import { TimerStub } from '@test/fixtures/TimerStub';
+import { autoCollapseFeatures } from '@test/features/AutoCollapseMobile';
 
 let pageScroller: PageScroller;
 let tracker: Tracker;
@@ -164,7 +165,6 @@ describe( 'BannerVar.vue', () => {
 	describe( 'Mini Banner', () => {
 		test.each( [
 			[ 'expectSlideShowPlaysWhenMiniBannerBecomesVisible' ],
-			[ 'expectSlideShowStopsWhenFullBannerBecomesVisible' ],
 			[ 'expectShowsFullPageWhenCallToActionIsClicked' ],
 			[ 'expectEmitsBannerContentChangedEventWhenCallToActionIsClicked' ]
 		] )( '%s', async ( testName: string ) => {
@@ -172,6 +172,19 @@ describe( 'BannerVar.vue', () => {
 		} );
 	} );
 
+	describe( 'Minimised Banner', () => {
+		test.each( [
+			[ 'expectAutoCollapsesTheMiniBanner' ],
+			[ 'expectTracksAutoCollapse' ],
+			[ 'expectRemovesEventListenerWhenCollapsed' ],
+			[ 'expectGoesToSoftCloseFromMinimised' ],
+			[ 'expectGoesToFullPageFromMinimised' ],
+			[ 'expectTracksExpandingToFullPage' ]
+		] )( '%s', async ( testName: string ) => {
+			await autoCollapseFeatures[ testName ]( getWrapper, tracker );
+		} );
+	} );
+
 	describe( 'Full Page Banner', () => {
 		test.each( [
 			[ 'expectEmitsCloseEvent' ],
diff --git a/test/components/Slider/KeenSlider.spec.ts b/test/components/Slider/KeenSlider.spec.ts
index 199937e9f..435ec0026 100644
--- a/test/components/Slider/KeenSlider.spec.ts
+++ b/test/components/Slider/KeenSlider.spec.ts
@@ -168,4 +168,14 @@ describe( 'KeenSlider', () => {
 
 		expect( wrapper.find( '.wmde-banner-slider--stopped' ).exists() ).toBeTruthy();
 	} );
+
+	it( 'should stop the auto play when unmounted', async () => {
+		const timerSpy = new TimerSpy();
+		const wrapper = getWrapper( timerSpy );
+		await wrapper.setProps( { play: true } );
+		wrapper.unmount();
+
+		expect( timerSpy.clearIntervalIds ).toStrictEqual( [ 0 ] );
+		expect( timerSpy.clearTimeoutIds ).toStrictEqual( [ 0 ] );
+	} );
 } );
diff --git a/test/features/AutoCollapseMobile.ts b/test/features/AutoCollapseMobile.ts
new file mode 100644
index 000000000..30817ef8b
--- /dev/null
+++ b/test/features/AutoCollapseMobile.ts
@@ -0,0 +1,122 @@
+import { VueWrapper } from '@vue/test-utils';
+import { Tracker } from '@src/tracking/Tracker';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { nextTick } from 'vue';
+import { expect, vi } from 'vitest';
+import { MinimisedEvent } from '@src/tracking/events/MinimisedEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+
+const expectAutoCollapsesTheMiniBanner = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 400 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+
+	scrollCallback();
+	await nextTick();
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--mini' );
+
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	scrollCallback();
+	await nextTick();
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--minimised' );
+};
+
+const expectTracksAutoCollapse = async ( getWrapper: () => VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	expect( tracker.trackEvent ).toHaveBeenCalledWith( new MinimisedEvent( 'MiniBanner', 'minimised' ) );
+};
+
+const expectRemovesEventListenerWhenCollapsed = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	const removeEventListener = vi.fn();
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+	Object.defineProperty( window, 'removeEventListener', { writable: true, configurable: true, value: removeEventListener } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+
+	scrollCallback();
+	await nextTick();
+
+	expect( removeEventListener ).toHaveBeenCalledWith( 'scroll', scrollCallback );
+};
+
+const expectGoesToSoftCloseFromMinimised = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	await wrapper.find( '.wmde-banner-minimised .wmde-banner-close' ).trigger( 'click' );
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--soft-closing' );
+};
+
+const expectGoesToFullPageFromMinimised = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	await wrapper.find( '.wmde-banner-minimised-expand' ).trigger( 'click' );
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--full-page' );
+};
+
+const expectTracksExpandingToFullPage = async ( getWrapper: () => VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	await wrapper.find( '.wmde-banner-minimised-expand' ).trigger( 'click' );
+
+	expect( tracker.trackEvent ).toHaveBeenCalledWith( new MobileMiniBannerExpandedEvent( 'minimised' ) );
+};
+
+export const autoCollapseFeatures: Record<string, ( getWrapper: () => VueWrapper<any>, tracker: Tracker ) => Promise<any>> = {
+	expectAutoCollapsesTheMiniBanner,
+	expectTracksAutoCollapse,
+	expectRemovesEventListenerWhenCollapsed,
+	expectGoesToSoftCloseFromMinimised,
+	expectGoesToFullPageFromMinimised,
+	expectTracksExpandingToFullPage
+};