Implement VAR for C24_WMDE_Desktop_DE_21

- adds "minimise banner on scroll" for VAR

- there are now multiple emits of "bannerContentChanged" due to the resizing into Minimize banner,
so the softclose test needs to be a little more flexible in its expectation

- add tests for autoscroll feature on desktop
https://phabricator.wikimedia.org/T381952

banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerVar.vue

@@ -6,7 +6,10 @@
 			:bannerState="bannerState"
 		>
 			<template #close-button>
-				<ButtonClose @close="onCloseMain"/>
+				<div class="wmde-banner-minimised-button-group">
+					<button class="wmde-banner-minimised-minimise" @click.prevent="onMinimiseBanner">Verkleinern <ChevronDownIcon/></button>
+					<ButtonClose @close="() => onCloseMain( 'MainBanner', CloseChoices.Close )"/>
+				</div>
 			</template>
 
 			<template #banner-title>
@@ -58,6 +61,20 @@
 
 		</MainBanner>
 
+		<MinimisedBanner
+			v-if="contentState === ContentStates.Minimised"
+			@maximise="() => onMaximiseBanner( 'maximise' )"
+			@maximise-cta="() => onMaximiseBanner( 'cta' )"
+			@close="() => onCloseMain( 'MinimisedBanner', CloseChoices.Close )"
+		>
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="isFundsModalVisible = true"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+		</MinimisedBanner>
+
 		<SoftClose
 			v-if="contentState === ContentStates.SoftClosing"
 			:show-close-icon="true"
@@ -83,7 +100,7 @@
 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_var.vue';
+import MainBanner from './MainBanner.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import BannerText from '../content/BannerText.vue';
 import BannerSlides from '../content/BannerSlides.vue';
@@ -111,9 +128,15 @@ import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnRe
 import { Tracker } from '@src/tracking/Tracker';
 import { useBannerHider } from '@src/components/composables/useBannerHider';
 import BannerTitle from '@banners/desktop/C24_WMDE_Desktop_DE_15/content/BannerTitle.vue';
+import MinimisedBanner from '@banners/desktop/C24_WMDE_Desktop_DE_21/components/MinimisedBanner.vue';
+import ChevronDownIcon from '@src/components/ReasonsToDonate/Icons/ChevronDownIcon.vue';
+import { useScrollMinimiser } from '@banners/desktop/C24_WMDE_Desktop_DE_21/useScrollMinimiser';
+import { BannerMinimisedEvent } from '@banners/desktop/C24_WMDE_Desktop_DE_00/events/BannerMinimisedEvent';
+import { BannerMaximisedEvent } from '@banners/desktop/C24_WMDE_Desktop_DE_00/events/BannerMaximisedEvent';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
+	Minimised = 'wmde-banner-wrapper--minimised',
 	SoftClosing = 'wmde-banner-wrapper--soft-closing',
 }
 
@@ -142,11 +165,20 @@ const stepControllers = [
 	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
 	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
+const wasMinimised = ref<boolean>( false );
 
 watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+useScrollMinimiser( 500, wasMinimised, () => {
+	if ( props.bannerState === BannerStates.Visible && contentState.value === ContentStates.Main ) {
+		contentState.value = ContentStates.Minimised;
+		wasMinimised.value = true;
+		tracker.trackEvent( new BannerMinimisedEvent() );
+	}
+} );
+
 const onSubmit = (): void => {
 	// special callback function: asking for previous close choices
 	const closeChoice = props.localCloseTracker.getItem();
@@ -155,18 +187,32 @@ const onSubmit = (): void => {
 	}
 };
 
-function onCloseMain(): void {
+function onCloseMain( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
 	if ( props.remainingImpressions > 0 ) {
 		contentState.value = ContentStates.SoftClosing;
+		emit( 'bannerContentChanged' );
 	} else {
-		onClose( 'MainBanner', CloseChoices.Close );
+		onClose( feature, userChoice );
 	}
 }
 
 function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
+function onMinimiseBanner(): void {
+	contentState.value = ContentStates.Minimised;
+	tracker.trackEvent( new BannerMinimisedEvent() );
+	wasMinimised.value = true;
+	emit( 'bannerContentChanged' );
+}
+
+function onMaximiseBanner( userChoice: string ): void {
+	contentState.value = ContentStates.Main;
+	tracker.trackEvent( new BannerMaximisedEvent( userChoice ) );
+	emit( 'bannerContentChanged' );
+}
+
 function onHideFundsModal(): void {
 	isFundsModalVisible.value = false;
 	emit( 'modalClosed' );

banners/desktop/C24_WMDE_Desktop_DE_21/components/MinimisedBanner.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="wmde-banner-minimised">
+
+		<div class="wmde-banner-minimised-button-group">
+			<button class="wmde-banner-minimised-maximise" @click.prevent="$emit( 'maximise' )">Vergrößern <ChevronDownIcon/></button>
+			<ButtonClose @close="$emit( 'close' )"/>
+		</div>
+
+		<div class="wmde-banner-minimised-content">
+			<div class="wmde-banner-minimised-content-message">
+				<MinimisedText/>
+			</div>
+			<div class="wmde-banner-minimised-content-button">
+				<button class="wmde-banner-minimised-submit-button" @click.prevent="$emit( 'maximise-cta' )">
+					Jetzt spenden
+				</button>
+			</div>
+		</div>
+
+		<slot name="footer"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import MinimisedText from '../content/MinimisedText.vue';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import ChevronDownIcon from '@src/components/Icons/ChevronDownIcon.vue';
+defineEmits( [ 'close', 'maximise', 'maximise-cta' ] );
+</script>

banners/desktop/C24_WMDE_Desktop_DE_21/content/MinimisedText.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="wmde-banner-minimised-message">
+		<InfoIconItalic/>
+		<p class="wmde-banner-minimised-title">
+			{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in Deutschland nutzen. Die Zeit wird knapp!
+		</p>
+		<p>
+			Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann geben Sie jetzt etwas zurück.
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { inject, onMounted, onUnmounted } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
+
+const { getCurrentDateAndTime } = inject<DynamicContent>( 'dynamicCampaignText' );
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>

banners/desktop/C24_WMDE_Desktop_DE_21/event_map_var.ts

@@ -15,6 +15,8 @@ import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSu
 import { ShownEvent } from '@src/tracking/events/ShownEvent';
 import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { BannerMinimisedEvent } from '@banners/desktop/C24_WMDE_Desktop_DE_00/events/BannerMinimisedEvent';
+import { BannerMaximisedEvent } from '@banners/desktop/C24_WMDE_Desktop_DE_00/events/BannerMaximisedEvent';
 
 export default new Map<string, TrackingEventConverterFactory>( [
 	[ ShownEvent.EVENT_NAME, mapShownEvent ],
@@ -43,5 +45,13 @@ export default new Map<string, TrackingEventConverterFactory>( [
 	[ BannerSubmitOnReturnEvent.EVENT_NAME,
 		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent =>
 			new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 )
+	],
+	[ BannerMinimisedEvent.EVENT_NAME,
+		( e: BannerMinimisedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( e.eventName, 1 )
+	],
+	[ BannerMaximisedEvent.EVENT_NAME,
+		( e: BannerMaximisedEvent ): WMDELegacyBannerEvent =>
+			new WMDELegacyBannerEvent( `${e.eventName}-${e.userChoice}`, 1 )
 	]
 ] );

banners/desktop/C24_WMDE_Desktop_DE_21/styles/MainBanner_var.scss

@@ -0,0 +1,58 @@
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+
+	.previous {
+		--slider-chevron: var( --previous-button-fill );
+	}
+
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		height: auto;
+	}
+
+	&-message-container {
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 11px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		margin-bottom: 0;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		background: var( --message-background );
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 40px 0 0;
+	}
+}