Skip to content

Commit

Permalink
Prepare campaign for C24_WMDE_Mobile_DE_13
Browse files Browse the repository at this point in the history
  • Loading branch information
Abban committed Dec 18, 2024
1 parent edf56f7 commit f784aad
Show file tree
Hide file tree
Showing 21 changed files with 1,830 additions and 9 deletions.
70 changes: 70 additions & 0 deletions banners/mobile/C24_WMDE_Mobile_DE_13/banner_ctrl.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
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';
import messages from './messages';
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
import { createFormItems } from './form_items';
import { createFormActions } from '@src/createFormActions';
import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
import { WindowTimer } from '@src/utils/Timer';

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 currencyFormatter = localeFactory.getCurrencyFormatter();

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' ) ),
localCloseTracker: new LocalStorageCloseTracker()
},
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
} );

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.provide( 'timer', new WindowTimer() );

app.mount( page.getBannerContainer() );
72 changes: 72 additions & 0 deletions banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { createVueApp } from '@src/createVueApp';

import './styles/styles_var.scss';

import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
import Banner from './components/BannerVar.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';
import messages from './messages';
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
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 );
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 date = new Date();
const currencyFormatter = localeFactory.getCurrencyFormatter();

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' ) ),
localCloseTracker: new LocalStorageCloseTracker()
},
resizeHandler: new WindowResizeHandler(),
banner: Banner,
impressionCount
} );

app.use( TranslationPlugin, translator );
app.use( DynamicTextPlugin, {
campaignParameters: page.getCampaignParameters(),
date,
formatters: localeFactory.getFormatters(),
impressionCount,
translator,
urgencyMessageDaysLeft: 45
} );

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.provide( 'timer', new WindowTimer() );
app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( date, page.getCampaignParameters() ) );

app.mount( page.getBannerContainer() );
255 changes: 255 additions & 0 deletions banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerCtrl.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
<template>
<div class="wmde-banner-wrapper" :class="contentState">
<MiniBanner
@close="onCloseMiniBanner"
@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 #progress>
<ProgressBar amount-to-show-on-right="TARGET"/>
</template>

<template #donation-form="{ formInteraction }: any">
<MultiStepDonation
:step-controllers="stepControllers"
@form-interaction="formInteraction"
:page-scroller="pageScroller"
:submit-callback="onSubmit"
>

<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
<MainDonationFormAdaptiveAmounts
:page-index="pageIndex"
@submit="submit"
:is-current="isCurrent"
@previous="previous"
:amounts-for-form-items="amountOptionsForForm"
>

<template #button>
<MainDonationFormButton/>
</template>

</MainDonationFormAdaptiveAmounts>
</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>

<SoftClose
v-if="contentState === ContentStates.SoftClosing"
:show-close-icon="true"
@close="() => onClose( 'SoftClose', CloseChoices.Close )"
@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
>
<template #buttons="{ timer }: any">
<button
class="wmde-banner-soft-close-button wmde-banner-soft-close-button-maybe-later"
@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.MaybeLater )">
{{ $translate( 'soft-close-button-maybe-later' ) }}
</button>
<button
class="wmde-banner-soft-close-button wmde-banner-soft-close-button-close"
@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.Close )">
{{ $translate( 'soft-close-button-close' ) }}
</button>
<button
class="wmde-banner-soft-close-button wmde-banner-soft-close-button-already-donated"
@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.AlreadyDonated )">
{{ $translate( 'soft-close-button-already-donated' ) }}
</button>
</template>
</SoftClose>

<FundsModal
:content="useOfFundsContent"
:is-funds-modal-visible="isFundsModalVisible"
@hideFundsModal="onHideFundsModal"
>
<template #infographic>
<WMDEFundsForwardingDE/>
</template>
</FundsModal>
</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 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 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';
import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
import { Translator } from '@src/Translator';
import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
enum ContentStates {
Mini = 'wmde-banner-wrapper--mini',
FullPage = 'wmde-banner-wrapper--full-page',
SoftClosing = 'wmde-banner-wrapper--soft-closing'
}
enum FormStepNames {
MainDonationFormStep = 'MainDonationForm',
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
}
interface Props {
bannerState: BannerStates;
useOfFundsContent: useOfFundsContentInterface;
pageScroller: PageScroller;
remainingImpressions: number;
localCloseTracker: LocalCloseTracker;
}
const props = defineProps<Props>();
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
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 )
];
const localTranslator = inject<Translator>( 'translator' );
const currencyFormatter = inject<Currency>( 'currencyFormatter' );
const localFormItemsBuilder = new FormItemsBuilder( localTranslator, currencyFormatter.euroAmount.bind( currencyFormatter ) );
const amountOptionsFive = localFormItemsBuilder.setAmounts( 5, 15, 25, 50, 100 ).getItems().amounts;
const amountOptionsTen = localFormItemsBuilder.setAmounts( 10, 15, 25, 50, 100 ).getItems().amounts;
const amountOptionsForForm = ref<FormItem[]>( amountOptionsTen );
watch( contentState, async () => {
emit( 'bannerContentChanged' );
} );
function onCloseMiniBanner(): void {
if ( props.remainingImpressions > 0 ) {
contentState.value = ContentStates.SoftClosing;
} else {
onClose( 'MainBanner', CloseChoices.Close );
}
}
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
emit( 'modalClosed' );
props.localCloseTracker.setItem( feature, userChoice );
}
function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
window.clearInterval( timer );
onClose( feature, userChoice );
}
const onSubmit = (): void => {
const closeChoice = props.localCloseTracker.getItem();
if ( closeChoice !== '' ) {
tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
}
};
function onshowFullPageBanner(): void {
slideShowStopped.value = true;
contentState.value = ContentStates.FullPage;
emit( 'modalOpened' );
amountOptionsForForm.value = amountOptionsFive;
tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
}
function onshowFullPageBannerPreselected(): void {
slideShowStopped.value = true;
amountOptionsForForm.value = amountOptionsTen;
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>
Loading

0 comments on commit f784aad

Please sign in to comment.