-
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.
Merge pull request #654 from wmde/C24_WMDE_Desktop_EN_06
C24_WMDE_Desktop_EN_06
- Loading branch information
Showing
34 changed files
with
1,797 additions
and
11 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
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'; | ||
import messages from './messages'; | ||
import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn'; | ||
import { createFormItems } from './form_items'; | ||
import { createFormActions } from '@src/createFormActions'; | ||
import eventMappings from './event_map'; | ||
import { createFallbackDonationURL } from '@src/createFallbackDonationURL'; | ||
import { WindowTimer } from '@src/utils/Timer'; | ||
|
||
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 } ) ); | ||
app.provide( 'tracker', tracker ); | ||
app.provide( 'timer', new WindowTimer() ); | ||
|
||
app.mount( page.getBannerContainer() ); |
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,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'; | ||
import messages from './messages_var'; | ||
import { LocaleFactoryEn } from '@src/utils/LocaleFactory/LocaleFactoryEn'; | ||
import { createFormItems } from './form_items'; | ||
import { createFormActions } from '@src/createFormActions'; | ||
import eventMappings from './event_map'; | ||
import { createFallbackDonationURL } from '@src/createFallbackDonationURL'; | ||
import { WindowTimer } from '@src/utils/Timer'; | ||
import { currentCampaignTimePercentage } from '@src/components/ProgressBar/currentCampaignTimePercentage'; | ||
|
||
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 } ) ); | ||
app.provide( 'tracker', tracker ); | ||
app.provide( 'timer', new WindowTimer() ); | ||
app.provide( 'currentCampaignTimePercentage', currentCampaignTimePercentage( new Date(), page.getCampaignParameters() ) ); | ||
|
||
app.mount( page.getBannerContainer() ); |
170 changes: 170 additions & 0 deletions
170
banners/english/C24_WMDE_Desktop_EN_06/components/BannerCtrl.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="$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="onOpenUseOfFunds" | ||
@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="onCloseUseOfFunds" | ||
> | ||
<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'; | ||
import { useBannerHider } from '@src/components/composables/useBannerHider'; | ||
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', 'modalOpened', 'modalClosed' ] ); | ||
useBannerHider( 800, emit ); | ||
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 onOpenUseOfFunds(): void { | ||
isFundsModalVisible.value = true; | ||
emit( 'modalOpened' ); | ||
} | ||
function onCloseUseOfFunds(): void { | ||
isFundsModalVisible.value = false; | ||
emit( 'modalClosed' ); | ||
} | ||
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> |
Oops, something went wrong.