From ada2c5c99e5113573bd3062f4335fd23b6dfa029 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 28 Jun 2024 15:13:26 +0100
Subject: [PATCH] More improvements to the app-wide usage indicators

---
 .../components/billing/v2/FreePlanUsage.tsx   |  2 +-
 .../components/billing/v2/UpgradePrompt.tsx   | 10 +++++-
 .../app/components/navigation/SideMenu.tsx    | 33 +++++++++++--------
 .../_app.orgs.$organizationSlug/route.tsx     |  2 --
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/apps/webapp/app/components/billing/v2/FreePlanUsage.tsx b/apps/webapp/app/components/billing/v2/FreePlanUsage.tsx
index a09475a1a..729d55d8b 100644
--- a/apps/webapp/app/components/billing/v2/FreePlanUsage.tsx
+++ b/apps/webapp/app/components/billing/v2/FreePlanUsage.tsx
@@ -28,7 +28,7 @@ export function FreePlanUsage({ to, percentage }: { to: string; percentage: numb
           <Paragraph className="text-2sm text-text-bright">Free Plan</Paragraph>
         </div>
         <Link to={to} className="text-2sm text-text-link">
-          Learn more
+          Upgrade
         </Link>
       </div>
       <div className="relative mt-3 h-1 rounded-full bg-background-dimmed">
diff --git a/apps/webapp/app/components/billing/v2/UpgradePrompt.tsx b/apps/webapp/app/components/billing/v2/UpgradePrompt.tsx
index c9939e097..b4584216d 100644
--- a/apps/webapp/app/components/billing/v2/UpgradePrompt.tsx
+++ b/apps/webapp/app/components/billing/v2/UpgradePrompt.tsx
@@ -6,6 +6,7 @@ import { v3BillingPath } from "~/utils/pathBuilder";
 import { LinkButton } from "../../primitives/Buttons";
 import { Icon } from "../../primitives/Icon";
 import { Paragraph } from "../../primitives/Paragraph";
+import { DateTime } from "~/components/primitives/DateTime";
 
 export function UpgradePrompt() {
   const organization = useOrganization();
@@ -15,6 +16,11 @@ export function UpgradePrompt() {
     return null;
   }
 
+  const nextMonth = new Date();
+  nextMonth.setMonth(nextMonth.getMonth() + 1);
+  nextMonth.setDate(1);
+  nextMonth.setHours(0, 0, 0, 0);
+
   return (
     <div
       className="flex h-10 items-center justify-between border border-error bg-repeat py-0 pl-3 pr-2"
@@ -24,7 +30,9 @@ export function UpgradePrompt() {
         <Icon icon={ExclamationCircleIcon} className="h-5 w-5 text-error" />
         <Paragraph variant="small" className="text-error">
           You have exceeded the monthly $
-          {(plan.v3Subscription?.plan?.limits.includedUsage ?? 500) / 100} free credits.
+          {(plan.v3Subscription?.plan?.limits.includedUsage ?? 500) / 100} free credits. No runs
+          will execute in Prod until <DateTime date={nextMonth} includeTime={false} />, or you
+          upgrade.
         </Paragraph>
       </div>
       <LinkButton
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 5e5765333..8b36d59a1 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -105,6 +105,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
   const borderRef = useRef<HTMLDivElement>(null);
   const [showHeaderDivider, setShowHeaderDivider] = useState(false);
   const currentPlan = useCurrentPlan();
+  const { isManagedCloud } = useFeatures();
 
   useEffect(() => {
     const handleScroll = () => {
@@ -179,20 +180,24 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               iconColor="text-sky-500"
               data-action="team"
             />
-            <SideMenuItem
-              name="Usage"
-              icon={ChartBarIcon}
-              to={v3UsagePath(organization)}
-              iconColor="text-green-600"
-              data-action="usage"
-            />
-            <SideMenuItem
-              name="Billing"
-              icon={CurrencyDollarIcon}
-              to={v3BillingPath(organization)}
-              iconColor="text-sun-600"
-              data-action="billing"
-            />
+            {isManagedCloud && (
+              <>
+                <SideMenuItem
+                  name="Usage"
+                  icon={ChartBarIcon}
+                  to={v3UsagePath(organization)}
+                  iconColor="text-green-600"
+                  data-action="usage"
+                />
+                <SideMenuItem
+                  name="Billing"
+                  icon={CurrencyDollarIcon}
+                  to={v3BillingPath(organization)}
+                  iconColor="text-sun-600"
+                  data-action="billing"
+                />
+              </>
+            )}
             {organization.projects.some((proj) => proj.version === "V2") && (
               <SideMenuItem
                 name="Usage (v2)"
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
index a22ea2a34..cd5f3d8e6 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
@@ -27,8 +27,6 @@ export function useCurrentPlan(matches?: UIMatch[]) {
     matches,
   });
 
-  console.log(data?.currentPlan);
-
   return data?.currentPlan;
 }