github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Pricing table tooltip uses the vol discount pricing table

Browse Source
This commit is contained in:
James Ritchie
2023-12-04 16:21:40 +00:00
parent 890c5013af
commit cde232aebd
1 changed files with 8 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/components/billing/PricingTiers.tsx
+8 -43
View File
@@ -12,6 +12,7 @@ import { formatNumberCompact } from "~/utils/numberFormatter";
import { useState } from "react";
import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
import { Spinner } from "../primitives/Spinner";
import { RunsVolumeDiscountTable } from "./RunsVolumeDiscountTable";
const pricingDefinitions = {
concurrentRuns: {
@@ -303,8 +304,13 @@ export function TierPro({
{pricingDefinitions.jobRuns.title}
</DefinitionTip>
, then{" "}
<DefinitionTip title="Runs volume discount" content={<RunsVolumeDiscountTable />}>
{"<"} ${(mostExpensiveRunCost * 1000).toFixed(2)}/1k Runs
<DefinitionTip
title="Runs volume discount"
content={
<RunsVolumeDiscountTable hideHeader brackets={plan.runs?.pricing?.brackets ?? []} />
}
>
{"<"} ${(mostExpensiveRunCost * 1000).toFixed(2)}/1K Runs
</DefinitionTip>
</FeatureItem>
<FeatureItem checked>
@@ -441,47 +447,6 @@ function TierContainer({
);
}
function RunsVolumeDiscountTable() {
const runsVolumeDiscountRow =
"flex justify-between border-b border-border last:pb-0 last:border-none py-2";
return (
<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>
</ul>
);
}
function Header({
title,
cost: flatCost,