Optimize checkout elements hiding

Remove duplicated calls like hidden -> show() -> hide() during some updates
and make code more clear
This commit is contained in:
Alex P 2021-11-11 15:20:21 +02:00
parent c2b77b3cff
commit 9ad48d5f13

View file

@ -24,21 +24,17 @@ class CheckoutBootstap {
this.render() this.render()
}); });
jQuery(document.body). jQuery(document.body).on('updated_checkout payment_method_selected', () => {
on('updated_checkout payment_method_selected', () => { this.updateUi();
this.switchBetweenPayPalandOrderButton() });
this.displayPlaceOrderButtonForSavedCreditCards()
})
jQuery(document).on('hosted_fields_loaded', () => { jQuery(document).on('hosted_fields_loaded', () => {
jQuery('#saved-credit-card').on('change', () => { jQuery('#saved-credit-card').on('change', () => {
this.displayPlaceOrderButtonForSavedCreditCards() this.updateUi();
}) })
}); });
this.switchBetweenPayPalandOrderButton() this.updateUi();
this.displayPlaceOrderButtonForSavedCreditCards()
} }
shouldRender() { shouldRender() {
@ -69,49 +65,28 @@ class CheckoutBootstap {
); );
} }
switchBetweenPayPalandOrderButton() { updateUi() {
const currentPaymentMethod = this.currentPaymentMethod(); const currentPaymentMethod = this.currentPaymentMethod();
const isPaypal = currentPaymentMethod === 'ppcp-gateway';
const isCard = currentPaymentMethod === 'ppcp-credit-card-gateway';
const isSavedCard = isCard && this.isSavedCardSelected();
const isNotOurGateway = !isPaypal && !isCard;
if (currentPaymentMethod !== 'ppcp-gateway' && currentPaymentMethod !== 'ppcp-credit-card-gateway') { jQuery(this.standardOrderButtonSelector).toggle(isNotOurGateway || isSavedCard);
this.renderer.hideButtons(this.gateway.button.wrapper); jQuery(this.gateway.button.wrapper).toggle(isPaypal);
this.renderer.hideButtons(this.gateway.messages.wrapper); jQuery(this.gateway.messages.wrapper).toggle(isPaypal);
this.renderer.hideButtons(this.gateway.hosted_fields.wrapper); jQuery(this.gateway.hosted_fields.wrapper).toggle(isCard && !isSavedCard);
jQuery(this.standardOrderButtonSelector).show();
} if (isPaypal) {
else { this.messages.render();
jQuery(this.standardOrderButtonSelector).hide();
if (currentPaymentMethod === 'ppcp-gateway') {
this.renderer.showButtons(this.gateway.button.wrapper);
this.renderer.showButtons(this.gateway.messages.wrapper);
this.messages.render()
this.renderer.hideButtons(this.gateway.hosted_fields.wrapper)
}
if (currentPaymentMethod === 'ppcp-credit-card-gateway') {
this.renderer.hideButtons(this.gateway.button.wrapper)
this.renderer.hideButtons(this.gateway.messages.wrapper)
this.renderer.showButtons(this.gateway.hosted_fields.wrapper)
}
}
} }
displayPlaceOrderButtonForSavedCreditCards() { if (isCard) {
const currentPaymentMethod = this.currentPaymentMethod(); if (isSavedCard) {
if (currentPaymentMethod !== 'ppcp-credit-card-gateway') { this.disableCreditCardFields();
return;
}
if (this.isSavedCardSelected()) {
this.renderer.hideButtons(this.gateway.button.wrapper)
this.renderer.hideButtons(this.gateway.messages.wrapper)
this.renderer.hideButtons(this.gateway.hosted_fields.wrapper)
jQuery(this.standardOrderButtonSelector).show()
this.disableCreditCardFields()
} else { } else {
jQuery(this.standardOrderButtonSelector).hide() this.enableCreditCardFields();
this.renderer.hideButtons(this.gateway.button.wrapper) }
this.renderer.hideButtons(this.gateway.messages.wrapper)
this.renderer.showButtons(this.gateway.hosted_fields.wrapper)
this.enableCreditCardFields()
} }
} }