Prepare CTRL for C24_WMDE_Desktop_EN_06

- Add `modalOpened` and `modalClosed` events to use of funds. - Reset VAR files Ticket: https://phabricator.wikimedia.org/T381396
wmde · Dec 10, 2024 · 9246b09 · 9246b09
1 parent 7b3ba61
commit 9246b09
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 55 deletions.
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
@@ -17,7 +17,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
 import { Locales } from '@src/domain/Locales';
-import messages from './messages_var';
+import messages from './messages';
 import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.vue
@@ -56,7 +56,7 @@
             </template>
 			<template #footer>
 				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
+					@showFundsModal="onOpenUseOfFunds"
 					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
 				/>
 			</template>
@@ -70,10 +70,10 @@
 			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
 		/>
 
-        <FundsModal
-            :content="useOfFundsContent"
-            :is-funds-modal-visible="isFundsModalVisible"
-            @hideFundsModal="isFundsModalVisible = false"
+    <FundsModal
+        :content="useOfFundsContent"
+        :is-funds-modal-visible="isFundsModalVisible"
+        @hideFundsModal="onCloseUseOfFunds"
 		>
 			<template #infographic>
 				<WMDEFundsForwardingEN/>
@@ -130,7 +130,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
 useBannerHider( 800, emit );
 
 const isFundsModalVisible = ref<boolean>( false );
@@ -145,6 +145,16 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onOpenUseOfFunds(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+function onCloseUseOfFunds(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
 function onCloseMain(): void {
 	if ( props.remainingImpressions > 0 ) {
 		contentState.value = ContentStates.SoftClosing;

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
@@ -28,7 +28,7 @@
 				<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
 
 					<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
-						<MainDonationFormAddressType :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>
@@ -39,11 +39,7 @@
 									<MastercardLogo/>
 								</span>
 							</template>
-
-							<template #button>
-								<MainDonationFormPaymentsAndReceiptButton/>
-							</template>
-						</MainDonationFormAddressType>
+						</MainDonationForm>
 					</template>
 
 					<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
@@ -60,7 +56,7 @@
             </template>
 			<template #footer>
 				<FooterAlreadyDonated
-					@showFundsModal="isFundsModalVisible = true"
+					@showFundsModal="onOpenUseOfFunds"
 					@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
 				/>
 			</template>
@@ -74,10 +70,10 @@
 			@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
 		/>
 
-        <FundsModal
-            :content="useOfFundsContent"
-            :is-funds-modal-visible="isFundsModalVisible"
-            @hideFundsModal="isFundsModalVisible = false"
+    <FundsModal
+        :content="useOfFundsContent"
+        :is-funds-modal-visible="isFundsModalVisible"
+        @hideFundsModal="onCloseUseOfFunds"
 		>
 			<template #infographic>
 				<WMDEFundsForwardingEN/>
@@ -94,13 +90,18 @@ import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
 import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
 import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
 import BannerSlides from '../content/BannerSlides.vue';
+import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
 import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
 import BannerText from '../content/BannerText.vue';
 import KeenSlider from '@src/components/Slider/KeenSlider.vue';
 import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.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 {
+	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';
@@ -111,8 +112,6 @@ import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue'
 import SoftClose from '@src/components/SoftClose/SoftClose.vue';
 import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.vue';
 import { useBannerHider } from '@src/components/composables/useBannerHider';
-import MainDonationFormAddressType from '@src/components/DonationForm/Forms/MainDonationFormDonationReceipt.vue';
-import MainDonationFormPaymentsAndReceiptButton from '@src/components/DonationForm/Forms/MainDonationFormPaymentsAndReceiptButton.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -131,7 +130,7 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
+const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
 useBannerHider( 800, emit );
 
 const isFundsModalVisible = ref<boolean>( false );
@@ -146,6 +145,16 @@ watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
 } );
 
+function onOpenUseOfFunds(): void {
+	isFundsModalVisible.value = true;
+	emit( 'modalOpened' );
+}
+
+function onCloseUseOfFunds(): void {
+	isFundsModalVisible.value = false;
+	emit( 'modalClosed' );
+}
+
 function onCloseMain(): void {
 	if ( props.remainingImpressions > 0 ) {
 		contentState.value = ContentStates.SoftClosing;

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
@@ -40,7 +40,7 @@
 );
 @use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel';
 @use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
-@use 'src/themes/Treedip/DonationForm/Forms/MainDonationFormDonationReceipt' with (
+@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
 	$padding: 14px 0 0
 );
 @use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with (

diff --git a/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts b/test/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.spec.ts
@@ -9,7 +9,7 @@ import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn';
 import { useOfFundsFeatures } from '@test/features/UseOfFunds';
 import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures, bannerContentDisplaySwitchFeatures, bannerContentFeatures } from '@test/features/BannerContent';
 import { TrackerStub } from '@test/fixtures/TrackerStub';
-import { donationFormFeatures } from '@test/features/forms/MainDonationDonationReceipt_UpgradeToYearlyButton';
+import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
 import { useFormModel } from '@src/components/composables/useFormModel';
 import { resetFormModel } from '@test/resetFormModel';
 import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner';
@@ -103,8 +103,7 @@ describe( 'BannerVar.vue', () => {
 			[ 'expectMainDonationFormSubmitsWhenYearlyIsSelected' ],
 			[ 'expectMainDonationFormGoesToUpgrade' ],
 			[ 'expectUpgradeToYearlyFormSubmitsUpgrade' ],
-			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ],
-			[ 'expectMainDonationFormShowsDonationReceiptCheckbox' ]
+			[ 'expectUpgradeToYearlyFormSubmitsDontUpgrade' ]
 		] )( '%s', async ( testName: string ) => {
 			await donationFormFeatures[ testName ]( getWrapper() );
 		} );