|
1
|
|
|
$( function () { |
|
2
|
|
|
/** global: WMDE */ |
|
3
|
|
|
|
|
4
|
|
|
var initData = $( '#init-form' ), |
|
5
|
|
|
store = WMDE.Store.createDonationStore( WMDE.createInitialStateFromViolatedFields( initData.data( 'violatedFields' ) ) ), |
|
|
|
|
|
|
6
|
|
|
actions = WMDE.Actions |
|
7
|
|
|
; |
|
8
|
|
|
|
|
9
|
|
|
WMDE.StoreUpdates.connectComponentsToStore( |
|
10
|
|
|
[ |
|
11
|
|
|
WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ) ), |
|
12
|
|
|
WMDE.Components.createRadioComponent( store, $( '.payment-type-select' ), 'paymentType' ), |
|
13
|
|
|
WMDE.Components.createRadioComponent( store, $( '.interval-type-select' ), 'paymentIntervalInMonths' ), |
|
14
|
|
|
WMDE.Components.createRadioComponent( store, $( '.payment-period-select' ), 'paymentIntervalInMonths' ), |
|
15
|
|
|
WMDE.Components.createBankDataComponent( store, { |
|
16
|
|
|
ibanElement: $( '#iban' ), |
|
17
|
|
|
bicElement: $( '#bic' ), |
|
18
|
|
|
accountNumberElement: $( '#account-number' ), |
|
19
|
|
|
bankCodeElement: $( '#bank-code' ), |
|
20
|
|
|
bankNameFieldElement: $( '#field-bank-name' ), |
|
21
|
|
|
bankNameDisplayElement: $( '#bank-name' ), |
|
22
|
|
|
debitTypeElement: $( '.debit-type-select' ) |
|
23
|
|
|
} ), |
|
24
|
|
|
WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ), |
|
25
|
|
|
WMDE.Components.createRadioComponent( store, $( '.salutation' ), 'salutation' ), |
|
26
|
|
|
WMDE.Components.createRadioComponent( store, $( '.personal-title' ), 'title' ), |
|
27
|
|
|
WMDE.Components.createTextComponent( store, $( '#first-name' ), 'firstName' ), |
|
28
|
|
|
WMDE.Components.createTextComponent( store, $( '#last-name' ), 'lastName' ), |
|
29
|
|
|
WMDE.Components.createTextComponent( store, $( '#company-name' ), 'companyName' ), |
|
30
|
|
|
WMDE.Components.createTextComponent( store, $( '#street' ), 'street' ), |
|
31
|
|
|
WMDE.Components.createTextComponent( store, $( '#post-code' ), 'postcode' ), |
|
32
|
|
|
WMDE.Components.createTextComponent( store, $( '#city' ), 'city' ), |
|
33
|
|
|
WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ), |
|
34
|
|
|
WMDE.Components.createTextComponent( store, $( '#email' ), 'email' ), |
|
35
|
|
|
WMDE.Components.createCheckboxComponent( store, $( '#confirm_sepa' ), 'confirmSepa' ), |
|
36
|
|
|
WMDE.Components.createCheckboxComponent( store, $( '#confirm_shortterm' ), 'confirmShortTerm' ) |
|
37
|
|
|
], |
|
38
|
|
|
store, |
|
39
|
|
|
'donationFormContent' |
|
40
|
|
|
); |
|
41
|
|
|
|
|
42
|
|
|
WMDE.StoreUpdates.connectValidatorsToStore( |
|
43
|
|
|
function ( initialValues ) { |
|
44
|
|
|
return [ |
|
45
|
|
|
WMDE.ReduxValidation.createValidationDispatcher( |
|
|
|
|
|
|
46
|
|
|
WMDE.FormValidation.createAmountValidator( initData.data( 'validate-amount-url' ) ), |
|
47
|
|
|
actions.newFinishAmountValidationAction, |
|
48
|
|
|
[ 'amount', 'paymentType' ], |
|
49
|
|
|
initialValues |
|
50
|
|
|
), |
|
51
|
|
|
WMDE.ReduxValidation.createValidationDispatcher( |
|
52
|
|
|
WMDE.FormValidation.createAddressValidator( initData.data( 'validate-address-url' ) ), |
|
53
|
|
|
actions.newFinishAddressValidationAction, |
|
54
|
|
|
[ 'addressType', 'salutation', 'title', 'firstName', 'lastName', 'companyName', 'street', 'postcode', 'city', 'country', 'email' ], |
|
55
|
|
|
initialValues |
|
56
|
|
|
), |
|
57
|
|
|
WMDE.ReduxValidation.createValidationDispatcher( |
|
58
|
|
|
WMDE.FormValidation.createBankDataValidator( initData.data( 'validate-iban-url' ), initData.data( 'generate-iban-url' ) ), |
|
59
|
|
|
actions.newFinishBankDataValidationAction, |
|
60
|
|
|
[ 'iban', 'accountNumber', 'bankCode', 'debitType', 'paymentType' ], |
|
61
|
|
|
initialValues |
|
62
|
|
|
), |
|
63
|
|
|
WMDE.ReduxValidation.createValidationDispatcher( |
|
64
|
|
|
WMDE.FormValidation.createSepaConfirmationValidator(), |
|
65
|
|
|
actions.newFinishSepaConfirmationValidationAction, |
|
66
|
|
|
[ 'confirmSepa', 'confirmShortTerm' ], |
|
67
|
|
|
initialValues |
|
68
|
|
|
) |
|
69
|
|
|
]; |
|
70
|
|
|
}, |
|
71
|
|
|
store, |
|
72
|
|
|
initData.data( 'initial-form-values' ), |
|
73
|
|
|
'donationFormContent' |
|
74
|
|
|
); |
|
75
|
|
|
|
|
76
|
|
|
// Connect view handlers to changes in specific parts in the global state, designated by 'stateKey' |
|
77
|
|
|
WMDE.StoreUpdates.connectViewHandlersToStore( |
|
78
|
|
|
[ |
|
79
|
|
|
{ |
|
80
|
|
|
viewHandler: WMDE.View.createFormPageVisibilityHandler( { |
|
81
|
|
|
payment: $( "#paymentPage" ), |
|
82
|
|
|
personalData: $( "#personalDataPage" ), |
|
83
|
|
|
bankConfirmation: $( '#bankConfirmationPage' ) |
|
84
|
|
|
} ), |
|
85
|
|
|
stateKey: 'formPagination' |
|
86
|
|
|
}, |
|
87
|
|
|
{ |
|
88
|
|
|
viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), { |
|
89
|
|
|
amount: 'Betrag', |
|
90
|
|
|
salutation: 'Anrede', |
|
91
|
|
|
title: 'Titel', |
|
92
|
|
|
firstName: 'Vorname', |
|
93
|
|
|
lastName: 'Nachname', |
|
94
|
|
|
company: 'Firma', |
|
95
|
|
|
street: 'Straße', |
|
96
|
|
|
postcode: 'PLZ', |
|
97
|
|
|
city: 'Ort', |
|
98
|
|
|
country: 'Land', |
|
99
|
|
|
email: 'E-Mail' |
|
100
|
|
|
} ), |
|
101
|
|
|
stateKey: 'validationMessages' |
|
102
|
|
|
}, |
|
103
|
|
|
// show payment periods if interval payment is selected |
|
104
|
|
|
{ |
|
105
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.periode-2-list' ), /^(1|3|6|12)$/ ), |
|
106
|
|
|
stateKey: 'donationFormContent.paymentIntervalInMonths' |
|
107
|
|
|
}, |
|
108
|
|
|
// Show bank data input when doing direct debit |
|
109
|
|
|
{ |
|
110
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '#bank-data' ), 'BEZ' ), |
|
111
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
112
|
|
|
}, |
|
113
|
|
|
// Show the right submit buttons on page 2, depending on payment type |
|
114
|
|
|
{ |
|
115
|
|
|
viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit2' ), /^MCP|PPL|UEB/ ), |
|
116
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
117
|
|
|
}, |
|
118
|
|
|
{ |
|
119
|
|
|
viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit2' ), 'BEZ' ), |
|
120
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
121
|
|
|
}, |
|
122
|
|
|
// Hide anonymous payment when doing direct debit |
|
123
|
|
|
{ |
|
124
|
|
|
viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '.anonymous-payment-select' ), /^MCP|PPL|UEB/ ), |
|
125
|
|
|
stateKey: 'donationFormContent.paymentType' |
|
126
|
|
|
}, |
|
127
|
|
|
// Switch bank data input between IBAN/BIC and Account Number/Bank code |
|
128
|
|
|
{ |
|
129
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ), |
|
130
|
|
|
stateKey: 'donationFormContent.debitType' |
|
131
|
|
|
}, |
|
132
|
|
|
{ |
|
133
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ), |
|
134
|
|
|
stateKey: 'donationFormContent.debitType' |
|
135
|
|
|
}, |
|
136
|
|
|
// Show only the right data fields for personal data |
|
137
|
|
|
{ |
|
138
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-person' ), 'person' ), |
|
139
|
|
|
stateKey: 'donationFormContent.addressType' |
|
140
|
|
|
}, |
|
141
|
|
|
{ |
|
142
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-company' ), 'firma' ), |
|
143
|
|
|
stateKey: 'donationFormContent.addressType' |
|
144
|
|
|
}, |
|
145
|
|
|
{ |
|
146
|
|
|
viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-full' ), /firma|person/ ), |
|
147
|
|
|
stateKey: 'donationFormContent.addressType' |
|
148
|
|
|
}, |
|
149
|
|
|
{ |
|
150
|
|
|
viewHandler: WMDE.View.createPaymentIntervalAndAmountDisplayHandler( |
|
151
|
|
|
$( '.interval-text' ), |
|
152
|
|
|
$( '.amount-formatted'), |
|
153
|
|
|
{ |
|
154
|
|
|
'0': 'einmalig', |
|
155
|
|
|
'1': 'monatlich', |
|
156
|
|
|
'3': 'quartalsweise', |
|
157
|
|
|
'6': 'halbjährlich', |
|
158
|
|
|
'12': 'jährlich' |
|
159
|
|
|
}, |
|
160
|
|
|
WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' ) |
|
161
|
|
|
), |
|
162
|
|
|
stateKey: 'donationFormContent' |
|
163
|
|
|
}, |
|
164
|
|
|
{ |
|
165
|
|
|
viewHandler: WMDE.View.createDisplayAddressHandler( { |
|
166
|
|
|
fullName: $( '.confirm-name' ), |
|
167
|
|
|
street: $( '.confirm-street' ), |
|
168
|
|
|
postcode: $( '.confirm-postcode' ), |
|
169
|
|
|
city: $( '.confirm-city' ), |
|
170
|
|
|
country: $( '.confirm-country' ), |
|
171
|
|
|
email: $( '.confirm-email' ) |
|
172
|
|
|
} ), |
|
173
|
|
|
stateKey: 'donationFormContent' |
|
174
|
|
|
}, |
|
175
|
|
|
{ |
|
176
|
|
|
viewHandler: WMDE.View.createBankDataDisplayHandler( |
|
177
|
|
|
$( '.confirm-iban' ), |
|
178
|
|
|
$( '.confirm-bic' ), |
|
179
|
|
|
$( '.confirm-bank-name' ) |
|
180
|
|
|
), |
|
181
|
|
|
stateKey: 'donationFormContent' |
|
182
|
|
|
}, |
|
183
|
|
|
{ |
|
184
|
|
|
viewHandler: WMDE.View.createCountrySpecificAttributesHandler( $( '#post-code' ), $( '#city' ), $( '#email' ) ), |
|
185
|
|
|
stateKey: 'countrySpecifics' |
|
186
|
|
|
} |
|
187
|
|
|
], |
|
188
|
|
|
store |
|
189
|
|
|
); |
|
190
|
|
|
|
|
191
|
|
|
// connect DOM elements to actions |
|
192
|
|
|
|
|
193
|
|
|
function personalDataPageIsValid() { |
|
194
|
|
|
var validity = store.getState().validity, |
|
195
|
|
|
formContent = store.getState().donationFormContent, |
|
196
|
|
|
addressIsValid = formContent.addressType === 'anonym' || validity.address, |
|
197
|
|
|
bankDataIsValid = formContent.paymentType !== 'BEZ' || validity.bankData; |
|
198
|
|
|
return validity.amount && addressIsValid && bankDataIsValid; |
|
199
|
|
|
} |
|
200
|
|
|
|
|
201
|
|
|
function paymentDataPageIsValid() { |
|
202
|
|
|
var currentState = store.getState(); |
|
203
|
|
|
return currentState.validity.amount || |
|
204
|
|
|
( currentState.donationFormContent.amount && currentState.donationFormContent.paymentType ) ; |
|
205
|
|
|
} |
|
206
|
|
|
|
|
207
|
|
|
$( '#continueFormSubmit1' ).click( function () { |
|
208
|
|
|
if ( paymentDataPageIsValid() ) { |
|
209
|
|
|
store.dispatch( actions.newNextPageAction() ); |
|
210
|
|
|
} else { |
|
211
|
|
|
alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
|
212
|
|
|
} |
|
213
|
|
|
} ); |
|
214
|
|
|
|
|
215
|
|
|
$( '#continueFormSubmit2' ).click( function () { |
|
216
|
|
|
if ( personalDataPageIsValid() ) { |
|
217
|
|
|
store.dispatch( actions.newNextPageAction() ); |
|
218
|
|
|
} else { |
|
219
|
|
|
alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
|
220
|
|
|
} |
|
221
|
|
|
} ); |
|
222
|
|
|
|
|
223
|
|
|
$( '#finishFormSubmit2' ).click( function () { |
|
224
|
|
|
if ( personalDataPageIsValid() ) { |
|
225
|
|
|
$( '#donForm2' ).submit(); |
|
226
|
|
|
} else { |
|
227
|
|
|
alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
|
228
|
|
|
} |
|
229
|
|
|
} ); |
|
230
|
|
|
|
|
231
|
|
|
$( '#finishFormSubmit3' ).click( function () { |
|
232
|
|
|
var validity = store.getState().validity; |
|
233
|
|
|
if ( validity.amount && validity.address && validity.bankData && validity.sepaConfirmation ) { |
|
234
|
|
|
$( '#donForm2' ).submit(); |
|
235
|
|
|
} else { |
|
236
|
|
|
alert( 'Bitte füllen Sie das Formular komplett aus.' ); |
|
237
|
|
|
} |
|
238
|
|
|
} ); |
|
239
|
|
|
|
|
240
|
|
|
// Set initial form values |
|
241
|
|
|
store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) ); |
|
242
|
|
|
|
|
243
|
|
|
// Initialize form pages |
|
244
|
|
|
store.dispatch( actions.newAddPageAction( 'payment' ) ); |
|
245
|
|
|
store.dispatch( actions.newAddPageAction( 'personalData' ) ); |
|
246
|
|
|
store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) ); |
|
247
|
|
|
|
|
248
|
|
|
// switch to personal page if payment data is filled in |
|
249
|
|
|
if ( paymentDataPageIsValid() ) { |
|
250
|
|
|
store.dispatch( actions.newNextPageAction() ); |
|
251
|
|
|
} |
|
252
|
|
|
|
|
253
|
|
|
} ); |
|
254
|
|
|
|
wmde /
FundraisingFrontend
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.