Make number of members configurable

Number of members displayed in the stats block is now a locale-aware number that can be changed globally without redeploying the banners. Added more requirements to cleanup document. Ticket: https://phabricator.wikimedia.org/T382313
wmde · Jan 2, 2025 · 062f934 · 062f934
1 parent 836a067
commit 062f934
Show file tree

Hide file tree

Showing 26 changed files with 78 additions and 22 deletions.
diff --git a/banners/thank_you_2024/components/BannerCtrl.de.vue b/banners/thank_you_2024/components/BannerCtrl.de.vue
@@ -13,12 +13,13 @@
 
 		<FullPageBanner
 			:visible="contentState === ContentStates.Full"
+			:number-of-people="settings.numberOfMembers"
 			@close="hideModal"
 			@membership-with-amount="membershipWithAmount"
 			@membership-without-amount="membershipWithoutAmount"
 		>
 			<template #text>
-				<FullPageBannerTextWin/>
+				<FullPageBannerTextWin :number-of-people="settings.numberOfMembers"/>
 			</template>
 
 			<template #benefits>
@@ -37,7 +38,7 @@
 
 import { inject, ref } from 'vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ThankYouSettings } from '@banners/thank_you/settings';
+import { ThankYouSettings } from '@banners/thank_you_2024/settings';
 import { Tracker } from '@src/tracking/Tracker';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { CloseChoices } from '@src/domain/CloseChoices';

diff --git a/banners/thank_you_2024/components/BannerCtrl.en.vue b/banners/thank_you_2024/components/BannerCtrl.en.vue
@@ -13,12 +13,13 @@
 
 		<FullPageBanner
 			:visible="contentState === ContentStates.Full"
+			:number-of-people="settings.numberOfMembers"
 			@close="hideModal"
 			@membership-with-amount="membershipWithAmount"
 			@membership-without-amount="membershipWithoutAmount"
 		>
 			<template #text>
-				<FullPageBannerTextWin/>
+				<FullPageBannerTextWin :number-of-people="settings.numberOfMembers"/>
 			</template>
 
 			<template #benefits>
@@ -37,7 +38,7 @@
 
 import { inject, ref } from 'vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ThankYouSettings } from '@banners/thank_you/settings';
+import { ThankYouSettings } from '@banners/thank_you_2024/settings';
 import { Tracker } from '@src/tracking/Tracker';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { CloseChoices } from '@src/domain/CloseChoices';

diff --git a/banners/thank_you_2024/components/BannerVar.de.vue b/banners/thank_you_2024/components/BannerVar.de.vue
@@ -13,12 +13,13 @@
 
 		<FullPageBanner
 			:visible="contentState === ContentStates.Full"
+			:number-of-people="settings.numberOfMembers"
 			@close="hideModal"
 			@membership-with-amount="membershipWithAmount"
 			@membership-without-amount="membershipWithoutAmount"
 		>
 			<template #text>
-				<FullPageBannerTextWin/>
+				<FullPageBannerTextWin :number-of-people="settings.numberOfMembers"/>
 			</template>
 
 			<template #benefits>
@@ -37,7 +38,7 @@
 
 import { inject, ref } from 'vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ThankYouSettings } from '@banners/thank_you/settings';
+import { ThankYouSettings } from '@banners/thank_you_2024/settings';
 import { Tracker } from '@src/tracking/Tracker';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { CloseChoices } from '@src/domain/CloseChoices';

diff --git a/banners/thank_you_2024/components/BannerVar.en.vue b/banners/thank_you_2024/components/BannerVar.en.vue
@@ -13,12 +13,13 @@
 
 		<FullPageBanner
 			:visible="contentState === ContentStates.Full"
+			:number-of-people="settings.numberOfMembers"
 			@close="hideModal"
 			@membership-with-amount="membershipWithAmount"
 			@membership-without-amount="membershipWithoutAmount"
 		>
 			<template #text>
-				<FullPageBannerTextWin/>
+				<FullPageBannerTextWin :number-of-people="settings.numberOfMembers"/>
 			</template>
 
 			<template #benefits>
@@ -37,7 +38,7 @@
 
 import { inject, ref } from 'vue';
 import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
-import { ThankYouSettings } from '@banners/thank_you/settings';
+import { ThankYouSettings } from '@banners/thank_you_2024/settings';
 import { Tracker } from '@src/tracking/Tracker';
 import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { CloseChoices } from '@src/domain/CloseChoices';

diff --git a/banners/thank_you_2024/components/FullPageBanner.vue b/banners/thank_you_2024/components/FullPageBanner.vue
@@ -9,7 +9,7 @@
 					</article>
 					<aside>
 						<ExecutiveDirectorsImage/>
-						<StatsBox/>
+						<StatsBox :number-of-people="numberOfPeople"/>
 					</aside>
 				</div>
 				<div class="wmde-banner-full-cta">
@@ -40,6 +40,7 @@ import StatsBox from '../components/StatsBox.vue';
 
 interface Props {
 	visible: boolean;
+	numberOfPeople: string
 }
 
 const props = defineProps<Props>();

diff --git a/banners/thank_you_2024/components/StatsBox.vue b/banners/thank_you_2024/components/StatsBox.vue
@@ -15,7 +15,7 @@
 				</svg>
 			</span>
 			<span>
-				<strong v-html="$translate( 'stats-people-amount' )"/><br/>
+				<strong>{{ numberOfPeople }}</strong><br/>
 				<span v-html="$translate( 'stats-people-text' )"/>
 			</span>
 		</li>
@@ -51,3 +51,10 @@
 		</li>
 	</ul>
 </template>
+<script setup lang="ts">
+interface Props {
+	numberOfPeople: string
+}
+
+defineProps<Props>();
+</script>
diff --git a/banners/thank_you_2024/content/win/FullPageBannerText.de.vue b/banners/thank_you_2024/content/win/FullPageBannerText.de.vue
@@ -25,7 +25,7 @@
 		</p>
 
 		<span class="wmde-banner-mobile-only">
-			<StatsBox/>
+			<StatsBox :number-of-people="numberOfPeople"/>
 		</span>
 
 		<p>
@@ -48,4 +48,9 @@
 <script setup lang="ts">
 import ExecutiveDirectorsImage from '@banners/thank_you_2024/content/ExecutiveDirectorsImage.vue';
 import StatsBox from '@banners/thank_you_2024/components/StatsBox.vue';
+interface Props {
+	numberOfPeople: string
+}
+
+defineProps<Props>();
 </script>
diff --git a/banners/thank_you_2024/content/win/FullPageBannerText.en.vue b/banners/thank_you_2024/content/win/FullPageBannerText.en.vue
@@ -24,7 +24,7 @@
 		</p>
 
 		<span class="wmde-banner-mobile-only">
-			<StatsBox/>
+			<StatsBox :number-of-people="numberOfPeople"/>
 		</span>
 
 		<p>
@@ -42,4 +42,9 @@
 <script setup lang="ts">
 import ExecutiveDirectorsImage from '@banners/thank_you_2024/content/ExecutiveDirectorsImage.vue';
 import StatsBox from '@banners/thank_you_2024/components/StatsBox.vue';
+interface Props {
+	numberOfPeople: string
+}
+
+defineProps<Props>();
 </script>
diff --git a/banners/thank_you_2024/content/win/FullPageBannerTextVar.de.vue b/banners/thank_you_2024/content/win/FullPageBannerTextVar.de.vue
@@ -23,7 +23,7 @@
 		</p>
 
 		<span class="wmde-banner-mobile-only">
-			<StatsBox/>
+			<StatsBox :number-of-people="numberOfPeople"/>
 		</span>
 
 		<p>
@@ -42,4 +42,9 @@
 <script setup lang="ts">
 import ExecutiveDirectorsImage from '@banners/thank_you_2024/content/ExecutiveDirectorsImage.vue';
 import StatsBox from '@banners/thank_you_2024/components/StatsBox.vue';
+interface Props {
+	numberOfPeople: string
+}
+
+defineProps<Props>();
 </script>
diff --git a/banners/thank_you_2024/content/win/FullPageBannerTextVar.en.vue b/banners/thank_you_2024/content/win/FullPageBannerTextVar.en.vue
@@ -23,7 +23,7 @@
 		</p>
 
 		<span class="wmde-banner-mobile-only">
-			<StatsBox/>
+			<StatsBox :number-of-people="numberOfPeople"/>
 		</span>
 
 		<p>
@@ -37,4 +37,9 @@
 <script setup lang="ts">
 import ExecutiveDirectorsImage from '@banners/thank_you_2024/content/ExecutiveDirectorsImage.vue';
 import StatsBox from '@banners/thank_you_2024/components/StatsBox.vue';
+interface Props {
+	numberOfPeople: string
+}
+
+defineProps<Props>();
 </script>
diff --git a/banners/thank_you_2024/messages.de.ts b/banners/thank_you_2024/messages.de.ts
@@ -10,7 +10,6 @@ const messages: TranslationMessages = {
 	'use-of-funds': 'Was Ihre Spende bewirkt',
 	'call-to-action-button-amount-per-month': 'Mit {{amount}} € im Monat fördern',
 	'call-to-action-button-different-amount': 'Mit anderem Betrag fördern',
-	'stats-people-amount': '109.500',
 	'stats-people-text': 'Mitglieder',
 	'stats-average-amount': '5&nbsp;€',
 	'stats-average-text': 'durchschnittlicher Monatsbeitrag',

diff --git a/banners/thank_you_2024/messages.en.ts b/banners/thank_you_2024/messages.en.ts
@@ -10,7 +10,6 @@ const messages: TranslationMessages = {
 	'use-of-funds': 'Where does my donation go?',
 	'call-to-action-button-amount-per-month': 'Support with €{{amount}} per month',
 	'call-to-action-button-different-amount': 'Support with a custom amount',
-	'stats-people-amount': '109.500',
 	'stats-people-text': 'members',
 	'stats-average-amount': '€5',
 	'stats-average-text': 'average monthly membership fee',

diff --git a/banners/thank_you_2024/settings.ts b/banners/thank_you_2024/settings.ts
@@ -3,12 +3,14 @@ import { ThankYouCampaignParameters } from '@src/domain/CampaignParameters';
 
 export interface ThankYouSettings {
 	numberOfDonors: string;
+	numberOfMembers: string;
 	progressBarPercentage: number;
 }
 
 export function createThankYouSettings( formatter: Integer, campaignParameters: ThankYouCampaignParameters ): ThankYouSettings {
 	return {
 		numberOfDonors: formatter.format( campaignParameters.numberOfDonors ),
+		numberOfMembers: formatter.format( campaignParameters.numberOfMembers ),
 		progressBarPercentage: campaignParameters.progressBarPercentage
 	};
 }
diff --git a/banners/thank_you_2024/styles/FullPageBanner.scss b/banners/thank_you_2024/styles/FullPageBanner.scss
@@ -40,7 +40,6 @@
 		margin: 0 auto;
 		border: 0;
 		padding: 0;
-		position: relative;
 
 		// This vertically centers the dialog, it needs to be tested more
 		top: 50%;

diff --git a/docs/2025PostCampaignCleanUp.md b/docs/2025PostCampaignCleanUp.md
@@ -131,6 +131,20 @@ If any imports from the `@banners/` namespace remain in the "final" banner, they
 - `banners/*/LAST_BANNER/event_map*` (`LAST_BANNER` is a placeholder for the last banner (i.e. highest test number) in each channel)
 - `src/tracking/events/*.ts`
 
+## Remove old thank-you banners
+
+Delete `banners/thank_you` and rename `banners/thank_you_2024` to `banners/thank_you`. Adapt `campaign_info.thank_you.toml`.
+
+## Make "Campaign Parameters" for thank-you banners independent of main campaign parameters
+To avoid littering all banners with thank-you related content (and vice versa) define a thank-you specific campaign parameter data structure and remove all thank-you related things from `CampaignParameters`.
+
+### Files to look at
+
+- `src/domain/CampaignParameters.ts`
+- `src/page/PageWPORG.ts`
+- `src/page/PageWPDE.ts`
+- `banners/thank_you/*.ts`
+
 ## Rename `ProgressBarAlternative.vue`
 
 ### Files to look at

diff --git a/src/domain/CampaignParameters.ts b/src/domain/CampaignParameters.ts
@@ -16,6 +16,7 @@ export interface CampaignProjectionParameters {
 
 export interface ThankYouCampaignParameters {
     numberOfDonors: number;
+    numberOfMembers: number;
     progressBarPercentage: number;
 }
 

diff --git a/src/page/PageWPORG.ts b/src/page/PageWPORG.ts
@@ -174,6 +174,7 @@ class PageWPORG implements Page {
 			urgencyMessageDaysLeft: Number( data.urgencyMessageDaysLeft ),
 			thankYouCampaign: {
 				numberOfDonors: Number( data.tyNumberOfDonors ),
+				numberOfMembers: Number( data.tyNumberOfMembers ),
 				progressBarPercentage: Number( data.tyProgressBarPercentage )
 			}
 		};

diff --git a/test/banners/thank_you_2024/BannerCtrl.de.spec.ts b/test/banners/thank_you_2024/BannerCtrl.de.spec.ts
@@ -31,6 +31,7 @@ describe( 'BannerCtrl.de.vue', () => {
 				bannerState: BannerStates.Pending,
 				settings: {
 					numberOfDonors: '42',
+					numberOfMembers: '23',
 					progressBarPercentage
 				},
 				subscribeURL: 'SUBSCRIBE URL',

diff --git a/test/banners/thank_you_2024/BannerCtrl.en.spec.ts b/test/banners/thank_you_2024/BannerCtrl.en.spec.ts
@@ -31,6 +31,7 @@ describe( 'BannerCtrl.en.vue', () => {
 				bannerState: BannerStates.Pending,
 				settings: {
 					numberOfDonors: '42',
+					numberOfMembers: '23',
 					progressBarPercentage
 				},
 				subscribeURL: 'SUBSCRIBE URL',

diff --git a/test/banners/thank_you_2024/BannerVar.de.spec.ts b/test/banners/thank_you_2024/BannerVar.de.spec.ts
@@ -31,6 +31,7 @@ describe( 'BannerVar.de.vue', () => {
 				bannerState: BannerStates.Pending,
 				settings: {
 					numberOfDonors: '42',
+					numberOfMembers: '23',
 					progressBarPercentage
 				},
 				subscribeURL: 'SUBSCRIBE URL',

diff --git a/test/banners/thank_you_2024/BannerVar.en.spec.ts b/test/banners/thank_you_2024/BannerVar.en.spec.ts
@@ -31,6 +31,7 @@ describe( 'BannerVar.en.vue', () => {
 				bannerState: BannerStates.Pending,
 				settings: {
 					numberOfDonors: '42',
+					numberOfMembers: '23',
 					progressBarPercentage
 				},
 				subscribeURL: 'SUBSCRIBE URL',

diff --git a/test/banners/thank_you_2024/FullPageBanner.spec.ts b/test/banners/thank_you_2024/FullPageBanner.spec.ts
@@ -16,7 +16,8 @@ describe( 'FullPageBanner.vue', () => {
 	const getWrapper = (): VueWrapper<any> => {
 		return mount( FullPageBanner, {
 			props: {
-				visible: false
+				visible: false,
+				numberOfPeople: '23'
 			},
 			global: {
 				mocks: {

diff --git a/test/fixtures/PageStub.ts b/test/fixtures/PageStub.ts
@@ -73,7 +73,8 @@ export class PageStub implements Page {
 			urgencyMessageDaysLeft: 0,
 			thankYouCampaign: {
 				progressBarPercentage: 0,
-				numberOfDonors: 0
+				numberOfDonors: 0,
+				numberOfMembers: 0
 			}
 		};
 	}

diff --git a/test/integration/page/PageWPDE.spec.ts b/test/integration/page/PageWPDE.spec.ts
@@ -25,7 +25,8 @@ describe( 'PageWPDE', function () {
 			urgencyMessageDaysLeft: 10,
 			thankYouCampaign: {
 				progressBarPercentage: 80,
-				numberOfDonors: 42
+				numberOfDonors: 42,
+				numberOfMembers: 23
 			}
 		};
 		const page = new PageWPDE( tracking );

diff --git a/test/unit/environment/prod/CampaignOverride.spec.ts b/test/unit/environment/prod/CampaignOverride.spec.ts
@@ -23,7 +23,8 @@ describe( 'getCampaignParameterOverride (prod version)', () => {
 			urgencyMessageDaysLeft: 0,
 			thankYouCampaign: {
 				progressBarPercentage: 0,
-				numberOfDonors: 0
+				numberOfDonors: 0,
+				numberOfMembers: 0
 			}
 		};
 

diff --git a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
@@ -44,7 +44,8 @@ const campaignParameters: CampaignParameters = {
 	dramaTextIsVisible: false,
 	thankYouCampaign: {
 		progressBarPercentage: 80,
-		numberOfDonors: 42
+		numberOfDonors: 42,
+		numberOfMembers: 23
 	}
 };
 const impressionCount: ImpressionCount = {