Merge pull request #561 from woocommerce/pcp-612-dcc-loading

Hide DCC order button until loaded, show spinner
This commit is contained in:
Emili Castells 2022-04-13 10:31:44 +02:00 committed by GitHub
commit 0f1f729973
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 4 deletions

View file

@ -19,6 +19,7 @@ import {isChangePaymentPage} from "./modules/Helper/Subscriptions";
import FreeTrialHandler from "./modules/ActionHandler/FreeTrialHandler";
const buttonsSpinner = new Spinner('.ppc-button-wrapper');
const cardsSpinner = new Spinner('#ppcp-hosted-fields');
const bootstrap = () => {
const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
@ -129,8 +130,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
@ -138,8 +140,18 @@ document.addEventListener(
} else {
buttonsSpinner.unblock();
}
if (isCards) {
cardsSpinner.block();
} else {
cardsSpinner.unblock();
}
}
jQuery(document).on('hosted_fields_loaded', () => {
cardsSpinner.unblock();
});
let bootstrapped = false;
hideOrderButtonIfPpcpGateway();

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

@ -672,8 +672,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 )
);