From 228dc9c5f2a8e86979f0d0e429e43731331ff9c7 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 19 Dec 2023 10:44:10 +0100
Subject: [PATCH] fix: payment loader

---
 .../components/billing/paymentBoxes.svelte    | 14 +++++
 .../account/payments/paymentModal.svelte      |  2 +-
 .../billing/replaceCard.svelte                | 53 +++++++++++++++++--
 .../choosePlan.svelte                         |  2 -
 4 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/billing/paymentBoxes.svelte b/src/lib/components/billing/paymentBoxes.svelte
index 95d10ac34..62170b813 100644
--- a/src/lib/components/billing/paymentBoxes.svelte
+++ b/src/lib/components/billing/paymentBoxes.svelte
@@ -71,3 +71,17 @@
         </div>
     </FormList>
 </RadioBoxes>
+
+<style lang="scss">
+    .aw-stripe-container {
+        min-height: 295px;
+        position: relative;
+        .loader-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 0;
+        }
+    }
+</style>
diff --git a/src/routes/console/account/payments/paymentModal.svelte b/src/routes/console/account/payments/paymentModal.svelte
index a5cc869d2..02390978b 100644
--- a/src/routes/console/account/payments/paymentModal.svelte
+++ b/src/routes/console/account/payments/paymentModal.svelte
@@ -90,7 +90,7 @@
     </svelte:fragment>
 </FakeModal>
 
-<style lang="scss" global>
+<style lang="scss">
     .aw-stripe-container {
         min-height: 295px;
         position: relative;
diff --git a/src/routes/console/organization-[organization]/billing/replaceCard.svelte b/src/routes/console/organization-[organization]/billing/replaceCard.svelte
index 6ef1d19f6..c68e64bee 100644
--- a/src/routes/console/organization-[organization]/billing/replaceCard.svelte
+++ b/src/routes/console/organization-[organization]/billing/replaceCard.svelte
@@ -6,7 +6,7 @@
     import { organization } from '$lib/stores/organization';
     import { Dependencies } from '$lib/constants';
     import { initializeStripe, isStripeInitialized, submitStripeCard } from '$lib/stores/stripe';
-    import { onMount } from 'svelte';
+    import { onDestroy, onMount } from 'svelte';
     import type { PaymentList } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -18,6 +18,10 @@
     let selectedPaymentMethodId: string;
     let name: string;
     let error: string;
+    let element: HTMLDivElement;
+    let loader: HTMLDivElement;
+
+    let observer: MutationObserver;
 
     onMount(async () => {
         methods = await sdk.forConsole.billing.listPaymentMethods();
@@ -28,6 +32,29 @@
         selectedPaymentMethodId = isBackup
             ? $organization.backupPaymentMethodId
             : $organization.paymentMethodId;
+
+        observer = new MutationObserver((mutationsList) => {
+            for (let mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    if (mutation.addedNodes.length > 0) {
+                        for (let node of Array.from(mutation.addedNodes)) {
+                            if (
+                                node instanceof Element &&
+                                node.className.toLowerCase().includes('__privatestripeelement')
+                            ) {
+                                loader.style.display = 'none';
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        observer.observe(element, { childList: true });
+    });
+
+    onDestroy(() => {
+        observer.disconnect();
     });
 
     async function handleSubmit() {
@@ -154,9 +181,13 @@
                             bind:value={name}
                             required
                             autofocus={true} />
-
-                        <div id="payment-element" data-private>
-                            <!-- Stripe will create form elements here -->
+                        <div class="aw-stripe-container" data-private>
+                            <div class="loader-container" bind:this={loader}>
+                                <div class="loader"></div>
+                            </div>
+                            <div id="payment-element" bind:this={element}>
+                                <!-- Stripe will create form elements here -->
+                            </div>
                         </div>
                     </FormList>
                 {/if}
@@ -174,3 +205,17 @@
         </Button>
     </svelte:fragment>
 </FakeModal>
+
+<style lang="scss">
+    .aw-stripe-container {
+        min-height: 295px;
+        position: relative;
+        .loader-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 0;
+        }
+    }
+</style>
diff --git a/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte b/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte
index f13fbda72..e1aea276e 100644
--- a/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte
+++ b/src/routes/console/wizard/cloudOrganizationChangeTier/choosePlan.svelte
@@ -69,8 +69,6 @@
             $changeOrganizationTier.isOverLimit = false;
             $changeTierSteps = updateStepStatus($changeTierSteps, 4, true);
         }
-
-        console.log($changeOrganizationTier.limitOverflow);
     }
 
     onMount(async () => {