Add new Use of Funds to iPad banners

- Adds new UoF and tests - Sets form back to fixed width Ticket: https://phabricator.wikimedia.org/T381956
wmde · Feb 20, 2025 · ed7c7a3 · ed7c7a3
1 parent 96a5cd1
commit ed7c7a3
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 38 deletions.
diff --git a/banners/pad/C25_WMDE_iPad_DE_00/banner_ctrl.ts b/banners/pad/C25_WMDE_iPad_DE_00/banner_ctrl.ts
@@ -19,7 +19,7 @@ import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import messages from './messages';
-import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory2024/LocaleFactoryDe';
 import { WindowTimer } from '@src/utils/Timer';
 
 const localeFactory = new LocaleFactoryDe();

diff --git a/banners/pad/C25_WMDE_iPad_DE_00/banner_var.ts b/banners/pad/C25_WMDE_iPad_DE_00/banner_var.ts
@@ -19,7 +19,7 @@ import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { createFormItems } from './form_items_var';
 import { createFormActions } from '@src/createFormActions';
 import messages from './messages';
-import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory2024/LocaleFactoryDe';
 import { WindowTimer } from '@src/utils/Timer';
 
 const localeFactory = new LocaleFactoryDe();

diff --git a/banners/pad/C25_WMDE_iPad_DE_00/components/BannerCtrl.vue b/banners/pad/C25_WMDE_iPad_DE_00/components/BannerCtrl.vue
@@ -72,7 +72,7 @@
 			</template>
 
 			<template #footer>
-				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
+				<BannerFooter @showFundsModal="onShowFundsModal"/>
 			</template>
 		</MainBanner>
 
@@ -103,24 +103,20 @@
 
 		<FundsModal
 			:content="useOfFundsContent"
-			:is-funds-modal-visible="isFundsModalVisible"
-			@hideFundsModal="isFundsModalVisible = false"
-		>
-			<template #infographic>
-				<WMDEFundsForwardingDE/>
-			</template>
-		</FundsModal>
-
+			:visible="isFundsModalVisible"
+			@hide="onHideFundsModal"
+			@call-to-action="onHideFundsModal"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { nextTick, ref, watch } from 'vue';
-import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds2024/UseOfFundsContent';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
-import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import FundsModal from '@src/components/UseOfFunds2024/UseOfFundsModal.vue';
 import BannerSlides from '../content/BannerSlides.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
@@ -144,7 +140,6 @@ import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue';
 import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
 import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
-import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -163,7 +158,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
@@ -183,6 +178,16 @@ function onFormInteraction(): void {
 	} );
 }
 
+function onShowFundsModal(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+function onHideFundsModal(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
 function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
 	window.clearInterval( timer );
 	onClose( feature, userChoice );

diff --git a/banners/pad/C25_WMDE_iPad_DE_00/components/BannerVar.vue b/banners/pad/C25_WMDE_iPad_DE_00/components/BannerVar.vue
@@ -72,7 +72,7 @@
 			</template>
 
 			<template #footer>
-				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
+				<BannerFooter @showFundsModal="onShowFundsModal"/>
 			</template>
 		</MainBanner>
 
@@ -103,24 +103,21 @@
 
 		<FundsModal
 			:content="useOfFundsContent"
-			:is-funds-modal-visible="isFundsModalVisible"
-			@hideFundsModal="isFundsModalVisible = false"
-		>
-			<template #infographic>
-				<WMDEFundsForwardingDE/>
-			</template>
-		</FundsModal>
+			:visible="isFundsModalVisible"
+			@hide="onHideFundsModal"
+			@call-to-action="onHideFundsModal"
+		/>
 
 	</div>
 </template>
 
 <script setup lang="ts">
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { nextTick, ref, watch } from 'vue';
-import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
+import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds2024/UseOfFundsContent';
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import MainBanner from './MainBanner.vue';
-import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
+import FundsModal from '@src/components/UseOfFunds2024/UseOfFundsModal.vue';
 import BannerSlides from '../content/BannerSlidesVar.vue';
 import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
@@ -144,7 +141,6 @@ import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue';
 import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
 import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
 import BannerFooter from '@src/components/Footer/BannerFooter.vue';
-import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -163,7 +159,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
+const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
 
 const isFundsModalVisible = ref<boolean>( false );
 const contentState = ref<ContentStates>( ContentStates.Main );
@@ -183,6 +179,16 @@ function onFormInteraction(): void {
 	} );
 }
 
+function onShowFundsModal(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+function onHideFundsModal(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
 function onSoftCloseClose( timer: number, feature: TrackingFeatureName, userChoice: CloseChoices ): void {
 	window.clearInterval( timer );
 	onClose( feature, userChoice );

diff --git a/banners/pad/C25_WMDE_iPad_DE_00/styles/styles.scss b/banners/pad/C25_WMDE_iPad_DE_00/styles/styles.scss
@@ -12,10 +12,10 @@
 @use 'Banner';
 @use 'MainBanner' with (
 	$banner-height: 378px,
-	$form-width: 35%
+	$form-width: 300px
 );
-@use '@src/themes/UseOfFunds/swatches/skin_default' as uof-default;
-@use '@src/themes/UseOfFunds/UseOfFunds';
+@use 'src/components/UseOfFunds2024/styles/swatches/skin_default' as uof-default;
+@use 'src/components/UseOfFunds2024/styles/styles';
 @use '@src/themes/Treedip/defaults';
 @use '@src/themes/Treedip/ButtonClose/ButtonClose';
 @use '@src/themes/Treedip/ProgressBar/ProgressBar' with (

diff --git a/test/banners/pad/C25_WMDE_iPad_DE_00/components/BannerCtrl.spec.ts b/test/banners/pad/C25_WMDE_iPad_DE_00/components/BannerCtrl.spec.ts
@@ -3,12 +3,11 @@ import { mount, VueWrapper } from '@vue/test-utils';
 import Banner from '@banners/pad/C25_WMDE_iPad_DE_00/components/BannerCtrl.vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
-import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
 import { resetFormModel } from '@test/resetFormModel';
 import { useFormModel } from '@src/components/composables/useFormModel';
@@ -19,6 +18,7 @@ import { TimerStub } from '@test/fixtures/TimerStub';
 import { Timer } from '@src/utils/Timer';
 import { fakeFormActions } from '@test/fixtures/FakeFormActions';
 import { paymentIconFeatures } from '@test/features/PaymentIcons';
+import { desktopUseOfFundsFeatures } from '@test/features/UseOfFunds2024';
 
 const formModel = useFormModel();
 const translator = ( key: string ): string => key;
@@ -115,9 +115,11 @@ describe( 'BannerCtrl.vue', () => {
 	describe( 'Use of Funds', () => {
 		test.each( [
 			[ 'expectShowsUseOfFunds' ],
-			[ 'expectHidesUseOfFunds' ]
+			[ 'expectHidesUseOfFunds' ],
+			[ 'expectEmitsModalOpenedEvent' ],
+			[ 'expectEmitsModalClosedEvent' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await desktopUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );
 

diff --git a/test/banners/pad/C25_WMDE_iPad_DE_00/components/BannerVar.spec.ts b/test/banners/pad/C25_WMDE_iPad_DE_00/components/BannerVar.spec.ts
@@ -3,12 +3,11 @@ import { mount, VueWrapper } from '@vue/test-utils';
 import Banner from '@banners/pad/C25_WMDE_iPad_DE_00/components/BannerVar.vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
 import { newDynamicContent } from '@test/banners/dynamicCampaignContent';
-import { useOfFundsContent } from '@test/banners/useOfFundsContent';
+import { useOfFundsContent } from '@test/banners/useOfFundsContent2024';
 import { formItems } from '@test/banners/formItems';
 import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
 import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
-import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentFeatures } from '@test/features/BannerContent';
 import { resetFormModel } from '@test/resetFormModel';
 import { useFormModel } from '@src/components/composables/useFormModel';
@@ -19,6 +18,7 @@ import { Timer } from '@src/utils/Timer';
 import { TimerStub } from '@test/fixtures/TimerStub';
 import { fakeFormActions } from '@test/fixtures/FakeFormActions';
 import { paymentIconFeatures } from '@test/features/PaymentIcons';
+import { desktopUseOfFundsFeatures } from '@test/features/UseOfFunds2024';
 
 const formModel = useFormModel();
 const translator = ( key: string ): string => key;
@@ -115,9 +115,11 @@ describe( 'BannerCtrl.vue', () => {
 	describe( 'Use of Funds', () => {
 		test.each( [
 			[ 'expectShowsUseOfFunds' ],
-			[ 'expectHidesUseOfFunds' ]
+			[ 'expectHidesUseOfFunds' ],
+			[ 'expectEmitsModalOpenedEvent' ],
+			[ 'expectEmitsModalClosedEvent' ]
 		] )( '%s', async ( testName: string ) => {
-			await useOfFundsFeatures[ testName ]( getWrapper() );
+			await desktopUseOfFundsFeatures[ testName ]( getWrapper() );
 		} );
 	} );