+ Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen + {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen. +
+
+ {{campaignDaySentence}}
+
+ Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5 € helfen uns weiter. Hat Wikipedia + Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? +
++ Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank! +
++ Hat Wikipedia Ihnen Wissen im Wert einer Tasse Kaffee geschenkt? +
++ Dann entscheiden Sie sich, etwas zurückzugeben. Danke! +
+Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns besonders und ermöglichen langfristige Weiterentwicklungen.
+Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.
`, + 'upgrade-to-yearly-no': 'Nein, ich spende einmalig {{amount}}', + 'upgrade-to-yearly-yes': 'Ja, ich spende {{amount}} jährlich', + 'campaign-day-only-n-days': 'Heute sind es nur noch {{days}} Tage bis zum Ende unserer Spendenkampagne.', + 'custom-amount-placeholder': 'Wahlbetrag' +}; + +export default messages; diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/Banner.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/Banner.scss new file mode 100644 index 000000000..1e7d13842 --- /dev/null +++ b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/Banner.scss @@ -0,0 +1,22 @@ +@use 'src/themes/Svingle/variables/fonts'; + +.wmde-banner { + &-wrapper { + font-size: 14px; + font-family: fonts.$ui; + box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% ); + background-color: var( --main-background ); + } + + &--pending { + .wmde-banner-wrapper { + box-shadow: none; + } + } + + &--closed { + .wmde-banner-wrapper { + display: none; + } + } +} diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/FallbackBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/FallbackBanner.scss new file mode 100644 index 000000000..a0d40542d --- /dev/null +++ b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/FallbackBanner.scss @@ -0,0 +1,121 @@ +@use 'src/themes/Svingle/variables/fonts'; + +$breakpoint: 800px; + +.wmde-banner { + &-fallback { + width: 100%; + height: 150px; + display: flex; + flex-direction: column; + background: var( --fallback-background ); + box-shadow: 0 3px 0.6em rgba( 60 60 60 / 40% ); + + @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-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-message { + flex: 1 1 auto; + display: flex; + flex-direction: column; + padding: 8px 0; + color: var( --fallback-message-color ); + background-color: var( --fallback-message-background ); + margin: 15px; + + p { + margin-bottom: 0; + } + } + + .wmde-banner-slider-container { + padding: 0 0 8px; + margin: 0; + } + + .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; + } + } + + &--pending { + .wmde-banner-fallback { + box-shadow: none; + } + } +} diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBanner.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBanner.scss new file mode 100644 index 000000000..321fa4cc8 --- /dev/null +++ b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBanner.scss @@ -0,0 +1,61 @@ +$banner-height: 357px !default; +$form-width: 300px !default; + +.wmde-banner { + + .previous { + --slider-chevron: var( --previous-button-fill ); + } + + &-main { + min-height: $banner-height; + display: flex; + flex-direction: column; + padding: 12px 24px 0; + } + + &-content { + display: flex; + flex-direction: row; + flex-grow: 1; + } + + .wmde-banner-message { + height: auto; + } + + &-message-container { + display: flex; + flex: 1 1 auto; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 11px; + color: var( --message-color ); + background-color: var( --message-background ); + border: none; + border-radius: 9px; + margin-bottom: 15px; + } + + &-column-left { + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 auto; + margin-bottom: 0; + overflow-y: hidden; + margin-right: 30px; + padding: 0; + border: none; + } + + &-column-right { + order: 2; + flex: 0 0 $form-width; + display: flex; + flex-direction: column; + width: $form-width; + padding: 10px 0 0; + } +} diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBannerVar.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBannerVar.scss new file mode 100644 index 000000000..1bf067da0 --- /dev/null +++ b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/MainBannerVar.scss @@ -0,0 +1,58 @@ +$banner-height: 357px !default; +$form-width: 300px !default; + +.wmde-banner { + + .previous { + --slider-chevron: var( --previous-button-fill ); + } + + &-main { + min-height: $banner-height; + display: flex; + flex-direction: column; + padding: 12px 24px 0; + } + + &-content { + display: flex; + flex-direction: row; + flex-grow: 1; + } + + &-message { + height: auto; + } + + &-message-container { + display: flex; + flex: 1 1 auto; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 11px; + } + + &-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 0; + } +} diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles.scss new file mode 100644 index 000000000..9ab810180 --- /dev/null +++ b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles.scss @@ -0,0 +1,57 @@ +// This is the file where we import the theme-specific component styles +@use '../../../../src/themes/Svingle/swatches/skin_default' with ( + $slider: true, + $select-group: true, + $upgrade-to-yearly: true, + $fallback-banner: true, + $progress-bar: true, + $soft-close: true, +); +@use 'src/components/BannerConductor/banner-transition'; +@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default; +@use 'Banner'; +@use 'src/themes/UseOfFunds/UseOfFunds'; +@use 'MainBanner' with ( + $banner-height: 357px, + $form-width: 300px +); +@use 'src/themes/Svingle/defaults'; +@use 'src/themes/Svingle/ButtonClose/ButtonClose'; +@use 'src/themes/Svingle/ProgressBar/ProgressBar'; +@use 'src/themes/Svingle/DonationForm/DonationForm'; +@use 'src/themes/Svingle/DonationForm/MultiStepDonation'; +@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroup'; +@use 'src/themes/Svingle/DonationForm/SubComponents/SelectGroupRadios' with ( + $font-size: 14px +); +@use 'src/themes/Svingle/DonationForm/SubComponents/SelectCustomAmountRadio' with ( + $font-size: 14px +); +@use 'src/themes/Svingle/DonationForm/SubComponents/SmsBox'; +@use 'src/themes/Svingle/DonationForm/Forms/MainDonationForm'; +@use 'src/themes/Svingle/DonationForm/Forms/UpgradeToYearlyButtonForm' with ( + $font-size: 14px +); +@use 'src/themes/Svingle/DonationForm/Forms/CustomAmountForm'; +@use 'src/themes/Svingle/Footer/FooterAlreadyDonated'; +@use 'src/themes/Svingle/Footer/SelectionInput'; +@use 'src/themes/Svingle/Message/Message'; +@use 'src/themes/Svingle/SoftClose/SoftClose'; +@use 'src/themes/Svingle/Slider/KeenSlider' with ( + $slider-padding: 0, + $margin-bottom: 0 +); + +/** + * Fallback banner with "Fijitiv" theme + * All selectors in Fijitiv theme are prefixed with the ".wmde-banner-fallback" class selector, + so they override the "default" styles with the same selector + */ +@use 'FallbackBanner'; +@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton'; +@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter'; +@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter'; +@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with ( + $progress-bar-margin: 0 15px +); +@use 'src/themes/Fijitiv/Slider/KeenSlider' as FallbackSlider; diff --git a/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles_var.scss b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles_var.scss new file mode 100644 index 000000000..9c517548d --- /dev/null +++ b/banners/desktop/C24_WMDE_Desktop_DE_15/styles/styles_var.scss @@ -0,0 +1,54 @@ +// This is the file where we import the theme-specific component styles +@use 'src/themes/Treedip/swatches/skin_default' with ( + $slider: true, + $select-group: true, + $upgrade-to-yearly: true, + $fallback-banner: true, + $progress-bar: true, + $soft-close: true, +); +@use 'src/components/BannerConductor/banner-transition'; +@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default; +@use 'Banner'; +@use 'src/themes/UseOfFunds/UseOfFunds'; +@use 'MainBannerVar' with ( + $banner-height: 357px, + $form-width: 300px +); +@use 'src/themes/Treedip/defaults'; +@use 'src/themes/Treedip/ButtonClose/ButtonClose'; +@use 'src/themes/Treedip/ProgressBar/ProgressBar' with ( + $progress-bar-margin: 0 15px +); +@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/UpgradeToYearlyButtonForm' with ( + $font-size: 14px +); +@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm'; +@use 'src/themes/Treedip/Footer/FooterAlreadyDonated'; +@use 'src/themes/Treedip/Footer/SelectionInput'; +@use 'src/themes/Treedip/Message/Message'; +@use 'src/themes/Treedip/SoftClose/SoftClose'; +@use 'src/themes/Treedip/Slider/KeenSlider' with ( + $slider-padding: 0 +); + +/** + * Fallback banner with "Fijitiv" theme + * All selectors in Fijitiv theme are prefixed with the ".wmde-banner-fallback" class selector, + so they override the "default" styles with the same selector + */ +@use 'FallbackBanner'; +@use 'src/themes/Fijitiv/FallbackBanner/FallbackButton'; +@use 'src/themes/Fijitiv/FallbackBanner/LargeFooter'; +@use 'src/themes/Fijitiv/FallbackBanner/SmallFooter'; +@use 'src/themes/Fijitiv/ProgressBar/ProgressBar' as FallbackProgressBar with ( + $progress-bar-margin: 0 15px +); +@use 'src/themes/Fijitiv/Slider/KeenSlider' as FallbackSlider; diff --git a/campaign_info.toml b/campaign_info.toml index 72b912a28..061468322 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -6,25 +6,25 @@ [desktop] name = "Desktop" icon = "desktop" -campaign = "C24_WMDE_Desktop_DE_14" -description = "Based on the CTRL banner of C24_WMDE_Desktop_DE_13, VAR adds additional copy, displays the '10 good reasons' overlay when the link in the added copy is clicked" -campaign_tracking = "14-ba-241119" -preview_link = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype" -preview_link_darkmode = "/wiki/Wikipedia:Hauptseite?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1" -preview_url = 'https://de.wikipedia.org/wiki/Wikipedia:Hauptseite?banner={{banner}}&devMode' +campaign = "C24_WMDE_Desktop_DE_15" +description = "Based on the CTRL banner of test 14, VAR uses EN banner theme" +campaign_tracking = "15-ba-241122" +preview_link = "/wiki/Hamster?devbanner={{banner}}&banner=B22_WMDE_local_prototype" +preview_link_darkmode = "/wiki/Hamster?devbanner={{banner}}&banner=B22_WMDE_local_prototype&vectornightmode=1" +preview_url = 'https://de.wikipedia.org/wiki/Hamster?banner={{banner}}&devMode' wrapper_template = "wikipedia_org" use_of_funds_source = "MediaWiki:WMDE_Fundraising/UseOfFunds_2024_DE" # Banners of the campaign, key after "banners" can be anything [desktop.banners.ctrl] -filename = "./banners/desktop/C24_WMDE_Desktop_DE_14/banner_ctrl.ts" -pagename = "B24_WMDE_Desktop_DE_14_ctrl" -tracking = "org-14-241119-ctrl" +filename = "./banners/desktop/C24_WMDE_Desktop_DE_15/banner_ctrl.ts" +pagename = "B24_WMDE_Desktop_DE_15_ctrl" +tracking = "org-15-241122-ctrl" [desktop.banners.var] -filename = "./banners/desktop/C24_WMDE_Desktop_DE_14/banner_var.ts" -pagename = "B24_WMDE_Desktop_DE_14_var" -tracking = "org-14-241119-var" +filename = "./banners/desktop/C24_WMDE_Desktop_DE_15/banner_var.ts" +pagename = "B24_WMDE_Desktop_DE_15_var" +tracking = "org-15-241122-var" [desktop.test_matrix] platform = ["edge", "firefox_win10", "chrome_win10", "safari", "firefox_macos", "chrome_macos", "firefox_linux", "chrome_linux"] diff --git a/src/themes/Svingle/Message/Message.scss b/src/themes/Svingle/Message/Message.scss index 44d3bc626..4351fbb25 100644 --- a/src/themes/Svingle/Message/Message.scss +++ b/src/themes/Svingle/Message/Message.scss @@ -62,4 +62,43 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default; } } } + + &-message-header { + font-family: $font; + text-align: center; + padding-bottom: 0; + + @include breakpoints.small-up { + padding-bottom: 15px; + } + + h2 { + font-family: $font; + color: var( --message-color ); + border: 0; + display: inline-block; + max-height: 62px; + margin: 0 0 4px; + padding: 0; + font-size: 18px; + font-weight: 800; + line-height: 18px; + + @include breakpoints.small-up { + font-size: 25px; + line-height: 24px; + } + } + + svg { + height: 20px; + width: 20px; + } + + p { + font-size: 18px; + margin: 0; + padding: 0; + } + } } diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio.scss index 609959356..b2818035b 100644 --- a/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio.scss +++ b/src/themes/Treedip/DonationForm/SubComponents/SelectCustomAmountRadio.scss @@ -19,7 +19,7 @@ width: 50%; &-radio { - @include radio-input.styles; + @include radio-input.styles( $left:0, $size: 18px ); } &.value-entered, @@ -56,7 +56,7 @@ background-color: transparent; padding: 0 1em; height: 25px; - font-size: 0.9em; + font-size: 14px; font-weight: bold; border: 0 none; text-align: left; diff --git a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios.scss b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios.scss index 2e7a65e4d..84be31f85 100644 --- a/src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios.scss +++ b/src/themes/Treedip/DonationForm/SubComponents/SelectGroupRadios.scss @@ -1,9 +1,11 @@ @use '../../variables/breakpoints'; +@use 'radio-input'; .wmde-banner { &-select-group { &-option label { - padding: 3px 10px 0 25px; + padding: 0 10px 0 25px; + margin-top: 3px; cursor: pointer; height: 25px; } @@ -11,34 +13,11 @@ &-label { color: var( --select-group-radio-label-color ); border: 0 none; - font-size: 0.95em; - - /* This creates the "radio button" shape */ - &::before { - height: 16px; - width: 16px; - margin-top: -6px; - background: var( --select-group-radio-label-background ); - border-radius: 50%; - border: 1px solid var( --select-group-radio-label-border ); - } + font-size: 14px; } &-input { - display: none; - - /* Unclear if we need this or what it does. Probably browser fixes for text in focused elements? */ - &:checked + .wmde-banner-select-group-label { - border: 0 none; - outline: 0 none; - border-radius: 0; - } - - /* This creates the "selected radio button" shape */ - &:checked + .wmde-banner-select-group-label::before { - border: 6px solid var( --select-group-radio-border-checked ); - box-shadow: none; - } + @include radio-input.styles( $left:0, $size: 18px ); } } } diff --git a/src/themes/Treedip/DonationForm/SubComponents/radio-input.scss b/src/themes/Treedip/DonationForm/SubComponents/radio-input.scss index 6974d24df..94a290c8f 100644 --- a/src/themes/Treedip/DonationForm/SubComponents/radio-input.scss +++ b/src/themes/Treedip/DonationForm/SubComponents/radio-input.scss @@ -1,8 +1,6 @@ @use 'sass:math'; -$size: 16px; - -@mixin styles( $left: 0 ) { +@mixin styles( $left: 0, $size: 16px ) { appearance: none; position: absolute; top: 50%; diff --git a/src/themes/Treedip/Message/Message.scss b/src/themes/Treedip/Message/Message.scss index 653c59857..42ae413ee 100644 --- a/src/themes/Treedip/Message/Message.scss +++ b/src/themes/Treedip/Message/Message.scss @@ -27,4 +27,43 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default; } } } + + &-message-header { + font-family: $font; + text-align: center; + padding-bottom: 10px; + + @include breakpoints.small-up { + padding-bottom: 15px; + } + + h2 { + font-family: $font; + color: var( --message-color ); + border: 0; + display: inline-block; + max-height: 62px; + margin: 0 0 4px; + padding: 0; + font-size: 18px; + font-weight: 800; + line-height: 18px; + + @include breakpoints.small-up { + font-size: 25px; + line-height: 24px; + } + } + + svg { + height: 20px; + width: 20px; + } + + p { + font-size: 18px; + margin: 0; + padding: 0; + } + } } diff --git a/src/themes/Treedip/ProgressBar/ProgressBar.scss b/src/themes/Treedip/ProgressBar/ProgressBar.scss index 9715b7701..93165d549 100644 --- a/src/themes/Treedip/ProgressBar/ProgressBar.scss +++ b/src/themes/Treedip/ProgressBar/ProgressBar.scss @@ -55,6 +55,7 @@ $progress-bar-margin: 0 !default; color: var( --progress-bar-fill-color ); text-align: right; padding-right: 16px; + line-height: $progress-bar-height - 6px; } &--late-progress { diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss index 1ab8eccc6..995449dd2 100644 --- a/src/themes/Treedip/swatches/color_light.scss +++ b/src/themes/Treedip/swatches/color_light.scss @@ -82,6 +82,11 @@ $blue700: #2a4b8d; --select-group-radio-label-color: #{$black}; --select-group-radio-label-background: #{$grey200}; --select-group-radio-label-border: #{$grey200}; + + --select-group-radio-background: #{$white}; + --select-group-radio-border: #{$grey200}; + --select-group-radio-checkmark: #{$white}; + --select-group-radio-background-checked: #{$red600}; --select-group-radio-border-checked: #{$red600}; --select-custom-amount-border: #{$grey150}; diff --git a/test/banners/desktop/C24_WMDE_Desktop_DE_15/components/BannerCtrl.spec.ts b/test/banners/desktop/C24_WMDE_Desktop_DE_15/components/BannerCtrl.spec.ts new file mode 100644 index 000000000..884a810b7 --- /dev/null +++ b/test/banners/desktop/C24_WMDE_Desktop_DE_15/components/BannerCtrl.spec.ts @@ -0,0 +1,178 @@ +import { beforeEach, describe, test, vi } from 'vitest'; +import { mount, VueWrapper } from '@vue/test-utils'; +import Banner from '@banners/desktop/C24_WMDE_Desktop_DE_15/components/BannerCtrl.vue'; +import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; +import { newDynamicContent } from '@test/banners/dynamicCampaignContent'; +import { useOfFundsContent } from '@test/banners/useOfFundsContent'; +import { formItems } from '@test/banners/formItems'; +import { CurrencyEn } from '@src/utils/DynamicContent/formatters/CurrencyEn'; +import { useOfFundsFeatures } from '@test/features/UseOfFunds'; +import { + bannerContentAnimatedTextFeatures, + bannerContentDateAndTimeFeatures, + bannerContentDisplaySwitchFeatures, + bannerContentFeatures +} from '@test/features/BannerContent'; +import { donationFormFeatures } from '@test/features/forms/MainDonation_UpgradeToYearlyButton'; +import { useFormModel } from '@src/components/composables/useFormModel'; +import { resetFormModel } from '@test/resetFormModel'; +import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; +import { bannerAutoHideFeatures, bannerMainFeatures } from '@test/features/MainBanner'; +import { formActionSwitchFeatures } from '@test/features/form_action_switch/MainDonation_UpgradeToYearlyButton'; +import { softCloseFeatures } from '@test/features/SoftCloseDesktop'; +import { alreadyDonatedModalFeatures } from '@test/features/AlreadyDonatedModal'; +import { softCloseSubmitTrackingFeaturesDesktop } from '@test/features/SoftCloseSubmitTrackingDesktop'; +import { Tracker } from '@src/tracking/Tracker'; +import { TimerStub } from '@test/fixtures/TimerStub'; +import { Timer } from '@src/utils/Timer'; + +const formModel = useFormModel(); +const translator = ( key: string ): string => key; +let tracker: Tracker; + +describe( 'BannerCtrl.vue', () => { + + beforeEach( () => { + resetFormModel( formModel ); + tracker = { + trackEvent: vi.fn() + }; + } ); + + const getWrapper = ( dynamicContent: DynamicContent = null, timer: Timer = null ): VueWrapper