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/src/@/api/team-billing.ts

@@ -0,0 +1,41 @@
+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;
+}

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

@@ -33,3 +33,14 @@ 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://thirdweb-dev.com",
+  );
+
+  url.pathname = path;
+  return url;
+}

apps/dashboard/src/app/team/[team_slug]/(team)/subscribe/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.

apps/dashboard/src/app/team/[team_slug]/(team)/subscribe/[sku]/page.tsx

@@ -0,0 +1,55 @@
+import { getStripeCheckoutLink } from "@/api/team-billing";
+import { RedirectType, notFound, redirect } from "next/navigation";
+
+interface PageParams {
+  team_slug: string;
+  sku: string;
+}
+
+interface PageProps {
+  params: Promise<PageParams>;
+}
+
+export default async function TeamProductSkuSubscriptionRedirect(
+  props: PageProps,
+) {
+  const params = await props.params;
+  // get the stripe checkout link for the team + sku from the API
+  // this returns a status code and a link (if success)
+  // 200: success
+  // 400: invalid SKU
+  // 401: user not authenticated
+  // 403: user not allowed to subscribe (not admin)
+  // 500: something random else went wrong
+  const { link, status } = await getStripeCheckoutLink(
+    params.team_slug,
+    params.sku,
+  );
+
+  console.log("sku", params.sku);
+
+  console.log("status", status);
+
+  if (link) {
+    // we want to REPLACE so when the user navigates BACK the do not end up back here but on the previous page
+    redirect(link, RedirectType.replace);
+  }
+
+  switch (status) {
+    case 400: {
+      return <div>Invalid SKU: {params.sku}</div>;
+    }
+    case 401: {
+      return <div>User not authenticated</div>;
+    }
+    case 403: {
+      return <div>User not allowed to subscribe</div>;
+    }
+
+    // default case
+    default: {
+      // todo handle this better
+      notFound();
+    }
+  }
+}