Validate manual input

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

@@ -18,6 +18,11 @@
 	display: table-row;
 }
 
+label.error {
+	color: red;
+	font-weight: bold;
+}
+
 #field-toggle_manual_input button {
 	color: #0073aa;
 	transition-property: border, background, color;

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

@@ -104,6 +104,19 @@ function ppcp_onboarding_productionCallback(...args) {
 	return ppcp_onboarding.loginSeller('production', ...args);
 }
 
+const productionCredentialElementsSelectors = [
+    '#field-merchant_email_production',
+    '#field-merchant_id_production',
+    '#field-client_id_production',
+    '#field-client_secret_production',
+];
+const sandboxCredentialElementsSelectors = [
+    '#field-merchant_email_sandbox',
+    '#field-merchant_id_sandbox',
+    '#field-client_id_sandbox',
+    '#field-client_secret_sandbox',
+];
+
 const updateOptionsState = () => {
     const cardsChk = document.querySelector('#ppcp-onboarding-accept-cards');
     if (!cardsChk) {
@@ -136,18 +149,8 @@ const updateOptionsState = () => {
 };
 
 const updateManualInputControls = (shown, isSandbox, isAnyEnvOnboarded) => {
-    const productionElementsSelectors = [
+    const productionElementsSelectors = productionCredentialElementsSelectors;
-        '#field-merchant_email_production',
+    const sandboxElementsSelectors = sandboxCredentialElementsSelectors;
-        '#field-merchant_id_production',
-        '#field-client_id_production',
-        '#field-client_secret_production',
-    ];
-    const sandboxElementsSelectors = [
-        '#field-merchant_email_sandbox',
-        '#field-merchant_id_sandbox',
-        '#field-client_id_sandbox',
-        '#field-client_secret_sandbox',
-    ];
     const otherElementsSelectors = [
         '.woocommerce-save-button',
     ];
@@ -190,25 +193,20 @@ const updateEnvironmentControls = (isSandbox) => {
     );
 };
 
+let isDisconnecting = false;
+
 const disconnect = (event) => {
 	event.preventDefault();
-	const fields = event.target.classList.contains('production') ? [
+	const fields = event.target.classList.contains('production') ? productionCredentialElementsSelectors : sandboxCredentialElementsSelectors;
-		'#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(
+	document.querySelectorAll(fields.map(f => f + ' input').join()).forEach(
 		(element) => {
 			element.value = '';
 		}
 	);
+
+    isDisconnecting = true;
+
 	document.querySelector('.woocommerce-save-button').click();
 };
 
@@ -226,6 +224,20 @@ const preventDirtyCheckboxPropagation = event => {
 };
 
 (() => {
+    const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
+
+    const validate = () => {
+        const selectors = sandboxSwitchElement.checked ? sandboxCredentialElementsSelectors : productionCredentialElementsSelectors;
+        const values = selectors.map(s => document.querySelector(s + ' input')).map(el => el.value);
+
+        const errors = [];
+        if (values.some(v => !v)) {
+            errors.push(PayPalCommerceGatewayOnboarding.error_messages.no_credentials);
+        }
+
+        return errors;
+    };
+
     const isAnyEnvOnboarded = PayPalCommerceGatewayOnboarding.sandbox_state === ppcp_onboarding.STATE_ONBOARDED ||
         PayPalCommerceGatewayOnboarding.production_state === ppcp_onboarding.STATE_ONBOARDED;
 
@@ -259,8 +271,6 @@ const preventDirtyCheckboxPropagation = event => {
 
     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 = isAnyEnvOnboarded;
 
@@ -300,6 +310,25 @@ const preventDirtyCheckboxPropagation = event => {
 
     updateEnvironmentControls(sandboxSwitchElement.checked);
 
+    document.querySelector('#mainform').addEventListener('submit', e => {
+        if (isDisconnecting) {
+            return;
+        }
+
+        const errors = validate();
+        if (errors.length) {
+            e.preventDefault();
+
+            const errorLabel = document.querySelector('#ppcp-form-errors-label');
+            errorLabel.parentElement.parentElement.classList.remove('hide');
+
+            errorLabel.innerHTML = errors.join('<br/>');
+
+            errorLabel.scrollIntoView();
+            window.scrollBy(0, -120); // WP + WC floating header
+        }
+    });
+
 	// Onboarding buttons.
 	ppcp_onboarding.init();
 })();

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

@@ -109,6 +109,9 @@ class OnboardingAssets {
 			'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() ),
+			'error_messages'   => array(
+				'no_credentials' => __( 'Enter the credentials.', 'woocommerce-paypal-payments' ),
+			),
 		);
 	}
 

modules/ppcp-wc-gateway/services.php

@@ -429,6 +429,17 @@ return array(
 				'requirements' => array(),
 				'gateway'      => 'paypal',
 			),
+			'error_label'                        => array(
+				'type'         => 'ppcp-text',
+				'text'         => '<label class="error" id="ppcp-form-errors-label"></label>',
+				'classes'      => array( 'hide', 'ppcp-always-shown-element' ),
+				'screens'      => array(
+					State::STATE_START,
+					State::STATE_ONBOARDED,
+				),
+				'requirements' => array(),
+				'gateway'      => 'paypal',
+			),
 			'sandbox_on'                         => array(
 				'title'        => __( 'Sandbox', 'woocommerce-paypal-payments' ),
 				'classes'      => array( 'ppcp-onboarding-element', 'ppcp-always-shown-element' ),