Adds additional pricing for bolt-ons for the Pro plan

Author: samejr

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

@@ -171,6 +171,10 @@ const pricingDefinitions = {
     title: "Concurrent runs",
     content: "The number of runs that can be executed at the same time.",
   },
+  additionalConcurrency: {
+    title: "Additional concurrency",
+    content: "Then $50/month per 50",
+  },
   taskRun: {
     title: "Task runs",
     content: "A single execution of a task.",
@@ -188,6 +192,10 @@ const pricingDefinitions = {
     title: "Schedules",
     content: "You can attach recurring schedules to tasks using cron syntax.",
   },
+  additionalSchedules: {
+    title: "Additional schedules",
+    content: "Then $10/month per 1,000",
+  },
   alerts: {
     title: "Alert destination",
     content:
@@ -198,9 +206,22 @@ const pricingDefinitions = {
     content:
       "Realtime allows you to send the live status and data from your runs to your frontend. This is the number of simultaneous Realtime connections that can be made.",
   },
+  additionalRealtimeConnections: {
+    title: "Additional Realtime connections",
+    content: "Then $10/month per 100",
+  },
+  additionalSeats: {
+    title: "Additional seats",
+    content: "Then $20/month per seat",
+  },
   branches: {
     title: "Branches",
-    content: "The number of preview branches that can be active (you can archive old ones).",
+    content:
+      "Preview branches allow you to test changes before deploying to production. You can have a limited number active at once (but can archive old ones).",
+  },
+  additionalBranches: {
+    title: "Additional branches",
+    content: "Then $10/month per branch",
   },
 };
 
@@ -507,7 +528,7 @@ export function TierFree({
             <LogRetention limits={plan.limits} />
             <SupportLevel limits={plan.limits} />
             <Alerts limits={plan.limits} />
-            <RealtimeConnecurrency limits={plan.limits} />
+            <RealtimeConcurrency limits={plan.limits} />
           </ul>
         </>
       )}
@@ -624,7 +645,7 @@ export function TierHobby({
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
-        <RealtimeConnecurrency limits={plan.limits} />
+        <RealtimeConcurrency limits={plan.limits} />
       </ul>
     </TierContainer>
   );
@@ -724,7 +745,9 @@ export function TierPro({
         </div>
       </Form>
       <ul className="flex flex-col gap-2.5">
-        <ConcurrentRuns limits={plan.limits} />
+        <ConcurrentRuns limits={plan.limits}>
+          {pricingDefinitions.additionalConcurrency.content}
+        </ConcurrentRuns>
         <FeatureItem checked>
           Unlimited{" "}
           <DefinitionTip
@@ -734,14 +757,16 @@ export function TierPro({
             tasks
           </DefinitionTip>
         </FeatureItem>
-        <TeamMembers limits={plan.limits} />
+        <TeamMembers limits={plan.limits}>{pricingDefinitions.additionalSeats.content}</TeamMembers>
         <Environments limits={plan.limits} />
-        <Branches limits={plan.limits} />
-        <Schedules limits={plan.limits} />
+        <Branches limits={plan.limits}>{pricingDefinitions.additionalBranches.content}</Branches>
+        <Schedules limits={plan.limits}>{pricingDefinitions.additionalSchedules.content}</Schedules>
         <LogRetention limits={plan.limits} />
         <SupportLevel limits={plan.limits} />
         <Alerts limits={plan.limits} />
-        <RealtimeConnecurrency limits={plan.limits} />
+        <RealtimeConcurrency limits={plan.limits}>
+          {pricingDefinitions.additionalRealtimeConnections.content}
+        </RealtimeConcurrency>
       </ul>
     </TierContainer>
   );
@@ -902,16 +927,16 @@ function FeatureItem({
   children: React.ReactNode;
 }) {
   return (
-    <li className="flex items-center gap-2">
+    <li className="flex items-start gap-2">
       {checked ? (
         <CheckIcon
           className={cn(
-            "size-4 min-w-4",
+            "mt-0.5 size-4 min-w-4",
             checkedColor === "primary" ? "text-primary" : "text-text-bright"
           )}
         />
       ) : (
-        <XMarkIcon className="size-4 min-w-4 text-charcoal-500" />
+        <XMarkIcon className="mt-0.5 size-4 min-w-4 text-charcoal-500" />
       )}
       <div
         className={cn(
@@ -925,26 +950,42 @@ function FeatureItem({
   );
 }
 
-function ConcurrentRuns({ limits }: { limits: Limits }) {
+function ConcurrentRuns({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.concurrentRuns.number}
-      {limits.concurrentRuns.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.concurrentRuns.title}
-        content={pricingDefinitions.concurrentRuns.content}
-      >
-        concurrent runs
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.concurrentRuns.canExceed ? (
+            <>
+              {limits.concurrentRuns.number}
+              {"+"}
+            </>
+          ) : (
+            <>{limits.concurrentRuns.number} </>
+          )}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.concurrentRuns.title}
+            content={pricingDefinitions.concurrentRuns.content}
+          >
+            concurrent runs
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
 
-function TeamMembers({ limits }: { limits: Limits }) {
+function TeamMembers({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.teamMembers.number}
-      {limits.concurrentRuns.canExceed ? "+" : ""} team members
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.teamMembers.number}
+          {limits.teamMembers.canExceed ? "+" : ""} team members
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
@@ -963,17 +1004,22 @@ function Environments({ limits }: { limits: Limits }) {
   );
 }
 
-function Schedules({ limits }: { limits: Limits }) {
+function Schedules({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.schedules.number}
-      {limits.schedules.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.schedules.title}
-        content={pricingDefinitions.schedules.content}
-      >
-        schedules
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.schedules.number}
+          {limits.schedules.canExceed ? "+" : ""}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.schedules.title}
+            content={pricingDefinitions.schedules.content}
+          >
+            schedules
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
@@ -1018,32 +1064,52 @@ function Alerts({ limits }: { limits: Limits }) {
   );
 }
 
-function RealtimeConnecurrency({ limits }: { limits: Limits }) {
+function RealtimeConcurrency({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked>
-      {limits.realtimeConcurrentConnections.number}
-      {limits.realtimeConcurrentConnections.canExceed ? "+" : ""}{" "}
-      <DefinitionTip
-        title={pricingDefinitions.realtime.title}
-        content={pricingDefinitions.realtime.content}
-      >
-        concurrent Realtime connections
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-start gap-1">
+          {limits.realtimeConcurrentConnections.canExceed ? (
+            <>
+              {limits.realtimeConcurrentConnections.number}
+              {"+"}
+            </>
+          ) : (
+            <>{limits.realtimeConcurrentConnections.number} </>
+          )}{" "}
+          <DefinitionTip
+            title={pricingDefinitions.realtime.title}
+            content={pricingDefinitions.realtime.content}
+          >
+            concurrent Realtime connections
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }
 
-function Branches({ limits }: { limits: Limits }) {
+function Branches({ limits, children }: { limits: Limits; children?: React.ReactNode }) {
   return (
     <FeatureItem checked={limits.branches.number > 0}>
-      {limits.branches.number}
-      {limits.branches.canExceed ? "+ " : " "}
-      <DefinitionTip
-        title={pricingDefinitions.branches.title}
-        content={pricingDefinitions.branches.content}
-      >
-        preview branches
-      </DefinitionTip>
+      <div className="flex flex-col gap-y-0.5">
+        <div className="flex items-center gap-1">
+          {limits.branches.number > 0 && (
+            <>
+              {limits.branches.number}
+              {limits.branches.canExceed ? "+ " : " "}
+            </>
+          )}
+          <DefinitionTip
+            title={pricingDefinitions.branches.title}
+            content={pricingDefinitions.branches.content}
+          >
+            {limits.branches.number > 0 ? "preview" : "Preview"} branches
+          </DefinitionTip>
+        </div>
+        {children && <span className="text-xs text-text-dimmed">{children}</span>}
+      </div>
     </FeatureItem>
   );
 }