From ae91841cc3be22b8ac1c0b16cbffcba42c783938 Mon Sep 17 00:00:00 2001
From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de>
Date: Mon, 16 Dec 2024 11:37:40 +0100
Subject: [PATCH] [C24_WMDE_Desktop_DE_21] Add DoubleProgressBar to both
 banners (from 20 VAR)

- makes both banners base on desktop de 20 VAR
---
 .../desktop/C24_WMDE_Desktop_DE_21/banner_ctrl.ts  |  2 ++
 .../desktop/C24_WMDE_Desktop_DE_21/banner_var.ts   |  2 ++
 .../components/BannerCtrl.vue                      |  4 ++--
 .../components/BannerVar.vue                       |  4 ++--
 .../components/FallbackBanner.vue                  |  4 ++--
 banners/desktop/C24_WMDE_Desktop_DE_21/messages.ts |  2 ++
 .../styles/FallbackBanner.scss                     |  8 ++++----
 .../C24_WMDE_Desktop_DE_21/styles/MainBanner.scss  |  7 ++++---
 .../C24_WMDE_Desktop_DE_21/styles/styles.scss      | 14 ++++++--------
 .../C24_WMDE_Desktop_DE_21/styles/styles_var.scss  | 14 ++++++--------
 10 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/banner_ctrl.ts b/banners/desktop/C24_WMDE_Desktop_DE_21/banner_ctrl.ts
index 512ed5512..4c1e2ca7c 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/banner_ctrl.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/banner_ctrl.ts
@@ -24,6 +24,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const date = new Date();
 const localeFactory = new LocaleFactoryDe();
@@ -69,5 +70,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
 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/desktop/C24_WMDE_Desktop_DE_21/banner_var.ts b/banners/desktop/C24_WMDE_Desktop_DE_21/banner_var.ts
index 0282e0f4b..9744c26f9 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/banner_var.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/banner_var.ts
@@ -24,6 +24,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
 import { WindowTimer } from '@src/utils/Timer';
+import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage';
 
 const date = new Date();
 const localeFactory = new LocaleFactoryDe();
@@ -69,5 +70,6 @@ app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmo
 app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { afo: '1', ap: '0' } ) );
 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/desktop/C24_WMDE_Desktop_DE_21/components/BannerCtrl.vue b/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerCtrl.vue
index 036ddaf9b..e1cae3382 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerCtrl.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerCtrl.vue
@@ -28,7 +28,7 @@
 			</template>
 
 			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
+				<DoubleProgressBar/>
 			</template>
 
 			<template #donation-form="{ formInteraction }: any">
@@ -104,7 +104,7 @@ import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
 import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
 import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.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 { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerVar.vue b/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerVar.vue
index 06b61118f..8701e4c3b 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerVar.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/components/BannerVar.vue
@@ -28,7 +28,7 @@
 			</template>
 
 			<template #progress>
-				<ProgressBar amount-to-show-on-right="TARGET"/>
+				<DoubleProgressBar/>
 			</template>
 
 			<template #donation-form="{ formInteraction }: any">
@@ -118,7 +118,7 @@ import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
 import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
 import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.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 { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
 import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/components/FallbackBanner.vue b/banners/desktop/C24_WMDE_Desktop_DE_21/components/FallbackBanner.vue
index fb4324559..43e0fdc0c 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/components/FallbackBanner.vue
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/components/FallbackBanner.vue
@@ -31,7 +31,7 @@
 		<div class="wmde-banner-fallback-large" v-if="onLargeScreen">
 			<div class="wmde-banner-fallback-message">
 				<FallbackText/>
-				<ProgressBarAlternative amount-to-show-on-right="TARGET"/>
+				<DoubleProgressBar/>
 			</div>
 
 			<LargeFooter @useOfFundsButtonClicked="isFundsModalVisible = true" @submitButtonClicked="onSubmit"/>
@@ -71,7 +71,7 @@ import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue';
 import { Tracker } from '@src/tracking/Tracker';
 import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
 import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
-import ProgressBarAlternative from '@src/components/ProgressBar/ProgressBarAlternative.vue';
+import DoubleProgressBar from '@src/components/ProgressBar/DoubleProgressBar.vue';
 
 interface Props {
 	bannerState: BannerStates;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/messages.ts b/banners/desktop/C24_WMDE_Desktop_DE_21/messages.ts
index 6719de775..6af854a63 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/messages.ts
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/messages.ts
@@ -8,6 +8,7 @@ import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/Main
 import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
 import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
 import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';
+import DoubleProgressBarDe from '@src/components/ProgressBar/messages/DoubleProgressBar.de';
 
 const messages: TranslationMessages = {
 	...CustomAmountFormDe,
@@ -19,6 +20,7 @@ const messages: TranslationMessages = {
 	...AlreadyDonatedModal,
 	...FallbackBanner,
 	...SoftCloseDe,
+	...DoubleProgressBarDe,
 	'already-donated-go-away-button': 'Im Moment nicht',
 	'soft-close-prompt': 'Dürfen wir später nochmal fragen?',
 	'upgrade-to-yearly-copy': `<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns besonders und ermöglichen langfristige Weiterentwicklungen.</p>
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/FallbackBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/FallbackBanner.scss
index a0d40542d..3fd60d8a5 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/FallbackBanner.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/FallbackBanner.scss
@@ -50,8 +50,6 @@ $breakpoint: 800px;
 			flex: 1 1 auto;
 			display: flex;
 			flex-direction: column;
-			border: 4px solid var( --fallback-message-border );
-			border-radius: 4px;
 			padding: 8px 0;
 		}
 
@@ -81,10 +79,12 @@ $breakpoint: 800px;
 			flex: 1 1 auto;
 			display: flex;
 			flex-direction: column;
-			padding: 8px 0;
+			padding: 8px 8px 0;
+			margin: -5px 0 8px;
 			color: var( --fallback-message-color );
 			background-color: var( --fallback-message-background );
-			margin: 15px;
+			border: 4px solid var( --fallback-message-border );
+			border-radius: 4px;
 
 			p {
 				margin-bottom: 0;
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/MainBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/MainBanner.scss
index 1bf067da0..b1e59c844 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/MainBanner.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/MainBanner.scss
@@ -31,6 +31,10 @@ $form-width: 300px !default;
 		justify-content: center;
 		align-items: center;
 		padding: 11px;
+
+		border: 5px solid var( --message-border );
+		border-radius: 9px;
+		margin-bottom: 10px;
 	}
 
 	&-column-left {
@@ -38,13 +42,10 @@ $form-width: 300px !default;
 		flex-direction: column;
 		justify-content: center;
 		flex: 1 1 auto;
-		margin-bottom: 0;
 		overflow-y: hidden;
 		margin-right: 30px;
 		padding: 0 0 10px;
 		background: var( --message-background );
-		border: 5px solid var( --message-border );
-		border-radius: 9px;
 	}
 
 	&-column-right {
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles.scss b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles.scss
index 4e305ee1c..b69168a4c 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles.scss
@@ -4,7 +4,7 @@
 	$select-group: true,
 	$upgrade-to-yearly: true,
 	$fallback-banner: true,
-	$progress-bar: true,
+	$double-progress-bar: true,
 	$soft-close: true,
 );
 @use 'src/components/BannerConductor/banner-transition';
@@ -17,9 +17,7 @@
 );
 @use 'src/themes/Treedip/defaults';
 @use 'src/themes/Treedip/ButtonClose/ButtonClose';
-@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/SubComponents/SelectGroup';
@@ -36,9 +34,7 @@
 @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,
-	$message-header-padding-top: 20px,
-	$message-header-small-up-padding-top: 20px
+	$message-header-small-up-padding-bottom: 8px
 );
 @use 'src/themes/Treedip/SoftClose/SoftClose';
 @use 'src/themes/Treedip/Slider/KeenSlider' with (
@@ -52,7 +48,9 @@
  */
 @use 'FallbackBanner';
 @use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
-@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
+@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
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles_var.scss
index 388528bc4..814e67a55 100644
--- a/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles_var.scss
+++ b/banners/desktop/C24_WMDE_Desktop_DE_21/styles/styles_var.scss
@@ -4,7 +4,7 @@
 	$select-group: true,
 	$upgrade-to-yearly: true,
 	$fallback-banner: true,
-	$progress-bar: true,
+	$double-progress-bar: true,
 	$soft-close: true,
 	$minimised-banner: true,
 );
@@ -19,9 +19,7 @@
 @use 'MinimisedBanner';
 @use 'src/themes/Treedip/defaults';
 @use 'src/themes/Treedip/ButtonClose/ButtonClose';
-@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/SubComponents/SelectGroup';
@@ -38,9 +36,7 @@
 @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,
-	$message-header-padding-top: 20px,
-	$message-header-small-up-padding-top: 20px
+	$message-header-small-up-padding-bottom: 8px
 );
 @use 'src/themes/Treedip/SoftClose/SoftClose';
 @use 'src/themes/Treedip/Slider/KeenSlider' with (
@@ -54,7 +50,9 @@
  */
 @use 'FallbackBanner';
 @use 'src/themes/Fijitiv/FallbackBanner/FallbackButton';
-@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter';
+@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