Removed the usage prediction for now (#1326)

Author: samejr

apps/webapp/app/components/billing/v3/UsageBar.tsx

@@ -8,32 +8,16 @@ type UsageBarProps = {
   current: number;
   billingLimit?: number;
   tierLimit?: number;
-  projectedUsage?: number;
   isPaying: boolean;
 };
 
 const startFactor = 4;
 
-export function UsageBar({
-  current,
-  billingLimit,
-  tierLimit,
-  projectedUsage,
-  isPaying,
-}: UsageBarProps) {
-  const getLargestNumber = Math.max(
-    current,
-    tierLimit ?? -Infinity,
-    projectedUsage ?? -Infinity,
-    billingLimit ?? -Infinity,
-    5
-  );
+export function UsageBar({ current, billingLimit, tierLimit, isPaying }: UsageBarProps) {
+  const getLargestNumber = Math.max(current, tierLimit ?? -Infinity, billingLimit ?? -Infinity, 5);
   //creates a maximum range for the progress bar, add 10% to the largest number so the bar doesn't reach the end
   const maxRange = Math.round(getLargestNumber * 1.1);
   const tierRunLimitPercentage = tierLimit ? Math.round((tierLimit / maxRange) * 100) : 0;
-  const projectedRunsPercentage = projectedUsage
-    ? Math.round((projectedUsage / maxRange) * 100)
-    : 0;
   const billingLimitPercentage =
     billingLimit !== undefined ? Math.round((billingLimit / maxRange) * 100) : 0;
   const usagePercentage = Math.round((current / maxRange) * 100);
@@ -42,7 +26,7 @@ export function UsageBar({
   const usageCappedToLimitPercentage = Math.min(usagePercentage, tierRunLimitPercentage);
 
   return (
-    <div className="h-fit w-full py-12">
+    <div className="h-fit w-full py-6">
       <div className="relative h-3 w-full rounded-sm bg-background-bright">
         {billingLimit !== undefined && (
           <motion.div
@@ -93,23 +77,6 @@ export function UsageBar({
             />
           </motion.div>
         )}
-        {projectedUsage !== undefined && projectedUsage !== 0 && (
-          <motion.div
-            initial={{ width: projectedRunsPercentage / startFactor + "%" }}
-            animate={{ width: projectedRunsPercentage + "%" }}
-            transition={{ duration: 1.5, type: "spring" }}
-            style={{ width: `${projectedRunsPercentage}%` }}
-            className="absolute h-3 rounded-l-sm"
-          >
-            <Legend
-              text="Projected:"
-              value={formatCurrency(projectedUsage, false)}
-              position="topRow2"
-              percentage={projectedRunsPercentage}
-            />
-          </motion.div>
-        )}
-
         <motion.div
           initial={{ width: usageCappedToLimitPercentage / startFactor + "%" }}
           animate={{ width: usageCappedToLimitPercentage + "%" }}

apps/webapp/app/routes/_app.orgs.$organizationSlug.v3.usage/route.tsx

@@ -139,39 +139,25 @@ export default function Page() {
                   }
                 >
                   {(usage) => (
-                    <>
-                      <div className="flex w-full items-center gap-6">
-                        <div className="flex flex-col gap-2">
-                          <Header3 className="">
-                            {isCurrentMonth ? "Month-to-date" : "Usage"}
-                          </Header3>
-                          <p className="text-3xl font-medium text-text-bright">
-                            {formatCurrency(usage.overall.current, false)}
-                          </p>
-                        </div>
-                        {isCurrentMonth ? (
-                          <>
-                            <ArrowRightIcon className="h-6 w-6 text-text-dimmed/50" />
-                            <div className="flex flex-col gap-2 text-text-dimmed">
-                              <Header3 className="text-text-dimmed">Projected</Header3>
-                              <p className="text-3xl font-medium">
-                                {formatCurrency(usage.overall.projected, false)}
-                              </p>
-                            </div>
-                          </>
-                        ) : null}
+                    <div className="flex items-center gap-8">
+                      <div className="flex flex-col gap-2">
+                        <Header3 className="whitespace-nowrap">
+                          {isCurrentMonth ? "Month-to-date" : "Usage"}
+                        </Header3>
+                        <p className="whitespace-nowrap text-3xl font-medium text-text-bright">
+                          {formatCurrency(usage.overall.current, false)}
+                        </p>
                       </div>
                       <UsageBar
                         current={usage.overall.current}
-                        projectedUsage={isCurrentMonth ? usage.overall.projected : undefined}
                         isPaying={currentPlan?.v3Subscription?.isPaying ?? false}
                         tierLimit={
                           isCurrentMonth
                             ? (currentPlan?.v3Subscription?.plan?.limits.includedUsage ?? 0) / 100
                             : undefined
                         }
                       />
-                    </>
+                    </div>
                   )}
                 </Await>
               </Suspense>