-
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.
- VAR has logo payment buttons - add comma in slides for both banners Ticket: https://phabricator.wikimedia.org/T349700
- Loading branch information
Showing
13 changed files
with
507 additions
and
14 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| <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 5 € 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/> | ||
| <AmexLogo/> | ||
| </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/BannerSlides.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 AmexLogo from '@src/components/PaymentLogos/AmexLogo.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; | ||
| } | ||
| 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 { | ||
| contentState.value = ContentStates.SoftClosing; | ||
| } | ||
| 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
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,20 @@ | ||
| import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder'; | ||
| import { Translator } from '@src/Translator'; | ||
| import { DonationFormItems } from '@src/utils/FormItemsBuilder/DonationFormItems'; | ||
| import { Intervals } from '@src/utils/FormItemsBuilder/fields/Intervals'; | ||
| import { PaymentMethods } from '@src/utils/FormItemsBuilder/fields/PaymentMethods'; | ||
| import { NumberFormatter } from '@src/utils/DynamicContent/formatters/NumberFormatter'; | ||
|
|
||
| export function createFormItems( translations: Translator, amountFormatter: NumberFormatter ): DonationFormItems { | ||
| return new FormItemsBuilder( translations, amountFormatter ) | ||
| .setIntervals( | ||
| Intervals.ONCE, | ||
| Intervals.MONTHLY, | ||
| Intervals.YEARLY | ||
| ) | ||
| .setAmounts( 5, 10, 20, 25, 50, 100 ) | ||
| .setPaymentMethods( | ||
| PaymentMethods.PAYPAL, | ||
| PaymentMethods.CREDIT_CARD | ||
| ).getItems(); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| @use 'src/themes/Treedip/variables/colors'; | ||
| @use 'src/themes/Treedip/variables/fonts'; | ||
| @use 'src/themes/Treedip/variables/breakpoints'; | ||
|
|
||
| $banner-height: 353px !default; | ||
| $form-width: 256px !default; | ||
|
|
||
| .wmde-banner { | ||
| &-main { | ||
| height: $banner-height; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 12px 24px 0; | ||
| } | ||
|
|
||
| &-content { | ||
| display: flex; | ||
| flex: 1 1 auto; | ||
|
|
||
| &-headline { | ||
| font-family: fonts.$content; | ||
| font-size: 21px; | ||
| font-weight: bold; | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| padding: 0 20px; | ||
| position: relative; | ||
|
|
||
| @include breakpoints.medium-up { | ||
| padding: 0 52px; | ||
| } | ||
|
|
||
| &::before { | ||
| content: ''; | ||
| position: absolute; | ||
| height: 1px; | ||
| top: 50%; | ||
| left: 20px; | ||
| right: 20px; | ||
| background: colors.$primary; | ||
| z-index: 98; | ||
|
|
||
| @include breakpoints.medium-up { | ||
| left: 52px; | ||
| right: 52px; | ||
| } | ||
| } | ||
|
|
||
| &-text { | ||
| position: relative; | ||
| display: inline-block; | ||
| z-index: 99; | ||
| padding: 0 10px; | ||
| line-height: 24px; | ||
| background: colors.$white; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &-column-left { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| flex: 1 1 auto; | ||
| overflow-y: hidden; | ||
| margin-right: 20px; | ||
|
|
||
| border: 5px solid colors.$primary; | ||
| border-radius: 9px; | ||
| padding: 20px 0; | ||
| } | ||
|
|
||
| &-column-right { | ||
| flex: 1 1 $form-width; | ||
| width: $form-width; | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| padding: 10px 16px 10px 0; | ||
| } | ||
| } |
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.