Skip to content

Commit c648493

Browse files
moiikanamoiikana
authored
Merge pull request #885 from wmde/WMDE_FR_2025_Desktop_DE_12
WMDE_FR_2025_Desktop_DE_12
2 parents db60004 + 41205e1 commit c648493

File tree

23 files changed

+1544
-9
lines changed

23 files changed

+1544
-9
lines changed

‎banners/desktop/WMDE_FR_2025_Desktop_DE_12/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_12/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.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_12/components/BannerCtrl.vue‎

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

0 commit comments

Comments
 (0)