Hide order button via class

This commit is contained in:
Alex P 2022-10-20 09:24:24 +03:00
parent 763e1e287c
commit 57af25a197
4 changed files with 25 additions and 13 deletions

View file

@ -15,3 +15,7 @@
.ppcp-dcc-order-button {
float: right;
}
#place_order.ppcp-hidden {
display: none !important;
}

View file

@ -14,7 +14,7 @@ import {
ORDER_BUTTON_SELECTOR,
PaymentMethods
} from "./modules/Helper/CheckoutMethodState";
import {hide, setVisible} from "./modules/Helper/Hiding";
import {hide, setVisible, setVisibleByClass} from "./modules/Helper/Hiding";
import {isChangePaymentPage} from "./modules/Helper/Subscriptions";
import FreeTrialHandler from "./modules/ActionHandler/FreeTrialHandler";
@ -190,7 +190,7 @@ document.addEventListener(
const isPaypalButton = paypalButtonGatewayIds.includes(currentPaymentMethod);
const isCards = currentPaymentMethod === PaymentMethods.CARDS;
setVisible(ORDER_BUTTON_SELECTOR, !isPaypalButton && !isCards, true);
setVisibleByClass(ORDER_BUTTON_SELECTOR, !isPaypalButton && !isCards, 'ppcp-hidden');
if (isPaypalButton) {
// stopped after the first rendering of the buttons, in onInit

View file

@ -1,6 +1,6 @@
import ErrorHandler from '../ErrorHandler';
import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
import { setVisible } from '../Helper/Hiding';
import {setVisible, setVisibleByClass} from '../Helper/Hiding';
import {
getCurrentPaymentMethod,
isSavedCardSelected, ORDER_BUTTON_SELECTOR,
@ -15,10 +15,6 @@ class CheckoutBootstap {
this.spinner = spinner;
this.standardOrderButtonSelector = ORDER_BUTTON_SELECTOR;
this.buttonChangeObserver = new MutationObserver((el) => {
this.updateUi();
});
}
init() {
@ -71,11 +67,6 @@ class CheckoutBootstap {
this.renderer.render(
actionHandler.configuration()
);
this.buttonChangeObserver.observe(
document.querySelector(this.standardOrderButtonSelector),
{attributes: true}
);
}
updateUi() {
@ -95,7 +86,7 @@ class CheckoutBootstap {
}, {}),
};
setVisible(this.standardOrderButtonSelector, (isPaypal && isFreeTrial && hasVaultedPaypal) || isNotOurGateway || isSavedCard, true);
setVisibleByClass(this.standardOrderButtonSelector, (isPaypal && isFreeTrial && hasVaultedPaypal) || isNotOurGateway || isSavedCard, 'ppcp-hidden');
setVisible('.ppcp-vaulted-paypal-details', isPaypal);
setVisible(this.gateway.button.wrapper, isPaypal && !(isFreeTrial && hasVaultedPaypal));
setVisible(this.gateway.messages.wrapper, isPaypal && !isFreeTrial);

View file

@ -1,3 +1,7 @@
/**
* @param selectorOrElement
* @returns {Element}
*/
const getElement = (selectorOrElement) => {
if (typeof selectorOrElement === 'string') {
return document.querySelector(selectorOrElement);
@ -35,6 +39,19 @@ export const setVisible = (selectorOrElement, show, important = false) => {
}
};
export const setVisibleByClass = (selectorOrElement, show, hiddenClass) => {
const element = getElement(selectorOrElement);
if (!element) {
return;
}
if (show) {
element.classList.remove(hiddenClass);
} else {
element.classList.add(hiddenClass);
}
};
export const hide = (selectorOrElement, important = false) => {
setVisible(selectorOrElement, false, important);
};