From 4d1cccd3297548752e1f8fd48955115e71558d9f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 13 Apr 2025 11:47:09 +0530
Subject: [PATCH] fix: payment modal not closing.

---
 src/lib/components/billing/paymentModal.svelte     |  2 +-
 src/lib/components/fakeModal.svelte                |  2 +-
 src/lib/stores/stripe.ts                           |  2 +-
 .../billing/paymentMethods.svelte                  | 14 ++++++++++----
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte
index 1185db3e3..4f1afcdf6 100644
--- a/src/lib/components/billing/paymentModal.svelte
+++ b/src/lib/components/billing/paymentModal.svelte
@@ -19,9 +19,9 @@
     async function handleSubmit() {
         try {
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
+            show = false;
             invalidate(Dependencies.PAYMENT_METHODS);
             dispatch('submit', card);
-            show = false;
             addNotification({
                 type: 'success',
                 message: 'A new payment method has been added to your account'
diff --git a/src/lib/components/fakeModal.svelte b/src/lib/components/fakeModal.svelte
index a37281253..0db0ad65d 100644
--- a/src/lib/components/fakeModal.svelte
+++ b/src/lib/components/fakeModal.svelte
@@ -45,7 +45,7 @@
         }
     }
 
-    $: if (backdrop) {
+    $: if (backdrop && show && !document.body.contains(backdrop)) {
         document.body.appendChild(backdrop);
     }
 
diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts
index b461af01e..86651a3e8 100644
--- a/src/lib/stores/stripe.ts
+++ b/src/lib/stores/stripe.ts
@@ -62,7 +62,7 @@ export async function submitStripeCard(name: string, organizationId?: string) {
         }
 
         // Element needs to be submitted before confirming the setup intent
-        elements.submit();
+        await elements.submit();
 
         const baseUrl = 'https://cloud.appwrite.io/console';
         const accountUrl = `${baseUrl}/account/payments?clientSecret=${clientSecret}`;
diff --git a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
index ecae47486..6cb9717e2 100644
--- a/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte
@@ -230,7 +230,7 @@
                                 </Typography.Text>
                             </Tooltip>
                         </Layout.Stack>
-                        <ActionMenu.Root slot="tooltip">
+                        <ActionMenu.Root slot="tooltip" let:toggle>
                             {#if $paymentMethods.total}
                                 {#each filteredPaymentMethods as paymentMethod}
                                     <ActionMenu.Item.Button
@@ -245,7 +245,10 @@
                             <Divider />
                             <ActionMenu.Item.Button
                                 leadingIcon={IconPlus}
-                                on:click={() => (showPayment = true)}>
+                                on:click={(e) => {
+                                    toggle(e);
+                                    showPayment = true;
+                                }}>
                                 Add new payment method
                             </ActionMenu.Item.Button>
                         </ActionMenu.Root>
@@ -262,7 +265,7 @@
                         <Button secondary icon on:click={toggle}>
                             <Icon icon={IconPlus} size="s" />
                         </Button>
-                        <ActionMenu.Root slot="tooltip">
+                        <ActionMenu.Root slot="tooltip" let:toggle>
                             {#if $paymentMethods.total}
                                 {#each filteredPaymentMethods as paymentMethod}
                                     <ActionMenu.Item.Button
@@ -277,7 +280,10 @@
                             <Divider />
                             <ActionMenu.Item.Button
                                 leadingIcon={IconPlus}
-                                on:click={() => (showPayment = true)}>
+                                on:click={(e) => {
+                                    toggle(e);
+                                    showPayment = true;
+                                }}>
                                 Add new payment method
                             </ActionMenu.Item.Button>
                         </ActionMenu.Root>