From 4322386c8586f120ad9169fc03b30b5c1e4f9a9e Mon Sep 17 00:00:00 2001 From: David Remer Date: Mon, 28 Sep 2020 14:05:02 +0300 Subject: [PATCH 1/2] activate spinner when credit card button is clicked --- modules/ppcp-button/resources/js/button.js | 7 +++++-- .../ActionHandler/CheckoutActionHandler.js | 7 +++++-- .../ContextBootstrap/CheckoutBootstap.js | 6 ++++-- .../resources/js/modules/Helper/Spinner.js | 20 +++++++++++++++++++ .../OnApproveHandler/onApproveForPayNow.js | 5 +++-- .../js/modules/Renderer/CreditCardRenderer.js | 6 +++++- 6 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 modules/ppcp-button/resources/js/modules/Helper/Spinner.js diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js index f52b8127d..3c96cd5b6 100644 --- a/modules/ppcp-button/resources/js/button.js +++ b/modules/ppcp-button/resources/js/button.js @@ -7,10 +7,12 @@ import ErrorHandler from './modules/ErrorHandler'; import CreditCardRenderer from "./modules/Renderer/CreditCardRenderer"; import dataClientIdAttributeHandler from "./modules/DataClientIdAttributeHandler"; import MessageRenderer from "./modules/Renderer/MessageRenderer"; +import Spinner from "./modules/Helper/Spinner"; const bootstrap = () => { const errorHandler = new ErrorHandler(PayPalCommerceGateway.labels.error.generic); - const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway, errorHandler); + const spinner = new Spinner(); + const creditCardRenderer = new CreditCardRenderer(PayPalCommerceGateway, errorHandler, spinner); const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway); const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages); const context = PayPalCommerceGateway.context; @@ -46,7 +48,8 @@ const bootstrap = () => { const checkoutBootstap = new CheckoutBootstap( PayPalCommerceGateway, renderer, - messageRenderer + messageRenderer, + spinner ); checkoutBootstap.init(); diff --git a/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js b/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js index bd83ab1af..35cb281de 100644 --- a/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js +++ b/modules/ppcp-button/resources/js/modules/ActionHandler/CheckoutActionHandler.js @@ -3,12 +3,14 @@ import {payerData} from "../Helper/PayerData"; class CheckoutActionHandler { - constructor(config, errorHandler) { + constructor(config, errorHandler, spinner) { this.config = config; this.errorHandler = errorHandler; + this.spinner = spinner; } configuration() { + const spinner = this.spinner; const createOrder = (data, actions) => { const payer = payerData(); const bnCode = typeof this.config.bn_codes[this.config.context] !== 'undefined' ? @@ -31,6 +33,7 @@ class CheckoutActionHandler { return res.json(); }).then(function (data) { if (!data.success) { + spinner.unblock(); errorHandler.message(data.data.message, true); return; } @@ -44,7 +47,7 @@ class CheckoutActionHandler { } return { createOrder, - onApprove:onApprove(this, this.errorHandler), + onApprove:onApprove(this, this.errorHandler, this.spinner), onError: (error) => { this.errorHandler.genericError(); } diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js index de46e5759..85dfbcdc5 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js @@ -2,10 +2,11 @@ import ErrorHandler from '../ErrorHandler'; import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler'; class CheckoutBootstap { - constructor(gateway, renderer, messages) { + constructor(gateway, renderer, messages, spinner) { this.gateway = gateway; this.renderer = renderer; - this.messages = messages + this.messages = messages; + this.spinner = spinner; } init() { @@ -41,6 +42,7 @@ class CheckoutBootstap { const actionHandler = new CheckoutActionHandler( PayPalCommerceGateway, new ErrorHandler(this.gateway.labels.error.generic), + this.spinner ); this.renderer.render( diff --git a/modules/ppcp-button/resources/js/modules/Helper/Spinner.js b/modules/ppcp-button/resources/js/modules/Helper/Spinner.js new file mode 100644 index 000000000..12790dcb1 --- /dev/null +++ b/modules/ppcp-button/resources/js/modules/Helper/Spinner.js @@ -0,0 +1,20 @@ +class Spinner { + + block() { + + jQuery( '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table' ).block({ + message: null, + overlayCSS: { + background: '#fff', + opacity: 0.6 + } + }); + } + + unblock() { + + jQuery( '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table' ).unblock(); + } +} + +export default Spinner; \ No newline at end of file diff --git a/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js b/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js index 61e9bcb9a..8dc13a7da 100644 --- a/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js +++ b/modules/ppcp-button/resources/js/modules/OnApproveHandler/onApproveForPayNow.js @@ -1,5 +1,6 @@ -const onApprove = (context, errorHandler) => { +const onApprove = (context, errorHandler, spinner) => { return (data, actions) => { + spinner.block(); return fetch(context.config.ajax.approve_order.endpoint, { method: 'POST', body: JSON.stringify({ @@ -9,9 +10,9 @@ const onApprove = (context, errorHandler) => { }).then((res)=>{ return res.json(); }).then((data)=>{ + spinner.unblock(); if (!data.success) { errorHandler.genericError(); - console.error(data); if (typeof actions.restart !== 'undefined') { return actions.restart(); } diff --git a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js index 11e37418a..198b4ae5c 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js @@ -2,9 +2,10 @@ import dccInputFactory from "../Helper/DccInputFactory"; class CreditCardRenderer { - constructor(defaultConfig, errorHandler) { + constructor(defaultConfig, errorHandler, spinner) { this.defaultConfig = defaultConfig; this.errorHandler = errorHandler; + this.spinner = spinner; } render(wrapper, contextConfig) { @@ -83,6 +84,7 @@ class CreditCardRenderer { } }).then(hostedFields => { const submitEvent = (event) => { + this.spinner.block(); if (event) { event.preventDefault(); } @@ -103,9 +105,11 @@ class CreditCardRenderer { vault }).then((payload) => { payload.orderID = payload.orderId; + this.spinner.unblock(); return contextConfig.onApprove(payload); }); } else { + this.spinner.unblock(); this.errorHandler.message(this.defaultConfig.hosted_fields.labels.fields_not_valid); } } From 7caa0d3dbfaf9580a553644e89d3f2e4e0a23920 Mon Sep 17 00:00:00 2001 From: David Remer Date: Tue, 29 Sep 2020 10:11:27 +0300 Subject: [PATCH 2/2] change target to apply block() --- modules/ppcp-button/resources/js/modules/Helper/Spinner.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Helper/Spinner.js b/modules/ppcp-button/resources/js/modules/Helper/Spinner.js index 12790dcb1..50e4eebd9 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/Spinner.js +++ b/modules/ppcp-button/resources/js/modules/Helper/Spinner.js @@ -1,8 +1,11 @@ class Spinner { + constructor() { + this.target = 'form.woocommerce-checkout'; + } block() { - jQuery( '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table' ).block({ + jQuery( this.target ).block({ message: null, overlayCSS: { background: '#fff', @@ -13,7 +16,7 @@ class Spinner { unblock() { - jQuery( '.woocommerce-checkout-payment, .woocommerce-checkout-review-order-table' ).unblock(); + jQuery( this.target ).unblock(); } }