Updated the pricing panels

Author: matt-aitken

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

@@ -83,6 +83,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 export default function ChoosePlanPage() {
   const {
     plans,
+    addOnPricing,
     v3Subscription,
     organizationSlug,
     periodStart,
@@ -141,6 +142,7 @@ export default function ChoosePlanPage() {
           <div>
             <PricingPlans
               plans={plans}
+              concurrencyAddOnPricing={addOnPricing.concurrency}
               subscription={v3Subscription}
               organizationSlug={organizationSlug}
               hasPromotedPlan={false}

apps/webapp/app/routes/_app.orgs.$organizationSlug_.select-plan/route.tsx

@@ -45,7 +45,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 }
 
 export default function ChoosePlanPage() {
-  const { plans, v3Subscription, organizationSlug, periodEnd } =
+  const { plans, v3Subscription, organizationSlug, periodEnd, addOnPricing } =
     useTypedLoaderData<typeof loader>();
 
   return (
@@ -57,6 +57,7 @@ export default function ChoosePlanPage() {
             <div className="w-full rounded-lg border border-grid-bright bg-background-dimmed p-5 shadow-lg">
               <PricingPlans
                 plans={plans}
+                concurrencyAddOnPricing={addOnPricing.concurrency}
                 subscription={v3Subscription}
                 organizationSlug={organizationSlug}
                 hasPromotedPlan

apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx

@@ -11,6 +11,7 @@ import { type ActionFunctionArgs } from "@remix-run/server-runtime";
 import { uiComponent } from "@team-plain/typescript-sdk";
 import { GitHubLightIcon } from "@trigger.dev/companyicons";
 import {
+  AddOnPricing,
   type FreePlanDefinition,
   type Limits,
   type PaidPlanDefinition,
@@ -45,6 +46,8 @@ import { requireUser } from "~/services/session.server";
 import { engine } from "~/v3/runEngine.server";
 import { cn } from "~/utils/cn";
 import { sendToPlain } from "~/utils/plain.server";
+import { formatCurrency } from "~/utils/numberFormatter";
+import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 
 const Params = z.object({
   organizationSlug: z.string(),
@@ -173,7 +176,6 @@ const pricingDefinitions = {
   },
   additionalConcurrency: {
     title: "Additional concurrency",
-    content: "Then $50/month per 50",
   },
   taskRun: {
     title: "Task runs",
@@ -227,6 +229,7 @@ const pricingDefinitions = {
 
 type PricingPlansProps = {
   plans: Plans;
+  concurrencyAddOnPricing: AddOnPricing;
   subscription?: SubscriptionResult;
   organizationSlug: string;
   hasPromotedPlan: boolean;
@@ -236,6 +239,7 @@ type PricingPlansProps = {
 
 export function PricingPlans({
   plans,
+  concurrencyAddOnPricing,
   subscription,
   organizationSlug,
   hasPromotedPlan,
@@ -258,7 +262,12 @@ export function PricingPlans({
           subscription={subscription}
           isHighlighted={hasPromotedPlan}
         />
-        <TierPro plan={plans.pro} organizationSlug={organizationSlug} subscription={subscription} />
+        <TierPro
+          plan={plans.pro}
+          organizationSlug={organizationSlug}
+          subscription={subscription}
+          concurrencyAddOnPricing={concurrencyAddOnPricing}
+        />
       </div>
       <div className="mt-3">
         <TierEnterprise />
@@ -654,10 +663,12 @@ export function TierHobby({
 
 export function TierPro({
   plan,
+  concurrencyAddOnPricing,
   organizationSlug,
   subscription,
 }: {
   plan: PaidPlanDefinition;
+  concurrencyAddOnPricing: AddOnPricing;
   organizationSlug: string;
   subscription?: SubscriptionResult;
 }) {
@@ -747,7 +758,9 @@ export function TierPro({
       </Form>
       <ul className="flex flex-col gap-2.5">
         <ConcurrentRuns limits={plan.limits}>
-          {pricingDefinitions.additionalConcurrency.content}
+          {`Then ${formatCurrency(concurrencyAddOnPricing.centsPerStep / 100, true)}/month per ${
+            concurrencyAddOnPricing.stepSize
+          }`}
         </ConcurrentRuns>
         <FeatureItem checked>
           Unlimited{" "}
@@ -963,10 +976,45 @@ function ConcurrentRuns({ limits, children }: { limits: Limits; children?: React
             </>
           ) : (
             <>{limits.concurrentRuns.number} </>
-          )}{" "}
+          )}
           <DefinitionTip
             title={pricingDefinitions.concurrentRuns.title}
-            content={pricingDefinitions.concurrentRuns.content}
+            content={
+              <div className="flex flex-col">
+                <Paragraph variant="small/dimmed" spacing>
+                  {pricingDefinitions.concurrentRuns.content}
+                </Paragraph>
+
+                <div className="flex items-center gap-x-1">
+                  <EnvironmentLabel environment={{ type: "PRODUCTION" }} />
+                  <span>
+                    {limits.concurrentRuns.production}
+                    {limits.concurrentRuns.canExceed ? "+" : ""}
+                  </span>
+                </div>
+                <div className="flex items-center gap-x-1">
+                  <EnvironmentLabel environment={{ type: "STAGING" }} />
+                  <span>
+                    {limits.concurrentRuns.staging}
+                    {limits.concurrentRuns.canExceed ? "+" : ""}
+                  </span>
+                </div>
+                <div className="flex items-center gap-x-1">
+                  <EnvironmentLabel environment={{ type: "PREVIEW" }} />
+                  <span>
+                    {limits.concurrentRuns.preview}
+                    {limits.concurrentRuns.canExceed ? "+" : ""}
+                  </span>
+                </div>
+                <div className="flex items-center gap-x-1">
+                  <EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />
+                  <span>
+                    {limits.concurrentRuns.development}
+                    {limits.concurrentRuns.canExceed ? "+" : ""}
+                  </span>
+                </div>
+              </div>
+            }
           >
             concurrent runs
           </DefinitionTip>