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

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() );

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';

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;

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 {

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;
+	}
+}

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';

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,

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;

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
 	};
 }

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 )
 		} );
 	}