diff --git a/src/routes/console/organization-[organization]/billing/+page.svelte b/src/routes/console/organization-[organization]/billing/+page.svelte index a6055bedb..379814dd1 100644 --- a/src/routes/console/organization-[organization]/billing/+page.svelte +++ b/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} + +{#if $selectedInvoice} + +{/if} diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte index 8ca0b69d9..ea71e2061 100644 --- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte +++ b/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 @@ { - selectedInvoice = invoice; - showRetryModal = true; + $selectedInvoice = invoice; + $showRetryModal = true; showDropdown[i] = !showDropdown[i]; trackEvent(`click_retry_payment`, { from: 'button', @@ -164,7 +162,3 @@ {/if} - -{#if selectedInvoice} - -{/if} diff --git a/src/routes/console/organization-[organization]/billing/store.ts b/src/routes/console/organization-[organization]/billing/store.ts index e75622d62..314b4b31c 100644 --- a/src/routes/console/organization-[organization]/billing/store.ts +++ b/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(null); +export let showRetryModal = writable(false);