skins/cat17/src/scripts/donationForm.js - Code Metrics - Inspection of "[WIP] T177930 No interval" - wmde/FundraisingFrontend - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#1036)

by wiese

created 2017-11-24 15:50 UTC

skins/cat17/src/scripts/donationForm.js A

↳ Parent: Project

Complexity

Total Complexity	16
Complexity/F	2

Size

Lines of Code	375
Function Count	8

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes	8
Bugs	0	Features	0

Metric	Value
cc	0
wmc	16
c	8
b	0
f	0
nc	378
mnd	3
bc	14
fnc	8
dl	0
loc	375
rs	10
bpm	1.75
cpm	2
noi	2

$( function () {
  /** global: WMDE */

  var initData = $( '#init-form' ),
    store = WMDE.Store.createDonationStore( WMDE.createInitialStateFromViolatedFields(
        initData.data( 'violatedFields' ),
        initData.data( 'initial-validation-result' ) )
    ),
    actions = WMDE.Actions
		currencyFormatter = WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' )

	;

  WMDE.StoreUpdates.connectComponentsToStore(
    [
      WMDE.Components.createAmountComponent( store, $('#amount-typed'), $( '.wrap-amounts input[type="radio"]' ), $( '#amount-hidden' ) ),
      WMDE.Components.createRadioComponent( store, $('input[name="zahlweise"]'), 'paymentType' ),
      WMDE.Components.createPaymentIntervalComponent( store, $('input[name="intervalType"]'), $('input[name="periode"]') ),
      WMDE.Components.createBankDataComponent( store, {
        ibanElement: $( '#iban' ),
        bicElement: $( '#bic' ),
        accountNumberElement: $( '#account-number' ),
        bankCodeElement: $( '#bank-code' ),
        bankNameFieldElement: $( '#field-bank-name' ),
        bankNameDisplayElement: $( '#bank-name' )
      } ),
      WMDE.Components.createRadioComponent( store, $( 'input[name="addressType"]' ), 'addressType' ),
      WMDE.Components.createSelectMenuComponent( store, $( 'select[name="salutation"]' ), 'salutation' ),
      WMDE.Components.createSelectMenuComponent( store, $( '#title' ), 'title' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#first-name' ), 'firstName' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#last-name' ), 'lastName' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#company-name' ), 'companyName' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#street' ), 'street' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#adress-company' ), 'street' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#post-code' ), 'postcode' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#post-code-company' ), 'postcode' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#city-company' ), 'city' ),
      WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ),
      WMDE.Components.createSelectMenuComponent( store, $( '#country-company' ), 'country' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#email' ), 'email' ),
      WMDE.Components.createValidatingTextComponent( store, $( '#email-company' ), 'email' ),
      WMDE.Components.createCheckboxComponent( store, $( '#newsletter' ), 'confirmNewsletter' ),
      WMDE.Components.createCheckboxComponent( store, $( '#newsletter-company' ), 'confirmNewsletter' )
    ],
    store,
    'donationFormContent'
  );

  WMDE.StoreUpdates.connectValidatorsToStore(
    function ( initialValues ) {
      return [
        WMDE.ValidationDispatchers.createAmountValidationDispatcher(
          WMDE.FormValidation.createAmountValidator( initData.data( 'validate-amount-url' ) ),
          initialValues
        ),
        WMDE.ValidationDispatchers.createAddressValidationDispatcher(
          WMDE.FormValidation.createAddressValidator(
            initData.data( 'validate-address-url' ),
            WMDE.FormValidation.DefaultRequiredFieldsForAddressType
          ),
          initialValues
        ),
        WMDE.ValidationDispatchers.createEmailValidationDispatcher(
          WMDE.FormValidation.createEmailAddressValidator( initData.data( 'validate-email-address-url' ) ),
          initialValues
        ),
        WMDE.ValidationDispatchers.createBankDataValidationDispatcher(
          WMDE.FormValidation.createBankDataValidator(
            initData.data( 'validate-iban-url' ),
            initData.data( 'generate-iban-url' )
          ),
          initialValues
        )
      ];
    },
    store,
    initData.data( 'initial-form-values' ),
    'donationFormContent'
  );

  // Connect view handlers to changes in specific parts in the global state, designated by 'stateKey'
  WMDE.StoreUpdates.connectViewHandlersToStore(
    [
      {
        viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), {
          amount: 'Betrag',
          paymentType: 'Zahlungsart',
          salutation: 'Anrede',
          title: 'Titel',
          firstName: 'Vorname',
          lastName: 'Nachname',
          companyName: 'Firma',
          street: 'Straße',
          postcode: 'PLZ',
          city: 'Ort',
          country: 'Land',
          email: 'E-Mail',
          iban: 'IBAN',
          bic: 'BIC',
          accountNumber: 'Kontonummer',
          bankCode: 'Bankleitzahl'
        } ),
        stateKey: 'donationInputValidation'
      },
		// Hide anonymous payment when doing direct debit
		{
			viewHandler: WMDE.View.createElementClassSwitcher( $( '#type-donator .wrap-field.anonym .wrap-input' ), /BEZ/, 'disabled' ),
			stateKey: 'donationFormContent.paymentType'
		},
		// Show "needs to support recurring debiting" notice for payments types that provide that info (payment_type_*_recurrent_info)
		{
			viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#payment-method .info-text .info-recurrent' ), /^(1|3|6|12)/ ),
			stateKey: 'donationFormContent.paymentIntervalInMonths'
		},
		{
			viewHandler: WMDE.View.createSuboptionDisplayHandler(
				$( '#recurrence' )
			),
			stateKey: 'donationFormContent.paymentIntervalInMonths'
		},
		{
			viewHandler: WMDE.View.createSuboptionDisplayHandler(
				$( '#donation-payment' )
			),
			stateKey: 'donationFormContent.paymentType'
		},
		{
			viewHandler: WMDE.View.createSuboptionDisplayHandler(
				$( '#type-donator' )
			),
			stateKey: 'donationFormContent.addressType'
		},
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ),
        stateKey: 'donationInputValidation.firstName'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ),
        stateKey: 'donationInputValidation.lastName'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ),
        stateKey: 'donationInputValidation.street'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#adress-company') ),
        stateKey: 'donationInputValidation.street'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
        stateKey: 'donationInputValidation.postcode'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#post-code-company') ),
        stateKey: 'donationInputValidation.postcode'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
        stateKey: 'donationInputValidation.postcode'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ),
        stateKey: 'donationInputValidation.city'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city-company' ) ),
        stateKey: 'donationInputValidation.city'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ),
        stateKey: 'donationInputValidation.email'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email-company' ) ),
        stateKey: 'donationInputValidation.email'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ),
        stateKey: 'donationInputValidation.companyName'
      },
      {

        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ),
        stateKey: 'donationInputValidation.iban'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ),
        stateKey: 'donationInputValidation.bic'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ),
        stateKey: 'donationInputValidation.accountNumber'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ),
        stateKey: 'donationInputValidation.bankCode'
      },
      {
        viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#amount-typed') ),
        stateKey: 'donationInputValidation.amount'
      },
		{
			viewHandler: WMDE.View.createCustomAmountField( $('#amount-typed') ),
			stateKey: 'donationInputValidation.amount'
		},
		{
			viewHandler: WMDE.View.SectionInfo.createFrequencySectionInfo(
				$( '.banner .frequency' ),
				{
					'0': 'icon-unique',
					'1': 'icon-repeat_1',
					'3': 'icon-repeat_3',
					'6': 'icon-repeat_6',
					'12': 'icon-repeat_12'
				},
				WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#recurrence .wrap-input' ) ),
				WMDE.FormDataExtractor.mapFromRadioInfoTexts( $( '#recurrence .wrap-field' ) )
			),
			stateKey: [
				'donationFormContent.paymentIntervalInMonths'
			]
		},
		{
			viewHandler: WMDE.View.SectionInfo.createAmountFrequencySectionInfo(
				$( '.amount' ),
				{
					'0': 'icon-unique',
					'1': 'icon-repeat_1',
					'3': 'icon-repeat_3',
					'6': 'icon-repeat_6',
					'12': 'icon-repeat_12'
				},
				WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#recurrence .wrap-input' ) ),
				WMDE.FormDataExtractor.mapFromRadioInfoTexts( $( '#recurrence .wrap-field' ) ),
				currencyFormatter
			),
			stateKey: [
				'donationFormContent.amount',
				'donationFormContent.paymentIntervalInMonths',
				'donationInputValidation.amount' // @todo should contain amount and interval. Add neutral state
			]
		},
		{
			viewHandler: WMDE.View.SectionInfo.createPaymentTypeSectionInfo(
				$( '.payment-method' ),
				{
					'PPL': 'icon-paypal',
					'MCP': 'icon-credit_card2',
					'BEZ': 'icon-SEPA-2',
					'UEB': 'icon-ubeiwsung-1',
					'SUB': 'icon-TODO' // @todo Find icon for SUB
				},
				WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#payment-method .wrap-input' ) ),
				WMDE.FormDataExtractor.mapFromRadioInfoTexts( $( '#payment-method .wrap-field' ) )
			),
			stateKey: [
				'donationFormContent.paymentType',
				'donationFormContent.iban',
				'donationFormContent.bic',
				'validity.paymentData' // @todo should contain bankData validity if applicable, too. Add neutral state
			]
		},
		{
			viewHandler: WMDE.View.SectionInfo.createDonorTypeSectionInfo(
				$( '.donator-type' ),
				{
					'person': 'icon-account_circle',
					'firma': 'icon-work',
					'anonym': 'icon-visibility_off'
				},
				WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#type-donator .wrap-input' ) ),
				WMDE.FormDataExtractor.mapFromSelectOptions( $( '#country' ) )
			),
			stateKey: [
				'donationFormContent.addressType',
				'donationFormContent.salutation',
				'donationFormContent.title',
				'donationFormContent.firstName',
				'donationFormContent.lastName',
				'donationFormContent.companyName',
				'donationFormContent.street',
				'donationFormContent.postcode',
				'donationFormContent.city',
				'donationFormContent.country',
				'donationFormContent.email',
				'validity.address' // @todo This currently does not know "dataEntered", i.e. can not show neutral state
			]
		}
    ],
    store
  );

  // Validity checks for different form parts

  function addressIsValid() {
    var validity = store.getState().validity,
      formContent = store.getState().donationFormContent;
    return formContent.addressType === 'anonym' || validity.address;
  }

  function bankDataIsValid() {
    var state = store.getState();
	  // @fixme: Move special handling of BEZ into reducer/store/validator
    return state.donationFormContent.paymentType !== 'BEZ' ||
    (
    state.donationInputValidation.bic.dataEntered && state.donationInputValidation.bic.isValid &&
    state.donationInputValidation.iban.dataEntered && state.donationInputValidation.iban.isValid
    ) ||
    (
    state.donationInputValidation.accountNumber.dataEntered && state.donationInputValidation.accountNumber.isValid &&
    state.donationInputValidation.bankCode.dataEntered && state.donationInputValidation.bankCode.isValid
    );
  }

  function formDataIsValid() {
    var validity = store.getState().validity;
    return validity.paymentData && addressIsValid() && bankDataIsValid();
  }

  function triggerValidityCheckForPersonalData() {
    var formContent = store.getState().donationFormContent;

    if ( !addressIsValid() ) {
      if ( formContent.addressType === 'person' ) {
        store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
          [ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'email' ],
          [ 'companyName' ]
        ) );
      } else if ( formContent.addressType === 'firma' ) {
        store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
          [ 'companyName', 'street', 'postcode', 'city', 'email' ],
          [ 'salutation', 'firstName', 'lastName' ]
        ) );
      }
    }

    if ( !bankDataIsValid() ) {
      store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
        [ 'iban', 'bic' ]
      ) );
    }
  }

  function paymentDataIsValid() {

    var currentState = store.getState();
    return currentState.validity.paymentData;
  }

  // connect DOM elements to actions

  $('form').on('submit', function () {
    triggerValidityCheckForPersonalData();

    if (formDataIsValid()) {
      return true;
    }
    return false;
  });

  // Set initial form values
  var initSetup = initData.data( 'initial-form-values' );
  // backend delivers amount as a german-formatted "float" string
  initSetup.amount = currencyFormatter.parse( initSetup.amount );
  store.dispatch( actions.newInitializeContentAction( initSetup ) );

  var $introBanner = $('.introduction.banner');
  var $introDefault = $('.introduction.default');

  // @todo Check if this are all conditions that would be considered "successful deeplink", warrant the special header
  if (initSetup.amount && initSetup.paymentIntervalInMonths && initSetup.paymentType) {
    $introBanner.removeClass('hidden');
    $introDefault.addClass('hidden');
  }

} );


1			$( function () {
2			/** global: WMDE */
3
4			var initData = $( '#init-form' ),
5			store = WMDE.Store.createDonationStore( WMDE.createInitialStateFromViolatedFields(
6			initData.data( 'violatedFields' ),
7			initData.data( 'initial-validation-result' ) )
8			),
9			actions = WMDE.Actions
10			currencyFormatter = WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' )
			0 ignored issues – show Bug introduced 2017-11-24 11:22 UTC by Report Bug Copy Issue Report The variable `currencyFormatter` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window.currencyFormatter`. Loading history...
11			;
12
13			WMDE.StoreUpdates.connectComponentsToStore(
14			[
15			WMDE.Components.createAmountComponent( store, $('#amount-typed'), $( '.wrap-amounts input[type="radio"]' ), $( '#amount-hidden' ) ),
16			WMDE.Components.createRadioComponent( store, $('input[name="zahlweise"]'), 'paymentType' ),
17			WMDE.Components.createPaymentIntervalComponent( store, $('input[name="intervalType"]'), $('input[name="periode"]') ),
18			WMDE.Components.createBankDataComponent( store, {
19			ibanElement: $( '#iban' ),
20			bicElement: $( '#bic' ),
21			accountNumberElement: $( '#account-number' ),
22			bankCodeElement: $( '#bank-code' ),
23			bankNameFieldElement: $( '#field-bank-name' ),
24			bankNameDisplayElement: $( '#bank-name' )
25			} ),
26			WMDE.Components.createRadioComponent( store, $( 'input[name="addressType"]' ), 'addressType' ),
27			WMDE.Components.createSelectMenuComponent( store, $( 'select[name="salutation"]' ), 'salutation' ),
28			WMDE.Components.createSelectMenuComponent( store, $( '#title' ), 'title' ),
29			WMDE.Components.createValidatingTextComponent( store, $( '#first-name' ), 'firstName' ),
30			WMDE.Components.createValidatingTextComponent( store, $( '#last-name' ), 'lastName' ),
31			WMDE.Components.createValidatingTextComponent( store, $( '#company-name' ), 'companyName' ),
32			WMDE.Components.createValidatingTextComponent( store, $( '#street' ), 'street' ),
33			WMDE.Components.createValidatingTextComponent( store, $( '#adress-company' ), 'street' ),
34			WMDE.Components.createValidatingTextComponent( store, $( '#post-code' ), 'postcode' ),
35			WMDE.Components.createValidatingTextComponent( store, $( '#post-code-company' ), 'postcode' ),
36			WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ),
37			WMDE.Components.createValidatingTextComponent( store, $( '#city-company' ), 'city' ),
38			WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ),
39			WMDE.Components.createSelectMenuComponent( store, $( '#country-company' ), 'country' ),
40			WMDE.Components.createValidatingTextComponent( store, $( '#email' ), 'email' ),
41			WMDE.Components.createValidatingTextComponent( store, $( '#email-company' ), 'email' ),
42			WMDE.Components.createCheckboxComponent( store, $( '#newsletter' ), 'confirmNewsletter' ),
43			WMDE.Components.createCheckboxComponent( store, $( '#newsletter-company' ), 'confirmNewsletter' )
44			],
45			store,
46			'donationFormContent'
47			);
48
49			WMDE.StoreUpdates.connectValidatorsToStore(
50			function ( initialValues ) {
51			return [
52			WMDE.ValidationDispatchers.createAmountValidationDispatcher(
53			WMDE.FormValidation.createAmountValidator( initData.data( 'validate-amount-url' ) ),
54			initialValues
55			),
56			WMDE.ValidationDispatchers.createAddressValidationDispatcher(
57			WMDE.FormValidation.createAddressValidator(
58			initData.data( 'validate-address-url' ),
59			WMDE.FormValidation.DefaultRequiredFieldsForAddressType
60			),
61			initialValues
62			),
63			WMDE.ValidationDispatchers.createEmailValidationDispatcher(
64			WMDE.FormValidation.createEmailAddressValidator( initData.data( 'validate-email-address-url' ) ),
65			initialValues
66			),
67			WMDE.ValidationDispatchers.createBankDataValidationDispatcher(
68			WMDE.FormValidation.createBankDataValidator(
69			initData.data( 'validate-iban-url' ),
70			initData.data( 'generate-iban-url' )
71			),
72			initialValues
73			)
74			];
75			},
76			store,
77			initData.data( 'initial-form-values' ),
78			'donationFormContent'
79			);
80
81			// Connect view handlers to changes in specific parts in the global state, designated by 'stateKey'
82			WMDE.StoreUpdates.connectViewHandlersToStore(
83			[
84			{
85			viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), {
86			amount: 'Betrag',
87			paymentType: 'Zahlungsart',
88			salutation: 'Anrede',
89			title: 'Titel',
90			firstName: 'Vorname',
91			lastName: 'Nachname',
92			companyName: 'Firma',
93			street: 'Straße',
94			postcode: 'PLZ',
95			city: 'Ort',
96			country: 'Land',
97			email: 'E-Mail',
98			iban: 'IBAN',
99			bic: 'BIC',
100			accountNumber: 'Kontonummer',
101			bankCode: 'Bankleitzahl'
102			} ),
103			stateKey: 'donationInputValidation'
104			},
105			// Hide anonymous payment when doing direct debit
106			{
107			viewHandler: WMDE.View.createElementClassSwitcher( $( '#type-donator .wrap-field.anonym .wrap-input' ), /BEZ/, 'disabled' ),
108			stateKey: 'donationFormContent.paymentType'
109			},
110			// Show "needs to support recurring debiting" notice for payments types that provide that info (payment_type_*_recurrent_info)
111			{
112			viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#payment-method .info-text .info-recurrent' ), /^(1\|3\|6\|12)/ ),
113			stateKey: 'donationFormContent.paymentIntervalInMonths'
114			},
115			{
116			viewHandler: WMDE.View.createSuboptionDisplayHandler(
117			$( '#recurrence' )
118			),
119			stateKey: 'donationFormContent.paymentIntervalInMonths'
120			},
121			{
122			viewHandler: WMDE.View.createSuboptionDisplayHandler(
123			$( '#donation-payment' )
124			),
125			stateKey: 'donationFormContent.paymentType'
126			},
127			{
128			viewHandler: WMDE.View.createSuboptionDisplayHandler(
129			$( '#type-donator' )
130			),
131			stateKey: 'donationFormContent.addressType'
132			},
133			{
134			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ),
135			stateKey: 'donationInputValidation.firstName'
136			},
137			{
138			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ),
139			stateKey: 'donationInputValidation.lastName'
140			},
141			{
142			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ),
143			stateKey: 'donationInputValidation.street'
144			},
145			{
146			viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#adress-company') ),
147			stateKey: 'donationInputValidation.street'
148			},
149			{
150			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
151			stateKey: 'donationInputValidation.postcode'
152			},
153			{
154			viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#post-code-company') ),
155			stateKey: 'donationInputValidation.postcode'
156			},
157			{
158			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
159			stateKey: 'donationInputValidation.postcode'
160			},
161			{
162			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ),
163			stateKey: 'donationInputValidation.city'
164			},
165			{
166			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city-company' ) ),
167			stateKey: 'donationInputValidation.city'
168			},
169			{
170			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ),
171			stateKey: 'donationInputValidation.email'
172			},
173			{
174			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email-company' ) ),
175			stateKey: 'donationInputValidation.email'
176			},
177			{
178			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ),
179			stateKey: 'donationInputValidation.companyName'
180			},
181			{
182
183			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ),
184			stateKey: 'donationInputValidation.iban'
185			},
186			{
187			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ),
188			stateKey: 'donationInputValidation.bic'
189			},
190			{
191			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ),
192			stateKey: 'donationInputValidation.accountNumber'
193			},
194			{
195			viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ),
196			stateKey: 'donationInputValidation.bankCode'
197			},
198			{
199			viewHandler: WMDE.View.createFieldValueValidityIndicator( $('#amount-typed') ),
200			stateKey: 'donationInputValidation.amount'
201			},
202			{
203			viewHandler: WMDE.View.createCustomAmountField( $('#amount-typed') ),
204			stateKey: 'donationInputValidation.amount'
205			},
206			{
207			viewHandler: WMDE.View.SectionInfo.createFrequencySectionInfo(
208			$( '.banner .frequency' ),
209			{
210			'0': 'icon-unique',
211			'1': 'icon-repeat_1',
212			'3': 'icon-repeat_3',
213			'6': 'icon-repeat_6',
214			'12': 'icon-repeat_12'
215			},
216			WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#recurrence .wrap-input' ) ),
217			WMDE.FormDataExtractor.mapFromRadioInfoTexts( $( '#recurrence .wrap-field' ) )
218			),
219			stateKey: [
220			'donationFormContent.paymentIntervalInMonths'
221			]
222			},
223			{
224			viewHandler: WMDE.View.SectionInfo.createAmountFrequencySectionInfo(
225			$( '.amount' ),
226			{
227			'0': 'icon-unique',
228			'1': 'icon-repeat_1',
229			'3': 'icon-repeat_3',
230			'6': 'icon-repeat_6',
231			'12': 'icon-repeat_12'
232			},
233			WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#recurrence .wrap-input' ) ),
234			WMDE.FormDataExtractor.mapFromRadioInfoTexts( $( '#recurrence .wrap-field' ) ),
235			currencyFormatter
236			),
237			stateKey: [
238			'donationFormContent.amount',
239			'donationFormContent.paymentIntervalInMonths',
240			'donationInputValidation.amount' // @todo should contain amount and interval. Add neutral state
241			]
242			},
243			{
244			viewHandler: WMDE.View.SectionInfo.createPaymentTypeSectionInfo(
245			$( '.payment-method' ),
246			{
247			'PPL': 'icon-paypal',
248			'MCP': 'icon-credit_card2',
249			'BEZ': 'icon-SEPA-2',
250			'UEB': 'icon-ubeiwsung-1',
251			'SUB': 'icon-TODO' // @todo Find icon for SUB
252			},
253			WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#payment-method .wrap-input' ) ),
254			WMDE.FormDataExtractor.mapFromRadioInfoTexts( $( '#payment-method .wrap-field' ) )
255			),
256			stateKey: [
257			'donationFormContent.paymentType',
258			'donationFormContent.iban',
259			'donationFormContent.bic',
260			'validity.paymentData' // @todo should contain bankData validity if applicable, too. Add neutral state
261			]
262			},
263			{
264			viewHandler: WMDE.View.SectionInfo.createDonorTypeSectionInfo(
265			$( '.donator-type' ),
266			{
267			'person': 'icon-account_circle',
268			'firma': 'icon-work',
269			'anonym': 'icon-visibility_off'
270			},
271			WMDE.FormDataExtractor.mapFromLabeledRadios( $( '#type-donator .wrap-input' ) ),
272			WMDE.FormDataExtractor.mapFromSelectOptions( $( '#country' ) )
273			),
274			stateKey: [
275			'donationFormContent.addressType',
276			'donationFormContent.salutation',
277			'donationFormContent.title',
278			'donationFormContent.firstName',
279			'donationFormContent.lastName',
280			'donationFormContent.companyName',
281			'donationFormContent.street',
282			'donationFormContent.postcode',
283			'donationFormContent.city',
284			'donationFormContent.country',
285			'donationFormContent.email',
286			'validity.address' // @todo This currently does not know "dataEntered", i.e. can not show neutral state
287			]
288			}
289			],
290			store
291			);
292
293			// Validity checks for different form parts
294
295			function addressIsValid() {
296			var validity = store.getState().validity,
297			formContent = store.getState().donationFormContent;
298			return formContent.addressType === 'anonym' \|\| validity.address;
299			}
300
301			function bankDataIsValid() {
302			var state = store.getState();
303			// @fixme: Move special handling of BEZ into reducer/store/validator
304			return state.donationFormContent.paymentType !== 'BEZ' \|\|
305			(
306			state.donationInputValidation.bic.dataEntered && state.donationInputValidation.bic.isValid &&
307			state.donationInputValidation.iban.dataEntered && state.donationInputValidation.iban.isValid
308			) \|\|
309			(
310			state.donationInputValidation.accountNumber.dataEntered && state.donationInputValidation.accountNumber.isValid &&
311			state.donationInputValidation.bankCode.dataEntered && state.donationInputValidation.bankCode.isValid
312			);
313			}
314
315			function formDataIsValid() {
316			var validity = store.getState().validity;
317			return validity.paymentData && addressIsValid() && bankDataIsValid();
318			}
319
320			function triggerValidityCheckForPersonalData() {
321			var formContent = store.getState().donationFormContent;
322
323			if ( !addressIsValid() ) {
324			if ( formContent.addressType === 'person' ) {
325			store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
326			[ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'email' ],
327			[ 'companyName' ]
328			) );
329			} else if ( formContent.addressType === 'firma' ) {
330			store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
331			[ 'companyName', 'street', 'postcode', 'city', 'email' ],
332			[ 'salutation', 'firstName', 'lastName' ]
333			) );
334			}
335			}
336
337			if ( !bankDataIsValid() ) {
338			store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
339			[ 'iban', 'bic' ]
340			) );
341			}
342			}
343
344			function paymentDataIsValid() {
			0 ignored issues – show introduced 2017-11-21 15:47 UTC by Report Bug Copy Issue Report The function `paymentDataIsValid` does not seem to be used and can be removed. Loading history...
345			var currentState = store.getState();
346			return currentState.validity.paymentData;
347			}
348
349			// connect DOM elements to actions
350
351			$('form').on('submit', function () {
352			triggerValidityCheckForPersonalData();
353
354			if (formDataIsValid()) {
355			return true;
356			}
357			return false;
358			});
359
360			// Set initial form values
361			var initSetup = initData.data( 'initial-form-values' );
362			// backend delivers amount as a german-formatted "float" string
363			initSetup.amount = currencyFormatter.parse( initSetup.amount );
364			store.dispatch( actions.newInitializeContentAction( initSetup ) );
365
366			var $introBanner = $('.introduction.banner');
367			var $introDefault = $('.introduction.default');
368
369			// @todo Check if this are all conditions that would be considered "successful deeplink", warrant the special header
370			if (initSetup.amount && initSetup.paymentIntervalInMonths && initSetup.paymentType) {
371			$introBanner.removeClass('hidden');
372			$introDefault.addClass('hidden');
373			}
374
375			} );
376

wmde / FundraisingFrontend

Pull Request — master (#1036)

skins/cat17/src/scripts/donationForm.js A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like