woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 14:57:26 +08:00
Code Issues Projects Packages Wiki Activity Actions

Fix lint

Browse source 
Add throttling to simulate_cart ajax call
This commit is contained in:
Pedro Silva 2023-07-20 17:51:48 +01:00
parent a0480e35bb
commit 84a362a7c5
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
13 changed files with 203 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

5
modules/ppcp-button/resources/js/button.js
View file

@ -13,13 +13,12 @@ import {
ORDER_BUTTON_SELECTOR,
PaymentMethods
} from "./modules/Helper/CheckoutMethodState";
import {hide, setVisible, setVisibleByClass} from "./modules/Helper/Hiding";
import {setVisibleByClass} from "./modules/Helper/Hiding";
import {isChangePaymentPage} from "./modules/Helper/Subscriptions";
import FreeTrialHandler from "./modules/ActionHandler/FreeTrialHandler";
import FormSaver from './modules/Helper/FormSaver';
import FormValidator from "./modules/Helper/FormValidator";
import {loadPaypalScript} from "./modules/Helper/ScriptLoading";
import widgetBuilder from "./modules/Renderer/WidgetBuilder";
// TODO: could be a good idea to have a separate spinner for each gateway,
// but I think we care mainly about the script loading, so one spinner should be enough.
@ -268,8 +267,6 @@ document.addEventListener(
});
loadPaypalScript(PayPalCommerceGateway, () => {
widgetBuilder.setPaypal(paypal);
bootstrapped = true;
bootstrap();

5
modules/ppcp-button/resources/js/modules/ContextBootstrap/CartBootstap.js
View file

@ -49,12 +49,11 @@ class CartBootstrap {
}
// handle button status
if ( result.data.button ) {
if (result.data.button) {
this.gateway.button = result.data.button;
this.handleButtonStatus();
}
this.handleButtonStatus();
if (this.lastAmount !== result.data.amount) {
this.lastAmount = result.data.amount;
this.messages.renderWithAmount(this.lastAmount);

99
modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js
View file

@ -3,7 +3,7 @@ import SingleProductActionHandler from "../ActionHandler/SingleProductActionHand
import {hide, show} from "../Helper/Hiding";
import BootstrapHelper from "../Helper/BootstrapHelper";
import SimulateCart from "../Helper/SimulateCart";
import {strRemoveWord, strAddWord} from "../Helper/Utils";
import {strRemoveWord, strAddWord, throttle} from "../Helper/Utils";
class SingleProductBootstap {
constructor(gateway, renderer, messages, errorHandler) {
@ -14,6 +14,9 @@ class SingleProductBootstap {
this.mutationObserver = new MutationObserver(this.handleChange.bind(this));
this.formSelector = 'form.cart';
// Prevent simulate cart being called too many times in a burst.
this.simulateCartThrottled = throttle(this.simulateCart, 5000);
this.renderer.onButtonsInit(this.gateway.button.wrapper, () => {
this.handleChange();
}, true);
@ -46,53 +49,7 @@ class SingleProductBootstap {
});
if (simulateCart) {
//------
const actionHandler = new SingleProductActionHandler(
null,
null,
this.form(),
this.errorHandler,
);
(new SimulateCart(
this.gateway.ajax.simulate_cart.endpoint,
this.gateway.ajax.simulate_cart.nonce,
)).simulate((data) => {
this.messages.renderWithAmount(data.total);
let enableFunding = this.gateway.url_params['enable-funding'];
let disableFunding = this.gateway.url_params['disable-funding'];
for (const [fundingSource, funding] of Object.entries(data.funding)) {
if (funding.enabled === true) {
enableFunding = strAddWord(enableFunding, fundingSource);
disableFunding = strRemoveWord(disableFunding, fundingSource);
} else if (funding.enabled === false) {
enableFunding = strRemoveWord(enableFunding, fundingSource);
disableFunding = strAddWord(disableFunding, fundingSource);
}
}
if (
(enableFunding !== this.gateway.url_params['enable-funding']) ||
(disableFunding !== this.gateway.url_params['disable-funding'])
) {
this.gateway.url_params['enable-funding'] = enableFunding;
this.gateway.url_params['disable-funding'] = disableFunding;
jQuery(this.gateway.button.wrapper).trigger('ppcp-reload-buttons');
}
if (typeof data.button.is_disabled === 'boolean') {
this.gateway.button.is_disabled = data.button.is_disabled;
}
this.handleButtonStatus(false);
}, actionHandler.getProducts());
//------
this.simulateCartThrottled();
}
}
@ -197,6 +154,52 @@ class SingleProductBootstap {
actionHandler.configuration()
);
}
simulateCart() {
const actionHandler = new SingleProductActionHandler(
null,
null,
this.form(),
this.errorHandler,
);
(new SimulateCart(
this.gateway.ajax.simulate_cart.endpoint,
this.gateway.ajax.simulate_cart.nonce,
)).simulate((data) => {
this.messages.renderWithAmount(data.total);
let enableFunding = this.gateway.url_params['enable-funding'];
let disableFunding = this.gateway.url_params['disable-funding'];
for (const [fundingSource, funding] of Object.entries(data.funding)) {
if (funding.enabled === true) {
enableFunding = strAddWord(enableFunding, fundingSource);
disableFunding = strRemoveWord(disableFunding, fundingSource);
} else if (funding.enabled === false) {
enableFunding = strRemoveWord(enableFunding, fundingSource);
disableFunding = strAddWord(disableFunding, fundingSource);
}
}
if (
(enableFunding !== this.gateway.url_params['enable-funding']) ||
(disableFunding !== this.gateway.url_params['disable-funding'])
) {
this.gateway.url_params['enable-funding'] = enableFunding;
this.gateway.url_params['disable-funding'] = disableFunding;
jQuery(this.gateway.button.wrapper).trigger('ppcp-reload-buttons');
}
if (typeof data.button.is_disabled === 'boolean') {
this.gateway.button.is_disabled = data.button.is_disabled;
}
this.handleButtonStatus(false);
}, actionHandler.getProducts());
}
}
export default SingleProductBootstap;

15
modules/ppcp-button/resources/js/modules/DataClientIdAttributeHandler.js
View file

@ -1,3 +1,6 @@
import {loadScript} from "@paypal/paypal-js";
import widgetBuilder from "./Renderer/WidgetBuilder";
const storageKey = 'ppcp-data-client-id';
const validateToken = (token, user) => {
@ -24,7 +27,7 @@ const storeToken = (token) => {
sessionStorage.setItem(storageKey, JSON.stringify(token));
}
const dataClientIdAttributeHandler = (script, config) => {
const dataClientIdAttributeHandler = (scriptOptions, config, callback) => {
fetch(config.endpoint, {
method: 'POST',
headers: {
@ -42,8 +45,14 @@ const dataClientIdAttributeHandler = (script, config) => {
return;
}
storeToken(data);
script.setAttribute('data-client-token', data.token);
document.body.appendChild(script);
scriptOptions['data-client-token'] = data.token;
loadScript(scriptOptions).then((paypal) => {
if (typeof callback === 'function') {
callback(paypal);
}
});
});
}

23
modules/ppcp-button/resources/js/modules/Helper/ScriptLoading.js
View file

@ -1,4 +1,8 @@
import dataClientIdAttributeHandler from "../DataClientIdAttributeHandler";
import {loadScript} from "@paypal/paypal-js";
import widgetBuilder from "../Renderer/WidgetBuilder";
import merge from "deepmerge";
import {keysToCamelCase} from "./Utils";
export const loadPaypalScript = (config, onLoaded) => {
if (typeof paypal !== 'undefined') {
@ -6,19 +10,18 @@ export const loadPaypalScript = (config, onLoaded) => {
return;
}
const script = document.createElement('script');
script.addEventListener('load', onLoaded);
script.setAttribute('src', config.url);
Object.entries(config.script_attributes).forEach(
(keyValue) => {
script.setAttribute(keyValue[0], keyValue[1]);
}
);
const callback = (paypal) => {
widgetBuilder.setPaypal(paypal);
onLoaded();
}
let scriptOptions = keysToCamelCase(config.url_params);
scriptOptions = merge(scriptOptions, config.script_attributes);
if (config.data_client_id.set_attribute) {
dataClientIdAttributeHandler(script, config.data_client_id);
dataClientIdAttributeHandler(scriptOptions, config.data_client_id, callback);
return;
}
document.body.appendChild(script);
loadScript(scriptOptions).then(callback);
}

45
modules/ppcp-button/resources/js/modules/Helper/Utils.js
View file

@ -31,11 +31,54 @@ export const strRemoveWord = (str, word, separator = ',') => {
return arr.join(separator);
};
export const debounce = (func, wait) => {
let timeout;
return function() {
const context = this;
const args = arguments;
const later = function() {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
export const throttle = (func, limit) => {
let inThrottle, lastArgs, lastContext;
function execute() {
inThrottle = true;
func.apply(this, arguments);
setTimeout(() => {
inThrottle = false;
if (lastArgs) {
const nextArgs = lastArgs;
const nextContext = lastContext;
lastArgs = lastContext = null;
execute.apply(nextContext, nextArgs);
}
}, limit);
}
return function() {
if (!inThrottle) {
execute.apply(this, arguments);
} else {
lastArgs = arguments;
lastContext = this;
}
};
}
const Utils = {
toCamelCase,
keysToCamelCase,
strAddWord,
strRemoveWord
strRemoveWord,
debounce,
throttle
};
export default Utils;

24
modules/ppcp-button/resources/js/modules/Renderer/Renderer.js
View file

@ -74,6 +74,8 @@ class Renderer {
renderButtons(wrapper, style, contextConfig, hasEnabledSeparateGateways, fundingSource = null) {
if (! document.querySelector(wrapper) || this.isAlreadyRendered(wrapper, fundingSource, hasEnabledSeparateGateways) ) {
// Try to render registered buttons again in case they were removed from the DOM by an external source.
widgetBuilder.renderButtons(wrapper);
return;
}
@ -95,19 +97,19 @@ class Renderer {
}
}
//jQuery(document).off('ppcp-reload-buttons');
jQuery(document).on('ppcp-reload-buttons', wrapper, (event, settingsOverride = {}) => {
const settings = merge(this.defaultSettings, settingsOverride);
let scriptOptions = keysToCamelCase(settings.url_params);
scriptOptions = merge(scriptOptions, settings.script_attributes);
jQuery(document)
.off('ppcp-reload-buttons', wrapper)
.on('ppcp-reload-buttons', wrapper, (event, settingsOverride = {}) => {
const settings = merge(this.defaultSettings, settingsOverride);
let scriptOptions = keysToCamelCase(settings.url_params);
scriptOptions = merge(scriptOptions, settings.script_attributes);
loadScript(scriptOptions).then((paypal) => {
widgetBuilder.setPaypal(paypal);
widgetBuilder.registerButtons(wrapper, buttonsOptions());
widgetBuilder.renderAllButtons();
widgetBuilder.renderAllMessages();
loadScript(scriptOptions).then((paypal) => {
widgetBuilder.setPaypal(paypal);
widgetBuilder.registerButtons(wrapper, buttonsOptions());
widgetBuilder.renderAll();
});
});
});
this.renderedSources.add(wrapper + (fundingSource ?? ''));

16
modules/ppcp-button/resources/js/modules/Renderer/WidgetBuilder.js
View file

@ -30,6 +30,10 @@ class WidgetBuilder {
return;
}
if (this.hasRendered(wrapper)) {
return;
}
const entry = this.buttons.get(wrapper);
const btn = this.paypal.Buttons(entry.options);
@ -58,6 +62,10 @@ class WidgetBuilder {
return;
}
if (this.hasRendered(wrapper)) {
return;
}
const entry = this.messages.get(wrapper);
const btn = this.paypal.Messages(entry.options);
@ -70,6 +78,14 @@ class WidgetBuilder {
}
}
renderAll() {
this.renderAllButtons();
this.renderAllMessages();
}
hasRendered(wrapper) {
return document.querySelector(wrapper).hasChildNodes();
}
}
export default new WidgetBuilder();