Implement VAR for C24_WMDE_Desktop_DE_09

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

banners/desktop/C24_WMDE_Desktop_DE_09/banner_var.ts

@@ -0,0 +1,76 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles_var.scss';
+
+import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
+import Banner from './components/BannerVar.vue';
+import FallbackBanner from './components/FallbackBanner.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
+import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+
+const date = new Date();
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+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: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
+		localCloseTracker: new LocalStorageCloseTracker(),
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	fallbackBanner: FallbackBanner,
+	minWidthForMainBanner: 800,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date,
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );

banners/desktop/C24_WMDE_Desktop_DE_09/components/BannerVar.vue

@@ -0,0 +1,163 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #close-button>
+				<ButtonClose @close="onCloseMain"/>
+			</template>
+
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000" :navigation-color="'#ffffff'">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</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"
+					:submit-callback="onSubmit"
+				>
+
+					<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" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="isFundsModalVisible = true"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+			@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="isFundsModalVisible = false"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { inject, ref, watch } from 'vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerTextVar.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { Tracker } from '@src/tracking/Tracker';
+
+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;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+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' );
+} );
+
+const onSubmit = (): void => {
+	// special callback function: asking for previous close choices
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+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/desktop/C24_WMDE_Desktop_DE_09/content/BannerSlidesVar.vue

@@ -0,0 +1,62 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<div class="wmde-banner-message-title">
+			<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+			<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
+		</div>
+		<div class="wmde-banner-message-date">
+			<strong>
+				{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
+				Deutschland nutzen
+			</strong>
+		</div>
+		<p><AnimatedText content="Der US-Wahlkampf ist zunehmend verstörend."/> Superreiche versuchen mit
+			Millionensummen, die Wahlentscheidung zu beeinflussen. Fake-News und Manipulationen sind allgegenwärtig,
+			auch durch Diktaturen befeuert.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			Das geht uns alle an. Umso sichtbarer wird die Bedeutung von Wikipedia. Wikipedia ist glaubwürdig, weil sie
+			neutral und zuverlässig ist. Und finanziell unabhängig.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Sie ist weder käuflich, noch lässt sie sich zensieren. Daher brauchen wir am heutigen {{ currentDayName }},
+			den {{ currentDate }}, Ihre Spende – ganz gleich, ob 5&nbsp;€ oder 50&nbsp;€.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Jeder Beitrag ist ein wertvolles Zeichen für die Kraft der Vielen – und gegen das viele Geld Einzelner. Vielen
+			Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject, onMounted, onUnmounted } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	currentDate
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>

banners/desktop/C24_WMDE_Desktop_DE_09/content/BannerTextVar.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<div class="wmde-banner-message-title">
+				<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+				<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
+			</div>
+			<div class="wmde-banner-message-date">
+				<strong>
+					{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in Deutschland nutzen
+				</strong>
+			</div>
+			<p><AnimatedText content="Der US-Wahlkampf ist zunehmend verstörend."/> Superreiche versuchen mit
+				Millionensummen, die Wahlentscheidung zu beeinflussen. Fake-News und Manipulationen sind allgegenwärtig,
+				auch durch Diktaturen befeuert. Das geht uns alle an. Umso sichtbarer wird die Bedeutung von Wikipedia.
+				Wikipedia ist glaubwürdig, weil sie neutral und zuverlässig ist. Und finanziell unabhängig. Sie ist weder
+				käuflich, noch lässt sie sich zensieren. Daher brauchen wir am heutigen {{ currentDayName }}, den
+				{{ currentDate }}, Ihre Spende – ganz gleich, ob 5&nbsp;€ oder 50&nbsp;€. Jeder Beitrag ist ein
+				wertvolles Zeichen für die Kraft der Vielen – und gegen das viele Geld Einzelner. Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	currentDate
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>

banners/desktop/C24_WMDE_Desktop_DE_09/styles/styles.scss

@@ -43,7 +43,6 @@
   so they override the "default" styles with the same selector
  */
 @use 'FallbackBanner';
-@use 'src/themes/Fijitiv/animated-highlight';
 @use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
 @use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
 @use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';