Skip to content

Commit

Permalink
Implement VAR for C24_WMDE_Desktop_EN_03
Browse files Browse the repository at this point in the history
- Use main donation form with transaction fees in VAR
- Fix test name in C24_WPDE_Desktop_01

Ticket: https://phabricator.wikimedia.org/T378702
  • Loading branch information
gbirke committed Nov 4, 2024
1 parent 656b09d commit 4cc6f9f
Show file tree
Hide file tree
Showing 8 changed files with 233 additions and 16 deletions.
2 changes: 1 addition & 1 deletion banners/english/C24_WMDE_Desktop_EN_03/banner_var.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
// Channel specific form setup
import { createFormItems } from './form_items';
import { createFormActions } from '@src/createFormActions';
import eventMappings from './event_map';
import eventMappings from './event_map_var';
import { createFallbackDonationURL } from '@src/createFallbackDonationURL';

const localeFactory = new LocaleFactoryEn();
Expand Down
20 changes: 15 additions & 5 deletions banners/english/C24_WMDE_Desktop_EN_03/components/BannerVar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@
</template>

<template #donation-form="{ formInteraction }: any">
<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :submit-callback="onFormSubmit">

<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
<MainDonationFormTransactionFees :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>
Expand All @@ -39,7 +40,7 @@
<MastercardLogo/>
</span>
</template>
</MainDonationForm>
</MainDonationFormTransactionFees>
</template>

<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
Expand Down Expand Up @@ -84,13 +85,13 @@

<script setup lang="ts">
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
import { ref, watch } from 'vue';
import { inject, ref, watch } from 'vue';
import MainBanner from './MainBanner.vue';
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 MainDonationFormTransactionFees from '@src/components/DonationForm/Forms/MainDonationFormTransactionFees.vue';
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
import BannerText from '../content/BannerText.vue';
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
Expand All @@ -111,6 +112,8 @@ import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
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 { CoverTransactionFeesEvent } from '@src/tracking/events/CoverTransactionFeesEvent';
import { Tracker } from '@src/tracking/Tracker';
enum ContentStates {
Main = 'wmde-banner-wrapper--main',
Expand All @@ -131,6 +134,7 @@ interface Props {
const props = defineProps<Props>();
const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] );
const tracker = inject<Tracker>( 'tracker' );
const isFundsModalVisible = ref<boolean>( false );
const contentState = ref<ContentStates>( ContentStates.Main );
const formModel = useFormModel();
Expand All @@ -155,4 +159,10 @@ function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
}
function onFormSubmit(): void {
if ( formModel.hasTransactionFee.value ) {
tracker.trackEvent( new CoverTransactionFeesEvent() );
}
}
</script>
40 changes: 40 additions & 0 deletions banners/english/C24_WMDE_Desktop_EN_03/event_map_var.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent';
import { CloseEvent } from '@src/tracking/events/CloseEvent';
import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
import { ShownEvent } from '@src/tracking/events/ShownEvent';
import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent';
import { CoverTransactionFeesEvent } from '@src/tracking/events/CoverTransactionFeesEvent';

export default new Map<string, TrackingEventConverterFactory>( [
[ ShownEvent.EVENT_NAME, mapShownEvent ],
[ CloseEvent.EVENT_NAME, mapCloseEvent ],

[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
[ CustomAmountChangedEvent.EVENT_NAME,
( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent =>
new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 )
],
[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
switch ( e.feature ) {
case 'UpgradeToYearlyForm':
return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
case 'CustomAmountForm':
return new WMDESizeIssueEvent( `submit-different-amount`, createViewportInfo(), 1 );
default:
return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
}
} ],
[ FallbackBannerSubmitEvent.EVENT_NAME, ( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent => new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 ) ],
[ CoverTransactionFeesEvent.EVENT_NAME, ( e: CoverTransactionFeesEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.userChoice + 'cover-transaction-fee', 1 ) ]
] );
3 changes: 2 additions & 1 deletion banners/english/C24_WMDE_Desktop_EN_03/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ const messages: TranslationMessages = {
...FallbackBanner,
'upgrade-to-yearly-copy': '<p>Every year we are dependent on the support of people like you. Yearly donations ' +
'help sustainably and enable long term development.</p>' +
'<p>No risks attached, you can tell us to stop at any time.</p>'
'<p>No risks attached, you can tell us to stop at any time.</p>',
'cover-transaction-costs': 'I\'ll generously add {{transactionCosts}} to cover the transaction fees so you can keep 100% of my donation.'
};

export default messages;
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
);
@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel';
@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
@use 'src/themes/Treedip/DonationForm/SubComponents/TransactionFees';
@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
$padding: 14px 0 0
);
Expand Down
27 changes: 19 additions & 8 deletions docs/2025PostCampaignCleanUp.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ but actually it was `Euros and Cents`. We are used to the amount being `Cents` f
using this best practice. See https://stackoverflow.com/questions/3730019/why-not-use-double-or-float-to-represent-currency

### Files to look at:
- `../src/utils/FormModel/FormModel.ts`
- `../src/components/composables/useAmountBasedFormAction.ts`
- `src/utils/FormModel/FormModel.ts`
- `src/components/composables/useAmountBasedFormAction.ts`


## Create parameters for 2025 campaign and adapt dev banner
Expand All @@ -39,7 +39,7 @@ a Webpack warning. The current "solution" was to set the limit to 310KB (from 25
solution would be to remove features. When that can be done, please check with lower limits.

### Files to look at:
- `../webpack/webpack.production.js`
- `webpack/webpack.production.js`

## Average Donation
This value is in the dynamic content and was previously only used for calculating part of the projection. It's now exposed to the banner content so we should decide if we need to move it out of the campaignProjection part of the CampaignParameters and inject it into the CampaignProjection class separately.
Expand All @@ -64,7 +64,7 @@ The prop `:showManualUpgradeOption="false"` does not show the third, link option
- How do we take care of this form in future? Because our UpgradeToYearly for will always have two buttons only.

### Files to look at:
src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue
- `src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue`


## Move "close cookie" setting for WPDE banners into `PageWPDE.setCloseCookieIfNecessary`
Expand All @@ -81,8 +81,8 @@ Then we remove the custom components and the code that toggles them and move the
and call its different methods inside the `setCloseCookieIfNecessary` method.

## Files to look at
../src/page/PageWPDE.ts
../banners/*/components/*.vue
- `src/page/PageWPDE.ts`
- `banners/*/components/*.vue`


## Remove: AlreadyDonatedModal is probably no longer used after HK24
Expand All @@ -91,5 +91,16 @@ Since `C24_WMDE_Desktop_EN_02b` (https://github.com/wmde/fundraising-banners/pul
the AlreadyDonated feature does not open a modal anymore but closes the banner directly.

### Files to look at:
src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue
css styling + tracking events (close events of the buttons)
- `src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue`
- css styling + tracking events (close events of the buttons)


## Move translations for "transaction fee" into "MainDonationForm" messages

If the "transaction fee" feature moves into other banners, we should move the translation key `cover-transaction-costs`
into the `MainDonationForm` messages.

### Files to look at:

- `src/components/DonationForm/Forms/messages/MainDonationForm.*.ts`
- `banners/*/*/messages.ts`
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
import { afterEach, beforeEach, describe, test, vi } from 'vitest';
import { mount, VueWrapper } from '@vue/test-utils';
import Banner from '@banners/english/C24_WMDE_Desktop_EN_03/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 { TrackerStub } from '@test/fixtures/TrackerStub';
import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton';
import { useFormModel } from '@src/components/composables/useFormModel';
import { resetFormModel } from '@test/resetFormModel';
import { bannerMainFeatures } from '@test/features/MainBanner';
import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal';
import { softCloseFeatures } from '@test/features/SoftCloseDesktop';
import { donationFormTransactionFeeFeatures } from '@test/features/forms/MainDonation_TransactionFee';

const formModel = useFormModel();
const translator = ( key: string, context: any ): string => context ? `${key} -- ${Object.entries( context )}` : key;

describe( 'BannerCtrl.vue', () => {

beforeEach( () => {
resetFormModel( formModel );
vi.useFakeTimers();
} );

afterEach( () => {
vi.restoreAllMocks();
vi.useRealTimers();
} );

const getWrapper = ( dynamicContent: DynamicContent = null ): VueWrapper<any> => {
return mount( Banner, {
attachTo: document.body,
props: {
bannerState: BannerStates.Pending,
useOfFundsContent,
remainingImpressions: 10
},
global: {
mocks: {
$translate: translator
},
provide: {
translator: { translate: translator },
dynamicCampaignText: dynamicContent ?? newDynamicContent(),
formActions: { donateWithAddressAction: 'https://example.com', donateWithoutAddressAction: 'https://example.com' },
currencyFormatter: new CurrencyEn(),
formItems,
tracker: new TrackerStub()
}
}
} );
};

describe( 'Main Banner', () => {
test.each( [
[ 'expectDoesNotEmitCloseEvent' ]
] )( '%s', async ( testName: string ) => {
await bannerMainFeatures[ 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( [
[ 'expectShowsLiveDateAndTimeInMessage' ],
[ 'expectShowsLiveDateAndTimeInSlideshow' ]
] )( '%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() );
} );
} );

describe( 'Soft Close', () => {
test.each( [
[ 'expectShowsSoftClose' ],
[ 'expectEmitsSoftCloseCloseEvent' ],
[ 'expectEmitsSoftCloseMaybeLaterEvent' ],
[ 'expectEmitsSoftCloseTimeOutEvent' ],
[ 'expectEmitsBannerContentChangedOnSoftClose' ],
[ 'expectDoesNotShowSoftCloseOnFinalBannerImpression' ]
] )( '%s', async ( testName: string ) => {
await softCloseFeatures[ testName ]( getWrapper() );
} );
} );

describe( 'Donation Form Transaction Fees', () => {
test.each( [
[ 'expectMainDonationFormShowsTransactionFeeForPayPalAndCreditCard' ],
[ 'expectMainDonationFormSetsSubmitValuesWithTransactionFee' ],
[ 'expectUpsellFormHasTransactionFee' ]
] )( '%s', async ( testName: string ) => {
await donationFormTransactionFeeFeatures[ testName ]( getWrapper() );
} );
} );

describe( 'Use of Funds', () => {
test.each( [
[ 'expectShowsUseOfFunds' ],
[ 'expectHidesUseOfFunds' ]
] )( '%s', async ( testName: string ) => {
await useOfFundsFeatures[ testName ]( getWrapper() );
} );
} );

describe( 'Already Donated', () => {
test.each( [
[ 'expectFiresMaybeLaterEventOnLinkClick' ]
] )( '%s', async ( testName: string ) => {
await alreadyDonatedModalFeatures[ testName ]( getWrapper() );
} );
} );
} );
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ describe( 'BannerVar.vue', () => {
} );
} );

describe( 'Donation Form Transaction Fees Paths', () => {
describe( 'Donation Form Transaction Fees', () => {
test.each( [
[ 'expectMainDonationFormShowsTransactionFeeForPayPalAndCreditCard' ],
[ 'expectMainDonationFormSetsSubmitValuesWithTransactionFee' ],
Expand Down

0 comments on commit 4cc6f9f

Please sign in to comment.