Billing SDK Refactor

e2e/steps/free-project.ts

@@ -24,9 +24,15 @@ export async function createFreeProject(page: Page): Promise<Metadata> {
         const regionPicker = dialog.locator('button[role="combobox"]');
         if (await regionPicker.isVisible()) {
             await regionPicker.click();
-            await page.getByRole('option', { name: /New York/i }).click();
-
-            region = 'nyc';
+            const firstEnabledOption = page
+                .locator('[role="option"]:not([data-disabled="true"])')
+                .first();
+
+            if ((await firstEnabledOption.count()) > 0) {
+                const selectedRegion = await firstEnabledOption.getAttribute('data-value');
+                await firstEnabledOption.click();
+                region = selectedRegion?.replace(/"/g, '') || 'fra';
+            }
         }
 
         await dialog.getByRole('button', { name: 'create' }).click();

e2e/steps/pro-project.ts

@@ -57,9 +57,15 @@ export async function createProProject(page: Page): Promise<Metadata> {
         const regionPicker = dialog.locator('button[role="combobox"]');
         if (await regionPicker.isVisible()) {
             await regionPicker.click();
-            await page.getByRole('option', { name: /New York/i }).click();
+            const firstEnabledOption = page
+                .locator('[role="option"]:not([data-disabled="true"])')
+                .first();
 
-            region = 'nyc';
+            if ((await firstEnabledOption.count()) > 0) {
+                const selectedRegion = await firstEnabledOption.getAttribute('data-value');
+                await firstEnabledOption.click();
+                region = selectedRegion?.replace(/"/g, '') || 'fra';
+            }
         }
 
         await dialog.getByRole('button', { name: 'create' }).click();

src/lib/commandCenter/searchers/organizations.ts

@@ -1,24 +1,22 @@
+import { resolve } from '$app/paths';
 import { goto } from '$app/navigation';
-import { base } from '$app/paths';
-import { sdk } from '$lib/stores/sdk';
 import type { Searcher } from '../commands';
-import { isCloud } from '$lib/system';
-import { Platform, Query } from '@appwrite.io/console';
+import { getTeamOrOrganizationList } from '$lib/stores/organization';
 
 export const orgSearcher = (async (query: string) => {
-    const { teams } = !isCloud
-        ? await sdk.forConsole.teams.list()
-        : await sdk.forConsole.billing.listOrganization([
-              Query.equal('platform', Platform.Appwrite)
-          ]);
+    const { teams } = await getTeamOrOrganizationList();
 
     return teams
         .filter((organization) => organization.name.toLowerCase().includes(query.toLowerCase()))
         .map((organization) => {
             return {
                 label: organization.name,
                 callback: () => {
-                    goto(`${base}/organization-${organization.$id}`);
+                    goto(
+                        resolve('/(console)/organization-[organization]', {
+                            organization: organization.$id
+                        })
+                    );
                 },
                 group: 'organizations'
             } as const;

src/lib/components/archiveProject.svelte

@@ -38,23 +38,21 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { isCloud } from '$lib/system';
     import { regions as regionsStore } from '$lib/stores/organization';
-    import type { Organization } from '$lib/stores/organization';
-    import type { Plan } from '$lib/sdk/billing';
 
     // props
     interface Props {
+        currentPlan: Models.BillingPlan;
+        organization: Models.Organization;
         projectsToArchive: Models.Project[];
-        organization: Organization;
-        currentPlan: Plan;
         archivedTotalOverall: number;
         archivedOffset: number;
         limit: number;
     }
 
     let {
-        projectsToArchive,
-        organization,
         currentPlan,
+        organization,
+        projectsToArchive,
         archivedTotalOverall,
         archivedOffset,
         limit

src/lib/components/backupDatabaseAlert.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { HeaderAlert } from '$lib/layout';
@@ -18,14 +17,14 @@
 </script>
 
 {#if $showPolicyAlert && isCloud && $organization?.$id && page.url.pathname.match(/\/databases\/database-[^/]+$/)}
-    {@const isFreePlan = $organization?.billingPlan === BillingPlan.FREE}
+    {@const areBackupsAvailable = $organization?.billingPlanDetails.backupsEnabled}
 
-    {@const subtitle = isFreePlan
+    {@const subtitle = !areBackupsAvailable
         ? 'Upgrade your plan to ensure your data stays safe and backed up'
         : 'Protect your data by quickly adding a backup policy'}
 
-    {@const ctaText = isFreePlan ? 'Upgrade plan' : 'Create policy'}
-    {@const ctaURL = isFreePlan ? $upgradeURL : `${page.url.pathname}/backups`}
+    {@const ctaText = !areBackupsAvailable ? 'Upgrade plan' : 'Create policy'}
+    {@const ctaURL = !areBackupsAvailable ? $upgradeURL : `${page.url.pathname}/backups`}
 
     <HeaderAlert type="warning" title="Your database has no backup policy">
         <svelte:fragment>{subtitle}</svelte:fragment>
@@ -35,7 +34,7 @@
                     href={ctaURL}
                     secondary
                     fullWidthMobile
-                    event={isFreePlan ? 'backup_banner_upgrade' : 'backup_banner_add'}>
+                    event={!areBackupsAvailable ? 'backup_banner_upgrade' : 'backup_banner_add'}>
                     <span class="text">{ctaText}</span>
                 </Button>
 

src/lib/components/backupRestoreBox.svelte

@@ -4,7 +4,7 @@
     import { onMount } from 'svelte';
     import { isCloud, isSelfHosted } from '$lib/system';
     import { organization } from '$lib/stores/organization';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { goto, invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { addNotification } from '$lib/stores/notifications';
@@ -125,8 +125,8 @@
     }
 
     onMount(() => {
-        // fast path: don't subscribe if org is on a free plan or is self-hosted.
-        if (isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE)) return;
+        // fast path: don't subscribe if org doesn't support backups or is self-hosted.
+        if (isSelfHosted || (isCloud && !$organization?.billingPlanDetails.backupsEnabled)) return;
 
         return realtime.forProject(page.params.region, 'console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;

src/lib/components/billing/alerts/limitReached.svelte

@@ -2,21 +2,19 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { hideBillingHeaderRoutes, readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import { hideBillingHeaderRoutes, readOnly, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
 </script>
 
-{#if $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
+{#if $organization?.$id && !$organization?.billingPlanDetails.usage && $readOnly && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert
         type="error"
-        title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>
+        title={`${$organization.name} usage has reached the ${$organization.billingPlanDetails.name} plan limit`}>
         <svelte:fragment>
-            Usage for the <b>{$organization.name}</b> organization has reached the limits of the {tierToPlan(
-                $organization.billingPlan
-            ).name}
+            Usage for the <b>{$organization.name}</b> organization has reached the limits of the {$organization
+                .billingPlanDetails.name}
             plan. Consider upgrading to increase your resource usage.
         </svelte:fragment>
         <svelte:fragment slot="buttons">

src/lib/components/billing/alerts/missingPaymentMethod.svelte

@@ -1,14 +1,36 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
     import { hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { orgMissingPaymentMethod } from '$routes/(console)/store';
+
+    // exists
+    $: hasOrgBillingContext = !!$orgMissingPaymentMethod;
+
+    // needs any methods
+    $: requiresPaymentMethod =
+        hasOrgBillingContext && $orgMissingPaymentMethod.billingPlanDetails.requiresPaymentMethod;
+
+    // has any methods
+    $: hasAnyPaymentMethod =
+        hasOrgBillingContext &&
+        (!!$orgMissingPaymentMethod.paymentMethodId ||
+            !!$orgMissingPaymentMethod.backupPaymentMethodId);
+
+    // is url excluded
+    $: isBillingHeaderHidden = hideBillingHeaderRoutes.includes(page.url.pathname);
+
+    // should show header
+    $: shouldShowBillingHeader =
+        hasOrgBillingContext &&
+        requiresPaymentMethod &&
+        !hasAnyPaymentMethod &&
+        !isBillingHeaderHidden;
 </script>
 
-{#if ($orgMissingPaymentMethod.billingPlan === BillingPlan.PRO || $orgMissingPaymentMethod.billingPlan === BillingPlan.SCALE) && !$orgMissingPaymentMethod.paymentMethodId && !$orgMissingPaymentMethod.backupPaymentMethodId && !hideBillingHeaderRoutes.includes(page.url.pathname)}
+{#if shouldShowBillingHeader}
     <HeaderAlert
         type="error"
         title={`Payment method required for ${$orgMissingPaymentMethod.name}`}>

src/lib/components/billing/alerts/newDevUpgradePro.svelte

@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Click, trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan, NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
+    import { NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { organization } from '$lib/stores/organization';
     import { activeHeaderAlert } from '$routes/(console)/store';
@@ -23,7 +23,7 @@
     }
 </script>
 
-{#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !page.url.pathname.includes(base + '/account')}
+{#if show && $organization?.$id && !$organization?.billingPlanDetails.supportsCredits && !page.url.pathname.includes(base + '/account')}
     <GradientBanner on:close={handleClose}>
         <Layout.Stack
             gap="m"

src/lib/components/billing/alerts/selectProjectCloud.svelte

@@ -31,10 +31,10 @@
 
     async function updateSelected() {
         try {
-            await sdk.forConsole.billing.updateSelectedProjects(
-                projects[0].teamId,
-                selectedProjects
-            );
+            await sdk.forConsole.organizations.updateProjects({
+                organizationId,
+                projects: selectedProjects
+            });
 
             showSelectProject = false;
             invalidate(Dependencies.ORGANIZATION);

src/lib/components/billing/couponInput.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
-    import { Button, InputText } from '$lib/elements/forms';
-    import { formatCurrency } from '$lib/helpers/numbers';
-    import type { Coupon } from '$lib/sdk/billing';
     import { sdk } from '$lib/stores/sdk';
-    import { Layout } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import type { Models } from '@appwrite.io/console';
+    import { formatCurrency } from '$lib/helpers/numbers';
+    import { Button, InputText } from '$lib/elements/forms';
 
     const dispatch = createEventDispatcher();
 
     export let required = false;
     export let coupon: string = '';
-    export let couponData: Partial<Coupon> = {
+    export let couponData: Partial<Models.Coupon> = {
         code: null,
         status: null,
         credits: null
     };
 
     async function addCoupon() {
         try {
-            const response = await sdk.forConsole.billing.getCouponAccount(coupon);
-            couponData = response;
+            couponData = await sdk.forConsole.account.getCoupon({
+                couponId: coupon
+            });
+
             dispatch('validation', couponData);
             coupon = null;
         } catch (error) {

src/lib/components/billing/creditsApplied.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import type { Coupon } from '$lib/sdk/billing';
+    import type { Models } from '@appwrite.io/console';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { IconTag, IconX } from '@appwrite.io/pink-icons-svelte';
     import { Badge, Icon, Layout, Tooltip, Typography } from '@appwrite.io/pink-svelte';
 
-    export let couponData: Partial<Coupon> = {
+    export let couponData: Partial<Models.Coupon> = {
         code: null,
         status: null,
         credits: null

src/lib/components/billing/discountsApplied.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-    import type { Coupon } from '$lib/sdk/billing';
+    import type { Models } from '@appwrite.io/console';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { IconTag } from '@appwrite.io/pink-icons-svelte';
     import { Badge, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let label: string;
     export let value: number;
-    export let couponData: Partial<Coupon> = {
+    export let couponData: Partial<Models.Coupon> = {
         code: null,
         status: null,
         credits: null

src/lib/components/billing/emptyCardCloud.svelte

@@ -1,21 +1,33 @@
 <script lang="ts">
-    import { Click, trackEvent } from '$lib/actions/analytics';
-    import { BillingPlan } from '$lib/constants';
+    import { Card } from '..';
+    import type { Snippet } from 'svelte';
     import { Button } from '$lib/elements/forms';
-    import { tierToPlan, upgradeURL } from '$lib/stores/billing';
+    import { BillingPlanGroup } from '@appwrite.io/console';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
-    import { Card } from '..';
+    import { getBasePlanFromGroup, upgradeURL } from '$lib/stores/billing';
+
+    let {
+        service,
+        eventSource,
+        children = null
+    }: {
+        service: string;
+        eventSource: string;
+        children?: Snippet;
+    } = $props();
 
-    export let service: string;
-    export let eventSource: string;
+    const proPlanName = getBasePlanFromGroup(BillingPlanGroup.Pro).name;
 </script>
 
 <Card>
-    <slot>
+    {#if children}
+        {@render children()}
+    {:else}
         <Layout.Stack alignItems="center">
             <Typography.Text variant="m-600">Upgrade to add {service}</Typography.Text>
             <Typography.Text>
-                Upgrade to a {tierToPlan(BillingPlan.PRO).name} plan to add {service} to your organization
+                Upgrade to a {proPlanName} plan to add {service} to your organization
             </Typography.Text>
 
             <Button
@@ -31,5 +43,5 @@
                 Upgrade
             </Button>
         </Layout.Stack>
-    </slot>
+    {/if}
 </Card>