Merge pull request #2722 from appwrite/billing-sdk-refactor

Author: ItzNotABug

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,11 +1,10 @@
 <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';
     import { isCloud } from '$lib/system';
-    import { upgradeURL } from '$lib/stores/billing';
+    import { getChangePlanUrl } from '$lib/stores/billing';
     import { hideNotification } from '$lib/helpers/notifications';
     import { backupsBannerId, showPolicyAlert } from '$lib/stores/database';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
@@ -18,14 +17,16 @@
 </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
+        ? getChangePlanUrl($organization.$id)
+        : `${page.url.pathname}/backups`}
 
     <HeaderAlert type="warning" title="Your database has no backup policy">
         <svelte:fragment>{subtitle}</svelte:fragment>
@@ -35,7 +36,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, getChangePlanUrl } 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">
@@ -29,7 +27,7 @@
                 </Button>
             {/if}
             <Button
-                href={$upgradeURL}
+                href={getChangePlanUrl($organization.$id)}
                 on:click={() => {
                     trackEvent(Click.OrganizationClickUpgrade, {
                         from: 'button',

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/projectsLimit.svelte

@@ -3,7 +3,7 @@
     import { Click } from '$lib/actions/analytics';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { hideBillingHeaderRoutes, upgradeURL } from '$lib/stores/billing';
+    import { hideBillingHeaderRoutes, getChangePlanUrl } from '$lib/stores/billing';
     import { currentPlan, organization } from '$lib/stores/organization';
     import SelectProjectCloud from './selectProjectCloud.svelte';
     import { toLocaleDate } from '$lib/helpers/date';
@@ -22,7 +22,7 @@
 
 <SelectProjectCloud bind:showSelectProject bind:selectedProjects {organizationId} />
 
-{#if $currentPlan && $currentPlan.projects > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
+{#if organizationId && $currentPlan && $currentPlan.projects > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <HeaderAlert
         type="warning"
         title="Action required: You have more than {$currentPlan.projects} projects.">
@@ -38,7 +38,7 @@
                     showSelectProject = true;
                 }}>Manage projects</Button>
             <Button
-                href={$upgradeURL}
+                href={getChangePlanUrl(organizationId)}
                 event={Click.OrganizationClickUpgrade}
                 eventData={{
                     from: 'button',