Allow to switch between live and sandbox

modules/ppcp-onboarding/assets/css/onboarding.css

@@ -2,25 +2,19 @@
 	display: none;
 }
 
-#field-merchant_email_production,
+.ppcp-onboarded .ppcp-onboarding-element:not(.ppcp-always-shown-element) {
-#field-merchant_id_production,
-#field-client_id_production,
-#field-client_secret_production,
-#field-merchant_email_sandbox,
-#field-merchant_id_sandbox,
-#field-client_id_sandbox,
-#field-client_secret_sandbox{
 	display: none;
 }
 
-#field-merchant_email_production.show,
+.ppcp-onboarding .ppcp-settings-field:not(.ppcp-onboarding-element):not(.ppcp-always-shown-element) {
-#field-merchant_id_production.show,
+	display: none;
-#field-client_id_production.show,
+}
-#field-client_secret_production.show,
+
-#field-merchant_email_sandbox.show,
+.ppcp-settings-field.hide {
-#field-merchant_id_sandbox.show,
+	display: none;
-#field-client_id_sandbox.show,
+}
-#field-client_secret_sandbox.show {
+
+.ppcp-settings-field.show {
 	display: table-row;
 }
 
@@ -37,32 +31,6 @@
 	padding: 0;
 }
 
-#field-sandbox_on.onboarded {
-	display: none;
-}
-
-#field-merchant_email_sandbox.onboarded,
-#field-merchant_id_sandbox.onboarded,
-#field-client_id_sandbox.onboarded,
-#field-client_secret_sandbox.onboarded,
-#field-merchant_email_production.onboarded,
-#field-merchant_id_production.onboarded,
-#field-client_id_production.onboarded,
-#field-client_secret_production.onboarded {
-	display:table-row;
-}
-
-#field-merchant_email_sandbox.onboarded.hide,
-#field-merchant_id_sandbox.onboarded.hide,
-#field-client_id_sandbox.onboarded.hide,
-#field-client_secret_sandbox.onboarded.hide,
-#field-merchant_email_production.onboarded.hide,
-#field-merchant_id_production.onboarded.hide,
-#field-client_id_production.onboarded.hide,
-#field-client_secret_production.onboarded.hide {
-	display:none;
-}
-
 /* Probably not the best location for this but will do until there's a general purpose settings CSS file. */
 .ppcp-settings-field-heading td, .ppcp-settings-field-heading th, .ppcp-settings-no-title-col td {
 	padding-left: 0;

modules/ppcp-onboarding/assets/js/onboarding.js

@@ -4,6 +4,9 @@ const ppcp_onboarding = {
 	PAYPAL_JS_ID: 'ppcp-onboarding-paypal-js',
 	_timeout: false,
 
+    STATE_START: 'start',
+    STATE_ONBOARDED: 'onboarded',
+
 	init: function() {
 		document.addEventListener('DOMContentLoaded', this.reload);
 	},
@@ -132,7 +135,7 @@ const updateOptionsState = () => {
     );
 };
 
-const updateManualInputControls = (shown, isSandbox) => {
+const updateManualInputControls = (shown, isSandbox, isAnyEnvOnboarded) => {
     const productionElementsSelectors = [
         '#field-merchant_email_production',
         '#field-merchant_id_production',
@@ -146,9 +149,11 @@ const updateManualInputControls = (shown, isSandbox) => {
         '#field-client_secret_sandbox',
     ];
     const otherElementsSelectors = [
-        '#field-sandbox_on',
         '.woocommerce-save-button',
     ];
+    if (!isAnyEnvOnboarded) {
+        otherElementsSelectors.push('#field-sandbox_on');
+    }
 
     document.querySelectorAll(productionElementsSelectors.join()).forEach(
         element => {
@@ -167,6 +172,24 @@ const updateManualInputControls = (shown, isSandbox) => {
     );
 };
 
+const updateEnvironmentControls = (isSandbox) => {
+    const productionElementsSelectors = [
+        '#field-ppcp_disconnect_production',
+        '#field-credentials_production_heading',
+    ];
+    const sandboxElementsSelectors = [
+        '#field-ppcp_disconnect_sandbox',
+        '#field-credentials_sandbox_heading',
+    ];
+
+    document.querySelectorAll(productionElementsSelectors.join()).forEach(
+        element => element.style.display = !isSandbox ? '' : 'none'
+    );
+    document.querySelectorAll(sandboxElementsSelectors.join()).forEach(
+        element => element.style.display = isSandbox ? '' : 'none'
+    );
+};
+
 const disconnect = (event) => {
 	event.preventDefault();
 	const fields = event.target.classList.contains('production') ? [
@@ -203,6 +226,9 @@ const preventDirtyCheckboxPropagation = event => {
 };
 
 (() => {
+    const isAnyEnvOnboarded = PayPalCommerceGatewayOnboarding.sandbox_state === ppcp_onboarding.STATE_ONBOARDED ||
+        PayPalCommerceGatewayOnboarding.production_state === ppcp_onboarding.STATE_ONBOARDED;
+
 	document.querySelectorAll('.ppcp-disconnect').forEach(
 		(button) => {
 			button.addEventListener(
@@ -224,32 +250,55 @@ const preventDirtyCheckboxPropagation = event => {
 
     updateOptionsState();
 
+    const settingsContainer = document.querySelector('#mainform .form-table');
+
+    const markCurrentOnboardingState = (isOnboarded) => {
+        settingsContainer.classList.remove('ppcp-onboarded', 'ppcp-onboarding');
+        settingsContainer.classList.add(isOnboarded ? 'ppcp-onboarded' : 'ppcp-onboarding');
+    }
+
+    markCurrentOnboardingState(PayPalCommerceGatewayOnboarding.current_state === ppcp_onboarding.STATE_ONBOARDED);
+
     const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
 
     const manualInputToggleButton = document.querySelector('#field-toggle_manual_input button');
-    let isManualInputShown = manualInputToggleButton === null; // toggle is removed after onboarding and the fields are always shown
+    let isManualInputShown = isAnyEnvOnboarded;
 
-    manualInputToggleButton?.addEventListener(
+    manualInputToggleButton.addEventListener(
             'click',
             (event) => {
                 event.preventDefault();
 
                 isManualInputShown = !isManualInputShown;
 
-                updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked);
+                updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked, isAnyEnvOnboarded);
             }
         );
 
     sandboxSwitchElement.addEventListener(
         'click',
         (event) => {
-            updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked);
+            const isSandbox = sandboxSwitchElement.checked;
+
+            if (isAnyEnvOnboarded) {
+                const onboardingState = isSandbox ? PayPalCommerceGatewayOnboarding.sandbox_state : PayPalCommerceGatewayOnboarding.production_state;
+                const isOnboarded = onboardingState === ppcp_onboarding.STATE_ONBOARDED;
+
+                markCurrentOnboardingState(isOnboarded);
+                isManualInputShown = isOnboarded;
+            }
+
+            updateManualInputControls(isManualInputShown, isSandbox, isAnyEnvOnboarded);
+
+            updateEnvironmentControls(isSandbox);
 
             preventDirtyCheckboxPropagation(event);
         }
     );
 
-    updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked);
+    updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked, isAnyEnvOnboarded);
+
+    updateEnvironmentControls(sandboxSwitchElement.checked);
 
 	// Onboarding buttons.
 	ppcp_onboarding.init();

modules/ppcp-onboarding/assets/js/settings.js

@@ -23,7 +23,7 @@ document.addEventListener(
                     }
 
                     group.forEach( (elementToShow) => {
-                        document.querySelector(elementToShow).style.display = 'table-row';
+                        document.querySelector(elementToShow).style.display = '';
                     })
 
                     if('ppcp-message_enabled' === event.target.getAttribute('id')){
@@ -56,7 +56,7 @@ document.addEventListener(
                     return;
                 }
                 if (value === elementToToggle.value && domElement.style.display !== 'none') {
-                    domElement.style.display = 'table-row';
+                    domElement.style.display = '';
                     return;
                 }
                 domElement.style.display = 'none';
@@ -69,7 +69,7 @@ document.addEventListener(
                     const value = event.target.value;
                     group.forEach( (elementToToggle) => {
                         if (value === elementToToggle.value) {
-                            document.querySelector(elementToToggle.selector).style.display = 'table-row';
+                            document.querySelector(elementToToggle.selector).style.display = '';
                             return;
                         }
                         document.querySelector(elementToToggle.selector).style.display = 'none';

modules/ppcp-onboarding/src/Assets/OnboardingAssets.php

@@ -103,9 +103,12 @@ class OnboardingAssets {
 	 */
 	public function get_script_data() {
 		return array(
-			'endpoint'      => home_url( \WC_AJAX::get_endpoint( LoginSellerEndpoint::ENDPOINT ) ),
+			'endpoint'         => home_url( \WC_AJAX::get_endpoint( LoginSellerEndpoint::ENDPOINT ) ),
-			'nonce'         => wp_create_nonce( $this->login_seller_endpoint::nonce() ),
+			'nonce'            => wp_create_nonce( $this->login_seller_endpoint::nonce() ),
-			'paypal_js_url' => 'https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js',
+			'paypal_js_url'    => 'https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js',
+			'sandbox_state'    => State::get_state_name( $this->state->sandbox_state() ),
+			'production_state' => State::get_state_name( $this->state->production_state() ),
+			'current_state'    => State::get_state_name( $this->state->current_state() ),
 		);
 	}
 

modules/ppcp-onboarding/src/OnboardingRESTController.php

@@ -10,7 +10,6 @@ declare(strict_types=1);
 namespace WooCommerce\PayPalCommerce\Onboarding;
 
 use Psr\Container\ContainerInterface;
-use WooCommerce\PayPalCommerce\Onboarding\State;
 use WooCommerce\PayPalCommerce\WcGateway\Gateway\PayPalGateway;
 
 /**
@@ -138,13 +137,13 @@ class OnboardingRESTController {
 		return array(
 			'environment' => $environment->current_environment(),
 			'onboarded'   => ( $state->current_state() >= State::STATE_ONBOARDED ),
-			'state'       => $this->get_onboarding_state_name( $state->current_state() ),
+			'state'       => State::get_state_name( $state->current_state() ),
 			'sandbox'     => array(
-				'state'     => $this->get_onboarding_state_name( $state->sandbox_state() ),
+				'state'     => State::get_state_name( $state->sandbox_state() ),
 				'onboarded' => ( $state->sandbox_state() >= State::STATE_ONBOARDED ),
 			),
 			'production'  => array(
-				'state'     => $this->get_onboarding_state_name( $state->production_state() ),
+				'state'     => State::get_state_name( $state->production_state() ),
 				'onboarded' => ( $state->production_state() >= State::STATE_ONBOARDED ),
 			),
 		);
@@ -265,31 +264,6 @@ class OnboardingRESTController {
 		return add_query_arg( $this->return_url_args, $url );
 	}
 
-	/**
-	 * Translates an onboarding state to a string.
-	 *
-	 * @param int $state An onboarding state to translate as returned by {@link State} methods.
-	 * @return string A string representing the state: "start", "progressive" or "onboarded".
-	 * @see State::current_state(), State::sandbox_state(), State::production_state().
-	 */
-	public function get_onboarding_state_name( $state ) {
-		$name = 'unknown';
-
-		switch ( absint( $state ) ) {
-			case State::STATE_START:
-				$name = 'start';
-				break;
-			case State::STATE_ONBOARDED:
-				$name = 'onboarded';
-				break;
-			default:
-				break;
-
-		}
-
-		return $name;
-	}
-
 	/**
 	 * Generates a signup link for onboarding for a given environment and optionally adding certain URL arguments
 	 * to the URL users are redirected after completing the onboarding flow.

modules/ppcp-onboarding/src/State.php

@@ -115,6 +115,23 @@ class State {
 		);
 	}
 
+	/**
+	 * Translates an onboarding state to a string.
+	 *
+	 * @param int $state An onboarding state to translate.
+	 * @return string A string representing the state: "start" or "onboarded".
+	 */
+	public static function get_state_name( int $state ) : string {
+		switch ( $state ) {
+			case self::STATE_START:
+				return 'start';
+			case self::STATE_ONBOARDED:
+				return 'onboarded';
+			default:
+				return 'unknown';
+		}
+	}
+
 	/**
 	 * Returns the state based on progressive and onboarded values being looked up in the settings.
 	 *

modules/ppcp-wc-gateway/services.php

@@ -272,6 +272,7 @@ return array(
 		$fields              = array(
 			'ppcp_onboarading_header'            => array(
 				'type'         => 'ppcp-text',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'text'         => '
 <div class="ppcp-onboarding-header">
 	<div class="ppcp-onboarding-header-left">
@@ -296,6 +297,7 @@ return array(
 </div>',
 				'screens'      => array(
 					State::STATE_START,
+					State::STATE_ONBOARDED,
 				),
 				'requirements' => array(),
 				'gateway'      => 'paypal',
@@ -307,6 +309,7 @@ return array(
 				'screens'      => array(
 					State::STATE_ONBOARDED,
 				),
+				'state_from'   => Environment::PRODUCTION,
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
@@ -316,6 +319,7 @@ return array(
 				'screens'      => array(
 					State::STATE_ONBOARDED,
 				),
+				'state_from'   => Environment::SANDBOX,
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 				'description'  => __( 'Your account is connected to sandbox, no real charging takes place. To accept live payments, disconnect and connect your live PayPal account.', 'woocommerce-paypal-payments' ),
@@ -323,10 +327,12 @@ return array(
 
 			'ppcp_onboarading_options'           => array(
 				'type'         => 'ppcp-text',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'text'         => $onboarding_options_renderer->render( $is_shop_supports_dcc ),
 				'raw'          => true,
 				'screens'      => array(
 					State::STATE_START,
+					State::STATE_ONBOARDED,
 				),
 				'requirements' => array(),
 				'gateway'      => 'paypal',
@@ -337,6 +343,7 @@ return array(
 			// is to have the buttons before loading the script.
 			'ppcp_onboarding_production_ppcp'    => array(
 				'type'         => 'ppcp_onboarding',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'screens'      => array(
 					State::STATE_START,
 				),
@@ -348,6 +355,7 @@ return array(
 			),
 			'ppcp_onboarding_production_express' => array(
 				'type'         => 'ppcp_onboarding',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'screens'      => array(
 					State::STATE_START,
 				),
@@ -359,6 +367,7 @@ return array(
 			),
 			'ppcp_onboarding_sandbox_ppcp'       => array(
 				'type'         => 'ppcp_onboarding',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'screens'      => array(
 					State::STATE_START,
 				),
@@ -371,6 +380,7 @@ return array(
 			),
 			'ppcp_onboarding_sandbox_express'    => array(
 				'type'         => 'ppcp_onboarding',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'screens'      => array(
 					State::STATE_START,
 				),
@@ -411,15 +421,17 @@ return array(
 			'toggle_manual_input'                => array(
 				'type'         => 'ppcp-text',
 				'text'         => '<button type="button" id="ppcp[toggle_manual_input]">' . __( 'Toggle to manual credential input', 'woocommerce-paypal-payments' ) . '</button>',
+				'classes'      => array( 'ppcp-onboarding-element' ),
 				'screens'      => array(
 					State::STATE_START,
+					State::STATE_ONBOARDED,
 				),
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
 			'sandbox_on'                         => array(
 				'title'        => __( 'Sandbox', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() || State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'classes'      => array( 'ppcp-onboarding-element', 'ppcp-always-shown-element' ),
 				'type'         => 'checkbox',
 				'label'        => __( 'To test your WooCommerce installation, you can use the sandbox mode.', 'woocommerce-paypal-payments' ),
 				'default'      => 0,
@@ -432,7 +444,7 @@ return array(
 			),
 			'merchant_email_production'          => array(
 				'title'        => __( 'Live Email address', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'text',
 				'required'     => true,
 				'desc_tip'     => true,
@@ -447,7 +459,7 @@ return array(
 			),
 			'merchant_id_production'             => array(
 				'title'        => __( 'Live Merchant Id', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'ppcp-text-input',
 				'desc_tip'     => true,
 				'description'  => __( 'The merchant id of your account ', 'woocommerce-paypal-payments' ),
@@ -461,7 +473,7 @@ return array(
 			),
 			'client_id_production'               => array(
 				'title'        => __( 'Live Client Id', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'ppcp-text-input',
 				'desc_tip'     => true,
 				'description'  => __( 'The client id of your api ', 'woocommerce-paypal-payments' ),
@@ -475,7 +487,7 @@ return array(
 			),
 			'client_secret_production'           => array(
 				'title'        => __( 'Live Secret Key', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'ppcp-password',
 				'desc_tip'     => true,
 				'description'  => __( 'The secret key of your api', 'woocommerce-paypal-payments' ),
@@ -490,7 +502,7 @@ return array(
 
 			'merchant_email_sandbox'             => array(
 				'title'        => __( 'Sandbox Email address', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'text',
 				'required'     => true,
 				'desc_tip'     => true,
@@ -505,7 +517,7 @@ return array(
 			),
 			'merchant_id_sandbox'                => array(
 				'title'        => __( 'Sandbox Merchant Id', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'ppcp-text-input',
 				'desc_tip'     => true,
 				'description'  => __( 'The merchant id of your account ', 'woocommerce-paypal-payments' ),
@@ -519,7 +531,7 @@ return array(
 			),
 			'client_id_sandbox'                  => array(
 				'title'        => __( 'Sandbox Client Id', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'ppcp-text-input',
 				'desc_tip'     => true,
 				'description'  => __( 'The client id of your api ', 'woocommerce-paypal-payments' ),
@@ -533,7 +545,7 @@ return array(
 			),
 			'client_secret_sandbox'              => array(
 				'title'        => __( 'Sandbox Secret Key', 'woocommerce-paypal-payments' ),
-				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '', 'ppcp-always-shown-element' ),
 				'type'         => 'ppcp-password',
 				'desc_tip'     => true,
 				'description'  => __( 'The secret key of your api', 'woocommerce-paypal-payments' ),

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

@@ -419,6 +419,7 @@ $data_rows_html
 			$config['id'] = $id;
 			$colspan      = ( 'ppcp-heading' !== $config['type'] && isset( $config['title'] ) ) ? 1 : 2;
 			$classes      = isset( $config['classes'] ) ? $config['classes'] : array();
+			$classes[]    = 'ppcp-settings-field';
 			$classes[]    = sprintf( 'ppcp-settings-field-%s', str_replace( 'ppcp-', '', $config['type'] ) );
 			if ( 1 !== $colspan ) {
 				$classes[] = 'ppcp-settings-no-title-col';