Add support for PayPal SmartButtons enable / disable

Rename functions
Remove invalid function arguments
This commit is contained in:
Pedro Silva 2023-06-26 18:14:41 +01:00
parent adf7a2e297
commit 82828c2991
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
4 changed files with 57 additions and 14 deletions

View file

@ -121,10 +121,22 @@ const bootstrap = () => {
return actions.reject();
}
};
const onSmartButtonsInit = () => {
buttonsSpinner.unblock();
let smartButtonsOptions = {
onInit: null,
init: function (actions) {
this.actions = actions;
if (typeof this.onInit === 'function') {
this.onInit();
}
}
};
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
const onSmartButtonsInit = (data, actions) => {
buttonsSpinner.unblock();
smartButtonsOptions.init(actions);
};
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit, smartButtonsOptions);
const messageRenderer = new MessageRenderer(PayPalCommerceGateway.messages);
const context = PayPalCommerceGateway.context;
if (context === 'mini-cart' || context === 'product') {

View file

@ -11,6 +11,12 @@ class SingleProductBootstap {
this.errorHandler = errorHandler;
this.mutationObserver = new MutationObserver(this.handleChange.bind(this));
this.formSelector = 'form.cart';
if (this.renderer && this.renderer.smartButtonsOptions) {
this.renderer.smartButtonsOptions.onInit = () => {
this.handleChange();
};
}
}
form() {
@ -19,6 +25,7 @@ class SingleProductBootstap {
handleChange() {
if (!this.shouldRender()) {
this.renderer.disableSmartButtons();
hide(this.gateway.button.wrapper, this.formSelector);
hide(this.gateway.messages.wrapper);
return;
@ -26,7 +33,8 @@ class SingleProductBootstap {
this.render();
show(this.gateway.button.wrapper, this.formSelector);
this.renderer.enableSmartButtons();
show(this.gateway.button.wrapper);
show(this.gateway.messages.wrapper);
this.handleButtonStatus();
@ -34,13 +42,14 @@ class SingleProductBootstap {
handleButtonStatus() {
if (!this.shouldEnable()) {
this.renderer.disableSmartButtons();
disable(this.gateway.button.wrapper, this.formSelector);
disable(this.gateway.messages.wrapper);
return;
}
this.renderer.enableSmartButtons();
enable(this.gateway.button.wrapper);
enable(this.gateway.messages.wrapper);
this.messages.renderWithAmount(this.priceAmount())
}
init() {
@ -50,7 +59,15 @@ class SingleProductBootstap {
return;
}
form.addEventListener('change', this.handleChange.bind(this));
form.addEventListener('change', () => {
this.handleChange();
setTimeout(() => { // Wait for the DOM to be fully updated
// For the moment renderWithAmount should only be done here to prevent undesired side effects due to priceAmount()
// not being correctly formatted in some cases, can be moved to handleButtonStatus() once this issue is fixed
this.messages.renderWithAmount(this.priceAmount());
}, 100);
});
this.mutationObserver.observe(form, { childList: true, subtree: true });
const addToCartButton = form.querySelector('.single_add_to_cart_button');
@ -65,12 +82,12 @@ class SingleProductBootstap {
}
this.render();
this.handleButtonStatus();
this.handleChange();
}
shouldRender() {
return this.form() !== null
&& !this.isDisabledReasonExternalPlugins();
&& !this.isWcsattSubscriptionMode();
}
shouldEnable() {
@ -113,7 +130,7 @@ class SingleProductBootstap {
return !price || price === 0;
}
isDisabledReasonExternalPlugins() {
isWcsattSubscriptionMode() {
// Check "All products for subscriptions" plugin.
return document.querySelector('.wcsatt-options-product:not(.wcsatt-options-product--hidden) .subscription-option input[type="radio"]:checked') !== null
|| document.querySelector('.wcsatt-options-prompt-label-subscription input[type="radio"]:checked') !== null; // grouped

View file

@ -16,7 +16,7 @@ class MessageRenderer {
style: this.config.style
};
if (this.isOptionsFingerprintEqual(options)) {
if (this.optionsEqual(options)) {
return;
}
@ -28,7 +28,6 @@ class MessageRenderer {
}
renderWithAmount(amount) {
if (! this.shouldRender()) {
return;
}
@ -39,7 +38,7 @@ class MessageRenderer {
style: this.config.style
};
if (this.isOptionsFingerprintEqual(options)) {
if (this.optionsEqual(options)) {
return;
}
@ -54,7 +53,7 @@ class MessageRenderer {
paypal.Messages(options).render(this.config.wrapper);
}
isOptionsFingerprintEqual(options) {
optionsEqual(options) {
const fingerprint = JSON.stringify(options);
if (this.optionsFingerprint === fingerprint) {

View file

@ -1,11 +1,12 @@
import merge from "deepmerge";
class Renderer {
constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit) {
constructor(creditCardRenderer, defaultSettings, onSmartButtonClick, onSmartButtonsInit, smartButtonsOptions) {
this.defaultSettings = defaultSettings;
this.creditCardRenderer = creditCardRenderer;
this.onSmartButtonClick = onSmartButtonClick;
this.onSmartButtonsInit = onSmartButtonsInit;
this.smartButtonsOptions = smartButtonsOptions;
this.renderedSources = new Set();
}
@ -106,6 +107,20 @@ class Renderer {
enableCreditCardFields() {
this.creditCardRenderer.enableFields();
}
disableSmartButtons() {
if (!this.smartButtonsOptions || !this.smartButtonsOptions.actions) {
return;
}
this.smartButtonsOptions.actions.disable();
}
enableSmartButtons() {
if (!this.smartButtonsOptions || !this.smartButtonsOptions.actions) {
return;
}
this.smartButtonsOptions.actions.enable();
}
}
export default Renderer;