From b7f18aedb0a5ef813e229ec534de1d2f2365c00b Mon Sep 17 00:00:00 2001
From: Vitalij Mik <vitalij.mik@dasistweb.de>
Date: Mon, 15 Apr 2024 13:49:22 +0200
Subject: [PATCH] NTR: test apple pay buttons

---
 .../plugins/apple-pay-direct.plugin.js        | 24 +++++++++++--------
 .../plugins/apple-pay-direct.plugin.scss      |  5 ++++
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.js b/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.js
index d4abb1394..ab95242ec 100644
--- a/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.js
+++ b/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.js
@@ -21,11 +21,9 @@ export default class MollieApplePayDirect extends Plugin {
         // register our off-canvas listener
         // we need to re-init all apple pay button
         // once the offcanvas is loaded (lazy) into the DOM
-        const elementOffcanvas = document.querySelector('[data-offcanvas-cart]');
-        if (elementOffcanvas instanceof HTMLElement) {
-            const pluginOffCanvas = window.PluginManager.getPluginInstanceFromElement(elementOffcanvas, 'OffCanvasCart');
-            pluginOffCanvas.$emitter.subscribe('offCanvasOpened', me.onOffCanvasOpened.bind(me));
-        }
+
+        const pluginOffCanvas = window.PluginManager.getPluginList().OffCanvasCart.get("instances")[0];
+        pluginOffCanvas.$emitter.subscribe('offCanvasOpened', me.onOffCanvasOpened.bind(me));
 
         // now update our current page
         this.initCurrentPage();
@@ -58,10 +56,12 @@ export default class MollieApplePayDirect extends Plugin {
         if (!window.ApplePaySession || !window.ApplePaySession.canMakePayments()) {
             // hide our wrapping Apple Pay containers
             // to avoid any wrong margins being displayed
+
             if (applePayContainers) {
-                for (let i = 0; i < applePayContainers.length; i++) {
-                    applePayContainers[i].style.display = 'none';
-                }
+                applePayContainers.forEach(function (container){
+                    container.style.display = 'none';
+                    container.classList.add('d-none');
+                });
             }
             return;
         }
@@ -74,8 +74,8 @@ export default class MollieApplePayDirect extends Plugin {
         // we start by fetching the shop url from the data attribute.
         // we need this as prefix for our ajax calls, so that we always
         // call the correct sales channel and its controllers.
-        const button = applePayButtons[0];
-        const shopUrl = me.getShopUrl(button);
+
+        const shopUrl = me.getShopUrl(applePayButtons[0]);
 
         // verify if apple pay is even allowed
         // in our current sales channel
@@ -86,6 +86,10 @@ export default class MollieApplePayDirect extends Plugin {
                     return;
                 }
 
+                applePayContainers.forEach(function (container){
+                    container.classList.remove('d-none');
+                });
+
                 applePayButtons.forEach(function (button) {
                     // Remove display none
                     button.classList.remove('d-none');
diff --git a/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.scss b/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.scss
index a7c9af5b0..4d31f4e98 100644
--- a/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.scss
+++ b/src/Resources/app/storefront/src/mollie-payments/plugins/apple-pay-direct.plugin.scss
@@ -34,6 +34,7 @@
     min-height: 32px;
     max-height: 64px;
   }
+
   .apple-pay-button-black-with-text {
     background-color: black;
     color: white;
@@ -75,4 +76,8 @@
     margin-left: calc(2px * var(--apple-pay-scale));
     border: none;
   }
+}
+
+.d-none{
+  display:none !important;
 }
\ No newline at end of file