From ebec6ee5c71c74eea48b2be3e0929e2fa24a2c3c Mon Sep 17 00:00:00 2001 From: Abban Dunne Date: Fri, 30 Aug 2024 13:24:05 +0200 Subject: [PATCH 1/4] Prepare campaign for C24_WMDE_Desktop_EN_01 Ticket: https://phabricator.wikimedia.org/T372553 --- .../C24_WMDE_Desktop_EN_01/banner_ctrl.ts | 73 ++++++++ .../C24_WMDE_Desktop_EN_01/banner_var.ts | 73 ++++++++ .../components/BannerCtrl.vue | 153 +++++++++++++++++ .../components/BannerVar.vue | 156 ++++++++++++++++++ .../components/FallbackBanner.vue | 103 ++++++++++++ .../components/MainBanner.vue | 50 ++++++ .../content/BannerSlides.vue | 58 +++++++ .../content/BannerText.vue | 46 ++++++ .../content/FallbackSlides.vue | 34 ++++ .../content/FallbackText.vue | 32 ++++ .../C24_WMDE_Desktop_EN_01/event_map.ts | 38 +++++ .../C24_WMDE_Desktop_EN_01/form_items.ts | 21 +++ .../C24_WMDE_Desktop_EN_01/messages.ts | 24 +++ .../C24_WMDE_Desktop_EN_01/styles/Banner.scss | 17 ++ .../styles/FallbackBanner.scss | 134 +++++++++++++++ .../styles/MainBanner.scss | 43 +++++ .../C24_WMDE_Desktop_EN_01/styles/styles.scss | 58 +++++++ campaign_info.toml | 16 +- .../english/components/BannerCtrl.spec.ts | 2 +- .../english/components/BannerVar.spec.ts | 2 +- .../english/components/FallbackBanner.spec.ts | 2 +- 21 files changed, 1124 insertions(+), 11 deletions(-) create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/banner_ctrl.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/components/MainBanner.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/content/BannerSlides.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/content/BannerText.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/content/FallbackText.vue create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/event_map.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/form_items.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/messages.ts create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss create mode 100644 banners/english/C24_WMDE_Desktop_EN_01/styles/styles.scss diff --git a/banners/english/C24_WMDE_Desktop_EN_01/banner_ctrl.ts b/banners/english/C24_WMDE_Desktop_EN_01/banner_ctrl.ts new file mode 100644 index 000000000..03fdd1d4e --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/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 } ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts new file mode 100644 index 000000000..5bd8d91e5 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/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/BannerVar.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 } ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue new file mode 100644 index 000000000..3c8bbd205 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue @@ -0,0 +1,153 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue new file mode 100644 index 000000000..5a26a03af --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue @@ -0,0 +1,156 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue new file mode 100644 index 000000000..50c87d7a2 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue @@ -0,0 +1,103 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/components/MainBanner.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/MainBanner.vue new file mode 100644 index 000000000..9f9ebe572 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/components/MainBanner.vue @@ -0,0 +1,50 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/BannerSlides.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/BannerSlides.vue new file mode 100644 index 000000000..75d126e61 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/content/BannerSlides.vue @@ -0,0 +1,58 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/BannerText.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/BannerText.vue new file mode 100644 index 000000000..ef8b64f82 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/content/BannerText.vue @@ -0,0 +1,46 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue new file mode 100644 index 000000000..164002d50 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue @@ -0,0 +1,34 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackText.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackText.vue new file mode 100644 index 000000000..60a58e80d --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackText.vue @@ -0,0 +1,32 @@ + + + diff --git a/banners/english/C24_WMDE_Desktop_EN_01/event_map.ts b/banners/english/C24_WMDE_Desktop_EN_01/event_map.ts new file mode 100644 index 000000000..612f999a8 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/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_01/form_items.ts b/banners/english/C24_WMDE_Desktop_EN_01/form_items.ts new file mode 100644 index 000000000..95a254ccb --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/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_01/messages.ts b/banners/english/C24_WMDE_Desktop_EN_01/messages.ts new file mode 100644 index 000000000..d7277d676 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/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_01/styles/Banner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss new file mode 100644 index 000000000..86a997e78 --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/Banner.scss @@ -0,0 +1,17 @@ +@use 'src/themes/Treedip/variables/fonts'; + +.wmde-banner { + &-wrapper { + font-size: 14px; + font-family: fonts.$ui; + border-bottom: 1px solid var( --main-border-bottom ); + background-color: var( --main-background ); + color: var( --main-color ); + } + + &--closed { + .wmde-banner-wrapper { + display: none; + } + } +} diff --git a/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss new file mode 100644 index 000000000..dfc8cd95e --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/FallbackBanner.scss @@ -0,0 +1,134 @@ +@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 ); + + @media ( min-width: $breakpoint ) { + border-bottom: 1px solid var( --main-border-bottom ); + 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; + 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_01/styles/MainBanner.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss new file mode 100644 index 000000000..bd970253d --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/MainBanner.scss @@ -0,0 +1,43 @@ +$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; + 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_01/styles/styles.scss b/banners/english/C24_WMDE_Desktop_EN_01/styles/styles.scss new file mode 100644 index 000000000..37cb6c20b --- /dev/null +++ b/banners/english/C24_WMDE_Desktop_EN_01/styles/styles.scss @@ -0,0 +1,58 @@ +// This is the file where we import the theme-specific component styles +@use 'src/themes/Treedip/swatches/vector-2022' with ( + $slider: true, + $progress-bar: 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/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/Treedip/FallbackBanner/FallbackButton'; +@use 'src/themes/Treedip/FallbackBanner/LargeFooter'; +@use 'src/themes/Treedip/FallbackBanner/SmallFooter'; diff --git a/campaign_info.toml b/campaign_info.toml index c43d4a31b..f7a4076fa 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -132,23 +132,23 @@ tracking = "wpde-mob00-190624-var" [english] name = "English Desktop" icon = "desktop" -campaign = "C24_WMDE_Desktop_EN_00" +campaign = "C24_WMDE_Desktop_EN_01" description = "Based on C23_WMDE_Desktop_EN_05" -campaign_tracking = "en00-ba-190624" +campaign_tracking = "en01-ba-090324" preview_link = "/wiki/Main_Page?devbanner={{banner}}&banner=B22_WMDE_local_prototype" preview_url = 'https://en.wikipedia.org/wiki/Main_Page?banner={{banner}}&devMode' wrapper_template = "wikipedia_org" use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_EN" [english.banners.ctrl] -filename = "./banners/english/C24_WMDE_Desktop_EN_00/banner_ctrl.ts" -pagename = "B24_WMDE_Desktop_EN_00_ctrl" -tracking = "org-en00-190624-ctrl" +filename = "./banners/english/C24_WMDE_Desktop_EN_01/banner_ctrl.ts" +pagename = "B24_WMDE_Desktop_EN_01_ctrl" +tracking = "org-en01-090324-ctrl" [english.banners.var] -filename = "./banners/english/C24_WMDE_Desktop_EN_00/banner_var.ts" -pagename = "B24_WMDE_Desktop_EN_00_var" -tracking = "org-en00-190624-var" +filename = "./banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts" +pagename = "B24_WMDE_Desktop_EN_01_var" +tracking = "org-en01-090324-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 a2091a971..86b427096 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_00/components/BannerCtrl.vue'; +import Banner from '@banners/english/C24_WMDE_Desktop_EN_01/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/BannerVar.spec.ts b/test/banners/english/components/BannerVar.spec.ts index 5fb6c7b31..6a4539ba0 100644 --- a/test/banners/english/components/BannerVar.spec.ts +++ b/test/banners/english/components/BannerVar.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_00/components/BannerVar.vue'; +import Banner from '@banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.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 c03310f21..71b523603 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_00/components/FallbackBanner.vue'; +import FallbackBanner from '@banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue'; import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; import { useOfFundsContent } from '@test/banners/useOfFundsContent'; import { newDynamicContent } from '@test/banners/dynamicCampaignContent'; From 09f0c021f60ca1099cc1ed696d96c07e6b3cf8f0 Mon Sep 17 00:00:00 2001 From: Abban Dunne Date: Fri, 30 Aug 2024 14:04:30 +0200 Subject: [PATCH 2/4] Prepare CTRL for C24_WMDE_Desktop_EN_01 - Banners are based on CTRL of C23_WMDE_Desktop_EN_05 - Both banners integrate with Wikipedia's Dark Mode Ticket: https://phabricator.wikimedia.org/T372553 --- .../C24_WMDE_Desktop_EN_01/banner_var.ts | 2 +- .../components/BannerCtrl.vue | 22 +-- .../components/BannerVar.vue | 156 ------------------ .../components/FallbackBanner.vue | 2 - .../content/FallbackSlides.vue | 2 - .../C24_WMDE_Desktop_EN_01/styles/styles.scss | 1 - .../english/components/BannerCtrl.spec.ts | 19 +-- .../english/components/BannerVar.spec.ts | 146 ---------------- 8 files changed, 4 insertions(+), 346 deletions(-) delete mode 100644 banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue delete mode 100644 test/banners/english/components/BannerVar.spec.ts diff --git a/banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts b/banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts index 5bd8d91e5..03fdd1d4e 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/banner_var.ts +++ b/banners/english/C24_WMDE_Desktop_EN_01/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/BannerVar.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'; diff --git a/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue index 3c8bbd205..f34edacb9 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.vue +++ b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerCtrl.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'; @@ -87,7 +74,6 @@ import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/Use import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue'; import BannerSlides from '../content/BannerSlides.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 KeenSlider from '@src/components/Slider/KeenSlider.vue'; @@ -123,7 +109,7 @@ interface Props { remainingImpressions: number; } -const props = defineProps(); +defineProps(); const emit = defineEmits( [ 'bannerClosed', 'maybeLater', 'bannerContentChanged' ] ); const isFundsModalVisible = ref( false ); @@ -139,11 +125,7 @@ watch( contentState, async () => { } ); 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_01/components/BannerVar.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue deleted file mode 100644 index 5a26a03af..000000000 --- a/banners/english/C24_WMDE_Desktop_EN_01/components/BannerVar.vue +++ /dev/null @@ -1,156 +0,0 @@ - - - diff --git a/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue b/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue index 50c87d7a2..2c0d8e922 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue +++ b/banners/english/C24_WMDE_Desktop_EN_01/components/FallbackBanner.vue @@ -31,7 +31,6 @@
-
@@ -61,7 +60,6 @@ import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue'; import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue'; import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; import FallbackText from '../content/FallbackText.vue'; -import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue'; import FallbackButton from '@src/components/FallbackBanner/FallbackButton.vue'; import SmallFooter from '@src/components/FallbackBanner/SmallFooter.vue'; import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue'; diff --git a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue index 164002d50..40156faed 100644 --- a/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue +++ b/banners/english/C24_WMDE_Desktop_EN_01/content/FallbackSlides.vue @@ -3,7 +3,6 @@

Our donation target: €9.7 million

-

@@ -22,7 +21,6 @@