From 2f71906aaa7dc5b2b3f3c7e54727b6cc6b70bb90 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Wed, 25 Oct 2023 08:25:22 +0200
Subject: [PATCH 1/2] Prepare campaign for C23_WMDE_iPad_01

Ticket: https://phabricator.wikimedia.org/T349700
---
 banners/pad/banner_var.ts                     |   4 +-
 banners/pad/components/BannerCtrl.vue         |  40 ++---
 banners/pad/components/BannerVar.vue          | 165 ------------------
 banners/pad/content/AlreadyDonated.vue        |  10 --
 banners/pad/content/BannerSlides.vue          |  18 +-
 banners/pad/content/BannerSlidesVar.vue       |  42 -----
 banners/pad/event_map.ts                      |  14 +-
 banners/pad/styles/BannerVarHeadline.scss     |  36 ----
 banners/pad/styles/MainBanner.scss            |  31 ++++
 banners/pad/styles/styles_var.scss            |  40 -----
 campaign_info.toml                            |  14 +-
 .../banners/pad/components/BannerCtrl.spec.ts |  12 --
 test/banners/pad/components/BannerVar.spec.ts | 129 --------------
 13 files changed, 73 insertions(+), 482 deletions(-)
 delete mode 100644 banners/pad/components/BannerVar.vue
 delete mode 100644 banners/pad/content/AlreadyDonated.vue
 delete mode 100644 banners/pad/content/BannerSlidesVar.vue
 delete mode 100644 banners/pad/styles/BannerVarHeadline.scss
 delete mode 100644 banners/pad/styles/styles_var.scss
 delete mode 100644 test/banners/pad/components/BannerVar.spec.ts

diff --git a/banners/pad/banner_var.ts b/banners/pad/banner_var.ts
index e3f97f3b2..acbbd2f92 100644
--- a/banners/pad/banner_var.ts
+++ b/banners/pad/banner_var.ts
@@ -1,9 +1,9 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles_var.scss';
+import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
-import Banner from './components/BannerVar.vue';
+import Banner from './components/BannerCtrl.vue';
 import getBannerDelay from '@src/utils/getBannerDelay';
 import { WindowResizeHandler } from '@src/utils/ResizeHandler';
 import PageWPORG from '@src/page/PageWPORG';
diff --git a/banners/pad/components/BannerCtrl.vue b/banners/pad/components/BannerCtrl.vue
index d44513767..581731535 100644
--- a/banners/pad/components/BannerCtrl.vue
+++ b/banners/pad/components/BannerCtrl.vue
@@ -2,11 +2,14 @@
 	<div class="wmde-banner-wrapper" :class="contentState">
 		<MainBanner
 			@close="onCloseMain"
-			@form-interaction="$emit( 'bannerContentChanged' )"
+			@form-interaction="onFormInteraction"
 			v-if="contentState === ContentStates.Main"
 			:bannerState="bannerState"
 		>
 			<template #banner-slides="{ play }: any">
+				<div class="wmde-banner-content-headline">
+					<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 5&nbsp;€ wert?</span>
+				</div>
 				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
@@ -47,10 +50,7 @@
 			</template>
 
 			<template #footer>
-				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
-					@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
-				/>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
 			</template>
 		</MainBanner>
 
@@ -67,23 +67,12 @@
 			@hideFundsModal="isFundsModalVisible = false"
 		/>
 
-		<AlreadyDonatedModal
-			:is-visible="isAlreadyDonatedModalVisible"
-			:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-			@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-		>
-			<template #already-donated-content>
-				<AlreadyDonatedContent/>
-			</template>
-		</AlreadyDonatedModal>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ref, watch } from 'vue';
+import { nextTick, 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';
@@ -92,12 +81,9 @@ import BannerSlides from '../content/BannerSlides.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
-import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
@@ -109,6 +95,7 @@ import {
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -129,7 +116,6 @@ defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
@@ -141,6 +127,12 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onFormInteraction(): void {
+	nextTick( () => {
+		emit( 'bannerContentChanged' );
+	} );
+}
+
 function onCloseMain(): void {
 	contentState.value = ContentStates.SoftClosing;
 }
@@ -149,8 +141,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onShowAlreadyDonatedModal(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
 </script>
diff --git a/banners/pad/components/BannerVar.vue b/banners/pad/components/BannerVar.vue
deleted file mode 100644
index 52719d111..000000000
--- a/banners/pad/components/BannerVar.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-	<div class="wmde-banner-wrapper" :class="contentState">
-		<MainBanner
-			@close="onCloseMain"
-			@form-interaction="onFormInteraction"
-			v-if="contentState === ContentStates.Main"
-			:bannerState="bannerState"
-		>
-			<template #banner-slides="{ play }: any">
-				<div class="wmde-banner-content-headline">
-					<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 5&nbsp;€ wert?</span>
-				</div>
-				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
-
-					<template #slides="{ currentSlide }: any">
-						<BannerSlides :currentSlide="currentSlide"/>
-					</template>
-
-					<template #left-icon>
-						<ChevronLeftIcon :fill="'#990a00'"/>
-					</template>
-
-					<template #right-icon>
-						<ChevronRightIcon :fill="'#990a00'"/>
-					</template>
-
-				</KeenSlider>
-			</template>
-
-			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
-			</template>
-
-			<template #donation-form="{ formInteraction }: any">
-				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
-
-					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
-					</template>
-
-					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<UpgradeToYearlyButtonForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
-							<template #back>
-								<ChevronLeftIcon/>
-							</template>
-						</UpgradeToYearlyButtonForm>
-					</template>
-
-				</MultiStepDonation>
-			</template>
-
-			<template #footer>
-				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
-					@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
-				/>
-			</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"
-		/>
-
-		<AlreadyDonatedModal
-			:is-visible="isAlreadyDonatedModalVisible"
-			:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-			@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-		>
-			<template #already-donated-content>
-				<AlreadyDonatedContent/>
-			</template>
-		</AlreadyDonatedModal>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { nextTick, 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 BannerSlides from '../content/BannerSlidesVar.vue';
-import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
-import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
-import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
-import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
-import KeenSlider from '@src/components/Slider/KeenSlider.vue';
-import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
-import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
-import { useFormModel } from '@src/components/composables/useFormModel';
-import {
-	createSubmittableMainDonationForm
-} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
-import {
-	createSubmittableUpgradeToYearly
-} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
-import { CloseChoices } from '@src/domain/CloseChoices';
-import { CloseEvent } from '@src/tracking/events/CloseEvent';
-import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
-
-enum ContentStates {
-	Main = 'wmde-banner-wrapper--main',
-	SoftClosing = 'wmde-banner-wrapper--soft-closing'
-}
-
-enum FormStepNames {
-	MainDonationFormStep = 'MainDonationForm',
-	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
-}
-
-interface Props {
-	bannerState: BannerStates;
-	useOfFundsContent: useOfFundsContentInterface;
-}
-
-defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
-
-const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
-const contentState = ref<ContentStates>( ContentStates.Main );
-const formModel = useFormModel();
-const stepControllers = [
-	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
-	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
-];
-
-watch( contentState, async () => {
-	emit( 'bannerContentChanged' );
-} );
-
-function onFormInteraction(): void {
-	nextTick( () => {
-		emit( 'bannerContentChanged' );
-	} );
-}
-
-function onCloseMain(): void {
-	contentState.value = ContentStates.SoftClosing;
-}
-
-function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
-	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
-}
-
-function onShowAlreadyDonatedModal(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
-</script>
diff --git a/banners/pad/content/AlreadyDonated.vue b/banners/pad/content/AlreadyDonated.vue
deleted file mode 100644
index da3203b20..000000000
--- a/banners/pad/content/AlreadyDonated.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <div>
-        <p><strong>Vielen Dank für Ihre Unterstützung</strong></p>
-        <p>Es freut uns, dass Sie uns bereits unterstützt haben oder regelmäßig unterstützen. Ohne Sie wäre die
-            Finanzierung unserer Projekte nicht möglich.</p>
-        <p>Falls Sie sich eine (weitere) Spende vorstellen können, dann klicken Sie "Vielleicht später". Falls
-            nicht, klicken Sie: "Für dieses Jahr reicht es". In diesem Fall wird ein Cookie in Ihrem Browser
-            gesetzt, der die Anzeige der Banner bis Ende des Jahres verhindert.</p>
-    </div>
-</template>
diff --git a/banners/pad/content/BannerSlides.vue b/banners/pad/content/BannerSlides.vue
index e0bc5d50b..87d41fb5a 100644
--- a/banners/pad/content/BannerSlides.vue
+++ b/banners/pad/content/BannerSlides.vue
@@ -1,25 +1,20 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p class="headline">
+		<p>
 			<InfoIcon/>
-			<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+			An alle, die Wikipedia in Deutschland nutzen: 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 sichern.
 		</p>
-		<p>Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
-			heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu
-			sichern.</p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
 			durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 2">
 		<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
-			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span>
-		</p>
+			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span></p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
 			Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann nehmen Sie sich doch bitte eine Minute
@@ -34,13 +29,14 @@ import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 
 interface Props {
-	currentSlide: number,
+	currentSlide: number
 }
 
 defineProps<Props>();
 
 const {
 	currentDayName,
+	currentDate,
 	campaignDaySentence,
 	visitorsVsDonorsSentence
 }: DynamicContent = inject( 'dynamicCampaignText' );
diff --git a/banners/pad/content/BannerSlidesVar.vue b/banners/pad/content/BannerSlidesVar.vue
deleted file mode 100644
index 83c34a8fd..000000000
--- a/banners/pad/content/BannerSlidesVar.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p>
-			<InfoIcon/>
-			An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen,
-			aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }} bitten wir Sie
-			bescheiden, die Unabhängigkeit von Wikipedia zu sichern.
-		</p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 1">
-		<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
-			durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 2">
-		<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
-			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span></p>
-	</KeenSliderSlide>
-	<KeenSliderSlide :is-current="currentSlide === 3">
-		<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
-			Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann nehmen Sie sich doch bitte eine Minute
-			Zeit und geben Sie etwas zurück. Vielen Dank!</p>
-	</KeenSliderSlide>
-</template>
-
-<script setup lang="ts">
-import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import { 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,
-	campaignDaySentence,
-	visitorsVsDonorsSentence
-}: DynamicContent = inject( 'dynamicCampaignText' );
-</script>
diff --git a/banners/pad/event_map.ts b/banners/pad/event_map.ts
index ff7cac489..3ab209f3c 100644
--- a/banners/pad/event_map.ts
+++ b/banners/pad/event_map.ts
@@ -7,11 +7,21 @@ import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
 import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
 import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
 
 export default new Map<string, TrackingEventConverterFactory>( [
 	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
 	[ ClickAlreadyDonatedEvent.EVENT_NAME, ( e: ClickAlreadyDonatedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
 	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
-	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ]
-	// TODO add more events
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ]
 ] );
diff --git a/banners/pad/styles/BannerVarHeadline.scss b/banners/pad/styles/BannerVarHeadline.scss
deleted file mode 100644
index 6ceb43648..000000000
--- a/banners/pad/styles/BannerVarHeadline.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@use 'src/themes/Treedip/variables/colors';
-@use 'src/themes/Treedip/variables/fonts';
-
-.wmde-banner {
-	&-content {
-		&-headline {
-			font-family: fonts.$content;
-			font-size: 21px;
-			font-weight: bold;
-			text-align: center;
-			margin-top: 20px;
-			padding: 0 52px;
-			position: relative;
-
-			&::before {
-				content: '';
-				position: absolute;
-				height: 1px;
-				top: 50%;
-				left: 52px;
-				right: 52px;
-				background: colors.$primary;
-				z-index: 98;
-			}
-
-			&-text {
-				position: relative;
-				display: inline-block;
-				z-index: 99;
-				padding: 0 10px;
-				line-height: 24px;
-				background: colors.$white;
-			}
-		}
-	}
-}
diff --git a/banners/pad/styles/MainBanner.scss b/banners/pad/styles/MainBanner.scss
index 6c2c287d8..96b84e1a6 100644
--- a/banners/pad/styles/MainBanner.scss
+++ b/banners/pad/styles/MainBanner.scss
@@ -1,4 +1,5 @@
 @use 'src/themes/Treedip/variables/colors';
+@use 'src/themes/Treedip/variables/fonts';
 
 $banner-height: 353px !default;
 $form-width: 256px !default;
@@ -14,6 +15,36 @@ $form-width: 256px !default;
 	&-content {
 		display: flex;
 		flex: 1 1 auto;
+
+		&-headline {
+			font-family: fonts.$content;
+			font-size: 21px;
+			font-weight: bold;
+			text-align: center;
+			margin-top: 20px;
+			padding: 0 52px;
+			position: relative;
+
+			&::before {
+				content: '';
+				position: absolute;
+				height: 1px;
+				top: 50%;
+				left: 52px;
+				right: 52px;
+				background: colors.$primary;
+				z-index: 98;
+			}
+
+			&-text {
+				position: relative;
+				display: inline-block;
+				z-index: 99;
+				padding: 0 10px;
+				line-height: 24px;
+				background: colors.$white;
+			}
+		}
 	}
 
 	&-column-left {
diff --git a/banners/pad/styles/styles_var.scss b/banners/pad/styles/styles_var.scss
deleted file mode 100644
index e16525e53..000000000
--- a/banners/pad/styles/styles_var.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-// 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: 353px,
-	$form-width: 256px
-);
-@use './BannerVarHeadline';
-@use 'src/themes/UseOfFunds/UseOfFunds';
-@use 'src/themes/Treedip/defaults';
-@use 'src/themes/Treedip/ButtonClose/ButtonClose';
-@use 'src/themes/Treedip/ProgressBar/ProgressBar' with (
-	$progress-bar-margin: 0 15px
-);
-@use 'src/themes/Treedip/DonationForm/DonationForm' with (
-	$button-font-size: 12px
-);
-@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons' with (
-	$height: 30px
-);
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton' with (
-	$height: 30px
-);
-@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
-@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
-	$padding: 40px 0 0
-);
-@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm';
-@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
-@use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
-@use 'src/themes/Treedip/Footer/BannerFooter' with (
-	$right-column-width: 256px
-);
-@use 'src/themes/Treedip/Footer/SelectionInput';
-@use 'src/themes/Treedip/Message/Message';
-@use 'src/themes/Treedip/Slider/KeenSlider';
-@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';
-@use 'src/themes/Treedip/SoftClose/SoftClose';
diff --git a/campaign_info.toml b/campaign_info.toml
index bacf0fa7e..17ebcd93c 100644
--- a/campaign_info.toml
+++ b/campaign_info.toml
@@ -60,9 +60,9 @@ orientation = [ "portrait", "landscape"]
 [pad]
 name = "iPad"
 icon = "pad"
-campaign = "C23_WMDE_iPad_00"
-description = "VAR has a header text above the slider"
-campaign_tracking = "pad00-ba-230426"
+campaign = "C23_WMDE_iPad_01"
+description = "VAR has payment logos"
+campaign_tracking = "pad01-ba-231030"
 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"
@@ -70,13 +70,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE"
 
 [pad.banners.ctrl]
 filename = "./banners/pad/banner_ctrl.ts"
-pagename = "B23_WMDE_iPad_00_ctrl"
-tracking = "org-pad00-230501-ctrl"
+pagename = "B23_WMDE_iPad_01_ctrl"
+tracking = "org-pad01-231030-ctrl"
 
 [pad.banners.var]
 filename = "./banners/pad/banner_var.ts"
-pagename = "B23_WMDE_iPad_00_var"
-tracking = "org-pad00-230501-var"
+pagename = "B23_WMDE_iPad_01_var"
+tracking = "org-pad01-231030-var"
 
 [pad.test_matrix]
 device = [ 'ipad_mini', 'ipad', 'ipad_pro_9_7_inch', 'ipad_pro_12_inch' ]
diff --git a/test/banners/pad/components/BannerCtrl.spec.ts b/test/banners/pad/components/BannerCtrl.spec.ts
index 3ed9b012f..7d50632b9 100644
--- a/test/banners/pad/components/BannerCtrl.spec.ts
+++ b/test/banners/pad/components/BannerCtrl.spec.ts
@@ -10,7 +10,6 @@ import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
-import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
@@ -116,15 +115,4 @@ describe( 'BannerCtrl.vue', () => {
 		} );
 	} );
 
-	describe( 'Already Donated Modal', () => {
-		test.each( [
-			[ 'expectShowsAlreadyDonatedModal' ],
-			[ 'expectHidesAlreadyDonatedModal' ],
-			[ 'expectFiresMaybeLaterEvent' ],
-			[ 'expectFiresGoAwayEvent' ]
-		] )( '%s', async ( testName: string ) => {
-			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
 } );
diff --git a/test/banners/pad/components/BannerVar.spec.ts b/test/banners/pad/components/BannerVar.spec.ts
deleted file mode 100644
index b2c574d0e..000000000
--- a/test/banners/pad/components/BannerVar.spec.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { afterEach, beforeEach, describe, test } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import Banner from '../../../../banners/pad/components/BannerVar.vue';
-import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
-import { useOfFundsContent } from '@test/banners/useOfFundsContent';
-import { formItems } from '@test/banners/formItems';
-import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
-import { TrackerStub } from '@test/fixtures/TrackerStub';
-import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds';
-import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
-import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
-import { resetFormModel } from '@test/resetFormModel';
-import { useFormModel } from '@src/components/composables/useFormModel';
-import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
-import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import { bannerMainFeatures } from '@test/features/MainBanner';
-
-const formModel = useFormModel();
-const translator = ( key: string ): string => key;
-
-describe( 'BannerVar.vue', () => {
-	let wrapper: VueWrapper<any>;
-	beforeEach( () => {
-		resetFormModel( formModel );
-	} );
-
-	const getWrapper = ( dynamicContent: DynamicContent = null ): VueWrapper<any> => {
-		// attachTo the document body to fix an issue with Vue Test Utils where
-		// clicking a submit button in a form does not fire the submit event
-		wrapper = mount( Banner, {
-			attachTo: document.body,
-			props: {
-				bannerState: BannerStates.Pending,
-				useOfFundsContent
-			},
-			global: {
-				mocks: {
-					$translate: translator
-				},
-				provide: {
-					translator: { translate: translator },
-					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
-					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
-					currencyFormatter: new CurrencyEn(),
-					formItems,
-					tracker: new TrackerStub()
-				}
-			}
-		} );
-
-		return wrapper;
-	};
-
-	afterEach( () => {
-		wrapper.unmount();
-	} );
-
-	describe( 'Main Banner', () => {
-		test.each( [
-			[ 'expectDoesNotEmitCloseEvent' ]
-		] )( '%s', async ( testName: string ) => {
-			await bannerMainFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
-	describe( 'Content', () => {
-		test.each( [
-			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
-			[ 'expectSlideShowStopsOnFormInteraction' ]
-		] )( '%s', async ( testName: string ) => {
-			await bannerContentFeatures[ testName ]( getWrapper() );
-		} );
-
-		test.each( [
-			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
-		] )( '%s', async ( testName: string ) => {
-			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
-		} );
-	} );
-
-	describe( 'Donation Form Happy Paths', () => {
-		test.each( [
-			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
-			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
-			[ 'expectMainDonationFormGoesToUpgrade' ],
-			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
-			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
-			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
-		] )( '%s', async ( testName: string ) => {
-			await donationFormFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
-	describe( 'Soft Close', () => {
-		test.each( [
-			[ 'expectShowsSoftClose' ],
-			[ 'expectEmitsSoftCloseCloseEvent' ],
-			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
-			[ 'expectEmitsSoftCloseTimeOutEvent' ],
-			[ 'expectEmitsBannerContentChangedOnSoftClose' ]
-		] )( '%s', async ( testName: string ) => {
-			await softCloseFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
-	describe( 'Use of Funds', () => {
-		test.each( [
-			[ 'expectShowsUseOfFunds' ],
-			[ 'expectHidesUseOfFunds' ]
-		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
-	describe( 'Already Donated Modal', () => {
-		test.each( [
-			[ 'expectShowsAlreadyDonatedModal' ],
-			[ 'expectHidesAlreadyDonatedModal' ],
-			[ 'expectFiresMaybeLaterEvent' ],
-			[ 'expectFiresGoAwayEvent' ]
-		] )( '%s', async ( testName: string ) => {
-			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
-		} );
-	} );
-
-} );

From 12d7c6aa027a9741cb00d2f4de91a19ce02f55ea Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Wed, 25 Oct 2023 09:11:48 +0200
Subject: [PATCH 2/2] Implement VAR for C23_WMDE_iPad_01

- VAR has logo payment buttons
- add comma in slides for both banners

Ticket: https://phabricator.wikimedia.org/T349700
---
 banners/pad/banner_var.ts                     |   6 +-
 banners/pad/components/BannerVar.vue          | 167 ++++++++++++++++++
 banners/pad/content/BannerSlides.vue          |   4 +-
 banners/pad/form_items_var.ts                 |  20 +++
 banners/pad/styles/MainBanner.scss            |  18 +-
 banners/pad/styles/MainBannerVar.scss         |  82 +++++++++
 banners/pad/styles/styles.scss                |   2 +-
 banners/pad/styles/styles_var.scss            |  44 +++++
 .../DonationForm/MultiStepDonation.vue        |   7 +-
 .../SelectCustomAmountButton.scss             |   3 +-
 .../SubComponents/SelectGroupButtons.scss     |   5 +-
 .../SubComponents/SelectGroupImageLabel.scss  |  46 +++++
 test/banners/pad/components/BannerVar.spec.ts | 117 ++++++++++++
 13 files changed, 507 insertions(+), 14 deletions(-)
 create mode 100644 banners/pad/components/BannerVar.vue
 create mode 100644 banners/pad/form_items_var.ts
 create mode 100644 banners/pad/styles/MainBannerVar.scss
 create mode 100644 banners/pad/styles/styles_var.scss
 create mode 100644 src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss
 create mode 100644 test/banners/pad/components/BannerVar.spec.ts

diff --git a/banners/pad/banner_var.ts b/banners/pad/banner_var.ts
index acbbd2f92..9c55ce596 100644
--- a/banners/pad/banner_var.ts
+++ b/banners/pad/banner_var.ts
@@ -1,9 +1,9 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles.scss';
+import './styles/styles_var.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
-import Banner from './components/BannerCtrl.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';
@@ -18,7 +18,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 
 // Channel specific form setup
-import { createFormItems } from './form_items';
+import { createFormItems } from './form_items_var';
 import { createFormActions } from '@src/createFormActions';
 
 // Content
diff --git a/banners/pad/components/BannerVar.vue b/banners/pad/components/BannerVar.vue
new file mode 100644
index 000000000..6244e8064
--- /dev/null
+++ b/banners/pad/components/BannerVar.vue
@@ -0,0 +1,167 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@close="onCloseMain"
+			@form-interaction="onFormInteraction"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #banner-slides="{ play }: any">
+				<div class="wmde-banner-content-headline">
+					<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 5&nbsp;€ wert?</span>
+				</div>
+				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+					<template #left-icon>
+						<ChevronLeftIcon :fill="'#990a00'"/>
+					</template>
+
+					<template #right-icon>
+						<ChevronRightIcon :fill="'#990a00'"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #label-payment-ppl>
+								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
+							</template>
+
+							<template #label-payment-bez>
+								<span class="wmde-banner-select-group-label with-logos sepa"><SepaLogo/></span>
+							</template>
+
+							<template #label-payment-mcp>
+								<span class="wmde-banner-select-group-label with-logos credit-cards">
+									<VisaLogo/>
+									<MastercardLogo/>
+									<AmexLogo/>
+								</span>
+							</template>
+
+						</MainDonationForm>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+							<template #back>
+								<ChevronLeftIcon/>
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</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 { nextTick, 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 BannerSlides from '../content/BannerSlides.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import AmexLogo from '@src/components/PaymentLogos/AmexLogo.vue';
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+}
+
+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.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onFormInteraction(): void {
+	nextTick( () => {
+		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/banners/pad/content/BannerSlides.vue b/banners/pad/content/BannerSlides.vue
index 87d41fb5a..3cbf0d6f2 100644
--- a/banners/pad/content/BannerSlides.vue
+++ b/banners/pad/content/BannerSlides.vue
@@ -3,13 +3,13 @@
 		<p>
 			<InfoIcon/>
 			An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen,
-			aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }} den {{ currentDate }} bitten wir Sie
+			aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie
 			bescheiden, die Unabhängigkeit von Wikipedia zu sichern.
 		</p>
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
-			durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
+			durch Spenden von durchschnittlich 22,25&nbsp;€ finanziert.</p>
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 2">
 		<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
diff --git a/banners/pad/form_items_var.ts b/banners/pad/form_items_var.ts
new file mode 100644
index 000000000..b37f2304c
--- /dev/null
+++ b/banners/pad/form_items_var.ts
@@ -0,0 +1,20 @@
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
+
+export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
+	return new FormItemsBuilder( translations, amountFormatter )
+		.setIntervals(
+			Intervals.ONCE,
+			Intervals.MONTHLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.CREDIT_CARD
+		).getItems();
+}
diff --git a/banners/pad/styles/MainBanner.scss b/banners/pad/styles/MainBanner.scss
index 96b84e1a6..f1e206403 100644
--- a/banners/pad/styles/MainBanner.scss
+++ b/banners/pad/styles/MainBanner.scss
@@ -1,12 +1,13 @@
 @use 'src/themes/Treedip/variables/colors';
 @use 'src/themes/Treedip/variables/fonts';
+@use 'src/themes/Treedip/variables/breakpoints';
 
 $banner-height: 353px !default;
 $form-width: 256px !default;
 
 .wmde-banner {
 	&-main {
-		min-height: $banner-height;
+		height: $banner-height;
 		display: flex;
 		flex-direction: column;
 		padding: 12px 24px 0;
@@ -22,18 +23,27 @@ $form-width: 256px !default;
 			font-weight: bold;
 			text-align: center;
 			margin-top: 20px;
-			padding: 0 52px;
+			padding: 0 20px;
 			position: relative;
 
+			@include breakpoints.medium-up {
+				padding: 0 52px;
+			}
+
 			&::before {
 				content: '';
 				position: absolute;
 				height: 1px;
 				top: 50%;
-				left: 52px;
-				right: 52px;
+				left: 20px;
+				right: 20px;
 				background: colors.$primary;
 				z-index: 98;
+
+				@include breakpoints.medium-up {
+					left: 52px;
+					right: 52px;
+				}
 			}
 
 			&-text {
diff --git a/banners/pad/styles/MainBannerVar.scss b/banners/pad/styles/MainBannerVar.scss
new file mode 100644
index 000000000..e485bc67e
--- /dev/null
+++ b/banners/pad/styles/MainBannerVar.scss
@@ -0,0 +1,82 @@
+@use 'src/themes/Treedip/variables/colors';
+@use 'src/themes/Treedip/variables/fonts';
+@use 'src/themes/Treedip/variables/breakpoints';
+
+$banner-height: 353px !default;
+$form-width: 256px !default;
+
+.wmde-banner {
+	&-main {
+		height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex: 1 1 auto;
+
+		&-headline {
+			font-family: fonts.$content;
+			font-size: 21px;
+			font-weight: bold;
+			text-align: center;
+			margin-top: 20px;
+			padding: 0 20px;
+			position: relative;
+
+			@include breakpoints.medium-up {
+				padding: 0 52px;
+			}
+
+			&::before {
+				content: '';
+				position: absolute;
+				height: 1px;
+				top: 50%;
+				left: 20px;
+				right: 20px;
+				background: colors.$primary;
+				z-index: 98;
+
+				@include breakpoints.medium-up {
+					left: 52px;
+					right: 52px;
+				}
+			}
+
+			&-text {
+				position: relative;
+				display: inline-block;
+				z-index: 99;
+				padding: 0 10px;
+				line-height: 24px;
+				background: colors.$white;
+			}
+		}
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		flex: 1 1 auto;
+		overflow-y: hidden;
+		margin-right: 20px;
+
+		border: 5px solid colors.$primary;
+		border-radius: 9px;
+		padding: 20px 0;
+	}
+
+	&-column-right {
+		flex: 1 1 $form-width;
+		width: $form-width;
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
+		padding: 10px 16px 10px 0;
+	}
+}
diff --git a/banners/pad/styles/styles.scss b/banners/pad/styles/styles.scss
index 6071a902c..c94d937c4 100644
--- a/banners/pad/styles/styles.scss
+++ b/banners/pad/styles/styles.scss
@@ -2,7 +2,7 @@
 @use 'src/components/BannerConductor/banner-transition';
 @use './Banner';
 @use 'MainBanner' with (
-	$banner-height: 353px,
+	$banner-height: 378px,
 	$form-width: 256px
 );
 @use 'src/themes/UseOfFunds/UseOfFunds';
diff --git a/banners/pad/styles/styles_var.scss b/banners/pad/styles/styles_var.scss
new file mode 100644
index 000000000..35ed1c910
--- /dev/null
+++ b/banners/pad/styles/styles_var.scss
@@ -0,0 +1,44 @@
+// This is the file where we import the theme-specific component styles
+@use 'src/components/BannerConductor/banner-transition';
+@use './Banner';
+@use './MainBannerVar' with (
+	$banner-height: 378px,
+	$form-width: 35%
+);
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Treedip/defaults';
+@use 'src/themes/Treedip/ButtonClose/ButtonClose';
+@use 'src/themes/Treedip/ProgressBar/ProgressBar' with (
+	$progress-bar-margin: 0 15px
+);
+@use 'src/themes/Treedip/DonationForm/DonationForm' with (
+	$button-font-size: 12px
+);
+@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup' with (
+	$interval-option-width: 33.3333%
+);
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel';
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons' with (
+	$height: 42px,
+	$padding: 0 8px 8px
+);
+@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton' with (
+	$height: 42px,
+	$padding: 0 8px 8px
+);
+@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
+	$padding: 0
+);
+@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
+@use 'src/themes/Treedip/Footer/BannerFooter' with (
+	$right-column-width: 35%
+);
+@use 'src/themes/Treedip/Footer/SelectionInput';
+@use 'src/themes/Treedip/Message/Message';
+@use 'src/themes/Treedip/Slider/KeenSlider';
+@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';
+@use 'src/themes/Treedip/SoftClose/SoftClose';
diff --git a/src/components/DonationForm/MultiStepDonation.vue b/src/components/DonationForm/MultiStepDonation.vue
index 2c6b9f6a9..8438235aa 100644
--- a/src/components/DonationForm/MultiStepDonation.vue
+++ b/src/components/DonationForm/MultiStepDonation.vue
@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 
-import { inject, nextTick, ref, useSlots } from 'vue';
+import { inject, nextTick, onMounted, ref, useSlots } from 'vue';
 import { useKeenSlider } from 'keen-slider/vue';
 import { FormActions } from '@src/domain/FormActions';
 import SubmitValues from '@src/components/DonationForm/SubComponents/SubmitValues.vue';
@@ -89,4 +89,9 @@ const onPrevious = async (): Promise<void> => {
 	await props.stepControllers[ currentStepIndex.value ].previous( multistepCallbacks );
 };
 
+onMounted( () => {
+	// This fixes Keen Slider rendering a little early and not having the correct width
+	setTimeout( () => slider.value.update() );
+} );
+
 </script>
diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss
index 860a5ae1d..2f90b6165 100644
--- a/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss
+++ b/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountButton.scss
@@ -5,13 +5,14 @@
 $font-size: 12px !default;
 $height: 36px !default;
 $border-color: #9aa0a7 !default;
+$padding: 0 4px 8px !default;
 
 .wmde-banner {
 	@include SelectCustomAmount.layout;
 
 	&-select-custom-amount {
 		position: relative;
-		padding: 0 4px 8px;
+		padding: $padding;
 
 		&-input-container {
 			width: 100%;
diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss
index e91291359..ffb1e71bb 100644
--- a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss
+++ b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupButtons.scss
@@ -5,11 +5,12 @@ $font-size: 12px !default;
 $height: 30px !default;
 $border-color: #9aa0a7 !default;
 $background-color: #f8f9fa !default;
+$padding: 0 4px 8px !default;
 
 .wmde-banner {
 	&-select-group {
 		&-option {
-			padding: 0 4px 8px;
+			padding: $padding;
 
 			label {
 				display: block;
@@ -25,7 +26,7 @@ $background-color: #f8f9fa !default;
 			background: $background-color;
 			border: 1px solid $border-color;
 			border-radius: 2px;
-			min-height: $height;
+			height: $height;
 			cursor: pointer;
 			text-align: center;
 			font-size: $font-size;
diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss
new file mode 100644
index 000000000..8e0f24cd8
--- /dev/null
+++ b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupImageLabel.scss
@@ -0,0 +1,46 @@
+@use '@src/themes/Treedip/variables/colors';
+@use '@src/themes/Treedip/variables/breakpoints';
+
+.wmde-banner {
+	&-select-group-label {
+		svg {
+			width: auto;
+			padding: 0 5px;
+		}
+		&.with-logos {
+			display: flex;
+			justify-content: center;
+		}
+
+		.paypal-logo {
+			max-width: 90px;
+		}
+
+		&.credit-cards {
+			padding: 10px 0;
+
+			svg {
+				padding: 0 5px;
+			}
+		}
+
+		.mastercard-logo {
+			transform: scale( 1.5 );
+		}
+	}
+
+	&-select-group-input:checked + .wmde-banner-select-group-label.with-logos {
+		svg path,
+		svg rect {
+			fill: colors.$white !important; // stylelint-disable-line
+
+			&.highlight-transparent {
+				fill: transparent !important; // stylelint-disable-line
+			}
+
+			&.highlight {
+				fill: colors.$secondary !important; // stylelint-disable-line
+			}
+		}
+	}
+}
diff --git a/test/banners/pad/components/BannerVar.spec.ts b/test/banners/pad/components/BannerVar.spec.ts
new file mode 100644
index 000000000..7512d78f4
--- /dev/null
+++ b/test/banners/pad/components/BannerVar.spec.ts
@@ -0,0 +1,117 @@
+import { afterEach, beforeEach, describe, test } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '../../../../banners/pad/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { TrackerStub } from '@test/fixtures/TrackerStub';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
+import { resetFormModel } from '@test/resetFormModel';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { bannerMainFeatures } from '@test/features/MainBanner';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+
+describe( 'BannerVar.vue', () => {
+	let wrapper: VueWrapper<any>;
+	beforeEach( () => {
+		resetFormModel( formModel );
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null ): VueWrapper<any> => {
+		// attachTo the document body to fix an issue with Vue Test Utils where
+		// clicking a submit button in a form does not fire the submit event
+		wrapper = mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker: new TrackerStub()
+				}
+			}
+		} );
+
+		return wrapper;
+	};
+
+	afterEach( () => {
+		wrapper.unmount();
+	} );
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
+			[ 'expectUpgradeToYearlyFormGoesToMainDonation' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+} );