Show the extra branches purchased in the footer UI

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route.tsx

@@ -707,7 +707,7 @@ function PurchaseBranchesModal({
           <input type="hidden" name="_formType" value="purchase-branches" />
           <div className="flex flex-col gap-4 pt-2">
             <div className="flex flex-col gap-1">
-              <Paragraph variant="base/bright">
+              <Paragraph variant="small/bright">
                 Purchase extra preview branches at {formatCurrency(pricePerBranch, false)}/month per
                 branch. Reducing the number of branches will take effect at the start of the next
                 billing cycle (1st of the month).

apps/webapp/app/services/upsertBranch.server.ts

@@ -5,7 +5,7 @@ import { createApiKeyForEnv, createPkApiKeyForEnv } from "~/models/api-key.serve
 import { type CreateBranchOptions } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.branches/route";
 import { isValidGitBranchName, sanitizeBranchName } from "~/v3/gitBranch";
 import { logger } from "./logger.server";
-import { getLimit } from "./platform.v3.server";
+import { getCurrentPlan, getLimit } from "./platform.v3.server";
 
 export class UpsertBranchService {
   #prismaClient: PrismaClient;
@@ -177,7 +177,10 @@ export async function checkBranchLimit(
   const count = newBranchName
     ? usedEnvs.filter((env) => env.branchName !== newBranchName).length
     : usedEnvs.length;
-  const limit = await getLimit(organizationId, "branches", 100_000_000);
+  const baseLimit = await getLimit(organizationId, "branches", 100_000_000);
+  const currentPlan = await getCurrentPlan(organizationId);
+  const purchasedBranches = currentPlan?.v3Subscription?.addOns?.branches?.purchased ?? 0;
+  const limit = baseLimit + purchasedBranches;
 
   return {
     used: count,