mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +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