Skip to content

Fix custom plan names displaying as "Custom" on account organizations page #2545

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 20, 2025
+50 −19
Merged

Fix custom plan names displaying as "Custom" on account organizations page #2545

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
667c92e
Initial plan
Copilot Nov 3, 2025
9b4ef58
Fix custom plan display showing as Free on account organizations page
Copilot Nov 3, 2025
56052dd
Simplify tierToPlan logic based on code review feedback
Copilot Nov 3, 2025
17c1d1f
Update tierToPlan to default to tierCustom and fetch custom plan name…
Copilot Nov 5, 2025
b445fad
chore: show skeleton loaders while loading organization plan names
stnguyen90 Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/stores/billing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export function tierToPlan(tier: Tier) {
case BillingPlan.ENTERPRISE:
return tierEnterprise;
default:
return tierFree;
return tierCustom;
}
}

Expand Down
67 changes: 49 additions & 18 deletions src/routes/(console)/account/organizations/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
import { sdk } from '$lib/stores/sdk';
import type { PageData } from './$types';
import { isCloud } from '$lib/system';
import { Badge } from '@appwrite.io/pink-svelte';
import { Badge, Skeleton } from '@appwrite.io/pink-svelte';
import type { Models } from '@appwrite.io/console';
import type { Organization } from '$lib/stores/organization';
import { daysLeftInTrial, plansInfo, tierToPlan } from '$lib/stores/billing';
import { daysLeftInTrial, plansInfo, tierToPlan, type Tier } from '$lib/stores/billing';
import { toLocaleDate } from '$lib/helpers/date';
import { BillingPlan } from '$lib/constants';
import { goto } from '$app/navigation';
Expand All @@ -36,6 +36,27 @@
return memberships.memberships.map((team) => team.userName || team.userEmail);
}

async function getPlanName(billingPlan: string | undefined): Promise<string> {
if (!billingPlan) return 'Unknown';

// For known plans, use tierToPlan
const tierData = tierToPlan(billingPlan as Tier);

// If it's not a custom plan or we got a non-custom result, return the name
if (tierData.name !== 'Custom') {
return tierData.name;
}

// For custom plans, fetch from API
try {
const plan = await sdk.forConsole.billing.getPlan(billingPlan);
Copy link
Member

@ItzNotABug ItzNotABug Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can do a quick cached data lookup first to avoid a network call, there should be a plansInfo available.

Copy link
Contributor

@stnguyen90 stnguyen90 Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ItzNotABug tierToPlan essentially has the same data as plansInfo, right?

Copy link
Member

@ItzNotABug ItzNotABug Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I meant we can avoid the getPlan API call if the plansInfo already has the details needed, which in most cases should be available.

Copy link
Contributor

@stnguyen90 stnguyen90 Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, were only calling getPlan when the plan info is unknown.

return plan.name;
} catch (error) {
// Fallback to 'Custom' if fetch fails
return 'Custom';
}
}

function isOrganizationOnTrial(organization: Organization): boolean {
if (!organization?.billingTrialStartDate) return false;
if ($daysLeftInTrial <= 0) return false;
Expand Down Expand Up @@ -92,6 +113,9 @@
{#each data.organizations.teams as organization}
{@const avatarList = getMemberships(organization.$id)}
{@const payingOrg = isPayingOrganization(organization)}
{@const planName = isCloudOrg(organization)
? getPlanName(organization.billingPlan)
: null}

<GridItem1 href={`${base}/organization-${organization.$id}`}>
<svelte:fragment slot="eyebrow">
Expand All @@ -104,16 +128,19 @@
<svelte:fragment slot="status">
{#if isCloudOrg(organization)}
{#if isNonPayingOrganization(organization)}
<Tooltip>
<Badge
size="xs"
variant="secondary"
content={tierToPlan(organization?.billingPlan)?.name} />

<span slot="tooltip">
You are limited to 1 free organization per account
</span>
</Tooltip>
{#if planName}
{#await planName}
<Skeleton width={30} height={20} variant="line" />
{:then name}
<Tooltip>
<Badge size="xs" variant="secondary" content={name} />

<span slot="tooltip">
You are limited to 1 free organization per account
</span>
</Tooltip>
{/await}
{/if}
{/if}

{#if isOrganizationOnTrial(organization)}
Expand All @@ -132,16 +159,20 @@
{/if}

{#if payingOrg}
<Badge
size="xs"
type="success"
variant="secondary"
content={tierToPlan(payingOrg?.billingPlan)?.name} />
{#await planName}
<Skeleton width={30} height={20} variant="line" />
{:then name}
<Badge
size="xs"
type="success"
variant="secondary"
content={name} />
{/await}
{/if}
{/if}
</svelte:fragment>
{#await avatarList}
<span class="avatar is-color-empty"></span>
<Skeleton width={40} height={40} variant="circle" />
{:then avatars}
<AvatarGroup {avatars} />
{/await}
Expand Down