Implement VAR for C24_WMDE_Mobile_EN_01

- Add clickable headline that shows Use of Funds - Add colours for light and dark mode - Add test Ticket: https://phabricator.wikimedia.org/T376794
wmde · Oct 15, 2024 · 0eb78b7 · 0eb78b7
1 parent 08529c4
commit 0eb78b7
Show file tree

Hide file tree

Showing 8 changed files with 659 additions and 3 deletions.
diff --git a/banners/mobile_english/C24_WMDE_Mobile_EN_01/banner_var.ts b/banners/mobile_english/C24_WMDE_Mobile_EN_01/banner_var.ts
@@ -1,9 +1,9 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles.scss';
+import './styles/styles_var.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
-import Banner from './components/BannerCtrl.vue';
+import Banner from './components/BannerVar.vue';
 import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
 import { WindowResizeHandler } from '@src/utils/ResizeHandler';
 import PageWPORG from '@src/page/PageWPORG';

diff --git a/banners/mobile_english/C24_WMDE_Mobile_EN_01/components/BannerVar.vue b/banners/mobile_english/C24_WMDE_Mobile_EN_01/components/BannerVar.vue
@@ -0,0 +1,230 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MiniBanner
+			@close="onCloseMiniBanner"
+			@show-full-page-banner="onshowFullPageBanner"
+			@show-full-page-banner-preselected-amount="onShowFullPageBannerPreselectedAmount"
+			@show-use-of-funds="onShowUseOfFundsFromMiniBanner"
+		>
+			<template #banner-slides>
+				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+		</MiniBanner>
+
+		<FullPageBanner
+			@showFundsModal="isFundsModalVisible = true"
+			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
+		>
+			<template #banner-text>
+				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
+			</template>
+
+			<template #progress>
+				<ProgressBar amount-to-show-on-right="TARGET"/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :page-scroller="pageScroller">
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, previous, isCurrent }: any">
+						<MainDonationForm
+							:page-index="pageIndex"
+							:is-current="isCurrent"
+							@submit="submit"
+							@previous="previous"
+							custom-amount-placeholder-key="custom-amount-placeholder-short"
+						>
+
+							<template #label-payment-ppl>
+								<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
+							</template>
+
+							<template #label-payment-mcp>
+								<span class="wmde-banner-select-group-label with-logos credit-cards">
+									<VisaLogo/>
+									<MastercardLogo/>
+								</span>
+							</template>
+
+							<template #sms-icon>
+								<SmsIcon/>
+							</template>
+
+						</MainDonationForm>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm
+							:show-manual-upgrade-option = false
+							:page-index="pageIndex"
+							@submit="submit"
+							:is-current="isCurrent"
+							@previous="previous"
+						>
+							<template #back>
+								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+							</template>
+						</UpgradeToYearlyButtonForm>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<BannerFooter @showFundsModal="isFundsModalVisible = true" />
+			</template>
+		</FullPageBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+		>
+			<template #buttons="{ timer }: any">
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-maybe-later"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.MaybeLater )">
+					{{ $translate( 'soft-close-button-maybe-later' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-close"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.Close )">
+					{{ $translate( 'soft-close-button-close' ) }}
+				</button>
+				<button
+					class="wmde-banner-soft-close-button wmde-banner-soft-close-button-already-donated"
+					@click="() => onSoftCloseClose( timer, 'SoftClose', CloseChoices.NoMoreBannersForCampaign )">
+					{{ $translate( 'soft-close-button-already-donated' ) }}
+				</button>
+			</template>
+		</SoftClose>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { computed, inject, ref, watch } from 'vue';
+import FullPageBanner from './FullPageBanner.vue';
+import MiniBanner from './MiniBannerVar.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources';
+import { PageScroller } from '@src/utils/PageScroller/PageScroller';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import BannerText from '../content/BannerText.vue';
+import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
+import BannerSlides from '../content/BannerSlides.vue';
+import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import { Tracker } from '@src/tracking/Tracker';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import SmsIcon from '@src/components/Icons/SmsIcon.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
+import { createSubmittableMainDonationForm } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import { createSubmittableUpgradeToYearly } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { UseOfFundsShownEvent } from '@src/tracking/events/UseOfFundsShownEvent';
+const formModel = useFormModel();
+
+enum ContentStates {
+	Mini = 'wmde-banner-wrapper--mini',
+	FullPage = 'wmde-banner-wrapper--full-page',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing'
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	pageScroller: PageScroller;
+	remainingImpressions: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const slideShowStopped = ref<boolean>( false );
+const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
+const contentState = ref<ContentStates>( ContentStates.Mini );
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+function onCloseMiniBanner(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MainBanner', CloseChoices.Close );
+	}
+}
+
+function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
+}
+
+function onshowFullPageBanner(): void {
+	slideShowStopped.value = true;
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'different-amount' ) );
+}
+
+function onShowFullPageBannerPreselectedAmount(): void {
+	slideShowStopped.value = true;
+	formModel.selectedAmount.value = '10';
+	contentState.value = ContentStates.FullPage;
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+}
+
+const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
+	props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ?
+		'.wmde-banner-form' :
+		'.wmde-banner-full-small-print .wmde-banner-footer-usage-link'
+	);
+	isFundsModalVisible.value = false;
+};
+
+const onShowUseOfFundsFromMiniBanner = (): void => {
+	tracker.trackEvent( new UseOfFundsShownEvent( 'MiniBanner' ) );
+	isFundsModalVisible.value = true;
+};
+
+function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
+	window.clearInterval( timer );
+	onClose( feature, userChoice );
+}
+
+</script>
diff --git a/banners/mobile_english/C24_WMDE_Mobile_EN_01/components/MiniBannerVar.vue b/banners/mobile_english/C24_WMDE_Mobile_EN_01/components/MiniBannerVar.vue
@@ -0,0 +1,48 @@
+<template>
+	<div class="wmde-banner-mini">
+		<div class="wmde-banner-mini-content">
+			<div class="wmde-banner-mini-close">
+				<button class="wmde-banner-mini-close-button t-close-main-banner" @click.prevent="$emit( 'close' )">
+					<CloseIconCircle/>
+				</button>
+			</div>
+
+			<button @click="$emit( 'showUseOfFunds' )" class="wmde-banner-mini-headline">
+				<span class="wmde-banner-mini-headline-link">Why</span> even &euro;10 makes a difference
+			</button>
+
+			<div class="wmde-banner-mini-slideshow">
+				<slot name="banner-slides"/>
+			</div>
+
+			<div class="wmde-banner-mini-button-group">
+				<button class="wmde-banner-mini-button-preselect" @click="$emit( 'showFullPageBannerPreselectedAmount' )">
+					Donate €10
+				</button>
+				<button class="wmde-banner-mini-button" @click="$emit( 'showFullPageBanner' )">
+					Different Amount
+				</button>
+			</div>
+
+			<div class="wmde-banner-mini-payment-icons">
+				<div><PayPalLogo/></div>
+				<div><VisaLogo/></div>
+				<div><MastercardLogo/></div>
+				<div><SmsIcon/></div>
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
+import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
+import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
+import SmsIcon from '@src/components/Icons/SmsIcon.vue';
+import CloseIconCircle from '@src/components/Icons/CloseIconCircle.vue';
+
+defineEmits( [ 'showFullPageBanner', 'showFullPageBannerPreselectedAmount', 'close', 'showUseOfFunds' ] );
+
+</script>
diff --git a/banners/mobile_english/C24_WMDE_Mobile_EN_01/event_map.ts b/banners/mobile_english/C24_WMDE_Mobile_EN_01/event_map.ts
@@ -10,6 +10,7 @@ import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownE
 import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
 import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
 import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { UseOfFundsShownEvent } from '@src/tracking/events/UseOfFundsShownEvent';
 
 export default new Map<string, TrackingEventConverterFactory>( [
 	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
@@ -26,5 +27,7 @@ export default new Map<string, TrackingEventConverterFactory>( [
 			default:
 				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
 		}
-	} ]
+	} ],
+	[ UseOfFundsShownEvent.EVENT_NAME,
+		( e: UseOfFundsShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ]
 ] );