woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

add new fields for production and sandbox credentials.

Browse source 
Change toggle functionality. Load connect-to-sandbox-button and connect-to-production-button in case credentials are missing
This commit is contained in:
David Remer 2020-09-25 09:19:43 +03:00
parent 8d682afc6c
commit 9327b19b7d
7 changed files with 238 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,7 @@ function onboardingCallback(authCode, sharedId) {
const checkBoxOnClick = (event) => {
const value = event.target.checked;
if (event.target.getAttribute('id') === 'ppcp-sandbox_on') {
toggleConnectButtons(! value);
toggleSandboxProduction(! value);
}
event.preventDefault();
event.stopPropagation();
@ -49,20 +49,88 @@ const checkBoxOnClick = (event) => {
);
}
const toggleConnectButtons = (showProduction) => {
/**
* Toggles the credential input fields.
*
* @param forProduction
*/
const credentialToggle = (forProduction) => {
const sandboxClassSelectors = [
'#field-merchant_email_sandbox',
'#field-merchant_id_sandbox',
'#field-client_id_sandbox',
'#field-client_secret_sandbox',
];
const productionClassSelectors = [
'#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')}
)
}
/**
* 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-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-merchant_email_sandbox',
'#field-merchant_id_sandbox',
'#field-client_id_sandbox',
'#field-client_secret_sandbox',
];
if (showProduction) {
document.querySelector('#connect-to-production').style.display = '';
document.querySelector('#connect-to-sandbox').style.display = 'none';
document.querySelectorAll(productionDisplaySelectors.join()).forEach(
(element) => {element.style.display = ''}
)
document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
(element) => {element.style.display = 'none'}
)
document.querySelectorAll(sandboxClassSelectors.join()).forEach(
(element) => {element.classList.remove('show')}
)
return;
}
document.querySelector('#connect-to-production').style.display = 'none';
document.querySelector('#connect-to-sandbox').style.display = '';
document.querySelectorAll(productionDisplaySelectors.join()).forEach(
(element) => {element.style.display = 'none'}
)
document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
(element) => {element.style.display = ''}
)
document.querySelectorAll(productionClassSelectors.join()).forEach(
(element) => {element.classList.remove('show')}
)
}
(() => {
const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
if (sandboxSwitchElement) {
toggleConnectButtons(! sandboxSwitchElement.checked);
toggleSandboxProduction(! sandboxSwitchElement.checked);
}
document.querySelectorAll('#mainform input[type="checkbox"]').forEach(
@ -71,4 +139,17 @@ const toggleConnectButtons = (showProduction) => {
}
);
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);
}
)
}
)
})();