From 098d1dbc379c70f8c88c78cf4a866397b8a56c22 Mon Sep 17 00:00:00 2001 From: Corinna Hillebrand Date: Fri, 11 Oct 2024 12:16:12 +0200 Subject: [PATCH 1/3] Prepare campaign for C24_WMDE_Desktop_EN_02 - based on en 01 - Change start date to 241015 Ticket: https://phabricator.wikimedia.org/T374101 --- .../C24_WMDE_Desktop_EN_02/banner_ctrl.ts | 73 ++++++++ .../C24_WMDE_Desktop_EN_02/banner_var.ts | 73 ++++++++ .../components/BannerCtrl.vue | 135 +++++++++++++++ .../components/BannerVar.vue | 156 ++++++++++++++++++ .../components/FallbackBanner.vue | 101 ++++++++++++ .../components/MainBanner.vue | 50 ++++++ .../content/BannerSlides.vue | 58 +++++++ .../content/BannerText.vue | 46 ++++++ .../content/FallbackSlides.vue | 27 +++ .../content/FallbackText.vue | 32 ++++ .../C24_WMDE_Desktop_EN_02/event_map.ts | 38 +++++ .../C24_WMDE_Desktop_EN_02/form_items.ts | 21 +++ .../C24_WMDE_Desktop_EN_02/messages.ts | 24 +++ .../C24_WMDE_Desktop_EN_02/styles/Banner.scss | 17 ++ .../styles/FallbackBanner.scss | 135 +++++++++++++++ .../styles/MainBanner.scss | 44 +++++ .../C24_WMDE_Desktop_EN_02/styles/styles.scss | 57 +++++++ campaign_info.toml | 18 +- .../english/components/BannerCtrl.spec.ts | 2 +- .../english/components/FallbackBanner.spec.ts | 2 +- 20 files changed, 1098 insertions(+), 11 deletions(-) create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/banner_ctrl.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/components/BannerCtrl.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/components/FallbackBanner.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/components/MainBanner.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/content/BannerText.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/content/FallbackSlides.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/content/FallbackText.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/event_map.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/form_items.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/messages.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/styles/Banner.scss create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/styles/FallbackBanner.scss create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/styles/MainBanner.scss create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss diff --git a/banners/english/C24_WMDE_Desktop_EN_02/banner_ctrl.ts b/banners/english/C24_WMDE_Desktop_EN_02/banner_ctrl.ts new file mode 100644 index 000000000..d858b2b45 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/banner_ctrl.ts @@ -0,0 +1,73 @@ +import { createVueApp } from '@src/createVueApp'; + +import './styles/styles.scss'; + +import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue'; +import Banner from './components/BannerCtrl.vue'; +import FallbackBanner from './components/FallbackBanner.vue'; +import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment'; +import { WindowResizeHandler } from '@src/utils/ResizeHandler'; +import PageWPORG from '@src/page/PageWPORG'; +import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki'; +import { SkinFactory } from '@src/page/skin/SkinFactory'; +import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker'; +import TranslationPlugin from '@src/TranslationPlugin'; +import { Translator } from '@src/Translator'; +import DynamicTextPlugin from '@src/DynamicTextPlugin'; +import { LocalImpressionCount } from '@src/utils/LocalImpressionCount'; +import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG'; +import { Locales } from '@src/domain/Locales'; + +// Locale-specific imports +import messages from './messages'; +import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn'; + +// Channel specific form setup +import { createFormItems } from './form_items'; +import { createFormActions } from '@src/createFormActions'; +import eventMappings from './event_map'; +import { createFallbackDonationURL } from '@src/createFallbackDonationURL'; + +const localeFactory = new LocaleFactoryEn(); +const translator = new Translator( messages ); +const mediaWiki = new WindowMediaWiki(); +const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) ); +const runtimeEnvironment = new UrlRuntimeEnvironment( window.location ); +const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment ); +const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment ); + +const app = createVueApp( BannerConductor, { + page, + bannerConfig: { + delay: runtimeEnvironment.getBannerDelay( 7500 ), + transitionDuration: 1000 + }, + bannerProps: { + useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(), + remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'english' ) ), + donationLink: createFallbackDonationURL( page.getTracking(), impressionCount, { locale: Locales.EN } ) + }, + resizeHandler: new WindowResizeHandler(), + banner: Banner, + fallbackBanner: FallbackBanner, + minWidthForMainBanner: 800, + impressionCount +} ); + +app.use( TranslationPlugin, translator ); +app.use( DynamicTextPlugin, { + campaignParameters: page.getCampaignParameters(), + date: new Date(), + formatters: localeFactory.getFormatters(), + impressionCount, + translator +} ); + +const currencyFormatter = localeFactory.getCurrencyFormatter(); + +app.provide( 'currencyFormatter', currencyFormatter ); +app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) ); +app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN, ap: '0' } ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts new file mode 100644 index 000000000..982f09e7f --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts @@ -0,0 +1,73 @@ +import { createVueApp } from '@src/createVueApp'; + +import './styles/styles.scss'; + +import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue'; +import Banner from './components/BannerCtrl.vue'; +import FallbackBanner from './components/FallbackBanner.vue'; +import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment'; +import { WindowResizeHandler } from '@src/utils/ResizeHandler'; +import PageWPORG from '@src/page/PageWPORG'; +import { WindowMediaWiki } from '@src/page/MediaWiki/WindowMediaWiki'; +import { SkinFactory } from '@src/page/skin/SkinFactory'; +import { WindowSizeIssueChecker } from '@src/utils/SizeIssueChecker/WindowSizeIssueChecker'; +import TranslationPlugin from '@src/TranslationPlugin'; +import { Translator } from '@src/Translator'; +import DynamicTextPlugin from '@src/DynamicTextPlugin'; +import { LocalImpressionCount } from '@src/utils/LocalImpressionCount'; +import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG'; +import { Locales } from '@src/domain/Locales'; + +// Locale-specific imports +import messages from './messages'; +import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn'; + +// Channel specific form setup +import { createFormItems } from './form_items'; +import { createFormActions } from '@src/createFormActions'; +import eventMappings from './event_map'; +import { createFallbackDonationURL } from '@src/createFallbackDonationURL'; + +const localeFactory = new LocaleFactoryEn(); +const translator = new Translator( messages ); +const mediaWiki = new WindowMediaWiki(); +const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) ); +const runtimeEnvironment = new UrlRuntimeEnvironment( window.location ); +const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment ); +const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment ); + +const app = createVueApp( BannerConductor, { + page, + bannerConfig: { + delay: runtimeEnvironment.getBannerDelay( 7500 ), + transitionDuration: 1000 + }, + bannerProps: { + useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(), + remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'english' ) ), + donationLink: createFallbackDonationURL( page.getTracking(), impressionCount, { locale: Locales.EN } ) + }, + resizeHandler: new WindowResizeHandler(), + banner: Banner, + fallbackBanner: FallbackBanner, + minWidthForMainBanner: 800, + impressionCount +} ); + +app.use( TranslationPlugin, translator ); +app.use( DynamicTextPlugin, { + campaignParameters: page.getCampaignParameters(), + date: new Date(), + formatters: localeFactory.getFormatters(), + impressionCount, + translator +} ); + +const currencyFormatter = localeFactory.getCurrencyFormatter(); + +app.provide( 'currencyFormatter', currencyFormatter ); +app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) ); +app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN, ap: '1' } ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/banners/english/C24_WMDE_Desktop_EN_02/components/BannerCtrl.vue b/banners/english/C24_WMDE_Desktop_EN_02/components/BannerCtrl.vue new file mode 100644 index 000000000..f34edacb9 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/components/BannerCtrl.vue @@ -0,0 +1,135 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue new file mode 100644 index 000000000..5a26a03af --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue @@ -0,0 +1,156 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/components/FallbackBanner.vue b/banners/english/C24_WMDE_Desktop_EN_02/components/FallbackBanner.vue new file mode 100644 index 000000000..2c0d8e922 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/components/FallbackBanner.vue @@ -0,0 +1,101 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/components/MainBanner.vue b/banners/english/C24_WMDE_Desktop_EN_02/components/MainBanner.vue new file mode 100644 index 000000000..9f9ebe572 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/components/MainBanner.vue @@ -0,0 +1,50 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides.vue new file mode 100644 index 000000000..75d126e61 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides.vue @@ -0,0 +1,58 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText.vue new file mode 100644 index 000000000..ef8b64f82 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText.vue @@ -0,0 +1,46 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/FallbackSlides.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/FallbackSlides.vue new file mode 100644 index 000000000..a50a81082 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/FallbackSlides.vue @@ -0,0 +1,27 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/FallbackText.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/FallbackText.vue new file mode 100644 index 000000000..60a58e80d --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/FallbackText.vue @@ -0,0 +1,32 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/event_map.ts b/banners/english/C24_WMDE_Desktop_EN_02/event_map.ts new file mode 100644 index 000000000..612f999a8 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/event_map.ts @@ -0,0 +1,38 @@ +import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG'; +import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent'; +import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent'; +import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent'; +import { CustomAmountChangedEvent } from '@src/tracking/events/CustomAmountChangedEvent'; +import { CloseEvent } from '@src/tracking/events/CloseEvent'; +import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent'; +import { NotShownEvent } from '@src/tracking/events/NotShownEvent'; +import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent'; +import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent'; +import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue'; +import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo'; +import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent'; +import { ShownEvent } from '@src/tracking/events/ShownEvent'; +import { mapShownEvent } from '@src/tracking/LegacyEventTracking/mapShownEvent'; + +export default new Map( [ + [ ShownEvent.EVENT_NAME, mapShownEvent ], + [ CloseEvent.EVENT_NAME, mapCloseEvent ], + + [ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ], + [ CustomAmountChangedEvent.EVENT_NAME, + ( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent => + new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 ) + ], + [ NotShownEvent.EVENT_NAME, mapNotShownEvent ], + [ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => { + switch ( e.feature ) { + case 'UpgradeToYearlyForm': + return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 ); + case 'CustomAmountForm': + return new WMDESizeIssueEvent( `submit-different-amount`, createViewportInfo(), 1 ); + default: + return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 ); + } + } ], + [ FallbackBannerSubmitEvent.EVENT_NAME, ( e: FallbackBannerSubmitEvent ): WMDESizeIssueEvent => new WMDESizeIssueEvent( e.eventName, createViewportInfo(), 1 ) ] +] ); diff --git a/banners/english/C24_WMDE_Desktop_EN_02/form_items.ts b/banners/english/C24_WMDE_Desktop_EN_02/form_items.ts new file mode 100644 index 000000000..95a254ccb --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/form_items.ts @@ -0,0 +1,21 @@ +import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder'; +import { Translator } from '@src/Translator'; +import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems'; +import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals'; +import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods'; +import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter'; + +export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems { + return new FormItemsBuilder( translations, amountFormatter ) + .setIntervals( + Intervals.ONCE, + Intervals.MONTHLY, + Intervals.QUARTERLY, + Intervals.YEARLY + ) + .setAmounts( 5, 10, 20, 25, 50, 100 ) + .setPaymentMethods( + PaymentMethods.PAYPAL, + PaymentMethods.CREDIT_CARD + ).getItems(); +} diff --git a/banners/english/C24_WMDE_Desktop_EN_02/messages.ts b/banners/english/C24_WMDE_Desktop_EN_02/messages.ts new file mode 100644 index 000000000..d7277d676 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/messages.ts @@ -0,0 +1,24 @@ +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'; + +const messages: TranslationMessages = { + ...CustomAmountFormEn, + ...DynamicCampaignTextEn, + ...UpgradeToYearlyEn, + ...SoftCloseEn, + ...AddressFormEn, + ...FooterEn, + ...MainDonationFormEn, + ...AlreadyDonatedModalEn, + ...FallbackBanner +}; + +export default messages; diff --git a/banners/english/C24_WMDE_Desktop_EN_02/styles/Banner.scss b/banners/english/C24_WMDE_Desktop_EN_02/styles/Banner.scss new file mode 100644 index 000000000..f88657686 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/styles/Banner.scss @@ -0,0 +1,17 @@ +@use 'src/themes/Treedip/variables/fonts'; + +.wmde-banner { + &-wrapper { + font-size: 14px; + font-family: fonts.$ui; + box-shadow: var( --main-box-shadow ); + background-color: var( --main-background ); + color: var( --main-color ); + } + + &--closed { + .wmde-banner-wrapper { + display: none; + } + } +} diff --git a/banners/english/C24_WMDE_Desktop_EN_02/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_02/styles/FallbackBanner.scss new file mode 100644 index 000000000..997f000f9 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/styles/FallbackBanner.scss @@ -0,0 +1,135 @@ +@use 'src/themes/Treedip/variables/globals'; +@use 'src/themes/Treedip/variables/fonts'; +@use 'sass:color'; + +$breakpoint: 800px; + +.wmde-banner { + &-fallback { + width: 100%; + height: 150px; + display: flex; + flex-direction: column; + background: var( --fallback-background ); + box-shadow: var( --main-box-shadow ); + + @media ( min-width: $breakpoint ) { + height: auto; + min-height: 250px; + padding: 4px; + } + + &-small, + &-large { + display: flex; + flex-direction: column; + flex: 1 1 auto; + } + + &-small { + align-items: center; + border: 4px solid var( --fallback-border ); + border-radius: 4px; + padding: 8px; + + .wmde-banner-progress-bar { + height: 25px; + line-height: 25px; + } + + .wmde-banner-progress-bar-text, + .wmde-banner-progress-bar-fill-wrapper { + height: 25px; + } + + .wmde-banner-progress-bar-fill { + line-height: 20px; + } + + .wmde-banner-fallback-button { + margin: 0 0 8px; + } + + .wmde-banner-selection-input-text, + .wmde-banner-selection-input-input { + font-family: fonts.$content; + font-size: 14px; + font-weight: normal; + } + } + + &-large { + align-items: stretch; + } + + &-usage-link { + color: var( --fallback-uof-link ); + } + + &-message { + flex: 1 1 auto; + display: flex; + flex-direction: column; + background: var( --fallback-message-background ); + border: 4px solid var( --fallback-message-border ); + border-radius: 4px; + padding: 8px 0; + } + + &-bank-item { + display: block; + + &-label { + font-weight: bold; + } + } + + .wmde-banner-close { + height: 16px; + width: 16px; + top: 8px; + right: 8px; + + @media ( min-width: $breakpoint ) { + height: 30px; + width: 30px; + top: 12px; + right: 12px; + } + } + + .wmde-banner-slider-container { + padding: 0 0 8px; + } + + .wmde-banner-slide-content { + font-size: 14px; + p { + margin-bottom: 8px; + } + } + + .wmde-banner-slider-navigation-previous, + .wmde-banner-slider-navigation-next { + align-items: end; + } + + .wmde-banner-slider-pagination-dot { + cursor: default; + } + + .wmde-banner-message { + flex: 1 1 auto; + + p { + margin-bottom: 0; + } + } + } + + &--pending { + .wmde-banner-fallback { + box-shadow: none; + } + } +} diff --git a/banners/english/C24_WMDE_Desktop_EN_02/styles/MainBanner.scss b/banners/english/C24_WMDE_Desktop_EN_02/styles/MainBanner.scss new file mode 100644 index 000000000..518b8c959 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/styles/MainBanner.scss @@ -0,0 +1,44 @@ +$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; + } + + &-column-left { + display: flex; + 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 { + 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_02/styles/styles.scss b/banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss new file mode 100644 index 000000000..e2ef2982d --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss @@ -0,0 +1,57 @@ +// This is the file where we import the theme-specific component styles +@use 'src/themes/Treedip/swatches/skin_vector-2022' with ( + $slider: true, + $select-group-bubble: true, + $upgrade-to-yearly: true, + $fallback-banner: true, +); +@use 'src/themes/Treedip/variables/breakpoints'; +@use 'src/components/BannerConductor/banner-transition'; +@use 'Banner'; +@use 'MainBanner' with ( + $banner-height: 355px, + $form-width: 300px +); +@use 'src/themes/UseOfFunds/swatches/skin_vector-2022' as uof-vector-2022; +@use 'src/themes/UseOfFunds/UseOfFunds'; +@use 'src/themes/Treedip/defaults'; +@use 'src/themes/Treedip/ButtonClose/ButtonClose' with ( + $padding: 4px, + $top: 12px, + $right: 8px, + $margin: -4.5px +); +@use 'src/themes/Treedip/ProgressBar/ProgressBarAlternative' with ( + $progress-bar-margin: 0 15px +); +@use 'src/themes/Treedip/DonationForm/DonationForm'; +@use 'src/themes/Treedip/DonationForm/MultiStepDonation'; +@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubble'; +@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles' with ( + $height: 34px +); +@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble' with ( + $height: 34px +); +@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel'; +@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel_dark'; +@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox'; +@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with ( + $padding: 14px 0 0 +); +@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyButtonForm'; +@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm'; +@use 'src/themes/Treedip/Footer/BannerFooter' with ( + $right-column-width: 300px +); +@use 'src/themes/Treedip/Footer/SelectionInput'; +@use 'src/themes/Treedip/Message/Message' with ( + $font-sizes: ( 1400px: 15px, 1600px: 16px, 1800px: 18px ) +); +@use 'src/themes/Treedip/Slider/KeenSlider'; +@use 'src/themes/Treedip/SoftClose/SoftClose'; +@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal'; +@use 'FallbackBanner'; +@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton'; +@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter'; +@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter'; diff --git a/campaign_info.toml b/campaign_info.toml index 3aed47b1a..87f56fbbb 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -137,9 +137,9 @@ tracking = "wpde-mob00-240619-var" [english] name = "English Desktop" icon = "desktop" -campaign = "C24_WMDE_Desktop_EN_01" -description = "Based on C23_WMDE_Desktop_EN_05" -campaign_tracking = "en01-ba-090324" +campaign = "C24_WMDE_Desktop_EN_02" +description = "Based on desktop EN 01" +campaign_tracking = "en02-ba-241015" preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype" preview_link_darkmode = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1" preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode' @@ -147,14 +147,14 @@ wrapper_template = "wikipedia_org" use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_EN" [english.banners.ctrl] -filename = "./banners/english/C24_WMDE_Desktop_EN_01/banner_ctrl.ts" -pagename = "B24_WMDE_Desktop_EN_01_ctrl" -tracking = "org-en01-090324-ctrl" +filename = "./banners/english/C24_WMDE_Desktop_EN_02/banner_ctrl.ts" +pagename = "B24_WMDE_Desktop_EN_02_ctrl" +tracking = "org-en02-241015-ctrl" [english.banners.var] -filename = "./banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts" -pagename = "B24_WMDE_Desktop_EN_01_var" -tracking = "org-en01-090324-var" +filename = "./banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts" +pagename = "B24_WMDE_Desktop_EN_02_var" +tracking = "org-en02-241015-var" [english.test_matrix] platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] diff --git a/test/banners/english/components/BannerCtrl.spec.ts b/test/banners/english/components/BannerCtrl.spec.ts index 2e9881b74..63034d01a 100644 --- a/test/banners/english/components/BannerCtrl.spec.ts +++ b/test/banners/english/components/BannerCtrl.spec.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, test, vi } from 'vitest'; import { mount, VueWrapper } from '@vue/test-utils'; -import Banner from '@banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue'; +import Banner from '@banners/english/C24_WMDE_Desktop_EN_02/components/BannerCtrl.vue'; import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; import { newDynamicContent } from '@test/banners/dynamicCampaignContent'; import { useOfFundsContent } from '@test/banners/useOfFundsContent'; diff --git a/test/banners/english/components/FallbackBanner.spec.ts b/test/banners/english/components/FallbackBanner.spec.ts index 71b523603..b4e411d6b 100644 --- a/test/banners/english/components/FallbackBanner.spec.ts +++ b/test/banners/english/components/FallbackBanner.spec.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, test, vi } from 'vitest'; import { mount, VueWrapper } from '@vue/test-utils'; -import FallbackBanner from '@banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue'; +import FallbackBanner from '@banners/english/C24_WMDE_Desktop_EN_02/components/FallbackBanner.vue'; import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; import { useOfFundsContent } from '@test/banners/useOfFundsContent'; import { newDynamicContent } from '@test/banners/dynamicCampaignContent'; From 5ef9a130942d650ad59d12116827e4741afe97a1 Mon Sep 17 00:00:00 2001 From: Corinna Hillebrand Date: Fri, 11 Oct 2024 12:59:34 +0200 Subject: [PATCH 2/3] Prepare CTRL for C24_WMDE_Desktop_EN_02 - base on EN01 ctrl https://phabricator.wikimedia.org/T374101 --- .../C24_WMDE_Desktop_EN_02/banner_var.ts | 4 +- .../components/BannerVar.vue | 29 ++-------- .../content/BannerSlides_var.vue | 58 +++++++++++++++++++ .../content/BannerText_var.vue | 46 +++++++++++++++ 4 files changed, 110 insertions(+), 27 deletions(-) create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue diff --git a/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts index 982f09e7f..99df90506 100644 --- a/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts +++ b/banners/english/C24_WMDE_Desktop_EN_02/banner_var.ts @@ -3,7 +3,7 @@ import { createVueApp } from '@src/createVueApp'; import './styles/styles.scss'; import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue'; -import Banner from './components/BannerCtrl.vue'; +import Banner from './components/BannerVar.vue'; import FallbackBanner from './components/FallbackBanner.vue'; import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment'; import { WindowResizeHandler } from '@src/utils/ResizeHandler'; @@ -67,7 +67,7 @@ const currencyFormatter = localeFactory.getCurrencyFormatter(); app.provide( 'currencyFormatter', currencyFormatter ); app.provide( 'formItems', createFormItems( translator, currencyFormatter.euroAmount.bind( currencyFormatter ) ) ); -app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN, ap: '1' } ) ); +app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { locale: Locales.EN, ap: '0' } ) ); app.provide( 'tracker', tracker ); app.mount( page.getBannerContainer() ); diff --git a/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue index 5a26a03af..c423eee4d 100644 --- a/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue +++ b/banners/english/C24_WMDE_Desktop_EN_02/components/BannerVar.vue @@ -20,10 +20,6 @@ - - - - import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; -import SoftClose from '@src/components/SoftClose/SoftClose.vue'; import { ref, watch } from 'vue'; import MainBanner from './MainBanner.vue'; import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent'; import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue'; -import BannerSlides from '../content/BannerSlides.vue'; +import BannerSlides from '../content/BannerSlides_var.vue'; import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; -import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue'; import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; -import BannerText from '../content/BannerText.vue'; +import BannerText from '../content/BannerText_var.vue'; import KeenSlider from '@src/components/Slider/KeenSlider.vue'; import BannerFooter from '@src/components/Footer/BannerFooter.vue'; import { useFormModel } from '@src/components/composables/useFormModel'; @@ -105,7 +91,6 @@ 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 { useAnonymousAddressTypeSetter } from '@src/components/composables/useAnonymousAddressTypeSetter'; enum ContentStates { Main = 'wmde-banner-wrapper--main', @@ -124,7 +109,7 @@ interface Props { remainingImpressions: number; } -const props = defineProps(); +defineProps(); const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] ); const isFundsModalVisible = ref( false ); @@ -135,18 +120,12 @@ const stepControllers = [ createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep ) ]; -useAnonymousAddressTypeSetter(); - watch( contentState, async () => { emit( 'bannerContentChanged' ); } ); function onCloseMain(): void { - if ( props.remainingImpressions > 0 ) { - contentState.value = ContentStates.SoftClosing; - } else { - onClose( 'MainBanner', CloseChoices.Close ); - } + onClose( 'MainBanner', CloseChoices.Close ); } function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void { diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue new file mode 100644 index 000000000..75d126e61 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue @@ -0,0 +1,58 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue new file mode 100644 index 000000000..ef8b64f82 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue @@ -0,0 +1,46 @@ + + + From 4ac7c719a9f575966af17b17cab681c0624a411c Mon Sep 17 00:00:00 2001 From: Corinna Hillebrand Date: Fri, 11 Oct 2024 14:46:40 +0200 Subject: [PATCH 3/3] Implement VAR for C24_WMDE_Desktop_EN_02 - text change - add style support for the change in https://github.com/wmde/fundraising-banners/pull/579 https://phabricator.wikimedia.org/T374101 --- .../content/BannerSlides_var.vue | 29 +++++++------------ .../content/BannerText_var.vue | 28 +++++++++--------- .../C24_WMDE_Desktop_EN_02/styles/styles.scss | 1 + 3 files changed, 25 insertions(+), 33 deletions(-) diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue index 75d126e61..45dafe6aa 100644 --- a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerSlides_var.vue @@ -3,35 +3,28 @@

- {{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “Wikipedia is not for - sale.” - A personal appeal from Wikipedia founder Jimmy Wales. + {{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “Wikipedia still can't be + sold.” - An important update for readers in Germany.

- Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to reflect - on the number of times you visited Wikipedia in the past year, the value you got from it, and whether you're - able to give €5 back. + Today is the day. We're sorry to interrupt, but it's {{ currentDayName }}, {{ currentDate }}, and this + message will be up for only a few hours.

- If you can, please join the 1% of readers who give. - - It's hard to know what to trust online these days. Disinformation and scammers are everywhere. + We ask you to reflect on the number of times you visited Wikipedia in the past year and if you're able to give €5 back. + + In the age of AI, access to verifiable facts is crucial. Wikipedia is at the heart of online information, + powering everything from your personal searches to emerging AI technologies.

- Wikipedia is different. It's not perfect, but it's not here to make a profit or to push a particular perspective. - It's written by everyone, together. Wikipedia is something we all share, like a library or a public park. -

- - -

- We are passionate about our model because we want everyone to have equal access to quality information - - something that is becoming harder and harder to find online. If Wikipedia has given you €5 worth of - knowledge this year, please give back. There are no small contributions: every edit counts, every donation - counts. Thank you. + Your gift strengthens the knowledge of today and tomorrow. Just 1 % of our readers donate, so if + you have given in the past and Wikipedia still provides you with €5 worth of knowledge, kindly donate + today. If you are undecided, remember that any contribution helps, whether it's €5 or €25. Thank you.

diff --git a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue index ef8b64f82..8076e2468 100644 --- a/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue +++ b/banners/english/C24_WMDE_Desktop_EN_02/content/BannerText_var.vue @@ -4,28 +4,26 @@

- {{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “Wikipedia is not for - sale.” - A personal appeal from Wikipedia founder Jimmy Wales. + {{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “Wikipedia still + can't be sold.” - An important update for readers in Germany.

- Please don't ignore this 1-minute read. This {{ currentDayName }}, {{ currentDate }}, I ask you to - reflect on the number of times you visited Wikipedia in the past year, the value you got from it, - and whether you're able to give €5 back. If you can, please join the 1% of readers who - give. + Today is the day. We're sorry to interrupt, but it's {{ currentDayName }}, {{ currentDate }}, and this + message will be up for only a few hours. + We ask you to reflect on the number of times you visited + Wikipedia in the past year and if you're able to give €5 back. +

-

- It's hard to know what to trust online these days. Disinformation and scammers are everywhere. - Wikipedia is different. It's not perfect, but it's not here to make a profit or to push a particular - perspective. It's written by everyone, together. Wikipedia is something we all share, like a library - or a public park. We are passionate about our model because we want everyone to have equal access to - quality information - something that is becoming harder and harder to find online. + In the age of AI, access to verifiable facts is crucial. Wikipedia is at the heart of online + information, powering everything from your personal searches to emerging AI technologies. Your gift + strengthens the knowledge of today and tomorrow.

-

- If Wikipedia has given you €5 worth of knowledge this year, please give back. There are no small - contributions: every edit counts, every donation counts. Thank you. + Just 1 % of our readers donate, so if you have + given in the past and Wikipedia still provides you with €5 worth of knowledge, kindly donate today. If + you are undecided, remember that any contribution helps, whether it's €5 or €25. Thank you.

diff --git a/banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss b/banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss index e2ef2982d..19242690e 100644 --- a/banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss +++ b/banners/english/C24_WMDE_Desktop_EN_02/styles/styles.scss @@ -4,6 +4,7 @@ $select-group-bubble: true, $upgrade-to-yearly: true, $fallback-banner: true, + $select-group-image-label: true, ); @use 'src/themes/Treedip/variables/breakpoints'; @use 'src/components/BannerConductor/banner-transition';