Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: hide credits on starter plan

Browse Source
This commit is contained in:
Arman
2024-02-08 16:53:14 +01:00
committed by Torsten Dittmann
parent f2335e7f2b
commit f5d01923db
1 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/organization-[organization]/billing/availableCredit.svelte
+68 -39
View File
@@ -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>