From 01e88daf0a99b7370b3103ff47e66d2032269252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9sz=C3=A1ros=20R=C3=B3bert?= Date: Wed, 8 Apr 2020 18:50:29 +0300 Subject: [PATCH] Split to bootstrap logic based on the button context --- .../ppcp-button/resources/js/button.js | 116 +++++------------- .../resources/js/modules/CartBootstap.js | 25 ++++ .../resources/js/modules/CheckoutBootstap.js | 48 ++++++++ .../resources/js/modules/MiniCartBootstap.js | 26 ++++ .../js/modules/SingleProductBootstap.js | 37 ++++++ 5 files changed, 166 insertions(+), 86 deletions(-) create mode 100644 modules.local/ppcp-button/resources/js/modules/CartBootstap.js create mode 100644 modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js create mode 100644 modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js create mode 100644 modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js diff --git a/modules.local/ppcp-button/resources/js/button.js b/modules.local/ppcp-button/resources/js/button.js index bca3970f6..92caf8be9 100644 --- a/modules.local/ppcp-button/resources/js/button.js +++ b/modules.local/ppcp-button/resources/js/button.js @@ -1,115 +1,59 @@ -import Renderer from './modules/Renderer'; -import SingleProductConfig from './modules/SingleProductConfig'; -import UpdateCart from './modules/UpdateCart'; import ErrorHandler from './modules/ErrorHandler'; import CartConfig from './modules/CartConfig'; +import MiniCartBootstap from './modules/MiniCartBootstap'; +import SingleProductBootstap from './modules/SingleProductBootstap'; +import CartBootstrap from './modules/CartBootstap'; +import CheckoutBootstap from './modules/CheckoutBootstap'; -const bootstrap = ()=> { +const bootstrap = () => { const context = PayPalCommerceGateway.context; const errorHandler = new ErrorHandler(); - const defaultConfigurator = new CartConfig( + const defaultConfig = new CartConfig( PayPalCommerceGateway, - errorHandler + errorHandler, ); - // Configure mini cart buttons - if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) { - const renderer = new Renderer( - PayPalCommerceGateway.button.mini_cart_wrapper - ); - renderer.render(defaultConfigurator.configuration()) + if (context === 'mini-cart') { + const miniCartBootstap = new MiniCartBootstap(defaultConfig); + + miniCartBootstap.init(); } - jQuery( document.body ).on( 'wc_fragments_loaded wc_fragments_refreshed', () => { - if (! document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) { - return; - } - const renderer = new Renderer( - PayPalCommerceGateway.button.mini_cart_wrapper - ); - renderer.render(defaultConfigurator.configuration()) - } ); - // Configure checkout buttons - jQuery( document.body ).on( 'updated_checkout', () => { - if (document.querySelector(PayPalCommerceGateway.button.cancel_wrapper)) { - return; - } - - const renderer = new Renderer( - PayPalCommerceGateway.button.wrapper - ); - renderer.render(defaultConfigurator.configuration()); - - jQuery( document.body ).trigger( 'payment_method_selected' ) - } ); - jQuery( document.body ).on( 'payment_method_selected', () => { - // TODO: replace this dirty check, possible create a separate context config - const currentPaymentMethod = jQuery('input[name="payment_method"]:checked').val(); - - if (currentPaymentMethod !== 'ppcp-gateway') { - jQuery(PayPalCommerceGateway.button.wrapper).hide(); - jQuery('#place_order').show(); - } else { - jQuery(PayPalCommerceGateway.button.wrapper).show(); - jQuery('#place_order').hide(); - } - } ); - - // Configure context buttons - if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) { - return; - } - const renderer = new Renderer( - PayPalCommerceGateway.button.wrapper - ); - let configurator = null; if (context === 'product') { - if (! document.querySelector('form.cart')) { - return; - } - const updateCart = new UpdateCart( - PayPalCommerceGateway.ajax.change_cart.endpoint, - PayPalCommerceGateway.ajax.change_cart.nonce - ); - configurator = new SingleProductConfig( - PayPalCommerceGateway, - updateCart, - renderer.showButtons.bind(renderer), - renderer.hideButtons.bind(renderer), - document.querySelector('form.cart'), - errorHandler - ); + const singleProductBootstap = new SingleProductBootstap(); + const miniCartBootstap = new MiniCartBootstap(defaultConfig); + + singleProductBootstap.init(); + miniCartBootstap.init(); } + if (context === 'cart') { - configurator = defaultConfigurator; + const cartBootstrap = new CartBootstrap(defaultConfig); - jQuery( document.body ).on( 'updated_cart_totals updated_checkout', () => { - renderer.render(configurator.configuration()) - }); - } - if (! configurator) { - console.error('No context for button found.'); - return; + cartBootstrap.init(); } - renderer.render(configurator.configuration()); -} + if (context === 'checkout') { + const checkoutBootstap = new CheckoutBootstap(defaultConfig); + + checkoutBootstap.init(); + } +}; document.addEventListener( 'DOMContentLoaded', () => { - - if (! typeof(PayPalCommerceGateway)) { + if (!typeof (PayPalCommerceGateway)) { console.error('PayPal button could not be configured.'); return; } const script = document.createElement('script'); + script.setAttribute('src', PayPalCommerceGateway.button.url); script.addEventListener('load', (event) => { bootstrap(); - }) + }); + document.body.append(script); - - - } + }, ); \ No newline at end of file diff --git a/modules.local/ppcp-button/resources/js/modules/CartBootstap.js b/modules.local/ppcp-button/resources/js/modules/CartBootstap.js new file mode 100644 index 000000000..8711cf768 --- /dev/null +++ b/modules.local/ppcp-button/resources/js/modules/CartBootstap.js @@ -0,0 +1,25 @@ +import Renderer from './Renderer'; + +class CartBootstrap { + constructor(configurator) { + this.configurator = configurator; + } + + init() { + const buttonWrapper = PayPalCommerceGateway.button.wrapper; + + if (!document.querySelector(buttonWrapper)) { + return; + } + + const renderer = new Renderer(buttonWrapper); + + jQuery(document.body).on('updated_cart_totals updated_checkout', () => { + renderer.render(this.configurator.configuration()); + }); + + renderer.render(this.configurator.configuration()); + } +} + +export default CartBootstrap; \ No newline at end of file diff --git a/modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js b/modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js new file mode 100644 index 000000000..144dceec7 --- /dev/null +++ b/modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js @@ -0,0 +1,48 @@ +import Renderer from './Renderer'; + +class CheckoutBootstap { + constructor(configurator) { + this.configurator = configurator; + } + + init() { + const buttonWrapper = PayPalCommerceGateway.button.wrapper; + const cancelWrapper = PayPalCommerceGateway.button.cancel_wrapper; + + if (!document.querySelector(buttonWrapper)) { + return; + } + + const renderer = new Renderer(buttonWrapper); + + jQuery(document.body).on('updated_checkout', () => { + if (document.querySelector(cancelWrapper)) { + return; + } + + renderer.render(this.configurator.configuration()); + + jQuery(document.body).trigger('payment_method_selected'); + }); + + jQuery(document.body).on('payment_method_selected', () => { + // TODO: replace this dirty check, possible create a separate + // context config + const currentPaymentMethod = jQuery( + 'input[name="payment_method"]:checked').val(); + + if (currentPaymentMethod !== 'ppcp-gateway') { + jQuery(buttonWrapper).hide(); + jQuery('#place_order').show(); + } + else { + jQuery(buttonWrapper).show(); + jQuery('#place_order').hide(); + } + }); + + renderer.render(this.configurator.configuration()); + } +} + +export default CheckoutBootstap; \ No newline at end of file diff --git a/modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js b/modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js new file mode 100644 index 000000000..c84100b2a --- /dev/null +++ b/modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js @@ -0,0 +1,26 @@ +import Renderer from './Renderer'; + +class MiniCartBootstap { + constructor(configurator) { + this.configurator = configurator; + } + + init() { + const miniCartWrapper = PayPalCommerceGateway.button.mini_cart_wrapper; + + if (!document.querySelector(miniCartWrapper)) { + return; + } + + const renderer = new Renderer(miniCartWrapper); + + jQuery(document.body). + on('wc_fragments_loaded wc_fragments_refreshed', () => { + renderer.render(this.configurator.configuration()); + }); + + renderer.render(this.configurator.configuration()); + } +} + +export default MiniCartBootstap; \ No newline at end of file diff --git a/modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js b/modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js new file mode 100644 index 000000000..bd1537acf --- /dev/null +++ b/modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js @@ -0,0 +1,37 @@ +import ErrorHandler from './ErrorHandler'; +import Renderer from './Renderer'; +import UpdateCart from './UpdateCart'; +import SingleProductConfig from './SingleProductConfig'; + +class SingleProductBootstap { + init() { + const buttonWrapper = PayPalCommerceGateway.button.wrapper; + + if (!document.querySelector(buttonWrapper)) { + return; + } + + if (!document.querySelector('form.cart')) { + return; + } + + const renderer = new Renderer(buttonWrapper); + const errorHandler = new ErrorHandler(); + const updateCart = new UpdateCart( + PayPalCommerceGateway.ajax.change_cart.endpoint, + PayPalCommerceGateway.ajax.change_cart.nonce, + ); + const configurator = new SingleProductConfig( + PayPalCommerceGateway, + updateCart, + renderer.showButtons.bind(renderer), + renderer.hideButtons.bind(renderer), + document.querySelector('form.cart'), + errorHandler, + ); + + renderer.render(configurator.configuration()); + } +} + +export default SingleProductBootstap; \ No newline at end of file