Implement VAR for C24_WMDE_Mobile_DE_12

- VAR uses a double progress bar Ticket: https://phabricator.wikimedia.org/T381398
wmde · Dec 10, 2024 · 2136e79 · 2136e79
1 parent 8468a73
commit 2136e79
Show file tree

Hide file tree

Showing 15 changed files with 460 additions and 14 deletions.
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_12/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_12/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/BannerConductor.vue';
 import Banner from './components/BannerVar.vue';
@@ -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_12/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_12/components/BannerVar.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
@@ -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/BannerSlides.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import { Tracker } from '@src/tracking/Tracker';
@@ -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_12/content/BannerSlidesVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_12/content/BannerSlidesVar.vue
@@ -0,0 +1,74 @@
+<template>
+
+	<KeenSliderSlide :is-current="currentSlide === 0" class="wmde-banner-slide-content-with-progress-bar">
+		<p>Unser Spendenziel: {{ goalDonationSum }} Millionen €</p>
+		<slot name="progress"/>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p><strong>Hi,</strong></p>
+		<p>
+			vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
+			heutigen {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um {{ liveDateAndTime.currentTime }} bitten wir Sie,
+			die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			{{ campaignDaySentence }}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 10&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+
+	<KeenSliderSlide :is-current="currentSlide === 4">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+			<strong> Vielen Dank!</strong>
+		</p>
+	</KeenSliderSlide>
+
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+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';
+
+interface Props {
+	playLiveText: boolean;
+	currentSlide: number
+}
+
+const props = defineProps<Props>();
+
+const {
+	currentDayName,
+	getCurrentDateAndTime,
+	goalDonationSum,
+	visitorsVsDonorsSentence,
+	campaignDaySentence,
+	averageDonation
+}: DynamicContent = inject( 'dynamicCampaignText' );
+
+const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );
+
+watch( () => props.playLiveText, ( shouldPlay: boolean ) => {
+	if ( !shouldPlay ) {
+		stopTimer();
+	}
+} );
+onMounted( startTimer );
+onUnmounted( stopTimer );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_12/content/ProgressBar.vue b/banners/mobile/C24_WMDE_Mobile_DE_12/content/ProgressBar.vue
@@ -0,0 +1,30 @@
+<template>
+	<ProgressBar :with-extra-labels="true">
+		<template #extra-label-right>
+			{{ progressBarContent.donationTarget }}
+		</template>
+		<template #amount-fill-left>
+			<HandIcon/>
+		</template>
+		<template #amount-fill-right>
+			{{ progressBarContent ? progressBarContent.amountNeeded : progressBarContent.amountDonated }}
+		</template>
+		<template #time-fill-left>
+			<TimerIcon/>
+		</template>
+		<template #time-fill-right>
+			{{ daysLeftSentence }}
+		</template>
+	</ProgressBar>
+</template>
+
+<script setup lang="ts">
+import HandIcon from '@src/components/ProgressBar/Icons/HandIcon.vue';
+import ProgressBar from '@src/components/ProgressBar/ConfigurableDoubleProgressBar.vue';
+import TimerIcon from '@src/components/ProgressBar/Icons/TimerIcon.vue';
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+
+const { progressBarContent, daysLeftSentence } = inject<DynamicContent>( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_12/messages_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_12/messages_var.ts
@@ -0,0 +1,32 @@
+import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de';
+import FooterDe from '@src/components/Footer/messages/Footer.de';
+import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de';
+import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import DoubleProgressBarDe from '@src/components/ProgressBar/messages/DoubleProgressBar.de';
+
+const messages: TranslationMessages = {
+	...DynamicCampaignTextDe,
+	...FooterDe,
+	...MainDonationFormDe,
+	...UpgradeToYearlyDe,
+	...SoftCloseDe,
+	...DoubleProgressBarDe,
+
+	// custom messages here
+	'use-of-funds-link': 'Was Ihre Spende bewirkt',
+	'payment-bank-transfer': 'Überweisung',
+	'payment-sofort': 'Sofort',
+	'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns' +
+		' besonders und ermöglichen langfristige Weiterentwicklungen.</p>' +
+		'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>',
+	'upgrade-to-yearly-no': 'Nein, ich spende einmalig {{amount}}',
+	'upgrade-to-yearly-yes': 'Ja, ich spende {{amount}} jährlich',
+	'campaign-day-only-n-days': 'Heute sind es nur noch {{days}} Tage bis zum Ende unserer Spendenkampagne.',
+	'soft-close-prompt': 'Wikipedia später unterstützen?',
+	'soft-close-button-already-donated': 'Habe schon gespendet',
+	'amount-total': ''
+};
+
+export default messages;
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_12/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_12/styles/styles_var.scss
@@ -0,0 +1,28 @@
+@use 'src/themes/Modo/swatches/skin_default' with (
+	$upgrade-to-yearly-button-form: true,
+	$double-progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Modo/defaults';
+@use 'Banner';
+@use 'MiniBanner' with (
+	$height: 336px,
+	$height-l-up: 306px
+);
+@use 'FullPageBanner';
+@use 'src/themes/Modo/Footer/Footer';
+@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
+@use 'src/themes/Modo/Footer/SelectionInput';
+@use 'src/themes/Modo/DonationForm/MultiStepDonation';
+@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Modo/Slider/Slider';
+@use 'src/themes/Modo/SoftClose/SoftClose';
+@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Modo/Message/Message';
diff --git a/src/components/ProgressBar/ConfigurableDoubleProgressBar.vue b/src/components/ProgressBar/ConfigurableDoubleProgressBar.vue
@@ -0,0 +1,60 @@
+<template>
+	<div class="wmde-banner-double-progress" :style="{
+		'--wmde-banner-progress-bar-width': progressBarContent.percentageTowardsTarget + '%',
+		'--wmde-banner-progress-bar-time-width': currentCampaignTimePercentage + '%'
+	}">
+		<div class="wmde-banner-double-progress-labels" v-if="withExtraLabels">
+			<div class="wmde-banner-double-progress-labels-left">
+				<slot name="extra-label-left"/>
+			</div>
+			<div class="wmde-banner-double-progress-labels-right">
+				<slot name="extra-label-right"/>
+			</div>
+		</div>
+		<div class="wmde-banner-double-progress-amount">
+			<div class="wmde-banner-double-progress-amount-fill">
+				<div class="text-fade">
+					<slot name="amount-fill-left"/>
+				</div>
+				<div class="text-fade">
+					<slot name="amount-fill-right"/>
+				</div>
+			</div>
+			<div class="wmde-banner-double-progress-amount-difference">!</div>
+			<div class="wmde-banner-double-progress-right-text text-fade">
+				<slot name="amount-right"/>
+			</div>
+		</div>
+		<div class="wmde-banner-double-progress-time">
+			<div class="wmde-banner-double-progress-time-fill">
+				<div class="text-fade">
+					<slot name="time-fill-left"/>
+				</div>
+				<div class="text-fade">
+					<slot name="time-fill-right"/>
+				</div>
+			</div>
+			<div class="wmde-banner-double-progress-right-text text-fade">
+				<slot name="time-right"/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+
+const { progressBarContent } = inject<DynamicContent>( 'dynamicCampaignText' );
+const currentCampaignTimePercentage = inject<number>( 'currentCampaignTimePercentage' );
+
+interface Props {
+	withExtraLabels?: boolean;
+}
+
+withDefaults( defineProps<Props>(), {
+	withExtraLabels: false
+} );
+
+</script>
diff --git a/src/components/ProgressBar/Icons/HandIcon.vue b/src/components/ProgressBar/Icons/HandIcon.vue
@@ -0,0 +1,6 @@
+<template>
+	<!-- eslint-disable max-len -->
+	<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15616 9.47413V5.56781H4.91358C5.65845 5.70113 6.40332 6.1053 7.14818 6.57402H8.51307C9.13097 6.61105 9.45473 7.23741 8.85376 7.649C8.37552 8.00027 7.74386 7.98017 7.09634 7.92197C6.64984 7.89975 6.6308 8.49967 7.09634 8.50178C7.25822 8.51448 7.43386 8.47639 7.58727 8.47639C8.39562 8.47533 9.06008 8.32086 9.46743 7.68285L9.67163 7.20567L11.702 6.19947C12.7178 5.86512 13.4393 6.92741 12.6913 7.66698C11.2206 8.73667 9.71289 9.61697 8.17026 10.328C7.04978 11.0094 5.92931 10.9861 4.80989 10.328L3.15616 9.47413ZM8.04964 0.824577C8.43371 0.423576 8.70246 0.0775938 9.29496 0.00987865C10.4059 -0.118145 11.428 1.02032 10.8672 2.14079C10.7075 2.46032 10.3826 2.8391 10.0229 3.21154C9.62825 3.61994 9.19128 4.02094 8.88444 4.3246L8.04964 5.15306L7.35979 4.4886C6.53028 3.68977 5.17704 2.68357 5.1326 1.43719C5.10086 0.564297 5.7907 0.0045884 6.58213 0.0151689C7.29102 0.0236333 7.58833 0.375964 8.04964 0.824577ZM0 5.1922H2.62714V9.86667H0V5.1922Z" style="fill: var( --double-progress-hand-fill );"/>
+	</svg>
+</template>
diff --git a/src/components/ProgressBar/Icons/TimerIcon.vue b/src/components/ProgressBar/Icons/TimerIcon.vue
@@ -0,0 +1,6 @@
+<template>
+	<!-- eslint-disable max-len -->
+	<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M4.11097 3.13384C4.11097 2.84911 4.34222 2.61816 4.62757 2.61816C4.91293 2.61816 5.14418 2.84911 5.14418 3.13384V5.29479L6.5766 5.92311C6.83754 6.03771 6.9559 6.34154 6.84106 6.60172C6.72621 6.8619 6.42172 6.98 6.16098 6.8656L4.44613 6.11333C4.25023 6.04005 4.11097 5.85159 4.11097 5.63058V3.13384ZM0.105493 3.28469C0.0906496 3.24083 0.0814699 3.19426 0.0789308 3.14573L0.000805624 1.71348C-0.0138428 1.42991 0.204908 1.18825 0.489088 1.17383C0.773268 1.15921 1.01546 1.37749 1.02991 1.66105L1.04436 1.9261C1.25721 1.65279 1.49818 1.40248 1.76331 1.17928C2.11429 0.88383 2.51292 0.631836 2.95491 0.435192C4.218 -0.127067 5.58871 -0.125703 6.78344 0.330926C7.96606 0.783071 8.97797 1.68093 9.54516 2.91966C9.5602 2.94655 9.5729 2.975 9.58305 3.00463C10.1272 4.2531 10.1208 5.6031 9.66841 6.7818C9.21528 7.96186 8.31547 8.97159 7.07406 9.53736C6.99717 9.58036 6.91046 9.60285 6.82231 9.60264C6.53695 9.60264 6.3057 9.37189 6.3057 9.08716C6.3057 8.86304 6.44906 8.67243 6.64926 8.60149C6.79945 8.5327 6.9434 8.45591 7.08071 8.37152C7.09633 8.35866 7.11293 8.34658 7.13051 8.33527C7.3518 8.19261 7.56215 8.02929 7.75239 7.84727C7.76489 7.83538 7.77797 7.82407 7.79145 7.81375C8.19497 7.41422 8.50395 6.93557 8.70376 6.41521C9.06821 5.46609 9.07036 4.37938 8.62368 3.38038L8.62348 3.37979C8.1768 2.38078 7.36586 1.65657 6.41606 1.29349C5.46488 0.930019 4.37582 0.927875 3.37464 1.37339C3.03327 1.52513 2.71503 1.72412 2.42933 1.9645C2.23675 2.12665 2.06214 2.30478 1.90686 2.49635L1.97425 2.48797C2.25726 2.45348 2.51487 2.6546 2.54944 2.937C2.58401 3.2194 2.38245 3.47646 2.09944 3.51095L0.672487 3.68635C0.405689 3.71871 0.161548 3.54194 0.105493 3.28469ZM5.53695 9.96865C5.94477 9.92304 6.1393 9.44381 5.87797 9.1275C5.76644 8.99244 5.59691 8.92599 5.42308 8.94392C5.11918 8.97802 4.81507 8.97744 4.51136 8.94138C4.32894 8.91975 4.15101 8.99439 4.0389 9.13958C3.79749 9.45979 3.9891 9.91466 4.38695 9.96495C4.76937 10.0106 5.15414 10.0115 5.53695 9.96865ZM2.24124 9.17603C2.39593 9.27854 2.58831 9.29024 2.7553 9.20994C3.11253 9.03337 3.14534 8.53932 2.81409 8.31812C2.5639 8.15344 2.32308 7.94861 2.11858 7.73033C1.93147 7.53154 1.62483 7.51108 1.41331 7.68375C1.35868 7.72844 1.31382 7.78383 1.28151 7.84651C1.24919 7.90919 1.23011 7.97782 1.22545 8.04815C1.22078 8.11848 1.23062 8.18902 1.25437 8.2554C1.27811 8.32178 1.31526 8.3826 1.3635 8.43408C1.62405 8.71083 1.92327 8.96691 2.24124 9.17603ZM0.213501 6.46978C0.270533 6.65376 0.422877 6.78784 0.612135 6.82409C0.993777 6.89484 1.31546 6.53487 1.20061 6.16497C1.1096 5.87264 1.05432 5.57523 1.03186 5.26984C1.0053 4.91261 0.637135 4.69257 0.308033 4.83465C0.107446 4.92527 -0.0134522 5.12289 0.00119625 5.34273C0.0289307 5.72588 0.0992434 6.1028 0.213501 6.46978Z" style="fill: var( --double-progress-timer-fill );"/>
+	</svg>
+</template>