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

Fix/refactor product button handling

Browse source
This commit is contained in:
Alex P 2022-12-15 09:41:36 +02:00
parent 745c226f77
commit 4bd39c9f95
No known key found for this signature in database
GPG key ID: 54487A734A204D71
5 changed files with 26 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

14
modules/ppcp-button/resources/js/modules/ActionHandler/SingleProductActionHandler.js
View file

@ -9,31 +9,17 @@ class SingleProductActionHandler {
constructor( constructor(
config, config,
updateCart, updateCart,
showButtonCallback,
hideButtonCallback,
formElement, formElement,
errorHandler errorHandler
) { ) {
this.config = config; this.config = config;
this.updateCart = updateCart; this.updateCart = updateCart;
this.showButtonCallback = showButtonCallback;
this.hideButtonCallback = hideButtonCallback;
this.formElement = formElement; this.formElement = formElement;
this.errorHandler = errorHandler; this.errorHandler = errorHandler;
} }
configuration() configuration()
{ {
if ( this.hasVariations() ) {
const observer = new ButtonsToggleListener(
this.formElement.querySelector('.single_add_to_cart_button'),
this.showButtonCallback,
this.hideButtonCallback
);
observer.init();
}
return { return {
createOrder: this.createOrder(), createOrder: this.createOrder(),
onApprove: onApprove(this, this.errorHandler), onApprove: onApprove(this, this.errorHandler),

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

@ -1,5 +1,7 @@
import UpdateCart from "../Helper/UpdateCart"; import UpdateCart from "../Helper/UpdateCart";
import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler"; import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
import {hide, show, setVisible} from "../Helper/Hiding";
import ButtonsToggleListener from "../Helper/ButtonsToggleListener";
class SingleProductBootstap { class SingleProductBootstap {
constructor(gateway, renderer, messages, errorHandler) { constructor(gateway, renderer, messages, errorHandler) {
@ -12,10 +14,10 @@ class SingleProductBootstap {
handleChange() { handleChange() {
if (!this.shouldRender()) { const shouldRender = this.shouldRender();
this.renderer.hideButtons(this.gateway.hosted_fields.wrapper); setVisible(this.gateway.button.wrapper, shouldRender);
this.renderer.hideButtons(this.gateway.button.wrapper); setVisible(this.gateway.messages.wrapper, shouldRender);
this.messages.hideMessages(); if (!shouldRender) {
return; return;
} }
@ -23,7 +25,6 @@ class SingleProductBootstap {
} }
init() { init() {
const form = document.querySelector('form.cart'); const form = document.querySelector('form.cart');
if (!form) { if (!form) {
return; return;
@ -32,14 +33,27 @@ class SingleProductBootstap {
form.addEventListener('change', this.handleChange.bind(this)); form.addEventListener('change', this.handleChange.bind(this));
this.mutationObserver.observe(form, {childList: true, subtree: true}); this.mutationObserver.observe(form, {childList: true, subtree: true});
const buttonObserver = new ButtonsToggleListener(
form.querySelector('.single_add_to_cart_button'),
() => {
show(this.gateway.button.wrapper);
show(this.gateway.messages.wrapper);
this.messages.renderWithAmount(this.priceAmount())
},
() => {
hide(this.gateway.button.wrapper);
hide(this.gateway.messages.wrapper);
},
);
buttonObserver.init();
if (!this.shouldRender()) { if (!this.shouldRender()) {
this.renderer.hideButtons(this.gateway.hosted_fields.wrapper); hide(this.gateway.button.wrapper);
this.messages.hideMessages(); hide(this.gateway.messages.wrapper);
return; return;
} }
this.render(); this.render();
} }
shouldRender() { shouldRender() {
@ -86,16 +100,6 @@ class SingleProductBootstap {
this.gateway.ajax.change_cart.endpoint, this.gateway.ajax.change_cart.endpoint,
this.gateway.ajax.change_cart.nonce, this.gateway.ajax.change_cart.nonce,
), ),
() => {
this.renderer.showButtons(this.gateway.button.wrapper);
this.renderer.showButtons(this.gateway.hosted_fields.wrapper);
this.messages.renderWithAmount(this.priceAmount())
},
() => {
this.renderer.hideButtons(this.gateway.button.wrapper);
this.renderer.hideButtons(this.gateway.hosted_fields.wrapper);
this.messages.hideMessages();
},
document.querySelector('form.cart'), document.querySelector('form.cart'),
this.errorHandler, this.errorHandler,
); );

3
modules/ppcp-button/resources/js/modules/Helper/ButtonsToggleListener.js
View file

@ -14,6 +14,9 @@ class ButtonsToggleListener {
init() init()
{ {
if (!this.element) {
return;
}
const config = { attributes : true }; const config = { attributes : true };
const callback = () => { const callback = () => {
if (this.element.classList.contains('disabled')) { if (this.element.classList.contains('disabled')) {

9
modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js
View file

@ -53,14 +53,5 @@ class MessageRenderer {
} }
return true; return true;
} }
hideMessages() {
const domElement = document.querySelector(this.config.wrapper);
if (! domElement ) {
return false;
}
domElement.style.display = 'none';
return true;
}
} }
export default MessageRenderer; export default MessageRenderer;

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

@ -99,24 +99,6 @@ class Renderer {
return this.renderedSources.has(wrapper + fundingSource ?? ''); return this.renderedSources.has(wrapper + fundingSource ?? '');
} }
hideButtons(element) {
const domElement = document.querySelector(element);
if (! domElement ) {
return false;
}
domElement.style.display = 'none';
return true;
}
showButtons(element) {
const domElement = document.querySelector(element);
if (! domElement ) {
return false;
}
domElement.style.display = 'block';
return true;
}
disableCreditCardFields() { disableCreditCardFields() {
this.creditCardRenderer.disableFields(); this.creditCardRenderer.disableFields();
} }