Code Duplication - wmde/FundraisingFrontend - Measure and Improve Code Quality continuously with Scrutinizer

Code Duplication Length = 360-415 lines in 2 locations

web/res/js/donationForm.js 1 location


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

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

	WMDE.StoreUpdates.connectComponentsToStore(
		[
			WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ), $( '.amount-hidden' ) ),
			WMDE.Components.createRadioComponent( store, $( '.payment-type-select' ), 'paymentType' ),
			WMDE.Components.createPaymentIntervalComponent( store, $( '.interval-type-select' ), $( '.payment-period-select' ) ),
			WMDE.Components.createBankDataComponent( store, {
				ibanElement: $( '#iban' ),
				bicElement: $( '#bic' ),
				accountNumberElement: $( '#account-number' ),
				bankCodeElement: $( '#bank-code' ),
				bankNameFieldElement: $( '#field-bank-name' ),
				bankNameDisplayElement: $( '#bank-name' ),
				debitTypeElement: $( '.debit-type-select' )
			} ),
			WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ),
			WMDE.Components.createRadioComponent( store, $( '.salutation' ), 'salutation' ),
			WMDE.Components.createSelectMenuComponent( store, $( '.personal-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, $( '#post-code' ), 'postcode' ),
			WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ),
			WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ),
			WMDE.Components.createTextComponent( store, $( '#email' ), 'email' ),
			WMDE.Components.createValidatingCheckboxComponent( store, $( '#confirm_sepa' ), 'confirmSepa' ),
			WMDE.Components.createValidatingCheckboxComponent( store, $( '#confirm_shortterm' ), 'confirmShortTerm' )
		],
		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
				),
				WMDE.ValidationDispatchers.createSepaConfirmationValidationDispatcher(
					WMDE.FormValidation.createSepaConfirmationValidator(),
					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.createFormPageVisibilityHandler( {
					payment: $( "#paymentPage" ),
					personalData: $( "#personalDataPage" ),
					bankConfirmation: $( '#bankConfirmationPage' )
				} ),
				stateKey: 'formPagination'
			},
			{
				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',
					confirmSepa: 'SEPA-Lastschrift',
					confirmShortTerm: 'SEPA-Informationsfrist'
				} ),
				stateKey: 'donationInputValidation'
			},
			// show payment periods if interval payment is selected
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.periode-2-list' ), /^(1|3|6|12)$/ ),
				stateKey: 'donationFormContent.paymentIntervalInMonths'
			},
			// Show bank data input when doing direct debit
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '#bank-data' ), 'BEZ' ),
				stateKey: 'donationFormContent.paymentType'
			},
			// Show the right submit buttons on page 2, depending on payment type
			{
				viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit2' ), /^MCP|PPL|UEB/ ),
				stateKey: 'donationFormContent.paymentType'
			},
			{
				viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit2' ), 'BEZ' ),
				stateKey: 'donationFormContent.paymentType'
			},
			// Hide anonymous payment when doing direct debit
			{
				viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '.anonymous-payment-select, #tooltip-icon-addresstype' ), /^MCP|PPL|UEB/ ),
				stateKey: 'donationFormContent.paymentType'
			},
			// Switch bank data input between IBAN/BIC and Account Number/Bank code
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ),
				stateKey: 'donationFormContent.debitType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ),
				stateKey: 'donationFormContent.debitType'
			},
			// Show only the right data fields for personal data
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-person' ), 'person' ),
				stateKey: 'donationFormContent.addressType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-company' ), 'firma' ),
				stateKey: 'donationFormContent.addressType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-full, #notice-unsubscribe' ), /firma|person/ ),
				stateKey: 'donationFormContent.addressType'
			},
			// Show notice for anonymous donations
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.notice-anonymous' ), 'anonym' ),
				stateKey: 'donationFormContent.addressType'
			},
			// Show "credit card required" notice for recurrent payments via Paypal
			{
				viewHandler: WMDE.View.createRecurrentPaypalNoticeHandler(
					WMDE.View.Animator.createSlidingElementAnimator( $( '.notice-ppl-recurrent' ) )
				),
				stateKey: 'donationFormContent'
			},
			{
				viewHandler: WMDE.View.createPaymentSummaryDisplayHandler(
					$( '.interval-text' ),
					$( '.amount-formatted'),
					$( '#payment-display'),
					{
						'0': 'einmalig',
						'1': 'monatlich',
						'3': 'quartalsweise',
						'6': 'halbjährlich',
						'12': 'jährlich'
					},
					{
						'BEZ': 'Lastschrift',
						'UEB': 'Überweisung',
						'MCP': 'Kreditkarte',
						'PPL': 'PayPal'
					},
					WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' )
				),
				stateKey: 'donationFormContent'
			},
			{
				viewHandler: WMDE.View.createDisplayAddressHandler( {
					fullName: $( '.confirm-name' ),
					street: $( '.confirm-street' ),
					postcode: $( '.confirm-postcode' ),
					city: $( '.confirm-city' ),
					country: $( '.confirm-country' ),
					email: $( '.confirm-email' )
				} ),
				stateKey: 'donationFormContent'
			},
			{
				viewHandler: WMDE.View.createBankDataDisplayHandler(
					$( '.confirm-iban' ),
					$( '.confirm-bic' ),
					$( '.confirm-bank-name' )
				),
				stateKey: 'donationFormContent'
			},
			{
				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( $( '#post-code' ) ),
				stateKey: 'donationInputValidation.postcode'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ),
				stateKey: 'donationInputValidation.city'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ),
				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-input' ) ),
				stateKey: 'donationInputValidation.amount'
			}
		],
		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 validity = store.getState().validity,
			formContent = store.getState().donationFormContent;
		return formContent.paymentType !== 'BEZ' || validity.bankData;
	}

	function personalDataPageIsValid() {
		var validity = store.getState().validity;
		return !hasInvalidFields() && paymentDataIsValid() && addressIsValid() && bankDataIsValid();
	}

	function triggerValidityCheckForPaymentPage() {
		if ( !paymentDataIsValid() ) {
			store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'amount' ] ) );
		}
	}

	function triggerValidityCheckForPersonalDataPage() {
		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' ],
					[ 'firstName', 'lastName' ]
				) );
			}
		}

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

	function triggerValidityCheckForSepaPage() {
		if ( !store.getState().validity.sepaConfirmation ) {
			store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
				[ 'confirmSepa', 'confirmShortTerm' ]
			) );
		}
	}

	function hasInvalidFields() {
		var invalidFields = false;
		$.each( store.getState().donationInputValidation, function( key, value ) {
			if ( value.isValid === false ) {
				invalidFields = true;
			}
		} );

		return invalidFields;
	}

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

	function displayErrorBox() {
		$( '#validation-errors' ).show();
		$( 'html, body' ).animate( { scrollTop: $( '#validation-errors' ).offset().top } );
	}

	function triggerPiwikEvent( eventData ) {
		if ( typeof _paq !== 'undefined' ) {
			_paq.push( eventData );
		}
	}

	function handlePaymentDataSubmit() {
		if ( paymentDataIsValid() ) {
			store.dispatch( actions.newNextPageAction() );
			triggerPiwikEvent( [ 'trackGoal', 2 ] );
		} else {
			triggerValidityCheckForPaymentPage();
			displayErrorBox();
		}
	}

	function handlePersonalDataSubmitForDirectDebit() {
		if ( personalDataPageIsValid() ) {
			store.dispatch( actions.newNextPageAction() );
			triggerPiwikEvent( [ 'trackGoal', 4 ] );
		} else {
			triggerValidityCheckForPersonalDataPage();
			displayErrorBox();
		}
	}

	function handlePersonalDataSubmitForNonDirectDebit() {
		if ( personalDataPageIsValid() ) {
			$( '#donForm2' ).submit();
		} else {
			triggerValidityCheckForPersonalDataPage();
			displayErrorBox();
		}
	}

	// connect DOM elements to actions

	$( '#continueFormSubmit1' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePaymentDataSubmit, store ) );

	$( '#continueFormSubmit2' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePersonalDataSubmitForDirectDebit, store )  );

	$( '#finishFormSubmit2' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePersonalDataSubmitForDirectDebit, store ) );

	$( '.back-button' ).click( function () {
		store.dispatch( actions.newResetFieldValidityAction( [ 'confirmSepa', 'confirmShortTerm' ] ) );
		store.dispatch( actions.newPreviousPageAction() );
	} );

	$( '#finishFormSubmit3' ).click( function () {
		var validity = store.getState().validity;
		// we use validity directly here because SEPA really needs these values to be valid
		if ( validity.paymentData && validity.address && validity.bankData && validity.sepaConfirmation ) {
			$( '#donForm2' ).submit();
		} else {
			triggerValidityCheckForSepaPage();
			displayErrorBox();
		}
	} );

	// Set initial form values
	store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) );

	// Initialize form pages
	store.dispatch( actions.newAddPageAction( 'payment' ) );
	store.dispatch( actions.newAddPageAction( 'personalData' ) );
	store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) );

	// switch to personal page if payment data is filled in
	if ( paymentDataIsValid() ) {
		store.dispatch( actions.newNextPageAction() );
	}

} );


web/res/js/membershipForm.js 1 location


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

	var initData = $( '#init-form' ),
		store = WMDE.Store.createMembershipStore(
			WMDE.createInitialStateFromViolatedFields( initData.data( 'violatedFields' ), {} )
		),
		actions = WMDE.Actions;

	WMDE.StoreUpdates.connectComponentsToStore(
		[
			WMDE.Components.createRadioComponent( store, $( '.membership-type-select' ), 'membershipType' ),
			WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ),
			WMDE.Components.createRadioComponent( store, $( '.salutation-select' ), 'salutation' ),
			WMDE.Components.createSelectMenuComponent( store, $( '#personal-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, $( '#post-code' ), 'postcode' ),
			WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ),
			WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ),
			WMDE.Components.createTextComponent( store, $( '#email' ), 'email' ),
			WMDE.Components.createValidatingTextComponent( store, $( '#date-of-birth' ), 'dateOfBirth' ),
			WMDE.Components.createValidatingTextComponent( store, $( '#phone' ), 'phoneNumber' ),
			WMDE.Components.createRadioComponent( store, $( '.payment-type-select' ), 'paymentType' ),
			WMDE.Components.createRadioComponent( store, $( '.payment-period-select' ), 'paymentIntervalInMonths' ),
			WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ), $( '#amount-hidden' ) ),
			WMDE.Components.createBankDataComponent( store, {
				ibanElement: $( '#iban' ),
				bicElement: $( '#bic' ),
				accountNumberElement: $( '#account-number' ),
				bankCodeElement: $( '#bank-code' ),
				bankNameFieldElement: $( '#field-bank-name' ),
				bankNameDisplayElement: $( '#bank-name' ),
				debitTypeElement: $( '.debit-type-select' )
			} ),
			WMDE.Components.createValidatingCheckboxComponent( store, $( '#confirmSepa' ), 'confirmSepa' )
		],
		store,
		'membershipFormContent'
	);

	WMDE.StoreUpdates.connectValidatorsToStore(
		function ( initialValues ) {
			return [
				WMDE.ValidationDispatchers.createFeeValidationDispatcher(
					WMDE.FormValidation.createFeeValidator( initData.data( 'validate-fee-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
				),
				WMDE.ValidationDispatchers.createSepaConfirmationValidationDispatcher(
					WMDE.FormValidation.createSepaConfirmationValidator(),
					initialValues
				)
			];
		},
		store,
		initData.data( 'initial-form-values' ),
		'membershipFormContent'
	);

	// Connect view handlers to changes in specific parts in the global state, designated by 'stateKey'
	WMDE.StoreUpdates.connectViewHandlersToStore(
		[
			{
				viewHandler: WMDE.View.createFormPageVisibilityHandler( {
					personalData: $( "#personalDataPage" ),
					bankConfirmation: $( '#bankConfirmationPage' )
				} ),
				stateKey: 'formPagination'
			},
			{
				viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), {
					amount: 'Betrag',
					salutation: 'Anrede',
					title: 'Titel',
					firstName: 'Vorname',
					lastName: 'Nachname',
					companyName: 'Firma',
					street: 'Straße',
					postcode: 'PLZ',
					city: 'Ort',
					country: 'Land',
					email: 'E-Mail',
					dateOfBirth: 'Geburtsdatum',
					phone: 'Telefonnummer',
					iban: 'IBAN',
					bic: 'BIC',
					accountNumber: 'Kontonummer',
					bankCode: 'Bankleitzahl',
					confirmSepa: 'SEPA-Lastschrift'
				} ),
				stateKey: 'membershipInputValidation'
			},
			{
				viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit' ), /^PPL$|^$/ ),
				stateKey: 'membershipFormContent.paymentType'
			},
			{
				viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit' ), 'BEZ' ),
				stateKey: 'membershipFormContent.paymentType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.fields-direct-debit' ), 'BEZ' ),
				stateKey: 'membershipFormContent.paymentType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ),
				stateKey: 'membershipFormContent.debitType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ),
				stateKey: 'membershipFormContent.debitType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.person-name' ), 'person' ),
				stateKey: 'membershipFormContent.addressType'
			},
			{
				viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.company-name' ), 'firma' ),
				stateKey: 'membershipFormContent.addressType'
			},
			{
				viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#address-type-2' ).parent(), 'sustaining' ),
				stateKey: 'membershipFormContent.membershipType'
			},
			{
				viewHandler: WMDE.View.createFeeOptionSwitcher( [ $( '#amount-1' ), $( '#amount-2' ), $( '#amount-3' ), $( '#amount-4' ), $( '#amount-5' ), $( '#amount-6' ), $( '#amount-7' ) ], { person: 24, firma: 100 } ),
				stateKey: 'membershipFormContent'
			},
			{
				viewHandler: WMDE.View.createPaymentSummaryDisplayHandler(
					$( '#membership-confirm-interval' ),
					$( '#membership-confirm-fee'),
					$( '#membership-payment-type' ), // does not exist yet
					{
						'0': 'einmalig',
						'1': 'monatlich',
						'3': 'quartalsweise',
						'6': 'halbjährlich',
						'12': 'jährlich'
					},
					{
						'BEZ': 'Lastschrift',
						'UEB': 'Überweisung',
						'MCP': 'Kreditkarte',
						'PPL': 'PayPal'
					},
					WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' )
				),
				stateKey: 'membershipFormContent'
			},
			{
				viewHandler: WMDE.View.createDisplayAddressHandler( {
					fullName: $( '#membership-confirm-name' ),
					street: $( '#membership-confirm-street' ),
					postcode: $( '#membership-confirm-postcode' ),
					city: $( '#membership-confirm-city' ),
					country: $( '#membership-confirm-country' ),
					email: $( '#membership-confirm-mail' )
				} ),
				stateKey: 'membershipFormContent'
			},
			{
				viewHandler: WMDE.View.createBankDataDisplayHandler(
					$( '#membership-confirm-iban' ),
					$( '#membership-confirm-bic' ),
					$( '#membership-confirm-bankname' )
				),
				stateKey: 'membershipFormContent'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ),
				stateKey: 'membershipInputValidation.firstName'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ),
				stateKey: 'membershipInputValidation.lastName'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ),
				stateKey: 'membershipInputValidation.street'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
				stateKey: 'membershipInputValidation.postcode'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ),
				stateKey: 'membershipInputValidation.city'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ),
				stateKey: 'membershipInputValidation.email'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ),
				stateKey: 'membershipInputValidation.companyName'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#date-of-birth' ) ),
				stateKey: 'membershipInputValidation.dateOfBirth'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#phone' ) ),
				stateKey: 'membershipInputValidation.phoneNumber'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ),
				stateKey: 'membershipInputValidation.iban'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ),
				stateKey: 'membershipInputValidation.bic'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ),
				stateKey: 'membershipInputValidation.accountNumber'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ),
				stateKey: 'membershipInputValidation.bankCode'
			},
			{
				viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '.amount-input' ) ),
				stateKey: 'membershipInputValidation.amount'
			}
		],
		store
	);

	// Validity checks for different form parts

	function displayErrorBox() {
		$( '#validation-errors' ).show();
		$( 'html, body' ).animate( { scrollTop: $( '#validation-errors' ).offset().top } );
	}

	function addressIsValid() {
		return store.getState().validity.address;
	}

	function bankDataIsValid() {
		return store.getState().membershipFormContent.paymentType !== 'BEZ' || store.getState().validity.bankData;
	}

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

	function triggerValidityCheckForPersonalDataPage() {
		var formContent = store.getState().membershipFormContent;

		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' ],
					[ 'firstName', 'lastName', 'salutation' ]
				) );
			}
		}

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

		if ( !store.getState().validity.amount ) {
			store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'amount' ] ) );
		}
	}

	function hasInvalidFields() {
		var invalidFields = false;
		$.each( store.getState().membershipInputValidation, function( key, value ) {
			if ( value.isValid === false ) {
				invalidFields = true;
			}
		} );

		return invalidFields;
	}

	function triggerValidityCheckForSepaPage() {
		if ( !store.getState().validity.sepaConfirmation ) {
			store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'confirmSepa' ] ) );
		}
	}

	function handleMembershipDataSubmitForDirectDebit() {
		if ( formDataIsValid() ) {
			store.dispatch( actions.newNextPageAction() );
			$( 'section#donation-amount, section#donation-sheet' ).hide();
		} else {
			triggerValidityCheckForPersonalDataPage();
			displayErrorBox();
		}
	}

	function handleMembershipDataSubmitForNonDirectDebit() {
		if ( formDataIsValid() ) {
			$( '#memForm' ).submit();
		} else {
			triggerValidityCheckForPersonalDataPage();
			displayErrorBox();
		}
	}

	$( '#continueFormSubmit' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handleMembershipDataSubmitForDirectDebit, store ) );

	$( '#finishFormSubmit' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handleMembershipDataSubmitForNonDirectDebit, store ) );

	$( '.back-button' ).click( function () {
		// TODO check if page is valid
		store.dispatch( actions.newResetFieldValidityAction( [ 'confirmSepa' ] ) );
		store.dispatch( actions.newPreviousPageAction() );
	} );

	$( '#finishFormSubmit2' ).click( function () {
		if ( store.getState().validity.sepaConfirmation ) {
			$( '#memForm' ).submit();
		} else {
			triggerValidityCheckForSepaPage();
			displayErrorBox();
		}
	} );

	// Initialize form pages
	store.dispatch( actions.newAddPageAction( 'personalData' ) );
	store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) );

	// Set initial form values
	store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) );

} );


		@@ 1-415 (lines=415) @@
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		;
11
12		WMDE.StoreUpdates.connectComponentsToStore(
13		[
14		WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ), $( '.amount-hidden' ) ),
15		WMDE.Components.createRadioComponent( store, $( '.payment-type-select' ), 'paymentType' ),
16		WMDE.Components.createPaymentIntervalComponent( store, $( '.interval-type-select' ), $( '.payment-period-select' ) ),
17		WMDE.Components.createBankDataComponent( store, {
18		ibanElement: $( '#iban' ),
19		bicElement: $( '#bic' ),
20		accountNumberElement: $( '#account-number' ),
21		bankCodeElement: $( '#bank-code' ),
22		bankNameFieldElement: $( '#field-bank-name' ),
23		bankNameDisplayElement: $( '#bank-name' ),
24		debitTypeElement: $( '.debit-type-select' )
25		} ),
26		WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ),
27		WMDE.Components.createRadioComponent( store, $( '.salutation' ), 'salutation' ),
28		WMDE.Components.createSelectMenuComponent( store, $( '.personal-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, $( '#post-code' ), 'postcode' ),
34		WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ),
35		WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ),
36		WMDE.Components.createTextComponent( store, $( '#email' ), 'email' ),
37		WMDE.Components.createValidatingCheckboxComponent( store, $( '#confirm_sepa' ), 'confirmSepa' ),
38		WMDE.Components.createValidatingCheckboxComponent( store, $( '#confirm_shortterm' ), 'confirmShortTerm' )
39		],
40		store,
41		'donationFormContent'
42		);
43
44		WMDE.StoreUpdates.connectValidatorsToStore(
45		function ( initialValues ) {
46		return [
47		WMDE.ValidationDispatchers.createAmountValidationDispatcher(
48		WMDE.FormValidation.createAmountValidator( initData.data( 'validate-amount-url' ) ),
49		initialValues
50		),
51		WMDE.ValidationDispatchers.createAddressValidationDispatcher(
52		WMDE.FormValidation.createAddressValidator(
53		initData.data( 'validate-address-url' ),
54		WMDE.FormValidation.DefaultRequiredFieldsForAddressType
55		),
56		initialValues
57		),
58		WMDE.ValidationDispatchers.createEmailValidationDispatcher(
59		WMDE.FormValidation.createEmailAddressValidator( initData.data( 'validate-email-address-url' ) ),
60		initialValues
61		),
62		WMDE.ValidationDispatchers.createBankDataValidationDispatcher(
63		WMDE.FormValidation.createBankDataValidator(
64		initData.data( 'validate-iban-url' ),
65		initData.data( 'generate-iban-url' )
66		),
67		initialValues
68		),
69		WMDE.ValidationDispatchers.createSepaConfirmationValidationDispatcher(
70		WMDE.FormValidation.createSepaConfirmationValidator(),
71		initialValues
72		)
73		];
74		},
75		store,
76		initData.data( 'initial-form-values' ),
77		'donationFormContent'
78		);
79
80		// Connect view handlers to changes in specific parts in the global state, designated by 'stateKey'
81		WMDE.StoreUpdates.connectViewHandlersToStore(
82		[
83		{
84		viewHandler: WMDE.View.createFormPageVisibilityHandler( {
85		payment: $( "#paymentPage" ),
86		personalData: $( "#personalDataPage" ),
87		bankConfirmation: $( '#bankConfirmationPage' )
88		} ),
89		stateKey: 'formPagination'
90		},
91		{
92		viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), {
93		amount: 'Betrag',
94		paymentType: 'Zahlungsart',
95		salutation: 'Anrede',
96		title: 'Titel',
97		firstName: 'Vorname',
98		lastName: 'Nachname',
99		companyName: 'Firma',
100		street: 'Straße',
101		postcode: 'PLZ',
102		city: 'Ort',
103		country: 'Land',
104		email: 'E-Mail',
105		iban: 'IBAN',
106		bic: 'BIC',
107		accountNumber: 'Kontonummer',
108		bankCode: 'Bankleitzahl',
109		confirmSepa: 'SEPA-Lastschrift',
110		confirmShortTerm: 'SEPA-Informationsfrist'
111		} ),
112		stateKey: 'donationInputValidation'
113		},
114		// show payment periods if interval payment is selected
115		{
116		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.periode-2-list' ), /^(1\|3\|6\|12)$/ ),
117		stateKey: 'donationFormContent.paymentIntervalInMonths'
118		},
119		// Show bank data input when doing direct debit
120		{
121		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '#bank-data' ), 'BEZ' ),
122		stateKey: 'donationFormContent.paymentType'
123		},
124		// Show the right submit buttons on page 2, depending on payment type
125		{
126		viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit2' ), /^MCP\|PPL\|UEB/ ),
127		stateKey: 'donationFormContent.paymentType'
128		},
129		{
130		viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit2' ), 'BEZ' ),
131		stateKey: 'donationFormContent.paymentType'
132		},
133		// Hide anonymous payment when doing direct debit
134		{
135		viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '.anonymous-payment-select, #tooltip-icon-addresstype' ), /^MCP\|PPL\|UEB/ ),
136		stateKey: 'donationFormContent.paymentType'
137		},
138		// Switch bank data input between IBAN/BIC and Account Number/Bank code
139		{
140		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ),
141		stateKey: 'donationFormContent.debitType'
142		},
143		{
144		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ),
145		stateKey: 'donationFormContent.debitType'
146		},
147		// Show only the right data fields for personal data
148		{
149		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-person' ), 'person' ),
150		stateKey: 'donationFormContent.addressType'
151		},
152		{
153		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-company' ), 'firma' ),
154		stateKey: 'donationFormContent.addressType'
155		},
156		{
157		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.personal-data-full, #notice-unsubscribe' ), /firma\|person/ ),
158		stateKey: 'donationFormContent.addressType'
159		},
160		// Show notice for anonymous donations
161		{
162		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.notice-anonymous' ), 'anonym' ),
163		stateKey: 'donationFormContent.addressType'
164		},
165		// Show "credit card required" notice for recurrent payments via Paypal
166		{
167		viewHandler: WMDE.View.createRecurrentPaypalNoticeHandler(
168		WMDE.View.Animator.createSlidingElementAnimator( $( '.notice-ppl-recurrent' ) )
169		),
170		stateKey: 'donationFormContent'
171		},
172		{
173		viewHandler: WMDE.View.createPaymentSummaryDisplayHandler(
174		$( '.interval-text' ),
175		$( '.amount-formatted'),
176		$( '#payment-display'),
177		{
178		'0': 'einmalig',
179		'1': 'monatlich',
180		'3': 'quartalsweise',
181		'6': 'halbjährlich',
182		'12': 'jährlich'
183		},
184		{
185		'BEZ': 'Lastschrift',
186		'UEB': 'Überweisung',
187		'MCP': 'Kreditkarte',
188		'PPL': 'PayPal'
189		},
190		WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' )
191		),
192		stateKey: 'donationFormContent'
193		},
194		{
195		viewHandler: WMDE.View.createDisplayAddressHandler( {
196		fullName: $( '.confirm-name' ),
197		street: $( '.confirm-street' ),
198		postcode: $( '.confirm-postcode' ),
199		city: $( '.confirm-city' ),
200		country: $( '.confirm-country' ),
201		email: $( '.confirm-email' )
202		} ),
203		stateKey: 'donationFormContent'
204		},
205		{
206		viewHandler: WMDE.View.createBankDataDisplayHandler(
207		$( '.confirm-iban' ),
208		$( '.confirm-bic' ),
209		$( '.confirm-bank-name' )
210		),
211		stateKey: 'donationFormContent'
212		},
213		{
214		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ),
215		stateKey: 'donationInputValidation.firstName'
216		},
217		{
218		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ),
219		stateKey: 'donationInputValidation.lastName'
220		},
221		{
222		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ),
223		stateKey: 'donationInputValidation.street'
224		},
225		{
226		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
227		stateKey: 'donationInputValidation.postcode'
228		},
229		{
230		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ),
231		stateKey: 'donationInputValidation.city'
232		},
233		{
234		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ),
235		stateKey: 'donationInputValidation.email'
236		},
237		{
238		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ),
239		stateKey: 'donationInputValidation.companyName'
240		},
241		{
242		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ),
243		stateKey: 'donationInputValidation.iban'
244		},
245		{
246		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ),
247		stateKey: 'donationInputValidation.bic'
248		},
249		{
250		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ),
251		stateKey: 'donationInputValidation.accountNumber'
252		},
253		{
254		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ),
255		stateKey: 'donationInputValidation.bankCode'
256		},
257		{
258		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '.amount-input' ) ),
259		stateKey: 'donationInputValidation.amount'
260		}
261		],
262		store
263		);
264
265		// Validity checks for different form parts
266
267		function addressIsValid() {
268		var validity = store.getState().validity,
269		formContent = store.getState().donationFormContent;
270		return formContent.addressType === 'anonym' \|\| validity.address;
271		}
272
273		function bankDataIsValid() {
274		var validity = store.getState().validity,
275		formContent = store.getState().donationFormContent;
276		return formContent.paymentType !== 'BEZ' \|\| validity.bankData;
277		}
278
279		function personalDataPageIsValid() {
280		var validity = store.getState().validity;
281		return !hasInvalidFields() && paymentDataIsValid() && addressIsValid() && bankDataIsValid();
282		}
283
284		function triggerValidityCheckForPaymentPage() {
285		if ( !paymentDataIsValid() ) {
286		store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'amount' ] ) );
287		}
288		}
289
290		function triggerValidityCheckForPersonalDataPage() {
291		var formContent = store.getState().donationFormContent;
292
293		if ( !addressIsValid() ) {
294		if ( formContent.addressType === 'person' ) {
295		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
296		[ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'email' ],
297		[ 'companyName' ]
298		) );
299		} else if ( formContent.addressType === 'firma' ) {
300		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
301		[ 'companyName', 'street', 'postcode', 'city', 'email' ],
302		[ 'firstName', 'lastName' ]
303		) );
304		}
305		}
306
307		if ( !bankDataIsValid() ) {
308		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
309		[ 'iban', 'bic' ]
310		) );
311		}
312		}
313
314		function triggerValidityCheckForSepaPage() {
315		if ( !store.getState().validity.sepaConfirmation ) {
316		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
317		[ 'confirmSepa', 'confirmShortTerm' ]
318		) );
319		}
320		}
321
322		function hasInvalidFields() {
323		var invalidFields = false;
324		$.each( store.getState().donationInputValidation, function( key, value ) {
325		if ( value.isValid === false ) {
326		invalidFields = true;
327		}
328		} );
329
330		return invalidFields;
331		}
332
333		function paymentDataIsValid() {
334		var currentState = store.getState();
335		return currentState.validity.paymentData;
336		}
337
338		function displayErrorBox() {
339		$( '#validation-errors' ).show();
340		$( 'html, body' ).animate( { scrollTop: $( '#validation-errors' ).offset().top } );
341		}
342
343		function triggerPiwikEvent( eventData ) {
344		if ( typeof _paq !== 'undefined' ) {
345		_paq.push( eventData );
346		}
347		}
348
349		function handlePaymentDataSubmit() {
350		if ( paymentDataIsValid() ) {
351		store.dispatch( actions.newNextPageAction() );
352		triggerPiwikEvent( [ 'trackGoal', 2 ] );
353		} else {
354		triggerValidityCheckForPaymentPage();
355		displayErrorBox();
356		}
357		}
358
359		function handlePersonalDataSubmitForDirectDebit() {
360		if ( personalDataPageIsValid() ) {
361		store.dispatch( actions.newNextPageAction() );
362		triggerPiwikEvent( [ 'trackGoal', 4 ] );
363		} else {
364		triggerValidityCheckForPersonalDataPage();
365		displayErrorBox();
366		}
367		}
368
369		function handlePersonalDataSubmitForNonDirectDebit() {
370		if ( personalDataPageIsValid() ) {
371		$( '#donForm2' ).submit();
372		} else {
373		triggerValidityCheckForPersonalDataPage();
374		displayErrorBox();
375		}
376		}
377
378		// connect DOM elements to actions
379
380		$( '#continueFormSubmit1' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePaymentDataSubmit, store ) );
381
382		$( '#continueFormSubmit2' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePersonalDataSubmitForDirectDebit, store ) );
383
384		$( '#finishFormSubmit2' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handlePersonalDataSubmitForDirectDebit, store ) );
385
386		$( '.back-button' ).click( function () {
387		store.dispatch( actions.newResetFieldValidityAction( [ 'confirmSepa', 'confirmShortTerm' ] ) );
388		store.dispatch( actions.newPreviousPageAction() );
389		} );
390
391		$( '#finishFormSubmit3' ).click( function () {
392		var validity = store.getState().validity;
393		// we use validity directly here because SEPA really needs these values to be valid
394		if ( validity.paymentData && validity.address && validity.bankData && validity.sepaConfirmation ) {
395		$( '#donForm2' ).submit();
396		} else {
397		triggerValidityCheckForSepaPage();
398		displayErrorBox();
399		}
400		} );
401
402		// Set initial form values
403		store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) );
404
405		// Initialize form pages
406		store.dispatch( actions.newAddPageAction( 'payment' ) );
407		store.dispatch( actions.newAddPageAction( 'personalData' ) );
408		store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) );
409
410		// switch to personal page if payment data is filled in
411		if ( paymentDataIsValid() ) {
412		store.dispatch( actions.newNextPageAction() );
413		}
414
415		} );
416

		@@ 1-360 (lines=360) @@
1		$( function () {
2		/** global: WMDE */
3
4		var initData = $( '#init-form' ),
5		store = WMDE.Store.createMembershipStore(
6		WMDE.createInitialStateFromViolatedFields( initData.data( 'violatedFields' ), {} )
7		),
8		actions = WMDE.Actions;
9
10		WMDE.StoreUpdates.connectComponentsToStore(
11		[
12		WMDE.Components.createRadioComponent( store, $( '.membership-type-select' ), 'membershipType' ),
13		WMDE.Components.createRadioComponent( store, $( '.address-type-select' ), 'addressType' ),
14		WMDE.Components.createRadioComponent( store, $( '.salutation-select' ), 'salutation' ),
15		WMDE.Components.createSelectMenuComponent( store, $( '#personal-title' ), 'title' ),
16		WMDE.Components.createValidatingTextComponent( store, $( '#first-name' ), 'firstName' ),
17		WMDE.Components.createValidatingTextComponent( store, $( '#last-name' ), 'lastName' ),
18		WMDE.Components.createValidatingTextComponent( store, $( '#company-name' ), 'companyName' ),
19		WMDE.Components.createValidatingTextComponent( store, $( '#street' ), 'street' ),
20		WMDE.Components.createValidatingTextComponent( store, $( '#post-code' ), 'postcode' ),
21		WMDE.Components.createValidatingTextComponent( store, $( '#city' ), 'city' ),
22		WMDE.Components.createSelectMenuComponent( store, $( '#country' ), 'country' ),
23		WMDE.Components.createTextComponent( store, $( '#email' ), 'email' ),
24		WMDE.Components.createValidatingTextComponent( store, $( '#date-of-birth' ), 'dateOfBirth' ),
25		WMDE.Components.createValidatingTextComponent( store, $( '#phone' ), 'phoneNumber' ),
26		WMDE.Components.createRadioComponent( store, $( '.payment-type-select' ), 'paymentType' ),
27		WMDE.Components.createRadioComponent( store, $( '.payment-period-select' ), 'paymentIntervalInMonths' ),
28		WMDE.Components.createAmountComponent( store, $( '.amount-input' ), $( '.amount-select' ), $( '#amount-hidden' ) ),
29		WMDE.Components.createBankDataComponent( store, {
30		ibanElement: $( '#iban' ),
31		bicElement: $( '#bic' ),
32		accountNumberElement: $( '#account-number' ),
33		bankCodeElement: $( '#bank-code' ),
34		bankNameFieldElement: $( '#field-bank-name' ),
35		bankNameDisplayElement: $( '#bank-name' ),
36		debitTypeElement: $( '.debit-type-select' )
37		} ),
38		WMDE.Components.createValidatingCheckboxComponent( store, $( '#confirmSepa' ), 'confirmSepa' )
39		],
40		store,
41		'membershipFormContent'
42		);
43
44		WMDE.StoreUpdates.connectValidatorsToStore(
45		function ( initialValues ) {
46		return [
47		WMDE.ValidationDispatchers.createFeeValidationDispatcher(
48		WMDE.FormValidation.createFeeValidator( initData.data( 'validate-fee-url' ) ),
49		initialValues
50		),
51		WMDE.ValidationDispatchers.createAddressValidationDispatcher(
52		WMDE.FormValidation.createAddressValidator(
53		initData.data( 'validate-address-url' ),
54		WMDE.FormValidation.DefaultRequiredFieldsForAddressType
55		),
56		initialValues
57		),
58		WMDE.ValidationDispatchers.createEmailValidationDispatcher(
59		WMDE.FormValidation.createEmailAddressValidator( initData.data( 'validate-email-address-url' ) ),
60		initialValues
61		),
62		WMDE.ValidationDispatchers.createBankDataValidationDispatcher(
63		WMDE.FormValidation.createBankDataValidator(
64		initData.data( 'validate-iban-url' ),
65		initData.data( 'generate-iban-url' )
66		),
67		initialValues
68		),
69		WMDE.ValidationDispatchers.createSepaConfirmationValidationDispatcher(
70		WMDE.FormValidation.createSepaConfirmationValidator(),
71		initialValues
72		)
73		];
74		},
75		store,
76		initData.data( 'initial-form-values' ),
77		'membershipFormContent'
78		);
79
80		// Connect view handlers to changes in specific parts in the global state, designated by 'stateKey'
81		WMDE.StoreUpdates.connectViewHandlersToStore(
82		[
83		{
84		viewHandler: WMDE.View.createFormPageVisibilityHandler( {
85		personalData: $( "#personalDataPage" ),
86		bankConfirmation: $( '#bankConfirmationPage' )
87		} ),
88		stateKey: 'formPagination'
89		},
90		{
91		viewHandler: WMDE.View.createErrorBoxHandler( $( '#validation-errors' ), {
92		amount: 'Betrag',
93		salutation: 'Anrede',
94		title: 'Titel',
95		firstName: 'Vorname',
96		lastName: 'Nachname',
97		companyName: 'Firma',
98		street: 'Straße',
99		postcode: 'PLZ',
100		city: 'Ort',
101		country: 'Land',
102		email: 'E-Mail',
103		dateOfBirth: 'Geburtsdatum',
104		phone: 'Telefonnummer',
105		iban: 'IBAN',
106		bic: 'BIC',
107		accountNumber: 'Kontonummer',
108		bankCode: 'Bankleitzahl',
109		confirmSepa: 'SEPA-Lastschrift'
110		} ),
111		stateKey: 'membershipInputValidation'
112		},
113		{
114		viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#finishFormSubmit' ), /^PPL$\|^$/ ),
115		stateKey: 'membershipFormContent.paymentType'
116		},
117		{
118		viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#continueFormSubmit' ), 'BEZ' ),
119		stateKey: 'membershipFormContent.paymentType'
120		},
121		{
122		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.fields-direct-debit' ), 'BEZ' ),
123		stateKey: 'membershipFormContent.paymentType'
124		},
125		{
126		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-sepa' ), 'sepa' ),
127		stateKey: 'membershipFormContent.debitType'
128		},
129		{
130		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.slide-non-sepa' ), 'non-sepa' ),
131		stateKey: 'membershipFormContent.debitType'
132		},
133		{
134		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.person-name' ), 'person' ),
135		stateKey: 'membershipFormContent.addressType'
136		},
137		{
138		viewHandler: WMDE.View.createSlidingVisibilitySwitcher( $( '.company-name' ), 'firma' ),
139		stateKey: 'membershipFormContent.addressType'
140		},
141		{
142		viewHandler: WMDE.View.createSimpleVisibilitySwitcher( $( '#address-type-2' ).parent(), 'sustaining' ),
143		stateKey: 'membershipFormContent.membershipType'
144		},
145		{
146		viewHandler: WMDE.View.createFeeOptionSwitcher( [ $( '#amount-1' ), $( '#amount-2' ), $( '#amount-3' ), $( '#amount-4' ), $( '#amount-5' ), $( '#amount-6' ), $( '#amount-7' ) ], { person: 24, firma: 100 } ),
147		stateKey: 'membershipFormContent'
148		},
149		{
150		viewHandler: WMDE.View.createPaymentSummaryDisplayHandler(
151		$( '#membership-confirm-interval' ),
152		$( '#membership-confirm-fee'),
153		$( '#membership-payment-type' ), // does not exist yet
154		{
155		'0': 'einmalig',
156		'1': 'monatlich',
157		'3': 'quartalsweise',
158		'6': 'halbjährlich',
159		'12': 'jährlich'
160		},
161		{
162		'BEZ': 'Lastschrift',
163		'UEB': 'Überweisung',
164		'MCP': 'Kreditkarte',
165		'PPL': 'PayPal'
166		},
167		WMDE.CurrencyFormatter.createCurrencyFormatter( 'de' )
168		),
169		stateKey: 'membershipFormContent'
170		},
171		{
172		viewHandler: WMDE.View.createDisplayAddressHandler( {
173		fullName: $( '#membership-confirm-name' ),
174		street: $( '#membership-confirm-street' ),
175		postcode: $( '#membership-confirm-postcode' ),
176		city: $( '#membership-confirm-city' ),
177		country: $( '#membership-confirm-country' ),
178		email: $( '#membership-confirm-mail' )
179		} ),
180		stateKey: 'membershipFormContent'
181		},
182		{
183		viewHandler: WMDE.View.createBankDataDisplayHandler(
184		$( '#membership-confirm-iban' ),
185		$( '#membership-confirm-bic' ),
186		$( '#membership-confirm-bankname' )
187		),
188		stateKey: 'membershipFormContent'
189		},
190		{
191		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#first-name' ) ),
192		stateKey: 'membershipInputValidation.firstName'
193		},
194		{
195		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#last-name' ) ),
196		stateKey: 'membershipInputValidation.lastName'
197		},
198		{
199		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#street' ) ),
200		stateKey: 'membershipInputValidation.street'
201		},
202		{
203		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#post-code' ) ),
204		stateKey: 'membershipInputValidation.postcode'
205		},
206		{
207		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#city' ) ),
208		stateKey: 'membershipInputValidation.city'
209		},
210		{
211		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#email' ) ),
212		stateKey: 'membershipInputValidation.email'
213		},
214		{
215		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#company-name' ) ),
216		stateKey: 'membershipInputValidation.companyName'
217		},
218		{
219		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#date-of-birth' ) ),
220		stateKey: 'membershipInputValidation.dateOfBirth'
221		},
222		{
223		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#phone' ) ),
224		stateKey: 'membershipInputValidation.phoneNumber'
225		},
226		{
227		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#iban' ) ),
228		stateKey: 'membershipInputValidation.iban'
229		},
230		{
231		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bic' ) ),
232		stateKey: 'membershipInputValidation.bic'
233		},
234		{
235		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#account-number' ) ),
236		stateKey: 'membershipInputValidation.accountNumber'
237		},
238		{
239		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '#bank-code' ) ),
240		stateKey: 'membershipInputValidation.bankCode'
241		},
242		{
243		viewHandler: WMDE.View.createFieldValueValidityIndicator( $( '.amount-input' ) ),
244		stateKey: 'membershipInputValidation.amount'
245		}
246		],
247		store
248		);
249
250		// Validity checks for different form parts
251
252		function displayErrorBox() {
253		$( '#validation-errors' ).show();
254		$( 'html, body' ).animate( { scrollTop: $( '#validation-errors' ).offset().top } );
255		}
256
257		function addressIsValid() {
258		return store.getState().validity.address;
259		}
260
261		function bankDataIsValid() {
262		return store.getState().membershipFormContent.paymentType !== 'BEZ' \|\| store.getState().validity.bankData;
263		}
264
265		function formDataIsValid() {
266		var validity = store.getState().validity;
267		return !hasInvalidFields() && validity.paymentData && addressIsValid() && bankDataIsValid();
268		}
269
270		function triggerValidityCheckForPersonalDataPage() {
271		var formContent = store.getState().membershipFormContent;
272
273		if ( !addressIsValid() ) {
274		if ( formContent.addressType === 'person' ) {
275		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
276		[ 'salutation', 'firstName', 'lastName', 'street', 'postcode', 'city', 'email' ],
277		[ 'companyName' ]
278		) );
279		} else if ( formContent.addressType === 'firma' ) {
280		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
281		[ 'companyName', 'street', 'postcode', 'city', 'email' ],
282		[ 'firstName', 'lastName', 'salutation' ]
283		) );
284		}
285		}
286
287		if ( !bankDataIsValid() ) {
288		store.dispatch( actions.newMarkEmptyFieldsInvalidAction(
289		[ 'iban', 'bic' ]
290		) );
291		}
292
293		if ( !store.getState().validity.amount ) {
294		store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'amount' ] ) );
295		}
296		}
297
298		function hasInvalidFields() {
299		var invalidFields = false;
300		$.each( store.getState().membershipInputValidation, function( key, value ) {
301		if ( value.isValid === false ) {
302		invalidFields = true;
303		}
304		} );
305
306		return invalidFields;
307		}
308
309		function triggerValidityCheckForSepaPage() {
310		if ( !store.getState().validity.sepaConfirmation ) {
311		store.dispatch( actions.newMarkEmptyFieldsInvalidAction( [ 'confirmSepa' ] ) );
312		}
313		}
314
315		function handleMembershipDataSubmitForDirectDebit() {
316		if ( formDataIsValid() ) {
317		store.dispatch( actions.newNextPageAction() );
318		$( 'section#donation-amount, section#donation-sheet' ).hide();
319		} else {
320		triggerValidityCheckForPersonalDataPage();
321		displayErrorBox();
322		}
323		}
324
325		function handleMembershipDataSubmitForNonDirectDebit() {
326		if ( formDataIsValid() ) {
327		$( '#memForm' ).submit();
328		} else {
329		triggerValidityCheckForPersonalDataPage();
330		displayErrorBox();
331		}
332		}
333
334		$( '#continueFormSubmit' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handleMembershipDataSubmitForDirectDebit, store ) );
335
336		$( '#finishFormSubmit' ).click( WMDE.StoreUpdates.makeEventHandlerWaitForAsyncFinish( handleMembershipDataSubmitForNonDirectDebit, store ) );
337
338		$( '.back-button' ).click( function () {
339		// TODO check if page is valid
340		store.dispatch( actions.newResetFieldValidityAction( [ 'confirmSepa' ] ) );
341		store.dispatch( actions.newPreviousPageAction() );
342		} );
343
344		$( '#finishFormSubmit2' ).click( function () {
345		if ( store.getState().validity.sepaConfirmation ) {
346		$( '#memForm' ).submit();
347		} else {
348		triggerValidityCheckForSepaPage();
349		displayErrorBox();
350		}
351		} );
352
353		// Initialize form pages
354		store.dispatch( actions.newAddPageAction( 'personalData' ) );
355		store.dispatch( actions.newAddPageAction( 'bankConfirmation' ) );
356
357		// Set initial form values
358		store.dispatch( actions.newInitializeContentAction( initData.data( 'initial-form-values' ) ) );
359
360		} );
361

wmde / FundraisingFrontend

Code Duplication Length = 360-415 lines in 2 locations

web/res/js/donationForm.js 1 location

web/res/js/membershipForm.js 1 location