From 2236d38d9c8197205d653ddd5cfa76fbca577546 Mon Sep 17 00:00:00 2001 From: Sperling-0 <tanujadoriya@gmail.com> Date: Fri, 30 Jun 2023 12:24:09 +0200 Subject: [PATCH 1/4] Archive C23_WMDE_Desktop_DE_00 Ticket: https://phabricator.wikimedia.org/T340620 --- .../C23_WMDE_Desktop_DE_00/banner_ctrl.ts | 65 ++++++++ .../C23_WMDE_Desktop_DE_00/banner_var.ts | 65 ++++++++ .../components/BannerCtrl.vue | 133 ++++++++++++++++ .../components/BannerVar.vue | 144 ++++++++++++++++++ .../components/MainBanner.vue | 45 ++++++ .../content/BannerSlides.vue | 40 +++++ .../content/BannerText.vue | 27 ++++ .../C23_WMDE_Desktop_DE_00/event_map.ts | 33 ++++ .../C23_WMDE_Desktop_DE_00/event_map_var.ts | 20 +++ .../C23_WMDE_Desktop_DE_00/form_items.ts | 23 +++ .../C23_WMDE_Desktop_DE_00/form_items_var.ts | 30 ++++ .../C23_WMDE_Desktop_DE_00/messages.ts | 20 +++ .../C23_WMDE_Desktop_DE_00/styles/Banner.scss | 17 +++ .../styles/MainBanner.scss | 45 ++++++ .../C23_WMDE_Desktop_DE_00/styles/styles.scss | 29 ++++ .../styles/styles_var.scss | 30 ++++ 16 files changed, 766 insertions(+) create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/banner_ctrl.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/banner_var.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerCtrl.vue create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerVar.vue create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/components/MainBanner.vue create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerSlides.vue create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerText.vue create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/event_map_var.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/form_items.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/form_items_var.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/messages.ts create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/styles/Banner.scss create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/styles/MainBanner.scss create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles.scss create mode 100644 archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles_var.scss diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/banner_ctrl.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/banner_ctrl.ts new file mode 100644 index 000000000..896dc01f8 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/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 ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/banner_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/banner_var.ts new file mode 100644 index 000000000..8a89aafec --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/banner_var.ts @@ -0,0 +1,65 @@ +import { createVueApp } from '@src/createVueApp'; + +import './styles/styles_var.scss'; + +import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue'; +import Banner from './components/BannerVar.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_var'; +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 ) ); +app.provide( 'tracker', tracker ); + +app.mount( page.getBannerContainer() ); diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerCtrl.vue b/archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerCtrl.vue new file mode 100644 index 000000000..5a72dc256 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerCtrl.vue @@ -0,0 +1,133 @@ +<template> + <div class="wmde-banner-wrapper" :class="contentState"> + <MainBanner + @close="onCloseMain" + @form-interaction="$emit( 'bannerContentChanged' )" + v-if="contentState === ContentStates.Main" + :bannerState="bannerState" + > + <template #banner-text> + <BannerText/> + </template> + + <template #banner-slides="{ play }: any"> + <KeenSlider :with-navigation="true" :play="play" :interval="5000"> + + <template #slides="{ currentSlide }: any"> + <BannerSlides :currentSlide="currentSlide"/> + </template> + + </KeenSlider> + </template> + + <template #progress> + <ProgressBar amount-to-show-on-right="TARGET"/> + </template> + + <template #donation-form="{ formInteraction }: any"> + <MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction"> + + <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + + <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + + <template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + + </MultiStepDonation> + </template> + + <template #footer> + <BannerFooter @showFundsModal="isFundsModalVisible = true" /> + </template> + </MainBanner> + + <SoftClose + v-if="contentState === ContentStates.SoftClosing" + @close="() => onClose( 'SoftClose', CloseChoices.Close )" + @maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )" + @time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )" + /> + + <FundsModal + :content="useOfFundsContent" + :is-funds-modal-visible="isFundsModalVisible" + @hideFundsModal="isFundsModalVisible = false" + /> + </div> +</template> + +<script setup lang="ts"> +import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; +import { ref, watch } from 'vue'; +import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent'; +import SoftClose from '@src/components/SoftClose/SoftClose.vue'; +import MainBanner from './MainBanner.vue'; +import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; +import BannerText from '../content/BannerText.vue'; +import BannerSlides from '../content/BannerSlides.vue'; +import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue'; +import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; +import BannerFooter from '@src/components/Footer/BannerFooter.vue'; +import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; +import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue'; +import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue'; +import KeenSlider from '@src/components/Slider/KeenSlider.vue'; +import { useFormModel } from '@src/components/composables/useFormModel'; +import { + createSubmittableMainDonationForm +} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm'; +import { + createSubmittableUpgradeToYearly +} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly'; +import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount'; +import { CloseChoices } from '@src/domain/CloseChoices'; +import { CloseEvent } from '@src/tracking/events/CloseEvent'; +import { TrackingFeatureName } from '@src/tracking/TrackingEvent'; + +enum ContentStates { + Main = 'wmde-banner-wrapper--main', + SoftClosing = 'wmde-banner-wrapper--soft-closing' +} + +enum FormStepNames { + CustomAmountFormStep = 'CustomAmountForm', + MainDonationFormStep = 'MainDonationForm', + UpgradeToYearlyFormStep = 'UpgradeToYearlyForm' +} + +interface Props { + bannerState: BannerStates; + useOfFundsContent: useOfFundsContentInterface; +} + +defineProps<Props>(); +const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] ); + +const isFundsModalVisible = ref<boolean>( false ); +const contentState = ref<ContentStates>( ContentStates.Main ); +const formModel = useFormModel(); +const stepControllers = [ + createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ), + createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ), + createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep ) +]; + +watch( contentState, async () => { + emit( 'bannerContentChanged' ); +} ); + +function onCloseMain(): void { + contentState.value = ContentStates.SoftClosing; +} + +function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void { + emit( 'bannerClosed', new CloseEvent( feature, userChoice ) ); +} + +</script> diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerVar.vue b/archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerVar.vue new file mode 100644 index 000000000..30855533f --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/components/BannerVar.vue @@ -0,0 +1,144 @@ +<template> + <div class="wmde-banner-wrapper" :class="contentState"> + <MainBanner + @close="onCloseMain" + @form-interaction="$emit( 'bannerContentChanged' )" + v-if="contentState === ContentStates.Main" + :bannerState="bannerState" + > + <template #banner-text> + <BannerText/> + </template> + + <template #banner-slides="{ play }: any"> + <KeenSlider :with-navigation="true" :play="play" :interval="5000"> + + <template #slides="{ currentSlide }: any"> + <BannerSlides :currentSlide="currentSlide"/> + </template> + + </KeenSlider> + </template> + + <template #progress> + <ProgressBar amount-to-show-on-right="TARGET"/> + </template> + + <template #donation-form="{ formInteraction }: any"> + <MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction"> + <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + + <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + + <template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + + <template #[FormStepNames.AddressTypeFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> + <AddressTypeForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> + </template> + </MultiStepDonation> + </template> + + <template #footer> + <BannerFooter @showFundsModal="isFundsModalVisible = true" /> + </template> + </MainBanner> + + <SoftClose + v-if="contentState === ContentStates.SoftClosing" + @close="() => onClose( 'SoftClose', CloseChoices.Close )" + @maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )" + @time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )" + /> + + <FundsModal + :content="useOfFundsContent" + :is-funds-modal-visible="isFundsModalVisible" + @hideFundsModal="isFundsModalVisible = false" + /> + </div> +</template> + +<script setup lang="ts"> +import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; +import { ref, watch } from 'vue'; +import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent'; +import SoftClose from '@src/components/SoftClose/SoftClose.vue'; +import MainBanner from './MainBanner.vue'; +import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; +import BannerText from '../content/BannerText.vue'; +import BannerSlides from '../content/BannerSlides.vue'; +import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue'; +import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; +import BannerFooter from '@src/components/Footer/BannerFooter.vue'; +import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; +import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue'; +import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue'; +import { useFormModel } from '@src/components/composables/useFormModel'; +import { createSubmittableAddressType } from '@src/components/DonationForm/StepControllers/SubmittableAddressType'; +import { + createIntermediateMainDonationForm +} from '@src/components/DonationForm/StepControllers/IntermediateMainDonationForm'; +import { + createIntermediateUpgradeToYearly +} from '@src/components/DonationForm/StepControllers/IntermediateUpgradeToYearly'; +import { createIntermediateCustomAmount } from '@src/components/DonationForm/StepControllers/IntermediateCustomAmount'; +import AddressTypeForm from '@src/components/DonationForm/Forms/AddressTypeForm.vue'; +import KeenSlider from '@src/components/Slider/KeenSlider.vue'; +import { CloseChoices } from '@src/domain/CloseChoices'; +import { CloseEvent } from '@src/tracking/events/CloseEvent'; +import { TrackingFeatureName } from '@src/tracking/TrackingEvent'; + +enum ContentStates { + Main = 'wmde-banner-wrapper--main', + SoftClosing = 'wmde-banner-wrapper--soft-closing' +} + +enum FormStepNames { + CustomAmountFormStep = 'CustomAmountForm', + MainDonationFormStep = 'MainDonationForm', + UpgradeToYearlyFormStep = 'UpgradeToYearlyForm', + AddressTypeFormStep = 'AddressTypeForm' +} + +interface Props { + bannerState: BannerStates; + useOfFundsContent: useOfFundsContentInterface; +} + +defineProps<Props>(); +const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] ); + +const isFundsModalVisible = ref<boolean>( false ); +const contentState = ref<ContentStates>( ContentStates.Main ); + +const formModel = useFormModel(); + +const stepControllers = [ + createIntermediateMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep, FormStepNames.AddressTypeFormStep ), + createIntermediateUpgradeToYearly( formModel, + FormStepNames.CustomAmountFormStep, + FormStepNames.AddressTypeFormStep, + FormStepNames.MainDonationFormStep ), + createIntermediateCustomAmount( formModel, FormStepNames.AddressTypeFormStep, FormStepNames.UpgradeToYearlyFormStep ), + createSubmittableAddressType( formModel, FormStepNames.MainDonationFormStep ) +]; + +watch( contentState, async () => { + emit( 'bannerContentChanged' ); +} ); + +function onCloseMain(): void { + contentState.value = ContentStates.SoftClosing; +} + +function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void { + emit( 'bannerClosed', new CloseEvent( feature, userChoice ) ); +} + +</script> diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/components/MainBanner.vue b/archive/desktop/C23_WMDE_Desktop_DE_00/components/MainBanner.vue new file mode 100644 index 000000000..c5619037a --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/components/MainBanner.vue @@ -0,0 +1,45 @@ +<template> + <div class="wmde-banner-main"> + <ButtonClose @close="$emit( 'close' )"/> + <div class="wmde-banner-content"> + <div class="wmde-banner-column-left"> + <slot name="banner-text" v-if="onLargeScreen"/> + <slot name="banner-slides" v-else :play="slideshowShouldPlay"/> + <slot name="progress"/> + </div> + <div class="wmde-banner-column-right"> + <slot name="donation-form" :form-interaction="onFormInteraction"/> + </div> + </div> + <slot name="footer"/> + </div> +</template> + +<script setup lang="ts"> + +import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue'; +import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch'; +import { computed, nextTick, ref } from 'vue'; +import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; + +interface Props { + bannerState: BannerStates; +} + +const props = defineProps<Props>(); +const emit = defineEmits( [ 'close', 'formInteraction' ] ); + +const slideShowStopped = ref<boolean>( false ); +const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value ); + +const onLargeScreen = useDisplaySwitch( 1300 ); + +const onFormInteraction = (): void => { + slideShowStopped.value = true; + + nextTick( () => { + emit( 'formInteraction' ); + } ); +}; + +</script> diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerSlides.vue b/archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerSlides.vue new file mode 100644 index 000000000..879912fbb --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerSlides.vue @@ -0,0 +1,40 @@ +<template> + <KeenSliderSlide :is-current="currentSlide === 0"> + <p class="headline"> + <InfoIcon fill="#990a00"/> <strong> An alle, die Wikipedia in Deutschland nutzen </strong> + </p> + <p> + Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! + Am heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia + zu unterstützen. {{campaignDaySentence }} + </p> + </KeenSliderSlide> + <KeenSliderSlide :is-current="currentSlide === 1"> + <p> + <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span> + Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. + Die durchschnittliche Spende beträgt 22,66 €, doch bereits eine Spende von 5 € hilft uns weiter. + </p> + </KeenSliderSlide> + <KeenSliderSlide :is-current="currentSlide === 2"> + <p> + 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! + </p> + </KeenSliderSlide> +</template> + +<script setup lang="ts"> +import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; +import { inject } from 'vue'; +import InfoIcon from '@src/components/Icons/InfoIcon.vue'; +import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue'; + +interface Props { + currentSlide: number +} + +defineProps<Props>(); + +const { currentDayName, campaignDaySentence, visitorsVsDonorsSentence }: DynamicContent = inject( 'dynamicCampaignText' ); +</script> diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerText.vue b/archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerText.vue new file mode 100644 index 000000000..a413ec889 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/content/BannerText.vue @@ -0,0 +1,27 @@ +<template> + <div class="wmde-banner-message"> + <div> + <p> + <strong>An alle, die Wikipedia in Deutschland nutzen </strong> + </p> + <p> + Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am + heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu + unterstützen. {{ campaignDaySentence }} + <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span> + Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende + beträgt 22,66 €, doch bereits eine Spende von 5 € hilft 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! + </p> + </div> + </div> +</template> + +<script setup lang="ts"> +import { inject } from 'vue'; +import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; + +const { currentDayName, campaignDaySentence, visitorsVsDonorsSentence }: DynamicContent = inject( 'dynamicCampaignText' ); + +</script> diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts new file mode 100644 index 000000000..549a92bf4 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/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<string, TrackingEventConverterFactory>( [ + [ CloseEvent.EVENT_NAME, mapCloseEvent ], + + [ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ], + [ CustomAmountChangedEvent.EVENT_NAME, + ( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent => + new WMDELegacyBannerEvent( e.customData.amountChange + '-amount', 1 ) + ], + [ NotShownEvent.EVENT_NAME, mapNotShownEvent ], + [ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => { + switch ( e.feature ) { + case 'UpgradeToYearlyForm': + return new WMDESizeIssueEvent( `submit-${e.customData.optionSelected}`, null, 1 ); + case 'CustomAmount': + 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_00/event_map_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/event_map_var.ts new file mode 100644 index 000000000..bf7a08ae7 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/event_map_var.ts @@ -0,0 +1,20 @@ +import CtrlEventMap from './event_map'; +import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent'; +import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue'; +import { UpgradeToYearlyEvent } from '@src/tracking/events/UpgradeToYearlyEvent'; +import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent'; + +// We "extend" the event map here because the original one is still in flux, and we want to avoid duplication +// At the next reset of this test, you should either throw away this map or combine the two maps in one file +CtrlEventMap.set( BannerSubmitEvent.EVENT_NAME, + (): WMDESizeIssueEvent => { + return new WMDESizeIssueEvent( `submit`, null, 1 ); + } +); +CtrlEventMap.set( UpgradeToYearlyEvent.EVENT_NAME, + ( e: BannerSubmitEvent ): WMDELegacyBannerEvent => { + return new WMDELegacyBannerEvent( e.customData.optionSelected, 1 ); + } +); + +export default CtrlEventMap; diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/form_items.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/form_items.ts new file mode 100644 index 000000000..ccf13b3f5 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/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.DIRECT_DEBIT, + PaymentMethods.CREDIT_CARD + ).getItems(); +} diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/form_items_var.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/form_items_var.ts new file mode 100644 index 000000000..3e82447ff --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/form_items_var.ts @@ -0,0 +1,30 @@ +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'; +import { AddressTypes } from '@src/utils/FormItemsBuilder/fields/AddressTypes'; + +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.DIRECT_DEBIT, + PaymentMethods.CREDIT_CARD + ) + .setAddressTypes( + AddressTypes.FULL, + AddressTypes.EMAIL, + AddressTypes.ANONYMOUS + ) + .getItems(); +} diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/messages.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/messages.ts new file mode 100644 index 000000000..50cb6d5bc --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/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_00/styles/Banner.scss b/archive/desktop/C23_WMDE_Desktop_DE_00/styles/Banner.scss new file mode 100644 index 000000000..06e30756a --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/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_00/styles/MainBanner.scss b/archive/desktop/C23_WMDE_Desktop_DE_00/styles/MainBanner.scss new file mode 100644 index 000000000..c328cbca9 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/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_00/styles/styles.scss b/archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles.scss new file mode 100644 index 000000000..be431d270 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles.scss @@ -0,0 +1,29 @@ +// 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/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/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/archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles_var.scss b/archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles_var.scss new file mode 100644 index 000000000..9808d1984 --- /dev/null +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/styles/styles_var.scss @@ -0,0 +1,30 @@ +// 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/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/UpgradeToYearlyForm'; +@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm'; +@use 'src/themes/Treedip/DonationForm/Forms/AddressTypeForm'; +@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'; From 0c81c8f04754dbd3be7b99bc0ca4b9ff2bc074d7 Mon Sep 17 00:00:00 2001 From: Sperling-0 <tanujadoriya@gmail.com> Date: Fri, 30 Jun 2023 16:49:35 +0200 Subject: [PATCH 2/4] Prepare campign for C23_WMDE_Desktop_DE_01 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The headline of the non-slider CTRL banner shows the ℹ️ icon. - The progress bar is removed from the CTRL banner while the height of the banners is maintained. - In the CTRL banner, the highlighted sentence is replaced by "Millionen Menschen nutzen Wikipedia, aber 99 % spenden nicht – sie übergehen diesen Aufruf." in the CTRL non-slider and the slider version. - In the bank account line at the bottom - the account holder name is changed from Wikimedia to Wikimedia e. V. - the bank account number is changed to DE05 1002 0500 0003 2873 00. - The banner-closed event is triggered at a 10% rate. - In the use of funds overlay, the font size of the annual revenue chart is increased from 14px to 16px in use of funds overlay. Ticket: https://phabricator.wikimedia.org/T340620 --- banners/desktop/components/BannerCtrl.vue | 5 ----- banners/desktop/content/BannerSlides.vue | 3 ++- banners/desktop/content/BannerText.vue | 8 +++++--- campaign_info.toml | 12 ++++++------ src/components/Footer/BannerFooter.vue | 6 +++--- src/components/Footer/FooterAlreadyDonated.vue | 4 ++-- src/themes/UseOfFunds/FundsContent.scss | 2 +- .../UseOfFunds/FundsDistributionAccordion.scss | 2 +- src/themes/UseOfFunds/FundsDistributionInfo.scss | 2 +- src/tracking/LegacyEventTracking/mapCloseEvent.ts | 2 +- test/banners/desktop/components/BannerCtrl.spec.ts | 2 +- 11 files changed, 23 insertions(+), 25 deletions(-) diff --git a/banners/desktop/components/BannerCtrl.vue b/banners/desktop/components/BannerCtrl.vue index 5a72dc256..12057fe13 100644 --- a/banners/desktop/components/BannerCtrl.vue +++ b/banners/desktop/components/BannerCtrl.vue @@ -20,10 +20,6 @@ </KeenSlider> </template> - <template #progress> - <ProgressBar amount-to-show-on-right="TARGET"/> - </template> - <template #donation-form="{ formInteraction }: any"> <MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction"> @@ -71,7 +67,6 @@ import MainBanner from './MainBanner.vue'; import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; import BannerText from '../content/BannerText.vue'; import BannerSlides from '../content/BannerSlides.vue'; -import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue'; import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; import BannerFooter from '@src/components/Footer/BannerFooter.vue'; import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; diff --git a/banners/desktop/content/BannerSlides.vue b/banners/desktop/content/BannerSlides.vue index 879912fbb..f6dfdc139 100644 --- a/banners/desktop/content/BannerSlides.vue +++ b/banners/desktop/content/BannerSlides.vue @@ -11,7 +11,8 @@ </KeenSliderSlide> <KeenSliderSlide :is-current="currentSlide === 1"> <p> - <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span> + <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % spenden + nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende beträgt 22,66 €, doch bereits eine Spende von 5 € hilft uns weiter. </p> diff --git a/banners/desktop/content/BannerText.vue b/banners/desktop/content/BannerText.vue index a413ec889..3e12e5f64 100644 --- a/banners/desktop/content/BannerText.vue +++ b/banners/desktop/content/BannerText.vue @@ -2,14 +2,15 @@ <div class="wmde-banner-message"> <div> <p> - <strong>An alle, die Wikipedia in Deutschland nutzen </strong> + <InfoIcon/> + <strong> An alle, die Wikipedia in Deutschland nutzen </strong> </p> <p> Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu unterstützen. {{ campaignDaySentence }} - <span v-if="visitorsVsDonorsSentence !== ''" class="wmde-banner-text-animated-highlight">{{ visitorsVsDonorsSentence }}</span> - Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende + <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % + spenden nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende beträgt 22,66 €, doch bereits eine Spende von 5 € hilft 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! @@ -21,6 +22,7 @@ <script setup lang="ts"> import { inject } from 'vue'; import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; +import InfoIcon from '@src/components/Icons/InfoIcon.vue'; const { currentDayName, campaignDaySentence, visitorsVsDonorsSentence }: DynamicContent = inject( 'dynamicCampaignText' ); diff --git a/campaign_info.toml b/campaign_info.toml index 3c59ecc40..9a2a0a2a5 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -6,9 +6,9 @@ [desktop] name = "Desktop" icon = "desktop" -campaign = "C23_WMDE_Desktop_00" +campaign = "C23_WMDE_Desktop_DE_01" description = "3 step form vs 4 step form" -campaign_tracking = "00-ba-230501" +campaign_tracking = "01-ba-300630" 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_00_ctrl" -tracking = "org-00-230501-ctrl" +pagename = "C23_WMDE_Desktop_DE_01_ctrl" +tracking = "org-01-300630-ctrl" [desktop.banners.var] filename = "./banners/desktop/banner_var.ts" -pagename = "B23_WMDE_Desktop_00_var" -tracking = "org-00-230501-var" +pagename = "C23_WMDE_Desktop_DE_01_var" +tracking = "org-01-300630-var" diff --git a/src/components/Footer/BannerFooter.vue b/src/components/Footer/BannerFooter.vue index dd439cfff..ccf464813 100644 --- a/src/components/Footer/BannerFooter.vue +++ b/src/components/Footer/BannerFooter.vue @@ -2,15 +2,15 @@ <div class="wmde-banner-footer"> <div class="wmde-banner-footer-bank"> <label class="wmde-banner-footer-bank-item account">{{ $translate('donation-account') }}: - <SelectionInput :value="'Wikimedia'"/> + <SelectionInput :value="'Wikimedia e. V.'"/> </label> <label class="wmde-banner-footer-bank-item bic">BIC: <SelectionInput :value="'BFSWDE33BER'"/> </label> <label class="wmde-banner-footer-bank-item iban">IBAN: <SelectionInput - :value="'DE33 1002 0500 0001 1947 00'" - :focusedValue="'DE33100205000001194700'" + :value="'DE05 1002 0500 0003 2873 00'" + :focusedValue="'DE05100205000003287300'" /> </label> </div> diff --git a/src/components/Footer/FooterAlreadyDonated.vue b/src/components/Footer/FooterAlreadyDonated.vue index 3bce0a683..50e10d49d 100644 --- a/src/components/Footer/FooterAlreadyDonated.vue +++ b/src/components/Footer/FooterAlreadyDonated.vue @@ -5,13 +5,13 @@ <TickIcon :fill="'#5B5B5B'"/> {{ $translate( 'already-donated-open-link' ) }} </a> <label class="wmde-banner-footer-bank-item account">{{ $translate( 'donation-account' ) }}: - <SelectionInput :value="'Wikimedia'"/> + <SelectionInput :value="'Wikimedia e. V.'"/> </label> <label class="wmde-banner-footer-bank-item bic">BIC: <SelectionInput :value="'BFSWDE33BER'"/> </label> <label class="wmde-banner-footer-bank-item iban">IBAN: - <SelectionInput :value="'DE33 1002 0500 0001 1947 00'" :focusedValue="'DE33100205000001194700'"/> + <SelectionInput :value="'DE05 1002 0500 0003 2873 00'" :focusedValue="'DE05100205000003287300'"/> </label> </div> diff --git a/src/themes/UseOfFunds/FundsContent.scss b/src/themes/UseOfFunds/FundsContent.scss index 8e166da83..631cc792c 100644 --- a/src/themes/UseOfFunds/FundsContent.scss +++ b/src/themes/UseOfFunds/FundsContent.scss @@ -26,7 +26,7 @@ $padding-mobile: 16px; margin-top: 1em; } &-content { - font-size: 14px; + font-size: 16px; } &-info-text { margin-bottom: 18px; diff --git a/src/themes/UseOfFunds/FundsDistributionAccordion.scss b/src/themes/UseOfFunds/FundsDistributionAccordion.scss index 11b853153..936bce3f0 100644 --- a/src/themes/UseOfFunds/FundsDistributionAccordion.scss +++ b/src/themes/UseOfFunds/FundsDistributionAccordion.scss @@ -13,7 +13,7 @@ padding: 0; width: 100%; text-align: left; - font-size: 14px; + font-size: 16px; font-weight: bold; line-height: 36px; cursor: pointer; diff --git a/src/themes/UseOfFunds/FundsDistributionInfo.scss b/src/themes/UseOfFunds/FundsDistributionInfo.scss index ca246286b..8da20d687 100644 --- a/src/themes/UseOfFunds/FundsDistributionInfo.scss +++ b/src/themes/UseOfFunds/FundsDistributionInfo.scss @@ -7,7 +7,7 @@ &-text { display: none; - font-size: 14px; + font-size: 16px; margin-bottom: 14px; max-width: 635px; diff --git a/src/tracking/LegacyEventTracking/mapCloseEvent.ts b/src/tracking/LegacyEventTracking/mapCloseEvent.ts index 84ddcb2f3..15f841ef1 100644 --- a/src/tracking/LegacyEventTracking/mapCloseEvent.ts +++ b/src/tracking/LegacyEventTracking/mapCloseEvent.ts @@ -37,5 +37,5 @@ export function mapCloseEvent( event: CloseEvent ): WMDELegacyBannerEvent { return new WMDELegacyBannerEvent( closeSourceToLegacyEventName.get( LegacyCloseSources.FullPageBanner ), 0.1 ); } - return new WMDELegacyBannerEvent( 'banner-closed', 0.1 ); + return new WMDELegacyBannerEvent( 'banner-closed' ); } diff --git a/test/banners/desktop/components/BannerCtrl.spec.ts b/test/banners/desktop/components/BannerCtrl.spec.ts index f66b2d8cb..f5baa5c53 100644 --- a/test/banners/desktop/components/BannerCtrl.spec.ts +++ b/test/banners/desktop/components/BannerCtrl.spec.ts @@ -65,7 +65,7 @@ describe( 'BannerCtrl.vue', () => { await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper ); } ); - test.each( [ + test.skip.each( [ [ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ], [ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ], [ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ], From cc7af161d57b76f299dd18d348e1a7424d7bd4f7 Mon Sep 17 00:00:00 2001 From: Sperling-0 <tanujadoriya@gmail.com> Date: Fri, 30 Jun 2023 17:29:14 +0200 Subject: [PATCH 3/4] Implement VAR for C23_WMDE_Desktop_DE_01 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The headline of the VAR non-slider shows the ℹ️ icon. - The progress bar is removed from the VAR banner while the height of the banners is maintained. - Fix Campaign_info.toml - fixed some old leftover errors in the event_map files - disable some tests related to the address form step for the VAR banner Ticket: https://phabricator.wikimedia.org/T340620 --- .../C23_WMDE_Desktop_DE_00/event_map.ts | 2 +- banners/desktop/components/BannerVar.vue | 42 ++++++------------ banners/desktop/components/MainBanner.vue | 1 - banners/desktop/content/BannerSlides.vue | 17 ++++--- banners/desktop/content/BannerSlidesVar.vue | 44 +++++++++++++++++++ banners/desktop/content/BannerText.vue | 12 ++--- banners/desktop/content/BannerTextVar.vue | 29 ++++++++++++ banners/desktop/event_map.ts | 6 +-- banners/desktop/event_map_var.ts | 20 --------- banners/desktop/form_items.ts | 3 +- banners/desktop/form_items_var.ts | 3 +- banners/desktop/styles/styles.scss | 3 -- banners/desktop/styles/styles_var.scss | 3 -- banners/english/event_map.ts | 2 +- banners/pad_english/event_map.ts | 2 +- campaign_info.toml | 13 +++--- src/components/Footer/BannerFooter.vue | 6 +-- .../Footer/FooterAlreadyDonated.vue | 4 +- .../LegacyEventTracking/mapCloseEvent.ts | 2 +- .../desktop/components/BannerVar.spec.ts | 10 +---- 20 files changed, 124 insertions(+), 100 deletions(-) create mode 100644 banners/desktop/content/BannerSlidesVar.vue create mode 100644 banners/desktop/content/BannerTextVar.vue delete mode 100644 banners/desktop/event_map_var.ts diff --git a/archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts b/archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts index 549a92bf4..29e278e31 100644 --- a/archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts +++ b/archive/desktop/C23_WMDE_Desktop_DE_00/event_map.ts @@ -22,7 +22,7 @@ export default new Map<string, TrackingEventConverterFactory>( [ [ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => { switch ( e.feature ) { case 'UpgradeToYearlyForm': - return new WMDESizeIssueEvent( `submit-${e.customData.optionSelected}`, null, 1 ); + return new WMDESizeIssueEvent( `submit-${e.userChoice}`, null, 1 ); case 'CustomAmount': return new WMDESizeIssueEvent( `submit-different-amount`, null, 1 ); default: diff --git a/banners/desktop/components/BannerVar.vue b/banners/desktop/components/BannerVar.vue index 30855533f..fcd050a43 100644 --- a/banners/desktop/components/BannerVar.vue +++ b/banners/desktop/components/BannerVar.vue @@ -20,12 +20,9 @@ </KeenSlider> </template> - <template #progress> - <ProgressBar amount-to-show-on-right="TARGET"/> - </template> - <template #donation-form="{ formInteraction }: any"> <MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction"> + <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> </template> @@ -38,9 +35,6 @@ <CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> </template> - <template #[FormStepNames.AddressTypeFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> - <AddressTypeForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/> - </template> </MultiStepDonation> </template> @@ -71,25 +65,22 @@ import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/Use import SoftClose from '@src/components/SoftClose/SoftClose.vue'; import MainBanner from './MainBanner.vue'; import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; -import BannerText from '../content/BannerText.vue'; -import BannerSlides from '../content/BannerSlides.vue'; -import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue'; +import BannerText from '../content/BannerTextVar.vue'; +import BannerSlides from '../content/BannerSlidesVar.vue'; import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; import BannerFooter from '@src/components/Footer/BannerFooter.vue'; import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue'; import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue'; +import KeenSlider from '@src/components/Slider/KeenSlider.vue'; import { useFormModel } from '@src/components/composables/useFormModel'; -import { createSubmittableAddressType } from '@src/components/DonationForm/StepControllers/SubmittableAddressType'; import { - createIntermediateMainDonationForm -} from '@src/components/DonationForm/StepControllers/IntermediateMainDonationForm'; + createSubmittableMainDonationForm +} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm'; import { - createIntermediateUpgradeToYearly -} from '@src/components/DonationForm/StepControllers/IntermediateUpgradeToYearly'; -import { createIntermediateCustomAmount } from '@src/components/DonationForm/StepControllers/IntermediateCustomAmount'; -import AddressTypeForm from '@src/components/DonationForm/Forms/AddressTypeForm.vue'; -import KeenSlider from '@src/components/Slider/KeenSlider.vue'; + createSubmittableUpgradeToYearly +} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly'; +import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount'; import { CloseChoices } from '@src/domain/CloseChoices'; import { CloseEvent } from '@src/tracking/events/CloseEvent'; import { TrackingFeatureName } from '@src/tracking/TrackingEvent'; @@ -102,8 +93,7 @@ enum ContentStates { enum FormStepNames { CustomAmountFormStep = 'CustomAmountForm', MainDonationFormStep = 'MainDonationForm', - UpgradeToYearlyFormStep = 'UpgradeToYearlyForm', - AddressTypeFormStep = 'AddressTypeForm' + UpgradeToYearlyFormStep = 'UpgradeToYearlyForm' } interface Props { @@ -116,17 +106,11 @@ const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] ); const isFundsModalVisible = ref<boolean>( false ); const contentState = ref<ContentStates>( ContentStates.Main ); - const formModel = useFormModel(); - const stepControllers = [ - createIntermediateMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep, FormStepNames.AddressTypeFormStep ), - createIntermediateUpgradeToYearly( formModel, - FormStepNames.CustomAmountFormStep, - FormStepNames.AddressTypeFormStep, - FormStepNames.MainDonationFormStep ), - createIntermediateCustomAmount( formModel, FormStepNames.AddressTypeFormStep, FormStepNames.UpgradeToYearlyFormStep ), - createSubmittableAddressType( formModel, FormStepNames.MainDonationFormStep ) + createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ), + createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ), + createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep ) ]; watch( contentState, async () => { diff --git a/banners/desktop/components/MainBanner.vue b/banners/desktop/components/MainBanner.vue index c5619037a..514b897c9 100644 --- a/banners/desktop/components/MainBanner.vue +++ b/banners/desktop/components/MainBanner.vue @@ -5,7 +5,6 @@ <div class="wmde-banner-column-left"> <slot name="banner-text" v-if="onLargeScreen"/> <slot name="banner-slides" v-else :play="slideshowShouldPlay"/> - <slot name="progress"/> </div> <div class="wmde-banner-column-right"> <slot name="donation-form" :form-interaction="onFormInteraction"/> diff --git a/banners/desktop/content/BannerSlides.vue b/banners/desktop/content/BannerSlides.vue index f6dfdc139..f0491402c 100644 --- a/banners/desktop/content/BannerSlides.vue +++ b/banners/desktop/content/BannerSlides.vue @@ -5,22 +5,25 @@ </p> <p> Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! - Am heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia - zu unterstützen. {{campaignDaySentence }} + Am heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu unterstützen. </p> </KeenSliderSlide> <KeenSliderSlide :is-current="currentSlide === 1"> <p> - <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % spenden + <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % spenden nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. - Die durchschnittliche Spende beträgt 22,66 €, doch bereits eine Spende von 5 € hilft uns weiter. </p> </KeenSliderSlide> <KeenSliderSlide :is-current="currentSlide === 2"> <p> - 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! + Die durchschnittliche Spende beträgt 22,25 €, doch bereits eine Spende von 5 € hilft uns weiter. Hat + Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? + </p> + </KeenSliderSlide> + <KeenSliderSlide :is-current="currentSlide === 3"> + <p> + Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank! </p> </KeenSliderSlide> </template> @@ -37,5 +40,5 @@ interface Props { defineProps<Props>(); -const { currentDayName, campaignDaySentence, visitorsVsDonorsSentence }: DynamicContent = inject( 'dynamicCampaignText' ); +const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' ); </script> diff --git a/banners/desktop/content/BannerSlidesVar.vue b/banners/desktop/content/BannerSlidesVar.vue new file mode 100644 index 000000000..f4b13e8f7 --- /dev/null +++ b/banners/desktop/content/BannerSlidesVar.vue @@ -0,0 +1,44 @@ +<template> + <KeenSliderSlide :is-current="currentSlide === 0"> + <p class="headline"> + <InfoIcon fill="#990a00"/> <strong> An alle, die Wikipedia in Deutschland nutzen </strong> + </p> + <p> + Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! + </p> + </KeenSliderSlide> + <KeenSliderSlide :is-current="currentSlide === 1"> + <p> + Am heutigen {{ currentDayName }} bitten wir Sie, sich bewusst zu machen, wie häufig Sie Wikipedia in diesem + Jahr genutzt haben, wie groß der Nutzen für Sie war und ob Sie jetzt etwas zurückgeben können. + </p> + </KeenSliderSlide> + <KeenSliderSlide :is-current="currentSlide === 2"> + <p> + <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % spenden + nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia nützlich + finden. Die durchschnittliche Spende beträgt 22,25 €, doch bereits eine Spende von 5 € hilft uns weiter. + </p> + </KeenSliderSlide> + <KeenSliderSlide :is-current="currentSlide === 3"> + <p> + 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! + </p> + </KeenSliderSlide> +</template> + +<script setup lang="ts"> +import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; +import { inject } from 'vue'; +import InfoIcon from '@src/components/Icons/InfoIcon.vue'; +import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue'; + +interface Props { + currentSlide: number +} + +defineProps<Props>(); + +const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' ); +</script> diff --git a/banners/desktop/content/BannerText.vue b/banners/desktop/content/BannerText.vue index 3e12e5f64..d07c055fa 100644 --- a/banners/desktop/content/BannerText.vue +++ b/banners/desktop/content/BannerText.vue @@ -2,16 +2,16 @@ <div class="wmde-banner-message"> <div> <p> - <InfoIcon/> + <InfoIcon fill="#990a00"/> <strong> An alle, die Wikipedia in Deutschland nutzen </strong> </p> <p> Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }} bitten wir Sie bescheiden, die Unabhängigkeit von Wikipedia zu - unterstützen. {{ campaignDaySentence }} - <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % - spenden nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende - beträgt 22,66 €, doch bereits eine Spende von 5 € hilft uns weiter. Hat Wikipedia Ihnen in + unterstützen. + <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % spenden + nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende + beträgt 22,25 €, doch bereits eine Spende von 5 € hilft 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! </p> @@ -24,6 +24,6 @@ import { inject } from 'vue'; import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; import InfoIcon from '@src/components/Icons/InfoIcon.vue'; -const { currentDayName, campaignDaySentence, visitorsVsDonorsSentence }: DynamicContent = inject( 'dynamicCampaignText' ); +const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' ); </script> diff --git a/banners/desktop/content/BannerTextVar.vue b/banners/desktop/content/BannerTextVar.vue new file mode 100644 index 000000000..9a5412eb8 --- /dev/null +++ b/banners/desktop/content/BannerTextVar.vue @@ -0,0 +1,29 @@ +<template> + <div class="wmde-banner-message"> + <div> + <p> + <InfoIcon fill="#990a00"/> + <strong> An alle, die Wikipedia in Deutschland nutzen </strong> + </p> + <p> + Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen + {{ currentDayName }} bitten wir Sie, sich bewusst zu machen, wie häufig Sie Wikipedia in diesem Jahr + genutzt haben, wie groß der Nutzen für Sie war und ob Sie jetzt etwas zurückgeben können. + <span class="wmde-banner-text-animated-highlight">Millionen Menschen nutzen Wikipedia, aber 99 % + spenden nicht – sie übergehen diesen Aufruf.</span> Die meisten Menschen spenden, weil sie Wikipedia + nützlich finden. Die durchschnittliche Spende beträgt 22,25 €, doch bereits eine Spende von 5 € hilft + 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! + </p> + </div> + </div> +</template> + +<script setup lang="ts"> +import { inject } from 'vue'; +import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent'; +import InfoIcon from '@src/components/Icons/InfoIcon.vue'; + +const { currentDayName }: DynamicContent = inject( 'dynamicCampaignText' ); + +</script> diff --git a/banners/desktop/event_map.ts b/banners/desktop/event_map.ts index 549a92bf4..a090330ce 100644 --- a/banners/desktop/event_map.ts +++ b/banners/desktop/event_map.ts @@ -16,14 +16,14 @@ export default new Map<string, TrackingEventConverterFactory>( [ [ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ], [ CustomAmountChangedEvent.EVENT_NAME, ( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( e.customData.amountChange + '-amount', 1 ) + 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.customData.optionSelected}`, null, 1 ); - case 'CustomAmount': + 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 ); diff --git a/banners/desktop/event_map_var.ts b/banners/desktop/event_map_var.ts deleted file mode 100644 index bf7a08ae7..000000000 --- a/banners/desktop/event_map_var.ts +++ /dev/null @@ -1,20 +0,0 @@ -import CtrlEventMap from './event_map'; -import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent'; -import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue'; -import { UpgradeToYearlyEvent } from '@src/tracking/events/UpgradeToYearlyEvent'; -import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent'; - -// We "extend" the event map here because the original one is still in flux, and we want to avoid duplication -// At the next reset of this test, you should either throw away this map or combine the two maps in one file -CtrlEventMap.set( BannerSubmitEvent.EVENT_NAME, - (): WMDESizeIssueEvent => { - return new WMDESizeIssueEvent( `submit`, null, 1 ); - } -); -CtrlEventMap.set( UpgradeToYearlyEvent.EVENT_NAME, - ( e: BannerSubmitEvent ): WMDELegacyBannerEvent => { - return new WMDELegacyBannerEvent( e.customData.optionSelected, 1 ); - } -); - -export default CtrlEventMap; diff --git a/banners/desktop/form_items.ts b/banners/desktop/form_items.ts index ccf13b3f5..ff4e782de 100644 --- a/banners/desktop/form_items.ts +++ b/banners/desktop/form_items.ts @@ -17,7 +17,6 @@ export function createFormItems( translations: Translator, amountFormatter: Numb .setPaymentMethods( PaymentMethods.PAYPAL, PaymentMethods.BANK_TRANSFER, - PaymentMethods.DIRECT_DEBIT, - PaymentMethods.CREDIT_CARD + PaymentMethods.DIRECT_DEBIT ).getItems(); } diff --git a/banners/desktop/form_items_var.ts b/banners/desktop/form_items_var.ts index 3e82447ff..ae3a02212 100644 --- a/banners/desktop/form_items_var.ts +++ b/banners/desktop/form_items_var.ts @@ -18,8 +18,7 @@ export function createFormItems( translations: Translator, amountFormatter: Numb .setPaymentMethods( PaymentMethods.PAYPAL, PaymentMethods.BANK_TRANSFER, - PaymentMethods.DIRECT_DEBIT, - PaymentMethods.CREDIT_CARD + PaymentMethods.DIRECT_DEBIT ) .setAddressTypes( AddressTypes.FULL, diff --git a/banners/desktop/styles/styles.scss b/banners/desktop/styles/styles.scss index be431d270..1a74e5de6 100644 --- a/banners/desktop/styles/styles.scss +++ b/banners/desktop/styles/styles.scss @@ -8,9 +8,6 @@ @use 'src/themes/UseOfFunds/UseOfFunds'; @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'; diff --git a/banners/desktop/styles/styles_var.scss b/banners/desktop/styles/styles_var.scss index 9808d1984..0d8326c1f 100644 --- a/banners/desktop/styles/styles_var.scss +++ b/banners/desktop/styles/styles_var.scss @@ -8,9 +8,6 @@ @use 'src/themes/UseOfFunds/UseOfFunds'; @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'; diff --git a/banners/english/event_map.ts b/banners/english/event_map.ts index bfe0a8259..f22b07367 100644 --- a/banners/english/event_map.ts +++ b/banners/english/event_map.ts @@ -14,7 +14,7 @@ export default new Map<string, TrackingEventConverterFactory>( [ [ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ], [ CustomAmountChangedEvent.EVENT_NAME, ( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( e.customData.amountChange + '-amount', 1 ) + new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 ) ], [ NotShownEvent.EVENT_NAME, mapNotShownEvent ] diff --git a/banners/pad_english/event_map.ts b/banners/pad_english/event_map.ts index cd21bdcc3..d41398d8a 100644 --- a/banners/pad_english/event_map.ts +++ b/banners/pad_english/event_map.ts @@ -14,6 +14,6 @@ export default new Map<string, TrackingEventConverterFactory>( [ [ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ], [ CustomAmountChangedEvent.EVENT_NAME, ( e: CustomAmountChangedEvent ): WMDELegacyBannerEvent => - new WMDELegacyBannerEvent( e.customData.amountChange + '-amount', 1 ) + new WMDELegacyBannerEvent( e.userChoice + '-amount', 1 ) ] ] ); diff --git a/campaign_info.toml b/campaign_info.toml index 9a2a0a2a5..9435b8b58 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -7,8 +7,8 @@ name = "Desktop" icon = "desktop" campaign = "C23_WMDE_Desktop_DE_01" -description = "3 step form vs 4 step form" -campaign_tracking = "01-ba-300630" +description = "Text change: Wikipedia's usefulness" +campaign_tracking = "01-ba-230705" 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,14 +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 = "C23_WMDE_Desktop_DE_01_ctrl" -tracking = "org-01-300630-ctrl" +pagename = "B23_WMDE_Desktop_DE_01_ctrl" +tracking = "org-01-230705-ctrl" [desktop.banners.var] filename = "./banners/desktop/banner_var.ts" -pagename = "C23_WMDE_Desktop_DE_01_var" -tracking = "org-01-300630-var" - +pagename = "B23_WMDE_Desktop_DE_01_var" +tracking = "org-01-230705-var" [mobile] diff --git a/src/components/Footer/BannerFooter.vue b/src/components/Footer/BannerFooter.vue index ccf464813..488fee883 100644 --- a/src/components/Footer/BannerFooter.vue +++ b/src/components/Footer/BannerFooter.vue @@ -2,15 +2,15 @@ <div class="wmde-banner-footer"> <div class="wmde-banner-footer-bank"> <label class="wmde-banner-footer-bank-item account">{{ $translate('donation-account') }}: - <SelectionInput :value="'Wikimedia e. V.'"/> + <SelectionInput :value="'Wikimedia'"/> </label> <label class="wmde-banner-footer-bank-item bic">BIC: <SelectionInput :value="'BFSWDE33BER'"/> </label> <label class="wmde-banner-footer-bank-item iban">IBAN: <SelectionInput - :value="'DE05 1002 0500 0003 2873 00'" - :focusedValue="'DE05100205000003287300'" + :value="'DE09 3702 0500 0003 2873 00'" + :focusedValue="'DE09370205000003287300'" /> </label> </div> diff --git a/src/components/Footer/FooterAlreadyDonated.vue b/src/components/Footer/FooterAlreadyDonated.vue index 50e10d49d..6f0d6137a 100644 --- a/src/components/Footer/FooterAlreadyDonated.vue +++ b/src/components/Footer/FooterAlreadyDonated.vue @@ -5,13 +5,13 @@ <TickIcon :fill="'#5B5B5B'"/> {{ $translate( 'already-donated-open-link' ) }} </a> <label class="wmde-banner-footer-bank-item account">{{ $translate( 'donation-account' ) }}: - <SelectionInput :value="'Wikimedia e. V.'"/> + <SelectionInput :value="'Wikimedia'"/> </label> <label class="wmde-banner-footer-bank-item bic">BIC: <SelectionInput :value="'BFSWDE33BER'"/> </label> <label class="wmde-banner-footer-bank-item iban">IBAN: - <SelectionInput :value="'DE05 1002 0500 0003 2873 00'" :focusedValue="'DE05100205000003287300'"/> + <SelectionInput :value="'DE09 3702 0500 0003 2873 00'" :focusedValue="'DE09370205000003287300'"/> </label> </div> diff --git a/src/tracking/LegacyEventTracking/mapCloseEvent.ts b/src/tracking/LegacyEventTracking/mapCloseEvent.ts index 15f841ef1..84ddcb2f3 100644 --- a/src/tracking/LegacyEventTracking/mapCloseEvent.ts +++ b/src/tracking/LegacyEventTracking/mapCloseEvent.ts @@ -37,5 +37,5 @@ export function mapCloseEvent( event: CloseEvent ): WMDELegacyBannerEvent { return new WMDELegacyBannerEvent( closeSourceToLegacyEventName.get( LegacyCloseSources.FullPageBanner ), 0.1 ); } - return new WMDELegacyBannerEvent( 'banner-closed' ); + return new WMDELegacyBannerEvent( 'banner-closed', 0.1 ); } diff --git a/test/banners/desktop/components/BannerVar.spec.ts b/test/banners/desktop/components/BannerVar.spec.ts index 012c10ada..000fa154f 100644 --- a/test/banners/desktop/components/BannerVar.spec.ts +++ b/test/banners/desktop/components/BannerVar.spec.ts @@ -65,7 +65,7 @@ describe( 'BannerVar.vue', () => { await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper ); } ); - test.each( [ + test.skip.each( [ [ 'expectHidesAnimatedVisitorsVsDonorsSentenceInMessage' ], [ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ], [ 'expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow' ], @@ -77,14 +77,8 @@ describe( 'BannerVar.vue', () => { describe( 'Donation Form Happy Paths', () => { test.each( [ - [ 'expectMainDonationFormGoesToAddressFormWhenSofortIsSelected' ], - [ 'expectMainDonationFormGoesToAddressFormWhenYearlyIsSelected' ], [ 'expectMainDonationFormGoesToUpgrade' ], - [ 'expectUpgradeToYearlyFormGoesToAddressTypeOnUpgrade' ], - [ 'expectUpgradeToYearlyFormGoesToAddressTypeOnDontUpgrade' ], - [ 'expectUpgradeToYearlyFormGoesToCustomAmount' ], - [ 'expectCustomAmountGoesToAddressFormOnSubmit' ], - [ 'expectAddressFormSubmits' ] + [ 'expectUpgradeToYearlyFormGoesToCustomAmount' ] ] )( '%s', async ( testName: string ) => { await donationFormFeatures[ testName ]( getWrapper() ); } ); From 9846a736ed7c9aeac60a3f5298d25d156234c774 Mon Sep 17 00:00:00 2001 From: Corinna Hillebrand <corinna.hillebrand@wikimedia.de> Date: Thu, 6 Jul 2023 12:20:56 +0200 Subject: [PATCH 4/4] Restart campaign with _2 naming --- campaign_info.toml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/campaign_info.toml b/campaign_info.toml index 9435b8b58..47e1af3bc 100644 --- a/campaign_info.toml +++ b/campaign_info.toml @@ -6,9 +6,9 @@ [desktop] name = "Desktop" icon = "desktop" -campaign = "C23_WMDE_Desktop_DE_01" +campaign = "C23_WMDE_Desktop_DE_01_2" description = "Text change: Wikipedia's usefulness" -campaign_tracking = "01-ba-230705" +campaign_tracking = "01-ba-230706" 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_01_ctrl" -tracking = "org-01-230705-ctrl" +pagename = "B23_WMDE_Desktop_DE_01_2_ctrl" +tracking = "org-01-230706-ctrl" [desktop.banners.var] filename = "./banners/desktop/banner_var.ts" -pagename = "B23_WMDE_Desktop_DE_01_var" -tracking = "org-01-230705-var" +pagename = "B23_WMDE_Desktop_DE_01_2_var" +tracking = "org-01-230706-var" [mobile]