diff --git a/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx b/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx
index c9f546f70..11d719d58 100644
--- a/apps/webapp/app/components/billing/RunsVolumeDiscountTable.tsx
+++ b/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 (
{hideHeader ? null :
Runs volume discount}
- -
- First 10k/mo
- Free
-
- -
- 10k–20k
- $1.25/1,000
-
- -
- 20k–150k
- $0.88/1,000
-
- -
- 150k–500k
- $0.61/1,000
-
- -
- 500k–1m
- $0.43/1,000
-
- -
- 1m–2.5m
- $0.30/1,000
-
- -
- 2.5m–6.25m
- $0.21/1,000
-
- -
- 6.25m +
- $0.14/1,000
-
+ {bracketData.map((bracket, index) => (
+ -
+ {bracket.range}
+ {bracket.costLabel}
+
+ ))}
);
}
+
+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,
+ };
+ });
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx
index b0e3e5ab4..14072d1d0 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.billing.plans/route.tsx
@@ -53,7 +53,7 @@ export default function Page() {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx
index c8161441e..262969410 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.subscribed/route.tsx
+++ b/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();
+ const { currentPlan, plans } = useTypedLoaderData();
useNewCustomerSubscribed();
return (
@@ -66,7 +68,11 @@ export default function Subscribed() {
-
+