From 42345d4947de782bbd36110239c12754a744fd13 Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Thu, 17 Mar 2022 09:48:00 +0200
Subject: [PATCH] Add buttons loading spinner

---
 modules/ppcp-button/resources/js/button.js    | 22 ++++++++++++++++---
 .../resources/js/modules/Helper/Spinner.js    |  4 ++--
 .../resources/js/modules/Renderer/Renderer.js |  4 +++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js
index dcaf81228..e3275da51 100644
--- a/modules/ppcp-button/resources/js/button.js
+++ b/modules/ppcp-button/resources/js/button.js
@@ -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;
diff --git a/modules/ppcp-button/resources/js/modules/Helper/Spinner.js b/modules/ppcp-button/resources/js/modules/Helper/Spinner.js
index 9c41eb08b..673e37a90 100644
--- a/modules/ppcp-button/resources/js/modules/Helper/Spinner.js
+++ b/modules/ppcp-button/resources/js/modules/Helper/Spinner.js
@@ -1,7 +1,7 @@
 class Spinner {
 
-    constructor() {
-        this.target = 'form.woocommerce-checkout';
+    constructor(target = 'form.woocommerce-checkout') {
+        this.target = target;
     }
 
     setTarget(target) {
diff --git a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
index 43660c30c..cc811bb58 100644
--- a/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
+++ b/modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
@@ -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);
     }