Skip to content

Commit

Permalink
Prepare VAR for C24_WMDE_Desktop_EN_06
Browse files Browse the repository at this point in the history
Add double progress bar to VAR

Ticket: https://phabricator.wikimedia.org/T381396
  • Loading branch information
gbirke committed Dec 11, 2024
1 parent d26a008 commit 9ad761f
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 9 deletions.
4 changes: 3 additions & 1 deletion banners/english/C24_WMDE_Desktop_EN_06/banner_var.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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() );
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</template>

<template #progress>
<ProgressBar amount-to-show-on-right="TARGET"/>
<DoubleProgressBar />
</template>

<template #donation-form="{ formInteraction }: any">
Expand Down Expand Up @@ -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';
Expand Down
29 changes: 29 additions & 0 deletions banners/english/C24_WMDE_Desktop_EN_06/messages_var.ts
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ $breakpoint: 800px;

.wmde-banner-slider-container {
padding: 0 0 8px;
border: none;
}

.wmde-banner-slide-content {
Expand Down
50 changes: 50 additions & 0 deletions banners/english/C24_WMDE_Desktop_EN_06/styles/MainBannerVar.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
8 changes: 3 additions & 5 deletions banners/english/C24_WMDE_Desktop_EN_06/styles/styles_var.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand All @@ -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';
Expand Down
3 changes: 3 additions & 0 deletions src/components/ProgressBar/currentCampaignTimePercentage.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
7 changes: 7 additions & 0 deletions src/components/ProgressBar/messages/DoubleProgressBar.en.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { TranslationMessages } from '@src/Translator';

const translations: TranslationMessages = {
'double-progress-close': 'Time is running out!'
};

export default translations;
2 changes: 1 addition & 1 deletion src/environment/dev/CampaignParameterOverride.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@ export function getCampaignParameterOverride( campaignParameters: CampaignParame
...campaignParameters,
startDate: '2024-10-28',
endDate: '2024-12-31',
isLateProgress: false
isLateProgress: true
};
}

0 comments on commit 9ad761f

Please sign in to comment.