Merge pull request #1941 from woocommerce/PCP-2489-improve-feature-availability-check-ux

Improve feature availability check UX (2489)

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;
+	}
+}

modules/ppcp-wc-gateway/resources/js/gateway-settings.js

@@ -355,11 +355,25 @@ document.addEventListener(
         }
 
         // Logic to handle the "Check available features" button.
-        ((props) => {
+        (($, props, anchor) => {
-            const $btn = jQuery(props.button);
+            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'
+        );
 
     }
 );

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' ),
+							),
 						),
 					),
 				)

modules/ppcp-wc-gateway/src/Helper/DCCProductStatus.php

@@ -186,4 +186,30 @@ class DCCProductStatus {
 		return $this->has_request_failure;
 	}
 
+	/**
+	 * Clears the persisted result to force a recheck.
+	 *
+	 * @param Settings|null $settings The settings object.
+	 * We accept a Settings object to don't override other sequential settings that are being updated elsewhere.
+	 * @return void
+	 */
+	public function clear( Settings $settings = null ): void {
+		if ( null === $settings ) {
+			$settings = $this->settings;
+		}
+
+		// Unset check stored in memory.
+		$this->current_status_cache = null;
+
+		// Unset settings flag.
+		$settings_key = 'products_dcc_enabled';
+		if ( $settings->has( $settings_key ) ) {
+			$settings->set( $settings_key, false );
+			$settings->persist();
+		}
+
+		// Delete cached value.
+		$this->cache->delete( self::DCC_STATUS_CACHE_KEY );
+	}
+
 }

modules/ppcp-wc-gateway/src/Helper/PayUponInvoiceProductStatus.php

@@ -173,4 +173,30 @@ class PayUponInvoiceProductStatus {
 		return $this->has_request_failure;
 	}
 
+	/**
+	 * Clears the persisted result to force a recheck.
+	 *
+	 * @param Settings|null $settings The settings object.
+	 * We accept a Settings object to don't override other sequential settings that are being updated elsewhere.
+	 * @return void
+	 */
+	public function clear( Settings $settings = null ): void {
+		if ( null === $settings ) {
+			$settings = $this->settings;
+		}
+
+		// Unset check stored in memory.
+		$this->current_status_cache = null;
+
+		// Unset settings flag.
+		$settings_key = 'products_pui_enabled';
+		if ( $settings->has( $settings_key ) ) {
+			$settings->set( $settings_key, false );
+			$settings->persist();
+		}
+
+		// Delete cached value.
+		$this->cache->delete( self::PUI_STATUS_CACHE_KEY );
+	}
+
 }

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,
 			),

modules/ppcp-wc-gateway/src/WCGatewayModule.php

@@ -430,6 +430,22 @@ class WCGatewayModule implements ModuleInterface {
 				$c->get( 'wcgateway.cli.settings.command' )
 			);
 		}
+
+		// Clears product status when appropriate.
+		add_action(
+			'woocommerce_paypal_payments_clear_apm_product_status',
+			function( Settings $settings = null ) use ( $c ): void {
+				$dcc_product_status = $c->get( 'wcgateway.helper.dcc-product-status' );
+				if ( $dcc_product_status instanceof DCCProductStatus ) {
+					$dcc_product_status->clear( $settings );
+				}
+
+				$pui_product_status = $c->get( 'wcgateway.pay-upon-invoice-product-status' );
+				if ( $pui_product_status instanceof PayUponInvoiceProductStatus ) {
+					$pui_product_status->clear( $settings );
+				}
+			}
+		);
 	}
 
 	/**