From 8e71665ec4013f6422d386f7d0775cc601ddd443 Mon Sep 17 00:00:00 2001
From: Pedro Silva <p.silva@inpsyde.com>
Date: Thu, 4 Jan 2024 15:23:01 +0000
Subject: [PATCH] Add status message to feature availability reload.

---
 .../ppcp-wc-gateway/resources/css/common.scss | 14 ++++++++++
 .../resources/js/gateway-settings.js          | 28 +++++++++++++++----
 .../src/Assets/SettingsPageAssets.php         |  4 +++
 .../Settings/Fields/connection-tab-fields.php |  2 +-
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/modules/ppcp-wc-gateway/resources/css/common.scss b/modules/ppcp-wc-gateway/resources/css/common.scss
index aa9ec7f43..6ab2f4a56 100644
--- a/modules/ppcp-wc-gateway/resources/css/common.scss
+++ b/modules/ppcp-wc-gateway/resources/css/common.scss
@@ -25,3 +25,17 @@
 .ppcp-button-apm {
 	@include apm-button.button;
 }
+
+.ppcp-status-text {
+	padding-top: 4px;
+
+	.error {
+		color: red;
+		font-weight: bold;
+	}
+
+	.success {
+		color: green;
+		font-weight: bold;
+	}
+}
diff --git a/modules/ppcp-wc-gateway/resources/js/gateway-settings.js b/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
index 7d8132cfa..ed50902e6 100644
--- a/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
+++ b/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
@@ -355,11 +355,25 @@ document.addEventListener(
         }
 
         // Logic to handle the "Check available features" button.
-        ((props) => {
-            const $btn = jQuery(props.button);
+        (($, props, anchor) => {
+            const $btn = $(props.button);
+
+            const printStatus = (message, showSpinner) => {
+                const html = message + (showSpinner ? '<span class="spinner is-active" style="float: none;"></span>' : '');
+                $btn.siblings('.ppcp-status-text').html(html);
+            };
+
+            // If the reload comes from a successful refresh.
+            if (typeof URLSearchParams === 'function' && (new URLSearchParams(window.location.search)).get('feature-refreshed')) {
+                printStatus('<span class="success">✔️ ' + props.messages.success + '</span>');
+                $('html, body').animate({
+                    scrollTop: $(anchor).offset().top
+                }, 500);
+            }
 
             $btn.click(async () => {
                 $btn.prop('disabled', true);
+                printStatus(props.messages.waiting, true);
 
                 const response = await fetch(
                     props.endpoint,
@@ -380,14 +394,18 @@ document.addEventListener(
                 const responseData = await response.json();
 
                 if (!responseData.success) {
-                    alert(responseData.data.message);
+                    printStatus(responseData.data.message);
                     $btn.prop('disabled', false);
                 } else {
-                    window.location.reload();
+                    window.location.href += (window.location.href.indexOf('?') > -1 ? '&' : '?') + "feature-refreshed=1#";
                 }
             });
 
-        })(PayPalCommerceGatewaySettings.ajax.refresh_feature_status);
+        })(
+            jQuery,
+            PayPalCommerceGatewaySettings.ajax.refresh_feature_status,
+            '#field-credentials_feature_onboarding_heading'
+        );
 
     }
 );
diff --git a/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php b/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
index 5fae9c0c9..e8aa59a7d 100644
--- a/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
+++ b/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
@@ -244,6 +244,10 @@ class SettingsPageAssets {
 							'endpoint' => \WC_AJAX::get_endpoint( RefreshFeatureStatusEndpoint::ENDPOINT ),
 							'nonce'    => wp_create_nonce( RefreshFeatureStatusEndpoint::nonce() ),
 							'button'   => '.ppcp-refresh-feature-status',
+							'messages' => array(
+								'waiting' => __( 'Checking features...', 'woocommerce-paypal-payments' ),
+								'success' => __( 'Feature status refreshed.', 'woocommerce-paypal-payments' ),
+							),
 						),
 					),
 				)
diff --git a/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php b/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php
index d9513f9c6..b97f59a8f 100644
--- a/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php
+++ b/modules/ppcp-wc-gateway/src/Settings/Fields/connection-tab-fields.php
@@ -393,7 +393,7 @@ return function ( ContainerInterface $container, array $fields ): array {
 		'refresh_feature_status'                        => array(
 			'title'        => __( 'Refresh feature availability status', 'woocommerce-paypal-payments' ),
 			'type'         => 'ppcp-text',
-			'text'         => '<button type="button" class="button ppcp-refresh-feature-status">' . esc_html__( 'Check available features', 'woocommerce-paypal-payments' ) . '</button>',
+			'text'         => '<button type="button" class="button ppcp-refresh-feature-status">' . esc_html__( 'Check available features', 'woocommerce-paypal-payments' ) . '</button><div class="ppcp-status-text"></div>',
 			'screens'      => array(
 				State::STATE_ONBOARDED,
 			),