[TOOL-3969] Dashboard: Update Plans, Add cancel plan and related changes

Author: MananTank

apps/dashboard/src/@/components/blocks/pricing-card.tsx

@@ -3,33 +3,36 @@ import type { Team } from "@/api/team";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
-import { CheckIcon, CircleAlertIcon, CircleDollarSignIcon } from "lucide-react";
+import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
+import Link from "next/link";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
+import { useTrack } from "../../../hooks/analytics/useTrack";
 import { remainingDays } from "../../../utils/date-utils";
 import type { GetBillingCheckoutUrlAction } from "../../actions/billing";
+import type { ProductSKU } from "../../lib/billing";
 import { CheckoutButton } from "../billing";
 
-type ButtonProps = React.ComponentProps<typeof Button>;
-
-const PRO_CONTACT_US_URL =
-  "https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro";
+type PricingCardCta = {
+  hint?: string;
+  title: string;
+  variant?: "outline" | "default";
+  onClick?: () => void;
+} & (
+  | {
+      type: "link";
+      href: string;
+    }
+  | {
+      type: "checkout";
+    }
+);
 
 type PricingCardProps = {
   teamSlug: string;
-  billingPlan: Exclude<Team["billingPlan"], "free">;
-  cta?: {
-    hint?: string;
-    title: string;
-    tracking: {
-      category: string;
-      label?: string;
-    };
-    variant?: ButtonProps["variant"];
-    onClick?: () => void;
-  };
+  billingPlan: keyof typeof TEAM_PLANS;
+  cta?: PricingCardCta;
   ctaHint?: string;
   highlighted?: boolean;
   current?: boolean;
@@ -49,13 +52,25 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
 
+  const trackEvent = useTrack();
   const remainingTrialDays =
     (activeTrialEndsAt ? remainingDays(activeTrialEndsAt) : 0) || 0;
 
+  const handleCTAClick = () => {
+    cta?.onClick?.();
+    trackEvent({
+      category: "account",
+      label: `${billingPlan}Plan`,
+      action: "click",
+    });
+  };
+
+  const ctaVariant = cta?.variant || "outline";
+
   return (
     <div
       className={cn(
-        "z-10 flex w-full flex-col gap-6 rounded-xl border border-border bg-card p-4 md:p-6",
+        "z-10 flex w-full flex-col gap-4 rounded-xl border border-border bg-card p-4",
         current && "border-blue-500",
         highlighted && "border-active-border",
       )}
@@ -71,44 +86,27 @@ export const PricingCard: React.FC<PricingCardProps> = ({
       <div className="flex flex-col gap-5">
         {/* Title + Desc */}
         <div>
-          <div className="mb-2 flex flex-row items-center gap-2">
+          <div className="mb-1 flex flex-row items-center gap-3">
             <h3 className="font-semibold text-2xl capitalize tracking-tight">
               {plan.title}
             </h3>
             {current && <Badge className="capitalize">Current plan</Badge>}
           </div>
-          <p className="max-w-[320px] text-muted-foreground">
+          <p className="max-w-[320px] text-muted-foreground text-sm">
             {plan.description}
           </p>
         </div>
 
         {/* Price */}
         <div className="flex flex-col gap-0.5">
           <div className="flex items-center gap-2">
-            <span className="font-semibold text-3xl text-foreground tracking-tight">
+            <span className="font-semibold text-2xl text-foreground tracking-tight">
               ${plan.price}
             </span>
 
             {!isCustomPrice && (
               <span className="text-muted-foreground">/ month</span>
             )}
-
-            {billingPlan === "starter" && (
-              <ToolTipLabel
-                contentClassName="max-w-[320px]"
-                label="We will place a temporary hold of $25 to verify your card, this will be immediately released back to you after verification."
-              >
-                <Button
-                  asChild
-                  variant="ghost"
-                  className="h-auto w-auto p-1 text-muted-foreground hover:text-foreground"
-                >
-                  <div>
-                    <CircleAlertIcon className="size-5 shrink-0" />
-                  </div>
-                </Button>
-              </ToolTipLabel>
-            )}
           </div>
 
           {remainingTrialDays > 0 && (
@@ -124,7 +122,7 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
       <div className="flex grow flex-col items-start gap-2 text-foreground">
         {plan.subTitle && (
-          <p className="font-medium text-foreground">{plan.subTitle}</p>
+          <p className="font-medium text-foreground text-sm">{plan.subTitle}</p>
         )}
 
         {plan.features.map((f) => (
@@ -134,29 +132,30 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
       {cta && (
         <div className="flex flex-col gap-3">
-          {billingPlan !== "pro" ? (
+          {billingPlanToSkuMap[billingPlan] && cta.type === "checkout" && (
             <CheckoutButton
               buttonProps={{
-                variant: cta.variant || "outline",
-                className: "gap-2",
-                onClick: cta.onClick,
+                variant: ctaVariant,
+                className: cn(ctaVariant === "outline" && "bg-background"),
+                onClick: handleCTAClick,
               }}
               teamSlug={teamSlug}
-              sku={billingPlan === "starter" ? "plan:starter" : "plan:growth"}
+              sku={billingPlanToSkuMap[billingPlan]}
               getBillingCheckoutUrl={getBillingCheckoutUrl}
             >
               {cta.title}
             </CheckoutButton>
-          ) : (
-            <Button variant={cta.variant || "outline"} asChild>
-              <TrackedLinkTW
-                href={PRO_CONTACT_US_URL}
-                label={cta.tracking?.label}
-                category={cta.tracking?.category}
-                target="_blank"
-              >
+          )}
+
+          {cta.type === "link" && (
+            <Button
+              className={cn(ctaVariant === "outline" && "bg-background")}
+              variant={ctaVariant}
+              asChild
+            >
+              <Link href={cta.href} target="_blank" onClick={handleCTAClick}>
                 {cta.title}
-              </TrackedLinkTW>
+              </Link>
             </Button>
           )}
 
@@ -171,6 +170,19 @@ export const PricingCard: React.FC<PricingCardProps> = ({
   );
 };
 
+const billingPlanToSkuMap: Record<Team["billingPlan"], ProductSKU | undefined> =
+  {
+    starter: "plan:starter",
+    growth: "plan:growth",
+    accelerate: "plan:accelerate",
+    scale: "plan:scale",
+    // we can't render checkout buttons for these plans:
+    pro: undefined,
+    free: undefined,
+    growth_legacy: undefined,
+    starter_legacy: undefined,
+  };
+
 type FeatureItemProps = {
   text: string | string[];
 };

apps/dashboard/src/@/lib/billing.ts

@@ -1,8 +1,10 @@
 // keep in line with product SKUs in the backend
 export type ProductSKU =
-  | "plan:starter"
+  | "plan:starter" // this will be removed later
   | "plan:growth"
   | "plan:custom"
+  | "plan:accelerate"
+  | "plan:scale"
   | "product:ecosystem_wallets"
   | "product:engine_standard"
   | "product:engine_premium"

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

@@ -1,23 +1,45 @@
 import type { Team } from "@/api/team";
-import { Badge } from "@/components/ui/badge";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 
+const teamPlanToBadgeVariant: Record<
+  Team["billingPlan"],
+  BadgeProps["variant"]
+> = {
+  // gray
+  free: "secondary",
+  starter: "secondary",
+  // yellow
+  starter_legacy: "warning",
+  growth_legacy: "warning",
+  // green
+  accelerate: "success",
+  growth: "success",
+  scale: "success",
+  // blue
+  pro: "default",
+};
+
+function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
+  if (plan === "growth_legacy") {
+    return "Growth - Legacy";
+  }
+  if (plan === "starter_legacy") {
+    return "Starter - Legacy";
+  }
+  return plan;
+}
+
 export function TeamPlanBadge(props: {
   plan: Team["billingPlan"];
   className?: string;
 }) {
   return (
     <Badge
-      variant={
-        props.plan === "free" || props.plan === "starter"
-          ? "secondary"
-          : props.plan === "growth"
-            ? "success"
-            : "default"
-      }
+      variant={teamPlanToBadgeVariant[props.plan]}
       className={cn("px-1.5 capitalize", props.className)}
     >
-      {props.plan}
+      {getTeamPlanBadgeLabel(props.plan)}
     </Badge>
   );
 }

apps/dashboard/src/app/login/onboarding/team-onboarding/InviteTeamMembers.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import type { Team } from "../../../../@/api/team";
 import { teamStub } from "../../../../stories/stubs";
 import { storybookLog } from "../../../../stories/utils";
 import { TeamOnboardingLayout } from "../onboarding-layout";
@@ -36,8 +37,26 @@ export const GrowthPlan: Story = {
   },
 };
 
+export const AcceleratePlan: Story = {
+  args: {
+    plan: "accelerate",
+  },
+};
+
+export const ScalePlan: Story = {
+  args: {
+    plan: "scale",
+  },
+};
+
+export const ProPlan: Story = {
+  args: {
+    plan: "pro",
+  },
+};
+
 function Story(props: {
-  plan: "free" | "growth" | "starter";
+  plan: Team["billingPlan"];
 }) {
   return (
     <TeamOnboardingLayout currentStep={2}>