Merge pull request #514 from wmde/C24_WMDE_Mobile_DE_03

C24_WMDE_Mobile_DE_03

banners/mobile/C24_WMDE_Mobile_DE_03/banner_ctrl.ts

@@ -0,0 +1,69 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+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 app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+const currencyFormatter = localeFactory.getCurrencyFormatter();
+
+app.provide( 'currencyFormatter', currencyFormatter );
+app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
+app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount ) );
+app.provide( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );

banners/mobile/C24_WMDE_Mobile_DE_03/banner_var.ts

@@ -0,0 +1,69 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import Banner from './components/BannerCtrl.vue';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import PageWPORG from '@src/page/PageWPORG';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import TranslationPlugin from '@src/TranslationPlugin';
+import { Translator } from '@src/Translator';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import eventMappings from './event_map';
+
+// Locale-specific imports
+import messages from './messages';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+
+// Channel specific form setup
+import { createFormItems } from './form_items';
+import { createFormActions } from '@src/createFormActions';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker() );
+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 app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: runtimeEnvironment.getBannerDelay( 7500 ),
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
+		pageScroller: new WindowPageScroller(),
+		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'mobile' ) )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator,
+	urgencyMessageDaysLeft: 45
+} );
+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( 'tracker', tracker );
+
+app.mount( page.getBannerContainer() );

banners/mobile/C24_WMDE_Mobile_DE_03/components/BannerCtrl.vue

@@ -0,0 +1,162 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onClose( 'MiniBanner', CloseChoices.Close )"
+			@show-full-page-banner="onshowFullPageBanner"
+			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+		>
+			<template #banner-slides>
+				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :page-scroller="pageScroller">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #button>
+								<MainDonationFormButton/>
+							</template>
+
+						</MainDonationForm>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:show-manual-upgrade-option = false
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+						>
+							<template #back>
+								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter :show-funds-link="false"/>
+			</template>
+		</FullPageBanner>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBanner.vue';
+import MiniBanner from './MiniBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.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';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import MainDonationFormButton from '@src/components/DonationForm/Forms/MainDonationFormButton.vue';
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+}
+
+function onshowFullPageBannerPreselected(): void {
+	slideShowStopped.value = true;
+	formModel.selectedAmount.value = '10';
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+}
+
+const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
+	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
+		'.wmde-banner-form' :
+		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
+	);
+	isFundsModalVisible.value = false;
+};
+
+</script>

banners/mobile/C24_WMDE_Mobile_DE_03/components/FullPageBanner.vue

@@ -0,0 +1,39 @@
+<template>
+	<div class="wmde-banner-full">
+		<button class="wmde-banner-full-close t-close-full-banner" @click.prevent="$emit( 'close' )">
+			<CloseIconMobile/>
+		</button>
+		<div class="wmde-banner-full-content">
+			<div class="wmde-banner-full-info">
+				<slot name="banner-text"/>
+			</div>
+			<div class="wmde-banner-full-call-to-action">
+				Jetzt sind Sie <span class="wmde-banner-full-call-to-action-optional-text">in Deutschland</span> gefragt.
+			</div>
+
+			<slot name="donation-form"/>
+
+			<div class="wmde-banner-full-small-print">
+				<span>
+					<a
+						id="application-of-funds-link"
+						class="wmde-banner-footer-usage-link t-use-of-funds-link"
+						@click.prevent="$emit( 'showFundsModal' )"
+					>
+						{{ $translate( 'use-of-funds-link' ) }}
+					</a>
+				</span>
+			</div>
+
+			<slot name="footer"/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+
+defineEmits( [ 'close', 'showFundsModal' ] );
+
+</script>

banners/mobile/C24_WMDE_Mobile_DE_03/components/MiniBanner.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="wmde-banner-mini">
+		<div class="wmde-banner-mini-close">
+			<button class="wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
+				<CloseIconMobile/>
+			</button>
+		</div>
+
+		<header class="wmde-banner-mini-headline">
+			<div class="wmde-banner-mini-headline-background">
+				<span class="wmde-banner-mini-headline-content">Ist Ihnen Wikipedia 10&nbsp;€ wert?</span>
+			</div>
+		</header>
+
+		<div class="wmde-banner-mini-slideshow">
+			<slot name="banner-slides"/>
+		</div>
+
+		<div class="wmde-banner-mini-button-group">
+			<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselected' )">
+				Jetzt 10 &euro; spenden
+			</button>
+			<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
+				Anderen Betrag
+			</button>
+		</div>
+
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+
+defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselected', 'close' ] );
+
+</script>