Prepare thank you banner

Ticket: https://phabricator.wikimedia.org/T352651

banners/thank_you/MembershipFormActions.ts

@@ -0,0 +1,31 @@
+/* eslint-disable camelcase */
+import { TrackingParameters } from '@src/domain/TrackingParameters';
+import { ImpressionCount } from '@src/utils/ImpressionCount';
+
+const MEMBERSHIP_FORM_URL = 'https://spenden.wikimedia.de/apply-for-membership';
+
+export interface MembershipFormActions {
+	create( extraUrlParameters: Record<string, string> ): string;
+}
+
+export class TrackingMembershipFormActions implements MembershipFormActions {
+	private _tracking: TrackingParameters;
+	private _impressionCount: ImpressionCount;
+
+	public constructor( tracking: TrackingParameters, impressionCount: ImpressionCount ) {
+		this._tracking = tracking;
+		this._impressionCount = impressionCount;
+	}
+
+	public create( extraUrlParameters: Record<string, string> = {} ): string {
+		const urlParameters = new URLSearchParams( {
+			piwik_kwd: this._tracking.keyword,
+			piwik_campaign: this._tracking.campaign,
+			impCount: String( this._impressionCount.overallCountIncremented ),
+			bImpCount: String( this._impressionCount.bannerCountIncremented ),
+			...extraUrlParameters
+		} );
+
+		return `${MEMBERSHIP_FORM_URL}?${urlParameters}`;
+	}
+}

banners/thank_you/banner_ctrl.de.ts

@@ -0,0 +1,59 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.de.vue';
+import messages from './messages.de';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createSubscribeURL } from './createSubscribeURL';
+
+const localeFactory = new LocaleFactoryDe();
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		progressBarFillPercentage: 80,
+		subscribeURL: createSubscribeURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_ctrl.en.ts

@@ -0,0 +1,59 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.en.vue';
+import messages from './messages.en';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createSubscribeURL } from './createSubscribeURL';
+import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
+
+const localeFactory = new LocaleFactoryEn();
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		progressBarFillPercentage: 80,
+		subscribeURL: createSubscribeURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_ctrl.wpde.ts

@@ -0,0 +1,61 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+import { Translator } from '@src/Translator';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerCtrl.de.vue';
+import messages from './messages.de';
+import TranslationPlugin from '@src/TranslationPlugin';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createSubscribeURL } from './createSubscribeURL';
+import PageWPDE from '@src/page/PageWPDE';
+import { TrackerWPDE } from '@src/tracking/TrackerWPDE';
+import eventMap from '../wpde_desktop/event_map';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+
+// Tracking placeholders will be replaced by webpack string-replace-loader
+// using the campaign configuration ( campaign_info.toml ) for the correct values
+const tracking = {
+	campaign: '!insert-campaign-here!',
+	keyword: '!insert-keyword-here!'
+};
+
+const page = new PageWPDE( tracking );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new TrackerWPDE( 'FundraisingTracker', page.getTracking().keyword, eventMap, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		progressBarFillPercentage: 80,
+		subscribeURL: createSubscribeURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_var.de.ts

@@ -0,0 +1,59 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.de.vue';
+import messages from './messages.de';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createSubscribeURL } from './createSubscribeURL';
+
+const localeFactory = new LocaleFactoryDe();
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		progressBarFillPercentage: 80,
+		subscribeURL: createSubscribeURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_var.en.ts

@@ -0,0 +1,59 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+
+import PageWPORG from '@src/page/PageWPORG';
+import { SkinFactory } from '@src/page/skin/SkinFactory';
+import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker';
+import { Translator } from '@src/Translator';
+import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.en.vue';
+import messages from './messages.en';
+import eventMappings from '../thank_you/event_map';
+import TranslationPlugin from '@src/TranslationPlugin';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createSubscribeURL } from './createSubscribeURL';
+import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
+
+const localeFactory = new LocaleFactoryEn();
+
+const translator = new Translator( messages );
+const mediaWiki = new WindowMediaWiki();
+const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		progressBarFillPercentage: 80,
+		subscribeURL: createSubscribeURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount ) );
+
+app.mount( page.getBannerContainer() );

banners/thank_you/banner_var.wpde.ts

@@ -0,0 +1,61 @@
+import { createVueApp } from '@src/createVueApp';
+
+import './styles/styles.scss';
+import { Translator } from '@src/Translator';
+import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
+import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
+import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
+import { WindowResizeHandler } from '@src/utils/ResizeHandler';
+import Banner from './components/BannerVar.de.vue';
+import messages from './messages.de';
+import TranslationPlugin from '@src/TranslationPlugin';
+import DynamicTextPlugin from '@src/DynamicTextPlugin';
+import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
+import { TrackingMembershipFormActions } from './MembershipFormActions';
+import { createSubscribeURL } from './createSubscribeURL';
+import PageWPDE from '@src/page/PageWPDE';
+import { TrackerWPDE } from '@src/tracking/TrackerWPDE';
+import eventMap from '../wpde_desktop/event_map';
+
+const localeFactory = new LocaleFactoryDe();
+const translator = new Translator( messages );
+
+// Tracking placeholders will be replaced by webpack string-replace-loader
+// using the campaign configuration ( campaign_info.toml ) for the correct values
+const tracking = {
+	campaign: '!insert-campaign-here!',
+	keyword: '!insert-keyword-here!'
+};
+
+const page = new PageWPDE( tracking );
+const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
+const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
+const tracker = new TrackerWPDE( 'FundraisingTracker', page.getTracking().keyword, eventMap, runtimeEnvironment );
+
+const app = createVueApp( BannerConductor, {
+	page,
+	bannerConfig: {
+		delay: 0,
+		transitionDuration: 1000
+	},
+	bannerProps: {
+		progressBarFillPercentage: 80,
+		subscribeURL: createSubscribeURL( page.getTracking(), impressionCount )
+	},
+	resizeHandler: new WindowResizeHandler(),
+	banner: Banner,
+	impressionCount
+} );
+
+app.use( TranslationPlugin, translator );
+app.use( DynamicTextPlugin, {
+	campaignParameters: page.getCampaignParameters(),
+	date: new Date(),
+	formatters: localeFactory.getFormatters(),
+	impressionCount,
+	translator
+} );
+app.provide( 'tracker', tracker );
+app.provide( 'formActions', new TrackingMembershipFormActions( page.getTracking(), impressionCount ) );
+
+app.mount( page.getBannerContainer() );