diff --git a/src/lib/components/creditCardInfo.svelte b/src/lib/components/creditCardInfo.svelte
index b3b89d0d7..fdbd08abe 100644
--- a/src/lib/components/creditCardInfo.svelte
+++ b/src/lib/components/creditCardInfo.svelte
@@ -33,4 +33,9 @@
This payment method has expired
{/if}
+ {#if paymentMethod?.lastError}
+
+ {paymentMethod.lastError}
+
+ {/if}
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 60165d453..d935bd84e 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -19,6 +19,7 @@ export type PaymentMethodData = {
failed: boolean;
name: string;
mandateId?: string;
+ lastError?: string;
};
export type PaymentList = {
@@ -48,6 +49,7 @@ export type Invoice = {
rate: number;
desc: string;
}[];
+ lastError?: string;
};
export type InvoiceList = {
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index c213a7147..f577abd94 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -77,18 +77,18 @@ export function getServiceLimit(serviceId: PlanServices, tier: Tier = null): num
}
export const failedInvoice = cachedStore<
- false | Invoice,
+ Invoice,
{
load: (orgId: string) => Promise;
}
>('failedInvoice', function ({ set }) {
return {
load: async (orgId) => {
- if (!isCloud) set(false);
+ if (!isCloud) set(null);
const invoices = await sdk.forConsole.billing.listInvoices(orgId);
const failedInvoices = invoices.invoices.filter((i) => i.status === 'failed');
// const failedInvoices = invoices.invoices;
- if (failedInvoices.length > 0) {
+ if (failedInvoices?.length > 0) {
const firstFailed = failedInvoices[0];
const today = new Date();
const thirtyDaysAgo = new Date(today.setDate(today.getDate() - 30));
@@ -96,7 +96,7 @@ export const failedInvoice = cachedStore<
if (failedDate < thirtyDaysAgo) {
readOnly.set(true);
}
- } else set(false);
+ } else set(null);
}
};
});
diff --git a/src/routes/console/organization-[organization]/billing/+page.svelte b/src/routes/console/organization-[organization]/billing/+page.svelte
index 6095081f8..c4538a140 100644
--- a/src/routes/console/organization-[organization]/billing/+page.svelte
+++ b/src/routes/console/organization-[organization]/billing/+page.svelte
@@ -22,6 +22,7 @@
import { BillingPlan } from '$lib/constants';
import RetryPaymentModal from './retryPaymentModal.svelte';
import { selectedInvoice, showRetryModal } from './store';
+ import { Button } from '$lib/elements/forms';
$: defaultPaymentMethod = $paymentMethods?.paymentMethods?.find(
(method: PaymentMethodData) => method.$id === $organization?.paymentMethodId
@@ -76,13 +77,27 @@
{#if $failedInvoice}
-
-
- The scheduled payment for {$organization.name} failed
-
- To avoid service disruptions in organization's your projects, please verify your payment
- details and update them if necessary.
-
+ {#if $failedInvoice?.lastError}
+
+ The scheduled payment for {$organization.name} failed due to following error: {$failedInvoice.lastError}
+
+
+
+
+ {:else}
+
+
+ The scheduled payment for {$organization.name} failed
+
+ To avoid service disruptions in organization's your projects, please verify your payment
+ details and update them if necessary.
+
+ {/if}
{/if}
{#if defaultPaymentMethod?.failed && !backupPaymentMethod}
diff --git a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
index a8caf4348..8339ac60b 100644
--- a/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
+++ b/src/routes/console/organization-[organization]/billing/paymentHistory.svelte
@@ -22,7 +22,7 @@
} from '$lib/elements/table';
import { toLocaleDate } from '$lib/helpers/date';
import { formatCurrency } from '$lib/helpers/numbers';
- import type { InvoiceList } from '$lib/sdk/billing';
+ import type { Invoice, InvoiceList } from '$lib/sdk/billing';
import { sdk } from '$lib/stores/sdk';
import { VARS } from '$lib/system';
import { Query } from '@appwrite.io/console';
@@ -31,6 +31,7 @@
import { selectedInvoice, showRetryModal } from './store';
let showDropdown = [];
+ let showFailedError = false;
let offset = 0;
let invoiceList: InvoiceList = {
@@ -51,6 +52,11 @@
]);
}
+ function retryPayment(invoice: Invoice) {
+ $selectedInvoice = invoice;
+ $showRetryModal = true;
+ }
+
$: if (offset !== null) {
request();
}
@@ -82,14 +88,45 @@
-
- {status === 'requires_authentication' ? 'failed' : status}
-
+ {#if invoice?.lastError}
+
+ (showFailedError = true)}
+ button>
+ {status === 'requires_authentication'
+ ? 'failed'
+ : status}
+
+
+
+ The scheduled payment has failed. .
+
+
+
+ {:else}
+
+ {status === 'requires_authentication'
+ ? 'failed'
+ : status}
+
+ {/if}
{formatCurrency(invoice.amount)}
@@ -132,8 +169,7 @@
{
- $selectedInvoice = invoice;
- $showRetryModal = true;
+ retryPayment(invoice);
showDropdown[i] = !showDropdown[i];
trackEvent(`click_retry_payment`, {
from: 'button',