From 6a2c7184090658baed509bcf020b7961e7733c8a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 2 Dec 2024 17:46:58 +0530
Subject: [PATCH] updates: copy, misc.

---
 src/lib/components/billing/usageRates.svelte       |  2 +-
 .../billing/availableCredit.svelte                 |  2 +-
 .../billing/budgetAlert.svelte                     | 14 ++++++++++++--
 .../billing/planSummary.svelte                     | 10 +++++++---
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/billing/usageRates.svelte b/src/lib/components/billing/usageRates.svelte
index c2d5c73ae..d8f57849d 100644
--- a/src/lib/components/billing/usageRates.svelte
+++ b/src/lib/components/billing/usageRates.svelte
@@ -67,7 +67,7 @@
             following rates. Next billing period: {toLocaleDate(nextDate)}.
         </p>
     {/if}
-    <Table noStyles>
+    <Table noStyles noMargin>
         <TableHeader>
             <TableCellHead>Resource</TableCellHead>
             <TableCellHead>Limit</TableCellHead>
diff --git a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
index 6efbb5434..23275fe0f 100644
--- a/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/availableCredit.svelte
@@ -91,7 +91,7 @@
 
 <CardGrid hideFooter={$organization?.billingPlan !== BillingPlan.FREE}>
     <Heading tag="h2" size="6">
-        {$organization?.billingPlan === BillingPlan.FREE ? 'Credit' : 'Available credit'}
+        {$organization?.billingPlan === BillingPlan.FREE ? 'Credits' : 'Available credit'}
     </Heading>
 
     <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
index 9c391398b..116c72e47 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte
@@ -82,8 +82,13 @@
         <Heading tag="h2" size="6">Budget alerts</Heading>
 
         <p class="text">
-            Get notified by email when your organization reaches or exceeds a percent of your
-            specified budget cap. You can set a maximum of 3 alerts.
+            {#if $organization?.billingPlan === BillingPlan.FREE}
+                Get notified by email when your organization meets a percentage of your budget cap. <b
+                    >Free organizations will receive one notification at 75% resource usage.</b>
+            {:else}
+                Get notified by email when your organization meets or exceeds a percentage of your
+                specified billing alert(s).
+            {/if}
         </p>
         <svelte:fragment slot="aside">
             {#if $organization?.billingPlan === BillingPlan.FREE}
@@ -101,6 +106,11 @@
                 </Alert>
             {:else}
                 <FormList>
+                    <!-- TODO: confirm copy, design mentions only Pro plan -->
+                    <Alert type="info">
+                        You can set a maximum of 4 billing alerts per organization.
+                    </Alert>
+
                     <div class="u-flex u-gap-16">
                         <InputSelectSearch
                             label="Percentage (%) of budget cap"
diff --git a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
index f356741ad..331e11add 100644
--- a/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/planSummary.svelte
@@ -34,7 +34,8 @@
         <Heading tag="h2" size="6">Payment estimates</Heading>
 
         <p class="text">
-            A breakdown of your estimated upcoming payment for the current billing period.
+            A breakdown of your estimated upcoming payment for the current billing period. Totals
+            displayed exclude accumulated credits and applicable taxes.
         </p>
         <svelte:fragment slot="aside">
             <p class="text u-bold">
@@ -196,11 +197,14 @@
         </svelte:fragment>
         <svelte:fragment slot="actions">
             {#if $organization?.billingPlan === BillingPlan.FREE}
-                <div class="u-flex u-gap-16 u-flex-wrap">
-                    <Button text href={`${base}/organization-${$organization?.$id}/usage`}>
+                <!-- TODO: make center on mobile and have different styles. -->
+                <div
+                    class="u-flex u-flex-vertical-mobile u-cross-center u-gap-16 u-flex-wrap u-width-full-line">
+                    <Button secondary href={`${base}/organization-${$organization?.$id}/usage`}>
                         View estimated usage
                     </Button>
                     <Button
+                        text
                         disabled={$organization?.markedForDeletion}
                         href={$upgradeURL}
                         on:click={() =>