Skip to content

Commit

Permalink
Refactor tokenization form
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikejolley
mikejolley committed Jun 12, 2018
1 parent 10a5779 commit ac2d76e
Showing 1 changed file with 113 additions and 85 deletions.
198 changes: 113 additions & 85 deletions assets/js/frontend/tokenization-form.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,114 @@
( function( $ ) {
$( function() {
var wcTokenizationForm = (function() {
function wcTokenizationForm( target ) {
var $target = $( target ),
$formWrap = $target.closest( '.payment_box' ),
$wcTokenizationForm = this;

this.onTokenChange = function() {
if ( 'new' === $( this ).val() ) {
$wcTokenizationForm.showForm();
$wcTokenizationForm.showSaveNewCheckbox();
} else {
$wcTokenizationForm.hideForm();
$wcTokenizationForm.hideSaveNewCheckbox();
}
};

this.onCreateAccountChange = function() {
if ( $( this ).is( ':checked' ) ) {
$wcTokenizationForm.showSaveNewCheckbox();
} else {
$wcTokenizationForm.hideSaveNewCheckbox();
}
};

this.onDisplay = function() {
// Make sure a radio button is selected if there is no is_default for this payment method..
if ( 0 === $( ':input.woocommerce-SavedPaymentMethods-tokenInput:checked', $target ).length ) {
$( ':input.woocommerce-SavedPaymentMethods-tokenInput:last', $target ).prop( 'checked', true );
}

// Don't show the "use new" radio button if we only have one method..
if ( 0 === $target.data( 'count' ) ) {
$( '.woocommerce-SavedPaymentMethods-new', $target ).hide();
}

// Trigger change event
$( ':input.woocommerce-SavedPaymentMethods-tokenInput:checked', $target ).trigger( 'change' );

// Hide "save card" if "Create Account" is not checked.
// Check that the field is shown in the form - some plugins and force create account remove it
if ( $( 'input#createaccount' ).length && ! $('input#createaccount').is( ':checked' ) ) {
$wcTokenizationForm.hideSaveNewCheckbox();
}

};

this.hideForm = function() {
$( '.wc-payment-form', $formWrap ).hide();
};

this.showForm = function() {
$( '.wc-payment-form', $formWrap ).show();
};

this.showSaveNewCheckbox = function() {
$( '.woocommerce-SavedPaymentMethods-saveNew', $formWrap ).show();
};

this.hideSaveNewCheckbox = function() {
$( '.woocommerce-SavedPaymentMethods-saveNew', $formWrap ).hide();
};

// When a radio button is changed, make sure to show/hide our new CC info area
$( ':input.woocommerce-SavedPaymentMethods-tokenInput', $target ).change( this.onTokenChange );

// OR if create account is checked
$ ( 'input#createaccount' ).change( this.onCreateAccountChange );

this.onDisplay();
}

return wcTokenizationForm;
})();

$( document.body ).on( 'updated_checkout wc-credit-card-form-init', function() {
// Loop over gateways with saved payment methods
var $saved_payment_methods = $( 'ul.woocommerce-SavedPaymentMethods' );

$saved_payment_methods.each( function() {
new wcTokenizationForm( this );
} );
/*global wc_tokenization_form_params */
jQuery( function( $ ) {

/**
* WCTokenizationForm class.
*/
var TokenizationForm = function( $target ) {
this.$target = $target;
this.$formWrap = $target.closest( '.payment_box' );

// Params.
this.params = $.extend( {}, {
'is_registration_required': false
}, wc_tokenization_form_params );

// Bind functions to this.
this.onDisplay = this.onDisplay.bind( this );
this.hideForm = this.hideForm.bind( this );
this.showForm = this.showForm.bind( this );
this.showSaveNewCheckbox = this.showSaveNewCheckbox.bind( this );
this.hideSaveNewCheckbox = this.hideSaveNewCheckbox.bind( this );

// When a radio button is changed, make sure to show/hide our new CC info area.
this.$target.on( 'click', ':input.woocommerce-SavedPaymentMethods-tokenInput', { tokenizationForm: this }, this.onTokenChange );

// OR if create account is checked.
$( 'input#createaccount' ).change( { tokenizationForm: this }, this.onCreateAccountChange );

// First display.
this.onDisplay();
};

TokenizationForm.prototype.onDisplay = function() {
// Make sure a radio button is selected if there is no is_default for this payment method..
if ( 0 === $( ':input.woocommerce-SavedPaymentMethods-tokenInput:checked', this.$target ).length ) {
$( ':input.woocommerce-SavedPaymentMethods-tokenInput:last', this.$target ).prop( 'checked', true );
}

// Don't show the "use new" radio button if we only have one method..
if ( 0 === this.$target.data( 'count' ) ) {
$( '.woocommerce-SavedPaymentMethods-new', this.$target ).hide();
}

// Trigger change event
$( ':input.woocommerce-SavedPaymentMethods-tokenInput:checked', this.$target ).trigger( 'change' );

// Hide "save card" if "Create Account" is not checked and registration is not forced.
var hasCreateAccountCheckbox = 0 < $( 'input#createaccount' ).length,
createAccount = hasCreateAccountCheckbox && $('input#createaccount').is( ': checked' );

if ( createAccount || this.params.is_registration_required ) {
this.showSaveNewCheckbox();
} else {
this.hideSaveNewCheckbox();
}
};

TokenizationForm.prototype.onTokenChange = function( event ) {
if ( 'new' === $( this ).val() ) {
event.data.tokenizationForm.showForm();
event.data.tokenizationForm.showSaveNewCheckbox();
} else {
event.data.tokenizationForm.hideForm();
event.data.tokenizationForm.hideSaveNewCheckbox();
}
};

TokenizationForm.prototype.onCreateAccountChange = function( event ) {
if ( $( this ).is( ':checked' ) ) {
event.data.tokenizationForm.showSaveNewCheckbox();
} else {
event.data.tokenizationForm.hideSaveNewCheckbox();
}
};

TokenizationForm.prototype.hideForm = function() {
$( '.wc-payment-form', this.$formWrap ).hide();
};

TokenizationForm.prototype.showForm = function() {
$( '.wc-payment-form', this.$formWrap ).show();
};

TokenizationForm.prototype.showSaveNewCheckbox = function() {
$( '.woocommerce-SavedPaymentMethods-saveNew', this.$formWrap ).show();
};

TokenizationForm.prototype.hideSaveNewCheckbox = function() {
$( '.woocommerce-SavedPaymentMethods-saveNew', this.$formWrap ).hide();
};

/**
* Function to call wc_product_gallery on jquery selector.
*/
$.fn.wc_tokenization_form = function( args ) {
new TokenizationForm( this, args );
return this;
};

/*
* Initialize.
*/
$( document.body ).on( 'updated_checkout wc-credit-card-form-init', function() {
// Loop over gateways with saved payment methods
var $saved_payment_methods = $( 'ul.woocommerce-SavedPaymentMethods' );

$saved_payment_methods.each( function() {
$( this ).wc_tokenization_form();
} );
});
})( jQuery );
} );

// Alias.
var wcTokenizationForm = TokenizationForm;
} );

0 comments on commit ac2d76e

Please sign in to comment.