Skip to content

Commit 9b9fe39

Browse files
Abbanmoiikana
Abban
authored and
moiikana
committed
Implement VAR for C23_WPDE_Desktop_02
VAR uses the updated bubble form. Ticket: https://phabricator.wikimedia.org/T352509
1 parent 7f482c4 commit 9b9fe39

File tree

11 files changed

+442
-8
lines changed

11 files changed

+442
-8
lines changed

‎banners/wpde_desktop/banner_var.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { createVueApp } from '@src/createVueApp';
22

3-
import './styles/styles.scss';
3+
import './styles/styles_var.scss';
44

55
import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
6-
import Banner from './components/BannerCtrl.vue';
6+
import Banner from './components/BannerVar.vue';
77
import { UrlRuntimeEnvironment } from '@src/utils/RuntimeEnvironment';
88
import { WindowResizeHandler } from '@src/utils/ResizeHandler';
99
import PageWPDE from '@src/page/PageWPDE';

‎banners/wpde_desktop/components/BannerCtrl.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</template>
1515

1616
<template #banner-slides="{ play }: any">
17-
<KeenSlider :with-navigation="true" :play="play" :interval="5000">
17+
<KeenSlider :with-navigation="true" :play="play" :interval="10000">
1818

1919
<template #slides="{ currentSlide }: any">
2020
<BannerSlides :currentSlide="currentSlide"/>

‎banners/wpde_desktop/components/BannerVar.vue

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<template>
2+
<div class="wmde-banner-wrapper" :class="contentState">
3+
<SetCookieImage v-if="showSetCookieImage"/>
4+
<SetAlreadyDonatedCookieImage v-if="showAlreadyDonatedCookieImage"/>
5+
<SetMaybeLaterCookieImage v-if="showMaybeLaterCookieImage"/>
6+
<MainBanner
7+
@close="onCloseMain"
8+
@form-interaction="$emit( 'bannerContentChanged' )"
9+
:bannerState="bannerState"
10+
v-if="contentState === ContentStates.Main"
11+
>
12+
<template #banner-text>
13+
<BannerText/>
14+
</template>
15+
16+
<template #banner-slides="{ play }: any">
17+
<KeenSlider :with-navigation="true" :play="play" :interval="10000">
18+
19+
<template #slides="{ currentSlide }: any">
20+
<BannerSlides :currentSlide="currentSlide"/>
21+
</template>
22+
23+
<template #left-icon>
24+
<ChevronLeftIcon :fill="'#990a00'"/>
25+
</template>
26+
27+
<template #right-icon>
28+
<ChevronRightIcon :fill="'#990a00'"/>
29+
</template>
30+
31+
</KeenSlider>
32+
</template>
33+
34+
<template #progress>
35+
<ProgressBar amount-to-show-on-right="TARGET"/>
36+
</template>
37+
38+
<template #donation-form="{ formInteraction }: any">
39+
<MultiStepDonation :step-controllers="stepControllers" @form-interaction="formInteraction">
40+
41+
<template #[FormStepNames.MainDonationFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
42+
<MainDonationForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous">
43+
44+
<template #label-payment-ppl>
45+
<span class="wmde-banner-select-group-label with-logos paypal"><PayPalLogo/></span>
46+
</template>
47+
48+
<template #label-payment-bez>
49+
<span class="wmde-banner-select-group-label with-logos sepa"><SepaLogo/></span>
50+
</template>
51+
52+
<template #label-payment-ueb>
53+
<span class="wmde-banner-select-group-label with-logos bank-transfer"><BankTransferLogo/>&nbsp;Überweisung</span>
54+
</template>
55+
56+
<template #label-payment-mcp>
57+
<span class="wmde-banner-select-group-label with-logos credit-cards">
58+
<VisaLogo/>
59+
<MastercardLogo/>
60+
</span>
61+
</template>
62+
63+
</MainDonationForm>
64+
</template>
65+
66+
<template #[FormStepNames.UpgradeToYearlyFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
67+
<UpgradeToYearlyForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
68+
</template>
69+
70+
<template #[FormStepNames.CustomAmountFormStep]="{ pageIndex, submit, isCurrent, previous }: any">
71+
<CustomAmountForm :page-index="pageIndex" @submit="submit" :is-current="isCurrent" @previous="previous"/>
72+
</template>
73+
74+
</MultiStepDonation>
75+
</template>
76+
77+
<template #footer>
78+
<FooterAlreadyDonated
79+
@showFundsModal="isFundsModalVisible = true"
80+
@showAlreadyDonatedModal="isAlreadyDonatedModalVisible = true"
81+
/>
82+
</template>
83+
84+
</MainBanner>
85+
86+
<FundsModal
87+
:content="useOfFundsContent"
88+
:is-funds-modal-visible="isFundsModalVisible"
89+
@hideFundsModal="isFundsModalVisible = false"
90+
/>
91+
92+
<SoftClose
93+
v-if="contentState === ContentStates.SoftClosing"
94+
@close="() => onClose( 'SoftClose', CloseChoices.Close )"
95+
@maybe-later="() => onClose( 'SoftClose', CloseChoices.MaybeLater )"
96+
@time-out-close="() => onClose( 'SoftClose', CloseChoices.TimeOut )"
97+
/>
98+
99+
<AlreadyDonatedModal
100+
:is-visible="isAlreadyDonatedModalVisible"
101+
@hideAlreadyDonatedModal="isAlreadyDonatedModalVisible = false"
102+
@goAway="() => onClose( 'AlreadyDonatedModal', CloseChoices.NoMoreBannersForCampaign )"
103+
@maybeLater="() => onClose( 'AlreadyDonatedModal', CloseChoices.Close )"
104+
>
105+
<template #already-donated-content>
106+
<AlreadyDonatedContent/>
107+
</template>
108+
</AlreadyDonatedModal>
109+
</div>
110+
</template>
111+
112+
<script setup lang="ts">
113+
import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
114+
import { ref, watch } from 'vue';
115+
import { UseOfFundsContent as useOfFundsContentInterface } from '@src/domain/UseOfFunds/UseOfFundsContent';
116+
import MainBanner from './MainBanner.vue';
117+
import FundsModal from '@src/components/UseOfFunds/FundsModal.vue';
118+
import BannerText from '../content/BannerText.vue';
119+
import BannerSlides from '../content/BannerSlides.vue';
120+
import AlreadyDonatedContent from '../content/AlreadyDonatedContent.vue';
121+
import ProgressBar from '@src/components/ProgressBar/ProgressBar.vue';
122+
import MultiStepDonation from '@src/components/DonationForm/MultiStepDonation.vue';
123+
import MainDonationForm from '@src/components/DonationForm/Forms/MainDonationForm.vue';
124+
import UpgradeToYearlyForm from '@src/components/DonationForm/Forms/UpgradeToYearlyForm.vue';
125+
import CustomAmountForm from '@src/components/DonationForm/Forms/CustomAmountForm.vue';
126+
import KeenSlider from '@src/components/Slider/KeenSlider.vue';
127+
import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
128+
import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
129+
import { useFormModel } from '@src/components/composables/useFormModel';
130+
import {
131+
createSubmittableMainDonationForm
132+
} from '@src/components/DonationForm/StepControllers/SubmittableMainDonationForm';
133+
import {
134+
createSubmittableUpgradeToYearly
135+
} from '@src/components/DonationForm/StepControllers/SubmittableUpgradeToYearly';
136+
import { createSubmittableCustomAmount } from '@src/components/DonationForm/StepControllers/SubmittableCustomAmount';
137+
import { CloseChoices } from '@src/domain/CloseChoices';
138+
import { CloseEvent } from '@src/tracking/events/CloseEvent';
139+
import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
140+
import SoftClose from '@src/components/SoftClose/SoftClose.vue';
141+
import SetCookieImage from '@src/components/SetWPDECookieImage/SetCookieImage.vue';
142+
import FooterAlreadyDonated from '@src/components/Footer/FooterAlreadyDonated.vue';
143+
import AlreadyDonatedModal from '@src/components/AlreadyDonatedModal/AlreadyDonatedModal.vue';
144+
import SetAlreadyDonatedCookieImage from '@src/components/SetWPDECookieImage/SetAlreadyDonatedCookieImage.vue';
145+
import PayPalLogo from '@src/components/PaymentLogos/PayPalLogo.vue';
146+
import VisaLogo from '@src/components/PaymentLogos/VisaLogo.vue';
147+
import MastercardLogo from '@src/components/PaymentLogos/MastercardLogo.vue';
148+
import SepaLogo from '../../../archive/mobile/C23_WMDE_Mobile_DE_03/components/PaymentLogos/SepaLogo.vue';
149+
import BankTransferLogo from '@src/components/PaymentLogos/BankTransferLogo.vue';
150+
import SetMaybeLaterCookieImage from '@src/components/SetWPDECookieImage/SetMaybeLaterCookieImage.vue';
151+
152+
enum ContentStates {
153+
Main = 'wmde-banner-wrapper--main',
154+
SoftClosing = 'wmde-banner-wrapper--soft-closing'
155+
}
156+
157+
enum FormStepNames {
158+
CustomAmountFormStep = 'CustomAmountForm',
159+
MainDonationFormStep = 'MainDonationForm',
160+
UpgradeToYearlyFormStep = 'UpgradeToYearlyForm'
161+
}
162+
163+
interface Props {
164+
bannerState: BannerStates;
165+
useOfFundsContent: useOfFundsContentInterface;
166+
remainingImpressions: number;
167+
}
168+
169+
const props = defineProps<Props>();
170+
const emit = defineEmits( [ 'bannerClosed', 'bannerContentChanged' ] );
171+
172+
const isFundsModalVisible = ref<boolean>( false );
173+
const isAlreadyDonatedModalVisible = ref<boolean>( false );
174+
const showSetCookieImage = ref<boolean>( false );
175+
const showAlreadyDonatedCookieImage = ref<boolean>( false );
176+
const showMaybeLaterCookieImage = ref<boolean>( false );
177+
const contentState = ref<ContentStates>( ContentStates.Main );
178+
const formModel = useFormModel();
179+
const stepControllers = [
180+
createSubmittableMainDonationForm( formModel, FormStepNames.UpgradeToYearlyFormStep ),
181+
createSubmittableUpgradeToYearly( formModel, FormStepNames.CustomAmountFormStep, FormStepNames.MainDonationFormStep ),
182+
createSubmittableCustomAmount( formModel, FormStepNames.UpgradeToYearlyFormStep )
183+
];
184+
185+
watch( contentState, async () => {
186+
emit( 'bannerContentChanged' );
187+
} );
188+
189+
function onCloseMain(): void {
190+
if ( props.remainingImpressions > 0 ) {
191+
contentState.value = ContentStates.SoftClosing;
192+
} else {
193+
onClose( 'MainBanner', CloseChoices.Close );
194+
}
195+
}
196+
197+
function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
198+
emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
199+
200+
switch ( userChoice ) {
201+
case CloseChoices.MaybeLater:
202+
showMaybeLaterCookieImage.value = true;
203+
break;
204+
case CloseChoices.Close:
205+
case CloseChoices.Hide:
206+
case CloseChoices.TimeOut:
207+
showSetCookieImage.value = true;
208+
break;
209+
case CloseChoices.NoMoreBannersForCampaign:
210+
showAlreadyDonatedCookieImage.value = true;
211+
break;
212+
213+
}
214+
}
215+
216+
</script>

‎banners/wpde_desktop/messages.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ const messages: TranslationMessages = {
1616
...AddressFormDe,
1717
...FooterDe,
1818
...MainDonationFormDe,
19-
...AlreadyDonatedModal
19+
...AlreadyDonatedModal,
20+
'upgrade-to-yearly-copy': '<p>Jedes Jahr sind wir auf Menschen wie Sie angewiesen. Jährliche Spenden helfen uns' +
21+
' besonders und ermöglichen langfristige Weiterentwicklungen.</p>' +
22+
'<p>Sie gehen kein Risiko ein: Jederzeit formlos zu sofort kündbar.</p>'
2023
};
2124

2225
export default messages;

‎banners/wpde_desktop/styles/styles_var.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// This is the file where we import the theme-specific component styles
2+
@use 'src/themes/Treedip/variables/breakpoints';
3+
@use 'src/components/BannerConductor/banner-transition';
4+
@use 'Banner';
5+
@use 'MainBanner' with (
6+
$banner-height: 394px,
7+
$form-width: 300px
8+
);
9+
@use 'src/themes/UseOfFunds/UseOfFunds';
10+
@use 'src/themes/Treedip/defaults';
11+
@use 'src/themes/Treedip/ButtonClose/ButtonClose';
12+
@use 'src/themes/Treedip/ProgressBar/ProgressBar' with (
13+
$progress-bar-margin: 0 15px
14+
);
15+
@use 'src/themes/Treedip/DonationForm/DonationForm';
16+
@use 'src/themes/Treedip/DonationForm/MultiStepDonation';
17+
@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubble';
18+
@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupRadioBubbles' with (
19+
$height: 38px
20+
);
21+
@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectCustomAmountRadioBubble' with (
22+
$height: 38px
23+
);
24+
@use 'src/themes/Treedip/DonationForm/BubbleForm/SelectGroupBubbleImageLabel';
25+
@use 'src/themes/Treedip/DonationForm/SubComponents/SmsBox';
26+
@use 'src/themes/Treedip/DonationForm/Forms/MainDonationForm' with (
27+
$padding: 0
28+
);
29+
@use 'src/themes/Treedip/DonationForm/BubbleForm/UpgradeToYearlyFormBubble';
30+
@use 'src/themes/Treedip/DonationForm/Forms/CustomAmountForm';
31+
@use 'src/themes/Treedip/Footer/FooterAlreadyDonated';
32+
@use 'src/themes/Treedip/Footer/SelectionInput';
33+
@use 'src/themes/Treedip/Message/Message' with (
34+
$font-sizes: ( breakpoints.$extra-small: 16px, breakpoints.$extra-large + 100px: 18px )
35+
);
36+
@use 'src/themes/Treedip/Slider/KeenSlider';
37+
@use 'src/themes/Treedip/SoftClose/SoftClose';
38+
@use 'src/themes/Treedip/AlreadyDonatedModal/AlreadyDonatedModal';

‎src/components/DonationForm/Forms/UpgradeToYearlyForm.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</a>
66
<div class="wmde-banner-form-upgrade-notice">
77
<p><strong>{{ $translate( 'upgrade-to-yearly-header', { amount: secondPageAmount } ) }}</strong></p>
8-
<p>{{ $translate( 'upgrade-to-yearly-copy' ) }}</p>
8+
<p v-html="$translate( 'upgrade-to-yearly-copy' )"></p>
99
</div>
1010

1111
<div class="wmde-banner-form-upgrade-options">

‎src/components/DonationForm/Forms/messages/UpgradeToYearly.en.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const Translations: TranslationMessages = {
44
'upgrade-to-yearly-header': 'Can you make it {{amount}} yearly?',
55
'upgrade-to-yearly-copy': 'Every year we are dependent on the support of people like you. Yearly donations' +
66
' help sustainably and enable long term development.',
7-
'upgrade-to-yearly-no': 'No, thanks! I\'ll make a one-time donation of {{amount}}.',
7+
'upgrade-to-yearly-no': 'No, I\'ll make a one-time donation of {{amount}}.',
88
'upgrade-to-yearly-yes': 'Yes, I\'ll donate {{amount}} each year.',
99
'upgrade-to-yearly-link': 'Yes, I\'ll donate yearly, but for a different amount.',
1010
'upgrade-to-yearly-button': 'Proceed with the donation',

‎src/components/PaymentLogos/BankTransferLogo.vue

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<template>
2+
<!-- eslint-disable max-len -->
3+
<svg class="bank-transfer-logo" height="100%" width="100%" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.5 228.5" xml:space="preserve">
4+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
5+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
6+
<g id="SVGRepo_iconCarrier">
7+
<path d="M224.5,182.264H4c-2.209,0-4-1.791-4-4v-89.78c0-2.209,1.791-4,4-4h220.5c2.209,0,4,1.791,4,4v89.78 C228.5,180.473,226.709,182.264,224.5,182.264z M8,174.264h212.5v-81.78H8V174.264z M182.636,164.793 c-5.544,0-12.097-2.44-17.774-6.903c-0.723-0.568-1.419-1.158-2.086-1.768c-5.05,3.996-9.902,6.698-13.356,7.389 c-8.531,1.704-13.416-5.567-16.332-9.913c-0.685-1.021-1.663-2.479-2.292-3.146c-1.087,0.574-3.036,2.896-4.223,5.101 c-1.046,1.941-3.468,2.675-5.413,1.632c-1.944-1.042-2.68-3.457-1.642-5.404c0.951-1.781,6.042-10.605,12.886-9.32 c3.253,0.61,5.232,3.559,7.327,6.68c3.334,4.969,5.294,7.087,8.119,6.527c2.274-0.455,5.817-2.482,9.692-5.531 c-5.594-8.124-7.358-18.289-4.704-28.704c4.367-17.129,13.705-21.746,20.984-20.368c8.21,1.562,13.446,10.265,12.179,20.244 c-1.324,10.428-8.871,21.339-17.183,29.478c0.352,0.305,0.683,0.576,0.987,0.815c6.087,4.786,12.909,6.127,15.739,4.627 c3.662-1.943,4.966-5.195,6.617-9.312c1.912-4.766,4.078-10.166,10.476-13.279c1.986-0.969,4.379-0.141,5.347,1.847 c0.967,1.986,0.14,4.38-1.847,5.347c-3.447,1.678-4.735,4.537-6.551,9.063c-1.802,4.493-4.045,10.085-10.292,13.4 C187.39,164.306,185.113,164.793,182.636,164.793z M171.456,108.842c-3.479,0-8.102,3.732-10.864,14.566 c-2.399,9.412-0.107,16.49,3.003,21.352c6.919-6.876,13.397-16.002,14.471-24.46c0.798-6.286-2.29-10.722-5.737-11.377 C172.048,108.869,171.755,108.842,171.456,108.842z M86.418,160.716H27.414c-2.209,0-4-1.791-4-4s1.791-4,4-4h59.004 c2.209,0,4,1.791,4,4S88.627,160.716,86.418,160.716z M86.418,137.373H27.414c-2.209,0-4-1.791-4-4s1.791-4,4-4h59.004 c2.209,0,4,1.791,4,4S88.627,137.373,86.418,137.373z M86.418,114.03H27.414c-2.209,0-4-1.791-4-4s1.791-4,4-4h59.004 c2.209,0,4,1.791,4,4S88.627,114.03,86.418,114.03z M73.49,72.552c-0.045,0-0.089-0.001-0.134-0.002 c-0.336-0.012-0.662-0.063-0.973-0.153l-34.657-9.134c-1.756-0.463-2.98-2.052-2.98-3.868s1.224-3.405,2.98-3.868l34.658-9.135 c0.297-0.086,0.607-0.138,0.928-0.151c0.066-0.004,0.127-0.005,0.202-0.004h109.959c7.205,0,13.066,5.861,13.066,13.066v0.184 c0,7.204-5.861,13.065-13.066,13.065H73.506C73.5,72.552,73.495,72.552,73.49,72.552z M77.49,64.552h105.982 c2.793,0,5.066-2.272,5.066-5.065v-0.184c0-2.794-2.272-5.066-5.066-5.066H77.49V64.552z M54.439,59.395l15.05,3.967v-7.934 L54.439,59.395z"/>
8+
</g>
9+
</svg>
10+
</template>

‎src/themes/Treedip/DonationForm/BubbleForm/UpgradeToYearlyFormBubble.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ $custom-link-color: #3366cc;
6161
flex-grow: 0;
6262
}
6363

64-
&-custom {
64+
&-custom,
65+
&-custom:link,
66+
&-custom:visited {
6567
color: $custom-link-color;
6668
font-size: 12px;
6769
text-align: left;

‎src/themes/Treedip/DonationForm/Forms/UpgradeToYearlyForm.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ $custom-link-text-align: left !default;
5252
flex-grow: 0;
5353
}
5454

55-
&-custom {
55+
&-custom,
56+
&-custom:link,
57+
&-custom:visited {
5658
color: colors.$secondary;
5759
font-size: 12px;
5860
text-align: $custom-link-text-align;

0 commit comments

Comments
 (0)