From 2d9a33a0c220ffe754cbf84a3c7cfd9cd530899f Mon Sep 17 00:00:00 2001
From: Petrisor Frincu <petrisor.frincu@plentysystems.com>
Date: Wed, 28 Aug 2024 18:23:08 +0300
Subject: [PATCH] Testing apple pay

---
 apps/web/components/PayPal/ApplePayButton.vue | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/apps/web/components/PayPal/ApplePayButton.vue b/apps/web/components/PayPal/ApplePayButton.vue
index ede27dc79..54b384926 100644
--- a/apps/web/components/PayPal/ApplePayButton.vue
+++ b/apps/web/components/PayPal/ApplePayButton.vue
@@ -1,4 +1,9 @@
 <template>
+  <div class="flex items-center justify-center w-full my-2" v-if="isPaypalLoaded">
+    <div class="border-t-2 flex-grow"></div>
+    <p class="px-2 text-sm uppercase text-gray-400">{{ $t('or') }}</p>
+    <div class="border-t-2 flex-grow"></div>
+  </div>
   <div id="apple-pay-button"></div>
 </template>
 
@@ -14,7 +19,7 @@ const currency = computed(() => cartGetters.getCurrency(cart.value) || (useAppCo
 const applePayConfig = ref<ConfigResponse | null>(null);
 const paypal = await loadScript(currency.value);
 const localePath = useLocalePath();
-const { t } = useI18n();
+let isPaypalLoaded = false;
 
 const loadApplePay = async () => {
   const scriptElement = document.createElement('script');
@@ -120,6 +125,8 @@ const applePayPayment = async () => {
     });
 
     paymentSession.begin();
+
+    isPaypalLoaded = true;
   } catch (error) {
     console.error(error);
   }
@@ -156,23 +163,5 @@ onMounted(async () => {
       });
     return null;
   });
-
-  const targetNode = document.body;
-  const observer = new MutationObserver((mutationsList, observer) => {
-    const applePayButton = document.querySelector('#btn-appl');
-
-    if (applePayButton) {
-      const prependContent =
-        '<div class="flex items-center justify-center w-full my-2"><div class="border-t-2 flex-grow"></div> <p class="px-2 text-sm uppercase text-gray-400">' +
-        t('or') +
-        '</p><div class="border-t-2 flex-grow"></div></div>';
-      applePayButton.insertAdjacentHTML('afterbegin', prependContent);
-      observer.disconnect();
-    }
-  });
-
-  observer.observe(targetNode, { childList: true, subtree: true });
-
-  setTimeout(() => observer.disconnect(), 10_000);
 });
 </script>