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

Add support for hiding/showing/enabling/disabling GooglePay buttons

Browse source
This commit is contained in:
Pedro Silva 2023-09-07 11:21:58 +01:00
parent c6379ca980
commit a3ee77a4bc
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
3 changed files with 98 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

29
modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js
View file

@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => {
return selectorOrElement;
}
const triggerEnabled = (selectorOrElement, element) => {
jQuery(document).trigger('ppcp-enabled', {
'handler': 'ButtonsDisabler.setEnabled',
'action': 'enable',
'selector': selectorOrElement,
'element': element
});
}
const triggerDisabled = (selectorOrElement, element) => {
jQuery(document).trigger('ppcp-disabled', {
'handler': 'ButtonsDisabler.setEnabled',
'action': 'disable',
'selector': selectorOrElement,
'element': element
});
}
export const setEnabled = (selectorOrElement, enable, form = null) => {
const element = getElement(selectorOrElement);
@ -17,7 +35,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
}
if (enable) {
jQuery(element).css({
jQuery(element).removeClass('ppcp-disabled')
.css({
'cursor': '',
'-webkit-filter': '',
'filter': '',
@ -25,8 +44,12 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
.off('mouseup')
.find('> *')
.css('pointer-events', '');
triggerEnabled(selectorOrElement, element);
} else {
jQuery(element).css({
jQuery(element).addClass('ppcp-disabled')
.css({
'cursor': 'not-allowed',
'-webkit-filter': 'grayscale(100%)',
'filter': 'grayscale(100%)',
@ -44,6 +67,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => {
})
.find('> *')
.css('pointer-events', 'none');
triggerDisabled(selectorOrElement, element);
}
};

24
modules/ppcp-button/resources/js/modules/Helper/Hiding.js
View file

@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => {
return selectorOrElement;
}
const triggerHidden = (handler, selectorOrElement, element) => {
jQuery(document).trigger('ppcp-hidden', {
'handler': handler,
'action': 'hide',
'selector': selectorOrElement,
'element': element
});
}
const triggerShown = (handler, selectorOrElement, element) => {
jQuery(document).trigger('ppcp-shown', {
'handler': handler,
'action': 'show',
'selector': selectorOrElement,
'element': element
});
}
export const isVisible = (element) => {
return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
}
@ -27,14 +45,18 @@ export const setVisible = (selectorOrElement, show, important = false) => {
}
element.style.setProperty('display', 'none', important ? 'important' : '');
triggerHidden('Hiding.setVisible', selectorOrElement, element);
} else {
if (currentValue === 'none') {
element.style.removeProperty('display');
triggerShown('Hiding.setVisible', selectorOrElement, element);
}
// still not visible (if something else added display: none in CSS)
if (!isVisible(element)) {
element.style.setProperty('display', 'block');
triggerShown('Hiding.setVisible', selectorOrElement, element);
}
}
};
@ -47,8 +69,10 @@ export const setVisibleByClass = (selectorOrElement, show, hiddenClass) => {
if (show) {
element.classList.remove(hiddenClass);
triggerShown('Hiding.setVisibleByClass', selectorOrElement, element);
} else {
element.classList.add(hiddenClass);
triggerHidden('Hiding.setVisibleByClass', selectorOrElement, element);
}
};

65
modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file

@ -1,4 +1,6 @@
import ContextHandlerFactory from "./Context/ContextHandlerFactory";
import {setVisible} from '../../../ppcp-button/resources/js/modules/Helper/Hiding';
import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler';
class GooglepayButton {
@ -37,6 +39,7 @@ class GooglepayButton {
this.baseCardPaymentMethod = this.allowedPaymentMethods[0];
this.initClient();
this.initEventHandlers();
this.paymentsClient.isReadyToPay(
this.buildReadyToPayRequest(this.allowedPaymentMethods, config)
@ -65,10 +68,25 @@ class GooglepayButton {
return true;
}
buildReadyToPayRequest(allowedPaymentMethods, baseRequest) {
return Object.assign({}, baseRequest, {
allowedPaymentMethods: allowedPaymentMethods,
});
/**
* Returns configurations relative to this button context.
*/
contextConfig() {
if (this.context === 'mini-cart') {
return {
wrapper: this.buttonConfig.button.mini_cart_wrapper,
ppcpStyle: this.ppcpConfig.button.mini_cart_style,
buttonStyle: this.buttonConfig.button.mini_cart_style,
ppcpButtonWrapper: this.ppcpConfig.button.mini_cart_wrapper
}
}
return {
wrapper: this.buttonConfig.button.wrapper,
ppcpStyle: this.ppcpConfig.button.style,
buttonStyle: this.buttonConfig.button.style,
ppcpButtonWrapper: this.ppcpConfig.button.wrapper
}
}
initClient() {
@ -82,26 +100,37 @@ class GooglepayButton {
});
}
initEventHandlers() {
const { wrapper, ppcpButtonWrapper } = this.contextConfig();
const syncButtonVisibility = () => {
const $ppcpButtonWrapper = jQuery(ppcpButtonWrapper);
setVisible(wrapper, $ppcpButtonWrapper.is(':visible'));
setEnabled(wrapper, !$ppcpButtonWrapper.hasClass('ppcp-disabled'));
}
jQuery(document).on('ppcp-shown ppcp-hidden ppcp-enabled ppcp-disabled', (ev, data) => {
if (jQuery(data.selector).is(ppcpButtonWrapper)) {
syncButtonVisibility();
}
});
syncButtonVisibility();
}
buildReadyToPayRequest(allowedPaymentMethods, baseRequest) {
return Object.assign({}, baseRequest, {
allowedPaymentMethods: allowedPaymentMethods,
});
}
/**
* Add a Google Pay purchase button
*/
addButton(baseCardPaymentMethod) {
console.log('[GooglePayButton] addButton', this.context);
const wrapper =
(this.context === 'mini-cart')
? this.buttonConfig.button.mini_cart_wrapper
: this.buttonConfig.button.wrapper;
const ppcpStyle =
(this.context === 'mini-cart')
? this.ppcpConfig.button.mini_cart_style
: this.ppcpConfig.button.style;
const buttonStyle =
(this.context === 'mini-cart')
? this.buttonConfig.button.mini_cart_style
: this.buttonConfig.button.style;
const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig();
jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);