From 625004e2c6ea169ec233ebad194d39415bdec4b7 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 7 Feb 2022 09:05:12 +0200 Subject: [PATCH] Validate manual input --- .../ppcp-onboarding/assets/css/onboarding.css | 5 ++ .../ppcp-onboarding/assets/js/onboarding.js | 81 +++++++++++++------ .../src/Assets/OnboardingAssets.php | 3 + modules/ppcp-wc-gateway/services.php | 11 +++ 4 files changed, 74 insertions(+), 26 deletions(-) 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' ),