woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

♻️ Extract button-refresh logic to own helper file

Browse source 
- Exrtract repeat event-init logic to new helper file
- Remove the jQuery dependency
This commit is contained in:
Philipp Stracker 2024-06-26 18:16:54 +02:00
parent 5ed2f37bd4
commit 4c10c37782
No known key found for this signature in database
4 changed files with 46 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

15
modules/ppcp-applepay/resources/js/boot.js
View file

@ -1,7 +1,7 @@
import {loadCustomScript} from "@paypal/paypal-js";
import {loadPaypalScript} from "../../../ppcp-button/resources/js/modules/Helper/ScriptLoading";
import ApplepayManager from "./ApplepayManager";
import { debounce } from '../../../ppcp-blocks/resources/js/Helper/debounce';
import {setupButtonEvents} from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
(function ({
buttonConfig,
@ -16,20 +16,11 @@ import { debounce } from '../../../ppcp-blocks/resources/js/Helper/debounce';
manager.init();
};
const refresh = debounce(function() {
setupButtonEvents(function() {
if (manager) {
manager.reinit();
}
}, 50);
jQuery(document).on('ppcp_refresh_payment_buttons', refresh);
jQuery(document.body).on('updated_cart_totals updated_checkout', refresh);
// Use set timeout as it's unnecessary to refresh upon Minicart initial render.
setTimeout(() => {
jQuery(document.body).on('wc_fragments_loaded wc_fragments_refreshed', refresh);
}, 1000);
});
document.addEventListener(
'DOMContentLoaded',

37
modules/ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper.js Normal file
View file

@ -0,0 +1,37 @@
import { debounce } from '../../../../../ppcp-blocks/resources/js/Helper/debounce';
const REFRESH_BUTTON_EVENT = 'ppcp_refresh_payment_buttons';
/**
* Triggers a refresh of the payment buttons.
* This function dispatches a custom event that the button components listen for.
*
* Use this function on the front-end to update payment buttons after the checkout form was updated.
*/
export function refreshButtons() {
document.dispatchEvent(new Event(REFRESH_BUTTON_EVENT));
}
/**
* Sets up event listeners for various cart and checkout update events.
* When these events occur, it triggers a refresh of the payment buttons.
*
* @param {Function} refresh - Callback responsible to re-render the payment button.
*/
export function setupButtonEvents(refresh) {
const miniCartInitDelay = 1000;
const debouncedRefresh = debounce(refresh, 50);
// Listen for our custom refresh event.
document.addEventListener(REFRESH_BUTTON_EVENT, debouncedRefresh);
// Listen for cart and checkout update events.
document.body.addEventListener('updated_cart_totals', debouncedRefresh);
document.body.addEventListener('updated_checkout', debouncedRefresh);
// Use setTimeout for fragment events to avoid unnecessary refresh on initial render.
setTimeout(() => {
document.body.addEventListener('wc_fragments_loaded', debouncedRefresh);
document.body.addEventListener('wc_fragments_refreshed', debouncedRefresh);
}, miniCartInitDelay);
}

11
modules/ppcp-button/resources/js/modules/Helper/MultistepCheckoutHelper.js
View file

@ -1,3 +1,5 @@
import { refreshButtons } from './ButtonRefreshHelper';
/**
* The MultistepCheckoutHelper class ensures the initialization of payment buttons
* on websites using a multistep checkout plugin. These plugins usually hide the
@ -105,17 +107,10 @@ class MultistepCheckoutHelper {
*/
checkElement() {
if (this.isVisible) {
this.refreshButtons();
refreshButtons();
this.stop();
}
}
/**
* Initializes the payment buttons on the visibility of wrapper.
*/
refreshButtons() {
document.dispatchEvent(new Event('ppcp_refresh_payment_buttons'));
}
}
export default MultistepCheckoutHelper;

15
modules/ppcp-googlepay/resources/js/boot.js
View file

@ -1,7 +1,7 @@
import {loadCustomScript} from "@paypal/paypal-js";
import {loadPaypalScript} from "../../../ppcp-button/resources/js/modules/Helper/ScriptLoading";
import GooglepayManager from "./GooglepayManager";
import { debounce } from '../../../ppcp-blocks/resources/js/Helper/debounce';
import {setupButtonEvents} from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
(function ({
buttonConfig,
@ -16,20 +16,11 @@ import { debounce } from '../../../ppcp-blocks/resources/js/Helper/debounce';
manager.init();
};
const refresh = debounce(function() {
setupButtonEvents(function() {
if (manager) {
manager.reinit();
}
}, 50);
jQuery(document).on('ppcp_refresh_payment_buttons', refresh);
jQuery(document.body).on('updated_cart_totals updated_checkout', refresh);
// Use set timeout as it's unnecessary to refresh upon Minicart initial render.
setTimeout(() => {
jQuery(document.body).on('wc_fragments_loaded wc_fragments_refreshed', refresh);
}, 1000);
});
document.addEventListener(
'DOMContentLoaded',