From 3dc9b48e1b4cec9d2a43b52411583f4d48d0ee29 Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Thu, 11 Nov 2021 18:00:20 +0200
Subject: [PATCH] Hide button with !important to override !important from some
 themes

---
 .../ContextBootstrap/CheckoutBootstap.js      |  9 ++--
 .../resources/js/modules/Helper/Hiding.js     | 44 +++++++++++++++++++
 2 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 modules/ppcp-button/resources/js/modules/Helper/Hiding.js

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
index f3a06c7ab..d5df1460d 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
+++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
@@ -1,5 +1,6 @@
 import ErrorHandler from '../ErrorHandler';
 import CheckoutActionHandler from '../ActionHandler/CheckoutActionHandler';
+import { setVisible } from '../Helper/Hiding';
 
 class CheckoutBootstap {
     constructor(gateway, renderer, messages, spinner) {
@@ -72,10 +73,10 @@ class CheckoutBootstap {
         const isSavedCard = isCard && this.isSavedCardSelected();
         const isNotOurGateway = !isPaypal && !isCard;
 
-        jQuery(this.standardOrderButtonSelector).toggle(isNotOurGateway || isSavedCard);
-        jQuery(this.gateway.button.wrapper).toggle(isPaypal);
-        jQuery(this.gateway.messages.wrapper).toggle(isPaypal);
-        jQuery(this.gateway.hosted_fields.wrapper).toggle(isCard && !isSavedCard);
+        setVisible(this.standardOrderButtonSelector, isNotOurGateway || isSavedCard, true);
+        setVisible(this.gateway.button.wrapper, isPaypal);
+        setVisible(this.gateway.messages.wrapper, isPaypal);
+        setVisible(this.gateway.hosted_fields.wrapper, isCard && !isSavedCard);
 
         if (isPaypal) {
             this.messages.render();
diff --git a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js
new file mode 100644
index 000000000..8a76164f7
--- /dev/null
+++ b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js
@@ -0,0 +1,44 @@
+const getElement = (selectorOrElement) => {
+    if (typeof selectorOrElement === 'string') {
+        return document.querySelector(selectorOrElement);
+    }
+    return selectorOrElement;
+}
+
+export const isVisible = (element) => {
+    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+}
+
+export const setVisible = (selectorOrElement, show, important = false) => {
+    const element = getElement(selectorOrElement);
+    if (!element) {
+        return;
+    }
+
+    const currentValue = element.style.getPropertyValue('display');
+
+    if (!show) {
+        if (currentValue === 'none') {
+            return;
+        }
+
+        element.style.setProperty('display', 'none', important ? 'important' : '');
+    } else {
+        if (currentValue === 'none') {
+            element.style.removeProperty('display');
+        }
+
+        // still not visible (if something else added display: none in CSS)
+        if (!isVisible(element)) {
+            element.style.setProperty('display', 'block');
+        }
+    }
+};
+
+export const hide = (selectorOrElement, important = false) => {
+    setVisible(selectorOrElement, false, important);
+};
+
+export const show = (selectorOrElement) => {
+    setVisible(selectorOrElement, true);
+};