From efce92322e38a65ad9c9241fdc2095335e11f382 Mon Sep 17 00:00:00 2001
From: Gabriel Birke <gabriel.birke@wikimedia.de>
Date: Fri, 6 Dec 2024 16:47:15 +0100
Subject: [PATCH] Prepare VAR for C24_WMDE_Desktop_EN_06

Add double progress bar to VAR

- add comment to `currentCampaignTimePercentage`
- add English translations for `DoubleProgressBar` component
- switch back to "million" formatting (instead of whole number
  formatting) for the "amount remaining" in the late progress content.
  This was switched before in 2023 Desktop DE 24

Ticket: https://phabricator.wikimedia.org/T381396
---
 .../C24_WMDE_Desktop_EN_06/banner_var.ts      |  4 +-
 .../components/BannerVar.vue                  |  4 +-
 .../C24_WMDE_Desktop_EN_06/messages_var.ts    | 29 +++++++++++
 .../styles/FallbackBanner.scss                |  1 +
 .../styles/MainBannerVar.scss                 | 50 +++++++++++++++++++
 .../styles/styles_var.scss                    |  8 ++-
 .../currentCampaignTimePercentage.ts          |  3 ++
 .../messages/DoubleProgressBar.en.ts          |  7 +++
 .../dev/CampaignParameterOverride.ts          |  2 +-
 .../generators/ProgressBarContent.ts          |  2 +-
 .../DynamicCampaignText.spec.ts               |  2 +-
 11 files changed, 101 insertions(+), 11 deletions(-)
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
 create mode 100644 banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
 create mode 100644 src/components/ProgressBar/messages/DoubleProgressBar.en.ts

diff --git a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
index a43bf7aaa..6e9590ac4 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
+++ b/banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
@@ -17,13 +17,14 @@ 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';
+import messages from './messages_var';
 import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import eventMappings from './event_map';
 import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
 import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const localeFactory = new LocaleFactoryEn();
 const translator = new Translator( messages );
@@ -67,5 +68,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN } ) );
 app.provide( 'tracker', tracker );
 app.provide( 'timer', new WindowTimer() );
+app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) );
 
 app.mount( page.getBannerContainer() );
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
index 32ae64f83..af094f8e7 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
+++ b/banners/english/C24_WMDE_Desktop_EN_06/components/BannerVar.vue
@@ -21,7 +21,7 @@
             </template>
 
 			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
+				<DoubleProgressBar />
 			</template>
 
 			<template #donation-form="{ formInteraction }: any">
@@ -108,7 +108,7 @@ import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
 import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
 import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
-import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.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';
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
new file mode 100644
index 000000000..959c1ddbc
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
@@ -0,0 +1,29 @@
+import CustomAmountFormEn from '@src/components/DonationForm/Forms/messages/CustomAmountForm.en';
+import DynamicCampaignTextEn from '@src/utils/DynamicContent/messages/DynamicCampaignText.en';
+import { TranslationMessages } from '@src/Translator';
+import UpgradeToYearlyEn from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.en';
+import SoftCloseEn from '@src/components/SoftClose/messages/SoftClose.en';
+import AddressFormEn from '@src/components/DonationForm/Forms/messages/AddressForm.en';
+import FooterEn from '@src/components/Footer/messages/Footer.en';
+import MainDonationFormEn from '@src/components/DonationForm/Forms/messages/MainDonationForm.en';
+import AlreadyDonatedModalEn from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.en';
+import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.en';
+import DoubleProgressBarEn from '@src/components/ProgressBar/messages/DoubleProgressBar.en';
+
+const messages: TranslationMessages = {
+	...CustomAmountFormEn,
+	...DynamicCampaignTextEn,
+	...UpgradeToYearlyEn,
+	...SoftCloseEn,
+	...AddressFormEn,
+	...FooterEn,
+	...MainDonationFormEn,
+	...AlreadyDonatedModalEn,
+	...FallbackBanner,
+	...DoubleProgressBarEn,
+	'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>'
+};
+
+export default messages;
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
index 2361a26cf..755514912 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/FallbackBanner.scss
@@ -101,6 +101,7 @@ $breakpoint: 800px;
 
 		.wmde-banner-slider-container {
 			padding: 0 0 8px;
+			border: none;
 		}
 
 		.wmde-banner-slide-content {
diff --git a/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
new file mode 100644
index 000000000..4bb783cb2
--- /dev/null
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
@@ -0,0 +1,50 @@
+$banner-height: 357px !default;
+$form-width: 300px !default;
+
+.wmde-banner {
+	&-main {
+		min-height: $banner-height;
+		display: flex;
+		flex-direction: column;
+		padding: 12px 24px 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: row;
+		flex-grow: 1;
+	}
+
+	&-message {
+		padding: 0 15px;
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+		margin-bottom: 10px;
+	}
+
+	&-slider-container {
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+		margin-bottom: 10px;
+	}
+
+	&-column-left {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+		overflow-y: hidden;
+		margin-right: 30px;
+		padding: 0 0 10px;
+		background: var( --message-background );
+	}
+
+	&-column-right {
+		order: 2;
+		flex: 0 0 $form-width;
+		display: flex;
+		flex-direction: column;
+		width: $form-width;
+		padding: 10px 0;
+	}
+}
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
index 1e0e5a7f3..325a6b8fe 100644
--- a/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
+++ b/banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
@@ -5,13 +5,13 @@
 	$select-group-image-label: true,
 	$upgrade-to-yearly: true,
 	$fallback-banner: true,
-	$progress-bar: true,
+	$double-progress-bar: true,
 	$soft-close: true,
 );
 @use 'src/themes/Treedip/variables/breakpoints';
 @use 'src/components/BannerConductor/banner-transition';
 @use 'Banner';
-@use 'MainBanner' with (
+@use 'MainBannerVar' with (
 	$banner-height: 355px,
 	$form-width: 300px
 );
@@ -24,9 +24,7 @@
 	$right: 8px,
 	$margin: -4.5px
 );
-@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with (
-	$progress-bar-margin: 0 15px
-);
+@use 'src/themes/Treedip/ProgressBar/DoubleProgressBar';
 @use 'src/themes/Treedip/DonationForm/DonationForm';
 @use 'src/themes/Treedip/DonationForm/MultiStepDonation';
 @use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubble';
diff --git a/src/components/ProgressBar/currentCampaignTimePercentage.ts b/src/components/ProgressBar/currentCampaignTimePercentage.ts
index 55eeaba6e..f87d7e350 100644
--- a/src/components/ProgressBar/currentCampaignTimePercentage.ts
+++ b/src/components/ProgressBar/currentCampaignTimePercentage.ts
@@ -1,6 +1,9 @@
 import { CampaignParameters } from '@src/domain/CampaignParameters';
 import TimeRange from '@src/utils/TimeRange';
 
+/**
+ * Calculate how much of the campaign has passed (in percent), using the campaign start and end date and the current date
+ */
 export function currentCampaignTimePercentage( date: Date, campaignParameters: CampaignParameters ): number {
 	const timeRange = TimeRange.createFromStrings(
 		campaignParameters.startDate,
diff --git a/src/components/ProgressBar/messages/DoubleProgressBar.en.ts b/src/components/ProgressBar/messages/DoubleProgressBar.en.ts
new file mode 100644
index 000000000..817740647
--- /dev/null
+++ b/src/components/ProgressBar/messages/DoubleProgressBar.en.ts
@@ -0,0 +1,7 @@
+import { TranslationMessages } from '@src/Translator';
+
+const translations: TranslationMessages = {
+	'double-progress-close': 'Time is running out!'
+};
+
+export default translations;
diff --git a/src/environment/dev/CampaignParameterOverride.ts b/src/environment/dev/CampaignParameterOverride.ts
index 9e6099926..f3ad1d316 100644
--- a/src/environment/dev/CampaignParameterOverride.ts
+++ b/src/environment/dev/CampaignParameterOverride.ts
@@ -17,6 +17,6 @@ export function getCampaignParameterOverride( campaignParameters: CampaignParame
 		...campaignParameters,
 		startDate: '2024-10-28',
 		endDate: '2024-12-31',
-		isLateProgress: false
+		isLateProgress: true
 	};
 }
diff --git a/src/utils/DynamicContent/generators/ProgressBarContent.ts b/src/utils/DynamicContent/generators/ProgressBarContent.ts
index a09bf653d..046f5dcac 100644
--- a/src/utils/DynamicContent/generators/ProgressBarContent.ts
+++ b/src/utils/DynamicContent/generators/ProgressBarContent.ts
@@ -50,7 +50,7 @@ export class ProgressBarContent implements DynamicProgressBarContent {
 
 	public get amountNeeded(): string {
 		return this._translator.translate( 'amount-missing', {
-			amount: this._currencyFormatter.euroAmountWithThousandSeparator( this._remainingDonationSum )
+			amount: this._currencyFormatter.millions( this._remainingDonationSum )
 		} );
 	}
 
diff --git a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
index bc41ff0d0..5662a1afa 100644
--- a/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
+++ b/test/unit/utils/DynamicContent/DynamicCampaignText.spec.ts
@@ -130,7 +130,7 @@ describe( 'DynamicCampaignText', () => {
 		expect( dynamicCampaignText.progressBarContent.donationTarget ).toBe( 'Progress total €9.0M' );
 		expect( dynamicCampaignText.progressBarContent.donationTargetAmount ).toBe( '€9.0M' );
 		expect( dynamicCampaignText.progressBarContent.amountDonated ).toBe( '€0.1M' );
-		expect( dynamicCampaignText.progressBarContent.amountNeeded ).toBe( 'Progress missing 8,900,000 euro' );
+		expect( dynamicCampaignText.progressBarContent.amountNeeded ).toBe( 'Progress missing €8.9M' );
 	} );
 
 	it( 'Gets the average donation', () => {