mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
Merge pull request #141 from woocommerce/PCP-113-fix-pay-later-messaging-options
Fix pay later messaging options
This commit is contained in:
Emili Castells
GitHub
commit
6d34c53f58
1 changed files with 285 additions and 250 deletions
|
|
@ -1,262 +1,297 @@
|
|||
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';
|
||||
});
|
||||
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) => {
|
||||
|
||||
group.forEach( (elementToShow) => {
|
||||
document.querySelector(elementToShow).style.display = 'table-row';
|
||||
})
|
||||
}
|
||||
);
|
||||
};
|
||||
if (! event.target.checked) {
|
||||
group.forEach( (elementToHide) => {
|
||||
document.querySelector(elementToHide).style.display = 'none';
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
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 = 'table-row';
|
||||
return;
|
||||
}
|
||||
domElement.style.display = 'none';
|
||||
});
|
||||
group.forEach( (elementToShow) => {
|
||||
document.querySelector(elementToShow).style.display = 'table-row';
|
||||
})
|
||||
|
||||
// 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;
|
||||
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) => {
|
||||
if (value === elementToToggle.value) {
|
||||
document.querySelector(elementToToggle.selector).style.display = 'table-row';
|
||||
const domElement = document.querySelector(elementToToggle.selector);
|
||||
if (! domElement) {
|
||||
return;
|
||||
}
|
||||
document.querySelector(elementToToggle.selector).style.display = 'none';
|
||||
})
|
||||
if (value === elementToToggle.value && domElement.style.display !== 'none') {
|
||||
domElement.style.display = 'table-row';
|
||||
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 = 'table-row';
|
||||
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 disableOptions = (sourceSelector, targetSelector) => {
|
||||
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 source = jQuery(sourceSelector);
|
||||
const target = document.querySelector(targetSelector);
|
||||
if (! target) {
|
||||
return;
|
||||
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 replace = () => {
|
||||
const validOptions = allOptions.filter(
|
||||
(option) => {
|
||||
|
||||
return ! option.selected
|
||||
}
|
||||
);
|
||||
const selectedValidOptions = validOptions.map(
|
||||
(option) => {
|
||||
option = option.cloneNode(true);
|
||||
option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected;
|
||||
return option;
|
||||
}
|
||||
);
|
||||
target.innerHTML = '';
|
||||
selectedValidOptions.forEach(
|
||||
(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',
|
||||
]
|
||||
);
|
||||
|
||||
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();
|
||||
})();
|
||||
}
|
||||
const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option'));
|
||||
const replace = () => {
|
||||
const validOptions = allOptions.filter(
|
||||
(option) => {
|
||||
|
||||
return ! option.selected
|
||||
}
|
||||
);
|
||||
const selectedValidOptions = validOptions.map(
|
||||
(option) => {
|
||||
option = option.cloneNode(true);
|
||||
option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected;
|
||||
return option;
|
||||
}
|
||||
);
|
||||
target.innerHTML = '';
|
||||
selectedValidOptions.forEach(
|
||||
(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',
|
||||
]
|
||||
);
|
||||
|
||||
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-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'
|
||||
}
|
||||
]
|
||||
);
|
||||
groupToggleSelect(
|
||||
'#ppcp-intent',
|
||||
[
|
||||
{
|
||||
value:'authorize',
|
||||
selector:'#field-capture_for_virtual_only'
|
||||
}
|
||||
]
|
||||
);
|
||||
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'
|
||||
}
|
||||
]
|
||||
);
|
||||
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'
|
||||
}
|
||||
]
|
||||
);
|
||||
})();
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
