Implement VAR for C24_WMDE_iPad_DE_01

- The headline of the variant banner is changed
- It has the progress bar
- It has the campaign day sentence
- It has the visitors-vs-donors sentence

Ticket: https://phabricator.wikimedia.org/T376593

banners/pad/C24_WMDE_iPad_DE_01/banner_var.ts

@@ -3,7 +3,7 @@ import { createVueApp } from '@src/createVueApp';
 import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
-import Banner from './components/BannerCtrl.vue';
+import Banner from './components/BannerVar.vue';
 import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
 import { WindowResizeHandler } from '@src/utils/ResizeHandler';
 import PageWPORG from '@src/page/PageWPORG';
@@ -22,7 +22,7 @@ import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 
 // Content
-import messages from './messages';
+import messages from './messages_var';
 import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 
 const localeFactory = new LocaleFactoryDe();

banners/pad/C24_WMDE_iPad_DE_01/components/BannerVar.vue

@@ -0,0 +1,170 @@
+<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 15 € 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/>
+								</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/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 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 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;
+	remainingImpressions: number;
+}
+
+const props = 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 {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+</script>

banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue

@@ -16,8 +16,10 @@
 		</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>
+		<p>
+			Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
+			entwickeln. <AnimatedText :content="visitorsVsDonorsSentence"/>
+		</p>
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
@@ -31,6 +33,7 @@ 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';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 
 interface Props {
 	currentSlide: number

banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue

@@ -0,0 +1,49 @@
+<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 }}, 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,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
+			entwickeln. <AnimatedText :content="visitorsVsDonorsSentence"/>
+		</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';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence
+}: DynamicContent = inject( 'dynamicCampaignText' );
+</script>

banners/pad/C24_WMDE_iPad_DE_01/messages_var.ts

@@ -0,0 +1,23 @@
+import DynamicCampaignText from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearly from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
+import SoftClose from '@src/components/SoftClose/messages/SoftClose.de';
+import Footer from '@src/components/Footer/messages/Footer.de';
+import MainDonationForm from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de';
+import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
+
+const messages: TranslationMessages = {
+	...DynamicCampaignText,
+	...UpgradeToYearly,
+	...SoftClose,
+	...Footer,
+	...MainDonationForm,
+	...AddressFormDe,
+	...AlreadyDonatedModal,
+	'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf die Unterstützung von Menschen wie Ihnen angewiesen. ' +
+		'Jährliche Spenden helfen uns nachhaltig und ermöglichen langfristige Weiterentwicklungen.</p>' +
+		'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>'
+};
+
+export default messages;