Skip to content

Commit 357e409

Browse files
AbbanAbban
authored
Merge pull request #289 from wmde/C23_WMDE_Desktop_DE_14
2 parents 02884d3 + 19e5cef commit 357e409

File tree

72 files changed

+2331
-90
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+2331
-90
lines changed

‎archive/desktop/C23_WMDE_Desktop_DE_13/banner_ctrl.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6+
import Banner from './components/BannerCtrl.vue';
7+
import getBannerDelay from '@src/utils/getBannerDelay';
8+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
9+
import PageWPORG from '@src/page/PageWPORG';
10+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
11+
import { SkinFactory } from '@src/page/skin/SkinFactory';
12+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
13+
import TranslationPlugin from '@src/TranslationPlugin';
14+
import { Translator } from '@src/Translator';
15+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
16+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
17+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
18+
import eventMappings from './event_map';
19+
20+
// Locale-specific imports
21+
import messages from './messages';
22+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
23+
24+
// Channel specific form setup
25+
import { createFormItems } from './form_items';
26+
import { createFormActions } from '@src/createFormActions';
27+
28+
const localeFactory = new LocaleFactoryDe();
29+
const translator = new Translator( messages );
30+
const mediaWiki = new WindowMediaWiki();
31+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
32+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
33+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
34+
const remainingImpressions = Math.max( page.getMaxBannerImpressions( 'desktop' ) - impressionCount.overallCountIncremented, 0 );
35+
36+
const app = createVueApp( BannerConductor, {
37+
page,
38+
bannerConfig: {
39+
delay: getBannerDelay( 7500 ),
40+
transitionDuration: 1000
41+
},
42+
bannerProps: {
43+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
44+
remainingImpressions
45+
},
46+
resizeHandler: new WindowResizeHandler(),
47+
banner: Banner,
48+
impressionCount
49+
} );
50+
51+
app.use( TranslationPlugin, translator );
52+
app.use( DynamicTextPlugin, {
53+
campaignParameters: page.getCampaignParameters(),
54+
date: new Date(),
55+
formatters: localeFactory.getFormatters(),
56+
impressionCount,
57+
translator
58+
} );
59+
60+
const currencyFormatter = localeFactory.getCurrencyFormatter();
61+
62+
app.provide( 'currencyFormatter', currencyFormatter );
63+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
64+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) );
65+
app.provide( 'tracker', tracker );
66+
67+
app.mount( page.getBannerContainer() );

‎archive/desktop/C23_WMDE_Desktop_DE_13/banner_var.ts

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { createVueApp } from '@src/createVueApp';
2+
3+
import './styles/styles.scss';
4+
5+
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6+
import Banner from './components/BannerVar.vue';
7+
import getBannerDelay from '@src/utils/getBannerDelay';
8+
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
9+
import PageWPORG from '@src/page/PageWPORG';
10+
import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
11+
import { SkinFactory } from '@src/page/skin/SkinFactory';
12+
import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
13+
import TranslationPlugin from '@src/TranslationPlugin';
14+
import { Translator } from '@src/Translator';
15+
import DynamicTextPlugin from '@src/DynamicTextPlugin';
16+
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
17+
import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
18+
import eventMappings from './event_map';
19+
20+
// Locale-specific imports
21+
import messages from './messages';
22+
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
23+
24+
// Channel specific form setup
25+
import { createFormItems } from './form_items';
26+
import { createFormActions } from '@src/createFormActions';
27+
28+
const localeFactory = new LocaleFactoryDe();
29+
const translator = new Translator( messages );
30+
const mediaWiki = new WindowMediaWiki();
31+
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) );
32+
const impressionCount = new LocalImpressionCount( page.getTracking().keyword );
33+
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings );
34+
const remainingImpressions = Math.max( page.getMaxBannerImpressions( 'desktop' ) - impressionCount.overallCountIncremented, 0 );
35+
36+
const app = createVueApp( BannerConductor, {
37+
page,
38+
bannerConfig: {
39+
delay: getBannerDelay( 7500 ),
40+
transitionDuration: 1000
41+
},
42+
bannerProps: {
43+
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
44+
remainingImpressions
45+
},
46+
resizeHandler: new WindowResizeHandler(),
47+
banner: Banner,
48+
impressionCount
49+
} );
50+
51+
app.use( TranslationPlugin, translator );
52+
app.use( DynamicTextPlugin, {
53+
campaignParameters: page.getCampaignParameters(),
54+
date: new Date(),
55+
formatters: localeFactory.getFormatters(),
56+
impressionCount,
57+
translator
58+
} );
59+
60+
const currencyFormatter = localeFactory.getCurrencyFormatter();
61+
62+
app.provide( 'currencyFormatter', currencyFormatter );
63+
app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) );
64+
app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) );
65+
app.provide( 'tracker', tracker );
66+
67+
app.mount( page.getBannerContainer() );

‎archive/desktop/C23_WMDE_Desktop_DE_13/components/BannerCtrl.vue

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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-text>
13+
<BannerText/>
14+
</template>
15+
16+
<template #banner-slides="{ play }: any">
17+
<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000">
18+
19+
<template #slides="{ currentSlide }: any">
20+
<BannerSlides :currentSlide="currentSlide"/>
21+
</template>
22+
23+
</KeenSlider>
24+
</template>
25+
26+
<template #progress>
27+
<ProgressBar amount-to-show-on-right="TARGET"/>
28+
</template>
29+
30+
<template #donation-form="{ formInteraction }: any">
31+
<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
32+
33+
<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
34+
<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
35+
</template>
36+
37+
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
38+
<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
39+
</template>
40+
41+
</MultiStepDonation>
42+
</template>
43+
44+
<template #footer>
45+
<FooterAlreadyDonated
46+
@showFundsModal="isFundsModalVisible = true"
47+
@showAlreadyDonatedModal="isAlreadyDonatedModalVisible = true"
48+
/>
49+
</template>
50+
51+
</MainBanner>
52+
53+
<SoftClose
54+
v-if="contentState === ContentStates.SoftClosing"
55+
@close="() => onClose( 'SoftClose', CloseChoices.Close )"
56+
@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
57+
@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
58+
@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
59+
/>
60+
61+
<FundsModal
62+
:content="useOfFundsContent"
63+
:is-funds-modal-visible="isFundsModalVisible"
64+
@hideFundsModal="isFundsModalVisible = false"
65+
/>
66+
67+
<AlreadyDonatedModal
68+
:is-visible="isAlreadyDonatedModalVisible"
69+
@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
70+
@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
71+
@maybeLater="() => onClose( 'AlreadyDonatedModal', CloseChoices.Close )"
72+
>
73+
<template #already-donated-content>
74+
<AlreadyDonatedContent/>
75+
</template>
76+
</AlreadyDonatedModal>
77+
</div>
78+
</template>
79+
80+
<script setup lang="ts">
81+
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
82+
import { ref, watch } from 'vue';
83+
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
84+
import SoftClose from './SoftCloseWithXButton.vue';
85+
import MainBanner from './MainBanner.vue';
86+
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
87+
import BannerText from '../content/BannerText.vue';
88+
import BannerSlides from '../content/BannerSlides.vue';
89+
import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
90+
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
91+
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
92+
import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
93+
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
94+
import { useFormModel } from '@src/components/composables/useFormModel';
95+
import {
96+
createSubmittableMainDonationForm
97+
} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
98+
import {
99+
createSubmittableUpgradeToYearly
100+
} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
101+
import { CloseChoices } from '@src/domain/CloseChoices';
102+
import { CloseEvent } from '@src/tracking/events/CloseEvent';
103+
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
104+
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
105+
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
106+
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
107+
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
108+
109+
enum ContentStates {
110+
Main = 'wmde-banner-wrapper--main',
111+
SoftClosing = 'wmde-banner-wrapper--soft-closing'
112+
}
113+
114+
enum FormStepNames {
115+
MainDonationFormStep = 'MainDonationForm',
116+
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
117+
}
118+
119+
interface Props {
120+
bannerState: BannerStates;
121+
useOfFundsContent: useOfFundsContentInterface;
122+
remainingImpressions: number;
123+
}
124+
125+
const props = defineProps<Props>();
126+
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
127+
128+
const isFundsModalVisible = ref<boolean>( false );
129+
const isAlreadyDonatedModalVisible = ref<boolean>( false );
130+
const contentState = ref<ContentStates>( ContentStates.Main );
131+
const formModel = useFormModel();
132+
const stepControllers = [
133+
createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
134+
createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
135+
];
136+
137+
watch( contentState, async () => {
138+
emit( 'bannerContentChanged' );
139+
} );
140+
141+
function onCloseMain(): void {
142+
if ( props.remainingImpressions > 0 ) {
143+
contentState.value = ContentStates.SoftClosing;
144+
} else {
145+
onClose( 'MainBanner', CloseChoices.Close );
146+
}
147+
}
148+
149+
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
150+
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
151+
}
152+
153+
</script>

0 commit comments

Comments
 (0)