[TOOL-4471] GatedSwitch updates, Make In-app wallet branding gated by starter+ (#7021)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the billing and plan management features in the dashboard. It introduces new props for handling plan visibility and highlights, updates tooltip styles, and modifies the UI to support new plan requirements and features.

### Detailed summary
- Updated `tooltip.tsx` to adjust padding in the tooltip component.
- Changed `requiredPlan` from `authRequiredPlan` to `brandingRequiredPlan` in `Configure/index.tsx`.
- Added `openPlanSheetButtonByDefault` and `highlightPlan` props to several components.
- Modified `PlanInfoCardClient` and `Billing` components to utilize new props.
- Updated plan badge color for `starter` to `warning`.
- Made `getTeamPlanBadgeLabel` function exportable.
- Enhanced `PlanInfoCard` and `ViewPlansSheet` components to accept new props.
- Adjusted `BillingPricing` logic to highlight plans based on new props.
- Updated `GatedSwitch` to display upgraded plan information with improved tooltip content.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/ui/tooltip.tsx

@@ -54,11 +54,11 @@ export function ToolTipLabel(props: {
           align={props.align}
           sideOffset={10}
           className={cn(
-            "max-w-[400px] whitespace-normal leading-relaxed",
+            "max-w-[400px] whitespace-normal p-0 leading-relaxed",
             props.contentClassName,
           )}
         >
-          <div className="flex items-center gap-1.5 p-2 text-sm">
+          <div className="flex items-center gap-1.5 p-4 text-sm">
             {props.leftIcon}
             {props.label}
             {props.rightIcon}

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

@@ -8,8 +8,8 @@ const teamPlanToBadgeVariant: Record<
 > = {
   // gray
   free: "secondary",
-  starter: "secondary",
   // yellow
+  starter: "warning",
   starter_legacy: "warning",
   growth_legacy: "warning",
   // green
@@ -20,7 +20,7 @@ const teamPlanToBadgeVariant: Record<
   pro: "default",
 };
 
-function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
+export function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
   if (plan === "growth_legacy") {
     return "Growth - Legacy";
   }
@@ -33,13 +33,14 @@ function getTeamPlanBadgeLabel(plan: Team["billingPlan"]) {
 export function TeamPlanBadge(props: {
   plan: Team["billingPlan"];
   className?: string;
+  postfix?: string;
 }) {
   return (
     <Badge
       variant={teamPlanToBadgeVariant[props.plan]}
       className={cn("px-1.5 capitalize", props.className)}
     >
-      {getTeamPlanBadgeLabel(props.plan)}
+      {`${getTeamPlanBadgeLabel(props.plan)}${props.postfix || ""}`}
     </Badge>
   );
 }

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

@@ -7,9 +7,12 @@ import { PlanInfoCardUI } from "./PlanInfoCard";
 export function PlanInfoCardClient(props: {
   subscriptions: TeamSubscription[];
   team: Team;
+  openPlanSheetButtonByDefault: boolean;
+  highlightPlan: Team["billingPlan"] | undefined;
 }) {
   return (
     <PlanInfoCardUI
+      openPlanSheetButtonByDefault={props.openPlanSheetButtonByDefault}
       team={props.team}
       subscriptions={props.subscriptions}
       getTeam={async () => {
@@ -26,6 +29,7 @@ export function PlanInfoCardClient(props: {
 
         return res.data.result;
       }}
+      highlightPlan={props.highlightPlan}
     />
   );
 }

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

@@ -118,6 +118,8 @@ function Story(props: {
           team={team}
           subscriptions={zeroUsageOnDemandSubs}
           getTeam={teamTeamStub}
+          highlightPlan={undefined}
+          openPlanSheetButtonByDefault={false}
         />
       </BadgeContainer>
 
@@ -129,6 +131,8 @@ function Story(props: {
           }}
           subscriptions={zeroUsageOnDemandSubs}
           getTeam={teamTeamStub}
+          highlightPlan={undefined}
+          openPlanSheetButtonByDefault={false}
         />
       </BadgeContainer>
 
@@ -137,6 +141,8 @@ function Story(props: {
           team={team}
           subscriptions={trialPlanZeroUsageOnDemandSubs}
           getTeam={teamTeamStub}
+          highlightPlan={undefined}
+          openPlanSheetButtonByDefault={false}
         />
       </BadgeContainer>
 
@@ -145,6 +151,8 @@ function Story(props: {
           team={team}
           subscriptions={subsWith1Usage}
           getTeam={teamTeamStub}
+          highlightPlan={undefined}
+          openPlanSheetButtonByDefault={false}
         />
       </BadgeContainer>
 
@@ -153,6 +161,8 @@ function Story(props: {
           team={team}
           subscriptions={subsWith4Usage}
           getTeam={teamTeamStub}
+          highlightPlan={undefined}
+          openPlanSheetButtonByDefault={false}
         />
       </BadgeContainer>
     </div>

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

@@ -28,11 +28,15 @@ export function PlanInfoCardUI(props: {
   subscriptions: TeamSubscription[];
   team: Team;
   getTeam: () => Promise<Team>;
+  openPlanSheetButtonByDefault: boolean;
+  highlightPlan: Team["billingPlan"] | undefined;
 }) {
-  const { subscriptions, team } = props;
+  const { subscriptions, team, openPlanSheetButtonByDefault } = props;
   const validPlan = getValidTeamPlan(team);
   const isActualFreePlan = team.billingPlan === "free";
-  const [isPlanSheetOpen, setIsPlanSheetOpen] = useState(false);
+  const [isPlanSheetOpen, setIsPlanSheetOpen] = useState(
+    openPlanSheetButtonByDefault,
+  );
 
   const planSub = subscriptions.find(
     (subscription) => subscription.type === "PLAN",
@@ -54,6 +58,7 @@ export function PlanInfoCardUI(props: {
         isOpen={isPlanSheetOpen}
         onOpenChange={setIsPlanSheetOpen}
         getTeam={props.getTeam}
+        highlightPlan={props.highlightPlan}
       />
 
       <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:justify-between lg:p-6">
@@ -298,6 +303,7 @@ function ViewPlansSheet(props: {
   isOpen: boolean;
   onOpenChange: (open: boolean) => void;
   getTeam: () => Promise<Team>;
+  highlightPlan: Team["billingPlan"] | undefined;
 }) {
   return (
     <Sheet open={props.isOpen} onOpenChange={props.onOpenChange}>
@@ -309,6 +315,7 @@ function ViewPlansSheet(props: {
           team={props.team}
           trialPeriodEndedAt={props.trialPeriodEndedAt}
           getTeam={props.getTeam}
+          highlightPlan={props.highlightPlan}
         />
       </SheetContent>
     </Sheet>

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

@@ -1,4 +1,4 @@
-import { getTeamBySlug } from "@/api/team";
+import { type Team, getTeamBySlug } from "@/api/team";
 import { getTeamSubscriptions } from "@/api/team-subscription";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { Billing } from "components/settings/Account/Billing";
@@ -10,8 +10,13 @@ export default async function Page(props: {
   params: Promise<{
     team_slug: string;
   }>;
+  searchParams: Promise<{
+    showPlans?: string | string[];
+    highlight?: string | string[];
+  }>;
 }) {
   const params = await props.params;
+  const searchParams = await props.searchParams;
   const pagePath = `/team/${params.team_slug}/settings/billing`;
 
   const [account, team, authToken] = await Promise.all([
@@ -41,6 +46,12 @@ export default async function Page(props: {
 
   return (
     <Billing
+      highlightPlan={
+        typeof searchParams.highlight === "string"
+          ? (searchParams.highlight as Team["billingPlan"])
+          : undefined
+      }
+      openPlanSheetButtonByDefault={searchParams.showPlans === "true"}
       team={team}
       subscriptions={subscriptions}
       twAccount={account}

apps/dashboard/src/components/embedded-wallets/Configure/index.tsx

@@ -179,6 +179,7 @@ export const InAppWalletSettingsUI: React.FC<
     !!config.applicationImageUrl?.length || !!config.applicationName?.length;
 
   const authRequiredPlan = "accelerate";
+  const brandingRequiredPlan = "starter";
 
   // accelerate or higher plan required
   const canEditSmsCountries =
@@ -275,7 +276,7 @@ export const InAppWalletSettingsUI: React.FC<
           form={form}
           teamPlan={props.teamPlan}
           teamSlug={props.teamSlug}
-          requiredPlan={authRequiredPlan}
+          requiredPlan={brandingRequiredPlan}
         />
 
         <NativeAppsFieldset form={form} />

apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.tsx

@@ -1,9 +1,14 @@
 import type { Team } from "@/api/team";
+import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { ToolTipLabel } from "@/components/ui/tooltip";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { cn } from "@/lib/utils";
-import { TeamPlanBadge } from "../../../../app/(app)/components/TeamPlanBadge";
+import { ExternalLinkIcon } from "lucide-react";
+import {
+  TeamPlanBadge,
+  getTeamPlanBadgeLabel,
+} from "../../../../app/(app)/components/TeamPlanBadge";
 import { planToTierRecordForGating } from "./planToTierRecord";
 
 type SwitchProps = React.ComponentProps<typeof Switch>;
@@ -26,26 +31,40 @@ export const GatedSwitch: React.FC<GatedSwitchProps> = (
   return (
     <ToolTipLabel
       hoverable
-      contentClassName="max-w-[300px]"
       label={
         isUpgradeRequired ? (
-          <span>
-            To access this feature, <br /> Upgrade to the{" "}
-            <TrackedLinkTW
-              target="_blank"
-              href={`/team/${props.teamSlug}/~/settings/billing`}
-              category="advancedFeature"
-              label={props.trackingLabel}
-              className="text-link-foreground capitalize hover:text-foreground"
-            >
-              {props.requiredPlan} plan
-            </TrackedLinkTW>
-          </span>
+          <div className="w-full min-w-[280px]">
+            <h3 className="font-medium text-base">
+              <span className="capitalize">
+                {getTeamPlanBadgeLabel(props.requiredPlan)}+
+              </span>{" "}
+              plan required
+            </h3>
+            <p className="mb-3.5 text-muted-foreground">
+              Upgrade your plan to use this feature
+            </p>
+
+            <div className="flex w-full flex-col gap-2">
+              <Button asChild size="sm" className="justify-start gap-2">
+                <TrackedLinkTW
+                  target="_blank"
+                  href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${props.requiredPlan}`}
+                  category="advancedFeature"
+                  label="checkout"
+                >
+                  {`Upgrade to ${getTeamPlanBadgeLabel(props.requiredPlan)} plan`}
+                  <ExternalLinkIcon className="size-4" />
+                </TrackedLinkTW>
+              </Button>
+            </div>
+          </div>
         ) : undefined
       }
     >
       <div className="inline-flex items-center gap-2">
-        {isUpgradeRequired && <TeamPlanBadge plan={props.requiredPlan} />}
+        {isUpgradeRequired && (
+          <TeamPlanBadge plan={props.requiredPlan} postfix="+" />
+        )}
         <Switch
           {...props.switchProps}
           checked={props.switchProps?.checked && !isUpgradeRequired}

apps/dashboard/src/components/settings/Account/Billing/Pricing.tsx

@@ -29,6 +29,7 @@ interface BillingPricingProps {
   team: Team;
   trialPeriodEndedAt: string | undefined;
   getTeam: () => Promise<Team>;
+  highlightPlan: Team["billingPlan"] | undefined;
 }
 
 type CtaLink =
@@ -49,6 +50,7 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
   team,
   trialPeriodEndedAt,
   getTeam,
+  highlightPlan,
 }) => {
   const validTeamPlan = getValidTeamPlan(team);
   const [isPending, startTransition] = useTransition();
@@ -65,17 +67,28 @@ export const BillingPricing: React.FC<BillingPricingProps> = ({
   const isCurrentPlanScheduledToCancel = team.planCancellationDate !== null;
 
   const highlightGrowthPlan =
-    !isCurrentPlanScheduledToCancel &&
-    (validTeamPlan === "free" ||
-      validTeamPlan === "starter" ||
-      validTeamPlan === "growth_legacy");
+    highlightPlan === "growth" ||
+    (!highlightPlan &&
+      !isCurrentPlanScheduledToCancel &&
+      (validTeamPlan === "free" ||
+        validTeamPlan === "starter" ||
+        validTeamPlan === "growth_legacy"));
 
   const highlightStarterPlan =
-    !isCurrentPlanScheduledToCancel && validTeamPlan === "starter_legacy";
+    highlightPlan === "starter" ||
+    (!highlightPlan &&
+      !isCurrentPlanScheduledToCancel &&
+      validTeamPlan === "starter_legacy");
   const highlightAcceleratePlan =
-    !isCurrentPlanScheduledToCancel && validTeamPlan === "growth";
+    highlightPlan === "accelerate" ||
+    (!highlightPlan &&
+      !isCurrentPlanScheduledToCancel &&
+      validTeamPlan === "growth");
   const highlightScalePlan =
-    !isCurrentPlanScheduledToCancel && validTeamPlan === "accelerate";
+    highlightPlan === "scale" ||
+    (!highlightPlan &&
+      !isCurrentPlanScheduledToCancel &&
+      validTeamPlan === "accelerate");
 
   return (
     <div>

apps/dashboard/src/components/settings/Account/Billing/index.tsx

@@ -13,21 +13,30 @@ interface BillingProps {
   subscriptions: TeamSubscription[];
   twAccount: Account;
   client: ThirdwebClient;
+  openPlanSheetButtonByDefault: boolean;
+  highlightPlan: Team["billingPlan"] | undefined;
 }
 
 export const Billing: React.FC<BillingProps> = ({
   team,
   subscriptions,
   twAccount,
   client,
+  openPlanSheetButtonByDefault,
+  highlightPlan,
 }) => {
   const validPayment =
     team.billingStatus === "validPayment" || team.billingStatus === "pastDue";
 
   return (
     <div className="flex flex-col gap-12">
       <div>
-        <PlanInfoCardClient team={team} subscriptions={subscriptions} />
+        <PlanInfoCardClient
+          team={team}
+          subscriptions={subscriptions}
+          openPlanSheetButtonByDefault={openPlanSheetButtonByDefault}
+          highlightPlan={highlightPlan}
+        />
       </div>
 
       <CreditsInfoCard