Billing V2 UI changes

Author: MananTank

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

@@ -13,7 +13,7 @@ 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;
 };

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

@@ -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();

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 { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
+import type { Team } from "../../@/api/team";
 
 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)/~/engine/(general)/create/page.tsx

@@ -4,7 +4,7 @@ import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { accountStatus, useAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { ConfirmEngineTierDialog } from "app/team/[team_slug]/(team)/~/engine/(general)/create/ConfirmEngineTierDialog";
 import { EngineTierCard } from "app/team/[team_slug]/(team)/~/engine/(general)/create/tier-card";
-import { LazyOnboardingBilling } from "components/onboarding/LazyOnboardingBilling";
+import { LazyAddPaymentMethod } from "components/onboarding/LazyOnboardingBilling";
 import { OnboardingModal } from "components/onboarding/Modal";
 import { THIRDWEB_API_HOST } from "constants/urls";
 import { useTrack } from "hooks/analytics/useTrack";
@@ -94,7 +94,7 @@ export default function Page() {
       )}
 
       <OnboardingModal isOpen={isBillingModalOpen}>
-        <LazyOnboardingBilling
+        <LazyAddPaymentMethod
           onSave={async () => {
             if (!selectedTier) {
               return;

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/BillingSettingsPage.tsx

@@ -0,0 +1,128 @@
+import type { Team } from "@/api/team";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import type {
+  Account,
+  UsageBillableByService,
+} from "@3rdweb-sdk/react/hooks/useApi";
+import { format } from "date-fns/format";
+import { CircleAlertIcon } from "lucide-react";
+import { ManageBillingButton } from "../../../../../../../../components/settings/Account/Billing/ManageButton";
+import { getValidTeamPlan } from "../../../../../../components/TeamHeader/getValidTeamPlan";
+
+export function PlanInfoCard(props: {
+  account: Account;
+  accountUsage: UsageBillableByService;
+  team: Team;
+}) {
+  const { account, accountUsage, team } = props;
+  const validPlan = getValidTeamPlan(team);
+  const isActualFreePlan = team.billingPlan === "free";
+  return (
+    <div className="rounded-lg border border-border bg-muted/50">
+      <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
+        <h3 className="font-semibold text-2xl capitalize tracking-tight">
+          {validPlan} Plan
+        </h3>
+
+        {isActualFreePlan && (
+          <div>
+            <ManageBillingButton
+              variant="outline"
+              account={account}
+              onlyRenderIfLink
+            />
+
+            <Button asChild variant="outline">
+              <TrackedLinkTW
+                category="account"
+                href="/pricing"
+                label="pricing-plans"
+                target="_blank"
+                className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground"
+              >
+                View Pricing
+              </TrackedLinkTW>
+            </Button>
+          </div>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="p-6 lg:p-6">
+        {isActualFreePlan ? (
+          <div className="flex flex-col items-center py-8 text-center max-sm:gap-4">
+            <CircleAlertIcon className="mb-3 text-muted-foreground lg:size-6" />
+            <p>Your plan includes a fixed amount of free usage</p>
+            <p>
+              To unlock additional usage and add team members, Upgrade your plan
+              to Starer or Growth
+            </p>
+          </div>
+        ) : (
+          <BillingInfo account={account} usage={accountUsage} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function BillingInfo({
+  account,
+  usage,
+}: {
+  account: Account;
+  usage: UsageBillableByService;
+}) {
+  if (
+    !account.currentBillingPeriodStartsAt ||
+    !account.currentBillingPeriodEndsAt
+  ) {
+    return null;
+  }
+
+  const totalUsd = getBillingAmountInUSD(usage);
+
+  return (
+    <div>
+      <div>
+        <h5 className="font-medium">Current Billing Cycle</h5>
+        <p className="text-muted-foreground">
+          {format(
+            new Date(account.currentBillingPeriodStartsAt),
+            "MMMM dd yyyy",
+          )}{" "}
+          -{" "}
+          {format(
+            new Date(account.currentBillingPeriodEndsAt),
+            "MMMM dd yyyy",
+          )}{" "}
+        </p>
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex items-center gap-2">
+        <h5 className="font-medium">Total Upcoming Bill</h5>
+        <p className="text-lg text-muted-foreground">{totalUsd}</p>
+      </div>
+    </div>
+  );
+}
+
+function getBillingAmountInUSD(usage: UsageBillableByService) {
+  let total = 0;
+
+  if (usage.billableUsd) {
+    for (const amount of Object.values(usage.billableUsd)) {
+      total += amount;
+    }
+  }
+
+  return new Intl.NumberFormat(undefined, {
+    style: "currency",
+    currency: "USD",
+  }).format(total);
+}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx

@@ -1,22 +1,38 @@
 import { getTeamBySlug } from "@/api/team";
-import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
-import { notFound } from "next/navigation";
-import { SettingsBillingPage } from "./BillingSettingsPage";
+import { redirect } from "next/navigation";
+import { Billing } from "../../../../../../../components/settings/Account/Billing";
+import { getAccount } from "../../../../../../account/settings/getAccount";
+import { getAccountUsage } from "../../usage/getAccountUsage";
 
 export default async function Page(props: {
   params: Promise<{
     team_slug: string;
   }>;
 }) {
-  const team = await getTeamBySlug((await props.params).team_slug);
+  const params = await props.params;
+
+  const account = await getAccount();
+  if (!account) {
+    redirect(
+      `/login?next=${encodeURIComponent(`/team/${params.team_slug}/settings/billing`)}`,
+    );
+  }
+
+  const team = await getTeamBySlug(params.team_slug);
 
   if (!team) {
-    notFound();
+    redirect("/team");
+  }
+
+  const accountUsage = await getAccountUsage();
+
+  if (!accountUsage) {
+    return (
+      <div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
+        Something went wrong. Please try again later.
+      </div>
+    );
   }
 
-  return (
-    <ChakraProviderSetup>
-      <SettingsBillingPage teamId={team.id} />
-    </ChakraProviderSetup>
-  );
+  return <Billing team={team} account={account} accountUsage={accountUsage} />;
 }