From aa9ae2a3b442da64237a35b38eaafe77c7afe67b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 8 Feb 2025 14:27:02 +0530
Subject: [PATCH] fix: misleading alerts on invoice failed x service limit
 reached.

---
 .../billing/alerts/paymentFailed.svelte       | 26 +++++++++++++++++++
 src/lib/layout/containerHeader.svelte         |  4 +--
 src/lib/stores/billing.ts                     |  7 ++---
 .../(console)/project-[project]/+layout.ts    | 11 ++++++++
 4 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/billing/alerts/paymentFailed.svelte

diff --git a/src/lib/components/billing/alerts/paymentFailed.svelte b/src/lib/components/billing/alerts/paymentFailed.svelte
new file mode 100644
index 000000000..51721c892
--- /dev/null
+++ b/src/lib/components/billing/alerts/paymentFailed.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Button } from '$lib/elements/forms';
+    import { HeaderAlert } from '$lib/layout';
+    import { failedInvoice } from '$lib/stores/billing';
+    import { organization } from '$lib/stores/organization';
+
+    $: isOnProjects = $page.route.id.includes('project-[project]');
+</script>
+
+<!-- This is only shown under projects -->
+{#if $failedInvoice && $failedInvoice.teamId === $organization.$id && isOnProjects}
+    <HeaderAlert type="error" title="A scheduled payment for {$organization.name} failed">
+        To avoid service disruptions in your projects, please verify your payment details and try
+        again.
+        <svelte:fragment slot="buttons">
+            <Button
+                href={`${base}/organization-${$organization?.$id}/billing`}
+                secondary
+                fullWidthMobile>
+                <span class="text">Go to billing</span>
+            </Button>
+        </svelte:fragment>
+    </HeaderAlert>
+{/if}
diff --git a/src/lib/layout/containerHeader.svelte b/src/lib/layout/containerHeader.svelte
index ab59f4780..6c3a86c16 100644
--- a/src/lib/layout/containerHeader.svelte
+++ b/src/lib/layout/containerHeader.svelte
@@ -69,7 +69,7 @@
         ? checkForUsageFees($organization?.billingPlan, serviceId)
         : false;
     $: isLimited = limit !== 0 && limit < Infinity;
-    $: overflowingServices = limitedServices.filter((service) => service.value >= 0);
+    $: overflowingServices = limitedServices.filter((service) => service.value > 0);
     $: isButtonDisabled =
         buttonDisabled ||
         ($readOnly && !GRACE_PERIOD_OVERRIDE) ||
@@ -102,7 +102,7 @@
                         >.
                     </span>
                 </Alert>
-            {:else}
+            {:else if services.length}
                 <Alert type={alertType} isStandalone>
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Button
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index a5b00f43e..a8abb4269 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -150,10 +150,11 @@ export const failedInvoice = cachedStore<
         load: async (orgId) => {
             if (!isCloud) set(null);
             if (!get(canSeeBilling)) set(null);
-            const invoices = await sdk.forConsole.billing.listInvoices(orgId);
-            const failedInvoices = invoices.invoices.filter((i) => i.status === 'failed');
+            const failedInvoices = await sdk.forConsole.billing.listInvoices(orgId, [
+                Query.equal('status', 'failed')
+            ]);
             // const failedInvoices = invoices.invoices;
-            if (failedInvoices?.length > 0) {
+            if (failedInvoices?.invoices?.length > 0) {
                 const firstFailed = failedInvoices[0];
                 const today = new Date();
                 const thirtyDaysAgo = new Date(today.setDate(today.getDate() - 30));
diff --git a/src/routes/(console)/project-[project]/+layout.ts b/src/routes/(console)/project-[project]/+layout.ts
index 018462d75..39ff21be2 100644
--- a/src/routes/(console)/project-[project]/+layout.ts
+++ b/src/routes/(console)/project-[project]/+layout.ts
@@ -8,6 +8,9 @@ import { isCloud } from '$lib/system';
 import type { Organization } from '$lib/stores/organization';
 import { defaultRoles, defaultScopes } from '$lib/constants';
 import type { Plan } from '$lib/sdk/billing';
+import { get } from 'svelte/store';
+import { headerAlert } from '$lib/stores/headerAlert';
+import PaymentFailed from '$lib/components/billing/alerts/paymentFailed.svelte';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PROJECT);
@@ -35,6 +38,14 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             scopes = res.scopes;
             if (scopes.includes('billing.read')) {
                 await failedInvoice.load(project.teamId);
+                if (get(failedInvoice)) {
+                    headerAlert.add({
+                        show: true,
+                        component: PaymentFailed,
+                        id: 'paymentFailed',
+                        importance: 1
+                    });
+                }
             }
         }