From 5e511b94c0fcd4f71a7a47fa990e84e0aa0934ea Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Thu, 30 Nov 2023 11:27:03 +0000
Subject: [PATCH] Added pricing calculator to the plans page

---
 .../route.tsx                                     | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

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 7c66b1f2f..b1e529670 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
@@ -1,6 +1,9 @@
+import { PricingCalculator } from "~/components/billing/PricingCalculator";
 import { PricingTiers, TierEnterprise, TierFree, TierPro } from "~/components/billing/PricingTiers";
+import { RunsVolumeDiscountTable } from "~/components/billing/RunsVolumeDiscountTable";
 import { BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { Callout } from "~/components/primitives/Callout";
+import { Header2 } from "~/components/primitives/Headers";
 import { Handle } from "~/utils/handle";
 
 export const handle: Handle = {
@@ -9,8 +12,8 @@ export const handle: Handle = {
 
 export default function Page() {
   return (
-    <div>
-      <Callout variant={"pricing"} className="mb-4">
+    <div className="flex flex-col gap-4">
+      <Callout variant={"pricing"}>
         Some of your Runs are being queued because your Run concurrency is limited to 50.
       </Callout>
       <PricingTiers>
@@ -18,6 +21,14 @@ export default function Page() {
         <TierPro />
         <TierEnterprise />
       </PricingTiers>
+      <div>
+        <Header2 spacing>Estimate your usage</Header2>
+        <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 />
+        </div>
+      </div>
     </div>
   );
 }