From 7ea7c0eb07b63c7ebdd5506caf06f3ae15a6d820 Mon Sep 17 00:00:00 2001
From: ChiragAgg5k <chiragaggarwal5k@gmail.com>
Date: Tue, 4 Mar 2025 15:29:30 +0530
Subject: [PATCH] chore: updated usage card

---
 .../usage/[[invoice]]/+page.svelte            | 20 +++++++++++++------
 .../settings/usage/[[invoice]]/+page.svelte   |  2 +-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
index 0adb9cf3c..91cc80662 100644
--- a/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte
@@ -2,7 +2,7 @@
     import { trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
     import { BarChart, Legend } from '$lib/charts';
-    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
+    import { Alert, Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
@@ -263,13 +263,21 @@
         <Heading tag="h6" size="7">Image Transformations</Heading>
 
         <p class="text">
-            The total number of image transformations across all projects in your organization.
+            The total number of unique image transformations across all projects in your
+            organization. For more details, see our <a
+                href="https://appwrite.io/docs/advanced/platform/image-transformations"
+                class="link">documentation</a
+            >.
         </p>
-        {#if $organization.billingPlan === BillingPlan.FREE}
-            <p>This feature is not available on the Free plan.</p>
-        {/if}
         <svelte:fragment slot="aside">
-            {#if $organization.billingPlan !== BillingPlan.FREE && data.organizationUsage.imageTransformationsTotal}
+            {#if $organization.billingPlan === BillingPlan.FREE}
+                <Alert type="info">
+                    <svelte:fragment slot="title">
+                        Image Transformations are a Pro plan feature
+                    </svelte:fragment>
+                    Upgrade to a Pro plan to use image transformations.
+                </Alert>
+            {:else if data.organizationUsage.imageTransformationsTotal}
                 {@const current = data.organizationUsage.imageTransformationsTotal}
                 {@const max = getServiceLimit('imageTransformations', tier, plan)}
                 <ProgressBarBig
diff --git a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
index 94001e5c7..4d52289dd 100644
--- a/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -250,7 +250,7 @@
     <CardGrid>
         <Heading tag="h6" size="7">Image transformations</Heading>
 
-        <p class="text">Total image transformations in your project.</p>
+        <p class="text">Total unique image transformations in your project.</p>
 
         <svelte:fragment slot="aside">
             {#if imageTransformations}