From d7271e308574695e85c5c96d7d6b5dd29c1c47b6 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Thu, 19 Dec 2024 08:57:34 +0100
Subject: [PATCH] Prepare CTRL for C24_WMDE_Desktop_DE_23

Based on the CTRL of C24_WMDE_Desktop_DE_21

Ticket: https://phabricator.wikimedia.org/T382307
---
 .../C24_WMDE_Desktop_DE_23/banner_var.ts      |   4 +-
 .../components/BannerVar.vue                  |  41 +------
 .../components/MinimisedBanner.vue            |  29 -----
 .../content/MinimisedText.vue                 |  26 -----
 .../C24_WMDE_Desktop_DE_23/event_map_var.ts   |  57 ----------
 .../styles/MinimisedBanner.scss               | 102 ------------------
 .../styles/styles_var.scss                    |  60 -----------
 .../useScrollMinimiser.ts                     |  21 ----
 .../components/BannerVar.spec.ts              |  13 ---
 9 files changed, 5 insertions(+), 348 deletions(-)
 delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_23/components/MinimisedBanner.vue
 delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_23/content/MinimisedText.vue
 delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_23/event_map_var.ts
 delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_23/styles/MinimisedBanner.scss
 delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss
 delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_23/useScrollMinimiser.ts

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts
index 9744c26f9..c49bfc19d 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/banner_var.ts
@@ -1,6 +1,6 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles_var.scss';
+import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
 import Banner from './components/BannerVar.vue';
@@ -16,7 +16,7 @@ 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_var';
+import eventMappings from './event_map';
 import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
 import messages from './messages';
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue
index 8701e4c3b..e1cae3382 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.vue
@@ -6,7 +6,7 @@
 			:bannerState="bannerState"
 		>
 			<template #close-button>
-				<ButtonClose @close="onCloseMain( 'MainBanner', CloseChoices.Close )"/>
+				<ButtonClose @close="onCloseMain"/>
 			</template>
 
 			<template #banner-title>
@@ -58,20 +58,6 @@
 
 		</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"
@@ -125,14 +111,9 @@ 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 { 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',
 }
 
@@ -161,20 +142,11 @@ 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();
@@ -183,12 +155,11 @@ const onSubmit = (): void => {
 	}
 };
 
-function onCloseMain( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+function onCloseMain(): void {
 	if ( props.remainingImpressions > 0 ) {
 		contentState.value = ContentStates.SoftClosing;
-		emit( 'bannerContentChanged' );
 	} else {
-		onClose( feature, userChoice );
+		onClose( 'MainBanner', CloseChoices.Close );
 	}
 }
 
@@ -196,12 +167,6 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onMaximiseBanner( userChoice: string ): void {
-	contentState.value = ContentStates.Main;
-	tracker.trackEvent( new BannerMaximisedEvent( userChoice ) );
-	emit( 'bannerContentChanged' );
-}
-
 function onHideFundsModal(): void {
 	isFundsModalVisible.value = false;
 	emit( 'modalClosed' );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/components/MinimisedBanner.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/components/MinimisedBanner.vue
deleted file mode 100644
index 30fdb6458..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/components/MinimisedBanner.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/content/MinimisedText.vue b/banners/desktop/C24_WMDE_Desktop_DE_23/content/MinimisedText.vue
deleted file mode 100644
index c6141cab1..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/content/MinimisedText.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<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>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/event_map_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/event_map_var.ts
deleted file mode 100644
index e61a5dec4..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/event_map_var.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
-import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
-import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
-import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
-import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
-import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
-import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
-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 { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
-import { AlreadyDonatedShownEvent } from '@src/tracking/events/AlreadyDonatedShownEvent';
-import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
-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 ],
-	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
-	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
-	[ CustomAmountChangedEvent.EVENT_NAME,
-		( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
-			new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
-	],
-	[ AlreadyDonatedShownEvent.EVENT_NAME, ( e: AlreadyDonatedShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
-	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
-	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
-		switch ( e.feature ) {
-			case 'UpgradeToYearlyForm':
-				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
-			case 'UpgradeToMonthlyForm':
-				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
-			default:
-				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
-		}
-	} ],
-	[ FallbackBannerSubmitEvent.EVENT_NAME,
-		( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent =>
-			new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 )
-	],
-	[ 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 )
-	]
-] );
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/MinimisedBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/MinimisedBanner.scss
deleted file mode 100644
index 9de4c2a22..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/MinimisedBanner.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@use '../../../../src/themes/Treedip/variables/globals';
-@use '../../../../src/themes/Treedip/variables/fonts';
-
-.wmde-banner {
-	&-minimised {
-		--chevron-color: var( --minimised-control-fill );
-
-		padding: 12px 24px 0;
-
-		&-content {
-			display: flex;
-
-			&-message {
-				display: flex;
-				flex: 1 1 auto;
-				flex-direction: column;
-				justify-content: center;
-				padding: 11px 15px 11px 34px;
-				font-size: 14px;
-
-				border: 5px solid var( --message-border );
-				border-radius: 9px;
-
-				svg {
-					float: left;
-					margin: 10px 0 0 -22px;
-				}
-			}
-
-			&-button {
-				flex: 0 0 auto;
-				display: flex;
-				flex-direction: column;
-				justify-content: end;
-				padding-left: 30px;
-			}
-		}
-
-		&-title {
-			font-family: fonts.$content;
-			font-size: 18px;
-			font-weight: bold;
-		}
-
-		&-submit-button {
-			width: 300px;
-			background: var( --minimised-button-background );
-			color: var( --minimised-button-color );
-			font-weight: bold;
-			line-height: 36px;
-			border: 0;
-			border-radius: 18px;
-			padding: 0 10px;
-			transition: background-color 500ms globals.$banner-easing;
-			cursor: pointer;
-
-			&:hover,
-			&:focus {
-				background: var( --minimised-button-background-hover );
-			}
-		}
-
-		&-button-group {
-			position: absolute;
-			z-index: 2;
-			top: 12px;
-			right: 24px;
-			height: 30px;
-			width: 300px;
-			display: flex;
-			justify-content: space-between;
-
-			.wmde-banner-close {
-				position: static;
-			}
-		}
-
-		&-minimise,
-		&-maximise {
-			background: none;
-			border: 2px solid var( --minimised-control-border );
-			border-radius: 15px;
-			cursor: pointer;
-			color: var( --minimised-control-color );
-			padding-right: 8px;
-			margin-right: 8px;
-			font-size: 14px;
-			font-weight: bold;
-
-			svg {
-				width: 20px;
-			}
-		}
-
-		&-minimise {
-			svg {
-				transform: rotate( 180deg );
-				margin-left: 3px;
-			}
-		}
-	}
-}
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss
deleted file mode 100644
index 814e67a55..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/styles/styles_var.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-// This is the file where we import the theme-specific component styles
-@use 'src/themes/Treedip/swatches/skin_default' with (
-	$slider: true,
-	$select-group: true,
-	$upgrade-to-yearly: true,
-	$fallback-banner: true,
-	$double-progress-bar: true,
-	$soft-close: true,
-	$minimised-banner: true,
-);
-@use 'src/components/BannerConductor/banner-transition';
-@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
-@use 'Banner';
-@use 'src/themes/UseOfFunds/UseOfFunds';
-@use 'MainBanner' with (
-	$banner-height: 357px,
-	$form-width: 300px
-);
-@use 'MinimisedBanner';
-@use 'src/themes/Treedip/defaults';
-@use 'src/themes/Treedip/ButtonClose/ButtonClose';
-@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
-@use 'src/themes/Treedip/DonationForm/DonationForm';
-@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio';
-@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
-@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm';
-@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
-	$font-size: 14px
-);
-@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
-@use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
-@use 'src/themes/Treedip/Footer/SelectionInput';
-@use 'src/themes/Treedip/Message/Message'  with (
-	$slider-main-headline-font-size: 25px,
-	$message-header-padding-bottom: 8px,
-	$message-header-small-up-padding-bottom: 8px
-);
-@use 'src/themes/Treedip/SoftClose/SoftClose';
-@use 'src/themes/Treedip/Slider/KeenSlider' with (
-	$slider-padding: 0
-);
-
-/**
- * Fallback banner with "Fijitiv" theme
- * All selectors in Fijitiv theme are prefixed with the ".wmde-banner-fallback" class selector,
-  so they override the "default" styles with the same selector
- */
-@use 'FallbackBanner';
-@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
-@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter' with (
-	$fallback-large-footer-right-before-border-color: white
-);
-@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter';
-@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with (
-	$progress-bar-margin: 0 15px
-);
-@use 'src/themes/Fijitiv/Slider/KeenSlider' as FallbackSlider;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_23/useScrollMinimiser.ts b/banners/desktop/C24_WMDE_Desktop_DE_23/useScrollMinimiser.ts
deleted file mode 100644
index d25f66108..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_23/useScrollMinimiser.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { onMounted, onUnmounted, Ref, watch } from 'vue';
-
-export function useScrollMinimiser( switchThreshold: number, hasMinimised: Ref<boolean>, onScrollBelowThreshold: () => void ): void {
-	const scrollHandler = (): void => {
-		if ( window.scrollY > switchThreshold ) {
-			onScrollBelowThreshold();
-		}
-	};
-
-	onMounted( () => {
-		window.addEventListener( 'scroll', scrollHandler );
-	} );
-
-	onUnmounted( () => {
-		window.removeEventListener( 'scroll', scrollHandler );
-	} );
-
-	watch( hasMinimised, () => {
-		window.removeEventListener( 'scroll', scrollHandler );
-	} );
-}
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts
index df719c594..faab3dbc0 100644
--- a/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_23/components/BannerVar.spec.ts
@@ -25,7 +25,6 @@ import { softCloseSubmitTrackingFeaturesDesktop } from '@test/features/SoftClose
 import { Tracker } from '@src/tracking/Tracker';
 import { TimerStub } from '@test/fixtures/TimerStub';
 import { Timer } from '@src/utils/Timer';
-import { autoCollapseFeatures } from '@test/features/AutoCollapseDesktop';
 
 const formModel = useFormModel();
 const translator = ( key: string ): string => key;
@@ -176,16 +175,4 @@ describe( 'BannerVar.vue', () => {
 			await useOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );
-
-	describe( 'Minimised Banner', () => {
-		test.each( [
-			[ 'expectAutoCollapsesTheMainBanner' ],
-			[ 'expectTracksAutoCollapse' ],
-			[ 'expectRemovesEventListenerWhenCollapsed' ],
-			[ 'expectGoesToSoftCloseFromMinimised' ],
-			[ 'expectGoesBackToMainBannerFromMinimised' ]
-		] )( '%s', async ( testName: string ) => {
-			await autoCollapseFeatures[ testName ]( getWrapper, tracker );
-		} );
-	} );
 } );