isLegacyBusinessPlan

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/plan-usage.tsx

@@ -25,6 +25,7 @@ import {
   INFINITY_NUMBER,
   nFormatter,
 } from "@dub/utils";
+import { isLegacyBusinessPlan } from "@dub/utils/src/constants/pricing";
 import NumberFlow from "@number-flow/react";
 import Link from "next/link";
 import { CSSProperties, useMemo } from "react";
@@ -112,7 +113,12 @@ export default function PlanUsage() {
     <div className="rounded-lg border border-neutral-200 bg-white">
       <div className="flex flex-col items-start justify-between gap-y-4 p-6 md:px-8 lg:flex-row">
         <div>
-          <h2 className="text-xl font-medium">{capitalize(plan)} Plan</h2>
+          <h2 className="text-xl font-medium">
+            {plan && isLegacyBusinessPlan(plan, payoutsLimit ?? 0)
+              ? "Business (Legacy)"
+              : capitalize(plan)}{" "}
+            Plan
+          </h2>
           {billingStart && billingEnd && (
             <p className="mt-1.5 text-balance text-sm font-medium leading-normal text-neutral-700">
               <>

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/settings/billing/upgrade/page-client.tsx

@@ -15,6 +15,7 @@ import {
   Users2,
 } from "@dub/ui";
 import { cn, isDowngradePlan, PLAN_COMPARE_FEATURES, PLANS } from "@dub/utils";
+import { isLegacyBusinessPlan } from "@dub/utils/src/constants/pricing";
 import NumberFlow from "@number-flow/react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "next/link";
@@ -38,7 +39,7 @@ const plans = ["Pro", "Business", "Advanced", "Enterprise"].map(
 );
 
 export function WorkspaceBillingUpgradePageClient() {
-  const { slug, plan: currentPlan, stripeId } = useWorkspace();
+  const { slug, plan: currentPlan, stripeId, payoutsLimit } = useWorkspace();
 
   const [mobilePlanIndex, setMobilePlanIndex] = useState(0);
   const [period, setPeriod] = useState<"monthly" | "yearly">("yearly");
@@ -91,8 +92,13 @@ export function WorkspaceBillingUpgradePageClient() {
               {plans.map((plan, idx) => {
                 // disable upgrade button if user has a Stripe ID and is on the current plan
                 // (if there's no stripe id, they could be on a free trial so they should be able to upgrade)
+                // edge case:
+                //    if the user is on the business plan and has a payout limit of 0,
+                //    it means they're on the legacy business plan – prompt them to upgrade to the new business plan
                 const disableCurrentPlan = Boolean(
-                  stripeId && plan.name.toLowerCase() === currentPlan,
+                  stripeId &&
+                    plan.name.toLowerCase() === currentPlan &&
+                    !isLegacyBusinessPlan(currentPlan, payoutsLimit ?? 0),
                 );
 
                 // show downgrade button if user has a stripe id and is on the current plan

apps/web/ui/layout/sidebar/workspace-dropdown.tsx

@@ -11,6 +11,7 @@ import {
 } from "@dub/ui";
 import { Check2, Gear, Plus, UserPlus } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
+import { isLegacyBusinessPlan } from "@dub/utils/src/constants/pricing";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -45,6 +46,12 @@ export function WorkspaceDropdown() {
     if (slug && workspaces && selectedWorkspace) {
       return {
         ...selectedWorkspace,
+        plan: isLegacyBusinessPlan(
+          selectedWorkspace.plan,
+          selectedWorkspace.payoutsLimit ?? 0,
+        )
+          ? "business (legacy)"
+          : selectedWorkspace.plan,
         image:
           selectedWorkspace.logo ||
           `https://avatar.vercel.sh/${selectedWorkspace.id}`,

packages/utils/src/constants/pricing.tsx

@@ -370,3 +370,6 @@ export const isDowngradePlan = (currentPlan: string, newPlan: string) => {
   );
   return currentPlanIndex > newPlanIndex;
 };
+
+export const isLegacyBusinessPlan = (plan: string, payoutsLimit: number) =>
+  plan === "business" && payoutsLimit === 0;