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

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;
+    highlight?: 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,8 @@ export default async function Page(props: {
 
   return (
     <Billing
+      highlightPlan={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