-
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.
The first slide is removed from both banners. The feature of redirecting users directly to the payment providers is removed in both banners. The soft-close feature is removed/not used in both banners. The progress bar is removed from the modal/expanded banner in both banners. The campaign day sentence is removed/not used in both banners. The visitors-vs-donors sentence is removed/replaced in both banners. broken styles are fixed (wikipedia skin introduced some weird borders) The banners share the same height with the banner they are based on. https://phabricator.wikimedia.org/T366161
- Loading branch information
Showing
13 changed files
with
234 additions
and
85 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
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
163 changes: 163 additions & 0 deletions
163
banners/mobile/C24_WMDE_Mobile_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,163 @@ | ||
| <template> | ||
| <div class="wmde-banner-wrapper" :class="contentState"> | ||
| <MiniBanner | ||
| @close="onClose( 'MiniBanner', CloseChoices.Hide )" | ||
| @show-full-page-banner="onshowFullPageBanner" | ||
| @show-full-page-banner-preselected="onshowFullPageBannerPreselected" | ||
| > | ||
| <template #banner-slides> | ||
| <KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000"> | ||
|
|
||
| <template #slides="{ currentSlide }: any"> | ||
| <BannerSlides :currentSlide="currentSlide" :play-live-text="contentState === ContentStates.Mini"/> | ||
| </template> | ||
|
|
||
| </KeenSlider> | ||
| </template> | ||
| </MiniBanner> | ||
|
|
||
| <FullPageBanner | ||
| @showFundsModal="isFundsModalVisible = true" | ||
| @close="() => onClose( 'FullPageBanner', CloseChoices.Hide )" | ||
| > | ||
| <template #banner-text> | ||
| <BannerText :play-live-text="contentState === ContentStates.FullPage"/> | ||
| </template> | ||
|
|
||
| <template #donation-form="{ formInteraction }: any"> | ||
| <MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction" :page-scroller="pageScroller"> | ||
|
|
||
| <template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> | ||
| <MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"> | ||
|
|
||
| <template #button> | ||
| <MainDonationFormPaymentMethodLabeledButton/> | ||
| </template> | ||
|
|
||
| </MainDonationForm> | ||
| </template> | ||
|
|
||
| <template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any"> | ||
| <UpgradeToYearlyButtonForm | ||
| :show-manual-upgrade-option = false | ||
| :page-index="pageIndex" | ||
| @submit="submit" | ||
| :is-current="isCurrent" | ||
| @previous="previous" | ||
| > | ||
| <template #back> | ||
| <ChevronLeftIcon/> {{ $translate( 'back-button' ) }} | ||
| </template> | ||
| </UpgradeToYearlyButtonForm> | ||
| </template> | ||
|
|
||
| </MultiStepDonation> | ||
| </template> | ||
|
|
||
| <template #footer> | ||
| <BannerFooter :show-funds-link="false"/> | ||
| </template> | ||
| </FullPageBanner> | ||
|
|
||
| <FundsModal | ||
| :content="useOfFundsContent" | ||
| :is-funds-modal-visible="isFundsModalVisible" | ||
| @hideFundsModal="onHideFundsModal" | ||
| /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates'; | ||
| import { computed, inject, ref, watch } from 'vue'; | ||
| import FullPageBanner from './FullPageBanner.vue'; | ||
| import MiniBanner from './MiniBanner.vue'; | ||
| import FundsModal from '@src/components/UseOfFunds/FundsModal.vue'; | ||
| import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent'; | ||
| import { UseOfFundsCloseSources } from '@src/components/UseOfFunds/UseOfFundsCloseSources'; | ||
| import { PageScroller } from '@src/utils/PageScroller/PageScroller'; | ||
| import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue'; | ||
| import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue'; | ||
| import BannerText from '../content/BannerTextVar.vue'; | ||
| import BannerSlides from '../content/BannerSlides.vue'; | ||
| import BannerFooter from '@src/components/Footer/BannerFooter.vue'; | ||
| import KeenSlider from '@src/components/Slider/KeenSlider.vue'; | ||
| import { Tracker } from '@src/tracking/Tracker'; | ||
| import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent'; | ||
| import { useFormModel } from '@src/components/composables/useFormModel'; | ||
| import UpgradeToYearlyButtonForm from '@src/components/DonationForm/Forms/UpgradeToYearlyButtonForm.vue'; | ||
| import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue'; | ||
| import { CloseChoices } from '@src/domain/CloseChoices'; | ||
| import { CloseEvent } from '@src/tracking/events/CloseEvent'; | ||
| import { TrackingFeatureName } from '@src/tracking/TrackingEvent'; | ||
| import MainDonationFormPaymentMethodLabeledButton | ||
| from '@src/components/DonationForm/Forms/MainDonationFormPaymentMethodLabeledButton.vue'; | ||
| import { | ||
| createSubmittableMainDonationForm | ||
| } from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm'; | ||
| import { | ||
| createSubmittableUpgradeToYearly | ||
| } from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly'; | ||
| enum ContentStates { | ||
| Mini = 'wmde-banner-wrapper--mini', | ||
| FullPage = 'wmde-banner-wrapper--full-page' | ||
| } | ||
| enum FormStepNames { | ||
| MainDonationFormStep = 'MainDonationForm', | ||
| UpgradeToYearlyFormStep = 'UpgradeToYearlyForm' | ||
| } | ||
| interface Props { | ||
| bannerState: BannerStates; | ||
| useOfFundsContent: useOfFundsContentInterface; | ||
| pageScroller: PageScroller; | ||
| remainingImpressions: number; | ||
| } | ||
| const props = defineProps<Props>(); | ||
| const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] ); | ||
| const tracker = inject<Tracker>( 'tracker' ); | ||
| const isFundsModalVisible = ref<boolean>( false ); | ||
| const slideShowStopped = ref<boolean>( false ); | ||
| const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value ); | ||
| const contentState = ref<ContentStates>( ContentStates.Mini ); | ||
| const formModel = useFormModel(); | ||
| const stepControllers = [ | ||
| createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ), | ||
| createSubmittableUpgradeToYearly( formModel, FormStepNames.MainDonationFormStep, FormStepNames.MainDonationFormStep ) | ||
| ]; | ||
| watch( contentState, async () => { | ||
| emit( 'bannerContentChanged' ); | ||
| } ); | ||
| function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void { | ||
| emit( 'bannerClosed', new CloseEvent( feature, userChoice ) ); | ||
| } | ||
| function onshowFullPageBanner(): void { | ||
| slideShowStopped.value = true; | ||
| contentState.value = ContentStates.FullPage; | ||
| tracker.trackEvent( new MobileMiniBannerExpandedEvent() ); | ||
| } | ||
| function onshowFullPageBannerPreselected(): void { | ||
| slideShowStopped.value = true; | ||
| formModel.selectedAmount.value = '10'; | ||
| contentState.value = ContentStates.FullPage; | ||
| tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) ); | ||
| } | ||
| const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => { | ||
| props.pageScroller.scrollIntoView( payload.source === UseOfFundsCloseSources.callToAction ? | ||
| '.wmde-banner-form' : | ||
| '.wmde-banner-full-small-print .wmde-banner-footer-usage-link' | ||
| ); | ||
| isFundsModalVisible.value = false; | ||
| }; | ||
| </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
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
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
Oops, something went wrong.