Fix up new Use of Funds on Mobile DE banners

- Remove unused infographic component - Tweak styles to make full width work better Ticket: https://phabricator.wikimedia.org/T381956
wmde · Feb 19, 2025 · ae50baf · ae50baf
1 parent 46249c0
commit ae50baf
Show file tree

Hide file tree

Showing 13 changed files with 136 additions and 66 deletions.
diff --git a/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerCtrl.vue b/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerCtrl.vue
@@ -103,12 +103,8 @@
 			:content="useOfFundsContent"
 			:visible="isFundsModalVisible"
 			@hide="onHideFundsModal"
-			@callToAction="onFundsModalCallToAction"
-		>
-			<template #infographic>
-				<WMDEFundsForwardingDE/>
-			</template>
-		</FundsModal>
+			@callToAction="onHideFundsModal"
+		/>
 	</div>
 </template>
 
@@ -141,7 +137,6 @@ import {
 	createSubmittableUpgradeToYearly
 } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
 import MainDonationFormButton from '@src/components/DonationForm/SubComponents/SubmitButtons/MainDonationFormButton.vue';
-import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
 import ProgressBar from '../content/ProgressBar.vue';
 import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
@@ -248,10 +243,4 @@ const onHideFundsModal = (): void => {
 	isFundsModalVisible.value = false;
 };
 
-const onFundsModalCallToAction = (): void => {
-	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
-	isFundsModalVisible.value = false;
-	onshowFullPageBanner();
-};
-
 </script>
diff --git a/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerVar.vue b/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerVar.vue
@@ -11,7 +11,9 @@
 
 					<template #slides="{ currentSlide }: any">
 						<BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini">
-							<template #progress><ProgressBar/></template>
+							<template #progress>
+								<ProgressBar/>
+							</template>
 						</BannerSlides>
 					</template>
 
@@ -27,7 +29,9 @@
 				<BannerText :play-live-text="contentState === ContentStates.FullPage"/>
 			</template>
 
-			<template #progress><ProgressBar/></template>
+			<template #progress>
+				<ProgressBar/>
+			</template>
 
 			<template #donation-form="{ formInteraction }: any">
 				<MultiStepDonation
@@ -61,7 +65,8 @@
 							@previous="previous"
 						>
 							<template #back>
-								<ChevronLeftIcon/> {{ $translate( 'back-button' ) }}
+								<ChevronLeftIcon/>
+								{{ $translate( 'back-button' ) }}
 							</template>
 						</UpgradeToYearlyButtonForm>
 					</template>
@@ -105,11 +110,7 @@
 			:visible="isFundsModalVisible"
 			@hide="onHideFundsModal"
 			@callToAction="onFundsModalCallToAction"
-		>
-			<template #infographic>
-				<WMDEFundsForwardingDE/>
-			</template>
-		</FundsModal>
+		/>
 	</div>
 </template>
 
@@ -135,14 +136,9 @@ import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import { CloseChoices } from '@src/domain/CloseChoices';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
-import {
-	createSubmittableMainDonationForm
-} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
-import {
-	createSubmittableUpgradeToYearly
-} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
+import { createSubmittableMainDonationForm } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
+import { createSubmittableUpgradeToYearly } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
 import MainDonationFormButton from '@src/components/DonationForm/SubComponents/SubmitButtons/MainDonationFormButton.vue';
-import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
 import ProgressBar from '../content/ProgressBar.vue';
 import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
@@ -248,17 +244,29 @@ function onshowFullPageBannerPreselected(): void {
 const onHideFundsModal = (): void => {
 	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
 	isFundsModalVisible.value = false;
+
+	if ( contentState.value === ContentStates.Mini ) {
+		emit( 'modalClosed' );
+	}
 };
 
 const onShowFundsModal = ( feature: TrackingFeatureName ): void => {
-	tracker.trackEvent( new UseOfFundsShownEvent( feature ) );
 	isFundsModalVisible.value = true;
+	tracker.trackEvent( new UseOfFundsShownEvent( feature ) );
+
+	if ( contentState.value === ContentStates.Mini ) {
+		emit( 'modalOpened' );
+	}
 };
 
 const onFundsModalCallToAction = (): void => {
-	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
 	isFundsModalVisible.value = false;
-	onshowFullPageBanner();
+
+	if ( contentState.value === ContentStates.Mini ) {
+		onshowFullPageBanner();
+	}
+
+	props.pageScroller.scrollIntoView( '.wmde-banner-form' );
 };
 
 </script>
diff --git a/src/components/UseOfFunds2024/styles/UseOfFunds.scss b/src/components/UseOfFunds2024/styles/UseOfFunds.scss
@@ -9,6 +9,7 @@
 		padding: map.get( units.$spacing, 'small' );
 		line-height: 1.8;
 		font-size: 16px;
+		max-width: 100vw;
 
 		@include breakpoints.desktop-up {
 			padding: map.get( units.$spacing, 'large' );
@@ -146,10 +147,13 @@
 			padding: map.get( units.$spacing, 'small' );
 
 			@include breakpoints.tablet-up {
-				margin: 0 ( -( map.get( units.$spacing, 'large' ) ) ) map.get( units.$spacing, 'large' );
 				padding: map.get( units.$spacing, 'large' );
 			}
 
+			@include breakpoints.desktop-up {
+				margin: 0 ( -( map.get( units.$spacing, 'large' ) ) ) map.get( units.$spacing, 'large' );
+			}
+
 			h2 {
 				margin-bottom: map.get( units.$spacing, 'medium' );
 

diff --git a/src/components/UseOfFunds2024/styles/swatches/color_dark.scss b/src/components/UseOfFunds2024/styles/swatches/color_dark.scss
@@ -8,9 +8,9 @@ $gray400: #979797;
 $gray500: #555555;
 $gray800: #323232;
 
-$blue300: #88C7F6;
+$blue300: #88c7f6;
 $blue300-hover: color.adjust( $blue300, $lightness: 5% );
-$blue500: #2C9BF0;
+$blue500: #2c9bf0;
 $blue500-hover: color.adjust( $blue500, $lightness: -5% );
 
 @mixin swatch() {

diff --git a/src/components/UseOfFunds2024/styles/swatches/skin_vector-2022.scss b/src/components/UseOfFunds2024/styles/swatches/skin_vector-2022.scss
@@ -17,4 +17,4 @@
 	@media ( prefers-color-scheme: light ) {
 		@include color_light.swatch;
 	}
-}
+}
diff --git a/src/page/PageWPORG.ts b/src/page/PageWPORG.ts
@@ -228,6 +228,7 @@ class PageWPORG implements Page {
 		document.body.style.position = 'fixed';
 		document.body.style.top = `-${ scrollY }px`;
 		document.body.style.width = '100vw';
+		document.body.style.overflowX = 'hidden';
 	}
 
 	/**
@@ -239,6 +240,7 @@ class PageWPORG implements Page {
 		document.body.style.position = '';
 		document.body.style.top = '';
 		document.body.style.width = '';
+		document.body.style.overflowX = '';
 		window.scrollTo( 0, parseInt( scrollY || '0' ) * -1 );
 	}
 }

diff --git a/test/banners/desktop/C25_WMDE_Desktop_DE_00/components/BannerCtrl.spec.ts b/test/banners/desktop/C25_WMDE_Desktop_DE_00/components/BannerCtrl.spec.ts
@@ -6,7 +6,7 @@ import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds2024';
+import { desktopUseOfFundsFeatures } from '@test/features/UseOfFunds2024';
 import {
 	bannerContentAnimatedTextFeatures,
 	bannerContentDateAndTimeFeatures,
@@ -172,7 +172,7 @@ describe( 'BannerCtrl.vue', () => {
 			[ 'expectEmitsModalOpenedEvent' ],
 			[ 'expectEmitsModalClosedEvent' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await desktopUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );
 } );
diff --git a/test/banners/desktop/C25_WMDE_Desktop_DE_00/components/BannerVar.spec.ts b/test/banners/desktop/C25_WMDE_Desktop_DE_00/components/BannerVar.spec.ts
@@ -6,7 +6,7 @@ import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds2024';
+import { desktopUseOfFundsFeatures } from '@test/features/UseOfFunds2024';
 import {
 	bannerContentAnimatedTextFeatures,
 	bannerContentDateAndTimeFeatures,
@@ -220,7 +220,7 @@ describe( 'BannerVar.vue', () => {
 			[ 'expectEmitsModalOpenedEvent' ],
 			[ 'expectEmitsModalClosedEvent' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await desktopUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );
 } );
diff --git a/test/banners/english/C25_WMDE_Desktop_EN_00/components/BannerCtrl.spec.ts b/test/banners/english/C25_WMDE_Desktop_EN_00/components/BannerCtrl.spec.ts
@@ -6,7 +6,7 @@ import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds2024';
+import { desktopUseOfFundsFeatures } from '@test/features/UseOfFunds2024';
 import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures, bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
@@ -132,7 +132,7 @@ describe( 'BannerCtrl.vue', () => {
 			[ 'expectEmitsModalOpenedEvent' ],
 			[ 'expectEmitsModalClosedEvent' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await desktopUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );
 

diff --git a/test/banners/english/C25_WMDE_Desktop_EN_00/components/BannerVar.spec.ts b/test/banners/english/C25_WMDE_Desktop_EN_00/components/BannerVar.spec.ts
@@ -6,7 +6,7 @@ import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds2024';
+import { desktopUseOfFundsFeatures } from '@test/features/UseOfFunds2024';
 import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures, bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { donationFormFeatures } from '@test/features/forms/MainDonationDonationReceipt_UpgradeToYearlyButton';
@@ -181,7 +181,7 @@ describe( 'BannerVar.vue', () => {
 			[ 'expectEmitsModalOpenedEvent' ],
 			[ 'expectEmitsModalClosedEvent' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await desktopUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );
 

diff --git a/test/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerCtrl.spec.ts b/test/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerCtrl.spec.ts
@@ -8,7 +8,7 @@ import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
 import { CurrencyDe } from '@src/utils/DynamicContent/formatters/CurrencyDe';
 import { formItems } from '@test/banners/formItems';
 import { softCloseFeatures } from '@test/features/SoftCloseMobile';
-import { useOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds2024';
+import { mobileUseOfFundsFeatures, useOfFundsScrollFeatures } from '@test/features/UseOfFunds2024';
 import { miniBannerFeatures } from '@test/features/MiniBanner';
 import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
 import { useFormModel } from '@src/components/composables/useFormModel';
@@ -156,10 +156,12 @@ describe( 'BannerCtrl.vue', () => {
 
 	describe( 'Use of Funds', () => {
 		test.each( [
-			[ 'expectShowsUseOfFunds' ],
-			[ 'expectHidesUseOfFunds' ]
+			[ 'expectShowsUseOfFundsOnFullPageBanner' ],
+			[ 'expectHidesUseOfFundsOnFullPageBanner' ],
+			[ 'expectDoesNotEmitModalOpenedEventOnFullPageBanner' ],
+			[ 'expectDoesNotEmitModalClosedEventOnFullPageBanner' ],
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await mobileUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 
 		test.each( [

diff --git a/test/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerVar.spec.ts b/test/banners/mobile/C25_WMDE_Mobile_DE_00/components/BannerVar.spec.ts
@@ -9,7 +9,7 @@ import { CurrencyDe } from '@src/utils/DynamicContent/formatters/CurrencyDe';
 import { formItems } from '@test/banners/formItems';
 import { softCloseFeatures } from '@test/features/SoftCloseMobile';
 import {
-	useOfFundsFeatures,
+	mobileUseOfFundsFeatures,
 	useOfFundsScrollFeatures,
 	useOfFundsTrackingFeatures
 } from '@test/features/UseOfFunds2024';
@@ -160,11 +160,15 @@ describe( 'BannerVar.vue', () => {
 
 	describe( 'Use of Funds', () => {
 		test.each( [
-			[ 'expectShowsUseOfFunds' ],
 			[ 'expectShowsUseOfFundsOnMiniBanner' ],
-			[ 'expectHidesUseOfFunds' ]
+			[ 'expectShowsUseOfFundsOnFullPageBanner' ],
+			[ 'expectHidesUseOfFundsOnMiniBanner' ],
+			[ 'expectHidesUseOfFundsOnFullPageBanner' ],
+			[ 'expectEmitsModalOpenedEventOnMiniBanner' ],
+			[ 'expectEmitsModalClosedEventOnMiniBanner' ],
+			[ 'expectDoesNotEmitModalClosedEventOnFullPageBanner' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await mobileUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 
 		test.each( [
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,4 @@ @@
     	@media ( prefers-color-scheme: light ) {
     		@include color_light.swatch;
     	}
-    }
+    }