Improved messaging for upgrading number of dashboards

Author: samejr

apps/webapp/app/components/navigation/DashboardDialogs.tsx

@@ -1,6 +1,7 @@
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useNavigation } from "@remix-run/react";
 import { motion } from "framer-motion";
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "@heroicons/react/20/solid";
 import { useEffect, useState } from "react";
 import { type MatchedOrganization, useDashboardLimits } from "~/hooks/useOrganizations";
@@ -80,6 +81,7 @@ export function CreateDashboardButton({
         <CreateDashboardUpgradeDialog
           limits={limits}
           canUpgrade={!!canUpgrade}
+          isFreePlan={plan?.v3Subscription?.isPaying === false}
           organization={organization}
         />
       ) : (
@@ -97,12 +99,38 @@ const PROGRESS_COLOR_ERROR = "#E11D48"; // rose-600 / error
 function CreateDashboardUpgradeDialog({
   limits,
   canUpgrade,
+  isFreePlan,
   organization,
 }: {
   limits: { used: number; limit: number };
   canUpgrade: boolean;
+  isFreePlan: boolean;
   organization: MatchedOrganization;
 }) {
+
+  if (isFreePlan) {
+    return (
+      <DialogContent>
+        <DialogHeader>Upgrade to unlock dashboards</DialogHeader>
+        <div className="flex items-center gap-4 pt-3">
+          <ArrowUpCircleIcon className="ml-1 size-14 shrink-0 text-indigo-500" />
+          <DialogDescription className="pt-0">
+            Custom metric dashboards are available on paid plans. Upgrade to create dashboards and
+            track your task metrics.
+          </DialogDescription>
+        </div>
+        <DialogFooter className="flex justify-between">
+          <DialogClose asChild>
+            <Button variant="secondary/medium">Cancel</Button>
+          </DialogClose>
+          <LinkButton variant="primary/medium" to={v3BillingPath(organization)}>
+            Upgrade plan
+          </LinkButton>
+        </DialogFooter>
+      </DialogContent>
+    );
+  }
+
   const percentage = Math.min(limits.used / limits.limit, 1);
   const filled = percentage * PROGRESS_RING_CIRCUMFERENCE;
 
@@ -144,13 +172,17 @@ function CreateDashboardUpgradeDialog({
         <DialogDescription className="pt-0">
           {canUpgrade ? (
             <>
-              You've used all {limits.limit} of your custom dashboards. Upgrade your plan to create
-              more.
+              {limits.limit === 1
+                ? "Your plan includes 1 custom dashboard and it's already in use."
+                : `You've used all ${limits.limit} of your custom dashboards.`}{" "}
+              Upgrade your plan to create more.
             </>
           ) : (
             <>
-              You've used all {limits.limit} of your custom dashboards. To create more, request a
-              limit increase or visit the{" "}
+              {limits.limit === 1
+                ? "Your plan includes 1 custom dashboard and it's already in use."
+                : `You've used all ${limits.limit} of your custom dashboards.`}{" "}
+              To create more, request a limit increase or visit the{" "}
               <TextLink to={v3BillingPath(organization)}>billing page</TextLink> for pricing
               details.
             </>