From c6485d7000aa7c98d0a610f0f3e8f0d5e5bce89f Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Thu, 20 Jun 2024 17:36:49 +0200
Subject: [PATCH] Change CTRL banner for precampaign

 The first slide is removed from both banners.
The feature of redirecting users directly to the payment providers is removed in both banners.
The soft-close feature is removed/not used in both banners.
The progress bar is removed from the modal/expanded banner in both banners.
The campaign day sentence is removed/not used in both banners.
The visitors-vs-donors sentence is removed/replaced in both banners.
broken styles are fixed (wikipedia skin introduced some weird borders)
The banners share the same height with the banner they are based on.

https://phabricator.wikimedia.org/T366161
---
 .../C24_WMDE_Mobile_DE_01/banner_var.ts       |   2 +-
 .../components/BannerCtrl.vue                 |  53 +-----
 .../components/BannerVar.vue                  | 163 ++++++++++++++++++
 .../components/FullPageBanner.vue             |   1 -
 .../components/MiniBanner.vue                 |   1 -
 .../content/BannerSlides.vue                  |  25 +--
 .../content/BannerText.vue                    |  17 +-
 .../content/BannerTextVar.vue                 |  49 ++++++
 .../mobile/C24_WMDE_Mobile_DE_01/messages.ts  |   2 -
 .../styles/FullPageBanner.scss                |   1 +
 .../styles/MiniBanner.scss                    |   2 +
 .../C24_WMDE_Mobile_DE_01/styles/styles.scss  |   2 -
 .../DonationForm/MultiStepDonation.scss       |   1 +
 13 files changed, 234 insertions(+), 85 deletions(-)
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerVar.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerTextVar.vue

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_01/banner_var.ts
index afa1c1148..a316249ea 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/banner_var.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/banner_var.ts
@@ -3,7 +3,7 @@ import { createVueApp } from '@src/createVueApp';
 import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
-import Banner from './components/BannerCtrl.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';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerCtrl.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerCtrl.vue
index b2229faf5..16b79b845 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerCtrl.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerCtrl.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="wmde-banner-wrapper" :class="contentState">
 		<MiniBanner
-			@close="onCloseMiniBanner"
+			@close="onClose( 'MiniBanner', CloseChoices.Hide )"
 			@show-full-page-banner="onshowFullPageBanner"
 			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
 		>
@@ -24,10 +24,6 @@
 				<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">
 
@@ -63,32 +59,6 @@
 			</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.NoMoreBannersForCampaign )">
-					{{ $translate( 'soft-close-button-already-donated' ) }}
-				</button>
-			</template>
-		</SoftClose>
-
 		<FundsModal
 			:content="useOfFundsContent"
 			:is-funds-modal-visible="isFundsModalVisible"
@@ -99,7 +69,6 @@
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import { computed, inject, ref, watch } from 'vue';
 import FullPageBanner from './FullPageBanner.vue';
 import MiniBanner from './MiniBanner.vue';
@@ -121,7 +90,6 @@ 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 ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MainDonationFormPaymentMethodLabeledButton
 	from '@src/components/DonationForm/Forms/MainDonationFormPaymentMethodLabeledButton.vue';
 import {
@@ -130,12 +98,10 @@ import {
 import {
 	createSubmittableUpgradeToYearly
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
-import { useAnonymousAddressTypeSetter } from '@src/components/composables/useAnonymousAddressTypeSetter';
 
 enum ContentStates {
 	Mini = 'wmde-banner-wrapper--mini',
-	FullPage = 'wmde-banner-wrapper--full-page',
-	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+	FullPage = 'wmde-banner-wrapper--full-page'
 }
 
 enum FormStepNames {
@@ -165,29 +131,14 @@ const stepControllers = [
 	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
 
-useAnonymousAddressTypeSetter();
-
 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 ) );
 }
 
-function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
-	window.clearInterval( timer );
-	onClose( feature, userChoice );
-}
-
 function onshowFullPageBanner(): void {
 	slideShowStopped.value = true;
 	contentState.value = ContentStates.FullPage;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerVar.vue
new file mode 100644
index 000000000..14a8891f1
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/components/BannerVar.vue
@@ -0,0 +1,163 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onClose( 'MiniBanner', CloseChoices.Hide )"
+			@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 #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :page-scroller="pageScroller">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #button>
+								<MainDonationFormPaymentMethodLabeledButton/>
+							</template>
+
+						</MainDonationForm>
+					</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>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		/>
+	</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 MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerTextVar.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 MainDonationFormPaymentMethodLabeledButton
+	from '@src/components/DonationForm/Forms/MainDonationFormPaymentMethodLabeledButton.vue';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+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 )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+}
+
+function onshowFullPageBannerPreselected(): void {
+	slideShowStopped.value = true;
+	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_01/components/FullPageBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/components/FullPageBanner.vue
index 89eb818a4..973467b02 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/components/FullPageBanner.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/components/FullPageBanner.vue
@@ -6,7 +6,6 @@
 		<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.
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/components/MiniBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/components/MiniBanner.vue
index 851c00022..b8d3ea00a 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/components/MiniBanner.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/components/MiniBanner.vue
@@ -14,7 +14,6 @@
 
 		<div class="wmde-banner-mini-slideshow">
 			<slot name="banner-slides"/>
-			<slot name="progress"/>
 		</div>
 
 		<div class="wmde-banner-mini-button-group">
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerSlides.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerSlides.vue
index ffc10c1c8..fb14a32ff 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerSlides.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerSlides.vue
@@ -1,11 +1,5 @@
 <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"/>
-		<p>Die Zeit wird knapp!</p>
-	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>
 			<strong>Hi,</strong><br>
@@ -17,23 +11,22 @@
 
 	<KeenSliderSlide :is-current="currentSlide === 2">
 		<p>
-			Insgesamt spenden 99% nichts - sie übergehen diesen Aufruf. Die durchschnittliche Spende beträgt
-			22,25&nbsp;€, doch bereits 10&nbsp;€ helfen uns weiter.
+			<AnimatedText :content="'Millionen Menschen nutzen Wikipedia, aber 99 % spenden nicht – sie übergehen diesen Aufruf.'"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
 		</p>
 	</KeenSliderSlide>
 
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>
-			{{ campaignDaySentence }}
-			<AnimatedText :content="visitorsVsDonorsSentence"/>
-			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+			Die durchschnittliche Spende beträgt 22,25&nbsp;€, doch bereits 5&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>
-			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!
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+			<strong> Vielen Dank!</strong>
 		</p>
 	</KeenSliderSlide>
 
@@ -43,7 +36,6 @@
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, watch } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
-import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
 
@@ -56,10 +48,7 @@ const props = defineProps<Props>();
 
 const {
 	currentDayName,
-	getCurrentDateAndTime,
-	goalDonationSum,
-	visitorsVsDonorsSentence,
-	campaignDaySentence
+	getCurrentDateAndTime
 }: DynamicContent = inject( 'dynamicCampaignText' );
 
 const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerText.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerText.vue
index 969c1cc04..b7ea77d24 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerText.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerText.vue
@@ -8,11 +8,13 @@
 				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 bescheiden, die Unabhängigkeit von
-				Wikipedia zu unterstützen. Insgesamt spenden 99% nichts - sie übergehen diesen Aufruf. Die
-				durchschnittliche Spende beträgt 22,25&nbsp;€, doch bereits 10&nbsp;€ helfen uns weiter. {{ campaignDaySentence }}
-				<AnimatedText :content="visitorsVsDonorsSentence"/> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. 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!
+				Wikipedia zu unterstützen.
+				Millionen Menschen nutzen Wikipedia, aber 99 % spenden nicht – sie übergehen diesen Aufruf.
+				Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+				Die durchschnittliche Spende beträgt 22,25&nbsp;€, doch bereits 5&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.
+				<strong>Vielen Dank!</strong>
 			</p>
 		</div>
 	</div>
@@ -21,7 +23,6 @@
 <script setup lang="ts">
 import { inject, watch } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
 
 interface Props {
@@ -32,9 +33,7 @@ const props = defineProps<Props>();
 
 const {
 	currentDayName,
-	getCurrentDateAndTime,
-	visitorsVsDonorsSentence,
-	campaignDaySentence
+	getCurrentDateAndTime
 }: DynamicContent = inject( 'dynamicCampaignText' );
 
 const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerTextVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerTextVar.vue
new file mode 100644
index 000000000..b7ea77d24
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/content/BannerTextVar.vue
@@ -0,0 +1,49 @@
+<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 bescheiden, die Unabhängigkeit von
+				Wikipedia zu unterstützen.
+				Millionen Menschen nutzen Wikipedia, aber 99 % spenden nicht – sie übergehen diesen Aufruf.
+				Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+				Die durchschnittliche Spende beträgt 22,25&nbsp;€, doch bereits 5&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.
+				<strong>Vielen Dank!</strong>
+			</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';
+
+interface Props {
+	playLiveText: boolean;
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime
+}: 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_01/messages.ts b/banners/mobile/C24_WMDE_Mobile_DE_01/messages.ts
index 13815c5ec..2c3aee789 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/messages.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/messages.ts
@@ -2,7 +2,6 @@ import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/Cust
 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 SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
 import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de';
 import FooterDe from '@src/components/Footer/messages/Footer.de';
 import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
@@ -11,7 +10,6 @@ const messages: TranslationMessages = {
 	...CustomAmountFormDe,
 	...DynamicCampaignTextDe,
 	...UpgradeToYearlyDe,
-	...SoftCloseDe,
 	...AddressFormDe,
 	...FooterDe,
 	...MainDonationFormDe,
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/styles/FullPageBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_01/styles/FullPageBanner.scss
index a774cc686..4c6f72e7a 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/styles/FullPageBanner.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/styles/FullPageBanner.scss
@@ -31,6 +31,7 @@
 			padding: 5px;
 			background: colors.$white;
 			z-index: 99;
+			border: none;
 			border-radius: 50%;
 
 			&:hover {
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/styles/MiniBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_01/styles/MiniBanner.scss
index 28c483f6e..7aa2ecc2b 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/styles/MiniBanner.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/styles/MiniBanner.scss
@@ -26,6 +26,7 @@ $height: 288px !default;
 			z-index: 2;
 
 			&-button {
+				border: none;
 				margin-top: auto;
 				float: right;
 				height: 16px;
@@ -108,6 +109,7 @@ $height: 288px !default;
 		&-button-preselect {
 			width: 50%;
 			height: 40px;
+			border: none;
 			border-radius: 20px;
 			font-weight: bold;
 			color: colors.$white;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_01/styles/styles.scss b/banners/mobile/C24_WMDE_Mobile_DE_01/styles/styles.scss
index f2973034a..84ebb2865 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_01/styles/styles.scss
+++ b/banners/mobile/C24_WMDE_Mobile_DE_01/styles/styles.scss
@@ -17,5 +17,3 @@
 	$pagination-padding: 10px,
 	$pagination-height: 40px
 );
-@use 'src/themes/Mikings/SoftClose/SoftClose';
-@use 'src/themes/Mikings/ProgressBar/ProgressBar';
diff --git a/src/themes/Mikings/DonationForm/MultiStepDonation.scss b/src/themes/Mikings/DonationForm/MultiStepDonation.scss
index 9a7cc0471..2eca02040 100644
--- a/src/themes/Mikings/DonationForm/MultiStepDonation.scss
+++ b/src/themes/Mikings/DonationForm/MultiStepDonation.scss
@@ -8,6 +8,7 @@
 		height: auto;
 
 		&-field-group {
+			border: none;
 			padding: 0;
 			margin: 0;
 		}