mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 18:16:38 +08:00
Add missing .gitignore file
This commit is contained in:
parent
2d4620d780
commit
be478fc3e6
4 changed files with 3 additions and 933 deletions
3
modules/ppcp-onboarding/.gitignore
vendored
Normal file
3
modules/ppcp-onboarding/.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules
|
||||||
|
/assets/js
|
||||||
|
/assets/css
|
|
@ -1,221 +0,0 @@
|
||||||
.optional {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarded .ppcp-onboarding-element:not(.ppcp-always-shown-element) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding .ppcp-settings-field:not(.ppcp-onboarding-element):not(.ppcp-always-shown-element) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-field.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-field.show {
|
|
||||||
display: table-row;
|
|
||||||
}
|
|
||||||
|
|
||||||
label.error {
|
|
||||||
color: red;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#field-toggle_manual_input button {
|
|
||||||
color: #0073aa;
|
|
||||||
transition-property: border, background, color;
|
|
||||||
transition-duration: .05s;
|
|
||||||
transition-timing-function: ease-in-out;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Probably not the best location for this but will do until there's a general purpose settings CSS file. */
|
|
||||||
.ppcp-settings-field-heading td, .ppcp-settings-field-heading th, .ppcp-settings-no-title-col td {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce_page_wc-settings h3.ppcp-subheading {
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-text[pattern]:invalid {
|
|
||||||
border: red solid 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ppcp-onboarding-options, ul.ppcp-onboarding-options-sublist {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.ppcp-onboarding-options-sublist {
|
|
||||||
margin-left: 15px;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-muted-text {
|
|
||||||
opacity: 0.6;
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#field-ppcp_onboarading_header > td, #field-ppcp_onboarading_options > td {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header, .ppcp-onboarding-cards-options {
|
|
||||||
display: flex;
|
|
||||||
width: 1200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-left, .ppcp-onboarding-header-right {
|
|
||||||
flex: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-right {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header h2 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-left img {
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-cards img, .ppcp-onboarding-header-paypal-logos img {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-cards img {
|
|
||||||
height: 37px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-paypal-logos img {
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-options table {
|
|
||||||
margin-left: 35px;
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-options table th, .ppcp-onboarding-cards-options table td {
|
|
||||||
padding-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-options table th {
|
|
||||||
width: 350px;
|
|
||||||
vertical-align: middle !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-options table tr th, .ppcp-onboarding-cards-options table tr td {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-options table {
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-options table tr {
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-screen {
|
|
||||||
flex: 1;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-screen img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-help-tip.ppcp-table-row-tooltip {
|
|
||||||
margin-left: -20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.ppcp-onboarding-header, .ppcp-onboarding-cards-options {
|
|
||||||
width: unset;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-right {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-cards-screen {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-left img {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-cards img, .ppcp-onboarding-header-paypal-logos img {
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-cards img {
|
|
||||||
height: 27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-onboarding-header-paypal-logos img {
|
|
||||||
height: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header img {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header h4 {
|
|
||||||
margin: 0 15px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header .button, .ppcp-settings-page-header a {
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-right-align {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.ppcp-settings-page-header {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header .ppcp-right-align {
|
|
||||||
display: block;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header .button, .ppcp-settings-page-header a {
|
|
||||||
margin: 5px 10px 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header .ppcp-inline-only {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ppcp-settings-page-header h4 {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,382 +0,0 @@
|
||||||
const ppcp_onboarding = {
|
|
||||||
BUTTON_SELECTOR: '[data-paypal-onboard-button]',
|
|
||||||
PAYPAL_JS_ID: 'ppcp-onboarding-paypal-js',
|
|
||||||
_timeout: false,
|
|
||||||
|
|
||||||
STATE_START: 'start',
|
|
||||||
STATE_ONBOARDED: 'onboarded',
|
|
||||||
|
|
||||||
init: function() {
|
|
||||||
document.addEventListener('DOMContentLoaded', this.reload);
|
|
||||||
},
|
|
||||||
|
|
||||||
reload: function() {
|
|
||||||
const buttons = document.querySelectorAll(ppcp_onboarding.BUTTON_SELECTOR);
|
|
||||||
|
|
||||||
if (0 === buttons.length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add event listeners to buttons preventing link clicking if PayPal init failed.
|
|
||||||
buttons.forEach(
|
|
||||||
(element) => {
|
|
||||||
if (element.hasAttribute('data-ppcp-button-initialized')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
element.addEventListener(
|
|
||||||
'click',
|
|
||||||
(e) => {
|
|
||||||
if (!element.hasAttribute('data-ppcp-button-initialized') || 'undefined' === typeof window.PAYPAL) {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Clear any previous PayPal scripts.
|
|
||||||
[ppcp_onboarding.PAYPAL_JS_ID, 'signup-js', 'biz-js'].forEach(
|
|
||||||
(scriptID) => {
|
|
||||||
const scriptTag = document.getElementById(scriptID);
|
|
||||||
|
|
||||||
if (scriptTag) {
|
|
||||||
scriptTag.parentNode.removeChild(scriptTag);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ('undefined' !== typeof window.PAYPAL) {
|
|
||||||
delete window.PAYPAL;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Load PayPal scripts.
|
|
||||||
const paypalScriptTag = document.createElement('script');
|
|
||||||
paypalScriptTag.id = ppcp_onboarding.PAYPAL_JS_ID;
|
|
||||||
paypalScriptTag.src = PayPalCommerceGatewayOnboarding.paypal_js_url;
|
|
||||||
document.body.append(paypalScriptTag);
|
|
||||||
|
|
||||||
if (ppcp_onboarding._timeout) {
|
|
||||||
clearTimeout(ppcp_onboarding._timeout);
|
|
||||||
}
|
|
||||||
|
|
||||||
ppcp_onboarding._timeout = setTimeout(
|
|
||||||
() => {
|
|
||||||
buttons.forEach((element) => { element.setAttribute('data-ppcp-button-initialized', 'true'); });
|
|
||||||
|
|
||||||
if ('undefined' !== window.PAYPAL.apps.Signup) {
|
|
||||||
window.PAYPAL.apps.Signup.render();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
1000
|
|
||||||
);
|
|
||||||
|
|
||||||
const onboard_pui = document.querySelector('#ppcp-onboarding-pui');
|
|
||||||
onboard_pui?.addEventListener('click', (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
buttons.forEach((element) => {
|
|
||||||
element.removeAttribute('href');
|
|
||||||
});
|
|
||||||
|
|
||||||
fetch(PayPalCommerceGatewayOnboarding.pui_endpoint, {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify({
|
|
||||||
nonce: PayPalCommerceGatewayOnboarding.pui_nonce,
|
|
||||||
checked: onboard_pui.checked
|
|
||||||
})
|
|
||||||
}).then((res)=>{
|
|
||||||
return res.json();
|
|
||||||
}).then((data)=>{
|
|
||||||
if (!data.success) {
|
|
||||||
alert('Could not update signup buttons: ' + JSON.stringify(data));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
buttons.forEach((element) => {
|
|
||||||
for (let [key, value] of Object.entries(data.data.signup_links)) {
|
|
||||||
key = 'connect-to' + key.replace(/-/g, '');
|
|
||||||
if(key === element.id) {
|
|
||||||
element.setAttribute('href', value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
loginSeller: function(env, authCode, sharedId) {
|
|
||||||
fetch(
|
|
||||||
PayPalCommerceGatewayOnboarding.endpoint,
|
|
||||||
{
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'content-type': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(
|
|
||||||
{
|
|
||||||
authCode: authCode,
|
|
||||||
sharedId: sharedId,
|
|
||||||
nonce: PayPalCommerceGatewayOnboarding.nonce,
|
|
||||||
env: env,
|
|
||||||
acceptCards: document.querySelector('#ppcp-onboarding-accept-cards').checked,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
function ppcp_onboarding_sandboxCallback(...args) {
|
|
||||||
return ppcp_onboarding.loginSeller('sandbox', ...args);
|
|
||||||
}
|
|
||||||
|
|
||||||
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) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelectorAll('#ppcp-onboarding-dcc-options input').forEach(input => {
|
|
||||||
input.disabled = !cardsChk.checked;
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelector('.ppcp-onboarding-cards-options').style.display = !cardsChk.checked ? 'none' : '';
|
|
||||||
|
|
||||||
const basicRb = document.querySelector('#ppcp-onboarding-dcc-basic');
|
|
||||||
|
|
||||||
const isExpress = !cardsChk.checked || basicRb.checked;
|
|
||||||
|
|
||||||
const expressButtonSelectors = [
|
|
||||||
'#field-ppcp_onboarding_production_express',
|
|
||||||
'#field-ppcp_onboarding_sandbox_express',
|
|
||||||
];
|
|
||||||
const ppcpButtonSelectors = [
|
|
||||||
'#field-ppcp_onboarding_production_ppcp',
|
|
||||||
'#field-ppcp_onboarding_sandbox_ppcp',
|
|
||||||
];
|
|
||||||
|
|
||||||
document.querySelectorAll(expressButtonSelectors.join()).forEach(
|
|
||||||
element => element.style.display = isExpress ? '' : 'none'
|
|
||||||
);
|
|
||||||
document.querySelectorAll(ppcpButtonSelectors.join()).forEach(
|
|
||||||
element => element.style.display = !isExpress ? '' : 'none'
|
|
||||||
);
|
|
||||||
|
|
||||||
const screemImg = document.querySelector('#ppcp-onboarding-cards-screen-img');
|
|
||||||
if (screemImg) {
|
|
||||||
const currentRb = Array.from(document.querySelectorAll('#ppcp-onboarding-dcc-options input[type="radio"]'))
|
|
||||||
.filter(rb => rb.checked)[0] ?? null;
|
|
||||||
|
|
||||||
const imgUrl = currentRb.getAttribute('data-screen-url');
|
|
||||||
screemImg.src = imgUrl;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateManualInputControls = (shown, isSandbox, isAnyEnvOnboarded) => {
|
|
||||||
const productionElementsSelectors = productionCredentialElementsSelectors;
|
|
||||||
const sandboxElementsSelectors = sandboxCredentialElementsSelectors;
|
|
||||||
const otherElementsSelectors = [
|
|
||||||
'.woocommerce-save-button',
|
|
||||||
];
|
|
||||||
if (!isAnyEnvOnboarded) {
|
|
||||||
otherElementsSelectors.push('#field-sandbox_on');
|
|
||||||
}
|
|
||||||
|
|
||||||
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 updateEnvironmentControls = (isSandbox) => {
|
|
||||||
const productionElementsSelectors = [
|
|
||||||
'#field-ppcp_disconnect_production',
|
|
||||||
'#field-credentials_production_heading',
|
|
||||||
];
|
|
||||||
const sandboxElementsSelectors = [
|
|
||||||
'#field-ppcp_disconnect_sandbox',
|
|
||||||
'#field-credentials_sandbox_heading',
|
|
||||||
];
|
|
||||||
|
|
||||||
document.querySelectorAll(productionElementsSelectors.join()).forEach(
|
|
||||||
element => element.style.display = !isSandbox ? '' : 'none'
|
|
||||||
);
|
|
||||||
document.querySelectorAll(sandboxElementsSelectors.join()).forEach(
|
|
||||||
element => element.style.display = isSandbox ? '' : 'none'
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
let isDisconnecting = false;
|
|
||||||
|
|
||||||
const disconnect = (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
const fields = event.target.classList.contains('production') ? productionCredentialElementsSelectors : sandboxCredentialElementsSelectors;
|
|
||||||
|
|
||||||
document.querySelectorAll(fields.map(f => f + ' input').join()).forEach(
|
|
||||||
(element) => {
|
|
||||||
element.value = '';
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
sandboxSwitchElement.checked = ! sandboxSwitchElement.checked;
|
|
||||||
|
|
||||||
isDisconnecting = true;
|
|
||||||
|
|
||||||
document.querySelector('.woocommerce-save-button').click();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Prevent the message about unsaved checkbox/radiobutton when reloading the page.
|
|
||||||
// (WC listens for changes on all inputs and sets dirty flag until form submission)
|
|
||||||
const preventDirtyCheckboxPropagation = event => {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
|
|
||||||
const value = event.target.checked;
|
|
||||||
setTimeout( () => {
|
|
||||||
event.target.checked = value;
|
|
||||||
}, 1
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
document.querySelectorAll('.ppcp-disconnect').forEach(
|
|
||||||
(button) => {
|
|
||||||
button.addEventListener(
|
|
||||||
'click',
|
|
||||||
disconnect
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
document.querySelectorAll('.ppcp-onboarding-options input').forEach(
|
|
||||||
(element) => {
|
|
||||||
element.addEventListener('click', event => {
|
|
||||||
updateOptionsState();
|
|
||||||
|
|
||||||
preventDirtyCheckboxPropagation(event);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const isSandboxInBackend = PayPalCommerceGatewayOnboarding.current_env === 'sandbox';
|
|
||||||
if (sandboxSwitchElement.checked !== isSandboxInBackend) {
|
|
||||||
sandboxSwitchElement.checked = isSandboxInBackend;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateOptionsState();
|
|
||||||
|
|
||||||
const settingsContainer = document.querySelector('#mainform .form-table');
|
|
||||||
|
|
||||||
const markCurrentOnboardingState = (isOnboarded) => {
|
|
||||||
settingsContainer.classList.remove('ppcp-onboarded', 'ppcp-onboarding');
|
|
||||||
settingsContainer.classList.add(isOnboarded ? 'ppcp-onboarded' : 'ppcp-onboarding');
|
|
||||||
}
|
|
||||||
|
|
||||||
markCurrentOnboardingState(PayPalCommerceGatewayOnboarding.current_state === ppcp_onboarding.STATE_ONBOARDED);
|
|
||||||
|
|
||||||
const manualInputToggleButton = document.querySelector('#field-toggle_manual_input button');
|
|
||||||
let isManualInputShown = PayPalCommerceGatewayOnboarding.current_state === ppcp_onboarding.STATE_ONBOARDED;
|
|
||||||
|
|
||||||
manualInputToggleButton.addEventListener(
|
|
||||||
'click',
|
|
||||||
(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
isManualInputShown = !isManualInputShown;
|
|
||||||
|
|
||||||
updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked, isAnyEnvOnboarded);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
sandboxSwitchElement.addEventListener(
|
|
||||||
'click',
|
|
||||||
(event) => {
|
|
||||||
const isSandbox = sandboxSwitchElement.checked;
|
|
||||||
|
|
||||||
if (isAnyEnvOnboarded) {
|
|
||||||
const onboardingState = isSandbox ? PayPalCommerceGatewayOnboarding.sandbox_state : PayPalCommerceGatewayOnboarding.production_state;
|
|
||||||
const isOnboarded = onboardingState === ppcp_onboarding.STATE_ONBOARDED;
|
|
||||||
|
|
||||||
markCurrentOnboardingState(isOnboarded);
|
|
||||||
isManualInputShown = isOnboarded;
|
|
||||||
}
|
|
||||||
|
|
||||||
updateManualInputControls(isManualInputShown, isSandbox, isAnyEnvOnboarded);
|
|
||||||
|
|
||||||
updateEnvironmentControls(isSandbox);
|
|
||||||
|
|
||||||
preventDirtyCheckboxPropagation(event);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
updateManualInputControls(isManualInputShown, sandboxSwitchElement.checked, isAnyEnvOnboarded);
|
|
||||||
|
|
||||||
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();
|
|
||||||
})();
|
|
|
@ -1,330 +0,0 @@
|
||||||
document.addEventListener(
|
|
||||||
'DOMContentLoaded',
|
|
||||||
() => {
|
|
||||||
const groupToggle = (selector, group) => {
|
|
||||||
const toggleElement = document.querySelector(selector);
|
|
||||||
if (! toggleElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (! toggleElement.checked) {
|
|
||||||
group.forEach( (elementToHide) => {
|
|
||||||
document.querySelector(elementToHide).style.display = 'none';
|
|
||||||
})
|
|
||||||
}
|
|
||||||
toggleElement.addEventListener(
|
|
||||||
'change',
|
|
||||||
(event) => {
|
|
||||||
|
|
||||||
if (! event.target.checked) {
|
|
||||||
group.forEach( (elementToHide) => {
|
|
||||||
document.querySelector(elementToHide).style.display = 'none';
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
group.forEach( (elementToShow) => {
|
|
||||||
document.querySelector(elementToShow).style.display = '';
|
|
||||||
})
|
|
||||||
|
|
||||||
if('ppcp-message_enabled' === event.target.getAttribute('id')){
|
|
||||||
updateCheckoutMessageFields();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if('ppcp-message_product_enabled' === event.target.getAttribute('id')){
|
|
||||||
updateProductMessageFields();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if('ppcp-message_cart_enabled' === event.target.getAttribute('id')){
|
|
||||||
updateCartMessageFields();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const groupToggleSelect = (selector, group) => {
|
|
||||||
const toggleElement = document.querySelector(selector);
|
|
||||||
if (! toggleElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const value = toggleElement.value;
|
|
||||||
group.forEach( (elementToToggle) => {
|
|
||||||
const domElement = document.querySelector(elementToToggle.selector);
|
|
||||||
if (! domElement) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (value === elementToToggle.value && domElement.style.display !== 'none') {
|
|
||||||
domElement.style.display = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
domElement.style.display = 'none';
|
|
||||||
});
|
|
||||||
|
|
||||||
// We need to use jQuery here as the select might be a select2 element, which doesn't use native events.
|
|
||||||
jQuery(toggleElement).on(
|
|
||||||
'change',
|
|
||||||
(event) => {
|
|
||||||
const value = event.target.value;
|
|
||||||
group.forEach( (elementToToggle) => {
|
|
||||||
if (value === elementToToggle.value) {
|
|
||||||
document.querySelector(elementToToggle.selector).style.display = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
document.querySelector(elementToToggle.selector).style.display = 'none';
|
|
||||||
})
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateCheckoutMessageFields = () => {
|
|
||||||
groupToggleSelect(
|
|
||||||
'#ppcp-message_layout',
|
|
||||||
[
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_logo'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_position'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_color'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'flex',
|
|
||||||
selector:'#field-message_flex_ratio'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'flex',
|
|
||||||
selector:'#field-message_flex_color'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateProductMessageFields = () => {
|
|
||||||
groupToggleSelect(
|
|
||||||
'#ppcp-message_product_layout',
|
|
||||||
[
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_product_logo'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_product_position'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_product_color'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'flex',
|
|
||||||
selector:'#field-message_product_flex_ratio'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'flex',
|
|
||||||
selector:'#field-message_product_flex_color'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateCartMessageFields = () =>
|
|
||||||
{
|
|
||||||
groupToggleSelect(
|
|
||||||
'#ppcp-message_cart_layout',
|
|
||||||
[
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_cart_logo'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_cart_position'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'text',
|
|
||||||
selector:'#field-message_cart_color'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'flex',
|
|
||||||
selector:'#field-message_cart_flex_ratio'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value:'flex',
|
|
||||||
selector:'#field-message_cart_flex_color'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const disableOptions = (sourceSelector, targetSelector) => {
|
|
||||||
|
|
||||||
const source = jQuery(sourceSelector);
|
|
||||||
const target = document.querySelector(targetSelector);
|
|
||||||
if (! target) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option'));
|
|
||||||
const iconVersions = {
|
|
||||||
'visa': {
|
|
||||||
'light': {'label': 'Visa (light)'},
|
|
||||||
'dark' : {'label': 'Visa (dark)', 'value': 'visa-dark'}
|
|
||||||
},
|
|
||||||
'mastercard': {
|
|
||||||
'light': {'label': 'Mastercard (light)'},
|
|
||||||
'dark' : {'label': 'Mastercard (dark)', 'value': 'mastercard-dark'}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const replace = () => {
|
|
||||||
const validOptions = allOptions.filter(
|
|
||||||
(option) => {
|
|
||||||
|
|
||||||
return ! option.selected
|
|
||||||
}
|
|
||||||
);
|
|
||||||
const selectedValidOptions = validOptions.map(
|
|
||||||
(option) => {
|
|
||||||
option = option.cloneNode(true);
|
|
||||||
let value = option.value;
|
|
||||||
option.selected = target.querySelector('option[value="' + value + '"]') && target.querySelector('option[value="' + value + '"]').selected;
|
|
||||||
if(value === 'visa' || value === 'mastercard') {
|
|
||||||
let darkOption = option.cloneNode(true);
|
|
||||||
let currentVersion = iconVersions[value];
|
|
||||||
let darkValue = iconVersions[value].dark.value;
|
|
||||||
|
|
||||||
option.text = currentVersion.light.label;
|
|
||||||
darkOption.text = currentVersion.dark.label;
|
|
||||||
darkOption.value = darkValue;
|
|
||||||
darkOption.selected = target.querySelector('option[value="' + darkValue + '"]') && target.querySelector('option[value="' + darkValue + '"]').selected;
|
|
||||||
|
|
||||||
return [option, darkOption];
|
|
||||||
}
|
|
||||||
return option;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
target.innerHTML = '';
|
|
||||||
selectedValidOptions.forEach(
|
|
||||||
(option) => {
|
|
||||||
if(Array.isArray(option)){
|
|
||||||
option.forEach(
|
|
||||||
(option) => {
|
|
||||||
target.append(option);
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
target.append(option);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
source.on('change',replace);
|
|
||||||
replace();
|
|
||||||
};
|
|
||||||
|
|
||||||
(() => {
|
|
||||||
disableOptions('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]');
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-button_enabled',
|
|
||||||
[
|
|
||||||
'#field-button_layout',
|
|
||||||
'#field-button_tagline',
|
|
||||||
'#field-button_label',
|
|
||||||
'#field-button_color',
|
|
||||||
'#field-button_shape',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-message_enabled',
|
|
||||||
[
|
|
||||||
'#field-message_layout',
|
|
||||||
'#field-message_logo',
|
|
||||||
'#field-message_position',
|
|
||||||
'#field-message_color',
|
|
||||||
'#field-message_flex_color',
|
|
||||||
'#field-message_flex_ratio',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-button_product_enabled',
|
|
||||||
[
|
|
||||||
'#field-button_product_layout',
|
|
||||||
'#field-button_product_tagline',
|
|
||||||
'#field-button_product_label',
|
|
||||||
'#field-button_product_color',
|
|
||||||
'#field-button_product_shape',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-message_product_enabled',
|
|
||||||
[
|
|
||||||
'#field-message_product_layout',
|
|
||||||
'#field-message_product_logo',
|
|
||||||
'#field-message_product_position',
|
|
||||||
'#field-message_product_color',
|
|
||||||
'#field-message_product_flex_color',
|
|
||||||
'#field-message_product_flex_ratio',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-button_mini-cart_enabled',
|
|
||||||
[
|
|
||||||
'#field-button_mini-cart_layout',
|
|
||||||
'#field-button_mini-cart_tagline',
|
|
||||||
'#field-button_mini-cart_label',
|
|
||||||
'#field-button_mini-cart_color',
|
|
||||||
'#field-button_mini-cart_shape',
|
|
||||||
'#field-button_mini-cart_height',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-button_cart_enabled',
|
|
||||||
[
|
|
||||||
'#field-button_cart_layout',
|
|
||||||
'#field-button_cart_tagline',
|
|
||||||
'#field-button_cart_label',
|
|
||||||
'#field-button_cart_color',
|
|
||||||
'#field-button_cart_shape',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
groupToggle(
|
|
||||||
'#ppcp-message_cart_enabled',
|
|
||||||
[
|
|
||||||
'#field-message_cart_layout',
|
|
||||||
'#field-message_cart_logo',
|
|
||||||
'#field-message_cart_position',
|
|
||||||
'#field-message_cart_color',
|
|
||||||
'#field-message_cart_flex_color',
|
|
||||||
'#field-message_cart_flex_ratio',
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
groupToggleSelect(
|
|
||||||
'#ppcp-intent',
|
|
||||||
[
|
|
||||||
{
|
|
||||||
value:'authorize',
|
|
||||||
selector:'#field-capture_for_virtual_only'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
updateCheckoutMessageFields();
|
|
||||||
updateProductMessageFields();
|
|
||||||
updateCartMessageFields();
|
|
||||||
})();
|
|
||||||
}
|
|
||||||
)
|
|
Loading…
Add table
Add a link
Reference in a new issue