woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

Validate manual input

Browse source
This commit is contained in:
Alex P 2022-02-07 09:05:12 +02:00
parent 888bb63e8d
commit 625004e2c6
4 changed files with 74 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ppcp-onboarding/assets/css/onboarding.css
View file

@ -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;

81
modules/ppcp-onboarding/assets/js/onboarding.js
View file

@ -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('<br/>');
errorLabel.scrollIntoView();
window.scrollBy(0, -120); // WP + WC floating header
}
});
// Onboarding buttons.
ppcp_onboarding.init();
})();

3
modules/ppcp-onboarding/src/Assets/OnboardingAssets.php
View file

@ -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' ),
),
);
}

11
modules/ppcp-wc-gateway/services.php
View file

@ -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' ),