[Dashboard] Add 7-day free trial for Growth plan and Starter plan option

Author: jnsdls

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

@@ -59,6 +59,9 @@ export const PricingCard: React.FC<PricingCardProps> = ({
 }) => {
   const plan = TEAM_PLANS[billingPlan];
   const isCustomPrice = typeof plan.price === "string";
+  // if the team has just signed up and has not subscribed yet, and the billing plan is growth, then they get a 7 day trial
+  const has7DayTrial =
+    billingStatus === "noPayment" && billingPlan === "growth";
 
   const trackEvent = useTrack();
   const remainingTrialDays =
@@ -118,6 +121,12 @@ export const PricingCard: React.FC<PricingCardProps> = ({
             )}
           </div>
 
+          {has7DayTrial && (
+            <p className="text-muted-foreground text-sm">
+              7&nbsp;day free trial
+            </p>
+          )}
+
           {remainingTrialDays > 0 && (
             <p className="text-muted-foreground text-sm">
               Your free trial will{" "}

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

@@ -97,8 +97,7 @@ export function InviteTeamMembersUI(props: {
         recommendedMembers={[]}
         customCTASection={
           <div className="flex gap-3">
-            {(props.team.billingPlan === "free" ||
-              props.team.billingPlan === "starter") && (
+            {props.team.billingPlan === "free" && (
               <Button
                 size="sm"
                 variant="default"
@@ -155,8 +154,30 @@ function InviteModalContent(props: {
   getTeam: () => Promise<Team>;
   teamId: string;
 }) {
-  const [planToShow, setPlanToShow] = useState<"growth" | "scale" | "pro">(
-    "growth",
+  const [planToShow, setPlanToShow] = useState<
+    "starter" | "growth" | "scale" | "pro"
+  >("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 growthPlan = (
@@ -233,7 +254,7 @@ function InviteModalContent(props: {
           Choose a plan
         </SheetTitle>
         <SheetDescription className="text-left leading-relaxed">
-          Get started with the free Starter plan or upgrade to Growth plan for
+          Get started with the Starter plan or upgrade to Growth plan for
           increased limits and advanced features.{" "}
           <UnderlineLink href="https://thirdweb.com/pricing" target="_blank">
             Learn more about pricing
@@ -245,6 +266,7 @@ function InviteModalContent(props: {
 
       {/* Desktop */}
       <div className="hidden grid-cols-1 gap-6 md:grid-cols-4 md:gap-4 lg:grid">
+        {starterPlan}
         {growthPlan}
         {scalePlan}
         {proPlan}
@@ -254,6 +276,11 @@ function InviteModalContent(props: {
       <div className="lg:hidden">
         <TabButtons
           tabs={[
+            {
+              name: "Starter",
+              onClick: () => setPlanToShow("starter"),
+              isActive: planToShow === "starter",
+            },
             {
               name: "Growth",
               onClick: () => setPlanToShow("growth"),