Merge pull request #252 from wmde/C23_WMDE_iPad_01

C23_WMDE_iPad_01
wmde · Nov 1, 2023 · 3316a4c · 3316a4c
2 parents 8000d8c + 12d7c6a
commit 3316a4c
Show file tree

Hide file tree

Showing 20 changed files with 284 additions and 200 deletions.
diff --git a/banners/pad/banner_var.ts b/banners/pad/banner_var.ts
@@ -18,7 +18,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 
 // Channel specific form setup
-import { createFormItems } from './form_items';
+import { createFormItems } from './form_items_var';
 import { createFormActions } from '@src/createFormActions';
 
 // Content

diff --git a/banners/pad/components/BannerCtrl.vue b/banners/pad/components/BannerCtrl.vue
@@ -2,11 +2,14 @@
 	<div class="wmde-banner-wrapper" :class="contentState">
 		<MainBanner
 			@close="onCloseMain"
-			@form-interaction="$emit( 'bannerContentChanged' )"
+			@form-interaction="onFormInteraction"
 			v-if="contentState === ContentStates.Main"
 			:bannerState="bannerState"
 		>
 			<template #banner-slides="{ play }: any">
+				<div class="wmde-banner-content-headline">
+					<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 5&nbsp;€ wert?</span>
+				</div>
 				<KeenSlider :with-navigation="true" :play="play" :interval="5000">
 
 					<template #slides="{ currentSlide }: any">
@@ -47,10 +50,7 @@
 			</template>
 
 			<template #footer>
-				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
-					@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
-				/>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
 			</template>
 		</MainBanner>
 
@@ -67,23 +67,12 @@
 			@hideFundsModal="isFundsModalVisible = false"
 		/>
 
-		<AlreadyDonatedModal
-			:is-visible="isAlreadyDonatedModalVisible"
-			:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-			@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-		>
-			<template #already-donated-content>
-				<AlreadyDonatedContent/>
-			</template>
-		</AlreadyDonatedModal>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
@@ -92,12 +81,9 @@ import BannerSlides from '../content/BannerSlides.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
-import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import {
@@ -109,6 +95,7 @@ import {
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -129,7 +116,6 @@ defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
@@ -141,6 +127,12 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onFormInteraction(): void {
+	nextTick( () => {
+		emit( 'bannerContentChanged' );
+	} );
+}
+
 function onCloseMain(): void {
 	contentState.value = ContentStates.SoftClosing;
 }
@@ -149,8 +141,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onShowAlreadyDonatedModal(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
 </script>
diff --git a/banners/pad/components/BannerVar.vue b/banners/pad/components/BannerVar.vue
@@ -35,7 +35,25 @@
 				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
 					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
+
+							<template #label-payment-ppl>
+								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
+							</template>
+
+							<template #label-payment-bez>
+								<span class="wmde-banner-select-group-label with-logos sepa"><SepaLogo/></span>
+							</template>
+
+							<template #label-payment-mcp>
+								<span class="wmde-banner-select-group-label with-logos credit-cards">
+									<VisaLogo/>
+									<MastercardLogo/>
+									<AmexLogo/>
+								</span>
+							</template>
+
+						</MainDonationForm>
 					</template>
 
 					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
@@ -50,10 +68,7 @@
 			</template>
 
 			<template #footer>
-				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
-					@showAlreadyDonatedModal="onShowAlreadyDonatedModal"
-				/>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
 			</template>
 		</MainBanner>
 
@@ -70,17 +85,6 @@
 			@hideFundsModal="isFundsModalVisible = false"
 		/>
 
-		<AlreadyDonatedModal
-			:is-visible="isAlreadyDonatedModalVisible"
-			:is-already-donated-modal-visible="isAlreadyDonatedModalVisible"
-			@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
-			@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
-			@maybe-later="() => onClose( 'AlreadyDonatedModal', CloseChoices.MaybeLater )"
-		>
-			<template #already-donated-content>
-				<AlreadyDonatedContent/>
-			</template>
-		</AlreadyDonatedModal>
 	</div>
 </template>
 
@@ -91,13 +95,10 @@ import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/Use
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
 import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
-import BannerSlides from '../content/BannerSlidesVar.vue';
+import BannerSlides from '../content/BannerSlides.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
-import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
-import AlreadyDonatedContent from '../../english/content/AlreadyDonatedContent.vue';
-import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
 import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
@@ -112,6 +113,12 @@ import {
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import AmexLogo from '@src/components/PaymentLogos/AmexLogo.vue';
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -132,7 +139,6 @@ defineProps<Props>();
 const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
-const isAlreadyDonatedModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
 const formModel = useFormModel();
 const stepControllers = [
@@ -158,8 +164,4 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 }
 
-function onShowAlreadyDonatedModal(): void {
-	isAlreadyDonatedModalVisible.value = true;
-}
-
 </script>
diff --git a/banners/pad/content/AlreadyDonated.vue b/banners/pad/content/AlreadyDonated.vue
diff --git a/banners/pad/content/BannerSlides.vue b/banners/pad/content/BannerSlides.vue
@@ -1,25 +1,20 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
-		<p class="headline">
+		<p>
 			<InfoIcon/>
-			<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
+			An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen,
+			aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie
+			bescheiden, die Unabhängigkeit von Wikipedia zu sichern.
 		</p>
-		<p>Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am
-			heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu
-			sichern.</p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 1">
 		<p>{{ campaignDaySentence }} Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird
-			durch Spenden von durchschnittlich 22,66&nbsp;€ finanziert.</p>
+			durch Spenden von durchschnittlich 22,25&nbsp;€ finanziert.</p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 2">
 		<p>Doch schon mit einer Spende von 5&nbsp;€ kann Wikipedia sich auch in Zukunft erfolgreich
-			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span>
-		</p>
+			entwickeln. <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span></p>
 	</KeenSliderSlide>
-
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem
 			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';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 
 interface Props {
-	currentSlide: number,
+	currentSlide: number
 }
 
 defineProps<Props>();
 
 const {
 	currentDayName,
+	currentDate,
 	campaignDaySentence,
 	visitorsVsDonorsSentence
 }: DynamicContent = inject( 'dynamicCampaignText' );

diff --git a/banners/pad/content/BannerSlidesVar.vue b/banners/pad/content/BannerSlidesVar.vue
diff --git a/banners/pad/event_map.ts b/banners/pad/event_map.ts
@@ -7,11 +7,21 @@ import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
 import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
 import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
 
 export default new Map<string, TrackingEventConverterFactory>( [
 	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
 	[ ClickAlreadyDonatedEvent.EVENT_NAME, ( e: ClickAlreadyDonatedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 1 ) ],
 	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
-	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ]
-	// TODO add more events
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ]
 ] );
diff --git a/banners/pad/form_items_var.ts b/banners/pad/form_items_var.ts
@@ -0,0 +1,20 @@
+import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
+import { Translator } from '@src/Translator';
+import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems';
+import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals';
+import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods';
+import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter';
+
+export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems {
+	return new FormItemsBuilder( translations, amountFormatter )
+		.setIntervals(
+			Intervals.ONCE,
+			Intervals.MONTHLY,
+			Intervals.YEARLY
+		)
+		.setAmounts( 5, 10, 20, 25, 50, 100 )
+		.setPaymentMethods(
+			PaymentMethods.PAYPAL,
+			PaymentMethods.CREDIT_CARD
+		).getItems();
+}
diff --git a/banners/pad/styles/BannerVarHeadline.scss b/banners/pad/styles/BannerVarHeadline.scss