Prepare CTRL for C24_WMDE_Desktop_DE_06

- based on DE 05 ctrl

https://phabricator.wikimedia.org/T375599

banners/desktop/C24_WMDE_Desktop_DE_06/banner_var.ts

@@ -1,6 +1,6 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles.scss';
+import './styles/styles_var.scss';
 
 import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
 import Banner from './components/BannerVar.vue';
@@ -68,7 +68,7 @@ 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' } ) );
+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_06/components/BannerVar.vue

@@ -24,7 +24,7 @@
 			</template>
 
 			<template #donation-form="{ formInteraction }: any">
-				<MultiStepDonation :form-action-override="formAction" :step-controllers="stepControllers" @form-interaction="formInteraction">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
 					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
 						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
@@ -53,7 +53,7 @@
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { inject, ref, watch } from 'vue';
+import { 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';
@@ -63,7 +63,7 @@ import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vu
 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 { useFormAction } from '@src/components/composables/useAmountBasedFormAction';
+import { useFormModel } from '@src/components/composables/useFormModel';
 import {
 	createSubmittableMainDonationForm
 } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
@@ -76,8 +76,6 @@ import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
 import colors from '../styles/colors';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
-import { FormActions } from '@src/domain/FormActions';
-import { useFormModel } from '@src/components/composables/useFormModel';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -104,7 +102,6 @@ const stepControllers = [
 	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
 	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
 ];
-const { formAction } = useFormAction( inject<FormActions>( 'formActions' ), 10, { smallAmount: 'ap=0', largeAmount: 'ap=1' } );
 
 watch( contentState, async () => {
 	emit( 'bannerContentChanged' );

banners/desktop/C24_WMDE_Desktop_DE_06/styles/styles_var.scss

@@ -0,0 +1,50 @@
+// This is the file where we import the theme-specific component styles
+@use '../../../../src/themes/Svingle/swatches/skin_default' with (
+	$slider: true,
+	$select-group: true,
+	$upgrade-to-yearly: true,
+	$fallback-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 'src/themes/Svingle/defaults';
+@use 'src/themes/Svingle/ButtonClose/ButtonClose';
+@use 'src/themes/Svingle/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Svingle/DonationForm/DonationForm';
+@use 'src/themes/Svingle/DonationForm/MultiStepDonation';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroupRadios';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SelectCustomAmountRadio';
+@use 'src/themes/Svingle/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Svingle/DonationForm/Forms/MainDonationForm';
+@use 'src/themes/Svingle/DonationForm/Forms/UpgradeToYearlyButtonForm' with (
+	$font-size: 14px
+);
+@use 'src/themes/Svingle/DonationForm/Forms/CustomAmountForm';
+@use 'src/themes/Svingle/Footer/BannerFooter';
+@use 'src/themes/Svingle/Footer/SelectionInput';
+@use 'src/themes/Svingle/Message/Message';
+@use 'src/themes/Svingle/Slider/KeenSlider' with (
+	$margin-bottom: 5px
+);
+
+/**
+ * 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/animated-highlight';
+@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
+@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
+@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;