integrate billing v2 init

Author: jnsdls

apps/dashboard/next.config.ts

@@ -115,6 +115,7 @@ const SENTRY_OPTIONS: SentryBuildOptions = {
 };
 
 const baseNextConfig: NextConfig = {
+  serverExternalPackages: ["pino-pretty"],
   async headers() {
     return [
       {

apps/dashboard/package.json

@@ -48,8 +48,6 @@
     "@radix-ui/react-tooltip": "1.1.4",
     "@sentry/nextjs": "8.38.0",
     "@shazow/whatsabi": "^0.16.0",
-    "@stripe/react-stripe-js": "^2.8.1",
-    "@stripe/stripe-js": "^3.5.0",
     "@tanstack/react-query": "5.60.2",
     "@tanstack/react-table": "^8.17.3",
     "@thirdweb-dev/service-utils": "workspace:*",

apps/dashboard/src/@/api/team-billing.ts

@@ -0,0 +1,78 @@
+import "server-only";
+import { API_SERVER_URL, getAbsoluteUrlFromPath } from "@/constants/env";
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+
+export async function getStripeCheckoutLink(slug: string, sku: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      status: 401,
+      link: null,
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${slug}/checkout/create-link`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        sku: decodeURIComponent(sku),
+        redirectTo: getAbsoluteUrlFromPath(
+          `/team/${slug}/~/settings/billing`,
+        ).toString(),
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (res.ok) {
+    return {
+      status: 200,
+      link: (await res.json())?.result as string,
+    } as const;
+  }
+  return {
+    status: res.status,
+    link: null,
+  } as const;
+}
+
+export async function getStripeBillingPortalLink(slug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return {
+      status: 401,
+      link: null,
+    };
+  }
+
+  const res = await fetch(
+    `${API_SERVER_URL}/v1/teams/${slug}/checkout/create-session-link`,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        redirectTo: getAbsoluteUrlFromPath(
+          `/team/${slug}/~/settings/billing`,
+        ).toString(),
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+  if (res.ok) {
+    return {
+      status: 200,
+      link: (await res.json())?.result as string,
+    } as const;
+  }
+  return {
+    status: res.status,
+    link: null,
+  } as const;
+}

apps/dashboard/src/@/api/team-subscription.ts

@@ -0,0 +1,107 @@
+import { getAuthToken } from "../../app/api/lib/getAuthToken";
+import { API_SERVER_URL } from "../constants/env";
+
+// keep in line with product SKUs in the backend
+type ProductSKU =
+  | "plan:starter"
+  | "plan:growth"
+  | "plan:custom"
+  | "product:ecosystem_wallets"
+  | "product:engine_standard"
+  | "product:engine_premium"
+  | "usage:storage"
+  | "usage:in_app_wallet"
+  | "usage:aa_sponsorship"
+  | "usage:aa_sponsorship_op_grant"
+  | null;
+
+type InvoiceLine = {
+  // amount for this line item
+  amount: number;
+  // statement descriptor
+  description: string | null;
+  // the thirdweb product sku or null if it is not recognized
+  thirdwebSku: ProductSKU | null;
+};
+
+type Invoice = {
+  // total amount excluding tax
+  amount: number | null;
+  // the ISO currency code (e.g. USD)
+  currency: string;
+  // the line items on the invoice
+  lines: InvoiceLine[];
+};
+
+export type TeamSubscription = {
+  id: string;
+  type: "PLAN" | "USAGE" | "PLAN_ADD_ON" | "PRODUCT";
+  status:
+    | "incomplete"
+    | "incomplete_expired"
+    | "trialing"
+    | "active"
+    | "past_due"
+    | "canceled"
+    | "unpaid"
+    | "paused";
+  currentPeriodStart: string;
+  currentPeriodEnd: string;
+  trialStart: string | null;
+  trialEnd: string | null;
+  upcomingInvoice: Invoice;
+};
+
+export async function getTeamSubscriptions(slug: string) {
+  const token = await getAuthToken();
+
+  if (!token) {
+    return null;
+  }
+
+  const teamRes = await fetch(
+    `${API_SERVER_URL}/v1/teams/${slug}/subscriptions`,
+    {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    },
+  );
+
+  if (teamRes.ok) {
+    return (await teamRes.json())?.result as TeamSubscription[];
+  }
+  return null;
+}
+
+// util fn:
+
+export function parseThirdwebSKU(sku: ProductSKU) {
+  if (!sku) {
+    return null;
+  }
+  switch (sku) {
+    case "plan:starter":
+      return "Starter Plan";
+    case "plan:growth":
+      return "Growth Plan";
+    case "plan:custom":
+      return "Custom Plan";
+    case "product:ecosystem_wallets":
+      return "Ecosystem Wallets";
+    case "product:engine_standard":
+      return "Engine Standard";
+    case "product:engine_premium":
+      return "Engine Premium";
+    case "usage:storage":
+      return "Storage";
+    case "usage:in_app_wallet":
+      return "In-App Wallet";
+    case "usage:aa_sponsorship":
+      return "AA Sponsorship";
+    case "usage:aa_sponsorship_op_grant":
+      return "AA Sponsorship Op Grant";
+    default:
+      return null;
+  }
+}

apps/dashboard/src/@/api/team.ts

@@ -13,9 +13,10 @@ export type Team = {
   deletedAt?: string;
   bannedAt?: string;
   image?: string;
-  billingPlan: "pro" | "growth" | "free";
+  billingPlan: "pro" | "growth" | "free" | "starter";
   billingStatus: "validPayment" | (string & {}) | null;
   billingEmail: string | null;
+  growthTrialEligible: boolean | null;
 };
 
 export async function getTeamBySlug(slug: string) {

apps/dashboard/src/@/constants/env.ts

@@ -33,3 +33,16 @@ export const THIRDWEB_ENGINE_URL = process.env.THIRDWEB_ENGINE_URL;
 export const THIRDWEB_ACCESS_TOKEN = process.env.THIRDWEB_ACCESS_TOKEN;
 // Comma-separated list of chain IDs to disable faucet for.
 export const DISABLE_FAUCET_CHAIN_IDS = process.env.DISABLE_FAUCET_CHAIN_IDS;
+
+export function getAbsoluteUrlFromPath(path: string) {
+  const url = new URL(
+    isProd
+      ? "https://thirdweb.com"
+      : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
+          ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
+          : "http://localhost:3000") || "https://thirdweb-dev.com",
+  );
+
+  url.pathname = path;
+  return url;
+}

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -30,7 +30,7 @@ export const accountPlan = {
 } as const;
 
 type AccountStatus = (typeof accountStatus)[keyof typeof accountStatus];
-export type AccountPlan = (typeof accountPlan)[keyof typeof accountPlan];
+type AccountPlan = (typeof accountPlan)[keyof typeof accountPlan];
 
 export type AuthorizedWallet = {
   id: string;
@@ -498,51 +498,6 @@ export function useUpdateAccount() {
   });
 }
 
-export function useUpdateAccountPlan(waitForWebhook?: boolean) {
-  const { user } = useLoggedInUser();
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (input: { plan: string; feedback?: string }) => {
-      invariant(user?.address, "walletAddress is required");
-
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/plan`, {
-        method: "PUT",
-
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(input),
-      });
-
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      // Wait for account plan to update via stripe webhook
-      // TODO: find a better way to notify the client that the plan has been updated
-      if (waitForWebhook) {
-        await new Promise((resolve) => setTimeout(resolve, 1000 * 10));
-      }
-
-      return json.data;
-    },
-    onSuccess: async () => {
-      return Promise.all([
-        // invalidate usage data as limits are different
-        queryClient.invalidateQueries({
-          queryKey: accountKeys.me(user?.address as string),
-        }),
-        queryClient.invalidateQueries({
-          queryKey: accountKeys.usage(user?.address as string),
-        }),
-      ]);
-    },
-  });
-}
-
 export function useUpdateNotifications() {
   const { user } = useLoggedInUser();
   const queryClient = useQueryClient();
@@ -681,40 +636,6 @@ export function useResendEmailConfirmation() {
   });
 }
 
-export function useCreatePaymentMethod() {
-  const { user } = useLoggedInUser();
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (paymentMethodId: string) => {
-      invariant(user?.address, "walletAddress is required");
-
-      const res = await fetch(`${THIRDWEB_API_HOST}/v1/account/paymentMethod`, {
-        method: "POST",
-
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          paymentMethodId,
-        }),
-      });
-      const json = await res.json();
-
-      if (json.error) {
-        throw new Error(json.error.message);
-      }
-
-      return json.data;
-    },
-    onSuccess: () => {
-      return queryClient.invalidateQueries({
-        queryKey: accountKeys.me(user?.address as string),
-      });
-    },
-  });
-}
-
 export function useApiKeys() {
   const { user, isLoggedIn } = useLoggedInUser();
   return useQuery({

apps/dashboard/src/app/account/settings/getAccount.ts

@@ -4,11 +4,8 @@ import { getAuthToken } from "../../api/lib/getAuthToken";
 
 export async function getAccount() {
   const authToken = await getAuthToken();
-  const apiServerURL = new URL(API_SERVER_URL);
 
-  apiServerURL.pathname = "/v1/account/me";
-
-  const res = await fetch(apiServerURL, {
+  const res = await fetch(`${API_SERVER_URL}/v1/account/me`, {
     method: "GET",
     headers: {
       Authorization: `Bearer ${authToken}`,

apps/dashboard/src/app/components/TeamPlanBadge.tsx

@@ -1,14 +1,15 @@
+import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
 export function TeamPlanBadge(props: {
-  plan: "free" | "growth" | "pro";
+  plan: Team["billingPlan"];
   className?: string;
 }) {
   return (
     <Badge
       variant={
-        props.plan === "free"
+        props.plan === "free" || props.plan === "starter"
           ? "secondary"
           : props.plan === "growth"
             ? "success"

apps/dashboard/src/app/team/[team_slug]/(team)/billing/README.md

@@ -0,0 +1,3 @@
+Note: this path is meant specifically for subscribing to a plan or product, it renders no UI and instead will redirect the user to stripe UI to complete the subscription process.
+
+Why have this at all? Because this way we can have a public link that will (after login complete) redirect the user to the correct subscrtiption page.