From 4a30f1308725931e91a5ca26fbd880b910f21575 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 8 Feb 2024 16:43:39 +0100
Subject: [PATCH] chore: hide credits on starter plan

---
 .../billing/availableCredit.svelte            | 107 +++++++++++-------
 1 file changed, 68 insertions(+), 39 deletions(-)

diff --git a/src/routes/console/organization-[organization]/billing/availableCredit.svelte b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
index 73df3b96c5..dcaf3f3535 100644
--- a/src/routes/console/organization-[organization]/billing/availableCredit.svelte
+++ b/src/routes/console/organization-[organization]/billing/availableCredit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
+    import { Alert, CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
     import {
         Table,
         TableBody,
@@ -18,6 +18,9 @@
     import AddCreditWizard from './addCreditWizard.svelte';
     import { Button } from '$lib/elements/forms';
     import AddCreditModal from './addCreditModal.svelte';
+    import { BillingPlan } from '$lib/constants';
+    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import { trackEvent } from '$lib/actions/analytics';
 
     let offset = 0;
     let creditList: CreditList = {
@@ -70,47 +73,73 @@
 
     <p class="text">Appwrite credit will automatically be applied to your next invoice.</p>
     <svelte:fragment slot="aside">
-        <div class="u-flex u-cross-center u-main-space-between">
-            <div class="u-flex u-gap-8 u-cross-center">
-                <h4 class="body-text-1 u-bold">Credit balance</h4>
-                <span class="inline-tag">${balance}</span>
+        {#if $organization?.billingPlan === BillingPlan.STARTER}
+            <Alert type="info">
+                <svelte:fragment slot="title">Upgrade to Pro to add credits</svelte:fragment>
+                Upgrade to a Pro plan to add credits to your organization. For more information on what
+                you can do with a Pro plan,
+                <a
+                    class="link"
+                    href="https://appwrite.io/pricing"
+                    target="_blank"
+                    rel="noopener noreferrer">view our pricing guide.</a>
+            </Alert>
+        {:else}
+            <div class="u-flex u-cross-center u-main-space-between">
+                <div class="u-flex u-gap-8 u-cross-center">
+                    <h4 class="body-text-1 u-bold">Credit balance</h4>
+                    <span class="inline-tag">${balance}</span>
+                </div>
+                {#if creditList?.total}
+                    <Button secondary on:click={handleCredits}>
+                        <span class="icon-plus" aria-hidden="true"></span>
+                        <span class="text">Add credits</span>
+                    </Button>
+                {/if}
             </div>
             {#if creditList?.total}
-                <Button secondary on:click={handleCredits}>
-                    <span class="icon-plus" aria-hidden="true"></span>
-                    <span class="text">Add credits</span>
-                </Button>
+                <Table noStyles noMargin>
+                    <TableHeader>
+                        <TableCellHead>Date Added</TableCellHead>
+                        <TableCellHead>Expiry Date</TableCellHead>
+                        <TableCellHead>Amount</TableCellHead>
+                    </TableHeader>
+                    <TableBody>
+                        {#each creditList.credits as credit}
+                            <TableRow>
+                                <TableCellText title="date added">
+                                    {toLocaleDate(credit.$createdAt)}
+                                </TableCellText>
+                                <TableCellText title="expiry date">
+                                    {toLocaleDate(credit.expiration)}
+                                </TableCellText>
+                                <TableCellText title="amount">
+                                    ${credit.credits}
+                                </TableCellText>
+                            </TableRow>
+                        {/each}
+                    </TableBody>
+                </Table>
+                <div class="u-flex u-main-space-between">
+                    <p class="text">Total results: {creditList?.total}</p>
+                    <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
+                </div>
+            {:else}
+                <Empty target="credits" on:click={handleCredits}>Add credits</Empty>
             {/if}
-        </div>
-        {#if creditList?.total}
-            <Table noStyles noMargin>
-                <TableHeader>
-                    <TableCellHead>Date Added</TableCellHead>
-                    <TableCellHead>Expiry Date</TableCellHead>
-                    <TableCellHead>Amount</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each creditList.credits as credit}
-                        <TableRow>
-                            <TableCellText title="date added">
-                                {toLocaleDate(credit.$createdAt)}
-                            </TableCellText>
-                            <TableCellText title="expiry date">
-                                {toLocaleDate(credit.expiration)}
-                            </TableCellText>
-                            <TableCellText title="amount">
-                                ${credit.credits}
-                            </TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-            <div class="u-flex u-main-space-between">
-                <p class="text">Total results: {creditList?.total}</p>
-                <PaginationInline {limit} bind:offset sum={creditList?.total} hidePages />
-            </div>
-        {:else}
-            <Empty target="credits" on:click={handleCredits}>Add credits</Empty>
+        {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+        {#if $organization?.billingPlan === BillingPlan.STARTER}
+            <Button
+                secondary
+                on:click={() => {
+                    wizard.start(ChangeOrganizationTierCloud);
+                    trackEvent('click_organization_upgrade', {
+                        from: 'button',
+                        source: 'billing_add_credits'
+                    });
+                }}>Upgrade to Pro</Button>
         {/if}
     </svelte:fragment>
 </CardGrid>