[Dashboard] update pricing plans and UI components (#7208)

jnsdls · jnsdls · commit 7c95211b9882 · 2025-05-30T00:16:27.000Z
# Update Pricing Plans and UI

This PR updates our pricing plans and UI to better align with our new pricing strategy:

- Replaced "Accelerate" plan with "Pro" plan
- Updated pricing: Starter ($5), Growth ($99), Scale ($499), Pro ($1499)
- Added "Starting at" label for Pro plan
- Updated feature lists across all plans
- Changed pricing card UI to use `DollarSignIcon` instead of `CircleDollarSignIcon`
- Added locale formatting for price display
- Updated team onboarding flow to show Growth, Scale and Pro plans
- Removed Cloud Hosted Engine section from Engine Footer Card
- Removed standalone Pro Card from pricing page

These changes ensure our pricing structure is more intuitive and better reflects the value of each tier.

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR focuses on updating billing plans and their associated features in the application. It introduces a new `pro` plan, modifies existing plans, and adjusts the UI components to reflect these changes.

### Detailed summary
- Added `"plan:pro"` to billing plans.
- Updated comments from "accelerate" to "growth" for clarity.
- Replaced `CheckIcon` with `DollarSignIcon` in pricing components.
- Adjusted pricing for `starter` (from $9 to $5) and `growth` (from $79 to $99).
- Renamed `accelerate` plan to `scale` with a new price of $499.
- Introduced `pro` plan priced at $1499 with specific features.
- Adjusted invite permissions to restrict `starter` plan.
- Updated billing plan checks throughout components to include new plan logic.
- Removed deprecated `CloudHostedEngineSection` component.

&gt; ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

&lt;!-- end pr-codex --&gt;

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai --&gt;

## Summary by CodeRabbit

- **New Features**
  - Introduced a new "pro" billing plan with updated pricing, features, and dedicated account executive support.
  - Added "scale" plan as a replacement for the previous "accelerate" plan, featuring expanded infrastructure and support options.

- **Enhancements**
  - Improved pricing display formatting for better readability.
  - Updated plan descriptions and feature lists for clarity and consistency across all plans.
  - Refined plan selection and upgrade prompts to reflect the new plan structure.

- **Bug Fixes**
  - Corrected plan requirement messaging for editing SMS countries to accurately reference the "growth" plan.

- **Removals**
  - Removed the "accelerate" and "starter" plans from UI and plan selection.
  - Eliminated the ProCard component and legacy usage credit mentions.

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/apps/dashboard/src/@/components/blocks/pricing-card.tsx b/apps/dashboard/src/@/components/blocks/pricing-card.tsx
@@ -4,7 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
-import { CheckIcon, CircleDollarSignIcon } from "lucide-react";
+import { CheckIcon, DollarSignIcon } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
 import { TEAM_PLANS } from "utils/pricing";
@@ -105,9 +105,12 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 
         {/* Price */}
         <div className="flex flex-col gap-0.5">
+          {plan.isStartingPriceOnly && (
+            <span className="text-muted-foreground text-xs">Starting at</span>
+          )}
           <div className="flex items-center gap-2">
             <span className="font-semibold text-2xl text-foreground tracking-tight">
-              ${plan.price}
+              ${plan.price.toLocaleString()}
             </span>
 
             {!isCustomPrice && (
@@ -183,10 +186,10 @@ const billingPlanToSkuMap: Record<Team["billingPlan"], ProductSKU | undefined> =
   {
     starter: "plan:starter",
     growth: "plan:growth",
-    accelerate: "plan:accelerate",
     scale: "plan:scale",
+    pro: "plan:pro",
     // we can't render checkout buttons for these plans:
-    pro: undefined,
+    accelerate: undefined,
     free: undefined,
     growth_legacy: undefined,
     starter_legacy: undefined,
@@ -201,16 +204,19 @@ function FeatureItem({ text }: FeatureItemProps) {
 
   return (
     <div className="flex items-center gap-2 text-sm">
-      <CheckIcon className="size-4 shrink-0 text-green-500" />
+      {Array.isArray(text) ? (
+        <ToolTipLabel label={text[1]}>
+          <DollarSignIcon className="size-4 shrink-0 text-green-500" />
+        </ToolTipLabel>
+      ) : (
+        <CheckIcon className="size-4 shrink-0 text-green-500" />
+      )}
       {Array.isArray(text) ? (
         <div className="flex items-center gap-2">
           <p className="text-muted-foreground">
             {titleStr}{" "}
             <span className="text-muted-foreground md:hidden">{text[1]}</span>
           </p>
-          <ToolTipLabel label={text[1]}>
-            <CircleDollarSignIcon className="hidden size-4 text-muted-foreground md:block" />
-          </ToolTipLabel>
         </div>
       ) : (
         <p className="text-muted-foreground">{titleStr}</p>
diff --git a/apps/dashboard/src/@/lib/billing.ts b/apps/dashboard/src/@/lib/billing.ts
@@ -5,6 +5,7 @@ export type ProductSKU =
   | "plan:custom"
   | "plan:accelerate"
   | "plan:scale"
+  | "plan:pro"
   | "product:ecosystem_wallets"
   | "product:engine_standard"
   | "product:engine_premium"
diff --git a/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.tsx b/apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.tsx
@@ -97,7 +97,8 @@ export function InviteTeamMembersUI(props: {
         recommendedMembers={[]}
         customCTASection={
           <div className="flex gap-3">
-            {props.team.billingPlan === "free" && (
+            {(props.team.billingPlan === "free" ||
+              props.team.billingPlan === "starter") && (
               <Button
                 size="sm"
                 variant="default"
@@ -154,30 +155,8 @@ function InviteModalContent(props: {
   getTeam: () => Promise<Team>;
   teamId: string;
 }) {
-  const [planToShow, setPlanToShow] = useState<
-    "starter" | "growth" | "accelerate" | "scale"
-  >("growth");
-
-  const starterPlan = (
-    <PricingCard
-      billingPlan="starter"
-      billingStatus={props.billingStatus}
-      teamSlug={props.teamSlug}
-      cta={{
-        label: "Get Started",
-        type: "checkout",
-        onClick() {
-          props.trackEvent({
-            category: "teamOnboarding",
-            action: "upgradePlan",
-            label: "attempt",
-            plan: "starter",
-          });
-        },
-      }}
-      getTeam={props.getTeam}
-      teamId={props.teamId}
-    />
+  const [planToShow, setPlanToShow] = useState<"growth" | "scale" | "pro">(
+    "growth",
   );
 
   const growthPlan = (
@@ -203,9 +182,9 @@ function InviteModalContent(props: {
     />
   );
 
-  const acceleratePlan = (
+  const scalePlan = (
     <PricingCard
-      billingPlan="accelerate"
+      billingPlan="scale"
       billingStatus={props.billingStatus}
       teamSlug={props.teamSlug}
       cta={{
@@ -216,7 +195,7 @@ function InviteModalContent(props: {
             category: "teamOnboarding",
             action: "upgradePlan",
             label: "attempt",
-            plan: "accelerate",
+            plan: "scale",
           });
         },
       }}
@@ -225,9 +204,9 @@ function InviteModalContent(props: {
     />
   );
 
-  const scalePlan = (
+  const proPlan = (
     <PricingCard
-      billingPlan="scale"
+      billingPlan="pro"
       billingStatus={props.billingStatus}
       teamSlug={props.teamSlug}
       cta={{
@@ -238,7 +217,7 @@ function InviteModalContent(props: {
             category: "teamOnboarding",
             action: "upgradePlan",
             label: "attempt",
-            plan: "scale",
+            plan: "pro",
           });
         },
       }}
@@ -266,43 +245,36 @@ function InviteModalContent(props: {
 
       {/* Desktop */}
       <div className="hidden grid-cols-1 gap-6 md:grid-cols-4 md:gap-4 lg:grid">
-        {starterPlan}
         {growthPlan}
-        {acceleratePlan}
         {scalePlan}
+        {proPlan}
       </div>
 
       {/* Mobile */}
       <div className="lg:hidden">
         <TabButtons
           tabs={[
-            {
-              name: "Starter",
-              onClick: () => setPlanToShow("starter"),
-              isActive: planToShow === "starter",
-            },
             {
               name: "Growth",
               onClick: () => setPlanToShow("growth"),
               isActive: planToShow === "growth",
             },
-            {
-              name: "Accelerate",
-              onClick: () => setPlanToShow("accelerate"),
-              isActive: planToShow === "accelerate",
-            },
             {
               name: "Scale",
               onClick: () => setPlanToShow("scale"),
               isActive: planToShow === "scale",
             },
+            {
+              name: "Pro",
+              onClick: () => setPlanToShow("pro"),
+              isActive: planToShow === "pro",
+            },
           ]}
         />
         <div className="h-4" />
-        {planToShow === "starter" && starterPlan}
         {planToShow === "growth" && growthPlan}
-        {planToShow === "accelerate" && acceleratePlan}
         {planToShow === "scale" && scalePlan}
+        {planToShow === "pro" && proPlan}
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.tsx
@@ -85,7 +85,10 @@ export function InviteSection(props: {
   let bottomSection: React.ReactNode = null;
   const maxAllowedInvitesAtOnce = 10;
   // invites are enabled if user has edit permission and team plan is not "free"
-  const inviteEnabled = teamPlan !== "free" && props.userHasEditPermission;
+  const inviteEnabled =
+    teamPlan !== "free" &&
+    teamPlan !== "starter" &&
+    props.userHasEditPermission;
 
   const form = useForm<InviteFormValues>({
     resolver: zodResolver(inviteFormSchema),
@@ -108,7 +111,7 @@ export function InviteSection(props: {
     },
   });
 
-  if (teamPlan === "free") {
+  if (teamPlan === "free" || teamPlan === "starter") {
     bottomSection = (
       <div className="lg:px6 flex items-center justify-between gap-4 border-border border-t px-4 py-4">
         <p className="text-muted-foreground text-sm">
@@ -127,7 +130,7 @@ export function InviteSection(props: {
         ) : (
           <Button variant="outline" size="sm" asChild>
             <Link
-              href={`/team/${props.team.slug}/~/settings/billing`}
+              href={`/team/${props.team.slug}/~/settings/billing?showPlans=true&highlight=growth`}
               className="gap-2"
             >
               Upgrade
@@ -147,29 +150,16 @@ export function InviteSection(props: {
   } else {
     bottomSection = (
       <div className="flex items-center border-border border-t px-4 py-4 lg:justify-between lg:px-6">
-        {teamPlan === "pro" ? (
-          <p className="text-muted-foreground text-sm">
-            Team members are billed according to your plan.{" "}
-            <Link
-              href="https://meetings.hubspot.com/sales-thirdweb/thirdweb-pro"
-              target="_blank"
-              className="text-link-foreground hover:text-foreground"
-            >
-              Reach out to sales <ExternalLinkIcon className="inline size-3" />.
-            </Link>
-          </p>
-        ) : (
-          <p className="text-muted-foreground text-sm">
-            Team members are billed according to your plan.{" "}
-            <Link
-              href="https://thirdweb.com/pricing"
-              target="_blank"
-              className="text-link-foreground hover:text-foreground"
-            >
-              View pricing <ExternalLinkIcon className="inline size-3" />
-            </Link>
-          </p>
-        )}
+        <p className="text-muted-foreground text-sm">
+          Team members are billed according to your plan.{" "}
+          <Link
+            href="https://thirdweb.com/pricing"
+            target="_blank"
+            className="text-link-foreground hover:text-foreground"
+          >
+            View pricing <ExternalLinkIcon className="inline size-3" />
+          </Link>
+        </p>
 
         <div className="flex gap-3">
           {!props.shouldHideInviteButton && (
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(general)/_components.tsx
@@ -1,9 +1,6 @@
 import type { Team } from "@/api/team";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
-import { PRO_CONTACT_US_URL } from "constants/pro";
 import { ArrowRightIcon, DownloadIcon, ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 
@@ -77,91 +74,13 @@ function EngineInfoSection(props: { team_slug: string; project_slug: string }) {
   );
 }
 
-function CloudHostedEngineSection(props: {
-  teamPlan: Exclude<Team["billingPlan"], "accelerate" | "scale">;
-  teamSlug: string;
-}) {
-  return (
-    <div className="flex flex-col">
-      <h3 className="mb-0.5 font-semibold text-lg tracking-tight">
-        Get Managed Engine
-      </h3>
-
-      {props.teamPlan !== "pro" ? (
-        <div>
-          <p className="text-muted-foreground text-sm">
-            Upgrade your plan to{" "}
-            <UnderlineLink href="/pricing" target="_blank">
-              Accelerate
-            </UnderlineLink>{" "}
-            or{" "}
-            <UnderlineLink href="/pricing" target="_blank">
-              Scale
-            </UnderlineLink>{" "}
-            to get a managed Engine instance
-          </p>
-
-          <div className="h-5" />
-          <div className="flex justify-start gap-3">
-            <Button
-              variant="outline"
-              size="sm"
-              asChild
-              className="gap-2 bg-card"
-            >
-              <Link href={`/team/${props.teamSlug}/~/settings/billing`}>
-                Upgrade Plan
-                <ArrowRightIcon className="size-3 text-muted-foreground" />
-              </Link>
-            </Button>
-
-            <Button
-              variant="outline"
-              size="sm"
-              asChild
-              className="gap-2 bg-card"
-            >
-              <Link href="/pricing" target="_blank">
-                View Pricing
-                <ExternalLinkIcon className="size-3 text-muted-foreground" />
-              </Link>
-            </Button>
-          </div>
-        </div>
-      ) : (
-        <div>
-          <p className="mb-4 text-muted-foreground text-sm">
-            Contact us to get a managed engine for your team
-          </p>
-          <Button variant="outline" size="sm" asChild className="gap-2">
-            <Link href={PRO_CONTACT_US_URL} target="_blank">
-              Contact Us
-              <ExternalLinkIcon className="size-3 text-muted-foreground" />
-            </Link>
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
 export function EngineFooterCard(props: {
   teamPlan: Team["billingPlan"];
   team_slug: string;
   project_slug: string;
 }) {
   return (
     <div className="relative rounded-lg border p-6">
-      {props.teamPlan === "accelerate" || props.teamPlan === "scale" ? null : (
-        <>
-          <CloudHostedEngineSection
-            teamPlan={props.teamPlan}
-            teamSlug={props.team_slug}
-          />
-          <Separator className="my-5" />
-        </>
-      )}
-
       <EngineInfoSection
         team_slug={props.team_slug}
         project_slug={props.project_slug}
diff --git a/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx b/apps/dashboard/src/components/embedded-wallets/Configure/index.tsx
@@ -181,7 +181,7 @@ export const InAppWalletSettingsUI: React.FC<
   const authRequiredPlan = "growth";
   const brandingRequiredPlan = "starter";
 
-  // accelerate or higher plan required
+  // growth or higher plan required
   const canEditSmsCountries =
     planToTierRecordForGating[props.teamPlan] >=
     planToTierRecordForGating[authRequiredPlan];
diff --git a/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx
@@ -57,7 +57,7 @@ function Variants() {
           <SelectContent>
             <SelectItem value="free">Free</SelectItem>
             <SelectItem value="growth">Growth</SelectItem>
-            <SelectItem value="accelerate">Accelerate</SelectItem>
+            <SelectItem value="scale">Scale</SelectItem>
             <SelectItem value="pro">Pro</SelectItem>
           </SelectContent>
         </Select>
diff --git a/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx b/apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx
diff --git a/apps/dashboard/src/utils/pricing.tsx b/apps/dashboard/src/utils/pricing.tsx
