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

Add buttons loading spinner

Browse source
This commit is contained in:
Alex P 2022-03-17 09:48:00 +02:00
parent f6944a6208
commit 42345d4947
3 changed files with 24 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,9 @@ import {
ORDER_BUTTON_SELECTOR,
PaymentMethods
} from "./modules/Helper/CheckoutMethodState";
import {setVisible} from "./modules/Helper/Hiding";
import {hide, setVisible} from "./modules/Helper/Hiding";
const buttonsSpinner = new Spinner('.place-order');
const bootstrap = () => {
const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic);
@ -23,7 +25,10 @@ const bootstrap = () => {
const onSmartButtonClick = data => {
window.ppcpFundingSource = data.fundingSource;
};
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick);
const onSmartButtonsInit = () => {
buttonsSpinner.unblock();
};
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);
const context = PayPalCommerceGateway.context;
if (context === 'mini-cart' || context === 'product') {
@ -102,7 +107,18 @@ document.addEventListener(
// Normally it is hidden later after the script load.
const hideOrderButtonIfPpcpGateway = () => {
const currentPaymentMethod = getCurrentPaymentMethod();
setVisible(ORDER_BUTTON_SELECTOR, currentPaymentMethod !== PaymentMethods.PAYPAL, true);
const isPaypal = currentPaymentMethod === PaymentMethods.PAYPAL;
setVisible(ORDER_BUTTON_SELECTOR, !isPaypal, true);
if (PayPalCommerceGateway.context === 'checkout') {
if (isPaypal) {
// stopped after the first rendering of the buttons, in onInit
buttonsSpinner.block();
} else {
buttonsSpinner.unblock();
}
}
}
let bootstrapped = false;

4
modules/ppcp-button/resources/js/modules/Helper/Spinner.js
View file

@ -1,7 +1,7 @@
class Spinner {
constructor() {
this.target = 'form.woocommerce-checkout';
constructor(target = 'form.woocommerce-checkout') {
this.target = target;
}
setTarget(target) {

4
modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
View file

@ -1,8 +1,9 @@
class Renderer {
constructor(creditCardRenderer, defaultConfig, onSmartButtonClick) {
constructor(creditCardRenderer, defaultConfig, onSmartButtonClick, onSmartButtonsInit) {
this.defaultConfig = defaultConfig;
this.creditCardRenderer = creditCardRenderer;
this.onSmartButtonClick = onSmartButtonClick;
this.onSmartButtonsInit = onSmartButtonsInit;
}
render(wrapper, hostedFieldsWrapper, contextConfig) {
@ -21,6 +22,7 @@ class Renderer {
style,
...contextConfig,
onClick: this.onSmartButtonClick,
onInit: this.onSmartButtonsInit,
}).render(wrapper);
}