feat: retry payment email flow

src/routes/console/organization-[organization]/billing/+page.svelte

@@ -20,6 +20,8 @@
     import { wizard } from '$lib/stores/wizard';
     import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { BillingPlan } from '$lib/constants';
+    import RetryPaymentModal from './retryPaymentModal.svelte';
+    import { selectedInvoice, showRetryModal } from './store';
 
     $: defaultPaymentMethod = $paymentMethods?.paymentMethods?.find(
         (method: PaymentMethodData) => method.$id === $organization?.paymentMethodId
@@ -30,29 +32,40 @@
     );
 
     onMount(async () => {
-        if (
-            $page.url.searchParams.has('type') &&
-            $page.url.searchParams.get('type') === 'upgrade'
-        ) {
-            wizard.start(ChangeOrganizationTierCloud);
-        }
+        if ($page.url.searchParams.has('type')) {
+            if ($page.url.searchParams.get('type') === 'upgrade') {
+                wizard.start(ChangeOrganizationTierCloud);
+            }
 
-        if (
-            $page.url.searchParams.has('invoice') &&
-            $page.url.searchParams.has('type') &&
-            $page.url.searchParams.get('type') === 'confirmation'
-        ) {
-            const invoiceId = $page.url.searchParams.get('invoice');
-            const invoice = await sdk.forConsole.billing.getInvoice(
-                $page.params.organization,
-                invoiceId
-            );
+            if (
+                $page.url.searchParams.has('invoice') &&
+                $page.url.searchParams.get('type') === 'confirmation'
+            ) {
+                const invoiceId = $page.url.searchParams.get('invoice');
+                const invoice = await sdk.forConsole.billing.getInvoice(
+                    $page.params.organization,
+                    invoiceId
+                );
 
-            await confirmPayment(
-                $organization.$id,
-                invoice.clientSecret,
-                $organization.paymentMethodId
-            );
+                await confirmPayment(
+                    $organization.$id,
+                    invoice.clientSecret,
+                    $organization.paymentMethodId
+                );
+            }
+
+            if (
+                $page.url.searchParams.has('invoice') &&
+                $page.url.searchParams.get('type') === 'retry'
+            ) {
+                const invoiceId = $page.url.searchParams.get('invoice');
+                const invoice = await sdk.forConsole.billing.getInvoice(
+                    $page.params.organization,
+                    invoiceId
+                );
+                selectedInvoice.set(invoice);
+                showRetryModal.set(true);
+            }
         }
         if ($page.url.searchParams.has('clientSecret')) {
             const clientSecret = $page.url.searchParams.get('clientSecret');
@@ -101,3 +114,7 @@
     {/if}
     <AvailableCredit />
 </Container>
+
+{#if $selectedInvoice}
+    <RetryPaymentModal bind:show={$showRetryModal} bind:invoice={$selectedInvoice} />
+{/if}

src/routes/console/organization-[organization]/billing/paymentHistory.svelte

@@ -21,17 +21,15 @@
         TableScroll
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
-    import type { Invoice, InvoiceList } from '$lib/sdk/billing';
+    import type { InvoiceList } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
     import { VARS } from '$lib/system';
     import { Query } from '@appwrite.io/console';
     import { onMount } from 'svelte';
-    import RetryPaymentModal from './retryPaymentModal.svelte';
     import { trackEvent } from '$lib/actions/analytics';
+    import { selectedInvoice, showRetryModal } from './store';
 
     let showDropdown = [];
-    let showRetryModal = false;
-    let selectedInvoice: Invoice | null = null;
 
     let offset = 0;
     let invoiceList: InvoiceList = {
@@ -131,8 +129,8 @@
                                                 <DropListItem
                                                     icon="refresh"
                                                     on:click={() => {
-                                                        selectedInvoice = invoice;
-                                                        showRetryModal = true;
+                                                        $selectedInvoice = invoice;
+                                                        $showRetryModal = true;
                                                         showDropdown[i] = !showDropdown[i];
                                                         trackEvent(`click_retry_payment`, {
                                                             from: 'button',
@@ -164,7 +162,3 @@
         {/if}
     </svelte:fragment>
 </CardGrid>
-
-{#if selectedInvoice}
-    <RetryPaymentModal bind:show={showRetryModal} bind:invoice={selectedInvoice} />
-{/if}

src/routes/console/organization-[organization]/billing/store.ts

@@ -1,6 +1,6 @@
 import { page } from '$app/stores';
 import type { WizardStepsType } from '$lib/layout/wizard.svelte';
-import type { AggregationList } from '$lib/sdk/billing';
+import type { AggregationList, Invoice } from '$lib/sdk/billing';
 import { derived, writable } from 'svelte/store';
 
 export const aggregationList = derived(
@@ -13,3 +13,6 @@ export const addCreditWizardStore = writable<{ coupon: string; paymentMethodId:
     coupon: null,
     paymentMethodId: null
 });
+
+export let selectedInvoice = writable<Invoice>(null);
+export let showRetryModal = writable(false);