Skip to content

Commit

Permalink
Prepare Var for C24_WMDE_Desktop_DE_20
Browse files Browse the repository at this point in the history
  • Loading branch information
Sperling-0 committed Dec 12, 2024
1 parent b55b0fa commit 0a28327
Show file tree
Hide file tree
Showing 9 changed files with 789 additions and 4 deletions.
8 changes: 4 additions & 4 deletions banners/desktop/C24_WMDE_Desktop_DE_20/banner_var.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { createVueApp } from '@src/createVueApp';

import './styles/styles.scss';
import './styles/styles_var.scss';

import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
import Banner from './components/BannerCtrl.vue';
import FallbackBanner from './components/FallbackBanner.vue';
import Banner from './components/BannerVar.vue';
import FallbackBanner from './components/FallbackBannerVar.vue';
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
import PageWPORG from '@src/page/PageWPORG';
Expand All @@ -19,7 +19,7 @@ import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
import eventMappings from './event_map';
import { createFallbackDonationURL } from '@src/createFallbackDonationURL';
import { LocalStorageCloseTracker } from '@src/utils/LocalCloseTracker';
import messages from './messages';
import messages from './messages_var';
import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
import { createFormItems } from './form_items';
import { createFormActions } from '@src/createFormActions';
Expand Down
180 changes: 180 additions & 0 deletions banners/desktop/C24_WMDE_Desktop_DE_20/components/BannerVar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<template>
<div class="wmde-banner-wrapper" :class="contentState">
<MainBanner
@form-interaction="$emit( 'bannerContentChanged' )"
v-if="contentState === ContentStates.Main"
:bannerState="bannerState"
>
<template #close-button>
<ButtonClose @close="onCloseMain"/>
</template>

<template #banner-title>
<BannerTitle/>
</template>

<template #banner-text>
<BannerText/>
</template>

<template #banner-slides="{ play }: any">
<KeenSlider :with-navigation="true" :play="play" :interval="10000" :delay="2000" :navigation-color="'#ffffff'">

<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"
:submit-callback="onSubmit"
>

<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">
<UpgradeToYearlyButtonForm :page-index="pageIndex" :show-manual-upgrade-option="false" @submit="submit" :is-current="isCurrent" @previous="previous"/>
</template>

</MultiStepDonation>
</template>

<template #footer>
<FooterAlreadyDonated
@showFundsModal="onModalOpened"
@clickedAlreadyDonatedLink="onClose( 'AlreadyDonated', CloseChoices.AlreadyDonated )"
/>
</template>

</MainBanner>

<SoftClose
v-if="contentState === ContentStates.SoftClosing"
:show-close-icon="true"
@close="() => onClose( 'SoftClose', CloseChoices.Close )"
@maybeLater="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
@timeOutClose="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
@maybeLater7Days="() => onClose('SoftClose', CloseChoices.Close)"
/>

<FundsModal
:content="useOfFundsContent"
:is-funds-modal-visible="isFundsModalVisible"
@hideFundsModal="onHideFundsModal"
>
<template #infographic>
<WMDEFundsForwardingDE/>
</template>
</FundsModal>
</div>
</template>

<script setup lang="ts">
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
import { inject, ref, watch } from 'vue';
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
import MainBanner from './MainBannerVar.vue';
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
import BannerText from '../content/BannerText.vue';
import BannerSlides from '../content/BannerSlides.vue';
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.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 { CloseChoices } from '@src/domain/CloseChoices';
import { CloseEvent } from '@src/tracking/events/CloseEvent';
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
import { LocalCloseTracker } from '@src/utils/LocalCloseTracker';
import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
import { Tracker } from '@src/tracking/Tracker';
import { useBannerHider } from '@src/components/composables/useBannerHider';
import BannerTitle from '@banners/desktop/C24_WMDE_Desktop_DE_15/content/BannerTitle.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;
localCloseTracker: LocalCloseTracker;
}
const props = defineProps<Props>();
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged', 'modalOpened', 'modalClosed' ] );
useBannerHider( 800, emit );
const tracker = inject<Tracker>( 'tracker' );
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' );
} );
const onSubmit = (): void => {
// special callback function: asking for previous close choices
const closeChoice = props.localCloseTracker.getItem();
if ( closeChoice !== '' ) {
tracker.trackEvent( new BannerSubmitOnReturnEvent( closeChoice ) );
}
};
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 ) );
}
function onHideFundsModal(): void {
isFundsModalVisible.value = false;
emit( 'modalClosed' );
}
function onModalOpened(): void {
isFundsModalVisible.value = true;
emit( 'modalOpened' );
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<template>
<div class="wmde-banner-fallback">
<ButtonClose @close="onClose"/>

<div class="wmde-banner-fallback-small" v-if="!onLargeScreen">
<KeenSlider
:with-pagination="false"
:play="slideshowShouldPlay"
:interval="10000"
:delay="2000"
@slideChanged="onSlideChange"
>
<template #slides="{ currentSlide }: any">
<FallbackSlides :current-slide="currentSlide"/>
</template>

<template #left-icon>
<ChevronLeftIcon :fill="'#990a00'"/>
</template>

<template #right-icon>
<ChevronRightIcon :fill="'#990a00'"/>
</template>
</KeenSlider>

<FallbackButton @buttonClicked="onSubmit"/>

<SmallFooter :slide-index="slideIndex" :slide-count="slideCount" @useOfFundsButtonClicked="isFundsModalVisible = true"/>
</div>

<div class="wmde-banner-fallback-large" v-if="onLargeScreen">
<div class="wmde-banner-fallback-message">
<FallbackText/>
<ProgressBarAlternative amount-to-show-on-right="TARGET"/>
</div>

<LargeFooter @useOfFundsButtonClicked="isFundsModalVisible = true" @submitButtonClicked="onSubmit"/>
</div>

<FundsModal
:content="useOfFundsContent"
:is-funds-modal-visible="isFundsModalVisible"
@hideFundsModal="isFundsModalVisible = false"
>
<template #infographic>
<WMDEFundsForwardingDE/>
</template>
</FundsModal>

</div>
</template>

<script setup lang="ts">
import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
import { CloseChoices } from '@src/domain/CloseChoices';
import { CloseEvent } from '@src/tracking/events/CloseEvent';
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
import { computed, inject, ref } from 'vue';
import { useDisplaySwitch } from '@src/components/composables/useDisplaySwitch';
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
import FallbackSlides from '../content/FallbackSlides.vue';
import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
import FallbackText from '../content/FallbackText.vue';
import FallbackButton from '@src/components/FallbackBanner/FallbackButton.vue';
import SmallFooter from '@src/components/FallbackBanner/SmallFooter.vue';
import LargeFooter from '@src/components/FallbackBanner/LargeFooter.vue';
import { Tracker } from '@src/tracking/Tracker';
import { FallbackBannerSubmitEvent } from '@src/tracking/events/FallbackBannerSubmitEvent';
import WMDEFundsForwardingDE from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingDE.vue';
import ProgressBarAlternative from '@src/components/ProgressBar/ProgressBarAlternative.vue';
interface Props {
bannerState: BannerStates;
useOfFundsContent: useOfFundsContentInterface;
donationLink: string;
}
const props = defineProps<Props>();
const emit = defineEmits( [ 'bannerClosed' ] );
const tracker = inject<Tracker>( 'tracker' );
const slideIndex = ref<number>( 0 );
const slideCount = ref<number>( 0 );
const slideShowStopped = ref<boolean>( false );
const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
const isFundsModalVisible = ref<boolean>( false );
const onLargeScreen = useDisplaySwitch( 799 );
function onClose(): void {
emit( 'bannerClosed', new CloseEvent( 'FallbackBanner', CloseChoices.Close ) );
}
function onSlideChange( newIndex: number, newSlideCount: number ): void {
slideIndex.value = newIndex;
slideCount.value = newSlideCount;
}
function onSubmit(): void {
tracker.trackEvent( new FallbackBannerSubmitEvent() );
window.location.href = props.donationLink;
}
</script>
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<div class="wmde-banner-main">
<slot name="close-button"/>
<div class="wmde-banner-content">
<div class="wmde-banner-column-left">
<div class="wmde-banner-message-container">
<slot name="banner-title"/>
<slot name="banner-text" v-if="onLargeScreen"/>
<slot name="banner-slides" v-else :play="slideshowShouldPlay"/>
</div>
<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 { 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( [ '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>
33 changes: 33 additions & 0 deletions banners/desktop/C24_WMDE_Desktop_DE_20/messages_var.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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 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';
import FallbackBanner from '@src/components/FallbackBanner/messages/FallbackBanner.de';
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/translations/AlreadyDonatedModal.de';
import SoftCloseDe from '@src/components/SoftClose/messages/SoftClose.de';

const messages: TranslationMessages = {
...CustomAmountFormDe,
...DynamicCampaignTextDe,
...UpgradeToYearlyDe,
...AddressFormDe,
...FooterDe,
...MainDonationFormDe,
...AlreadyDonatedModal,
...FallbackBanner,
...SoftCloseDe,
'already-donated-go-away-button': 'Im Moment nicht',
'soft-close-prompt': 'Dürfen wir später nochmal fragen?',
'upgrade-to-yearly-copy': `<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns besonders und ermöglichen langfristige Weiterentwicklungen.</p>
<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>`,
'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',
'upgrade-to-yearly-header': 'Bitte spenden Sie {{amount}} jährlich!'
};

export default messages;
Loading

0 comments on commit 0a28327

Please sign in to comment.