Merge pull request #2822 from woocommerce/PCP-3892-create-setting-in-old-and-new-ui-for-users-to-switch-back-and-forth

Create setting for users to switch back and forth (3892)

modules/ppcp-onboarding/src/OnboardingModule.php

@@ -13,6 +13,7 @@ use WooCommerce\PayPalCommerce\Onboarding\Endpoint\UpdateSignupLinksEndpoint;
 use WooCommerce\PayPalCommerce\Onboarding\Assets\OnboardingAssets;
 use WooCommerce\PayPalCommerce\Onboarding\Endpoint\LoginSellerEndpoint;
 use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingRenderer;
+use WooCommerce\PayPalCommerce\Settings\SettingsModule;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExtendingModule;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
@@ -48,7 +49,8 @@ class OnboardingModule implements ServiceModule, ExtendingModule, ExecutableModu
 			// phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores
 			'woocommerce.feature-flags.woocommerce_paypal_payments.settings_enabled',
 			getenv( 'PCP_SETTINGS_ENABLED' ) === '1'
-		) ) {
+		) || SettingsModule::should_use_the_old_ui()
+		) {
 
 			$asset_loader = $c->get( 'onboarding.assets' );
 			/**

modules/ppcp-settings/resources/js/switchSettingsUi.js

@@ -0,0 +1,32 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const config = ppcpSwitchSettingsUi;
+    const button = document.querySelector('.button.button-settings-switch-ui');
+
+    if ( ! typeof config || !button) {
+        return;
+    }
+
+    button.addEventListener('click', () => {
+        fetch(config.endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                nonce: config.nonce,
+            }),
+        })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then((data) => {
+                window.location.reload();
+            })
+            .catch((error) => {
+                console.error('Error:', error);
+            });
+    });
+});

modules/ppcp-settings/services.php

@@ -10,6 +10,7 @@ declare( strict_types = 1 );
 namespace WooCommerce\PayPalCommerce\Settings;
 
 use WooCommerce\PayPalCommerce\Settings\Endpoint\ConnectManualRestEndpoint;
+use WooCommerce\PayPalCommerce\Settings\Endpoint\SwitchSettingsUiEndpoint;
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\OnboardingRestEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Data\OnboardingProfile;
@@ -109,4 +110,10 @@ return array(
 
 		return in_array( $country, $eligible_countries, true );
 	},
+	'settings.switch-ui.endpoint'                 => static function ( ContainerInterface $container ) : SwitchSettingsUiEndpoint {
+		return new SwitchSettingsUiEndpoint(
+			$container->get( 'woocommerce.logger.woocommerce' ),
+			$container->get( 'button.request-data' ),
+		);
+	},
 );

modules/ppcp-settings/src/Endpoint/SwitchSettingsUiEndpoint.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * The settings UI switching Endpoint.
+ *
+ * @package WooCommerce\PayPalCommerce\Settings\Endpoint
+ */
+
+declare( strict_types=1 );
+
+namespace WooCommerce\PayPalCommerce\Settings\Endpoint;
+
+use Exception;
+use Psr\Log\LoggerInterface;
+use WooCommerce\PayPalCommerce\Button\Endpoint\RequestData;
+
+/**
+ * Class SwitchSettingsUiEndpoint
+ */
+class SwitchSettingsUiEndpoint {
+
+	public const ENDPOINT                      = 'ppcp-settings-switch-ui';
+	public const OPTION_NAME_SHOULD_USE_OLD_UI = 'woocommerce_ppcp-settings-should-use-old-ui';
+
+	/**
+	 * The RequestData.
+	 *
+	 * @var RequestData
+	 */
+	protected RequestData $request_data;
+
+	/**
+	 * The logger.
+	 *
+	 * @var LoggerInterface
+	 */
+	protected LoggerInterface $logger;
+
+	/**
+	 * SwitchSettingsUiEndpoint constructor.
+	 *
+	 * @param LoggerInterface $logger The logger.
+	 * @param RequestData     $request_data The Request data.
+	 */
+	public function __construct(
+		LoggerInterface $logger,
+		RequestData $request_data
+	) {
+		$this->logger       = $logger;
+		$this->request_data = $request_data;
+	}
+
+	/**
+	 * Handles the request.
+	 */
+	public function handle_request(): void {
+		if ( ! current_user_can( 'manage_woocommerce' ) ) {
+			wp_send_json_error( 'Not an admin.', 403 );
+			return;
+		}
+
+		try {
+			$this->request_data->read_request( $this->nonce() );
+			update_option( self::OPTION_NAME_SHOULD_USE_OLD_UI, false );
+
+			wp_send_json_success();
+		} catch ( Exception $error ) {
+			wp_send_json_error( array( 'message' => $error->getMessage() ), 500 );
+		}
+	}
+
+	/**
+	 * The nonce.
+	 *
+	 * @return string
+	 */
+	public static function nonce(): string {
+		return self::ENDPOINT;
+	}
+}

modules/ppcp-settings/src/SettingsModule.php

@@ -11,6 +11,7 @@ namespace WooCommerce\PayPalCommerce\Settings;
 
 use WooCommerce\PayPalCommerce\Settings\Endpoint\ConnectManualRestEndpoint;
 use WooCommerce\PayPalCommerce\Settings\Endpoint\OnboardingRestEndpoint;
+use WooCommerce\PayPalCommerce\Settings\Endpoint\SwitchSettingsUiEndpoint;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ExecutableModule;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ModuleClassNameIdTrait;
 use WooCommerce\PayPalCommerce\Vendor\Inpsyde\Modularity\Module\ServiceModule;
@@ -22,6 +23,16 @@ use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
 class SettingsModule implements ServiceModule, ExecutableModule {
 	use ModuleClassNameIdTrait;
 
+	/**
+	 * Returns whether the old settings UI should be loaded.
+	 */
+	public static function should_use_the_old_ui(): bool {
+		return apply_filters(
+			'woocommerce_paypal_payments_should_use_the_old_ui',
+			(bool) get_option( SwitchSettingsUiEndpoint::OPTION_NAME_SHOULD_USE_OLD_UI ) === true
+		);
+	}
+
 	/**
 	 * {@inheritDoc}
 	 */
@@ -33,6 +44,56 @@ class SettingsModule implements ServiceModule, ExecutableModule {
 	 * {@inheritDoc}
 	 */
 	public function run( ContainerInterface $container ) : bool {
+		if ( self::should_use_the_old_ui() ) {
+			add_filter(
+				'woocommerce_paypal_payments_inside_settings_page_header',
+				static fn() : string => sprintf(
+					'<a href="#" class="button button-settings-switch-ui">%s</a>',
+					esc_html__( 'Switch to new settings UI', 'woocommerce-paypal-payments' )
+				)
+			);
+
+			add_action(
+				'admin_enqueue_scripts',
+				static function () use ( $container ) {
+					$module_url = $container->get( 'settings.url' );
+
+					/**
+					 * Require resolves.
+					 *
+					 * @psalm-suppress UnresolvableInclude
+					 */
+					$script_asset_file = require dirname( realpath( __FILE__ ) ?: '', 2 ) . '/assets/switchSettingsUi.asset.php';
+
+					wp_register_script(
+						'ppcp-switch-settings-ui',
+						untrailingslashit( $module_url ) . '/assets/switchSettingsUi.js',
+						$script_asset_file['dependencies'],
+						$script_asset_file['version'],
+						true
+					);
+
+					wp_localize_script(
+						'ppcp-switch-settings-ui',
+						'ppcpSwitchSettingsUi',
+						array(
+							'endpoint' => \WC_AJAX::get_endpoint( SwitchSettingsUiEndpoint::ENDPOINT ),
+							'nonce'    => wp_create_nonce( SwitchSettingsUiEndpoint::nonce() ),
+						)
+					);
+
+					wp_enqueue_script( 'ppcp-switch-settings-ui' );
+				}
+			);
+
+			$endpoint = $container->get( 'settings.switch-ui.endpoint' );
+			assert( $endpoint instanceof SwitchSettingsUiEndpoint );
+
+			add_action( 'wc_ajax_' . SwitchSettingsUiEndpoint::ENDPOINT, array( $endpoint, 'handle_request' ) );
+
+			return true;
+		}
+
 		add_action(
 			'admin_enqueue_scripts',
 			/**

modules/ppcp-settings/webpack.config.js

@@ -7,6 +7,7 @@ module.exports = {
 	...{
 		entry: {
 			index: path.resolve( process.cwd(), 'resources/js', 'index.js' ),
+            switchSettingsUi: path.resolve( process.cwd(), 'resources/js', 'switchSettingsUi.js' ),
 			style: path.resolve( process.cwd(), 'resources/css', 'style.scss' ),
 		},
 	},

modules/ppcp-uninstall/services.php

@@ -10,6 +10,7 @@ declare(strict_types=1);
 namespace WooCommerce\PayPalCommerce\Uninstall;
 
 use WooCommerce\PayPalCommerce\ApiClient\Repository\PayPalRequestIdRepository;
+use WooCommerce\PayPalCommerce\Settings\Endpoint\SwitchSettingsUiEndpoint;
 use WooCommerce\PayPalCommerce\Uninstall\Assets\ClearDatabaseAssets;
 use WooCommerce\PayPalCommerce\Vendor\Psr\Container\ContainerInterface;
 use WooCommerce\PayPalCommerce\WcGateway\Gateway\CardButtonGateway;
@@ -34,6 +35,7 @@ return array(
 			WebhookSimulation::OPTION_ID,
 			WebhookRegistrar::KEY,
 			'ppcp_payment_tokens_migration_initialized',
+			SwitchSettingsUiEndpoint::OPTION_NAME_SHOULD_USE_OLD_UI,
 		);
 	},
 

modules/ppcp-wc-gateway/services.php

@@ -24,6 +24,7 @@ use WooCommerce\PayPalCommerce\Googlepay\GooglePayGateway;
 use WooCommerce\PayPalCommerce\Onboarding\Environment;
 use WooCommerce\PayPalCommerce\Onboarding\Render\OnboardingOptionsRenderer;
 use WooCommerce\PayPalCommerce\Onboarding\State;
+use WooCommerce\PayPalCommerce\Settings\SettingsModule;
 use WooCommerce\PayPalCommerce\WcGateway\Admin\RenderReauthorizeAction;
 use WooCommerce\PayPalCommerce\WcGateway\Assets\VoidButtonAssets;
 use WooCommerce\PayPalCommerce\WcGateway\Endpoint\CaptureCardPayment;
@@ -2067,6 +2068,6 @@ return array(
 	},
 
 	'wcgateway.settings.admin-settings-enabled'            => static function( ContainerInterface $container ): bool {
-		return $container->has( 'settings.url' );
+		return $container->has( 'settings.url' ) && ! SettingsModule::should_use_the_old_ui();
 	},
 );

modules/ppcp-wc-gateway/src/Settings/HeaderRenderer.php

@@ -76,6 +76,7 @@ class HeaderRenderer {
 						. __( 'Submit a bug', 'woocommerce-paypal-payments' ) .
 					'</a>
 				</span>
+				' . apply_filters( 'woocommerce_paypal_payments_inside_settings_page_header', '' ) . '
 			</div>
 
 			<div class="ppcp-notice-wrapper"></div>