Skip to content

Commit e098ebb

Browse files
moiikanamoiikana
authored
Merge pull request #898 from wmde/WMDE_FR_2025_Desktop_DE_16
WMDE_FR_2025_Desktop_DE_16
2 parents bd74468 + 62daa64 commit e098ebb

File tree

21 files changed

+1129
-9
lines changed

21 files changed

+1129
-9
lines changed

‎banners/desktop/WMDE_FR_2025_Desktop_DE_16/banner_ctrl.ts‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
6+
import Banner from './components/BannerCtrl.vue';
7+
import FallbackBanner from './components/FallbackBanner.vue';
8+
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
9+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
10+
import PageWPORG from '@src/page/PageWPORG';
11+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
12+
import { SkinFactory } from '@src/page/skin/SkinFactory';
13+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
14+
import TranslationPlugin from '@src/TranslationPlugin';
15+
import { Translator } from '@src/Translator';
16+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
17+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
18+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
19+
import eventMappings from './event_map';
20+
import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
21+
import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
22+
import messages from './messages';
23+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
24+
import { createFormItems } from './form_items';
25+
import { createFormActions } from '@src/createFormActions';
26+
import { WindowTimer } from '@src/utils/Timer';
27+
import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
28+
29+
const date = new Date();
30+
const localeFactory = new LocaleFactoryDe();
31+
const translator = new Translator( messages );
32+
const mediaWiki = new WindowMediaWiki();
33+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
34+
const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
35+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
36+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
37+
38+
const app = createVueApp( BannerConductor, {
39+
page,
40+
bannerConfig: {
41+
delay: runtimeEnvironment.getBannerDelay( 7500 ),
42+
transitionDuration: 1000
43+
},
44+
bannerCategory: 'fundraising',
45+
bannerProps: {
46+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
47+
remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
48+
localCloseTracker: new LocalStorageCloseTracker(),
49+
donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
50+
},
51+
resizeHandler: new WindowResizeHandler(),
52+
banner: Banner,
53+
fallbackBanner: FallbackBanner,
54+
minWidthForMainBanner: 800,
55+
impressionCount
56+
} );
57+
58+
app.use( TranslationPlugin, translator );
59+
app.use( DynamicTextPlugin, {
60+
campaignParameters: page.getCampaignParameters(),
61+
date,
62+
formatters: localeFactory.getFormatters(),
63+
impressionCount,
64+
translator
65+
} );
66+
67+
const currencyFormatter = localeFactory.getCurrencyFormatter();
68+
69+
app.provide( 'currencyFormatter', currencyFormatter );
70+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
71+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { ap: '0' } ) );
72+
app.provide( 'tracker', tracker );
73+
app.provide( 'timer', new WindowTimer() );
74+
app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
75+
76+
app.mount( page.getBannerContainer() );

‎banners/desktop/WMDE_FR_2025_Desktop_DE_16/banner_var.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
6+
import Banner from './components/BannerCtrl.vue';
7+
import FallbackBanner from './components/FallbackBanner.vue';
8+
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
9+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
10+
import PageWPORG from '@src/page/PageWPORG';
11+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
12+
import { SkinFactory } from '@src/page/skin/SkinFactory';
13+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
14+
import TranslationPlugin from '@src/TranslationPlugin';
15+
import { Translator } from '@src/Translator';
16+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
17+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
18+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
19+
import eventMappings from './event_map';
20+
import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
21+
import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
22+
import messages from './messages_var';
23+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
24+
import { createFormItems } from './form_items';
25+
import { createFormActions } from '@src/createFormActions';
26+
import { WindowTimer } from '@src/utils/Timer';
27+
import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
28+
import { RoundedIntegerDe } from '@src/utils/DynamicContent/formatters/RoundedIntegerDe';
29+
30+
const date = new Date();
31+
const localeFactory = new LocaleFactoryDe();
32+
const translator = new Translator( messages );
33+
const mediaWiki = new WindowMediaWiki();
34+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
35+
const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
36+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
37+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
38+
39+
const formatters = localeFactory.getFormatters();
40+
formatters.integer = new RoundedIntegerDe();
41+
42+
const app = createVueApp( BannerConductor, {
43+
page,
44+
bannerConfig: {
45+
delay: runtimeEnvironment.getBannerDelay( 7500 ),
46+
transitionDuration: 1000
47+
},
48+
bannerCategory: 'fundraising',
49+
bannerProps: {
50+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
51+
remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
52+
localCloseTracker: new LocalStorageCloseTracker(),
53+
donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
54+
},
55+
resizeHandler: new WindowResizeHandler(),
56+
banner: Banner,
57+
fallbackBanner: FallbackBanner,
58+
minWidthForMainBanner: 800,
59+
impressionCount
60+
} );
61+
62+
app.use( TranslationPlugin, translator );
63+
app.use( DynamicTextPlugin, {
64+
campaignParameters: page.getCampaignParameters(),
65+
date,
66+
formatters,
67+
impressionCount,
68+
translator
69+
} );
70+
71+
const currencyFormatter = localeFactory.getCurrencyFormatter();
72+
73+
app.provide( 'currencyFormatter', currencyFormatter );
74+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
75+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { ap: '0' } ) );
76+
app.provide( 'tracker', tracker );
77+
app.provide( 'timer', new WindowTimer() );
78+
app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
79+
80+
app.mount( page.getBannerContainer() );

‎banners/desktop/WMDE_FR_2025_Desktop_DE_16/components/BannerCtrl.vue‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<template>
2+
<div class="wmde-banner-wrapper" :class="contentState">
3+
<MainBanner
4+
@form-interaction="$emit( 'bannerContentChanged' )"
5+
v-if="contentState === ContentStates.Main"
6+
:bannerState="bannerState"
7+
>
8+
<template #close-button>
9+
<ButtonClose @close="onCloseMain"/>
10+
</template>
11+
12+
<template #banner-title>
13+
<BannerTitle/>
14+
</template>
15+
16+
<template #banner-text>
17+
<BannerText/>
18+
</template>
19+
20+
<template #banner-slides="{ play }: any">
21+
<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000" :navigation-color="'#ffffff'">
22+
23+
<template #slides="{ currentSlide }: any">
24+
<BannerSlides :currentSlide="currentSlide"/>
25+
</template>
26+
27+
</KeenSlider>
28+
</template>
29+
30+
<template #progress>
31+
<ProgressBar amount-to-show-on-right="TARGET"/>
32+
</template>
33+
34+
<template #donation-form="{ formInteraction }: any">
35+
<MultiStepDonation
36+
:step-controllers="stepControllers"
37+
@form-interaction="formInteraction"
38+
:submit-callback="onSubmit"
39+
>
40+
41+
<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
42+
<MainDonationForm
43+
:page-index="pageIndex"
44+
@submit="submit"
45+
:is-current="isCurrent"
46+
@previous="previous"
47+
>
48+
<template #label-payment-ppl>
49+
<span class="wmde-banner-select-group-label with-logos paypal">
50+
<PayPalIcon/><span>Paypal</span>
51+
</span>
52+
</template>
53+
54+
<template #interval-select-group="{ fieldName, selectionItems, isValid, errorMessage, disabledOptions }: any">
55+
<SelectGroup
56+
:field-name="fieldName"
57+
:selectionItems="selectionItems"
58+
:isValid="isValid"
59+
:errorMessage="errorMessage"
60+
v-model:inputValue="interval"
61+
:disabledOptions="disabledOptions"
62+
/>
63+
</template>
64+
65+
<template #label-payment-mcp>
66+
<span class="wmde-banner-select-group-label with-logos credit-cards">
67+
<MasterCardIcon/><span>Kreditkarte</span>
68+
</span>
69+
</template>
70+
71+
<template #label-payment-ueb>
72+
<span class="wmde-banner-select-group-label with-logos bank-transfer">
73+
<BankTransferIcon/><span>Überweisung</span>
74+
</span>
75+
</template>
76+
77+
<template #label-payment-bez>
78+
<span class="wmde-banner-select-group-label with-logos bank-transfer">
79+
<DirectDebitIcon/><span>Lastschrift</span>
80+
</span>
81+
</template>
82+
</MainDonationForm>
83+
</template>
84+
85+
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
86+
<UpgradeToYearlyButtonForm
87+
:page-index="pageIndex"
88+
@submit="submit"
89+
:is-current="isCurrent"
90+
@previous="previous"
91+
/>
92+
</template>
93+
94+
</MultiStepDonation>
95+
</template>
96+
97+
<template #footer>
98+
<FooterAlreadyDonated
99+
@showFundsModal="onModalOpened"
100+
@clickedAlreadyDonatedLink="onClose( 'MainBanner', CloseChoices.AlreadyDonated )"
101+
/>
102+
</template>
103+
104+
</MainBanner>
105+
106+
<FundsModal
107+
:content="useOfFundsContent"
108+
:visible="isFundsModalVisible"
109+
@hide="onHideFundsModal"
110+
@call-to-action="onHideFundsModal"
111+
/>
112+
</div>
113+
</template>
114+
115+
<script setup lang="ts">
116+
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
117+
import { inject, ref, watch } from 'vue';
118+
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
119+
import MainBanner from './MainBanner.vue';
120+
import FundsModal from '@src/components/UseOfFunds/UseOfFundsModal.vue';
121+
import BannerText from '../content/BannerText.vue';
122+
import BannerSlides from '../content/BannerSlides.vue';
123+
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
124+
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
125+
import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
126+
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
127+
import { useFormModel } from '@src/components/composables/useFormModel';
128+
import {
129+
createSubmittableMainDonationForm
130+
} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
131+
import {
132+
createSubmittableUpgradeToYearly
133+
} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
134+
import { CloseChoices } from '@src/domain/CloseChoices';
135+
import { CloseEvent } from '@src/tracking/events/CloseEvent';
136+
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
137+
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
138+
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
139+
import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
140+
import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
141+
import { Tracker } from '@src/tracking/Tracker';
142+
import { useBannerHider } from '@src/components/composables/useBannerHider';
143+
import BannerTitle from '../content/BannerTitle.vue';
144+
import BankTransferIcon from '@src/components/PaymentLogos/BankTransferIcon.vue';
145+
import PayPalIcon from '@src/components/PaymentLogos/PayPalIcon.vue';
146+
import DirectDebitIcon from '@src/components/PaymentLogos/DirectDebitIcon.vue';
147+
import MasterCardIcon from '@src/components/PaymentLogos/MasterCardIcon.vue';
148+
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
149+
import SelectGroup from '@src/components/DonationForm/SubComponents/SelectGroup.vue';
150+
151+
enum ContentStates {
152+
Main = 'wmde-banner-wrapper--main',
153+
}
154+
155+
enum FormStepNames {
156+
MainDonationFormStep = 'MainDonationForm',
157+
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
158+
}
159+
160+
interface Props {
161+
bannerState: BannerStates;
162+
useOfFundsContent: useOfFundsContentInterface;
163+
localCloseTracker: LocalCloseTracker;
164+
}
165+
166+
const props = defineProps<Props>();
167+
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
168+
useBannerHider( 800, emit );
169+
170+
const tracker = inject<Tracker>( 'tracker' );
171+
172+
const isFundsModalVisible = ref<boolean>( false );
173+
const contentState = ref<ContentStates>( ContentStates.Main );
174+
const formModel = useFormModel();
175+
const { interval } = formModel;
176+
const stepControllers = [
177+
createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
178+
createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
179+
];
180+
181+
watch( contentState, async () => {
182+
emit( 'bannerContentChanged' );
183+
} );
184+
185+
const onSubmit = (): void => {
186+
// special callback function: asking for previous close choices
187+
const closeChoice = props.localCloseTracker.getItem();
188+
if ( closeChoice !== '' ) {
189+
tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
190+
}
191+
};
192+
193+
function onCloseMain(): void {
194+
onClose( 'MainBanner', CloseChoices.Close );
195+
}
196+
197+
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
198+
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
199+
}
200+
201+
function onHideFundsModal(): void {
202+
isFundsModalVisible.value = false;
203+
emit( 'modalClosed' );
204+
}
205+
206+
function onModalOpened(): void {
207+
isFundsModalVisible.value = true;
208+
emit( 'modalOpened' );
209+
}
210+
211+
</script>

0 commit comments

Comments
 (0)