Skip to content

Commit

Permalink
Merge pull request #606 from wmde/C24_WMDE_Desktop_EN_03
Browse files Browse the repository at this point in the history 
C24_WMDE_Desktop_EN_03
  • Loading branch information
@moiikana
moiikana authored Nov 5, 2024
2 parents ad6d605 + 4cc6f9f commit 8e51d31
Show file tree
Hide file tree
Showing 29 changed files with 1,618 additions and 24 deletions.
73 changes: 73 additions & 0 deletions banners/english/C24_WMDE_Desktop_EN_03/banner_ctrl.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { createVueApp } from '@src/createVueApp';

import './styles/styles.scss';

import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
import Banner from './components/BannerCtrl.vue';
import FallbackBanner from './components/FallbackBanner.vue';
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
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 { Locales } from '@src/domain/Locales';

// Locale-specific imports
import messages from './messages';
import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';

// Channel specific form setup
import { createFormItems } from './form_items';
import { createFormActions } from '@src/createFormActions';
import eventMappings from './event_map';
import { createFallbackDonationURL } from '@src/createFallbackDonationURL';

const localeFactory = new LocaleFactoryEn();
const translator = new Translator( messages );
const mediaWiki = new WindowMediaWiki();
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );

const app = createVueApp( BannerConductor, {
page,
bannerConfig: {
delay: runtimeEnvironment.getBannerDelay( 7500 ),
transitionDuration: 1000
},
bannerProps: {
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'english' ) ),
donationLink: createFallbackDonationURL( page.getTracking(), impressionCount, { locale: Locales.EN } )
},
resizeHandler: new WindowResizeHandler(),
banner: Banner,
fallbackBanner: FallbackBanner,
minWidthForMainBanner: 800,
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, { locale: Locales.EN, afo: '1' } ) );
app.provide( 'tracker', tracker );

app.mount( page.getBannerContainer() );
73 changes: 73 additions & 0 deletions banners/english/C24_WMDE_Desktop_EN_03/banner_var.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { createVueApp } from '@src/createVueApp';

import './styles/styles_var.scss';

import BannerConductor from '@src/components/BannerConductor/FallbackBannerConductor.vue';
import Banner from './components/BannerVar.vue';
import FallbackBanner from './components/FallbackBanner.vue';
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
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 { Locales } from '@src/domain/Locales';

// Locale-specific imports
import messages from './messages';
import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn';

// Channel specific form setup
import { createFormItems } from './form_items';
import { createFormActions } from '@src/createFormActions';
import eventMappings from './event_map_var';
import { createFallbackDonationURL } from '@src/createFallbackDonationURL';

const localeFactory = new LocaleFactoryEn();
const translator = new Translator( messages );
const mediaWiki = new WindowMediaWiki();
const page = new PageWPORG( mediaWiki, ( new SkinFactory( mediaWiki ) ).getSkin(), new WindowSizeIssueChecker( 400 ) );
const runtimeEnvironment = new UrlRuntimeEnvironment( window.location );
const impressionCount = new LocalImpressionCount( page.getTracking().keyword, runtimeEnvironment );
const tracker = new LegacyTrackerWPORG( mediaWiki, page.getTracking().keyword, eventMappings, runtimeEnvironment );

const app = createVueApp( BannerConductor, {
page,
bannerConfig: {
delay: runtimeEnvironment.getBannerDelay( 7500 ),
transitionDuration: 1000
},
bannerProps: {
useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'english' ) ),
donationLink: createFallbackDonationURL( page.getTracking(), impressionCount, { locale: Locales.EN } )
},
resizeHandler: new WindowResizeHandler(),
banner: Banner,
fallbackBanner: FallbackBanner,
minWidthForMainBanner: 800,
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, { locale: Locales.EN, afo: '1' } ) );
app.provide( 'tracker', tracker );

app.mount( page.getBannerContainer() );
158 changes: 158 additions & 0 deletions banners/english/C24_WMDE_Desktop_EN_03/components/BannerCtrl.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<template>
<div class="wmde-banner-wrapper" :class="contentState">
<MainBanner
@close="onCloseMain"
@form-interaction="$emit( 'bannerContentChanged' )"
:banner-state="bannerState"
v-if="contentState === ContentStates.Main"
>
<template #banner-text>
<BannerText/>
</template>

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

<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 #label-payment-ppl>
<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></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"
:is-current="isCurrent"
:show-manual-upgrade-option="false"
@submit="submit"
@previous="previous"
/>
</template>

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

<SoftClose
v-if="contentState === ContentStates.SoftClosing"
:show-close-icon="true"
@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"
>
<template #infographic>
<WMDEFundsForwardingEN/>
</template>
</FundsModal>
</div>
</template>

<script setup lang="ts">
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
import { ref, watch } from 'vue';
import MainBanner from './MainBanner.vue';
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue';
import BannerSlides from '../content/BannerSlides.vue';
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
import BannerText from '../content/BannerText.vue';
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.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 VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
import ProgressBar from '@src/components/ProgressBar/ProgressBarAlternative.vue';
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
import WMDEFundsForwardingEN from '@src/components/UseOfFunds/Infographics/WMDEFundsForwardingEN.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', 'maybeLater', '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 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>
Loading

0 comments on commit 8e51d31

Please sign in to comment.