-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement VAR for C24_WMDE_iPad_DE_01
- The headline of the variant banner is changed - It has the progress bar - It has the campaign day sentence - It has the visitors-vs-donors sentence Ticket: https://phabricator.wikimedia.org/T376593
- Loading branch information
1 parent
15124b1
commit 5cdbbad
Showing
6 changed files
with
371 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
170 changes: 170 additions & 0 deletions
170
banners/pad/C24_WMDE_iPad_DE_01/components/BannerVar.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,170 @@ | ||
<template> | ||
<div class="wmde-banner-wrapper" :class="contentState"> | ||
<MainBanner | ||
@close="onCloseMain" | ||
@form-interaction="onFormInteraction" | ||
v-if="contentState === ContentStates.Main" | ||
:bannerState="bannerState" | ||
> | ||
<template #banner-slides="{ play }: any"> | ||
<div class="wmde-banner-content-headline"> | ||
<span class="wmde-banner-content-headline-text">Ist Ihnen Wikipedia 15 € wert?</span> | ||
</div> | ||
<KeenSlider :with-navigation="true" :play="play" :interval="5000"> | ||
|
||
<template #slides="{ currentSlide }: any"> | ||
<BannerSlides :currentSlide="currentSlide"/> | ||
</template> | ||
|
||
<template #left-icon> | ||
<ChevronLeftIcon :fill="'#990a00'"/> | ||
</template> | ||
|
||
<template #right-icon> | ||
<ChevronRightIcon :fill="'#990a00'"/> | ||
</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 #label-payment-ppl> | ||
<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span> | ||
</template> | ||
|
||
<template #label-payment-bez> | ||
<span class="wmde-banner-select-group-label with-logos sepa"><SepaLogo/></span> | ||
</template> | ||
|
||
<template #label-payment-mcp> | ||
<span class="wmde-banner-select-group-label with-logos credit-cards"> | ||
<VisaLogo/> | ||
<MastercardLogo/> | ||
</span> | ||
</template> | ||
|
||
</MainDonationForm> | ||
</template> | ||
|
||
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> | ||
<UpgradeToYearlyButtonForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"> | ||
<template #back> | ||
<ChevronLeftIcon/> | ||
</template> | ||
</UpgradeToYearlyButtonForm> | ||
</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 { nextTick, 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 BannerSlides from '../content/BannerSlidesVar.vue'; | ||
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue'; | ||
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; | ||
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; | ||
import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue'; | ||
import KeenSlider from '@src/components/Slider/KeenSlider.vue'; | ||
import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue'; | ||
import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.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 { CloseChoices } from '@src/domain/CloseChoices'; | ||
import { CloseEvent } from '@src/tracking/events/CloseEvent'; | ||
import { TrackingFeatureName } from '@src/tracking/TrackingEvent'; | ||
import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue'; | ||
import SepaLogo from '@src/components/PaymentLogos/SepaLogo.vue'; | ||
import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue'; | ||
import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue'; | ||
import BannerFooter from '@src/components/Footer/BannerFooter.vue'; | ||
enum ContentStates { | ||
Main = 'wmde-banner-wrapper--main', | ||
SoftClosing = 'wmde-banner-wrapper--soft-closing' | ||
} | ||
enum FormStepNames { | ||
MainDonationFormStep = 'MainDonationForm', | ||
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm' | ||
} | ||
interface Props { | ||
bannerState: BannerStates; | ||
useOfFundsContent: useOfFundsContentInterface; | ||
remainingImpressions: number; | ||
} | ||
const props = 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.MainDonationFormStep, FormStepNames.MainDonationFormStep ) | ||
]; | ||
watch( contentState, async () => { | ||
emit( 'bannerContentChanged' ); | ||
} ); | ||
function onFormInteraction(): void { | ||
nextTick( () => { | ||
emit( 'bannerContentChanged' ); | ||
} ); | ||
} | ||
function onCloseMain(): void { | ||
if ( props.remainingImpressions > 0 ) { | ||
contentState.value = ContentStates.SoftClosing; | ||
} else { | ||
onClose( 'MainBanner', CloseChoices.Close ); | ||
} | ||
} | ||
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void { | ||
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) ); | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<template> | ||
<KeenSliderSlide :is-current="currentSlide === 0"> | ||
<p> | ||
<InfoIcon/> | ||
An alle, die Wikipedia in Deutschland nutzen: Vielleicht kommen wir gerade ungelegen, | ||
aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen {{ currentDayName }}, den {{ currentDate }}, bitten wir Sie | ||
bescheiden, die Unabhängigkeit von Wikipedia zu sichern. | ||
</p> | ||
</KeenSliderSlide> | ||
<KeenSliderSlide :is-current="currentSlide === 1"> | ||
<p> | ||
{{ campaignDaySentence }} | ||
Insgesamt spenden 99% nichts – sie übergehen diesen Aufruf. Wikipedia wird | ||
durch Spenden von durchschnittlich 22,25 € finanziert. | ||
</p> | ||
</KeenSliderSlide> | ||
<KeenSliderSlide :is-current="currentSlide === 2"> | ||
<p> | ||
Doch schon mit einer Spende von 5 € kann Wikipedia sich auch in Zukunft erfolgreich | ||
entwickeln. <AnimatedText :content="visitorsVsDonorsSentence"/> | ||
</p> | ||
</KeenSliderSlide> | ||
<KeenSliderSlide :is-current="currentSlide === 3"> | ||
<p>Die meisten Menschen spenden, weil sie Wikipedia nützlich finden. Hat Wikipedia Ihnen in diesem | ||
Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann nehmen Sie sich doch bitte eine Minute | ||
Zeit 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'; | ||
import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue'; | ||
interface Props { | ||
currentSlide: number | ||
} | ||
defineProps<Props>(); | ||
const { | ||
currentDayName, | ||
currentDate, | ||
campaignDaySentence, | ||
visitorsVsDonorsSentence | ||
}: DynamicContent = inject( 'dynamicCampaignText' ); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import DynamicCampaignText from '@src/utils/DynamicContent/messages/DynamicCampaignText.de'; | ||
import { TranslationMessages } from '@src/Translator'; | ||
import UpgradeToYearly from '@src/components/DonationForm/Forms/messages/UpgradeToYearly.de'; | ||
import SoftClose from '@src/components/SoftClose/messages/SoftClose.de'; | ||
import Footer from '@src/components/Footer/messages/Footer.de'; | ||
import MainDonationForm from '@src/components/DonationForm/Forms/messages/MainDonationForm.de'; | ||
import AddressFormDe from '@src/components/DonationForm/Forms/messages/AddressForm.de'; | ||
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de'; | ||
|
||
const messages: TranslationMessages = { | ||
...DynamicCampaignText, | ||
...UpgradeToYearly, | ||
...SoftClose, | ||
...Footer, | ||
...MainDonationForm, | ||
...AddressFormDe, | ||
...AlreadyDonatedModal, | ||
'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf die Unterstützung von Menschen wie Ihnen angewiesen. ' + | ||
'Jährliche Spenden helfen uns nachhaltig und ermöglichen langfristige Weiterentwicklungen.</p>' + | ||
'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>' | ||
}; | ||
|
||
export default messages; |
Oops, something went wrong.