diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_05/banner_ctrl.ts new file mode 100644 index 000000000..a88f0d874 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/banner_ctrl.ts @@ -0,0 +1,65 @@ +import { createVueApp } from '@src/createVueApp'; + +import './styles/styles.scss'; + +import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue'; +import Banner from './components/BannerCtrl.vue'; +import getBannerDelay from '@src/utils/getBannerDelay'; +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 eventMappings from './event_map'; + +// Locale-specific imports +import messages from './messages'; +import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe'; + +// Channel specific form setup +import { createFormItems } from './form_items'; +import { createFormActions } from '@src/createFormActions'; + +const localeFactory = new LocaleFactoryDe(); +const translator = new Translator( messages ); +const mediaWiki = new WindowMediaWiki(); +const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) ); +const impressionCount = new LocalImpressionCount( page.getTracking().keyword ); +const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings ); + +const app = createVueApp( BannerConductor, { + page, + bannerConfig: { + delay: getBannerDelay( 7500 ), + transitionDuration: 1000 + }, + bannerProps: { + useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent() + }, + resizeHandler: new WindowResizeHandler(), + banner: Banner, + 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, { ap: '0' } ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_05/banner_var.ts new file mode 100644 index 000000000..a3e1ad168 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/banner_var.ts @@ -0,0 +1,65 @@ +import { createVueApp } from '@src/createVueApp'; + +import './styles/styles.scss'; + +import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue'; +import Banner from './components/BannerCtrl.vue'; +import getBannerDelay from '@src/utils/getBannerDelay'; +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 eventMappings from './event_map'; + +// Locale-specific imports +import messages from './messages'; +import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe'; + +// Channel specific form setup +import { createFormItems } from './form_items'; +import { createFormActions } from '@src/createFormActions'; + +const localeFactory = new LocaleFactoryDe(); +const translator = new Translator( messages ); +const mediaWiki = new WindowMediaWiki(); +const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 800 ) ); +const impressionCount = new LocalImpressionCount( page.getTracking().keyword ); +const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings ); + +const app = createVueApp( BannerConductor, { + page, + bannerConfig: { + delay: getBannerDelay( 7500 ), + transitionDuration: 1000 + }, + bannerProps: { + useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent() + }, + resizeHandler: new WindowResizeHandler(), + banner: Banner, + 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, { ap: '1' } ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/components/BannerCtrl.vue b/archive/desktop/C23_WMDE_Desktop_DE_05/components/BannerCtrl.vue new file mode 100644 index 000000000..4b52567d0 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/components/BannerCtrl.vue @@ -0,0 +1,119 @@ + + + diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/components/MainBanner.vue b/archive/desktop/C23_WMDE_Desktop_DE_05/components/MainBanner.vue new file mode 100644 index 000000000..514b897c9 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/components/MainBanner.vue @@ -0,0 +1,44 @@ + + + diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/content/BannerSlides.vue b/archive/desktop/C23_WMDE_Desktop_DE_05/content/BannerSlides.vue new file mode 100644 index 000000000..a47309ef6 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/content/BannerSlides.vue @@ -0,0 +1,52 @@ + + + diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/content/BannerText.vue b/archive/desktop/C23_WMDE_Desktop_DE_05/content/BannerText.vue new file mode 100644 index 000000000..4698ece35 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/content/BannerText.vue @@ -0,0 +1,35 @@ + + + diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/event_map.ts b/archive/desktop/C23_WMDE_Desktop_DE_05/event_map.ts new file mode 100644 index 000000000..a090330ce --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/event_map.ts @@ -0,0 +1,33 @@ +import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG'; +import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent'; +import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue'; +import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent'; +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'; + +export default new Map( [ + [ 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}`, null, 1 ); + case 'CustomAmountForm': + return new WMDESizeIssueEvent( `submit-different-amount`, null, 1 ); + default: + return new WMDESizeIssueEvent( `submit`, null, 1 ); + } + } ] + // TODO add more events +] ); diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/form_items.ts b/archive/desktop/C23_WMDE_Desktop_DE_05/form_items.ts new file mode 100644 index 000000000..b70650d19 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/form_items.ts @@ -0,0 +1,23 @@ +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.BANK_TRANSFER, + PaymentMethods.CREDIT_CARD, + PaymentMethods.DIRECT_DEBIT + ).getItems(); +} diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/messages.ts b/archive/desktop/C23_WMDE_Desktop_DE_05/messages.ts new file mode 100644 index 000000000..50cb6d5bc --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/messages.ts @@ -0,0 +1,20 @@ +import CustomAmountFormDe from '@src/components/DonationForm/Forms/messages/CustomAmountForm.de'; +import DynamicCampaignTextDe from '@src/utils/DynamicContent/messages/DynamicCampaignText.de'; +import { TranslationMessages } from '@src/Translator'; +import UpgradeToYearlyDe from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de'; +import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de'; +import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de'; +import FooterDe from '@src/components/Footer/messages/Footer.de'; +import MainDonationFormDe from '@src/components/DonationForm/Forms/messages/MainDonationForm.de'; + +const messages: TranslationMessages = { + ...CustomAmountFormDe, + ...DynamicCampaignTextDe, + ...UpgradeToYearlyDe, + ...SoftCloseDe, + ...AddressFormDe, + ...FooterDe, + ...MainDonationFormDe +}; + +export default messages; diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/styles/Banner.scss b/archive/desktop/C23_WMDE_Desktop_DE_05/styles/Banner.scss new file mode 100644 index 000000000..06e30756a --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/styles/Banner.scss @@ -0,0 +1,17 @@ +@use 'src/themes/Treedip/variables/fonts'; +@use 'src/themes/Treedip/variables/colors'; + +.wmde-banner { + &-wrapper { + font-size: 14px; + font-family: fonts.$ui; + box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% ); + background-color: colors.$white; + } + + &--closed { + .wmde-banner-wrapper { + display: none; + } + } +} diff --git a/archive/desktop/C23_WMDE_Desktop_DE_05/styles/MainBanner.scss b/archive/desktop/C23_WMDE_Desktop_DE_05/styles/MainBanner.scss new file mode 100644 index 000000000..c328cbca9 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/styles/MainBanner.scss @@ -0,0 +1,45 @@ +@use 'src/themes/Treedip/variables/colors'; + +$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 colors.$primary; + 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/archive/desktop/C23_WMDE_Desktop_DE_05/styles/styles.scss b/archive/desktop/C23_WMDE_Desktop_DE_05/styles/styles.scss new file mode 100644 index 000000000..1a74e5de6 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_05/styles/styles.scss @@ -0,0 +1,26 @@ +// This is the file where we import the theme-specific component styles +@use 'src/components/BannerConductor/banner-transition'; +@use 'Banner'; +@use 'MainBanner' with ( + $banner-height: 357px, + $form-width: 300px +); +@use 'src/themes/UseOfFunds/UseOfFunds'; +@use 'src/themes/Treedip/defaults'; +@use 'src/themes/Treedip/ButtonClose/ButtonClose'; +@use 'src/themes/Treedip/DonationForm/DonationForm'; +@use 'src/themes/Treedip/DonationForm/MultiStepDonation'; +@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroup'; +@use 'src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios'; +@use 'src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio'; +@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox'; +@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm'; +@use 'src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyForm'; +@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'; +@use 'src/themes/Treedip/Slider/KeenSlider'; +@use 'src/themes/Treedip/SoftClose/SoftClose'; diff --git a/banners/desktop/banner_ctrl.ts b/banners/desktop/banner_ctrl.ts index a88f0d874..05ce11c2a 100644 --- a/banners/desktop/banner_ctrl.ts +++ b/banners/desktop/banner_ctrl.ts @@ -59,7 +59,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, { ap: '0' } ) ); +app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '0' } ) ); app.provide( 'tracker', tracker ); app.mount( page.getBannerContainer() ); diff --git a/banners/desktop/banner_var.ts b/banners/desktop/banner_var.ts index a3e1ad168..ae5895ff6 100644 --- a/banners/desktop/banner_var.ts +++ b/banners/desktop/banner_var.ts @@ -59,7 +59,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, { ap: '1' } ) ); +app.provide( 'formActions', createFormActions( page.getTracking(), impressionCount, { des: '1' } ) ); app.provide( 'tracker', tracker ); app.mount( page.getBannerContainer() ); diff --git a/campaign_info.toml b/campaign_info.toml index 5aeb8c40e..a5aa54c86 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -6,9 +6,9 @@ [desktop] name = "Desktop" icon = "desktop" -campaign = "C23_WMDE_Desktop_DE_05" -description = "CTRL as base, VAR points to a new version of the address form on spenden" -campaign_tracking = "05-ba-230918" +campaign = "C23_WMDE_Desktop_DE_06" +description = "CTRL as base, VAR points to a new style on spenden" +campaign_tracking = "06-ba-231009" preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode' wrapper_template = "wikipedia_org" @@ -17,13 +17,13 @@ use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2023_DE" # Banners of the campaign, key after "banners" can be anything [desktop.banners.ctrl] filename = "./banners/desktop/banner_ctrl.ts" -pagename = "B23_WMDE_Desktop_DE_05_ctrl" -tracking = "org-05-230918-ctrl" +pagename = "B23_WMDE_Desktop_DE_06_ctrl" +tracking = "org-06-231009-ctrl" [desktop.banners.var] filename = "./banners/desktop/banner_var.ts" -pagename = "B23_WMDE_Desktop_DE_05_var" -tracking = "org-05-230918-var" +pagename = "B23_WMDE_Desktop_DE_06_var" +tracking = "org-06-231009-var" [desktop.test_matrix] platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"]