woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-01 07:02:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

Configure the button from the bootstrappers

Browse source 
This should give us the flexibility to overwrite default configuration option on context level
This commit is contained in:
Mészáros Róbert 2020-04-10 10:34:49 +03:00
parent 42fe525a0b
commit 4e0a4b8edb
9 changed files with 86 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

29
modules.local/ppcp-button/resources/js/button.js
View file

@ -1,6 +1,3 @@
import ErrorHandler from './modules/ErrorHandler';
import CartConfig from './modules/CartConfig';
import CheckoutConfig from "./modules/CheckoutConfig";
import MiniCartBootstap from './modules/MiniCartBootstap';
import SingleProductBootstap from './modules/SingleProductBootstap';
import CartBootstrap from './modules/CartBootstap';
@ -8,42 +5,31 @@ import CheckoutBootstap from './modules/CheckoutBootstap';
import Renderer from './modules/Renderer';
const bootstrap = () => {
const renderer = new Renderer;
const errorHandler = new ErrorHandler();
const cartConfig = new CartConfig(
PayPalCommerceGateway,
errorHandler,
);
const checkoutConfig = new CheckoutConfig(
PayPalCommerceGateway,
errorHandler
);
const renderer = new Renderer(PayPalCommerceGateway);
const context = PayPalCommerceGateway.context;
if (context === 'mini-cart' || context === 'product') {
const miniCartBootstap = new MiniCartBootstap(
const miniCartBootstrap = new MiniCartBootstap(
PayPalCommerceGateway,
renderer,
cartConfig,
renderer
);
miniCartBootstap.init();
miniCartBootstrap.init();
}
if (context === 'product') {
const singleProductBootstap = new SingleProductBootstap(
const singleProductBootstrap = new SingleProductBootstap(
PayPalCommerceGateway,
renderer,
);
singleProductBootstap.init();
singleProductBootstrap.init();
}
if (context === 'cart') {
const cartBootstrap = new CartBootstrap(
PayPalCommerceGateway,
renderer,
cartConfig,
);
cartBootstrap.init();
@ -52,8 +38,7 @@ const bootstrap = () => {
if (context === 'checkout') {
const checkoutBootstap = new CheckoutBootstap(
PayPalCommerceGateway,
renderer,
checkoutConfig,
renderer
);
checkoutBootstap.init();

9
modules.local/ppcp-button/resources/js/modules/CartConfig.js → modules.local/ppcp-button/resources/js/modules/CartActionHandler.js
View file

@ -1,6 +1,6 @@
import onApprove from './onApproveForContinue.js';
class CartConfig {
class CartActionHandler {
constructor(config, errorHandler) {
this.config = config;
@ -26,17 +26,14 @@ class CartConfig {
});
};
const style = this.config.button.style;
return {
createOrder,
onApprove: onApprove(this),
onError: (error) => {
this.errorHandler.message(error);
},
style,
}
};
}
}
export default CartConfig;
export default CartActionHandler;

13
modules.local/ppcp-button/resources/js/modules/CartBootstap.js
View file

@ -1,8 +1,10 @@
import CartActionHandler from './CartActionHandler';
import ErrorHandler from './ErrorHandler';
class CartBootstrap {
constructor(gateway, renderer, configurator) {
constructor(gateway, renderer) {
this.gateway = gateway;
this.renderer = renderer;
this.configurator = configurator;
}
init() {
@ -22,9 +24,14 @@ class CartBootstrap {
}
render() {
const actionHandler = new CartActionHandler(
PayPalCommerceGateway,
new ErrorHandler(),
);
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
actionHandler.configuration(),
);
}
}

6
modules.local/ppcp-button/resources/js/modules/CheckoutConfig.js → modules.local/ppcp-button/resources/js/modules/CheckoutActionHandler.js
View file

@ -1,6 +1,6 @@
import onApprove from "./onApproveForPayNow.js";
import onApprove from './onApproveForPayNow.js';
class CheckoutConfig {
class CheckoutActionHandler {
constructor(config, errorHandler) {
this.config = config;
@ -36,4 +36,4 @@ class CheckoutConfig {
}
}
export default CheckoutConfig;
export default CheckoutActionHandler;

23
modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js
View file

@ -1,8 +1,10 @@
import ErrorHandler from './ErrorHandler';
import CheckoutActionHandler from './CheckoutActionHandler';
class CheckoutBootstap {
constructor(gateway, renderer, configurator) {
constructor(gateway, renderer) {
this.gateway = gateway;
this.renderer = renderer;
this.configurator = configurator;
}
init() {
@ -16,9 +18,10 @@ class CheckoutBootstap {
this.render();
});
jQuery(document.body).on('updated_checkout payment_method_selected', () => {
this.switchBetweenPayPalandOrderButton();
});
jQuery(document.body).
on('updated_checkout payment_method_selected', () => {
this.switchBetweenPayPalandOrderButton();
});
}
shouldRender() {
@ -30,14 +33,20 @@ class CheckoutBootstap {
}
render() {
const actionHandler = new CheckoutActionHandler(
PayPalCommerceGateway,
new ErrorHandler(),
);
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
actionHandler.configuration(),
);
}
switchBetweenPayPalandOrderButton() {
const currentPaymentMethod = jQuery('input[name="payment_method"]:checked').val();
const currentPaymentMethod = jQuery(
'input[name="payment_method"]:checked').val();
if (currentPaymentMethod !== 'ppcp-gateway') {
this.renderer.hideButtons(this.gateway.button.wrapper);

23
modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js
View file

@ -1,8 +1,10 @@
import ErrorHandler from './ErrorHandler';
import CartActionHandler from './CartActionHandler';
class MiniCartBootstap {
constructor(gateway, renderer, configurator) {
constructor(gateway, renderer) {
this.gateway = gateway;
this.renderer = renderer;
this.configurator = configurator;
}
init() {
@ -14,20 +16,27 @@ class MiniCartBootstap {
}
shouldRender() {
return document.querySelector(this.gateway.button.mini_cart_wrapper) !== null;
return document.querySelector(this.gateway.button.mini_cart_wrapper) !==
null;
}
render() {
// Compared to the other bootstrapper we need the checker inside the
// renderer because the mini cart is refreshed with AJAX and the
// wrapper DOM might not be there from the start
if (!this.shouldRender()) {
return;
}
const actionHandler = new CartActionHandler(
PayPalCommerceGateway,
new ErrorHandler(),
);
this.renderer.render(
this.gateway.button.mini_cart_wrapper,
this.configurator.configuration(),
{
style: {
shape: 'rect',
}, ...actionHandler.configuration(),
},
);
}
}

14
modules.local/ppcp-button/resources/js/modules/Renderer.js
View file

@ -1,12 +1,18 @@
class Renderer {
render(wrapper, buttonConfig) {
constructor(defaultConfig) {
this.defaultConfig = defaultConfig;
}
render(wrapper, contextConfig) {
if (this.isAlreadyRendered(wrapper)) {
return;
}
paypal.Buttons(
buttonConfig,
).render(wrapper);
const style = this.defaultConfig.button.style;
paypal.Buttons({
style,
...contextConfig,
}).render(wrapper);
}
isAlreadyRendered(wrapper) {

9
modules.local/ppcp-button/resources/js/modules/SingleProductConfig.js → modules.local/ppcp-button/resources/js/modules/SingleProductActionHandler.js
View file

@ -2,7 +2,7 @@ import ButtonsToggleListener from './ButtonsToggleListener';
import Product from './Product';
import onApprove from './onApproveForContinue';
class SingleProductConfig {
class SingleProductActionHandler {
constructor(
config,
@ -32,15 +32,12 @@ class SingleProductConfig {
observer.init();
}
const style = this.config.button.style;
return {
createOrder: this.createOrder(),
onApprove: onApprove(this),
onError: (error) => {
this.errorHandler.message(error);
},
style,
}
}
}
@ -126,4 +123,4 @@ class SingleProductConfig {
return this.formElement.classList.contains('grouped_form');
}
}
export default SingleProductConfig;
export default SingleProductActionHandler;

38
modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js
View file

@ -1,6 +1,6 @@
import ErrorHandler from './ErrorHandler';
import UpdateCart from './UpdateCart';
import SingleProductConfig from './SingleProductConfig';
import SingleProductActionHandler from './SingleProductActionHandler';
class SingleProductBootstap {
constructor(gateway, renderer) {
@ -13,24 +13,6 @@ class SingleProductBootstap {
return;
}
const errorHandler = new ErrorHandler();
const updateCart = new UpdateCart(
this.gateway.ajax.change_cart.endpoint,
this.gateway.ajax.change_cart.nonce,
);
this.configurator = new SingleProductConfig(
this.gateway,
updateCart,
() => {
this.renderer.showButtons(this.gateway.button.wrapper);
},
() => {
this.renderer.hideButtons(this.gateway.button.wrapper);
},
document.querySelector('form.cart'),
errorHandler,
);
this.render();
}
@ -43,9 +25,25 @@ class SingleProductBootstap {
}
render() {
const actionHandler = new SingleProductActionHandler(
this.gateway,
new UpdateCart(
this.gateway.ajax.change_cart.endpoint,
this.gateway.ajax.change_cart.nonce,
),
() => {
this.renderer.showButtons(this.gateway.button.wrapper);
},
() => {
this.renderer.hideButtons(this.gateway.button.wrapper);
},
document.querySelector('form.cart'),
new ErrorHandler(),
);
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
actionHandler.configuration(),
);
}
}