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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

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
4 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
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
59 changes: 43 additions & 16 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 @@ -16,7 +16,7 @@
import { Badge } 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?

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,17 @@
<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 then name}
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.

won't there be a slight content/layout shift until this loads and if the api call was made?

<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,11 +157,13 @@
{/if}

{#if payingOrg}
<Badge
size="xs"
type="success"
variant="secondary"
content={tierToPlan(payingOrg?.billingPlan)?.name} />
{#await getPlanName(payingOrg.billingPlan) then name}
<Badge
size="xs"
type="success"
variant="secondary"
content={name} />
{/await}
Comment on lines +160 to +166
Copy link
Contributor

@stnguyen90 stnguyen90 Nov 5, 2025

Choose a reason for hiding this comment

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

@ItzNotABug do we want some sort of skeleton loader here?

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.

yeah as I mentioned above for shifts, we could use a skeleton. Please run by design once 👍

{/if}
{/if}
</svelte:fragment>
Expand Down