diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css
index a09a150d9..98cc7608f 100644
--- a/modules/ppcp-onboarding/assets/css/onboarding.css
+++ b/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;
diff --git a/modules/ppcp-onboarding/assets/js/onboarding.js b/modules/ppcp-onboarding/assets/js/onboarding.js
index 950c50483..eb76bba82 100644
--- a/modules/ppcp-onboarding/assets/js/onboarding.js
+++ b/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 = [
- '#field-merchant_email_production',
- '#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 productionElementsSelectors = productionCredentialElementsSelectors;
+ const sandboxElementsSelectors = sandboxCredentialElementsSelectors;
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') ? [
- '#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',
- ];
+ const fields = event.target.classList.contains('production') ? productionCredentialElementsSelectors : sandboxCredentialElementsSelectors;
- 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('
');
+
+ errorLabel.scrollIntoView();
+ window.scrollBy(0, -120); // WP + WC floating header
+ }
+ });
+
// Onboarding buttons.
ppcp_onboarding.init();
})();
diff --git a/modules/ppcp-onboarding/src/Assets/OnboardingAssets.php b/modules/ppcp-onboarding/src/Assets/OnboardingAssets.php
index 9c883e960..fbacf3cc1 100644
--- a/modules/ppcp-onboarding/src/Assets/OnboardingAssets.php
+++ b/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' ),
+ ),
);
}
diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php
index c006f8b0c..395f98bca 100644
--- a/modules/ppcp-wc-gateway/services.php
+++ b/modules/ppcp-wc-gateway/services.php
@@ -429,6 +429,17 @@ return array(
'requirements' => array(),
'gateway' => 'paypal',
),
+ 'error_label' => array(
+ 'type' => 'ppcp-text',
+ 'text' => '',
+ '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' ),