Skip to content

Commit 3efbd36

Browse files
moiikanamoiikana
authored
Merge pull request #858 from wmde/WMDE_FR_2025_Desktop_DE_08
WMDE_FR_2025_Desktop_DE_08
2 parents ff9b925 + 167cb49 commit 3efbd36

File tree

27 files changed

+1548
-13
lines changed

27 files changed

+1548
-13
lines changed

‎banners/desktop/WMDE_FR_2025_Desktop_DE_08/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_08/banner_var.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_var.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
6+
import Banner from './components/BannerVar.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_08/components/BannerCtrl.vue‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
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 :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
43+
<template #label-payment-ppl>
44+
<span class="wmde-banner-select-group-label with-logos paypal">
45+
<PayPalIcon/><span>Paypal</span>
46+
</span>
47+
</template>
48+
49+
<template #label-payment-mcp>
50+
<span class="wmde-banner-select-group-label with-logos credit-cards">
51+
<MasterCardIcon/><span>Kreditkarte</span>
52+
</span>
53+
</template>
54+
55+
<template #label-payment-ueb>
56+
<span class="wmde-banner-select-group-label with-logos bank-transfer">
57+
<BankTransferIcon/><span>Überweisung</span>
58+
</span>
59+
</template>
60+
61+
<template #label-payment-bez>
62+
<span class="wmde-banner-select-group-label with-logos bank-transfer">
63+
<DirectDebitIcon/><span>Lastschrift</span>
64+
</span>
65+
</template>
66+
</MainDonationForm>
67+
</template>
68+
69+
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
70+
<UpgradeToYearlyButtonForm
71+
:page-index="pageIndex"
72+
@submit="submit"
73+
:is-current="isCurrent"
74+
@previous="previous"
75+
/>
76+
</template>
77+
78+
</MultiStepDonation>
79+
</template>
80+
81+
<template #footer>
82+
<FooterAlreadyDonated
83+
@showFundsModal="onModalOpened"
84+
@clickedAlreadyDonatedLink="onClose( 'MainBanner', CloseChoices.AlreadyDonated )"
85+
/>
86+
</template>
87+
88+
</MainBanner>
89+
90+
<FundsModal
91+
:content="useOfFundsContent"
92+
:visible="isFundsModalVisible"
93+
@hide="onHideFundsModal"
94+
@call-to-action="onHideFundsModal"
95+
/>
96+
</div>
97+
</template>
98+
99+
<script setup lang="ts">
100+
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
101+
import { inject, ref, watch } from 'vue';
102+
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
103+
import MainBanner from './MainBanner.vue';
104+
import FundsModal from '@src/components/UseOfFunds/UseOfFundsModal.vue';
105+
import BannerText from '../content/BannerText.vue';
106+
import BannerSlides from '../content/BannerSlides.vue';
107+
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
108+
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
109+
import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
110+
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
111+
import { useFormModel } from '@src/components/composables/useFormModel';
112+
import {
113+
createSubmittableMainDonationForm
114+
} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
115+
import {
116+
createSubmittableUpgradeToYearly
117+
} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
118+
import { CloseChoices } from '@src/domain/CloseChoices';
119+
import { CloseEvent } from '@src/tracking/events/CloseEvent';
120+
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
121+
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
122+
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
123+
import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
124+
import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
125+
import { Tracker } from '@src/tracking/Tracker';
126+
import { useBannerHider } from '@src/components/composables/useBannerHider';
127+
import BannerTitle from '../content/BannerTitle.vue';
128+
import BankTransferIcon from '@src/components/PaymentLogos/BankTransferIcon.vue';
129+
import PayPalIcon from '@src/components/PaymentLogos/PayPalIcon.vue';
130+
import DirectDebitIcon from '@src/components/PaymentLogos/DirectDebitIcon.vue';
131+
import MasterCardIcon from '@src/components/PaymentLogos/MasterCardIcon.vue';
132+
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
133+
134+
enum ContentStates {
135+
Main = 'wmde-banner-wrapper--main',
136+
}
137+
138+
enum FormStepNames {
139+
MainDonationFormStep = 'MainDonationForm',
140+
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
141+
}
142+
143+
interface Props {
144+
bannerState: BannerStates;
145+
useOfFundsContent: useOfFundsContentInterface;
146+
localCloseTracker: LocalCloseTracker;
147+
}
148+
149+
const props = defineProps<Props>();
150+
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
151+
useBannerHider( 800, emit );
152+
153+
const tracker = inject<Tracker>( 'tracker' );
154+
155+
const isFundsModalVisible = ref<boolean>( false );
156+
const contentState = ref<ContentStates>( ContentStates.Main );
157+
const formModel = useFormModel();
158+
const stepControllers = [
159+
createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
160+
createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
161+
];
162+
163+
watch( contentState, async () => {
164+
emit( 'bannerContentChanged' );
165+
} );
166+
167+
const onSubmit = (): void => {
168+
// special callback function: asking for previous close choices
169+
const closeChoice = props.localCloseTracker.getItem();
170+
if ( closeChoice !== '' ) {
171+
tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
172+
}
173+
};
174+
175+
function onCloseMain(): void {
176+
onClose( 'MainBanner', CloseChoices.Close );
177+
}
178+
179+
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
180+
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
181+
props.localCloseTracker.setItem( feature, userChoice );
182+
}
183+
184+
function onHideFundsModal(): void {
185+
isFundsModalVisible.value = false;
186+
emit( 'modalClosed' );
187+
}
188+
189+
function onModalOpened(): void {
190+
isFundsModalVisible.value = true;
191+
emit( 'modalOpened' );
192+
}
193+
194+
</script>

0 commit comments

Comments
 (0)