Skip to content

Commit 3316a4c

Browse files
moiikanamoiikana
authored
Merge pull request #252 from wmde/C23_WMDE_iPad_01
C23_WMDE_iPad_01
2 parents 8000d8c + 12d7c6a commit 3316a4c

File tree

20 files changed

+284
-200
lines changed

20 files changed

+284
-200
lines changed

‎banners/pad/banner_var.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
1818
import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
1919

2020
// Channel specific form setup
21-
import { createFormItems } from './form_items';
21+
import { createFormItems } from './form_items_var';
2222
import { createFormActions } from '@src/createFormActions';
2323

2424
// Content

‎banners/pad/components/BannerCtrl.vue‎

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
<div class="wmde-banner-wrapper" :class="contentState">
33
<MainBanner
44
@close="onCloseMain"
5-
@form-interaction="$emit( 'bannerContentChanged' )"
5+
@form-interaction="onFormInteraction"
66
v-if="contentState === ContentStates.Main"
77
:bannerState="bannerState"
88
>
99
<template #banner-slides="{ play }: any">
10+
<div class="wmde-banner-content-headline">
11+
<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 5&nbsp;€ wert?</span>
12+
</div>
1013
<KeenSlider :with-navigation="true" :play="play" :interval="5000">
1114

1215
<template #slides="{ currentSlide }: any">
@@ -47,10 +50,7 @@
4750
</template>
4851

4952
<template #footer>
50-
<FooterAlreadyDonated
51-
@showFundsModal="isFundsModalVisible = true"
52-
@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
53-
/>
53+
<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
5454
</template>
5555
</MainBanner>
5656

@@ -67,23 +67,12 @@
6767
@hideFundsModal="isFundsModalVisible = false"
6868
/>
6969

70-
<AlreadyDonatedModal
71-
:is-visible="isAlreadyDonatedModalVisible"
72-
:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
73-
@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
74-
@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
75-
@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
76-
>
77-
<template #already-donated-content>
78-
<AlreadyDonatedContent/>
79-
</template>
80-
</AlreadyDonatedModal>
8170
</div>
8271
</template>
8372

8473
<script setup lang="ts">
8574
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
86-
import { ref, watch } from 'vue';
75+
import { nextTick, ref, watch } from 'vue';
8776
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
8877
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
8978
import MainBanner from './MainBanner.vue';
@@ -92,12 +81,9 @@ import BannerSlides from '../content/BannerSlides.vue';
9281
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
9382
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
9483
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
95-
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
96-
import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
97-
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
84+
import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
9885
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
9986
import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
100-
import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
10187
import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
10288
import { useFormModel } from '@src/components/composables/useFormModel';
10389
import {
@@ -109,6 +95,7 @@ import {
10995
import { CloseChoices } from '@src/domain/CloseChoices';
11096
import { CloseEvent } from '@src/tracking/events/CloseEvent';
11197
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
98+
import BannerFooter from '@src/components/Footer/BannerFooter.vue';
11299
113100
enum ContentStates {
114101
Main = 'wmde-banner-wrapper--main',
@@ -129,7 +116,6 @@ defineProps<Props>();
129116
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
130117
131118
const isFundsModalVisible = ref<boolean>( false );
132-
const isAlreadyDonatedModalVisible = ref<boolean>( false );
133119
const contentState = ref<ContentStates>( ContentStates.Main );
134120
const formModel = useFormModel();
135121
const stepControllers = [
@@ -141,6 +127,12 @@ watch( contentState, async () => {
141127
emit( 'bannerContentChanged' );
142128
} );
143129
130+
function onFormInteraction(): void {
131+
nextTick( () => {
132+
emit( 'bannerContentChanged' );
133+
} );
134+
}
135+
144136
function onCloseMain(): void {
145137
contentState.value = ContentStates.SoftClosing;
146138
}
@@ -149,8 +141,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
149141
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
150142
}
151143
152-
function onShowAlreadyDonatedModal(): void {
153-
isAlreadyDonatedModalVisible.value = true;
154-
}
155-
156144
</script>

‎banners/pad/components/BannerVar.vue‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,25 @@
3535
<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
3636

3737
<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
38-
<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
38+
<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
39+
40+
<template #label-payment-ppl>
41+
<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
42+
</template>
43+
44+
<template #label-payment-bez>
45+
<span class="wmde-banner-select-group-label with-logos sepa"><SepaLogo/></span>
46+
</template>
47+
48+
<template #label-payment-mcp>
49+
<span class="wmde-banner-select-group-label with-logos credit-cards">
50+
<VisaLogo/>
51+
<MastercardLogo/>
52+
<AmexLogo/>
53+
</span>
54+
</template>
55+
56+
</MainDonationForm>
3957
</template>
4058

4159
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
@@ -50,10 +68,7 @@
5068
</template>
5169

5270
<template #footer>
53-
<FooterAlreadyDonated
54-
@showFundsModal="isFundsModalVisible = true"
55-
@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
56-
/>
71+
<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
5772
</template>
5873
</MainBanner>
5974

@@ -70,17 +85,6 @@
7085
@hideFundsModal="isFundsModalVisible = false"
7186
/>
7287

73-
<AlreadyDonatedModal
74-
:is-visible="isAlreadyDonatedModalVisible"
75-
:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
76-
@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
77-
@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
78-
@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
79-
>
80-
<template #already-donated-content>
81-
<AlreadyDonatedContent/>
82-
</template>
83-
</AlreadyDonatedModal>
8488
</div>
8589
</template>
8690

@@ -91,13 +95,10 @@ import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/Use
9195
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
9296
import MainBanner from './MainBanner.vue';
9397
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
94-
import BannerSlides from '../content/BannerSlidesVar.vue';
98+
import BannerSlides from '../content/BannerSlides.vue';
9599
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
96100
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
97101
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
98-
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
99-
import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
100-
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
101102
import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
102103
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
103104
import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
@@ -112,6 +113,12 @@ import {
112113
import { CloseChoices } from '@src/domain/CloseChoices';
113114
import { CloseEvent } from '@src/tracking/events/CloseEvent';
114115
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
116+
import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
117+
import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue';
118+
import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
119+
import AmexLogo from '@src/components/PaymentLogos/AmexLogo.vue';
120+
import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
121+
import BannerFooter from '@src/components/Footer/BannerFooter.vue';
115122
116123
enum ContentStates {
117124
Main = 'wmde-banner-wrapper--main',
@@ -132,7 +139,6 @@ defineProps<Props>();
132139
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
133140
134141
const isFundsModalVisible = ref<boolean>( false );
135-
const isAlreadyDonatedModalVisible = ref<boolean>( false );
136142
const contentState = ref<ContentStates>( ContentStates.Main );
137143
const formModel = useFormModel();
138144
const stepControllers = [
@@ -158,8 +164,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
158164
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
159165
}
160166
161-
function onShowAlreadyDonatedModal(): void {
162-
isAlreadyDonatedModalVisible.value = true;
163-
}
164-
165167
</script>

‎banners/pad/content/AlreadyDonated.vue‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎banners/pad/content/BannerSlides.vue‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,20 @@
11
<template>
22
<KeenSliderSlide :is-current="currentSlide === 0">
3-
<p class="headline">
3+
<p>
44
<InfoIcon/>
5-
<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
5+
An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen,
6+
aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie
7+
bescheiden, die Unabhängigkeit von Wikipedia zu sichern.
68
</p>
7-
<p>Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
8-
heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu
9-
sichern.</p>
109
</KeenSliderSlide>
11-
1210
<KeenSliderSlide :is-current="currentSlide === 1">
1311
<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
14-
durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
12+
durch Spenden von durchschnittlich 22,25&nbsp;€ finanziert.</p>
1513
</KeenSliderSlide>
16-
1714
<KeenSliderSlide :is-current="currentSlide === 2">
1815
<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
19-
entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span>
20-
</p>
16+
entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span></p>
2117
</KeenSliderSlide>
22-
2318
<KeenSliderSlide :is-current="currentSlide === 3">
2419
<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
2520
Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann nehmen Sie sich doch bitte eine Minute
@@ -34,13 +29,14 @@ import InfoIcon from '@src/components/Icons/InfoIcon.vue';
3429
import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
3530
3631
interface Props {
37-
currentSlide: number,
32+
currentSlide: number
3833
}
3934
4035
defineProps<Props>();
4136
4237
const {
4338
currentDayName,
39+
currentDate,
4440
campaignDaySentence,
4541
visitorsVsDonorsSentence
4642
}: DynamicContent = inject( 'dynamicCampaignText' );

‎banners/pad/content/BannerSlidesVar.vue‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎banners/pad/event_map.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,21 @@ import { CloseEvent } from '@src/tracking/events/CloseEvent';
77
import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
88
import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
99
import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
10+
import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
11+
import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
12+
import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
1013

1114
export default new Map<string, TrackingEventConverterFactory>( [
1215
[ CloseEvent.EVENT_NAME, mapCloseEvent ],
1316
[ ClickAlreadyDonatedEvent.EVENT_NAME, ( e: ClickAlreadyDonatedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
1417
[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
15-
[ NotShownEvent.EVENT_NAME, mapNotShownEvent ]
16-
// TODO add more events
18+
[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
19+
[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
20+
switch ( e.feature ) {
21+
case 'UpgradeToYearlyForm':
22+
return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
23+
default:
24+
return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
25+
}
26+
} ]
1727
] );

‎banners/pad/form_items_var.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
2+
import { Translator } from '@src/Translator';
3+
import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
4+
import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
5+
import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
6+
import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
7+
8+
export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
9+
return new FormItemsBuilder( translations, amountFormatter )
10+
.setIntervals(
11+
Intervals.ONCE,
12+
Intervals.MONTHLY,
13+
Intervals.YEARLY
14+
)
15+
.setAmounts( 5, 10, 20, 25, 50, 100 )
16+
.setPaymentMethods(
17+
PaymentMethods.PAYPAL,
18+
PaymentMethods.CREDIT_CARD
19+
).getItems();
20+
}

‎banners/pad/styles/BannerVarHeadline.scss‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

0 commit comments

Comments
 (0)