Fix custom plan names displaying as "Free" on account organizations page (#2545)

Ensure the custom plan name is used by:

- Changing default return value from tierFree to tierCustom for unknown tiers
- Fetching plan name for custom plans

Author: Copilot

src/lib/stores/billing.ts

@@ -100,7 +100,7 @@ export function tierToPlan(tier: Tier) {
         case BillingPlan.ENTERPRISE:
             return tierEnterprise;
         default:
-            return tierFree;
+            return tierCustom;
     }
 }
 

src/routes/(console)/account/organizations/+page.svelte

@@ -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';
@@ -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);
+            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;
@@ -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">
@@ -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)}
@@ -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}