From 3f88a6a7171046c8d89e239ee1fbd257f8760e78 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Mon, 28 Aug 2023 11:59:15 +0200
Subject: [PATCH 1/3] Archive C23_WMDE_Desktop_DE_03

---
 .../C23_WMDE_Desktop_DE_03/banner_ctrl.ts     |  65 +++++++++
 .../C23_WMDE_Desktop_DE_03/banner_var.ts      |  65 +++++++++
 .../components/BannerCtrl.vue                 | 128 ++++++++++++++++++
 .../components/BannerVar.vue                  | 128 ++++++++++++++++++
 .../components/MainBanner.vue                 |  44 ++++++
 .../content/BannerSlides.vue                  |  52 +++++++
 .../content/BannerText.vue                    |  35 +++++
 .../C23_WMDE_Desktop_DE_03/event_map.ts       |  33 +++++
 .../C23_WMDE_Desktop_DE_03/form_items.ts      |  23 ++++
 .../C23_WMDE_Desktop_DE_03/messages.ts        |  20 +++
 .../C23_WMDE_Desktop_DE_03/styles/Banner.scss |  17 +++
 .../styles/MainBanner.scss                    |  45 ++++++
 .../C23_WMDE_Desktop_DE_03/styles/styles.scss |  26 ++++
 13 files changed, 681 insertions(+)
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/banner_ctrl.ts
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/banner_var.ts
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerCtrl.vue
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerVar.vue
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/components/MainBanner.vue
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerSlides.vue
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerText.vue
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/event_map.ts
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/form_items.ts
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/messages.ts
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/styles/Banner.scss
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/styles/MainBanner.scss
 create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_03/styles/styles.scss

diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_03/banner_ctrl.ts
new file mode 100644
index 000000000..4e302f651
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/banner_ctrl.ts
@@ -0,0 +1,65 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import getBannerDelay from '@src/utils/getBannerDelay';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { ast: '0' } ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_03/banner_var.ts
new file mode 100644
index 000000000..6fda1ba0b
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/banner_var.ts
@@ -0,0 +1,65 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import getBannerDelay from '@src/utils/getBannerDelay';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent()
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { ast: '2' } ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerCtrl.vue b/archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerCtrl.vue
new file mode 100644
index 000000000..12057fe13
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerCtrl.vue
@@ -0,0 +1,128 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@close="onCloseMain"
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
+
+                    <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+                        <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+                    </template>
+
+                    <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+                        <UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+                    </template>
+
+                    <template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+                        <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+                    </template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true" />
+			</template>
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ref, watch } from 'vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
+import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	CustomAmountFormStep = 'CustomAmountForm',
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+}
+
+defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
+	createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMain(): void {
+	contentState.value = ContentStates.SoftClosing;
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerVar.vue b/archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerVar.vue
new file mode 100644
index 000000000..12057fe13
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/components/BannerVar.vue
@@ -0,0 +1,128 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@close="onCloseMain"
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
+
+                    <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+                        <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+                    </template>
+
+                    <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+                        <UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+                    </template>
+
+                    <template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+                        <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+                    </template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true" />
+			</template>
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ref, watch } from 'vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerText.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
+import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	CustomAmountFormStep = 'CustomAmountForm',
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+}
+
+defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
+	createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMain(): void {
+	contentState.value = ContentStates.SoftClosing;
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/components/MainBanner.vue b/archive/desktop/C23_WMDE_Desktop_DE_03/components/MainBanner.vue
new file mode 100644
index 000000000..514b897c9
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/components/MainBanner.vue
@@ -0,0 +1,44 @@
+<template>
+	<div class="wmde-banner-main">
+		<ButtonClose @close="$emit( 'close' )"/>
+		<div class="wmde-banner-content">
+			<div class="wmde-banner-column-left">
+				<slot name="banner-text" v-if="onLargeScreen"/>
+				<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
+			</div>
+			<div class="wmde-banner-column-right">
+				<slot name="donation-form" :form-interaction="onFormInteraction"/>
+			</div>
+		</div>
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
+import { computed, nextTick, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+
+interface Props {
+	bannerState: BannerStates;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'close', 'formInteraction' ] );
+
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+
+const onLargeScreen = useDisplaySwitch( 1300 );
+
+const onFormInteraction = (): void => {
+	slideShowStopped.value = true;
+
+	nextTick( () => {
+		emit( 'formInteraction' );
+	} );
+};
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerSlides.vue b/archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerSlides.vue
new file mode 100644
index 000000000..a47309ef6
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerSlides.vue
@@ -0,0 +1,52 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<InfoIcon fill="#990a00"/> <strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+		</p>
+		<p>
+			Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg!
+			Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			<span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99&nbsp;% spenden
+			nicht – sie übergehen diesen Aufruf.</span>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			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 === 3">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { computed, inject } from 'vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' );
+
+const currentDate = computed( () => {
+	return new Intl.DateTimeFormat( 'de-DE', {
+		day: '2-digit',
+		month: 'long'
+	} ).format( new Date() );
+} );
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerText.vue b/archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerText.vue
new file mode 100644
index 000000000..4698ece35
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/content/BannerText.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/>
+				<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+			</p>
+			<p>
+				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+				heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu
+				unterstützen. <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia,
+				aber 99&nbsp;% spenden nicht – sie übergehen diesen Aufruf.</span> 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. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' );
+
+const currentDate = computed( () => {
+	return new Intl.DateTimeFormat( 'de-DE', {
+		day: '2-digit',
+		month: 'long'
+	} ).format( new Date() );
+} );
+
+</script>
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/event_map.ts b/archive/desktop/C23_WMDE_Desktop_DE_03/event_map.ts
new file mode 100644
index 000000000..a090330ce
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/event_map.ts
@@ -0,0 +1,33 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
+import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
+import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ CustomAmountChangedEvent.EVENT_NAME,
+		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
+	],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, null, 1 );
+			case 'CustomAmountForm':
+				return new WMDESizeIssueEvent( `submit-different-amount`, null, 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, null, 1 );
+		}
+	} ]
+	// TODO add more events
+] );
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/form_items.ts b/archive/desktop/C23_WMDE_Desktop_DE_03/form_items.ts
new file mode 100644
index 000000000..b70650d19
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/form_items.ts
@@ -0,0 +1,23 @@
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
+
+export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
+	return new FormItemsBuilder( translations, amountFormatter )
+		.setIntervals(
+			Intervals.ONCE,
+			Intervals.MONTHLY,
+			Intervals.QUARTERLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.BANK_TRANSFER,
+			PaymentMethods.CREDIT_CARD,
+			PaymentMethods.DIRECT_DEBIT
+		).getItems();
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/messages.ts b/archive/desktop/C23_WMDE_Desktop_DE_03/messages.ts
new file mode 100644
index 000000000..50cb6d5bc
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/messages.ts
@@ -0,0 +1,20 @@
+import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/CustomAmountForm.de';
+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';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormDe,
+	...DynamicCampaignTextDe,
+	...UpgradeToYearlyDe,
+	...SoftCloseDe,
+	...AddressFormDe,
+	...FooterDe,
+	...MainDonationFormDe
+};
+
+export default messages;
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/styles/Banner.scss b/archive/desktop/C23_WMDE_Desktop_DE_03/styles/Banner.scss
new file mode 100644
index 000000000..06e30756a
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/styles/Banner.scss
@@ -0,0 +1,17 @@
+@use 'src/themes/Treedip/variables/fonts';
+@use 'src/themes/Treedip/variables/colors';
+
+.wmde-banner {
+	&-wrapper {
+		font-size: 14px;
+		font-family: fonts.$ui;
+		box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+		background-color: colors.$white;
+	}
+
+	&--closed {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/styles/MainBanner.scss b/archive/desktop/C23_WMDE_Desktop_DE_03/styles/MainBanner.scss
new file mode 100644
index 000000000..c328cbca9
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/styles/MainBanner.scss
@@ -0,0 +1,45 @@
+@use 'src/themes/Treedip/variables/colors';
+
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		padding: 0 15px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		margin-bottom: 0;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		border: 5px solid colors.$primary;
+		border-radius: 9px;
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 10px 0;
+	}
+}
diff --git a/archive/desktop/C23_WMDE_Desktop_DE_03/styles/styles.scss b/archive/desktop/C23_WMDE_Desktop_DE_03/styles/styles.scss
new file mode 100644
index 000000000..1a74e5de6
--- /dev/null
+++ b/archive/desktop/C23_WMDE_Desktop_DE_03/styles/styles.scss
@@ -0,0 +1,26 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/components/BannerConductor/banner-transition';
+@use 'Banner';
+@use 'MainBanner' with (
+	$banner-height: 357px,
+	$form-width: 300px
+);
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose';
+@use 'src/themes/Treedip/DonationForm/DonationForm';
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyForm';
+@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/Footer/BannerFooter' with (
+	$right-column-width: 300px
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message';
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/SoftClose/SoftClose';

From 78b7ce06a67dddd3952dde20a9fb79afc138ae61 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Mon, 28 Aug 2023 12:06:37 +0200
Subject: [PATCH 2/3] Prepare camapign for C23_WMDE_Desktop_04

- text changes in both banners
- based on desktop DE 03
- custom amount form page is removed from both banners, link leads back to mainpage

- fix feature tests

https://phabricator.wikimedia.org/T344423
---
 banners/desktop/banner_var.ts                 |  2 +-
 banners/desktop/components/BannerCtrl.vue     |  4 +-
 banners/desktop/components/BannerVar.vue      | 26 +++++-----
 banners/desktop/content/BannerSlides_var.vue  | 52 +++++++++++++++++++
 banners/desktop/content/BannerText_var.vue    | 35 +++++++++++++
 campaign_info.toml                            | 14 ++---
 .../Forms/messages/MainDonationForm.de.ts     |  2 +-
 .../Footer/FooterAlreadyDonated.vue           |  2 +-
 .../desktop/components/BannerCtrl.spec.ts     |  5 +-
 .../desktop/components/BannerVar.spec.ts      |  4 +-
 .../forms/MainDonation_UpgradeToYearlyLink.ts | 47 +++++++++++++++++
 11 files changed, 161 insertions(+), 32 deletions(-)
 create mode 100644 banners/desktop/content/BannerSlides_var.vue
 create mode 100644 banners/desktop/content/BannerText_var.vue
 create mode 100644 test/features/forms/MainDonation_UpgradeToYearlyLink.ts

diff --git a/banners/desktop/banner_var.ts b/banners/desktop/banner_var.ts
index 6fda1ba0b..dca3bd8a7 100644
--- a/banners/desktop/banner_var.ts
+++ b/banners/desktop/banner_var.ts
@@ -59,7 +59,7 @@ const currencyFormatter = localeFactory.getCurrencyFormatter();
 
 app.provide( 'currencyFormatter', currencyFormatter );
 app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
-app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { ast: '2' } ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { ast: '0' } ) );
 app.provide( 'tracker', tracker );
 
 app.mount( page.getBannerContainer() );
diff --git a/banners/desktop/components/BannerCtrl.vue b/banners/desktop/components/BannerCtrl.vue
index 12057fe13..45b091a17 100644
--- a/banners/desktop/components/BannerCtrl.vue
+++ b/banners/desktop/components/BannerCtrl.vue
@@ -80,7 +80,6 @@ import {
 import {
 	createSubmittableUpgradeToYearly
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
-import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
@@ -109,8 +108,7 @@ const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
 	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
-	createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
-	createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
 
 watch( contentState, async () => {
diff --git a/banners/desktop/components/BannerVar.vue b/banners/desktop/components/BannerVar.vue
index 12057fe13..3a861859c 100644
--- a/banners/desktop/components/BannerVar.vue
+++ b/banners/desktop/components/BannerVar.vue
@@ -23,17 +23,17 @@
 			<template #donation-form="{ formInteraction }: any">
 				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
-                    <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-                        <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-                    </template>
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
 
-                    <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-                        <UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-                    </template>
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
 
-                    <template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-                        <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-                    </template>
+					<template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
 
 				</MultiStepDonation>
 			</template>
@@ -65,8 +65,8 @@ import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/Use
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
-import BannerText from '../content/BannerText.vue';
-import BannerSlides from '../content/BannerSlides.vue';
+import BannerText from '../content/BannerText_var.vue';
+import BannerSlides from '../content/BannerSlides_var.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
@@ -80,7 +80,6 @@ import {
 import {
 	createSubmittableUpgradeToYearly
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
-import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
@@ -109,8 +108,7 @@ const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
 	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
-	createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
-	createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
 
 watch( contentState, async () => {
diff --git a/banners/desktop/content/BannerSlides_var.vue b/banners/desktop/content/BannerSlides_var.vue
new file mode 100644
index 000000000..a47309ef6
--- /dev/null
+++ b/banners/desktop/content/BannerSlides_var.vue
@@ -0,0 +1,52 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p class="headline">
+			<InfoIcon fill="#990a00"/> <strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+		</p>
+		<p>
+			Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg!
+			Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			<span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99&nbsp;% spenden
+			nicht – sie übergehen diesen Aufruf.</span>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			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 === 3">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { computed, inject } from 'vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' );
+
+const currentDate = computed( () => {
+	return new Intl.DateTimeFormat( 'de-DE', {
+		day: '2-digit',
+		month: 'long'
+	} ).format( new Date() );
+} );
+
+</script>
diff --git a/banners/desktop/content/BannerText_var.vue b/banners/desktop/content/BannerText_var.vue
new file mode 100644
index 000000000..4698ece35
--- /dev/null
+++ b/banners/desktop/content/BannerText_var.vue
@@ -0,0 +1,35 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				<InfoIcon fill="#990a00"/>
+				<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+			</p>
+			<p>
+				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+				heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu
+				unterstützen. <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia,
+				aber 99&nbsp;% spenden nicht – sie übergehen diesen Aufruf.</span> 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. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' );
+
+const currentDate = computed( () => {
+	return new Intl.DateTimeFormat( 'de-DE', {
+		day: '2-digit',
+		month: 'long'
+	} ).format( new Date() );
+} );
+
+</script>
diff --git a/campaign_info.toml b/campaign_info.toml
index 8d47076b3..fd4d13e19 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -6,9 +6,9 @@
 [desktop]
 name = "Desktop"
 icon = "desktop"
-campaign = "C23_WMDE_Desktop_DE_03"
-description = "Address type options test on the Fundraising Application"
-campaign_tracking = "03-ba-230810"
+campaign = "C23_WMDE_Desktop_DE_04"
+description = "Small text changes, Custom Amount Form Page is removed from both banners."
+campaign_tracking = "04-ba-230828"
 preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
 preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode'
 wrapper_template = "wikipedia_org"
@@ -17,13 +17,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE"
 # Banners of the campaign, key after "banners" can be anything
 [desktop.banners.ctrl]
 filename = "./banners/desktop/banner_ctrl.ts"
-pagename = "B23_WMDE_Desktop_DE_03_ctrl"
-tracking = "org-03-230810-ctrl"
+pagename = "B23_WMDE_Desktop_DE_04_ctrl"
+tracking = "org-04-230828-ctrl"
 
 [desktop.banners.var]
 filename = "./banners/desktop/banner_var.ts"
-pagename = "B23_WMDE_Desktop_DE_03_var"
-tracking = "org-03-230810-var"
+pagename = "B23_WMDE_Desktop_DE_04_var"
+tracking = "org-04-230828-var"
 
 [desktop.test_matrix]
 platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
diff --git a/src/components/DonationForm/Forms/messages/MainDonationForm.de.ts b/src/components/DonationForm/Forms/messages/MainDonationForm.de.ts
index 9aa5b2559..4a138a159 100644
--- a/src/components/DonationForm/Forms/messages/MainDonationForm.de.ts
+++ b/src/components/DonationForm/Forms/messages/MainDonationForm.de.ts
@@ -27,7 +27,7 @@ const translations: TranslationMessages = {
 	'interval-yearly': 'jährlich',
 
 	'payment-direct-debit': 'Lastschrift',
-	'payment-bank-transfer': 'Überweisung',
+	'payment-bank-transfer': 'Banküberweisung',
 	'payment-credit-card': 'Kreditkarte',
 	'payment-paypal': 'PayPal',
 	'payment-sofort': 'Sofortüberweisung'
diff --git a/src/components/Footer/FooterAlreadyDonated.vue b/src/components/Footer/FooterAlreadyDonated.vue
index 6f0d6137a..fcc92791e 100644
--- a/src/components/Footer/FooterAlreadyDonated.vue
+++ b/src/components/Footer/FooterAlreadyDonated.vue
@@ -5,7 +5,7 @@
                 <TickIcon :fill="'#5B5B5B'"/> {{ $translate( 'already-donated-open-link' ) }}
             </a>
             <label class="wmde-banner-footer-bank-item account">{{ $translate( 'donation-account' ) }}:
-                <SelectionInput :value="'Wikimedia'"/>
+                <SelectionInput :value="'Wikimedia e. V.'"/>
             </label>
             <label class="wmde-banner-footer-bank-item bic">BIC:
                 <SelectionInput :value="'BFSWDE33BER'"/>
diff --git a/test/banners/desktop/components/BannerCtrl.spec.ts b/test/banners/desktop/components/BannerCtrl.spec.ts
index ad8674b38..db5cd10c1 100644
--- a/test/banners/desktop/components/BannerCtrl.spec.ts
+++ b/test/banners/desktop/components/BannerCtrl.spec.ts
@@ -14,7 +14,7 @@ import {
 	bannerContentDisplaySwitchFeatures,
 	bannerContentFeatures
 } from '@test/features/BannerContent';
-import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearly_CustomAmount';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyLink';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
@@ -91,8 +91,7 @@ describe( 'BannerCtrl.vue', () => {
 			[ 'expectMainDonationFormGoesToUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
-			[ 'expectUpgradeToYearlyFormGoesToCustomAmount' ],
-			[ 'expectCustomAmountFormSubmits' ]
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );
diff --git a/test/banners/desktop/components/BannerVar.spec.ts b/test/banners/desktop/components/BannerVar.spec.ts
index ef8d1c8b9..c9da4e808 100644
--- a/test/banners/desktop/components/BannerVar.spec.ts
+++ b/test/banners/desktop/components/BannerVar.spec.ts
@@ -14,7 +14,7 @@ import {
 	bannerContentDisplaySwitchFeatures,
 	bannerContentFeatures
 } from '@test/features/BannerContent';
-import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearly_CustomAmount_AddressType';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyLink';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
@@ -87,7 +87,7 @@ describe( 'BannerVar.vue', () => {
 	describe( 'Donation Form Happy Paths', () => {
 		test.each( [
 			[ 'expectMainDonationFormGoesToUpgrade' ],
-			[ 'expectUpgradeToYearlyFormGoesToCustomAmount' ]
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );
diff --git a/test/features/forms/MainDonation_UpgradeToYearlyLink.ts b/test/features/forms/MainDonation_UpgradeToYearlyLink.ts
new file mode 100644
index 000000000..6dbb1c6c8
--- /dev/null
+++ b/test/features/forms/MainDonation_UpgradeToYearlyLink.ts
@@ -0,0 +1,47 @@
+import { VueWrapper } from '@vue/test-utils';
+import {
+	expectMainDonationFormGoesToPageOnSubmit,
+	expectMainDonationFormSubmits,
+	submitMainDonationForm
+} from '@test/features/forms/subForms/MainDonationForm';
+import {
+	expectUpgradeToYearlyFormGoesToPageOnLinkClick,
+	expectUpgradeToYearlyFormSubmits
+} from '@test/features/forms/subForms/UpgradeToYearlyForm';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+
+enum Pages {
+	MainDonation = 1,
+	UpgradeToYearly = 2
+}
+
+export const donationFormFeatures: Record<string, ( wrapper: VueWrapper<any> ) => Promise<any>> = {
+	expectMainDonationFormSubmitsWhenSofortIsSelected: ( wrapper: VueWrapper<any> ) => expectMainDonationFormSubmits(
+		wrapper,
+		Intervals.ONCE,
+		PaymentMethods.SOFORT
+	),
+	expectMainDonationFormSubmitsWhenYearlyIsSelected: ( wrapper: VueWrapper<any> ) => expectMainDonationFormSubmits(
+		wrapper,
+		Intervals.YEARLY,
+		PaymentMethods.PAYPAL
+	),
+	expectMainDonationFormGoesToUpgrade: ( wrapper: VueWrapper<any> ) => expectMainDonationFormGoesToPageOnSubmit( wrapper,
+		Pages.UpgradeToYearly,
+		Intervals.ONCE,
+		PaymentMethods.PAYPAL
+	),
+	expectUpgradeToYearlyFormSubmitsUpgrade: async ( wrapper: VueWrapper<any> ) => {
+		await submitMainDonationForm( wrapper, Intervals.ONCE, '5', PaymentMethods.PAYPAL );
+		await expectUpgradeToYearlyFormSubmits( wrapper, 'yes' );
+	},
+	expectUpgradeToYearlyFormSubmitsDontUpgrade: async ( wrapper: VueWrapper<any> ) => {
+		await submitMainDonationForm( wrapper, Intervals.ONCE, '5', PaymentMethods.PAYPAL );
+		await expectUpgradeToYearlyFormSubmits( wrapper, 'no' );
+	},
+	expectUpgradeToYearlyFormGoesToMainDonation: async ( wrapper: VueWrapper<any> ) => {
+		await submitMainDonationForm( wrapper, Intervals.ONCE, '5', PaymentMethods.PAYPAL );
+		await expectUpgradeToYearlyFormGoesToPageOnLinkClick( wrapper, Pages.MainDonation );
+	}
+};

From 90f45e33b50d65b8190d418e6f0062306460c9d8 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Mon, 28 Aug 2023 13:01:31 +0200
Subject: [PATCH 3/3] Implement VAR for C23_WMDE_Desktop_DE_04

- text change in slides and bannertext for VAR

- remove unused custom amount code
- add more feature tests to happy path tests

https://phabricator.wikimedia.org/T344423
---
 banners/desktop/components/BannerCtrl.vue          | 7 -------
 banners/desktop/components/BannerVar.vue           | 7 -------
 banners/desktop/content/BannerSlides_var.vue       | 2 +-
 banners/desktop/content/BannerText_var.vue         | 2 +-
 test/banners/desktop/components/BannerCtrl.spec.ts | 4 +++-
 test/banners/desktop/components/BannerVar.spec.ts  | 8 +++++++-
 6 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/banners/desktop/components/BannerCtrl.vue b/banners/desktop/components/BannerCtrl.vue
index 45b091a17..22c251bd8 100644
--- a/banners/desktop/components/BannerCtrl.vue
+++ b/banners/desktop/components/BannerCtrl.vue
@@ -30,11 +30,6 @@
                     <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
                         <UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
                     </template>
-
-                    <template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-                        <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-                    </template>
-
 				</MultiStepDonation>
 			</template>
 
@@ -71,7 +66,6 @@ import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vu
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
 import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
-import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
@@ -90,7 +84,6 @@ enum ContentStates {
 }
 
 enum FormStepNames {
-	CustomAmountFormStep = 'CustomAmountForm',
 	MainDonationFormStep = 'MainDonationForm',
 	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
 }
diff --git a/banners/desktop/components/BannerVar.vue b/banners/desktop/components/BannerVar.vue
index 3a861859c..62d356371 100644
--- a/banners/desktop/components/BannerVar.vue
+++ b/banners/desktop/components/BannerVar.vue
@@ -30,11 +30,6 @@
 					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
 						<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
 					</template>
-
-					<template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-					</template>
-
 				</MultiStepDonation>
 			</template>
 
@@ -71,7 +66,6 @@ import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vu
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
 import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
-import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
@@ -90,7 +84,6 @@ enum ContentStates {
 }
 
 enum FormStepNames {
-	CustomAmountFormStep = 'CustomAmountForm',
 	MainDonationFormStep = 'MainDonationForm',
 	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
 }
diff --git a/banners/desktop/content/BannerSlides_var.vue b/banners/desktop/content/BannerSlides_var.vue
index a47309ef6..f04c0dac8 100644
--- a/banners/desktop/content/BannerSlides_var.vue
+++ b/banners/desktop/content/BannerSlides_var.vue
@@ -23,7 +23,7 @@
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>
-			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. Jede Spende zählt. Vielen Dank!
 		</p>
 	</KeenSliderSlide>
 </template>
diff --git a/banners/desktop/content/BannerText_var.vue b/banners/desktop/content/BannerText_var.vue
index 4698ece35..9c8b74145 100644
--- a/banners/desktop/content/BannerText_var.vue
+++ b/banners/desktop/content/BannerText_var.vue
@@ -12,7 +12,7 @@
 				aber 99&nbsp;% spenden nicht – sie übergehen diesen Aufruf.</span> 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. Vielen Dank!
+				Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Jede Spende zählt. Vielen Dank!
 			</p>
 		</div>
 	</div>
diff --git a/test/banners/desktop/components/BannerCtrl.spec.ts b/test/banners/desktop/components/BannerCtrl.spec.ts
index db5cd10c1..b3c277aae 100644
--- a/test/banners/desktop/components/BannerCtrl.spec.ts
+++ b/test/banners/desktop/components/BannerCtrl.spec.ts
@@ -91,7 +91,9 @@ describe( 'BannerCtrl.vue', () => {
 			[ 'expectMainDonationFormGoesToUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
-			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );
diff --git a/test/banners/desktop/components/BannerVar.spec.ts b/test/banners/desktop/components/BannerVar.spec.ts
index c9da4e808..13cea3fb8 100644
--- a/test/banners/desktop/components/BannerVar.spec.ts
+++ b/test/banners/desktop/components/BannerVar.spec.ts
@@ -86,8 +86,14 @@ describe( 'BannerVar.vue', () => {
 
 	describe( 'Donation Form Happy Paths', () => {
 		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
 			[ 'expectMainDonationFormGoesToUpgrade' ],
-			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );