From cde232aebd09e29388ddb0173642da3b53056e75 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Mon, 4 Dec 2023 16:21:40 +0000
Subject: [PATCH] Pricing table tooltip uses the vol discount pricing table

---
 .../app/components/billing/PricingTiers.tsx   | 51 +++----------------
 1 file changed, 8 insertions(+), 43 deletions(-)

diff --git a/apps/webapp/app/components/billing/PricingTiers.tsx b/apps/webapp/app/components/billing/PricingTiers.tsx
index 1ccb1296c..317e731d8 100644
--- a/apps/webapp/app/components/billing/PricingTiers.tsx
+++ b/apps/webapp/app/components/billing/PricingTiers.tsx
@@ -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,