woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 18:16:38 +08:00
Code Issues Projects Packages Wiki Activity Actions

Hide DCC order button until loaded, show spinner

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

14
modules/ppcp-button/resources/js/button.js
View file

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

7
modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
View file

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

6
modules/ppcp-button/src/Assets/SmartButton.php
View file

@ -597,8 +597,10 @@ class SmartButton implements SmartButtonInterface {
printf( printf(
'<div id="%1$s" style="display:none;"> '<div id="%1$s" style="display:none;">
<button type="submit" class="button alt ppcp-dcc-order-button">%2$s</button> <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>', </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_attr( $id ),
esc_html( $label ) esc_html( $label )
); );