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

Update manual credentials toggle

Browse source
This commit is contained in:
Alex P 2022-01-18 13:38:22 +02:00
parent 6b9a834064
commit baa4672e1b
3 changed files with 68 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,6 @@
}
#field-merchant_email_production,
#field-ppcp_disconnect_sandbox,
#field-ppcp_disconnect_production,
#field-merchant_id_production,
#field-client_id_production,
#field-client_secret_production,
@ -14,9 +12,8 @@
#field-client_secret_sandbox{
display: none;
}
#field-merchant_email_production.show,
#field-ppcp_disconnect_sandbox.show,
#field-ppcp_disconnect_production.show,
#field-merchant_id_production.show,
#field-client_id_production.show,
#field-client_secret_production.show,
@ -27,14 +24,6 @@
display: table-row;
}
#field-toggle_manual_input span.hide,
#field-toggle_manual_input.show span.show{
display: none;
}
#field-toggle_manual_input.show span.hide {
display: unset;
}
#field-toggle_manual_input button {
color: #0073aa;
transition-property: border, background, color;
@ -48,13 +37,10 @@
padding: 0;
}
#field-toggle_manual_input.onboarded {
#field-sandbox_on.onboarded {
display: none;
}
#field-ppcp_disconnect_sandbox.onboarded,
#field-ppcp_disconnect_production.onboarded,
#field-merchant_email_sandbox.onboarded,
#field-merchant_id_sandbox.onboarded,
#field-client_id_sandbox.onboarded,
@ -65,8 +51,7 @@
#field-client_secret_production.onboarded {
display:table-row;
}
#field-ppcp_disconnect_sandbox.onboarded.hide,
#field-ppcp_disconnect_production.onboarded.hide,
#field-merchant_email_sandbox.onboarded.hide,
#field-merchant_id_sandbox.onboarded.hide,
#field-client_id_sandbox.onboarded.hide,

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

@ -101,100 +101,11 @@ function ppcp_onboarding_productionCallback(...args) {
return ppcp_onboarding.loginSeller('production', ...args);
}
/**
* Toggles the credential input fields.
*
* @param forProduction
*/
const credentialToggle = (forProduction) => {
const sandboxClassSelectors = [
'#field-ppcp_disconnect_sandbox',
'#field-merchant_email_sandbox',
'#field-merchant_id_sandbox',
'#field-client_id_sandbox',
'#field-client_secret_sandbox',
];
const productionClassSelectors = [
'#field-ppcp_disconnect_production',
'#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',
];
const productionClassSelectors = [
'#field-ppcp_disconnect_production',
'#field-merchant_email_production',
'#field-merchant_id_production',
'#field-client_id_production',
'#field-client_secret_production',
];
const sandboxDisplaySelectors = [
'#field-credentials_sandbox_heading',
];
const sandboxClassSelectors = [
'#field-ppcp_disconnect_sandbox',
'#field-merchant_email_sandbox',
'#field-merchant_id_sandbox',
'#field-client_id_sandbox',
'#field-client_secret_sandbox',
];
if (showProduction) {
document.querySelectorAll(productionDisplaySelectors.join()).forEach(
(element) => {element.style.display = ''}
);
document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
(element) => {element.style.display = 'none'}
);
document.querySelectorAll(productionClassSelectors.join()).forEach(
(element) => {element.classList.remove('hide')}
);
document.querySelectorAll(sandboxClassSelectors.join()).forEach(
(element) => {
element.classList.remove('show');
element.classList.add('hide');
}
);
return;
}
document.querySelectorAll(productionDisplaySelectors.join()).forEach(
(element) => {element.style.display = 'none'}
);
document.querySelectorAll(sandboxDisplaySelectors.join()).forEach(
(element) => {element.style.display = ''}
);
document.querySelectorAll(sandboxClassSelectors.join()).forEach(
(element) => {element.classList.remove('hide')}
);
document.querySelectorAll(productionClassSelectors.join()).forEach(
(element) => {
element.classList.remove('show');
element.classList.add('hide');
}
)
};
const updateOptionsState = () => {
const cardsChk = document.querySelector('#ppcp-onboarding-accept-cards');
if (!cardsChk) {
return;
}
document.querySelectorAll('#ppcp-onboarding-dcc-options input').forEach(input => {
input.disabled = !cardsChk.checked;
@ -221,6 +132,41 @@ const updateOptionsState = () => {
);
};
const updateManualInputControls = (shown, isSandbox) => {
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 otherElementsSelectors = [
'#field-sandbox_on',
'.woocommerce-save-button',
];
document.querySelectorAll(productionElementsSelectors.join()).forEach(
element => {
element.classList.remove('hide', 'show');
element.classList.add((shown && !isSandbox) ? 'show' : 'hide');
}
);
document.querySelectorAll(sandboxElementsSelectors.join()).forEach(
element => {
element.classList.remove('hide', 'show');
element.classList.add((shown && isSandbox) ? 'show' : 'hide');
}
);
document.querySelectorAll(otherElementsSelectors.join()).forEach(
element => element.style.display = shown ? '' : 'none'
);
};
const disconnect = (event) => {
event.preventDefault();
const fields = event.target.classList.contains('production') ? [
@ -257,11 +203,6 @@ const preventDirtyCheckboxPropagation = event => {
};
(() => {
const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
if (sandboxSwitchElement) {
toggleSandboxProduction(! sandboxSwitchElement.checked);
}
document.querySelectorAll('.ppcp-disconnect').forEach(
(button) => {
button.addEventListener(
@ -271,19 +212,6 @@ const preventDirtyCheckboxPropagation = event => {
}
);
if (sandboxSwitchElement) {
sandboxSwitchElement.addEventListener(
'click',
(event) => {
const value = event.target.checked;
toggleSandboxProduction( ! value );
preventDirtyCheckboxPropagation(event);
}
);
}
document.querySelectorAll('.ppcp-onboarding-options input').forEach(
(element) => {
element.addEventListener('click', event => {
@ -296,21 +224,33 @@ const preventDirtyCheckboxPropagation = event => {
updateOptionsState();
document.querySelectorAll('#field-toggle_manual_input button').forEach(
(button) => {
button.addEventListener(
'click',
(event) => {
event.preventDefault();
const sandboxSwitchElement = document.querySelector('#ppcp-sandbox_on');
const isProduction = ! sandboxSwitchElement.checked;
toggleSandboxProduction(isProduction);
credentialToggle(isProduction);
}
)
const manualInputToggleButton = document.querySelector('#field-toggle_manual_input button');
let isManualInputShown = manualInputToggleButton === null; // toggle is removed after onboarding and the fields are always shown
manualInputToggleButton?.addEventListener(
'click',
(event) => {
event.preventDefault();
isManualInputShown = !isManualInputShown;
updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked);
}
);
sandboxSwitchElement.addEventListener(
'click',
(event) => {
updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked);
preventDirtyCheckboxPropagation(event);
}
);
updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked);
// Onboarding buttons.
ppcp_onboarding.init();
})();

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

@ -320,7 +320,7 @@ return array(
),
'requirements' => array(),
'gateway' => 'paypal',
'description' => __( 'Your account setting is set to sandbox, no real charging takes place. To accept live payments, switch your environment to live and connect your PayPal account.', 'woocommerce-paypal-payments' ),
'description' => __( 'Your account is connected to sandbox, no real charging takes place. To accept live payments, disconnect and connect your live PayPal account.', 'woocommerce-paypal-payments' ),
),
'ppcp_onboarading_options' => array(
@ -343,7 +343,6 @@ return array(
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'env' => 'production',
'products' => array( 'PPCP' ),
@ -355,7 +354,6 @@ return array(
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'env' => 'production',
'products' => array( 'EXPRESS_CHECKOUT' ),
@ -367,7 +365,6 @@ return array(
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'env' => 'sandbox',
'products' => array( 'PPCP' ),
@ -380,7 +377,6 @@ return array(
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'env' => 'sandbox',
'products' => array( 'EXPRESS_CHECKOUT' ),
@ -392,11 +388,8 @@ return array(
'ppcp_disconnect_production' => array(
'title' => __( 'Disconnect from PayPal', 'woocommerce-paypal-payments' ),
'type' => 'ppcp-text',
'classes' => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
'text' => '<button type="button" class="button ppcp-disconnect production">' . esc_html__( 'Disconnect', 'woocommerce-paypal-payments' ) . '</button>',
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'env' => 'production',
@ -407,11 +400,8 @@ return array(
'ppcp_disconnect_sandbox' => array(
'title' => __( 'Disconnect from PayPal Sandbox', 'woocommerce-paypal-payments' ),
'type' => 'ppcp-text',
'classes' => array( State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
'text' => '<button type="button" class="button ppcp-disconnect sandbox">' . esc_html__( 'Disconnect', 'woocommerce-paypal-payments' ) . '</button>',
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'env' => 'production',
@ -421,18 +411,17 @@ return array(
),
'toggle_manual_input' => array(
'type' => 'ppcp-text',
'classes' => array( State::STATE_ONBOARDED === $state->production_state() ? 'onboarded' : '' ),
'text' => '<button type="button" id="ppcp[toggle_manual_input]">' . __( 'Toggle to manual credential input', 'woocommerce-paypal-payments' ) . '</button>',
'screens' => array(
State::STATE_START,
State::STATE_PROGRESSIVE,
State::STATE_ONBOARDED,
),
'requirements' => array(),
'gateway' => 'paypal',
),
'sandbox_on' => array(
'title' => __( 'Sandbox', 'woocommerce-paypal-payments' ),
'classes' => array( State::STATE_ONBOARDED === $state->production_state() || State::STATE_ONBOARDED === $state->sandbox_state() ? 'onboarded' : '' ),
'type' => 'checkbox',
'label' => __( 'To test your WooCommerce installation, you can use the sandbox mode.', 'woocommerce-paypal-payments' ),
'default' => 0,
@ -2001,21 +1990,12 @@ return array(
unset( $fields['vault_enabled'] );
}
if ( State::STATE_ONBOARDED === $state->production_state() || State::STATE_ONBOARDED === $state->sandbox_state() ) {
unset( $fields['ppcp_onboarading_header'] );
unset( $fields['ppcp_onboarading_options'] );
unset( $fields['ppcp_onboarding_sandbox_ppcp'] );
unset( $fields['ppcp_onboarding_sandbox_express'] );
unset( $fields['ppcp_onboarding_production_ppcp'] );
unset( $fields['ppcp_onboarding_production_express'] );
}
if ( State::STATE_ONBOARDED === $state->production_state() ) {
unset( $fields['ppcp_disconnect_sandbox'] );
unset( $fields['credentials_sandbox_heading'] );
} elseif ( State::STATE_ONBOARDED === $state->sandbox_state() ) {
unset( $fields['ppcp_disconnect_production'] );
} else {
unset( $fields['ppcp_disconnect_sandbox'] );
unset( $fields['ppcp_disconnect_production'] );
unset( $fields['credentials_production_heading'] );
}
/**