add disconnect button

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

@@ -3,6 +3,8 @@
 }
 
 #field-merchant_email_production,
+#field-ppcp_disconnect_sandbox,
+#field-ppcp_disconnect_production,
 #field-merchant_id_production,
 #field-client_id_production,
 #field-client_secret_production,
@@ -13,6 +15,8 @@
 	display: none;
 }
 #field-merchant_email_production.show,
+#field-ppcp_disconnect_sandbox.show,
+#field-ppcp_disconnect_production.show,
 #field-merchant_id_production.show,
 #field-client_id_production.show,
 #field-client_secret_production.show,
@@ -51,6 +55,8 @@
 }
 
 
+#field-ppcp_disconnect_sandbox.onboarded,
+#field-ppcp_disconnect_production.onboarded,
 #field-merchant_email_sandbox.onboarded,
 #field-merchant_id_sandbox.onboarded,
 #field-client_id_sandbox.onboarded,
@@ -61,6 +67,8 @@
 #field-client_secret_production.onboarded {
 	display:table-row;
 }
+#field-ppcp_disconnect_sandbox.onboarded.hide,
+#field-ppcp_disconnect_production.onboarded.hide,
 #field-merchant_email_sandbox.onboarded.hide,
 #field-merchant_id_sandbox.onboarded.hide,
 #field-client_id_sandbox.onboarded.hide,

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

@@ -57,12 +57,14 @@ const checkBoxOnClick = (event) => {
 const credentialToggle = (forProduction) => {
 
 	const sandboxClassSelectors = [
+		'#field-ppcp_disconnect_sandbox',
 		'#field-merchant_email_sandbox',
 		'#field-merchant_id_sandbox',
 		'#field-client_id_sandbox',
 		'#field-client_secret_sandbox',
 	];
 	const productionClassSelectors = [
+		'#field-ppcp_disconnect_production',
 		'#field-merchant_email_production',
 		'#field-merchant_id_production',
 		'#field-client_id_production',
@@ -87,6 +89,8 @@ const toggleSandboxProduction = (showProduction) => {
 		'#field-ppcp_onboarding_production',
 	];
 	const productionClassSelectors = [
+
+		'#field-ppcp_disconnect_production',
 		'#field-merchant_email_production',
 		'#field-merchant_id_production',
 		'#field-client_id_production',
@@ -98,6 +102,7 @@ const toggleSandboxProduction = (showProduction) => {
 		'#field-ppcp_onboarding_sandbox',
 	];
 	const sandboxClassSelectors = [
+		'#field-ppcp_disconnect_sandbox',
 		'#field-merchant_email_sandbox',
 		'#field-merchant_id_sandbox',
 		'#field-client_id_sandbox',
@@ -140,12 +145,44 @@ const toggleSandboxProduction = (showProduction) => {
 	)
 }
 
+const disconnect = (event) => {
+	event.preventDefault();
+	const fields = event.target.classList.contains('production') ? [
+		'#field-merchant_email_production input',
+		'#field-merchant_id_production input',
+		'#field-client_id_production input',
+		'#field-client_secret_production input',
+	] : [
+		'#field-merchant_email_sandbox input',
+		'#field-merchant_id_sandbox input',
+		'#field-client_id_sandbox input',
+		'#field-client_secret_sandbox input',
+	];
+
+	document.querySelectorAll(fields.join()).forEach(
+		(element) => {
+			element.value = '';
+		}
+	);
+
+	document.querySelector('.woocommerce-save-button').click();
+}
+
 (() => {
 	const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
 	if (sandboxSwitchElement) {
 		toggleSandboxProduction(! sandboxSwitchElement.checked);
 	}
 
+	document.querySelectorAll('.ppcp-disconnect').forEach(
+		(button) => {
+			button.addEventListener(
+				'click',
+				disconnect
+			);
+		}
+	);
+
 	document.querySelectorAll('#mainform input[type="checkbox"]').forEach(
 		(checkbox) => {
 			checkbox.addEventListener('click', checkBoxOnClick);

modules/ppcp-wc-gateway/services.php

@@ -155,22 +155,6 @@ return array(
 		 */
 
 		$settings     = $container->get( 'wcgateway.settings' );
-		$sandbox_text = $settings->has( 'sandbox_on' ) && $settings->get( 'sandbox_on' ) ?
-			// translators: %1$s and %2$s are button tags.
-			__(
-				'You are currently in the sandbox mode to test your installation. You can switch this, by clicking %1$sReset%2$s',
-				'paypal-payments-for-woocommerce'
-			) :
-			// translators: %1$s and %2$s are button tags.
-			__(
-				'You are in live mode. This means, you can receive money into your account. You can switch this, by clicking %1$sReset%2$s',
-				'paypal-payments-for-woocommerce'
-			);
-		$sandbox_text = sprintf(
-			$sandbox_text,
-			'<button name="save" value="reset">',
-			'</button>'
-		);
 
 		$fields              = array(
 			'sandbox_on'                     => array(
@@ -210,11 +194,25 @@ return array(
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
+			'ppcp_disconnect_production'     => array(
+				'title'        => __( 'Disconnect from PayPal', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp-text',
+				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
+				'text'         => '<button type="button" class="button ppcp-disconnect production">' . esc_html__( 'Disconnect', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'env'          => 'production',
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
 			'production_toggle_manual_input' => array(
 				'type'         => 'ppcp-text',
 				'title'        => __( 'Manual mode', 'paypal-payments-for-woocommerce' ),
 				'classes'      => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
-				'text'         => '<button id="ppcp[production_toggle_manual_input]" class="production-toggle">' . __( 'Toggle to manual credential input', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'text'         => '<button type="button" id="ppcp[production_toggle_manual_input]" class="production-toggle">' . __( 'Toggle to manual credential input', 'paypal-payments-for-woocommerce' ) . '</button>',
 				'screens'      => array(
 					State::STATE_START,
 					State::STATE_PROGRESSIVE,
@@ -308,11 +306,25 @@ return array(
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
+			'ppcp_disconnect_sandbox'        => array(
+				'title'        => __( 'Disconnect from PayPal Sandbox', 'paypal-payments-for-woocommerce' ),
+				'type'         => 'ppcp-text',
+				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
+				'text'         => '<button type="button" class="button ppcp-disconnect sandbox">' . esc_html__( 'Disconnect', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_PROGRESSIVE,
+					State::STATE_ONBOARDED,
+				),
+				'env'          => 'production',
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
 			'sandbox_toggle_manual_input'    => array(
 				'type'         => 'ppcp-text',
 				'title'        => __( 'Manual mode', 'paypal-payments-for-woocommerce' ),
 				'classes'      => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
-				'text'         => '<button id="ppcp[sandbox_toggle_manual_input]" class="sandbox-toggle">' . __( 'Toggle to manual credential input', 'paypal-payments-for-woocommerce' ) . '</button>',
+				'text'         => '<button type="button" id="ppcp[sandbox_toggle_manual_input]" class="sandbox-toggle">' . __( 'Toggle to manual credential input', 'paypal-payments-for-woocommerce' ) . '</button>',
 				'screens'      => array(
 					State::STATE_START,
 					State::STATE_PROGRESSIVE,
@@ -1680,9 +1692,13 @@ return array(
 
 		if ( State::STATE_ONBOARDED === $state->production_state() ) {
 			unset( $fields['ppcp_onboarding_production'] );
+		} else {
+			unset( $fields['ppcp_disconnect_production'] );
 		}
 		if ( State::STATE_ONBOARDED === $state->sandbox_state() ) {
 			unset( $fields['ppcp_onboarding_sandbox'] );
+		} else {
+			unset( $fields['ppcp_disconnect_sandbox'] );
 		}
 
 		/**