From a0fcc375cf0b94f66a9b14d19d622fc221db8a79 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 6 Dec 2023 17:37:12 +0100
Subject: [PATCH] feat: downgrade banner

---
 src/lib/stores/organization.ts                    |  1 +
 .../billing/+page.svelte                          | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index 44fd1dfac..f7fadb9be 100644
--- a/src/lib/stores/organization.ts
+++ b/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 = {
diff --git a/src/routes/console/organization-[organization]/billing/+page.svelte b/src/routes/console/organization-[organization]/billing/+page.svelte
index bd9a3b508..253f40058 100644
--- a/src/routes/console/organization-[organization]/billing/+page.svelte
+++ b/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>