|
1
|
|
|
$( function () { |
|
2
|
|
|
/** global: WMDE */ |
|
3
|
|
|
|
|
4
|
|
|
if ($('body#donation').length == 0) { |
|
5
|
|
|
return; |
|
6
|
|
|
} |
|
7
|
|
|
|
|
8
|
|
|
var initData = $( '#init-form' ), |
|
9
|
|
|
store = WMDE.Store.createDonationStore( WMDE.createInitialStateFromViolatedFields( |
|
10
|
|
|
initData.data( 'violatedFields' ), |
|
11
|
|
|
initData.data( 'initial-validation-result' ) ) |
|
12
|
|
|
), |
|
13
|
|
|
actions = WMDE.Actions |
|
14
|
|
|
; |
|
15
|
|
|
|
|
16
|
|
|
WMDE.StoreUpdates.connectComponentsToStore( |
|
17
|
|
|
[ |
|
18
|
|
|
WMDE.Components.createAmountComponent( store, $('#amount-typed'), $( 'input[name="amount-grp"]' ), $( '#amount-hidden' ) ), |
|
19
|
|
|
WMDE.Components.createRadioComponent( store, $('input[name="payment-info"]'), 'paymentType' ), |
|
20
|
|
|
WMDE.Components.createPaymentIntervalComponent( store, $('input[name="intervalType"]'), $('input[name="periode"]') ), |
|
21
|
|
|
WMDE.Components.createBankDataComponent( store, { |
|
22
|
|
|
ibanElement: $( '#iban' ), |
|
23
|
|
|
bicElement: $( '#bic' ), |
|
24
|
|
|
accountNumberElement: $( '#account-number' ), |
|
25
|
|
|
bankCodeElement: $( '#bank-code' ), |
|
26
|
|
|
bankNameFieldElement: $( '#field-bank-name' ), |
|
27
|
|
|
bankNameDisplayElement: $( '#bank-name' ), |
|
28
|
|
|
debitTypeElement: $( '.debit-type-select' ) |
|
29
|
|
|
} ), |
|
30
|
|
|
WMDE.Components.createRadioComponent( store, $( 'input[name="addressType"]' ), 'addressType' ), |
|
31
|
|
|
WMDE.Components.createRadioComponent( store, $( '#treatment' ), 'salutation' ), |
|
32
|
|
|
WMDE.Components.createSelectMenuComponent( store, $( '#title' ), 'title' ), |
|
33
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#first-name' ), 'firstName' ), |
|
34
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#last-name' ), 'lastName' ), |
|
35
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#company-name' ), 'companyName' ), |
|
36
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#street' ), 'street' ), |
|
37
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#adress-company' ), 'street' ), |
|
38
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#post-code' ), 'postcode' ), |
|
39
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#post-code-company' ), 'postcode' ), |
|
40
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ), |
|
41
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#city-company' ), 'city' ), |
|
42
|
|
|
WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ), |
|
43
|
|
|
WMDE.Components.createSelectMenuComponent( store, $( '#country-company' ), 'country' ), |
|
44
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#email' ), 'email' ), |
|
45
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#email-company' ), 'email' ), |
|
46
|
|
|
WMDE.Components.createCheckboxComponent( store, $( '#newsletter' ), 'confirmNewsletter' ), |
|
47
|
|
|
WMDE.Components.createCheckboxComponent( store, $( '#newsletter-company' ), 'confirmNewsletter' ), |
|
48
|
|
|
WMDE.Components.createValidatingTextComponent( store, $( '#contact-person' ), 'contactPerson' ) |
|
49
|
|
|
], |
|
50
|
|
|
store, |
|
51
|
|
|
'donationFormContent' |
|
52
|
|
|
); |
|
53
|
|
|
|
|
54
|
|
|
WMDE.StoreUpdates.connectValidatorsToStore( |
|
55
|
|
|
function ( initialValues ) { |
|
56
|
|
|
return [ |
|
57
|
|
|
WMDE.ValidationDispatchers.createAmountValidationDispatcher( |
|
58
|
|
|
WMDE.FormValidation.createAmountValidator( initData.data( 'validate-amount-url' ) ), |
|
59
|
|
|
initialValues |
|
60
|
|
|
), |
|
61
|
|
|
WMDE.ValidationDispatchers.createAddressValidationDispatcher( |
|
62
|
|
|
WMDE.FormValidation.createAddressValidator( |
|
63
|
|
|
initData.data( 'validate-address-url' ), |
|
64
|
|
|
WMDE.FormValidation.DefaultRequiredFieldsForAddressType |
|
65
|
|
|
), |
|
66
|
|
|
initialValues |
|
67
|
|
|
), |
|
68
|
|
|
WMDE.ValidationDispatchers.createEmailValidationDispatcher( |
|
69
|
|
|
WMDE.FormValidation.createEmailAddressValidator( initData.data( 'validate-email-address-url' ) ), |
|
70
|
|
|
initialValues |
|
71
|
|
|
), |
|
72
|
|
|
WMDE.ValidationDispatchers.createBankDataValidationDispatcher( |
|
73
|
|
|
WMDE.FormValidation.createBankDataValidator( |
|
74
|
|
|
initData.data( 'validate-iban-url' ), |
|
75
|
|
|
initData.data( 'generate-iban-url' ) |
|
76
|
|
|
), |
|
77
|
|
|
initialValues |
|
78
|
|
|
), |
|
79
|
|
|
WMDE.ValidationDispatchers.createSepaConfirmationValidationDispatcher( |
|
80
|
|
|
WMDE.FormValidation.createSepaConfirmationValidator(), |
|
81
|
|
|
initialValues |
|
82
|
|
|
) |
|
83
|
|
|
]; |
|
84
|
|
|
}, |
|
85
|
|
|
store, |
|
86
|
|
|
initData.data( 'initial-form-values' ), |
|
87
|
|
|
'donationFormContent' |
|
88
|
|
|
); |
|
89
|
|
|
|
|
90
|
|
|
// Connect view handlers to changes in specific parts in the global state, designated by 'stateKey' |
|
91
|
|
|
WMDE.StoreUpdates.connectViewHandlersToStore( |
|
92
|
|
|
[ |
|
93
|
|
|
{ |
|
94
|
|
|
viewHandler: WMDE.View.createFormPageVisibilityHandler( { |
|
95
|
|
|
payment: $( "#paymentPage" ), |
|
96
|
|
|
personalData: $( "#personalDataPage" ), |
|
97
|
|
|
bankConfirmation: $( '#bankConfirmationPage' ) |
|
98
|
|
|
} ), |
|
99
|
|
|
stateKey: 'formPagination' |
|
100
|
|
|
}, |
|
101
|
|
|
{ |
|
102
|
|
|
viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), { |
|
103
|
|
|
amount: 'Betrag', |
|
104
|
|
|
paymentType: 'Zahlungsart', |
|
105
|
|
|
salutation: 'Anrede', |
|
106
|
|
|
title: 'Titel', |
|
107
|
|
|
firstName: 'Vorname', |
|
108
|
|
|
lastName: 'Nachname', |
|
109
|
|
|
companyName: 'Firma', |
|
110
|
|
|
street: 'Straße', |
|
111
|
|
|
postcode: 'PLZ', |
|
112
|
|
|
city: 'Ort', |
|
113
|
|
|
country: 'Land', |
|
114
|
|
|
email: 'E-Mail', |
|
115
|
|
|
iban: 'IBAN', |
|
116
|
|
|
bic: 'BIC', |
|
117
|
|
|
accountNumber: 'Kontonummer', |
|
118
|
|
|
bankCode: 'Bankleitzahl', |
|
119
|
|
|
confirmSepa: 'SEPA-Lastschrift', |
|
120
|
|
|
confirmShortTerm: 'SEPA-Informationsfrist' |
|
121
|
|
|
} ), |
|
122
|
|
|
stateKey: 'donationInputValidation' |
|
123
|
|
|
}, |
|
124
|
|
|
// show payment periods if interval payment is selected |
|
125
|
|
|
{ |
|
126
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.periode-2-list' ), /^(1|3|6|12)$/ ), |
|
127
|
|
|
stateKey: 'donationFormContent.paymentIntervalInMonths' |
|
128
|
|
|
}, |
|
129
|
|
|
// Show bank data input when doing direct debit |
|
130
|
|
|
{ |
|
131
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '#bank-data' ), 'BEZ' ), |
|
132
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
133
|
|
|
}, |
|
134
|
|
|
// Show the right submit buttons on page 2, depending on payment type |
|
135
|
|
|
{ |
|
136
|
|
|
viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit2' ), /^MCP|PPL|UEB|SUB/ ), |
|
137
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
138
|
|
|
}, |
|
139
|
|
|
{ |
|
140
|
|
|
viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit2' ), 'BEZ' ), |
|
141
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
142
|
|
|
}, |
|
143
|
|
|
// Hide anonymous payment when doing direct debit |
|
144
|
|
|
{ |
|
145
|
|
|
viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '.anonymous-payment-select, #tooltip-icon-addresstype' ), /^MCP|PPL|UEB|SUB/ ), |
|
146
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
147
|
|
|
}, |
|
148
|
|
|
// Switch bank data input between IBAN/BIC and Account Number/Bank code |
|
149
|
|
|
{ |
|
150
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ), |
|
151
|
|
|
stateKey: 'donationFormContent.debitType' |
|
152
|
|
|
}, |
|
153
|
|
|
{ |
|
154
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ), |
|
155
|
|
|
stateKey: 'donationFormContent.debitType' |
|
156
|
|
|
}, |
|
157
|
|
|
// Show only the right data fields for personal data |
|
158
|
|
|
{ |
|
159
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-person' ), 'person' ), |
|
160
|
|
|
stateKey: 'donationFormContent.addressType' |
|
161
|
|
|
}, |
|
162
|
|
|
{ |
|
163
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-company' ), 'firma' ), |
|
164
|
|
|
stateKey: 'donationFormContent.addressType' |
|
165
|
|
|
}, |
|
166
|
|
|
{ |
|
167
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-full, #notice-unsubscribe' ), /firma|person/ ), |
|
168
|
|
|
stateKey: 'donationFormContent.addressType' |
|
169
|
|
|
}, |
|
170
|
|
|
// Show notice for anonymous donations |
|
171
|
|
|
{ |
|
172
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.notice-anonymous' ), 'anonym' ), |
|
173
|
|
|
stateKey: 'donationFormContent.addressType' |
|
174
|
|
|
}, |
|
175
|
|
|
// Show "credit card required" notice for recurrent payments via Paypal |
|
176
|
|
|
{ |
|
177
|
|
|
viewHandler: WMDE.View.createRecurrentPaypalNoticeHandler( |
|
178
|
|
|
WMDE.View.Animator.createSlidingElementAnimator( $( '.notice-ppl-recurrent' ) ) |
|
179
|
|
|
), |
|
180
|
|
|
stateKey: 'donationFormContent' |
|
181
|
|
|
}, |
|
182
|
|
|
{ |
|
183
|
|
|
viewHandler: WMDE.View.createPaymentSummaryDisplayHandler( |
|
184
|
|
|
$( '.interval-text' ), |
|
185
|
|
|
$( '.amount .text'), |
|
186
|
|
|
$( '.payment-method .text'), |
|
187
|
|
|
{ |
|
188
|
|
|
'0': 'einmalig', |
|
189
|
|
|
'1': 'monatlich', |
|
190
|
|
|
'3': 'quartalsweise', |
|
191
|
|
|
'6': 'halbjährlich', |
|
192
|
|
|
'12': 'jährlich' |
|
193
|
|
|
}, |
|
194
|
|
|
{ |
|
195
|
|
|
'BEZ': 'Lastschrift', |
|
196
|
|
|
'UEB': 'Überweisung', |
|
197
|
|
|
'MCP': 'Kreditkarte', |
|
198
|
|
|
'PPL': 'PayPal', |
|
199
|
|
|
'SUB': 'Sofortüberweisung' |
|
200
|
|
|
}, |
|
201
|
|
|
WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' ), |
|
202
|
|
|
$('.periodicity-icon'), |
|
203
|
|
|
{ |
|
204
|
|
|
'0': 'icon-unique', |
|
205
|
|
|
'1': 'icon-repeat_1', |
|
206
|
|
|
'3': 'icon-repeat_3', |
|
207
|
|
|
'6': 'icon-repeat_6', |
|
208
|
|
|
'12': 'icon-repeat_12' |
|
209
|
|
|
}, |
|
210
|
|
|
$('.payment-icon'), |
|
211
|
|
|
{ |
|
212
|
|
|
'PPL': 'icon-paypal', |
|
213
|
|
|
'MCP': 'icon-credit_card2', |
|
214
|
|
|
'BEZ': 'icon-SEPA-2', |
|
215
|
|
|
'UEB': 'icon-ubeiwsung-1' |
|
216
|
|
|
}, |
|
217
|
|
|
$('.amount .info-detail'), |
|
218
|
|
|
{ |
|
219
|
|
|
'0': 'Ihr Konto wird Einmal belastet.', |
|
220
|
|
|
'1': 'Ihr Konto wird jeden Monat belastet. Ihre monatliche Spende können Sie jederzeit fristlos per E-Mail an [email protected] stornieren.', |
|
221
|
|
|
'3': 'Ihr Konto wird alle drei Monate belastet. Ihre monatliche Spende können Sie jederzeit fristlos per E-Mail an [email protected] stornieren.', |
|
222
|
|
|
'6': 'Ihr Konto wird jeden Monat belastet. Ihre monatliche Spende können Sie jederzeit fristlos per E-Mail an [email protected] stornieren.', |
|
223
|
|
|
'12': 'Ihr Konto wird jährlich belastet. Ihre jährliche Spende können Sie jederzeit fristlos per E-Mail an [email protected] stornieren.' |
|
224
|
|
|
}, |
|
225
|
|
|
$('.payment-method .info-detail'), |
|
226
|
|
|
{ |
|
227
|
|
|
'PPL': 'Nach der Möglichkeit der Adressangabe werden Sie zu PayPal weitergeleitet, wo Sie die Spende abschließen müssen.', |
|
228
|
|
|
'MCP': 'Nach der Möglichkeit der Adressangabe werden Sie zu unserem Partner Micropayment weitergeleitet, wo Sie Ihre Kreditkarteninformationen eingeben können.', |
|
229
|
|
|
'BEZ': 'Ich ermächtige die gemeinnützige Wikimedia Fördergesellschaft mbH (Gläubiger-ID: DE25ZZZ00000448435) Zahlungen von meinem Konto mittels Lastschrift einzuziehen. Zugleich weise ich mein Kreditinstitut an, die von der gemeinnützigen Wikimedia Fördergesellschaft mbH auf mein Konto gezogenen Lastschriften einzulösen. <br />Ich kann innerhalb von acht Wochen, beginnend mit dem Belastungsdatum, die Erstattung des belasteten Betrages verlangen. Es gelten dabei die mit meinem Kreditinstitut vereinbarten Bedingungen.', |
|
230
|
|
|
'UEB': 'IBAN 348720983472938<br />BIC 87668786<br />Ich ermächtige die gemeinnützige Wikimedia Fördergesellschaft mbH (Gläubiger-ID: DE25ZZZ00000448435) Zahlungen von meinem Konto mittels Lastschrift einzuziehen. Zugleich weise ich mein Kreditinstitut an, die von der gemeinnützigen Wikimedia Fördergesellschaft mbH auf mein Konto gezogenen Lastschriften einzulösen.<br />Ich kann innerhalb von acht Wochen, beginnend mit dem Belastungsdatum, die Erstattung des belasteten Betrages verlangen. Es gelten dabei die mit meinem Kreditinstitut vereinbarten Bedingungen.' |
|
231
|
|
|
}, |
|
232
|
|
|
$('.address-icon'), |
|
233
|
|
|
{ |
|
234
|
|
|
'person': 'icon-account_circle', |
|
235
|
|
|
'firma': 'icon-work', |
|
236
|
|
|
'anonym': 'icon-visibility_off' |
|
237
|
|
|
}, |
|
238
|
|
|
$('.donator-type .text'), |
|
239
|
|
|
{ |
|
240
|
|
|
'person': 'Privat', |
|
241
|
|
|
'firma': 'Firma', |
|
242
|
|
|
'anonym': 'Anonymous' |
|
243
|
|
|
}, |
|
244
|
|
|
$('.donator-type .info-detail'), |
|
245
|
|
|
$('.frequency .text'), |
|
246
|
|
|
{ |
|
247
|
|
|
'0': 'Einmalig', |
|
248
|
|
|
'1': 'Monatlich', |
|
249
|
|
|
'3': 'Vierteljährlich', |
|
250
|
|
|
'6': 'Halbjährlich', |
|
251
|
|
|
'12': 'Jährlich' |
|
252
|
|
|
} |
|
253
|
|
|
), |
|
254
|
|
|
stateKey: 'donationFormContent' |
|
255
|
|
|
}, |
|
256
|
|
|
{ |
|
257
|
|
|
viewHandler: WMDE.View.createDisplayAddressHandler( { |
|
258
|
|
|
fullName: $( '.confirm-name' ), |
|
259
|
|
|
street: $( '.confirm-street' ), |
|
260
|
|
|
postcode: $( '.confirm-postcode' ), |
|
261
|
|
|
city: $( '.confirm-city' ), |
|
262
|
|
|
country: $( '.confirm-country' ), |
|
263
|
|
|
email: $( '.confirm-email' ) |
|
264
|
|
|
} ), |
|
265
|
|
|
stateKey: 'donationFormContent' |
|
266
|
|
|
}, |
|
267
|
|
|
{ |
|
268
|
|
|
viewHandler: WMDE.View.createBankDataDisplayHandler( |
|
269
|
|
|
$( '.confirm-iban' ), |
|
270
|
|
|
$( '.confirm-bic' ), |
|
271
|
|
|
$( '.confirm-bank-name' ) |
|
272
|
|
|
), |
|
273
|
|
|
stateKey: 'donationFormContent' |
|
274
|
|
|
}, |
|
275
|
|
|
{ |
|
276
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ), |
|
277
|
|
|
stateKey: 'donationInputValidation.firstName' |
|
278
|
|
|
}, |
|
279
|
|
|
{ |
|
280
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ), |
|
281
|
|
|
stateKey: 'donationInputValidation.lastName' |
|
282
|
|
|
}, |
|
283
|
|
|
{ |
|
284
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ), |
|
285
|
|
|
stateKey: 'donationInputValidation.street' |
|
286
|
|
|
}, |
|
287
|
|
|
{ |
|
288
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#adress-company') ), |
|
289
|
|
|
stateKey: 'donationInputValidation.street' |
|
290
|
|
|
}, |
|
291
|
|
|
{ |
|
292
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ), |
|
293
|
|
|
stateKey: 'donationInputValidation.postcode' |
|
294
|
|
|
}, |
|
295
|
|
|
{ |
|
296
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#post-code-company') ), |
|
297
|
|
|
stateKey: 'donationInputValidation.postcode' |
|
298
|
|
|
}, |
|
299
|
|
|
{ |
|
300
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ), |
|
301
|
|
|
stateKey: 'donationInputValidation.postcode' |
|
302
|
|
|
}, |
|
303
|
|
|
{ |
|
304
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ), |
|
305
|
|
|
stateKey: 'donationInputValidation.city' |
|
306
|
|
|
}, |
|
307
|
|
|
{ |
|
308
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city-company' ) ), |
|
309
|
|
|
stateKey: 'donationInputValidation.city' |
|
310
|
|
|
}, |
|
311
|
|
|
{ |
|
312
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ), |
|
313
|
|
|
stateKey: 'donationInputValidation.email' |
|
314
|
|
|
}, |
|
315
|
|
|
{ |
|
316
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email-company' ) ), |
|
317
|
|
|
stateKey: 'donationInputValidation.email' |
|
318
|
|
|
}, |
|
319
|
|
|
{ |
|
320
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ), |
|
321
|
|
|
stateKey: 'donationInputValidation.companyName' |
|
322
|
|
|
}, |
|
323
|
|
|
{ |
|
324
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#contact-person' ) ), |
|
325
|
|
|
stateKey: 'donationInputValidation.contactPerson' |
|
326
|
|
|
}, |
|
327
|
|
|
{ |
|
328
|
|
|
|
|
329
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ), |
|
330
|
|
|
stateKey: 'donationInputValidation.iban' |
|
331
|
|
|
}, |
|
332
|
|
|
{ |
|
333
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ), |
|
334
|
|
|
stateKey: 'donationInputValidation.bic' |
|
335
|
|
|
}, |
|
336
|
|
|
{ |
|
337
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ), |
|
338
|
|
|
stateKey: 'donationInputValidation.accountNumber' |
|
339
|
|
|
}, |
|
340
|
|
|
{ |
|
341
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ), |
|
342
|
|
|
stateKey: 'donationInputValidation.bankCode' |
|
343
|
|
|
}, |
|
344
|
|
|
{ |
|
345
|
|
|
viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#amount-typed') ), |
|
346
|
|
|
stateKey: 'donationInputValidation.amount' |
|
347
|
|
|
} |
|
348
|
|
|
], |
|
349
|
|
|
store |
|
350
|
|
|
); |
|
351
|
|
|
|
|
352
|
|
|
// Validity checks for different form parts |
|
353
|
|
|
|
|
354
|
|
|
function addressIsValid() { |
|
355
|
|
|
var validity = store.getState().validity, |
|
356
|
|
|
formContent = store.getState().donationFormContent; |
|
357
|
|
|
return formContent.addressType === 'anonym' || validity.address; |
|
358
|
|
|
} |
|
359
|
|
|
|
|
360
|
|
|
function bankDataIsValid() { |
|
361
|
|
|
var validity = store.getState().validity, |
|
362
|
|
|
formContent = store.getState().donationFormContent; |
|
363
|
|
|
return formContent.paymentType !== 'BEZ' || validity.bankData; |
|
364
|
|
|
} |
|
365
|
|
|
|
|
366
|
|
|
function formDataIsValid() { |
|
367
|
|
|
var validity = store.getState().validity; |
|
368
|
|
|
return !hasInvalidFields() && validity.paymentData && addressIsValid() && bankDataIsValid(); |
|
369
|
|
|
} |
|
370
|
|
|
|
|
371
|
|
|
function personalDataPageIsValid() { |
|
372
|
|
|
var validity = store.getState().validity; |
|
|
|
|
|
|
373
|
|
|
return !hasInvalidFields() && paymentDataIsValid() && addressIsValid() && bankDataIsValid(); |
|
374
|
|
|
} |
|
375
|
|
|
|
|
376
|
|
|
function triggerValidityCheckForPaymentPage() { |
|
377
|
|
|
if ( !paymentDataIsValid() ) { |
|
378
|
|
|
store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'amount' ] ) ); |
|
379
|
|
|
} |
|
380
|
|
|
} |
|
381
|
|
|
|
|
382
|
|
|
function triggerValidityCheckForPersonalDataPage() { |
|
383
|
|
|
var formContent = store.getState().donationFormContent; |
|
384
|
|
|
|
|
385
|
|
|
if ( !addressIsValid() ) { |
|
386
|
|
|
if ( formContent.addressType === 'person' ) { |
|
387
|
|
|
store.dispatch( actions.newMarkEmptyFieldsInvalidAction( |
|
388
|
|
|
[ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'email' ], |
|
389
|
|
|
[ 'companyName' ] |
|
390
|
|
|
) ); |
|
391
|
|
|
} else if ( formContent.addressType === 'firma' ) { |
|
392
|
|
|
store.dispatch( actions.newMarkEmptyFieldsInvalidAction( |
|
393
|
|
|
[ 'companyName', 'street', 'postcode', 'city', 'email' ], |
|
394
|
|
|
[ 'firstName', 'lastName', 'contactPerson' ] |
|
395
|
|
|
) ); |
|
396
|
|
|
} |
|
397
|
|
|
} |
|
398
|
|
|
|
|
399
|
|
|
if ( !bankDataIsValid() ) { |
|
400
|
|
|
store.dispatch( actions.newMarkEmptyFieldsInvalidAction( |
|
401
|
|
|
[ 'iban', 'bic' ] |
|
402
|
|
|
) ); |
|
403
|
|
|
} |
|
404
|
|
|
} |
|
405
|
|
|
|
|
406
|
|
|
function triggerValidityCheckForSepaPage() { |
|
|
|
|
|
|
407
|
|
|
if ( !store.getState().validity.sepaConfirmation ) { |
|
408
|
|
|
store.dispatch( actions.newMarkEmptyFieldsInvalidAction( |
|
409
|
|
|
[ 'confirmSepa', 'confirmShortTerm' ] |
|
410
|
|
|
) ); |
|
411
|
|
|
} |
|
412
|
|
|
} |
|
413
|
|
|
|
|
414
|
|
|
function hasInvalidFields() { |
|
415
|
|
|
var invalidFields = false; |
|
416
|
|
|
$.each( store.getState().donationInputValidation, function( key, value ) { |
|
417
|
|
|
if ( value.isValid === false ) { |
|
418
|
|
|
invalidFields = true; |
|
419
|
|
|
} |
|
420
|
|
|
} ); |
|
421
|
|
|
|
|
422
|
|
|
return invalidFields; |
|
423
|
|
|
} |
|
424
|
|
|
|
|
425
|
|
|
function paymentDataIsValid() { |
|
426
|
|
|
var currentState = store.getState(); |
|
427
|
|
|
return currentState.validity.paymentData; |
|
428
|
|
|
} |
|
429
|
|
|
|
|
430
|
|
|
function displayErrorBox() { |
|
431
|
|
|
$( '#validation-errors' ).show(); |
|
432
|
|
|
$( 'html, body' ).animate( { scrollTop: $( '#validation-errors' ).offset().top } ); |
|
433
|
|
|
} |
|
434
|
|
|
|
|
435
|
|
|
function triggerPiwikEvent( eventData ) { |
|
436
|
|
|
if ( typeof _paq !== 'undefined' ) { |
|
|
|
|
|
|
437
|
|
|
_paq.push( eventData ); |
|
438
|
|
|
} |
|
439
|
|
|
} |
|
440
|
|
|
|
|
441
|
|
|
function handlePaymentDataSubmit() { |
|
|
|
|
|
|
442
|
|
|
if ( paymentDataIsValid() ) { |
|
443
|
|
|
store.dispatch( actions.newNextPageAction() ); |
|
444
|
|
|
triggerPiwikEvent( [ 'trackGoal', 2 ] ); |
|
445
|
|
|
} else { |
|
446
|
|
|
triggerValidityCheckForPaymentPage(); |
|
447
|
|
|
displayErrorBox(); |
|
448
|
|
|
} |
|
449
|
|
|
} |
|
450
|
|
|
|
|
451
|
|
|
function handlePersonalDataSubmitForDirectDebit() { |
|
|
|
|
|
|
452
|
|
|
if ( personalDataPageIsValid() ) { |
|
453
|
|
|
store.dispatch( actions.newNextPageAction() ); |
|
454
|
|
|
triggerPiwikEvent( [ 'trackGoal', 4 ] ); |
|
455
|
|
|
} else { |
|
456
|
|
|
triggerValidityCheckForPersonalDataPage(); |
|
457
|
|
|
displayErrorBox(); |
|
458
|
|
|
} |
|
459
|
|
|
} |
|
460
|
|
|
|
|
461
|
|
|
function handlePersonalDataSubmitForNonDirectDebit() { |
|
|
|
|
|
|
462
|
|
|
if ( personalDataPageIsValid() ) { |
|
463
|
|
|
$( '#donForm2' ).submit(); |
|
464
|
|
|
} else { |
|
465
|
|
|
triggerValidityCheckForPersonalDataPage(); |
|
466
|
|
|
displayErrorBox(); |
|
467
|
|
|
} |
|
468
|
|
|
} |
|
469
|
|
|
|
|
470
|
|
|
$.urlParam = function(name){ |
|
471
|
|
|
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); |
|
472
|
|
|
if (results==null){ |
|
473
|
|
|
return null; |
|
474
|
|
|
} |
|
475
|
|
|
else{ |
|
476
|
|
|
return decodeURI(results[1]) || 0; |
|
477
|
|
|
} |
|
478
|
|
|
}; |
|
479
|
|
|
|
|
480
|
|
View Code Duplication |
handleGroupValidations = function () { |
|
|
|
|
|
|
481
|
|
|
var state = store.getState(); |
|
482
|
|
|
|
|
483
|
|
|
//1st Group Amount & Periodicity |
|
484
|
|
|
var amount = $('.amount'), |
|
485
|
|
|
paymentMethod = $('.payment-method'), |
|
486
|
|
|
donatorType = $('.donator-type'); |
|
487
|
|
|
|
|
488
|
|
|
if (state.donationFormContent.paymentIntervalInMonths >= 0) { |
|
489
|
|
|
amount.addClass('completed').removeClass('disabled invalid'); |
|
490
|
|
|
paymentMethod.removeClass('disabled'); |
|
491
|
|
|
if (state.donationInputValidation.amount.dataEntered && !state.donationInputValidation.amount.isValid) { |
|
492
|
|
|
amount.removeClass('completed').addClass('invalid'); |
|
493
|
|
|
amount.find('.periodicity-icon').removeClass().addClass('periodicity-icon icon-error'); |
|
494
|
|
|
} |
|
495
|
|
|
} |
|
496
|
|
|
else { |
|
497
|
|
|
paymentMethod.addClass('disabled'); |
|
498
|
|
|
} |
|
499
|
|
|
|
|
500
|
|
|
if (state.donationFormContent.paymentType) { |
|
501
|
|
|
paymentMethod.addClass('completed').removeClass('disabled invalid'); |
|
502
|
|
|
donatorType.removeClass('disabled'); |
|
503
|
|
|
if (state.donationInputValidation.paymentType.dataEntered && !state.donationInputValidation.paymentType.isValid) { |
|
504
|
|
|
paymentMethod.removeClass('completed').addClass('invalid'); |
|
505
|
|
|
paymentMethod.find('.payment-icon').removeClass().addClass('payment-icon icon-error'); |
|
506
|
|
|
} |
|
507
|
|
|
} |
|
508
|
|
|
else { |
|
509
|
|
|
donatorType.addClass('disabled'); |
|
510
|
|
|
} |
|
511
|
|
|
|
|
512
|
|
|
if (state.donationFormContent.addressType) { |
|
513
|
|
|
donatorType.addClass('completed').removeClass('disabled invalid'); |
|
514
|
|
|
var validators = state.donationInputValidation; |
|
515
|
|
|
if ( |
|
516
|
|
|
state.donationFormContent.addressType == 'personal' && |
|
517
|
|
|
( |
|
518
|
|
|
(validators.email.dataEntered && !validators.email.isValid) || |
|
519
|
|
|
(validators.city.dataEntered && !validators.city.isValid) || |
|
520
|
|
|
(validators.firstName.dataEntered && !validators.firstName.isValid) || |
|
521
|
|
|
(validators.lastName.dataEntered && !validators.lastName.isValid) || |
|
522
|
|
|
(validators.street.dataEntered && !validators.street.isValid) || |
|
523
|
|
|
(validators.postcode.dataEntered && !validators.postcode.isValid) || |
|
524
|
|
|
(validators.salutation.dataEntered && !validators.salutation.isValid) || |
|
525
|
|
|
(validators.firstName.dataEntered && !validators.firstName.isValid) |
|
526
|
|
|
) |
|
527
|
|
|
|| |
|
528
|
|
|
state.donationFormContent.addressType == 'firma' && |
|
529
|
|
|
( |
|
530
|
|
|
(validators.contactPerson.dataEntered && !validators.contactPerson.isValid) || |
|
531
|
|
|
(validators.companyName.dataEntered && !validators.companyName.isValid) || |
|
532
|
|
|
(validators.firstName.dataEntered && !validators.firstName.isValid) || |
|
533
|
|
|
(validators.email.dataEntered && !validators.email.isValid) || |
|
534
|
|
|
(validators.city.dataEntered && !validators.city.isValid) || |
|
535
|
|
|
(validators.street.dataEntered && !validators.street.isValid) || |
|
536
|
|
|
(validators.postcode.dataEntered && !validators.postcode.isValid) |
|
537
|
|
|
)){ |
|
538
|
|
|
donatorType.removeClass('completed').addClass('invalid'); |
|
539
|
|
|
donatorType.find('.payment-icon').removeClass().addClass('payment-icon icon-error'); |
|
540
|
|
|
} |
|
541
|
|
|
} |
|
542
|
|
|
|
|
543
|
|
|
|
|
544
|
|
|
if (formDataIsValid()) { |
|
545
|
|
|
$('form input[type="submit"]').removeClass('btn-unactive'); |
|
546
|
|
|
} |
|
547
|
|
|
else { |
|
548
|
|
|
$('form input[type="submit"]').addClass('btn-unactive'); |
|
549
|
|
|
} |
|
550
|
|
|
}; |
|
551
|
|
|
|
|
552
|
|
|
// connect DOM elements to actions |
|
553
|
|
|
//$( '#continueFormSubmit1' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePaymentDataSubmit, store ) ); |
|
554
|
|
|
$('input').on('click, change', WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handleGroupValidations, store ) ); |
|
555
|
|
|
handleGroupValidations(); |
|
556
|
|
|
|
|
557
|
|
|
$('input[name="payment-info"]').click(function () { |
|
558
|
|
|
if ($(this).val() == 'BEZ') { |
|
559
|
|
|
$('#anonymus').parent().addClass('disabled'); |
|
560
|
|
|
} |
|
561
|
|
|
else { |
|
562
|
|
|
$('#anonymus').parent().removeClass('disabled'); |
|
563
|
|
|
} |
|
564
|
|
|
}); |
|
565
|
|
|
|
|
566
|
|
|
$('form').on('submit', function () { |
|
567
|
|
|
triggerValidityCheckForPersonalDataPage(); |
|
568
|
|
|
handleGroupValidations(); |
|
569
|
|
|
|
|
570
|
|
|
if (formDataIsValid()) { |
|
571
|
|
|
return true; |
|
572
|
|
|
} |
|
573
|
|
|
return false; |
|
574
|
|
|
}); |
|
575
|
|
|
|
|
576
|
|
|
// Set initial form values |
|
577
|
|
|
var initSetup = initData.data( 'initial-form-values' ); |
|
578
|
|
|
var urlAmountHidden = $.urlParam('amount-hidden'); |
|
579
|
|
|
var urlAmountTyped = $.urlParam('amount-typed'); |
|
580
|
|
|
var urlIntervalType = $.urlParam('intervalType'); |
|
581
|
|
|
var urlIntervalMonths = $.urlParam('periode'); |
|
582
|
|
|
var urlPayment = $.urlParam('payment-info'); |
|
583
|
|
|
urlAmountHidden ? initSetup.amount = urlAmountHidden : 0; |
|
584
|
|
|
urlAmountTyped && urlAmountHidden ? initSetup.isCustomAmount = true : 0; |
|
585
|
|
|
urlIntervalType ? initSetup.paymentIntervalInMonths = urlIntervalType : 0; |
|
586
|
|
|
urlIntervalMonths && urlIntervalType ? initSetup.paymentIntervalInMonths = urlIntervalMonths : 0; |
|
587
|
|
|
urlPayment ? initSetup.paymentType = urlPayment : 0; |
|
588
|
|
|
store.dispatch( actions.newInitializeContentAction( initSetup ) ); |
|
589
|
|
|
|
|
590
|
|
|
var $introBanner = $('.introduction.banner'); |
|
591
|
|
|
var $introDefault = $('.introduction.default'); |
|
592
|
|
|
if (urlAmountHidden && urlIntervalType && urlPayment) { |
|
593
|
|
|
$introBanner.removeClass('hidden'); |
|
594
|
|
|
$introDefault.addClass('hidden'); |
|
595
|
|
|
} |
|
596
|
|
|
|
|
597
|
|
|
// Initialize form pages |
|
598
|
|
|
store.dispatch( actions.newAddPageAction( 'payment' ) ); |
|
599
|
|
|
store.dispatch( actions.newAddPageAction( 'personalData' ) ); |
|
600
|
|
|
store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) ); |
|
601
|
|
|
|
|
602
|
|
|
// switch to personal page if payment data is filled in |
|
603
|
|
|
if ( paymentDataIsValid() ) { |
|
604
|
|
|
store.dispatch( actions.newNextPageAction() ); |
|
605
|
|
|
} |
|
606
|
|
|
|
|
607
|
|
|
} ); |
|
608
|
|
|
|
wmde /
FundraisingFrontend
Loading history...
