From 72dd7347a1c5f378f37750d2f2a285921a9956cc Mon Sep 17 00:00:00 2001
From: Sperling-0 <tanuja.doriya@wikimedia.de>
Date: Tue, 17 Dec 2024 15:19:31 +0100
Subject: [PATCH] Prepare VAR for C24_WMDE_Desktop_DE_22

Ticket: https://phabricator.wikimedia.org/T382301
---
 .../C24_WMDE_Desktop_DE_22/banner_var.ts      |   2 +-
 .../components/BannerVar.vue                  | 180 ++++++++++++++++++
 .../content/BannerSlidesVar.vue               |  48 +++++
 .../content/BannerTextVar.vue                 |  32 ++++
 .../components/BannerVar.spec.ts              | 178 +++++++++++++++++
 5 files changed, 439 insertions(+), 1 deletion(-)
 create mode 100644 banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue
 create mode 100644 banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerSlidesVar.vue
 create mode 100644 banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerTextVar.vue
 create mode 100644 test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts
index 4c1e2ca7c..c49bfc19d 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts
@@ -3,7 +3,7 @@ import { createVueApp } from '@src/createVueApp';
 import './styles/styles.scss';
 
 import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
-import Banner from './components/BannerCtrl.vue';
+import Banner from './components/BannerVar.vue';
 import FallbackBanner from './components/FallbackBanner.vue';
 import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
 import { WindowResizeHandler } from '@src/utils/ResizeHandler';
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue
new file mode 100644
index 000000000..3ea4476b2
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue
@@ -0,0 +1,180 @@
+<template>
+	<div class="wmde-banner-wrapper" :class="contentState">
+		<MainBanner
+			@form-interaction="$emit( 'bannerContentChanged' )"
+			v-if="contentState === ContentStates.Main"
+			:bannerState="bannerState"
+		>
+			<template #close-button>
+				<ButtonClose @close="onCloseMain"/>
+			</template>
+
+			<template #banner-title>
+				<BannerTitle/>
+			</template>
+
+			<template #banner-text>
+				<BannerText/>
+			</template>
+
+			<template #banner-slides="{ play }: any">
+				<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000" :navigation-color="'#ffffff'">
+
+					<template #slides="{ currentSlide }: any">
+						<BannerSlides :currentSlide="currentSlide"/>
+					</template>
+
+				</KeenSlider>
+			</template>
+
+			<template #progress>
+				<DoubleProgressBar/>
+			</template>
+
+			<template #donation-form="{ formInteraction }: any">
+				<MultiStepDonation
+					:step-controllers="stepControllers"
+					@form-interaction="formInteraction"
+					:submit-callback="onSubmit"
+				>
+
+					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
+						<UpgradeToYearlyButtonForm :page-index="pageIndex" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
+					</template>
+
+				</MultiStepDonation>
+			</template>
+
+			<template #footer>
+				<FooterAlreadyDonated
+					@showFundsModal="onModalOpened"
+					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
+				/>
+			</template>
+
+		</MainBanner>
+
+		<SoftClose
+			v-if="contentState === ContentStates.SoftClosing"
+			:show-close-icon="true"
+			@close="() => onClose( 'SoftClose', CloseChoices.Close )"
+			@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
+			@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
+			@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
+		/>
+
+		<FundsModal
+			:content="useOfFundsContent"
+			:is-funds-modal-visible="isFundsModalVisible"
+			@hideFundsModal="onHideFundsModal"
+		>
+			<template #infographic>
+				<WMDEFundsForwardingDE/>
+			</template>
+		</FundsModal>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { inject, ref, watch } from 'vue';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import MainBanner from './MainBanner.vue';
+import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import BannerText from '../content/BannerTextVar.vue';
+import BannerSlides from '../content/BannerSlidesVar.vue';
+import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
+import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
+import KeenSlider from '@src/components/Slider/KeenSlider.vue';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import {
+	createSubmittableMainDonationForm
+} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import {
+	createSubmittableUpgradeToYearly
+} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { CloseChoices } from '@src/domain/CloseChoices';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
+import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
+import SoftClose from '@src/components/SoftClose/SoftClose.vue';
+import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { Tracker } from '@src/tracking/Tracker';
+import { useBannerHider } from '@src/components/composables/useBannerHider';
+import BannerTitle from '@banners/desktop/C24_WMDE_Desktop_DE_15/content/BannerTitle.vue';
+
+enum ContentStates {
+	Main = 'wmde-banner-wrapper--main',
+	SoftClosing = 'wmde-banner-wrapper--soft-closing',
+}
+
+enum FormStepNames {
+	MainDonationFormStep = 'MainDonationForm',
+	UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
+}
+
+interface Props {
+	bannerState: BannerStates;
+	useOfFundsContent: useOfFundsContentInterface;
+	remainingImpressions: number;
+	localCloseTracker: LocalCloseTracker;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
+useBannerHider( 800, emit );
+
+const tracker = inject<Tracker>( 'tracker' );
+
+const isFundsModalVisible = ref<boolean>( false );
+const contentState = ref<ContentStates>( ContentStates.Main );
+const formModel = useFormModel();
+const stepControllers = [
+	createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
+	createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep )
+];
+
+watch( contentState, async () => {
+	emit( 'bannerContentChanged' );
+} );
+
+const onSubmit = (): void => {
+	// special callback function: asking for previous close choices
+	const closeChoice = props.localCloseTracker.getItem();
+	if ( closeChoice !== '' ) {
+		tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
+	}
+};
+
+function onCloseMain(): 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 onHideFundsModal(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
+function onModalOpened(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerSlidesVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerSlidesVar.vue
new file mode 100644
index 000000000..991443c11
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerSlidesVar.vue
@@ -0,0 +1,48 @@
+<template>
+	<KeenSliderSlide :is-current="currentSlide === 0">
+		<p>
+			Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+			{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 1">
+		<p>
+			{{campaignDaySentence}}
+			<AnimatedText :content="visitorsVsDonorsSentence"/>
+			Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 2">
+		<p>
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter. Hat Wikipedia
+			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+		</p>
+	</KeenSliderSlide>
+	<KeenSliderSlide :is-current="currentSlide === 3">
+		<p>
+			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+		</p>
+	</KeenSliderSlide>
+</template>
+
+<script setup lang="ts">
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { inject } from 'vue';
+import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+interface Props {
+	currentSlide: number
+}
+
+defineProps<Props>();
+
+const {
+	currentDayName,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+</script>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerTextVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerTextVar.vue
new file mode 100644
index 000000000..e7280312f
--- /dev/null
+++ b/banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerTextVar.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="wmde-banner-message">
+		<div>
+			<p>
+				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
+				{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen.
+				{{campaignDaySentence}}
+				<AnimatedText :content="visitorsVsDonorsSentence"/>
+				Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
+				Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter.
+				Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+				Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
+				Vielen Dank!
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
+
+const {
+	currentDayName,
+	currentDate,
+	campaignDaySentence,
+	visitorsVsDonorsSentence,
+	averageDonation
+} = inject<DynamicContent>( 'dynamicCampaignText' );
+
+</script>
diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts
new file mode 100644
index 000000000..0b033258b
--- /dev/null
+++ b/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts
@@ -0,0 +1,178 @@
+import { beforeEach, describe, test, vi } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { formItems } from '@test/banners/formItems';
+import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
+import { useOfFundsFeatures } from '@test/features/UseOfFunds';
+import {
+	bannerContentAnimatedTextFeatures,
+	bannerContentDateAndTimeFeatures,
+	bannerContentDisplaySwitchFeatures,
+	bannerContentFeatures
+} from '@test/features/BannerContent';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
+import { useFormModel } from '@src/components/composables/useFormModel';
+import { resetFormModel } from '@test/resetFormModel';
+import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
+import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
+import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton';
+import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
+import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
+import { softCloseSubmitTrackingFeaturesDesktop } from '@test/features/SoftCloseSubmitTrackingDesktop';
+import { Tracker } from '@src/tracking/Tracker';
+import { TimerStub } from '@test/fixtures/TimerStub';
+import { Timer } from '@src/utils/Timer';
+
+const formModel = useFormModel();
+const translator = ( key: string ): string => key;
+let tracker: Tracker;
+
+describe( 'BannerVar.vue', () => {
+
+	beforeEach( () => {
+		resetFormModel( formModel );
+		tracker = {
+			trackEvent: vi.fn()
+		};
+	} );
+
+	const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper<any> => {
+		return mount( Banner, {
+			attachTo: document.body,
+			props: {
+				bannerState: BannerStates.Pending,
+				useOfFundsContent,
+				remainingImpressions: 10,
+				localCloseTracker: {
+					getItem: () => '',
+					setItem: () => {}
+				}
+			},
+			global: {
+				mocks: {
+					$translate: translator
+				},
+				provide: {
+					translator: { translate: translator },
+					dynamicCampaignText: dynamicContent ?? newDynamicContent(),
+					currentCampaignTimePercentage: 42,
+					formActions: {
+						donateWithAddressAction: 'https://example.com/with-address',
+						donateAnonymouslyAction: 'https://example.com/without-address'
+					},
+					currencyFormatter: new CurrencyEn(),
+					formItems,
+					tracker,
+					timer: timer ?? new TimerStub()
+				}
+			}
+		} );
+	};
+
+	describe( 'Main Banner', () => {
+		test.each( [
+			[ 'expectDoesNotEmitCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerMainFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectClosesBannerWhenWindowBecomesSmall' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerAutoHideFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Content', () => {
+		test.each( [
+			[ 'expectSlideShowPlaysWhenBecomesVisible' ],
+			[ 'expectSlideShowStopsOnFormInteraction' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectShowsSlideShowOnSmallSizes' ],
+			[ 'expectShowsMessageOnLargeSizes' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+		} );
+
+		test.each( [
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+		} );
+
+		test.each( [
+			[ 'expectShowsLiveDateAndTimeInTitle' ]
+		] )( '%s', async ( testName: string ) => {
+			await bannerContentDateAndTimeFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Donation Form Happy Paths', () => {
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWhenSofortIsSelected' ],
+			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
+			[ 'expectMainDonationFormGoesToUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
+		] )( '%s', async ( testName: string ) => {
+			await donationFormFeatures[ testName ]( getWrapper() );
+		} );
+
+		test.each( [
+			[ 'expectMainDonationFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectMainDonationFormSubmitsWithAddressForPayPal' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForDirectDebit' ],
+			[ 'expectUpgradeToYearlyFormSubmitsWithAddressForPayPal' ]
+		] )( '%s', async ( testName: string ) => {
+			await formActionSwitchFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Soft Close', () => {
+		test.each( [
+			[ 'expectShowsSoftClose' ],
+			[ 'expectEmitsSoftCloseCloseEvent' ],
+			[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
+			[ 'expectEmitsSoftCloseTimeOutEvent' ],
+			[ 'expectEmitsBannerContentChangedOnSoftClose' ],
+			[ 'expectShowsCloseIcon' ],
+			[ 'expectCloseIconEmitsCloseEvent' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseFeatures[ testName ]( getWrapper );
+		} );
+	} );
+
+	describe( 'Soft Close Submit Tracking', () => {
+		test.each( [
+			[ 'expectEmitsBannerSubmitOnReturnEvent' ],
+			[ 'expectDoesNotEmitsBannerSubmitOnReturnEventWhenLocalStorageItemIsMissing' ]
+		] )( '%s', async ( testName: string ) => {
+			await softCloseSubmitTrackingFeaturesDesktop[ testName ]( getWrapper(), tracker );
+		} );
+	} );
+
+	describe( 'Already Donated', () => {
+		test.each( [
+			[ 'expectFiresMaybeLaterEventOnLinkClick' ]
+		] )( '%s', async ( testName: string ) => {
+			await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+
+	describe( 'Use of Funds', () => {
+		test.each( [
+			[ 'expectShowsUseOfFunds' ],
+			[ 'expectHidesUseOfFunds' ]
+		] )( '%s', async ( testName: string ) => {
+			await useOfFundsFeatures[ testName ]( getWrapper() );
+		} );
+	} );
+} );