Sandbox live switch, Change onboarding flow

modules/ppcp-api-client/services.php

@@ -47,10 +47,10 @@
 
 return array(
 	'api.host'                              => function( $container ) : string {
-		return 'https://api.paypal.com';
+		return PAYPAL_API_URL;
 	},
 	'api.paypal-host'                       => function( $container ) : string {
-		return 'https://api.paypal.com';
+		return PAYPAL_API_URL;
 	},
 	'api.partner_merchant_id'               => static function () : string {
 		return '';

modules/ppcp-api-client/src/Repository/class-partnerreferralsdata.php

@@ -72,7 +72,6 @@ public function data(): array {
 	private function default_data(): array {
 
 		return array(
-			'email'                   => $this->merchant_email,
 			'partner_config_override' => array(
 				'partner_logo_url'       => 'https://connect.woocommerce.com/images/woocommerce_logo.png',
 				'return_url'             => admin_url(

modules/ppcp-button/src/Assets/class-smartbutton.php

@@ -860,18 +860,23 @@ private function context(): string {
 	 * @throws \WooCommerce\PayPalCommerce\WcGateway\Exception\NotFoundException If a setting has not been found.
 	 */
 	private function dcc_is_enabled(): bool {
+		if ( ! is_checkout() ) {
+			return false;
+		}
 		if ( ! $this->dcc_applies->for_country_currency() ) {
 			return false;
 		}
 		$keys = array(
-			'dcc_enabled' => 'is_checkout',
+			'client_id',
+			'client_secret',
+			'dcc_enabled',
 		);
-		foreach ( $keys as $key => $callback ) {
-			if ( $this->settings->has( $key ) && $this->settings->get( $key ) && $callback() ) {
-				return true;
+		foreach ( $keys as $key ) {
+			if ( ! $this->settings->has( $key ) || ! $this->settings->get( $key ) ) {
+				return false;
 			}
 		}
-		return false;
+		return true;
 	}
 
 	/**

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

@@ -2,14 +2,28 @@
 	display: none;
 }
 
-#field-client_secret,
-#field-client_id,
-#field-merchant_id{
+#field-merchant_email_production,
+#field-ppcp_disconnect_sandbox,
+#field-ppcp_disconnect_production,
+#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-client_secret.show,
-#field-client_id.show,
-#field-merchant_id.show {
+#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,
+#field-merchant_email_sandbox.show,
+#field-merchant_id_sandbox.show,
+#field-client_id_sandbox.show,
+#field-client_secret_sandbox.show {
 	display: table-row;
 }
 
@@ -21,7 +35,8 @@
 	display: unset;
 }
 
-#field-toggle_manual_input button {
+#field-production_toggle_manual_input button,
+#field-sandbox_toggle_manual_input button {
 	color: #0073aa;
 	transition-property: border, background, color;
 	transition-duration: .05s;
@@ -33,3 +48,34 @@
 	margin: 0;
 	padding: 0;
 }
+
+#field-sandbox_toggle_manual_input.onboarded,
+#field-production_toggle_manual_input.onboarded {
+	display: none;
+}
+
+
+#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,
+#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-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,
+#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;
+}

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

@@ -1,4 +1,5 @@
 function onboardingCallback(authCode, sharedId) {
+	const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
 	fetch(
 		PayPalCommerceGatewayOnboarding.endpoint,
 		{
@@ -10,18 +11,186 @@ function onboardingCallback(authCode, sharedId) {
 				{
 					authCode: authCode,
 					sharedId: sharedId,
-					nonce: PayPalCommerceGatewayOnboarding.nonce
+					nonce: PayPalCommerceGatewayOnboarding.nonce,
+					env: sandboxSwitchElement && sandboxSwitchElement.checked ? 'sandbox' : 'production'
 				}
 			)
 		}
+	);
+}
+
+/**
+ * Since the PayPal modal will redirect the user a dirty form
+ * provokes an alert if the user wants to leave the page. Since the user
+ * needs to toggle the sandbox switch, we disable this dirty state with the
+ * following workaround for checkboxes.
+ *
+ * @param event
+ */
+const checkBoxOnClick = (event) => {
+	const value = event.target.checked;
+	if (event.target.getAttribute('id') === 'ppcp-sandbox_on') {
+		toggleSandboxProduction(! value);
+	}
+	event.preventDefault();
+	event.stopPropagation();
+	setTimeout( () => {
+		event.target.checked = value;
+		},1
+	);
+};
+
+/**
+ * Toggles the credential input fields.
+ *
+ * @param forProduction
+ */
+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',
+		'#field-client_secret_production',
+	];
+
+	const selectors = forProduction ? productionClassSelectors : sandboxClassSelectors;
+	document.querySelectorAll(selectors.join()).forEach(
+		(element) => {element.classList.toggle('show')}
 	)
-		.then( response => response.json() )
-		.then(
-			(data) => {
-				if (data.success) {
-					return;
-				}
-				alert( PayPalCommerceGatewayOnboarding.error )
+};
+
+/**
+ * Toggles the visibility of the sandbox/production input fields.
+ *
+ * @param showProduction
+ */
+const toggleSandboxProduction = (showProduction) => {
+	const productionDisplaySelectors = [
+		'#field-credentials_production_heading',
+		'#field-production_toggle_manual_input',
+		'#field-ppcp_onboarding_production',
+	];
+	const productionClassSelectors = [
+
+		'#field-ppcp_disconnect_production',
+		'#field-merchant_email_production',
+		'#field-merchant_id_production',
+		'#field-client_id_production',
+		'#field-client_secret_production',
+	];
+	const sandboxDisplaySelectors = [
+		'#field-credentials_sandbox_heading',
+		'#field-sandbox_toggle_manual_input',
+		'#field-ppcp_onboarding_sandbox',
+	];
+	const sandboxClassSelectors = [
+		'#field-ppcp_disconnect_sandbox',
+		'#field-merchant_email_sandbox',
+		'#field-merchant_id_sandbox',
+		'#field-client_id_sandbox',
+		'#field-client_secret_sandbox',
+	];
+
+	if (showProduction) {
+		document.querySelectorAll(productionDisplaySelectors.join()).forEach(
+			(element) => {element.style.display = ''}
+		);
+		document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
+			(element) => {element.style.display = 'none'}
+		);
+		document.querySelectorAll(productionClassSelectors.join()).forEach(
+			(element) => {element.classList.remove('hide')}
+		);
+		document.querySelectorAll(sandboxClassSelectors.join()).forEach(
+			(element) => {
+				element.classList.remove('show');
+				element.classList.add('hide');
 			}
 		);
-}
+		return;
+	}
+	document.querySelectorAll(productionDisplaySelectors.join()).forEach(
+		(element) => {element.style.display = 'none'}
+	);
+	document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
+		(element) => {element.style.display = ''}
+	);
+
+	document.querySelectorAll(sandboxClassSelectors.join()).forEach(
+		(element) => {element.classList.remove('hide')}
+	);
+	document.querySelectorAll(productionClassSelectors.join()).forEach(
+		(element) => {
+			element.classList.remove('show');
+			element.classList.add('hide');
+		}
+	)
+};
+
+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);
+		}
+	);
+
+	document.querySelectorAll('#field-sandbox_toggle_manual_input button, #field-production_toggle_manual_input button').forEach(
+		(button) => {
+			button.addEventListener(
+				'click',
+				(event) => {
+					event.preventDefault();
+					const isProduction = event.target.classList.contains('production-toggle');
+					credentialToggle(isProduction);
+				}
+			)
+		}
+	)
+
+})();