diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts
index 9744c26f9..4c1e2ca7c 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts
@@ -1,9 +1,9 @@
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';
+import Banner from './components/BannerCtrl.vue';
import FallbackBanner from './components/FallbackBanner.vue';
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
@@ -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_22/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue
deleted file mode 100644
index 8701e4c3b..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/event_map_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_22/event_map_var.ts
deleted file mode 100644
index e61a5dec4..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_22/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( [
- [ 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_22/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles_var.scss
deleted file mode 100644
index 814e67a55..000000000
--- a/banners/desktop/C24_WMDE_Desktop_DE_22/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/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts
deleted file mode 100644
index 7f6e75479..000000000
--- a/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { beforeEach, describe, test, vi } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue';
-import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
-import { useOfFundsContent } from '@test/banners/useOfFundsContent';
-import { formItems } from '@test/banners/formItems';
-import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds';
-import {
- bannerContentAnimatedTextFeatures,
- bannerContentDateAndTimeFeatures,
- bannerContentDisplaySwitchFeatures,
- bannerContentFeatures
-} from '@test/features/BannerContent';
-import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
-import { useFormModel } from '@src/components/composables/useFormModel';
-import { resetFormModel } from '@test/resetFormModel';
-import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
-import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
-import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
-import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
-import { softCloseSubmitTrackingFeaturesDesktop } from '@test/features/SoftCloseSubmitTrackingDesktop';
-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;
-let tracker: Tracker;
-
-describe( 'BannerVar.vue', () => {
-
- beforeEach( () => {
- resetFormModel( formModel );
- tracker = {
- trackEvent: vi.fn()
- };
- } );
-
- const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper => {
- return mount( Banner, {
- attachTo: document.body,
- props: {
- bannerState: BannerStates.Pending,
- useOfFundsContent,
- remainingImpressions: 10,
- localCloseTracker: {
- getItem: () => '',
- setItem: () => {}
- }
- },
- global: {
- mocks: {
- $translate: translator
- },
- provide: {
- translator: { translate: translator },
- dynamicCampaignText: dynamicContent ?? newDynamicContent(),
- currentCampaignTimePercentage: 42,
- formActions: {
- donateWithAddressAction: 'https://example.com/with-address',
- donateAnonymouslyAction: 'https://example.com/without-address'
- },
- currencyFormatter: new CurrencyEn(),
- formItems,
- tracker,
- timer: timer ?? new TimerStub()
- }
- }
- } );
- };
-
- describe( 'Main Banner', () => {
- test.each( [
- [ 'expectDoesNotEmitCloseEvent' ]
- ] )( '%s', async ( testName: string ) => {
- await bannerMainFeatures[ testName ]( getWrapper() );
- } );
-
- test.each( [
- [ 'expectClosesBannerWhenWindowBecomesSmall' ]
- ] )( '%s', async ( testName: string ) => {
- await bannerAutoHideFeatures[ testName ]( getWrapper );
- } );
- } );
-
- describe( 'Content', () => {
- test.each( [
- [ 'expectSlideShowPlaysWhenBecomesVisible' ],
- [ 'expectSlideShowStopsOnFormInteraction' ]
- ] )( '%s', async ( testName: string ) => {
- await bannerContentFeatures[ testName ]( getWrapper() );
- } );
-
- test.each( [
- [ 'expectShowsSlideShowOnSmallSizes' ],
- [ 'expectShowsMessageOnLargeSizes' ]
- ] )( '%s', async ( testName: string ) => {
- await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
- } );
-
- test.each( [
- [ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
- [ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
- ] )( '%s', async ( testName: string ) => {
- await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
- } );
-
- test.each( [
- [ 'expectShowsLiveDateAndTimeInTitle' ]
- ] )( '%s', async ( testName: string ) => {
- await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
- } );
- } );
-
- describe( 'Donation Form Happy Paths', () => {
- test.each( [
- [ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
- [ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
- [ 'expectMainDonationFormGoesToUpgrade' ],
- [ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
- [ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
- ] )( '%s', async ( testName: string ) => {
- await donationFormFeatures[ testName ]( getWrapper() );
- } );
-
- test.each( [
- [ 'expectMainDonationFormSubmitsWithAddressForDirectDebit' ],
- [ 'expectMainDonationFormSubmitsWithAddressForPayPal' ],
- [ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ],
- [ 'expectUpgradeToYearlyFormSubmitsWithAddressForPayPal' ]
- ] )( '%s', async ( testName: string ) => {
- await formActionSwitchFeatures[ testName ]( getWrapper() );
- } );
- } );
-
- describe( 'Soft Close', () => {
- test.each( [
- [ 'expectShowsSoftClose' ],
- [ 'expectEmitsSoftCloseCloseEvent' ],
- [ 'expectEmitsSoftCloseMaybeLaterEvent' ],
- [ 'expectEmitsSoftCloseTimeOutEvent' ],
- [ 'expectEmitsBannerContentChangedOnSoftClose' ],
- [ 'expectShowsCloseIcon' ],
- [ 'expectCloseIconEmitsCloseEvent' ]
- ] )( '%s', async ( testName: string ) => {
- await softCloseFeatures[ testName ]( getWrapper );
- } );
- } );
-
- describe( 'Soft Close Submit Tracking', () => {
- test.each( [
- [ 'expectEmitsBannerSubmitOnReturnEvent' ],
- [ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
- ] )( '%s', async ( testName: string ) => {
- await softCloseSubmitTrackingFeaturesDesktop[ testName ]( getWrapper(), tracker );
- } );
- } );
-
- describe( 'Already Donated', () => {
- test.each( [
- [ 'expectFiresMaybeLaterEventOnLinkClick' ]
- ] )( '%s', async ( testName: string ) => {
- await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
- } );
- } );
-
- describe( 'Use of Funds', () => {
- test.each( [
- [ 'expectShowsUseOfFunds' ],
- [ 'expectHidesUseOfFunds' ]
- ] )( '%s', async ( testName: string ) => {
- await useOfFundsFeatures[ testName ]( getWrapper() );
- } );
- } );
-
- describe( 'Minimised Banner', () => {
- test.each( [
- [ 'expectAutoCollapsesTheMainBanner' ],
- [ 'expectTracksAutoCollapse' ],
- [ 'expectRemovesEventListenerWhenCollapsed' ],
- [ 'expectGoesToSoftCloseFromMinimised' ],
- [ 'expectGoesBackToMainBannerFromMinimised' ]
- ] )( '%s', async ( testName: string ) => {
- await autoCollapseFeatures[ testName ]( getWrapper, tracker );
- } );
- } );
-} );