The tiers are now rendering using the real data

apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx

@@ -1,52 +1,64 @@
+import { RunPriceBracket } from "@trigger.dev/billing";
 import { Header2 } from "../primitives/Headers";
 import { Paragraph } from "../primitives/Paragraph";
+import { formatNumberCompact } from "~/utils/numberFormatter";
 
 export function RunsVolumeDiscountTable({
   className,
   hideHeader = false,
+  brackets,
 }: {
   className?: string;
   hideHeader?: boolean;
+  brackets: RunPriceBracket[];
 }) {
   const runsVolumeDiscountRow =
     "flex justify-between whitespace-nowrap border-b gap-16 border-border last:pb-0 last:border-none py-2";
+
+  const bracketData = bracketInfo(brackets);
+
   return (
     <div className={className}>
       {hideHeader ? null : <Header2 className="mb-2">Runs volume discount</Header2>}
       <ul>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">First 10k/mo</Paragraph>
-          <Paragraph variant="small">Free</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">10k–20k</Paragraph>
-          <Paragraph variant="small">$1.25/1,000</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">20k–150k</Paragraph>
-          <Paragraph variant="small">$0.88/1,000</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">150k–500k</Paragraph>
-          <Paragraph variant="small">$0.61/1,000</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">500k–1m</Paragraph>
-          <Paragraph variant="small">$0.43/1,000</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">1m–2.5m</Paragraph>
-          <Paragraph variant="small">$0.30/1,000</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">2.5m–6.25m</Paragraph>
-          <Paragraph variant="small">$0.21/1,000</Paragraph>
-        </li>
-        <li className={runsVolumeDiscountRow}>
-          <Paragraph variant="small">6.25m +</Paragraph>
-          <Paragraph variant="small">$0.14/1,000</Paragraph>
-        </li>
+        {bracketData.map((bracket, index) => (
+          <li key={index} className={runsVolumeDiscountRow}>
+            <Paragraph variant="small">{bracket.range}</Paragraph>
+            <Paragraph variant="small">{bracket.costLabel}</Paragraph>
+          </li>
+        ))}
       </ul>
     </div>
   );
 }
+
+function bracketInfo(brackets: RunPriceBracket[]) {
+  return brackets.map((bracket, index) => {
+    const { upto, unitCost } = bracket;
+
+    if (index === 0) {
+      return {
+        range: `First ${formatNumberCompact(upto!)}/mo`,
+        costLabel: "Free",
+      };
+    }
+
+    const from = brackets[index - 1].upto;
+    const fromFormatted = formatNumberCompact(from!);
+    const toFormatted = upto ? formatNumberCompact(upto) : undefined;
+
+    const costLabel = `$${(unitCost * 1000).toFixed(2)}/1,000`;
+
+    if (!upto) {
+      return {
+        range: `${fromFormatted} +`,
+        costLabel,
+      };
+    }
+
+    return {
+      range: `${fromFormatted}–${toFormatted}`,
+      costLabel,
+    };
+  });
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx

@@ -53,7 +53,7 @@ export default function Page() {
         <div className="flex h-full w-full rounded-md border border-border p-6">
           <PricingCalculator />
           <div className="mx-6 min-h-full w-px bg-border" />
-          <RunsVolumeDiscountTable />
+          <RunsVolumeDiscountTable brackets={plans.paid.runs?.pricing?.brackets ?? []} />
         </div>
       </div>
     </div>

apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx

@@ -31,9 +31,11 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { isManagedCloud } = featuresForRequest(request);
   const billingPresenter = new BillingService(isManagedCloud);
   const currentPlan = await billingPresenter.currentPlan(organization.id);
+  const plans = await billingPresenter.getPlans();
 
   return typedjson({
     currentPlan,
+    plans,
   });
 };
 
@@ -47,7 +49,7 @@ export const handle: Handle = {
 };
 
 export default function Subscribed() {
-  const { currentPlan } = useTypedLoaderData<typeof loader>();
+  const { currentPlan, plans } = useTypedLoaderData<typeof loader>();
   useNewCustomerSubscribed();
 
   return (
@@ -66,7 +68,11 @@ export default function Subscribed() {
         <PlanItem item="Runs/mo" value="Volume discounted" />
       </ul>
 
-      <RunsVolumeDiscountTable hideHeader className="mb-4 border-b border-border pb-2 pl-4" />
+      <RunsVolumeDiscountTable
+        hideHeader
+        className="mb-4 border-b border-border pb-2 pl-4"
+        brackets={plans?.paid.runs?.pricing?.brackets ?? []}
+      />
       <FormButtons
         confirmButton={
           <LinkButton to={"/"} variant={"primary/small"} TrailingIcon={"arrow-right"}>