feat: downgrade banner

src/lib/stores/organization.ts

@@ -19,6 +19,7 @@ export type Organization = Models.Team<Record<string, unknown>> & {
     billingAddressId?: string;
     amount: number;
     billingTaxId?: string;
+    billingPlanDowngrade?: string;
 };
 
 export type BillingLimits = {

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

@@ -18,6 +18,7 @@
     import { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
+    import { toLocaleDate } from '$lib/helpers/date';
 
     $: defaultPaymentMethod = $paymentMethods?.paymentMethods?.find(
         (method: PaymentMethodData) => method.$id === $organization?.paymentMethodId
@@ -89,21 +90,29 @@
 
 <Container>
     {#if $failedInvoice}
-        <Alert type="error">
+        <Alert type="error" class="common-section">
             <svelte:fragment slot="title">
                 The scheduled payment for {$organization.name} failed
             </svelte:fragment>
             To avoid service disruptions in your projects, please verify your payment details and update
             them if necessary.
         </Alert>
-    {:else if defaultPaymentMethod?.failed && !backupPaymentMethod}
-        <Alert type="error">
+    {/if}
+    {#if defaultPaymentMethod?.failed && !backupPaymentMethod}
+        <Alert type="error" class="common-section">
             <svelte:fragment slot="title">
                 The default payment method for {$organization.name} has expired
             </svelte:fragment>
             To avoid service disruptions in your projects, please update your payment details.
         </Alert>
     {/if}
+    {#if $organization?.billingPlanDowngrade}
+        <Alert type="info" class="common-section">
+            Your organization will change to a Starter plan once your current billing cycle ends on {toLocaleDate(
+                $organization.billingNextInvoiceDate
+            )}.
+        </Alert>
+    {/if}
     <div class="common-section">
         <Heading tag="h2" size="5">Billing</Heading>
     </div>