fix: payment modal not closing.

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'

src/lib/components/fakeModal.svelte

@@ -45,7 +45,7 @@
         }
     }
 
-    $: if (backdrop) {
+    $: if (backdrop && show && !document.body.contains(backdrop)) {
         document.body.appendChild(backdrop);
     }
 

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}`;

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>