From 4c10c37782c4ec78e396a1afa36e08d4667a78d0 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 26 Jun 2024 18:16:54 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20button-refresh?= =?UTF-8?q?=20logic=20to=20own=20helper=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Exrtract repeat event-init logic to new helper file - Remove the jQuery dependency --- modules/ppcp-applepay/resources/js/boot.js | 15 ++------ .../js/modules/Helper/ButtonRefreshHelper.js | 37 +++++++++++++++++++ .../modules/Helper/MultistepCheckoutHelper.js | 11 ++---- modules/ppcp-googlepay/resources/js/boot.js | 15 ++------ 4 files changed, 46 insertions(+), 32 deletions(-) create mode 100644 modules/ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper.js diff --git a/modules/ppcp-applepay/resources/js/boot.js b/modules/ppcp-applepay/resources/js/boot.js index 4bc5eaf8b..a32b72107 100644 --- a/modules/ppcp-applepay/resources/js/boot.js +++ b/modules/ppcp-applepay/resources/js/boot.js @@ -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', diff --git a/modules/ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper.js b/modules/ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper.js new file mode 100644 index 000000000..395bd9a8a --- /dev/null +++ b/modules/ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper.js @@ -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); +} diff --git a/modules/ppcp-button/resources/js/modules/Helper/MultistepCheckoutHelper.js b/modules/ppcp-button/resources/js/modules/Helper/MultistepCheckoutHelper.js index c4eec6143..1bf843a94 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/MultistepCheckoutHelper.js +++ b/modules/ppcp-button/resources/js/modules/Helper/MultistepCheckoutHelper.js @@ -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; diff --git a/modules/ppcp-googlepay/resources/js/boot.js b/modules/ppcp-googlepay/resources/js/boot.js index c26267d14..cb061ec01 100644 --- a/modules/ppcp-googlepay/resources/js/boot.js +++ b/modules/ppcp-googlepay/resources/js/boot.js @@ -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',