Prepare CTRL for C24_WMDE_Mobile_DE_13

Based on the VAR of test 12 Ticket: https://phabricator.wikimedia.org/T381954
wmde · Dec 18, 2024 · fa6e20c · fa6e20c
1 parent f784aad
commit fa6e20c
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 116 deletions.
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
@@ -23,6 +23,7 @@ import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
 import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const localeFactory = new LocaleFactoryDe();
 const translator = new Translator( messages );
@@ -31,7 +32,7 @@ const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(
 const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
 const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
 const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
-
+const date = new Date();
 const currencyFormatter = localeFactory.getCurrencyFormatter();
 
 const app = createVueApp( BannerConductor, {
@@ -54,7 +55,7 @@ const app = createVueApp( BannerConductor, {
 app.use( TranslationPlugin, translator );
 app.use( DynamicTextPlugin, {
 	campaignParameters: page.getCampaignParameters(),
-	date: new Date(),
+	date,
 	formatters: localeFactory.getFormatters(),
 	impressionCount,
 	translator,
@@ -66,5 +67,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
 app.provide( 'tracker', tracker );
 app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( date, page.getCampaignParameters() ) );
 
 app.mount( page.getBannerContainer() );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/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/BannerConductor.vue';
 import Banner from './components/BannerVar.vue';

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
@@ -9,7 +9,9 @@
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
-						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini">
+							<template #progress><ProgressBar/></template>
+						</BannerSlides>
 					</template>
 
 				</KeenSlider>
@@ -24,9 +26,7 @@
 				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
 			</template>
 
-			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
-			</template>
+			<template #progress><ProgressBar/></template>
 
 			<template #donation-form="{ formInteraction }: any">
 				<MultiStepDonation
@@ -143,7 +143,7 @@ import {
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
 import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
 import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
-import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import ProgressBar from '../content/ProgressBar.vue';
 import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
@@ -124,7 +124,7 @@ import { PageScroller } from '@src/utils/PageScroller/PageScroller';
 import MainDonationFormAdaptiveAmounts from '@src/components/DonationForm/Forms/MainDonationFormAdaptiveAmounts.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import BannerText from '../content/BannerText.vue';
-import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerSlides from '../content/BannerSlides.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import { Tracker } from '@src/tracking/Tracker';

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlides.vue
@@ -2,7 +2,7 @@
 
 	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
 		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
-		<ProgressBar amount-to-show-on-right="TARGET"/>
+		<slot name="progress"/>
 	</KeenSliderSlide>
 
 	<KeenSliderSlide :is-current="currentSlide === 1">
@@ -44,7 +44,6 @@ import { inject, onMounted, onUnmounted, watch } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 
 interface Props {
 	playLiveText: boolean;

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/BannerSlidesVar.vue
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles.scss
@@ -1,6 +1,6 @@
 @use 'src/themes/Modo/swatches/skin_default' with (
 	$upgrade-to-yearly-button-form: true,
-	$progress-bar: true,
+	$double-progress-bar: true,
 	$soft-close: true,
 	$thank-you-box: true
 );
@@ -24,5 +24,5 @@
 @use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
 @use 'src/themes/Modo/Slider/Slider';
 @use 'src/themes/Modo/SoftClose/SoftClose';
-@use 'src/themes/Modo/ProgressBar/ProgressBar';
+@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
 @use 'src/themes/Modo/Message/Message';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.spec.ts
@@ -72,7 +72,8 @@ describe( 'BannerCtrl.vue', () => {
 					currencyFormatter: new CurrencyDe(),
 					formItems,
 					tracker,
-					timer: timer ?? new TimerStub()
+					timer: timer ?? new TimerStub(),
+					currentCampaignTimePercentage: 42
 				}
 			}
 		} );