mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-01 07:02:48 +08:00
Add support for PayPal SmartButtons enable / disable
Rename functions Remove invalid function arguments
This commit is contained in:
parent
adf7a2e297
commit
82828c2991
4 changed files with 57 additions and 14 deletions
|
@ -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') {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue