From a2be3c59c787efcab7c36599b7dc00e8f1c9a222 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Wed, 11 Dec 2024 13:56:36 +0100
Subject: [PATCH] Add 2024 Thank You Banners

---
 .../thank_you_2024/MembershipFormActions.ts   |  35 ++++++
 banners/thank_you_2024/banner_ctrl.de.ts      |  54 ++++++++
 banners/thank_you_2024/banner_ctrl.en.ts      |  54 ++++++++
 banners/thank_you_2024/banner_ctrl.wpde.ts    |  56 +++++++++
 banners/thank_you_2024/banner_var.de.ts       |  54 ++++++++
 banners/thank_you_2024/banner_var.en.ts       |  54 ++++++++
 banners/thank_you_2024/banner_var.wpde.ts     |  56 +++++++++
 .../components/BannerCtrl.de.vue              |  78 ++++++++++++
 .../components/BannerCtrl.en.vue              |  71 +++++++++++
 .../components/BannerVar.de.vue               |  69 ++++++++++
 .../components/BannerVar.en.vue               |  68 ++++++++++
 .../thank_you_2024/components/CloseButton.vue |  13 ++
 .../thank_you_2024/components/MiniBanner.vue  |  30 +++++
 .../thank_you_2024/components/ProgressBar.vue |  30 +++++
 .../content/win/MiniBannerText.de.vue         |  11 ++
 .../content/win/MiniBannerText.en.vue         |   4 +
 banners/thank_you_2024/createTrackedURL.ts    |  19 +++
 banners/thank_you_2024/event_map.ts           |  25 ++++
 banners/thank_you_2024/event_map.wpde.ts      |  11 ++
 banners/thank_you_2024/messages.de.ts         |  31 +++++
 banners/thank_you_2024/messages.en.ts         |  29 +++++
 banners/thank_you_2024/settings.ts            |  14 +++
 banners/thank_you_2024/styles/Banner.scss     |   9 ++
 banners/thank_you_2024/styles/MiniBanner.scss | 117 +++++++++++++++++
 .../thank_you_2024/styles/ProgressBar.scss    |  38 ++++++
 banners/thank_you_2024/styles/styles.scss     |   5 +
 .../styles/swatches/color_dark.scss           |   0
 .../styles/swatches/color_light.scss          |  35 ++++++
 .../styles/swatches/skin_default.scss         |   6 +
 .../styles/variables/_fonts.scss              |   9 ++
 campaign_info.thank_you.toml                  | 119 +++++++++---------
 31 files changed, 1148 insertions(+), 56 deletions(-)
 create mode 100644 banners/thank_you_2024/MembershipFormActions.ts
 create mode 100644 banners/thank_you_2024/banner_ctrl.de.ts
 create mode 100644 banners/thank_you_2024/banner_ctrl.en.ts
 create mode 100644 banners/thank_you_2024/banner_ctrl.wpde.ts
 create mode 100644 banners/thank_you_2024/banner_var.de.ts
 create mode 100644 banners/thank_you_2024/banner_var.en.ts
 create mode 100644 banners/thank_you_2024/banner_var.wpde.ts
 create mode 100644 banners/thank_you_2024/components/BannerCtrl.de.vue
 create mode 100644 banners/thank_you_2024/components/BannerCtrl.en.vue
 create mode 100644 banners/thank_you_2024/components/BannerVar.de.vue
 create mode 100644 banners/thank_you_2024/components/BannerVar.en.vue
 create mode 100644 banners/thank_you_2024/components/CloseButton.vue
 create mode 100644 banners/thank_you_2024/components/MiniBanner.vue
 create mode 100644 banners/thank_you_2024/components/ProgressBar.vue
 create mode 100644 banners/thank_you_2024/content/win/MiniBannerText.de.vue
 create mode 100644 banners/thank_you_2024/content/win/MiniBannerText.en.vue
 create mode 100644 banners/thank_you_2024/createTrackedURL.ts
 create mode 100644 banners/thank_you_2024/event_map.ts
 create mode 100644 banners/thank_you_2024/event_map.wpde.ts
 create mode 100644 banners/thank_you_2024/messages.de.ts
 create mode 100644 banners/thank_you_2024/messages.en.ts
 create mode 100644 banners/thank_you_2024/settings.ts
 create mode 100644 banners/thank_you_2024/styles/Banner.scss
 create mode 100644 banners/thank_you_2024/styles/MiniBanner.scss
 create mode 100644 banners/thank_you_2024/styles/ProgressBar.scss
 create mode 100644 banners/thank_you_2024/styles/styles.scss
 create mode 100644 banners/thank_you_2024/styles/swatches/color_dark.scss
 create mode 100644 banners/thank_you_2024/styles/swatches/color_light.scss
 create mode 100644 banners/thank_you_2024/styles/swatches/skin_default.scss
 create mode 100644 banners/thank_you_2024/styles/variables/_fonts.scss

diff --git a/banners/thank_you_2024/MembershipFormActions.ts b/banners/thank_you_2024/MembershipFormActions.ts
new file mode 100644
index 000000000..f57da5fb5
--- /dev/null
+++ b/banners/thank_you_2024/MembershipFormActions.ts
@@ -0,0 +1,35 @@
+/* eslint-disable camelcase */
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+import { Locales } from '@src/domain/Locales';
+
+const MEMBERSHIP_FORM_URL = 'https://spenden.wikimedia.de/apply-for-membership';
+
+export interface MembershipFormActions {
+	create( extraUrlParameters: Record<string, string> ): string;
+}
+
+export class TrackingMembershipFormActions implements MembershipFormActions {
+	private _tracking: TrackingParameters;
+	private _impressionCount: ImpressionCount;
+	private readonly _locale: Locales;
+
+	public constructor( tracking: TrackingParameters, impressionCount: ImpressionCount, locale: Locales ) {
+		this._tracking = tracking;
+		this._impressionCount = impressionCount;
+		this._locale = locale;
+	}
+
+	public create( extraUrlParameters: Record<string, string> = {} ): string {
+		const urlParameters = new URLSearchParams( {
+			piwik_kwd: this._tracking.keyword,
+			piwik_campaign: this._tracking.campaign,
+			impCount: String( this._impressionCount.overallCountIncremented ),
+			bImpCount: String( this._impressionCount.bannerCountIncremented ),
+			locale: this._locale,
+			...extraUrlParameters
+		} );
+
+		return `${MEMBERSHIP_FORM_URL}?${urlParameters}`;
+	}
+}
diff --git a/banners/thank_you_2024/banner_ctrl.de.ts b/banners/thank_you_2024/banner_ctrl.de.ts
new file mode 100644
index 000000000..ca8149119
--- /dev/null
+++ b/banners/thank_you_2024/banner_ctrl.de.ts
@@ -0,0 +1,54 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.de.vue';
+import messages from './messages.de';
+import eventMappings from './event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+import { WindowTimer } from '@src/utils/Timer';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/thank_you_2024/banner_ctrl.en.ts b/banners/thank_you_2024/banner_ctrl.en.ts
new file mode 100644
index 000000000..8977aceb7
--- /dev/null
+++ b/banners/thank_you_2024/banner_ctrl.en.ts
@@ -0,0 +1,54 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.en.vue';
+import messages from './messages.en';
+import eventMappings from './event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerEn } from '@src/utils/DynamicContent/formatters/IntegerEn';
+import { Locales } from '@src/domain/Locales';
+import { WindowTimer } from '@src/utils/Timer';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerEn(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.EN ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.EN )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.EN ) );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/thank_you_2024/banner_ctrl.wpde.ts b/banners/thank_you_2024/banner_ctrl.wpde.ts
new file mode 100644
index 000000000..98a8a2b8b
--- /dev/null
+++ b/banners/thank_you_2024/banner_ctrl.wpde.ts
@@ -0,0 +1,56 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+import { Translator } from '@src/Translator';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.de.vue';
+import messages from './messages.de';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import PageWPDE from '@src/page/PageWPDE';
+import { TrackerWPDE } from '@src/tracking/TrackerWPDE';
+import eventMap from './event_map.wpde';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+import { WindowTimer } from '@src/utils/Timer';
+
+// Tracking placeholders will be replaced by webpack string-replace-loader
+// using the campaign configuration ( campaign_info.toml ) for the correct values
+const tracking = {
+	campaign: '!insert-campaign-here!',
+	keyword: '!insert-keyword-here!'
+};
+
+const translator = new Translator( messages );
+const page = new PageWPDE( tracking );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new TrackerWPDE( 'FundraisingTracker', page.getTracking().keyword, eventMap, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/thank_you_2024/banner_var.de.ts b/banners/thank_you_2024/banner_var.de.ts
new file mode 100644
index 000000000..916c28b8a
--- /dev/null
+++ b/banners/thank_you_2024/banner_var.de.ts
@@ -0,0 +1,54 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.de.vue';
+import messages from './messages.de';
+import eventMappings from './event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+import { WindowTimer } from '@src/utils/Timer';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/thank_you_2024/banner_var.en.ts b/banners/thank_you_2024/banner_var.en.ts
new file mode 100644
index 000000000..5d8453104
--- /dev/null
+++ b/banners/thank_you_2024/banner_var.en.ts
@@ -0,0 +1,54 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.en.vue';
+import messages from './messages.en';
+import eventMappings from './event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import { createThankYouSettings } from './settings';
+import { IntegerEn } from '@src/utils/DynamicContent/formatters/IntegerEn';
+import { Locales } from '@src/domain/Locales';
+import { WindowTimer } from '@src/utils/Timer';
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 0 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerEn(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.EN ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.EN )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.EN ) );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/thank_you_2024/banner_var.wpde.ts b/banners/thank_you_2024/banner_var.wpde.ts
new file mode 100644
index 000000000..cacfcd560
--- /dev/null
+++ b/banners/thank_you_2024/banner_var.wpde.ts
@@ -0,0 +1,56 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+import { Translator } from '@src/Translator';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.de.vue';
+import messages from './messages.de';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createTrackedURL, SUBSCRIBE_URL, USE_OF_FUNDS_URL } from './createTrackedURL';
+import PageWPDE from '@src/page/PageWPDE';
+import { TrackerWPDE } from '@src/tracking/TrackerWPDE';
+import eventMap from './event_map.wpde';
+import { createThankYouSettings } from './settings';
+import { IntegerDe } from '@src/utils/DynamicContent/formatters/IntegerDe';
+import { Locales } from '@src/domain/Locales';
+import { WindowTimer } from '@src/utils/Timer';
+
+// Tracking placeholders will be replaced by webpack string-replace-loader
+// using the campaign configuration ( campaign_info.toml ) for the correct values
+const tracking = {
+	campaign: '!insert-campaign-here!',
+	keyword: '!insert-keyword-here!'
+};
+
+const translator = new Translator( messages );
+const page = new PageWPDE( tracking );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new TrackerWPDE( 'FundraisingTracker', page.getTracking().keyword, eventMap, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 0
+	},
+	bannerProps: {
+		settings: createThankYouSettings( new IntegerDe(), page.getCampaignParameters().thankYouCampaign ),
+		subscribeURL: createTrackedURL( SUBSCRIBE_URL, page.getTracking(), impressionCount, Locales.DE ),
+		useOfFundsURL: createTrackedURL( USE_OF_FUNDS_URL, page.getTracking(), impressionCount, Locales.DE )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount, Locales.DE ) );
+app.provide( 'timer', new WindowTimer() );
+
+app.mount( page.getBannerContainer() );
diff --git a/banners/thank_you_2024/components/BannerCtrl.de.vue b/banners/thank_you_2024/components/BannerCtrl.de.vue
new file mode 100644
index 000000000..edf22cb6c
--- /dev/null
+++ b/banners/thank_you_2024/components/BannerCtrl.de.vue
@@ -0,0 +1,78 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner :progress-bar-fill-percentage="settings.progressBarPercentage" :show-success-content="showSuccessContent">
+			<template #text>
+				<MiniBannerTextWin/>
+			</template>
+		</MiniBanner>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { inject, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ThankYouSettings } from '@banners/thank_you/settings';
+import { Tracker } from '@src/tracking/Tracker';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { ThankYouModalShownEvent } from '@src/tracking/events/ThankYouModalShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import MiniBanner from '@banners/thank_you_2024/components/MiniBanner.vue';
+import MiniBannerTextWin from '../content/win/MiniBannerText.de.vue';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	Full = 'wmde-banner-wrapper--full-page'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	settings: ThankYouSettings;
+	subscribeURL: string;
+	useOfFundsURL: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'modalOpened', 'modalClosed' ] );
+const tracker = inject<Tracker>( 'tracker' );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const showSuccessContent = props.settings.progressBarPercentage === 100;
+
+const onClose = (): void => {
+	emit( 'bannerClosed', new CloseEvent( 'MainBanner', CloseChoices.Close ) );
+};
+
+const onShowModal = (): void => {
+	tracker.trackEvent( new ThankYouModalShownEvent() );
+	emit( 'modalOpened' );
+	contentState.value = ContentStates.Full;
+};
+
+const onHideModal = (): void => {
+	emit( 'modalClosed' );
+	contentState.value = ContentStates.Mini;
+};
+
+const onSubmit = ( url: string, userChoice: string ): void => {
+	tracker.trackEvent( new BannerSubmitEvent( 'ThankYouBanner', userChoice ) );
+	window.location.href = url;
+};
+
+const submitWithAmount = ( url: string ): void => {
+	onSubmit( url, 'with-amount-2' );
+};
+
+const submitWithoutAmount = ( url: string ): void => {
+	onSubmit( url, 'without-amount' );
+};
+
+const onSubscribe = (): void => {
+	onSubmit( props.subscribeURL, 'subscribe' );
+};
+
+const onUseOfFunds = (): void => {
+	onSubmit( props.useOfFundsURL, 'use-of-funds' );
+};
+
+</script>
diff --git a/banners/thank_you_2024/components/BannerCtrl.en.vue b/banners/thank_you_2024/components/BannerCtrl.en.vue
new file mode 100644
index 000000000..570540237
--- /dev/null
+++ b/banners/thank_you_2024/components/BannerCtrl.en.vue
@@ -0,0 +1,71 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { inject, ref } from 'vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ThankYouSettings } from '@banners/thank_you/settings';
+import { Tracker } from '@src/tracking/Tracker';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { ThankYouModalShownEvent } from '@src/tracking/events/ThankYouModalShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	Full = 'wmde-banner-wrapper--full-page'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	settings: ThankYouSettings;
+	subscribeURL: string;
+	useOfFundsURL: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'modalOpened', 'modalClosed' ] );
+const tracker = inject<Tracker>( 'tracker' );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const showSuccessContent = props.settings.progressBarPercentage === 100;
+
+const onClose = (): void => {
+	emit( 'bannerClosed', new CloseEvent( 'MainBanner', CloseChoices.Close ) );
+};
+
+const onShowModal = (): void => {
+	tracker.trackEvent( new ThankYouModalShownEvent() );
+	emit( 'modalOpened' );
+	contentState.value = ContentStates.Full;
+};
+
+const onHideModal = (): void => {
+	emit( 'modalClosed' );
+	contentState.value = ContentStates.Mini;
+};
+
+const onSubmit = ( url: string, userChoice: string ): void => {
+	tracker.trackEvent( new BannerSubmitEvent( 'ThankYouBanner', userChoice ) );
+	window.location.href = url;
+};
+
+const submitWithAmount = ( url: string ): void => {
+	onSubmit( url, 'with-amount-2' );
+};
+
+const submitWithoutAmount = ( url: string ): void => {
+	onSubmit( url, 'without-amount' );
+};
+
+const onSubscribe = (): void => {
+	onSubmit( props.subscribeURL, 'subscribe' );
+};
+
+const onUseOfFunds = (): void => {
+	onSubmit( props.useOfFundsURL, 'use-of-funds' );
+};
+
+</script>
diff --git a/banners/thank_you_2024/components/BannerVar.de.vue b/banners/thank_you_2024/components/BannerVar.de.vue
new file mode 100644
index 000000000..2e909e24a
--- /dev/null
+++ b/banners/thank_you_2024/components/BannerVar.de.vue
@@ -0,0 +1,69 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ThankYouSettings } from '@banners/thank_you/settings';
+import { inject, ref } from 'vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { ThankYouModalShownEvent } from '@src/tracking/events/ThankYouModalShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	Full = 'wmde-banner-wrapper--full-page'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	settings: ThankYouSettings;
+	subscribeURL: string;
+	useOfFundsURL: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'modalOpened', 'modalClosed' ] );
+const tracker = inject<Tracker>( 'tracker' );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const showSuccessContent = props.settings.progressBarPercentage === 100;
+
+const onClose = (): void => {
+	emit( 'bannerClosed', new CloseEvent( 'MainBanner', CloseChoices.Close ) );
+};
+
+const onShowModal = (): void => {
+	tracker.trackEvent( new ThankYouModalShownEvent() );
+	emit( 'modalOpened' );
+	contentState.value = ContentStates.Full;
+};
+
+const onHideModal = (): void => {
+	emit( 'modalClosed' );
+	contentState.value = ContentStates.Mini;
+};
+
+const onSubmit = ( url: string, userChoice: string ): void => {
+	tracker.trackEvent( new BannerSubmitEvent( 'ThankYouBanner', userChoice ) );
+	window.location.href = url;
+};
+
+const submitWithAmount = ( url: string ): void => {
+	onSubmit( url, 'with-amount-2' );
+};
+
+const submitWithoutAmount = ( url: string ): void => {
+	onSubmit( url, 'without-amount' );
+};
+
+const onSubscribe = (): void => {
+	onSubmit( props.subscribeURL, 'subscribe' );
+};
+
+const onUseOfFunds = (): void => {
+	onSubmit( props.useOfFundsURL, 'use-of-funds' );
+};
+</script>
diff --git a/banners/thank_you_2024/components/BannerVar.en.vue b/banners/thank_you_2024/components/BannerVar.en.vue
new file mode 100644
index 000000000..2e395cfaa
--- /dev/null
+++ b/banners/thank_you_2024/components/BannerVar.en.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState"></div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { ThankYouSettings } from '@banners/thank_you/settings';
+import { inject, ref } from 'vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { ThankYouModalShownEvent } from '@src/tracking/events/ThankYouModalShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	Full = 'wmde-banner-wrapper--full-page'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	settings: ThankYouSettings;
+	subscribeURL: string;
+	useOfFundsURL: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'modalOpened', 'modalClosed' ] );
+const tracker = inject<Tracker>( 'tracker' );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const showSuccessContent = props.settings.progressBarPercentage === 100;
+
+const onClose = (): void => {
+	emit( 'bannerClosed', new CloseEvent( 'MainBanner', CloseChoices.Close ) );
+};
+
+const onShowModal = (): void => {
+	tracker.trackEvent( new ThankYouModalShownEvent() );
+	emit( 'modalOpened' );
+	contentState.value = ContentStates.Full;
+};
+
+const onHideModal = (): void => {
+	emit( 'modalClosed' );
+	contentState.value = ContentStates.Mini;
+};
+
+const onSubmit = ( url: string, userChoice: string ): void => {
+	tracker.trackEvent( new BannerSubmitEvent( 'ThankYouBanner', userChoice ) );
+	window.location.href = url;
+};
+
+const submitWithAmount = ( url: string ): void => {
+	onSubmit( url, 'with-amount-2' );
+};
+
+const submitWithoutAmount = ( url: string ): void => {
+	onSubmit( url, 'without-amount' );
+};
+
+const onSubscribe = (): void => {
+	onSubmit( props.subscribeURL, 'subscribe' );
+};
+
+const onUseOfFunds = (): void => {
+	onSubmit( props.useOfFundsURL, 'use-of-funds' );
+};
+</script>
diff --git a/banners/thank_you_2024/components/CloseButton.vue b/banners/thank_you_2024/components/CloseButton.vue
new file mode 100644
index 000000000..40c9c9fe0
--- /dev/null
+++ b/banners/thank_you_2024/components/CloseButton.vue
@@ -0,0 +1,13 @@
+<template>
+	<button class="wmde-banner-close" @click="$emit( 'click' )">
+		<slot name="text"/>
+		<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<line x1="21.3536" y1="0.353553" x2="1.35355" y2="20.3536" style="stroke: var( --close-icon-stroke )"/>
+			<line x1="20.6464" y1="20.3536" x2="0.646445" y2="0.353555" style="stroke: var( --close-icon-stroke )"/>
+		</svg>
+	</button>
+</template>
+
+<script setup lang="ts">
+defineEmits( [ 'click' ] );
+</script>
diff --git a/banners/thank_you_2024/components/MiniBanner.vue b/banners/thank_you_2024/components/MiniBanner.vue
new file mode 100644
index 000000000..0c14d28ce
--- /dev/null
+++ b/banners/thank_you_2024/components/MiniBanner.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="wmde-banner-mini">
+		<CloseButton/>
+		<div class="wmde-banner-mini-content">
+			<slot name="text"/>
+		</div>
+		<ProgressBar :fill-percentage="progressBarFillPercentage" :show-success-content="showSuccessContent"/>
+
+		<div class="wmde-banner-mini-actions">
+			<button class="wmde-banner-mini-read-more" @click="$emit( 'read-more' )">
+				{{ $translate( 'mini-read-more-button' ) }}
+			</button>
+			<button class="wmde-banner-mini-become-member" @click="$emit( 'become-member' )">
+				{{ $translate( 'mini-become-a-member-button' ) }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import CloseButton from './CloseButton.vue';
+import ProgressBar from './ProgressBar.vue';
+
+interface Props {
+	progressBarFillPercentage: number;
+	showSuccessContent: boolean;
+}
+
+defineProps<Props>();
+</script>
diff --git a/banners/thank_you_2024/components/ProgressBar.vue b/banners/thank_you_2024/components/ProgressBar.vue
new file mode 100644
index 000000000..a62e29514
--- /dev/null
+++ b/banners/thank_you_2024/components/ProgressBar.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="wmde-banner-progress-bar" :style="{ '--wmde-banner-progress-bar-width': `${fillPercentage}%` }">
+		<div class="wmde-banner-progress-bar-fill">
+			<div class="wmde-banner-progress-bar-fill-text">{{ $translate( translationKey ) }}</div>
+			<div class="wmde-banner-progress-bar-fill-icon">
+				<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M2 12L9 22L25 1" stroke="black" stroke-width="3"/>
+				</svg>
+				<span class="confetti-1"/>
+				<span class="confetti-2"/>
+				<span class="confetti-3"/>
+				<span class="confetti-4"/>
+				<span class="confetti-5"/>
+				<span class="confetti-6"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+interface Props {
+	fillPercentage: number;
+	showSuccessContent: boolean;
+}
+
+const props = defineProps<Props>();
+const translationKey = props.showSuccessContent ? 'progress-bar-inner-text-win' : 'progress-bar-inner-text-lose';
+
+</script>
diff --git a/banners/thank_you_2024/content/win/MiniBannerText.de.vue b/banners/thank_you_2024/content/win/MiniBannerText.de.vue
new file mode 100644
index 000000000..69d8f5dab
--- /dev/null
+++ b/banners/thank_you_2024/content/win/MiniBannerText.de.vue
@@ -0,0 +1,11 @@
+<template>
+	<h2>
+		<span style="--index: 1;">D</span>
+		<span style="--index: 2;">a</span>
+		<span style="--index: 3;">n</span>
+		<span style="--index: 4;">k</span>
+		<span style="--index: 5;">e</span>
+		<span style="--index: 6;">!</span>
+	</h2>
+	<p>Rund 350.000 Menschen haben Wikipedia mit ihrer Spende ihre Wertschätzung erwiesen. Ihnen allen danken wir von ganzem Herzen!</p>
+</template>
diff --git a/banners/thank_you_2024/content/win/MiniBannerText.en.vue b/banners/thank_you_2024/content/win/MiniBannerText.en.vue
new file mode 100644
index 000000000..a10b965f0
--- /dev/null
+++ b/banners/thank_you_2024/content/win/MiniBannerText.en.vue
@@ -0,0 +1,4 @@
+<template>
+	<h2>Thank You!</h2>
+	<p>Rund 350.000 Menschen haben Wikipedia mit ihrer Spende ihre Wertschätzung erwiesen. Ihnen allen danken wir von ganzem Herzen!</p>
+</template>
diff --git a/banners/thank_you_2024/createTrackedURL.ts b/banners/thank_you_2024/createTrackedURL.ts
new file mode 100644
index 000000000..39b42a598
--- /dev/null
+++ b/banners/thank_you_2024/createTrackedURL.ts
@@ -0,0 +1,19 @@
+/* eslint-disable camelcase */
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+import { Locales } from '@src/domain/Locales';
+
+export const SUBSCRIBE_URL = 'https://www.wikimedia.de/mitglieder/';
+export const USE_OF_FUNDS_URL = 'https://spenden.wikimedia.de/use-of-funds/';
+
+export function createTrackedURL( url: string, tracking: TrackingParameters, impressionCount: ImpressionCount, locale: Locales ): string {
+	const urlParameters = new URLSearchParams( {
+		piwik_kwd: tracking.keyword,
+		piwik_campaign: tracking.campaign,
+		impCount: String( impressionCount.overallCountIncremented ),
+		bImpCount: String( impressionCount.bannerCountIncremented ),
+		locale
+	} );
+
+	return `${url}?${urlParameters}`;
+}
diff --git a/banners/thank_you_2024/event_map.ts b/banners/thank_you_2024/event_map.ts
new file mode 100644
index 000000000..645a6cf0d
--- /dev/null
+++ b/banners/thank_you_2024/event_map.ts
@@ -0,0 +1,25 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { ThankYouModalShownEvent } from '@src/tracking/events/ThankYouModalShownEvent';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+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>( [
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[
+		BannerSubmitEvent.EVENT_NAME,
+		( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+			return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+		}
+	],
+	[
+		ThankYouModalShownEvent.EVENT_NAME,
+		( e: ThankYouModalShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 )
+	]
+] );
diff --git a/banners/thank_you_2024/event_map.wpde.ts b/banners/thank_you_2024/event_map.wpde.ts
new file mode 100644
index 000000000..5d871bc14
--- /dev/null
+++ b/banners/thank_you_2024/event_map.wpde.ts
@@ -0,0 +1,11 @@
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { ThankYouModalShownEvent } from '@src/tracking/events/ThankYouModalShownEvent';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
+
+export default new Map( [
+	[ NotShownEvent.EVENT_NAME, 1 ],
+	[ CloseEvent.EVENT_NAME, 0.1 ],
+	[ ThankYouModalShownEvent.EVENT_NAME, 1 ],
+	[ BannerSubmitEvent.EVENT_NAME, 1 ]
+] );
diff --git a/banners/thank_you_2024/messages.de.ts b/banners/thank_you_2024/messages.de.ts
new file mode 100644
index 000000000..cc0710960
--- /dev/null
+++ b/banners/thank_you_2024/messages.de.ts
@@ -0,0 +1,31 @@
+import { TranslationMessages } from '@src/Translator';
+
+const messages: TranslationMessages = {
+	'progress-bar-inner-text-win': 'Spendenziel erreicht!',
+	'progress-bar-inner-text-lose': 'Nicht geschafft',
+	'mini-read-more-button': 'So geht es jetzt weiter',
+	'mini-become-a-member-button': 'Jetzt Mitglied werden',
+	'close-full-page': 'Dankestext schließen',
+
+	'call-to-action-more-info': 'Weitere Informationen auf unserer Webseite',
+	'call-to-action-button-amount-per-month': 'Mit {{amount}} € im Monat fördern',
+	'call-to-action-button-different-amount': 'Mit anderem Betrag fördern',
+	'open-modal': 'Jetzt Dankesbotschaft lesen',
+	'image-copyright-holder': 'Annika Möller für Wikimedia Deutschland',
+	'subscribe-title': 'Benötigen Sie weitere Informationen zur Mitgliedschaft?',
+	'subscribe-text': 'Tragen Sie einfach Ihre E-Mail-Adresse ein',
+	'subscribe-link': 'oder besuchen Sie unsere Webseite',
+	'subscribe-privacy': 'Datenschutz',
+	'subscribe-button': 'Senden',
+	'subscribe-placeholder': 'E-Mail-Adresse',
+	'subscribe-form-error': 'Bitte geben Sie eine gültige E-Mail-Adresse an.',
+	'stats-people-amount': '109.500',
+	'stats-people-text': 'Mitglieder',
+	'stats-average-amount': '5&nbsp;€',
+	'stats-average-text': 'durchschnittlicher Monatsbeitrag',
+	'stats-contribution-amount': '2&nbsp;€',
+	'stats-contribution-text': 'Mindestbeitrag im Monat',
+	'use-of-funds': 'Was Ihre Spende bewirkt'
+};
+
+export default messages;
diff --git a/banners/thank_you_2024/messages.en.ts b/banners/thank_you_2024/messages.en.ts
new file mode 100644
index 000000000..e4f0b6160
--- /dev/null
+++ b/banners/thank_you_2024/messages.en.ts
@@ -0,0 +1,29 @@
+import { TranslationMessages } from '@src/Translator';
+
+const messages: TranslationMessages = {
+	'call-to-action-more-info': 'For more information, please visit our website',
+	'call-to-action-button': 'Become a supporter now',
+	'call-to-action-button-amount-per-month': 'Support with €{{amount}} per month',
+	'call-to-action-button-different-amount': 'Support with a custom amount',
+	'open-modal': 'Read thank-you message',
+	'close-modal': 'Close thank you message',
+	'progress-bar-inner-text-win': 'Target reached!',
+	'progress-bar-inner-text-lose': 'We didn\'t make it',
+	'image-copyright-holder': 'Annika Möller for Wikimedia Deutschland',
+	'subscribe-title': 'Need more information about membership?',
+	'subscribe-text': 'Simply enter your e-mail address',
+	'subscribe-link': 'or visit our website',
+	'subscribe-privacy': 'Privacy',
+	'subscribe-button': 'Send',
+	'subscribe-placeholder': 'E-Mail Address',
+	'subscribe-form-error': 'Please enter a valid email address.',
+	'stats-people-amount': '109.500',
+	'stats-people-text': 'members',
+	'stats-average-amount': '€5',
+	'stats-average-text': 'average monthly membership fee',
+	'stats-contribution-amount': '€2',
+	'stats-contribution-text': 'monthly minimum contribution',
+	'use-of-funds': 'Where does my donation go?'
+};
+
+export default messages;
diff --git a/banners/thank_you_2024/settings.ts b/banners/thank_you_2024/settings.ts
new file mode 100644
index 000000000..b0e497ca4
--- /dev/null
+++ b/banners/thank_you_2024/settings.ts
@@ -0,0 +1,14 @@
+import { Integer } from '@src/utils/DynamicContent/formatters/Integer';
+import { ThankYouCampaignParameters } from '@src/domain/CampaignParameters';
+
+export interface ThankYouSettings {
+	numberOfDonors: string;
+	progressBarPercentage: number;
+}
+
+export function createThankYouSettings( formatter: Integer, campaignParameters: ThankYouCampaignParameters ): ThankYouSettings {
+	return {
+		numberOfDonors: formatter.format( campaignParameters.numberOfDonors ),
+		progressBarPercentage: campaignParameters.progressBarPercentage
+	};
+}
diff --git a/banners/thank_you_2024/styles/Banner.scss b/banners/thank_you_2024/styles/Banner.scss
new file mode 100644
index 000000000..c467f431b
--- /dev/null
+++ b/banners/thank_you_2024/styles/Banner.scss
@@ -0,0 +1,9 @@
+@use './variables/fonts';
+
+.wmde-banner {
+	font-family: fonts.$content;
+
+	&, * {
+		box-sizing: border-box;
+	}
+}
diff --git a/banners/thank_you_2024/styles/MiniBanner.scss b/banners/thank_you_2024/styles/MiniBanner.scss
new file mode 100644
index 000000000..be5288c18
--- /dev/null
+++ b/banners/thank_you_2024/styles/MiniBanner.scss
@@ -0,0 +1,117 @@
+@use './variables/fonts';
+
+$height: 248px !default;
+
+@keyframes showLetter {
+	0% {
+		transform: scale( 0.5 );
+	}
+
+	100% {
+		transform: scale( 1 );
+	}
+}
+
+.wmde-banner {
+	&-mini {
+		background: var( --mini-background );
+		box-shadow: var( --mini-box-shadow );
+		display: flex;
+		flex-direction: column;
+		min-height: $height;
+		position: relative;
+		padding: 40px;
+
+		.wmde-banner-close {
+			all: unset;
+			position: absolute;
+			top: 10px;
+			right: 10px;
+			height: 36px;
+			line-height: 36px;
+			min-width: 36px;
+			text-align: center;
+			cursor: pointer;
+			transition: opacity 200ms ease-in-out;
+
+			svg {
+				position: relative;
+				top: 4px;
+			}
+
+			&:hover,
+			&:focus {
+				opacity: 0.5;
+			}
+		}
+
+		&-content {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 40px;
+			margin-bottom: 16px;
+		}
+
+		h2 {
+			all: unset;
+			font-family: fonts.$header;
+			font-size: 90px;
+			white-space: nowrap;
+
+			span {
+				transform: scale( 0.5 );
+				display: inline-block;
+			}
+		}
+
+		p {
+			padding: 0;
+			margin: 0;
+		}
+
+		&-actions {
+			text-align: center;
+		}
+
+		&-read-more,
+		&-become-member {
+			all: unset;
+			height: 36px;
+			padding: 0 20px;
+			border-radius: 5px;
+			margin: 0 18px;
+			cursor: pointer;
+			font-size: 16px;
+			transition: background 200ms ease-in-out;
+		}
+
+		&-read-more {
+			background: var( --read-more-background );
+			color: var( --read-more-color );
+
+			&:hover,
+			&:focus {
+				background: var( --read-more-background-hover );
+			}
+		}
+
+		&-become-member {
+			background: var( --become-member-background );
+			color: var( --become-member-color );
+
+			&:hover,
+			&:focus {
+				background: var( --become-member-background-hover );
+			}
+		}
+	}
+
+	&--visible {
+		.wmde-banner-mini h2 > span {
+			animation: showLetter 2s cubic-bezier( 0, 1.13, .46, 1.97 );
+			animation-fill-mode: forwards;
+			animation-delay: calc( 0.08s * var( --index ) );
+		}
+	}
+}
diff --git a/banners/thank_you_2024/styles/ProgressBar.scss b/banners/thank_you_2024/styles/ProgressBar.scss
new file mode 100644
index 000000000..72b62a9f4
--- /dev/null
+++ b/banners/thank_you_2024/styles/ProgressBar.scss
@@ -0,0 +1,38 @@
+.wmde-banner {
+	&-progress-bar {
+		border: 3px solid var( --progress-border );
+		height: 34px;
+		border-radius: 17px;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		margin-bottom: 34px;
+
+		&-fill {
+			background: var( --progress-fill-background );
+			color: var( --progress-color );
+			line-height: 28px;
+			border-radius: 14px;
+			position: absolute;
+			left: 0;
+			height: 100%;
+			width: 300px;
+			max-width: 100%;
+			padding: 0 20px;
+			font-size: 14px;
+			font-weight: bold;
+
+			&-icon {
+				border: 2px solid var( --progress-fill-icon-border );
+				background: var( --progress-fill-icon-background );
+				position: absolute;
+				height: 34px;
+				width: 34px;
+				border-radius: 17px;
+				top: -3px;
+				right: -3px;
+			}
+		}
+
+	}
+}
diff --git a/banners/thank_you_2024/styles/styles.scss b/banners/thank_you_2024/styles/styles.scss
new file mode 100644
index 000000000..f718d368c
--- /dev/null
+++ b/banners/thank_you_2024/styles/styles.scss
@@ -0,0 +1,5 @@
+@use 'src/components/BannerConductor/banner-transition';
+@use './swatches/skin_default';
+@use './Banner';
+@use './MiniBanner';
+@use './ProgressBar';
diff --git a/banners/thank_you_2024/styles/swatches/color_dark.scss b/banners/thank_you_2024/styles/swatches/color_dark.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/banners/thank_you_2024/styles/swatches/color_light.scss b/banners/thank_you_2024/styles/swatches/color_light.scss
new file mode 100644
index 000000000..74195deab
--- /dev/null
+++ b/banners/thank_you_2024/styles/swatches/color_light.scss
@@ -0,0 +1,35 @@
+@use 'sass:color';
+
+$black: #000000;
+$white: #ffffff;
+
+$grey200: #d9d9d9;
+
+$seaBlue100: #43e5c5;
+$seaBlue300: #0ea789;
+
+$blue100: #ddf1fd; // Footer
+$blue110: #d7edff; // Line below stat
+$blue300: #2c9bf0;
+$blue500: #005782;
+
+@mixin swatch() {
+	--text-color: #{$black};
+	--close-icon-stroke: #{$black};
+
+	--mini-background: #{$white};
+	--mini-box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% );
+
+	--progress-border: #{$seaBlue300};
+	--progress-color: #{$white};
+	--progress-fill-background: #{$seaBlue300};
+	--progress-fill-icon-border: #{$white};
+	--progress-fill-icon-background: #{$seaBlue100};
+
+	--read-more-background: #{$blue300};
+	--read-more-background-hover: #{color.adjust( $blue300, $lightness: -5% )};
+	--read-more-color: #{$white};
+	--become-member-background: #{$grey200};
+	--become-member-background-hover: #{color.adjust( $grey200, $lightness: -5% )};
+	--become-member-color: #{$black};
+}
diff --git a/banners/thank_you_2024/styles/swatches/skin_default.scss b/banners/thank_you_2024/styles/swatches/skin_default.scss
new file mode 100644
index 000000000..411e125ea
--- /dev/null
+++ b/banners/thank_you_2024/styles/swatches/skin_default.scss
@@ -0,0 +1,6 @@
+@use 'color_light';
+
+.wmde-banner {
+	@include color_light.swatch;
+}
+
diff --git a/banners/thank_you_2024/styles/variables/_fonts.scss b/banners/thank_you_2024/styles/variables/_fonts.scss
new file mode 100644
index 000000000..adeff061d
--- /dev/null
+++ b/banners/thank_you_2024/styles/variables/_fonts.scss
@@ -0,0 +1,9 @@
+/* These font stacks come from: https://github.com/system-fonts/modern-font-stacks */
+$-antique: 'Georgia Pro', Georgia, Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', serif;
+$-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial Nova', 'Liberation Sans', 'Arial', sans-serif;
+
+/* This is only used for the thank you text */
+$header: $-antique !default;
+
+/* This is all other content */
+$content: $-neo-grotesque !default;
diff --git a/campaign_info.thank_you.toml b/campaign_info.thank_you.toml
index da65bb263..77cf7daf9 100644
--- a/campaign_info.thank_you.toml
+++ b/campaign_info.thank_you.toml
@@ -5,23 +5,24 @@
 # Thank You Campaign
 [thank_you]
 name = "Desktop"
-campaign = "C23_WMDE_Desktop_DE_ty"
+campaign = "C24_WMDE_Desktop_DE_ty"
 icon = "desktop"
-campaign_tracking = "ty01-240101"
+campaign_tracking = "ty01-250101"
 description = "Thank you banner"
 preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
+preview_link_darkmode = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1"
 preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_org"
 
 [thank_you.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.de.ts"
-pagename = "B23_WMDE_Desktop_DE_ty_ctrl"
-tracking = "org-ty-240101-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.de.ts"
+pagename = "B24_WMDE_Desktop_DE_ty_ctrl"
+tracking = "org-ty-250101-ctrl"
 
 [thank_you.banners.var]
-filename = "./banners/thank_you/banner_var.de.ts"
-pagename = "B23_WMDE_Desktop_DE_ty_var"
-tracking = "org-ty-240101-var"
+filename = "./banners/thank_you_2024/banner_var.de.ts"
+pagename = "B24_WMDE_Desktop_DE_ty_var"
+tracking = "org-ty-250101-var"
 
 [thank_you.test_matrix]
 platform = ["edge", "ie11", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
@@ -30,23 +31,24 @@ resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560
 
 [thank_you_en]
 name = "English Desktop"
-campaign = "C23_WMDE_Desktop_EN_ty"
+campaign = "C24_WMDE_Desktop_EN_ty"
 icon = "desktop"
-campaign_tracking = "ty01-240101"
+campaign_tracking = "ty01-250101"
 description = "Thank you banner"
 preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
+preview_link_darkmode = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1"
 preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_org"
 
 [thank_you_en.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.en.ts"
-pagename = "B23_WMDE_Desktop_EN_ty_ctrl"
-tracking = "org-ty-240101-en-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.en.ts"
+pagename = "B24_WMDE_Desktop_EN_ty_ctrl"
+tracking = "org-ty-250101-en-ctrl"
 
 [thank_you_en.banners.var]
-filename = "./banners/thank_you/banner_var.en.ts"
-pagename = "B23_WMDE_Desktop_EN_ty_var"
-tracking = "org-ty-240101-en-var"
+filename = "./banners/thank_you_2024/banner_var.en.ts"
+pagename = "B24_WMDE_Desktop_EN_ty_var"
+tracking = "org-ty-250101-en-var"
 
 [thank_you_en.test_matrix]
 platform = ["edge", "ie11", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]
@@ -55,23 +57,24 @@ resolution = ["800x600", "1024x768", "1280x960", "1600x1200", "1920x1200", "2560
 # Thank you campaign mobile wp.org
 [thank_you_mobile]
 name = "Mobile"
-campaign = "C23_WMDE_Mobile_DE_ty"
+campaign = "C24_WMDE_Mobile_DE_ty"
 icon = "mobile"
-campaign_tracking = "ty01-mob-240101"
+campaign_tracking = "ty01-mob-250101"
 description = "Thank you banner"
 preview_link = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype"
+preview_link_darkmode = "/mobile/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype&minervanightmode=1"
 preview_url = 'https://de.m.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_org"
 
 [thank_you_mobile.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.de.ts"
-pagename = "B23_WMDE_Mobile_DE_ty_ctrl"
-tracking = "org-mob-ty-240101-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.de.ts"
+pagename = "B24_WMDE_Mobile_DE_ty_ctrl"
+tracking = "org-mob-ty-250101-ctrl"
 
 [thank_you_mobile.banners.var]
-filename = "./banners/thank_you/banner_var.de.ts"
-pagename = "B23_WMDE_Mobile_DE_ty_var"
-tracking = "org-mob-ty-240101-var"
+filename = "./banners/thank_you_2024/banner_var.de.ts"
+pagename = "B24_WMDE_Mobile_DE_ty_var"
+tracking = "org-mob-ty-250101-var"
 
 [thank_you_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"]
@@ -80,23 +83,24 @@ orientation = [ "portrait", "landscape"]
 # English Thank you campaign mobile wp.org
 [thank_you_mobile_en]
 name = "English Mobile"
-campaign = "C23_WMDE_Mobile_EN_ty"
+campaign = "C24_WMDE_Mobile_EN_ty"
 icon = "mobile"
-campaign_tracking = "ty01-mob-en-240101"
+campaign_tracking = "ty01-mob-en-250101"
 description = "Thank you banner"
 preview_link = "/en-mobile/wiki/Main_Page?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype"
+preview_link_darkmode = "/en-mobile/wiki/Main_Page?devbanner={{banner}}&useskin=minerva&banner=B22_WMDE_local_prototype&minervanightmode=1"
 preview_url = 'https://en.m.wikipedia.org/wiki/Main_Page?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_org"
 
 [thank_you_mobile_en.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.en.ts"
-pagename = "B23_WMDE_Mobile_EN_ty_ctrl"
-tracking = "org-mob-ty-240101-en-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.en.ts"
+pagename = "B24_WMDE_Mobile_EN_ty_ctrl"
+tracking = "org-mob-ty-250101-en-ctrl"
 
 [thank_you_mobile_en.banners.var]
-filename = "./banners/thank_you/banner_var.en.ts"
-pagename = "B23_WMDE_Mobile_EN_ty_var"
-tracking = "org-mob-ty-240101-en-var"
+filename = "./banners/thank_you_2024/banner_var.en.ts"
+pagename = "B24_WMDE_Mobile_EN_ty_var"
+tracking = "org-mob-ty-250101-en-var"
 
 [thank_you_mobile_en.test_matrix]
 device = [ 'samsung_s10', 'iphone_xs_max', 'iphone_5s', 'iphone_se', "iphone_8", "iphone_12_mini", "iphone_7_plus", "iphone_11_pro_max"]
@@ -105,23 +109,24 @@ orientation = [ "portrait", "landscape"]
 # Thank you campaign ipad wp.org
 [thank_you_ipad]
 name = "iPad"
-campaign = "C23_WMDE_ipad_DE_ty"
+campaign = "C24_WMDE_ipad_DE_ty"
 icon = "pad"
-campaign_tracking = "ty01-ipad-240101"
+campaign_tracking = "ty01-ipad-250101"
 description = "Thank you banner"
 preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype"
+preview_link_darkmode = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1"
 preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_org"
 
 [thank_you_ipad.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.de.ts"
-pagename = "B23_WMDE_ipad_DE_ty_ctrl"
-tracking = "org-ipad-ty-240101-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.de.ts"
+pagename = "B24_WMDE_ipad_DE_ty_ctrl"
+tracking = "org-ipad-ty-250101-ctrl"
 
 [thank_you_ipad.banners.var]
-filename = "./banners/thank_you/banner_var.de.ts"
-pagename = "B23_WMDE_ipad_DE_ty_var"
-tracking = "org-ipad-ty-240101-var"
+filename = "./banners/thank_you_2024/banner_var.de.ts"
+pagename = "B24_WMDE_ipad_DE_ty_var"
+tracking = "org-ipad-ty-250101-var"
 
 [thank_you_ipad.test_matrix]
 device = [ 'ipad_mini', 'ipad', 'ipad_pro_9_7_inch', 'ipad_pro_12_inch' ]
@@ -130,42 +135,44 @@ orientation = [ "portrait", "landscape"]
 # Thank you campaign wp.de
 [thank_you_wpde]
 campaign = "WPDE Desktop"
-name = "C23_WPDE_Desktop_DE_ty"
+name = "C24_WPDE_Desktop_DE_ty"
 icon = "desktop"
-campaign_tracking = "ty01-wpde-240101"
+campaign_tracking = "ty01-wpde-250101"
 description = "Thank you banner"
 preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde"
+preview_link_darkmode = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde"
 preview_url = 'https://www.wikipedia.de/?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_de"
 wrap_in_wikitext = false
 
 [thank_you_wpde.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.wpde.ts"
-pagename = "B23_WPDE_Desktop_DE_ty_ctrl"
-tracking = "de-wpde-ty-240101-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.wpde.ts"
+pagename = "B24_WPDE_Desktop_DE_ty_ctrl"
+tracking = "de-wpde-ty-250101-ctrl"
 
 [thank_you_wpde.banners.var]
-filename = "./banners/thank_you/banner_var.wpde.ts"
-pagename = "B23_WPDE_Desktop_DE_ty_var"
-tracking = "de-wpde-ty-240101-var"
+filename = "./banners/thank_you_2024/banner_var.wpde.ts"
+pagename = "B24_WPDE_Desktop_DE_ty_var"
+tracking = "de-wpde-ty-250101-var"
 
 [thank_you_wpde_mobile]
 campaign = "WPDE Mobile"
-name = "C23_WPDE_Mobile_DE_ty"
+name = "C24_WPDE_Mobile_DE_ty"
 icon = "mobile"
-campaign_tracking = "ty01-wpde-mob-240101"
+campaign_tracking = "ty01-wpde-mob-250101"
 description = "Thank you banner"
 preview_link = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde"
+preview_link_darkmode = "/wikipedia.de?devbanner={{banner}}&banner=dev-mode-wpde"
 preview_url = 'https://www.wikipedia.de/?banner={{PLACEHOLDER}}'
 wrapper_template = "wikipedia_de"
 wrap_in_wikitext = false
 
 [thank_you_wpde_mobile.banners.ctrl]
-filename = "./banners/thank_you/banner_ctrl.wpde.ts"
-pagename = "B23_WPDE_Mobile_DE_ty_ctrl"
-tracking = "de-wpde-mob-ty-240101-ctrl"
+filename = "./banners/thank_you_2024/banner_ctrl.wpde.ts"
+pagename = "B24_WPDE_Mobile_DE_ty_ctrl"
+tracking = "de-wpde-mob-ty-250101-ctrl"
 
 [thank_you_wpde_mobile.banners.var]
-filename = "./banners/thank_you/banner_var.wpde.ts"
-pagename = "B23_WPDE_Mobile_DE_ty_var"
-tracking = "de-wpde-mob-ty-240101-var"
+filename = "./banners/thank_you_2024/banner_var.wpde.ts"
+pagename = "B24_WPDE_Mobile_DE_ty_var"
+tracking = "de-wpde-mob-ty-250101-var"