Billing SDK Refactor

package.json

@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@9b32107",
+        "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@7a147b9",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc",
         "@appwrite.io/pink-legacy": "^1.0.3",

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

@@ -37,14 +37,12 @@
     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;
     }
 
     let { projectsToArchive, organization, currentPlan }: Props = $props();

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

@@ -5,16 +5,21 @@
     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,
+        billingIdToPlan,
+        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)}
     <HeaderAlert
         type="error"
-        title={`${$organization.name} usage has reached the ${tierToPlan($organization.billingPlan).name} plan limit`}>
+        title={`${$organization.name} usage has reached the ${billingIdToPlan($organization.billingPlan).name} plan limit`}>
         <svelte:fragment>
-            Usage for the <b>{$organization.name}</b> organization has reached the limits of the {tierToPlan(
+            Usage for the <b>{$organization.name}</b> organization has reached the limits of the {billingIdToPlan(
                 $organization.billingPlan
             ).name}
             plan. Consider upgrading to increase your resource usage.

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

@@ -8,10 +8,9 @@
     import { confirmSetup } from '$lib/stores/stripe';
 
     async function verifyPaymentMethod() {
-        const method = await sdk.forConsole.billing.setupPaymentMandate(
-            $organization.$id,
-            $paymentMissingMandate.$id
-        );
+        const method = await sdk.forConsole.account.updatePaymentMethodMandateOptions({
+            paymentMethodId: $paymentMissingMandate.$id
+        });
         await confirmSetup(method.clientSecret, method.providerMethodId);
     }
 </script>

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[0].teamId,
+                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>

src/lib/components/billing/estimatedTotalBox.svelte

@@ -1,36 +1,37 @@
 <script lang="ts">
     import { InputChoice, InputNumber } from '$lib/elements/forms';
     import { formatCurrency } from '$lib/helpers/numbers';
-    import type { Coupon, Estimation } from '$lib/sdk/billing';
-    import { type Tier } from '$lib/stores/billing';
     import { Card, Divider, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { CreditsApplied } from '.';
     import { sdk } from '$lib/stores/sdk';
-    import { AppwriteException } from '@appwrite.io/console';
+    import { AppwriteException, BillingPlan, type Models } from '@appwrite.io/console';
     import DiscountsApplied from './discountsApplied.svelte';
 
-    export let billingPlan: Tier;
+    export let billingPlan: string;
     export let collaborators: string[];
-    export let couponData: Partial<Coupon>;
+    export let couponData: Partial<Models.Coupon>;
     export let billingBudget: number;
     export let fixedCoupon = false; // If true, the coupon cannot be removed
     export let isDowngrade = false;
     export let organizationId: string | undefined = undefined;
 
     let budgetEnabled = false;
-    let estimation: Estimation;
+    let estimation: Models.Estimation;
 
     async function getEstimate(
         billingPlan: string,
         collaborators: string[],
         couponId: string | undefined
     ) {
+        /* TODO: @itznotabug - temporary fix */
+        const billingPlanTyped = billingPlan as BillingPlan;
+
         try {
-            estimation = await sdk.forConsole.billing.estimationCreateOrganization(
-                billingPlan,
-                couponId === '' ? null : couponId,
-                collaborators ?? []
-            );
+            estimation = await sdk.forConsole.organizations.estimationCreateOrganization({
+                billingPlan: billingPlanTyped,
+                invites: collaborators ?? [],
+                couponId: couponId === '' ? null : couponId
+            });
         } catch (e) {
             if (e instanceof AppwriteException) {
                 if (
@@ -56,12 +57,12 @@
         couponId: string | undefined
     ) {
         try {
-            estimation = await sdk.forConsole.billing.estimationUpdatePlan(
+            estimation = await sdk.forConsole.organizations.estimationUpdatePlan({
                 organizationId,
-                billingPlan,
-                couponId && couponId.length > 0 ? couponId : null,
-                collaborators ?? []
-            );
+                billingPlan: billingPlan as BillingPlan,
+                invites: collaborators ?? [],
+                couponId: couponId && couponId.length > 0 ? couponId : null
+            });
         } catch (e) {
             if (e instanceof AppwriteException) {
                 if (

src/lib/components/billing/paymentBoxes.svelte

@@ -4,11 +4,11 @@
     import { CreditCardBrandImage } from '..';
     import { initializeStripe, unmountPaymentElement } from '$lib/stores/stripe';
     import { Badge, Card, Layout } from '@appwrite.io/pink-svelte';
-    import type { PaymentMethodData } from '$lib/sdk/billing';
     import type { PaymentMethod } from '@stripe/stripe-js';
     import StatePicker from './statePicker.svelte';
+    import type { Models } from '@appwrite.io/console';
 
-    export let methods: PaymentMethodData[];
+    export let methods: Array<Models.PaymentMethod>;
     export let group: string;
     export let name: string;
     export let defaultMethod: string = null;

src/lib/components/billing/paymentModal.svelte

@@ -13,19 +13,19 @@
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/state';
     import { Spinner } from '@appwrite.io/pink-svelte';
-    import type { PaymentMethod } from '@stripe/stripe-js';
+    import type { PaymentMethod as StripePaymentMethod } from '@stripe/stripe-js';
     import StatePicker from './statePicker.svelte';
-    import type { PaymentMethodData } from '$lib/sdk/billing';
+    import type { Models } from '@appwrite.io/console';
 
     export let show = false;
-    export let onCardSubmit: ((card: PaymentMethodData) => void) | null = null;
+    export let onCardSubmit: ((card: Models.PaymentMethod) => void) | null = null;
 
     let modal: FakeModal;
     let name: string;
     let state: string = '';
     let error: string = null;
     let showState: boolean = false;
-    let paymentMethod: PaymentMethod | null = null;
+    let paymentMethod: StripePaymentMethod | null = null;
 
     async function handleSubmit() {
         try {
@@ -47,15 +47,15 @@
 
             const card = await submitStripeCard(name, page?.params?.organization ?? null);
             if (card && Object.hasOwn(card, 'id')) {
-                if ((card as PaymentMethod).card?.country === 'US') {
-                    paymentMethod = card as PaymentMethod;
+                if ((card as StripePaymentMethod).card?.country === 'US') {
+                    paymentMethod = card as StripePaymentMethod;
                     showState = true;
                     return;
                 }
             }
             modal.closeModal();
             await invalidate(Dependencies.PAYMENT_METHODS);
-            onCardSubmit?.(card as PaymentMethodData);
+            onCardSubmit?.(card as Models.PaymentMethod);
             addNotification({
                 type: 'success',
                 message: 'A new payment method has been added to your account'