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 2021-05-26 10:26:56 +02:00 committed by GitHub
commit 6d34c53f58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,4 +1,7 @@
const groupToggle = (selector, group) => {
document.addEventListener(
'DOMContentLoaded',
() => {
const groupToggle = (selector, group) => {
const toggleElement = document.querySelector(selector);
if (! toggleElement) {
return;
@ -22,11 +25,26 @@ const groupToggle = (selector, group) => {
group.forEach( (elementToShow) => {
document.querySelector(elementToShow).style.display = 'table-row';
})
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 groupToggleSelect = (selector, group) => {
const toggleElement = document.querySelector(selector);
if (! toggleElement) {
return;
@ -58,9 +76,94 @@ const groupToggleSelect = (selector, group) => {
})
}
);
};
};
const disableOptions = (sourceSelector, targetSelector) => {
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);
@ -92,9 +195,9 @@ const disableOptions = (sourceSelector, targetSelector) => {
source.on('change',replace);
replace();
};
};
(() => {
(() => {
disableOptions('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]');
groupToggle(
'#ppcp-button_enabled',
@ -175,31 +278,7 @@ const disableOptions = (sourceSelector, targetSelector) => {
]
);
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',
[
@ -209,54 +288,10 @@ const disableOptions = (sourceSelector, targetSelector) => {
}
]
);
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'
updateCheckoutMessageFields();
updateProductMessageFields();
updateCartMessageFields();
})();
}
]
);
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'
}
]
);
})();
)