From fb3123e44e931e5b93d879f482398c7f4c426b35 Mon Sep 17 00:00:00 2001 From: Sperling-0 Date: Tue, 17 Dec 2024 15:11:54 +0100 Subject: [PATCH] Prepare CTRL for C24_WMDE_Desktop_DE_22 - The banner is based on CTRL of desktop-de-21 Ticket: https://phabricator.wikimedia.org/T382301 --- .../C24_WMDE_Desktop_DE_22/banner_var.ts | 6 +- .../components/BannerVar.vue | 215 ------------------ .../C24_WMDE_Desktop_DE_22/event_map_var.ts | 57 ----- .../styles/styles_var.scss | 60 ----- .../components/BannerVar.spec.ts | 191 ---------------- 5 files changed, 3 insertions(+), 526 deletions(-) delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_22/event_map_var.ts delete mode 100644 banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles_var.scss delete 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 9744c26f9..4c1e2ca7c 100644 --- a/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts +++ b/banners/desktop/C24_WMDE_Desktop_DE_22/banner_var.ts @@ -1,9 +1,9 @@ import { createVueApp } from '@src/createVueApp'; -import './styles/styles_var.scss'; +import './styles/styles.scss'; import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue'; -import Banner from './components/BannerVar.vue'; +import Banner from './components/BannerCtrl.vue'; import FallbackBanner from './components/FallbackBanner.vue'; import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment'; import { WindowResizeHandler } from '@src/utils/ResizeHandler'; @@ -16,7 +16,7 @@ import { Translator } from '@src/Translator'; import DynamicTextPlugin from '@src/DynamicTextPlugin'; import { LocalImpressionCount } from '@src/utils/LocalImpressionCount'; import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG'; -import eventMappings from './event_map_var'; +import eventMappings from './event_map'; import { createFallbackDonationURL } from '@src/createFallbackDonationURL'; import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker'; import messages from './messages'; diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue deleted file mode 100644 index 8701e4c3b..000000000 --- a/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.vue +++ /dev/null @@ -1,215 +0,0 @@ - - - diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/event_map_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_22/event_map_var.ts deleted file mode 100644 index e61a5dec4..000000000 --- a/banners/desktop/C24_WMDE_Desktop_DE_22/event_map_var.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG'; -import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent'; -import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue'; -import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent'; -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 { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo'; -import { AlreadyDonatedShownEvent } from '@src/tracking/events/AlreadyDonatedShownEvent'; -import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent'; -import { ShownEvent } from '@src/tracking/events/ShownEvent'; -import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent'; -import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent'; -import { BannerMinimisedEvent } from '@banners/desktop/C24_WMDE_Desktop_DE_00/events/BannerMinimisedEvent'; -import { BannerMaximisedEvent } from '@banners/desktop/C24_WMDE_Desktop_DE_00/events/BannerMaximisedEvent'; - -export default new Map( [ - [ ShownEvent.EVENT_NAME, mapShownEvent ], - [ CloseEvent.EVENT_NAME, mapCloseEvent ], - [ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ], - [ CustomAmountChangedEvent.EVENT_NAME, - ( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 ) - ], - [ AlreadyDonatedShownEvent.EVENT_NAME, ( e: AlreadyDonatedShownEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName, 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 'UpgradeToMonthlyForm': - return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 ); - default: - return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 ); - } - } ], - [ FallbackBannerSubmitEvent.EVENT_NAME, - ( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent => - new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 ) - ], - [ BannerSubmitOnReturnEvent.EVENT_NAME, - ( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) - ], - [ BannerMinimisedEvent.EVENT_NAME, - ( e: BannerMinimisedEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( e.eventName, 1 ) - ], - [ BannerMaximisedEvent.EVENT_NAME, - ( e: BannerMaximisedEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( `${e.eventName}-${e.userChoice}`, 1 ) - ] -] ); diff --git a/banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles_var.scss deleted file mode 100644 index 814e67a55..000000000 --- a/banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles_var.scss +++ /dev/null @@ -1,60 +0,0 @@ -// This is the file where we import the theme-specific component styles -@use 'src/themes/Treedip/swatches/skin_default' with ( - $slider: true, - $select-group: true, - $upgrade-to-yearly: true, - $fallback-banner: true, - $double-progress-bar: true, - $soft-close: true, - $minimised-banner: true, -); -@use 'src/components/BannerConductor/banner-transition'; -@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default; -@use 'Banner'; -@use 'src/themes/UseOfFunds/UseOfFunds'; -@use 'MainBanner' with ( - $banner-height: 357px, - $form-width: 300px -); -@use 'MinimisedBanner'; -@use 'src/themes/Treedip/defaults'; -@use 'src/themes/Treedip/ButtonClose/ButtonClose'; -@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar'; -@use 'src/themes/Treedip/DonationForm/DonationForm'; -@use 'src/themes/Treedip/DonationForm/MultiStepDonation'; -@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup'; -@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios'; -@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio'; -@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox'; -@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm'; -@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm' with ( - $font-size: 14px -); -@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm'; -@use 'src/themes/Treedip/Footer/FooterAlreadyDonated'; -@use 'src/themes/Treedip/Footer/SelectionInput'; -@use 'src/themes/Treedip/Message/Message' with ( - $slider-main-headline-font-size: 25px, - $message-header-padding-bottom: 8px, - $message-header-small-up-padding-bottom: 8px -); -@use 'src/themes/Treedip/SoftClose/SoftClose'; -@use 'src/themes/Treedip/Slider/KeenSlider' with ( - $slider-padding: 0 -); - -/** - * Fallback banner with "Fijitiv" theme - * All selectors in Fijitiv theme are prefixed with the ".wmde-banner-fallback" class selector, - so they override the "default" styles with the same selector - */ -@use 'FallbackBanner'; -@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton'; -@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter' with ( - $fallback-large-footer-right-before-border-color: white -); -@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter'; -@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with ( - $progress-bar-margin: 0 15px -); -@use 'src/themes/Fijitiv/Slider/KeenSlider' as FallbackSlider; 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 deleted file mode 100644 index 7f6e75479..000000000 --- a/test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts +++ /dev/null @@ -1,191 +0,0 @@ -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'; -import { autoCollapseFeatures } from '@test/features/AutoCollapseDesktop'; - -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 => { - 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() ); - } ); - } ); - - describe( 'Minimised Banner', () => { - test.each( [ - [ 'expectAutoCollapsesTheMainBanner' ], - [ 'expectTracksAutoCollapse' ], - [ 'expectRemovesEventListenerWhenCollapsed' ], - [ 'expectGoesToSoftCloseFromMinimised' ], - [ 'expectGoesBackToMainBannerFromMinimised' ] - ] )( '%s', async ( testName: string ) => { - await autoCollapseFeatures[ testName ]( getWrapper, tracker ); - } ); - } ); -} );