Prepare CTRL for C24_WMDE_Desktop_DE_21

- based on desktop DE 20 ctrl
 (single progress bar)

https://phabricator.wikimedia.org/T381952

banners/desktop/C24_WMDE_Desktop_DE_21/banner_var.ts

@@ -16,15 +16,14 @@ 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 eventMappings from './event_map_var';
 import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
-import messages from './messages_var';
+import messages from './messages';
 import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { WindowTimer } from '@src/utils/Timer';
-import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const date = new Date();
 const localeFactory = new LocaleFactoryDe();
@@ -70,6 +69,5 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
 app.provide( 'tracker', tracker );
 app.provide( 'timer', new WindowTimer() );
-app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
 
 app.mount( page.getBannerContainer() );

banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerVar.vue

@@ -28,7 +28,7 @@
 			</template>
 
 			<template #progress>
-				<DoubleProgressBar/>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
 			</template>
 
 			<template #donation-form="{ formInteraction }: any">
@@ -83,7 +83,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 './MainBannerVar.vue';
+import MainBanner from './MainBanner_var.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import BannerText from '../content/BannerText.vue';
 import BannerSlides from '../content/BannerSlides.vue';
@@ -104,7 +104,7 @@ 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 DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';

banners/desktop/C24_WMDE_Desktop_DE_21/event_map_var.ts

@@ -0,0 +1,47 @@
+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';
+
+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 )
+	]
+] );

banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles_var.scss

@@ -4,20 +4,22 @@
 	$select-group: true,
 	$upgrade-to-yearly: true,
 	$fallback-banner: true,
-	$double-progress-bar: true,
+	$progress-bar: true,
 	$soft-close: 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 'MainBannerVar' with (
+@use 'MainBanner' with (
 	$banner-height: 357px,
 	$form-width: 300px
 );
 @use 'src/themes/Treedip/defaults';
 @use 'src/themes/Treedip/ButtonClose/ButtonClose';
-@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with (
+	$progress-bar-margin: 0 15px
+);
 @use 'src/themes/Treedip/DonationForm/DonationForm';
 @use 'src/themes/Treedip/DonationForm/MultiStepDonation';
 @use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup';
@@ -34,7 +36,9 @@
 @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
+	$message-header-small-up-padding-bottom: 8px,
+	$message-header-padding-top: 20px,
+	$message-header-small-up-padding-top: 20px
 );
 @use 'src/themes/Treedip/SoftClose/SoftClose';
 @use 'src/themes/Treedip/Slider/KeenSlider' with (