Hide DCC order button until loaded, show spinner

This commit is contained in:
Alex P 2022-03-30 16:09:30 +03:00
parent d6286ec6e5
commit 8ae32e8396
3 changed files with 23 additions and 4 deletions

View file

@ -18,6 +18,7 @@ import {hide, setVisible} from "./modules/Helper/Hiding";
import {isChangePaymentPage} from "./modules/Helper/Subscriptions";
const buttonsSpinner = new Spinner('.ppc-button-wrapper');
const cardsSpinner = new Spinner('#ppcp-hosted-fields');
const bootstrap = () => {
const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
@ -118,8 +119,9 @@ document.addEventListener(
const currentPaymentMethod = getCurrentPaymentMethod();
const isPaypal = currentPaymentMethod === PaymentMethods.PAYPAL;
const isCards = currentPaymentMethod === PaymentMethods.CARDS;
setVisible(ORDER_BUTTON_SELECTOR, !isPaypal, true);
setVisible(ORDER_BUTTON_SELECTOR, !isPaypal && !isCards, true);
if (isPaypal) {
// stopped after the first rendering of the buttons, in onInit
@ -127,7 +129,17 @@ document.addEventListener(
} else {
buttonsSpinner.unblock();
}
if (isCards) {
cardsSpinner.block();
} else {
cardsSpinner.unblock();
}
}
jQuery(document).on('hosted_fields_loaded', () => {
cardsSpinner.unblock();
});
let bootstrapped = false;

View file

@ -1,4 +1,5 @@
import dccInputFactory from "../Helper/DccInputFactory";
import {show} from "../Helper/Hiding";
class CreditCardRenderer {
@ -32,6 +33,8 @@ class CreditCardRenderer {
return;
}
const buttonSelector = wrapper + ' button';
if (this.currentHostedFieldsInstance) {
this.currentHostedFieldsInstance.teardown()
.catch(err => console.error(`Hosted fields teardown error: ${err}`));
@ -121,8 +124,10 @@ class CreditCardRenderer {
});
show(buttonSelector);
if (document.querySelector(wrapper).getAttribute('data-ppcp-subscribed') !== true) {
document.querySelector(wrapper + ' button').addEventListener(
document.querySelector(buttonSelector).addEventListener(
'click',
event => {
event.preventDefault();

View file

@ -597,8 +597,10 @@ class SmartButton implements SmartButtonInterface {
printf(
'<div id="%1$s" style="display:none;">
<button type="submit" class="button alt ppcp-dcc-order-button">%2$s</button>
</div><div id="payments-sdk__contingency-lightbox"></div><style id="ppcp-hide-dcc">.payment_method_ppcp-credit-card-gateway {display:none;}</style>',
<button type="submit" class="button alt ppcp-dcc-order-button" style="display: none;">%2$s</button>
</div>
<div id="payments-sdk__contingency-lightbox"></div>
<style id="ppcp-hide-dcc">.payment_method_ppcp-credit-card-gateway {display:none;}</style>',
esc_attr( $id ),
esc_html( $label )
);