Concurrency purchasing working

matt-aitken · matt-aitken · commit d2c70f165985 · 2025-11-13T14:40:04.000Z
diff --git a/apps/webapp/app/presenters/v3/ManageConcurrencyPresenter.server.ts b/apps/webapp/app/presenters/v3/ManageConcurrencyPresenter.server.ts
@@ -13,6 +13,7 @@ export type ConcurrencyResult = {
   extraConcurrency: number;
   extraAllocatedConcurrency: number;
   extraUnallocatedConcurrency: number;
+  maxQuota: number;
   concurrencyPricing: {
     stepSize: number;
     centsPerStep: number;
@@ -115,6 +116,7 @@ export class ManageConcurrencyPresenter extends BasePresenter {
       extraConcurrency,
       extraAllocatedConcurrency: extraAllocated,
       extraUnallocatedConcurrency: extraConcurrency - extraAllocated,
+      maxQuota: currentPlan.v3Subscription.addOns?.concurrentRuns?.quota ?? 0,
       environments: sortEnvironments(projectEnvironments).reverse(),
       concurrencyPricing: plans.addOnPricing.concurrency,
     };
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.concurrency/route.tsx
@@ -1,6 +1,9 @@
-import { PlusIcon } from "@heroicons/react/20/solid";
-import { Form, type MetaFunction } from "@remix-run/react";
-import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { conform, useForm } from "@conform-to/react";
+import { parse } from "@conform-to/zod";
+import { EnvelopeIcon, PlusIcon } from "@heroicons/react/20/solid";
+import { DialogClose } from "@radix-ui/react-dialog";
+import { Form, useActionData, useNavigation, type MetaFunction } from "@remix-run/react";
+import { json, type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { tryCatch } from "@trigger.dev/core";
 import { useState } from "react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
@@ -13,14 +16,10 @@ import {
   PageContainer,
 } from "~/components/layout/AppLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTrigger,
-} from "~/components/primitives/Dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { Fieldset } from "~/components/primitives/Fieldset";
+import { FormButtons } from "~/components/primitives/FormButtons";
+import { FormError } from "~/components/primitives/FormError";
 import { Header2, Header3 } from "~/components/primitives/Headers";
 import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
@@ -43,21 +42,22 @@ import { useOrganization } from "~/hooks/useOrganizations";
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { findProjectBySlug } from "~/models/project.server";
 import {
+  ManageConcurrencyPresenter,
   type ConcurrencyResult,
   type EnvironmentWithConcurrency,
-  ManageConcurrencyPresenter,
 } from "~/presenters/v3/ManageConcurrencyPresenter.server";
 import { getPlans } from "~/services/platform.v3.server";
-import { requireUser, requireUserId } from "~/services/session.server";
-import { formatCurrency } from "~/utils/numberFormatter";
-import { EnvironmentParamSchema, regionsPath, v3BillingPath } from "~/utils/pathBuilder";
-import { SetDefaultRegionService } from "~/v3/services/setDefaultRegion.server";
+import { requireUserId } from "~/services/session.server";
+import { formatCurrency, formatNumber } from "~/utils/numberFormatter";
+import { concurrencyPath, EnvironmentParamSchema, v3BillingPath } from "~/utils/pathBuilder";
+import { SetConcurrencyAddOnService } from "~/v3/services/setConcurrencyAddOn.server";
 import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
+import { SpinnerWhite } from "~/components/primitives/Spinner";
 
 export const meta: MetaFunction = () => {
   return [
     {
-      title: `Concurrency | Trigger.dev`,
+      title: `Manage concurrency | Trigger.dev`,
     },
   ];
 };
@@ -99,16 +99,16 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 const FormSchema = z.object({
-  regionId: z.string(),
+  action: z.enum(["purchase", "quota-increase"]),
+  amount: z.coerce.number().min(1, "Amount must be greater than 0"),
 });
 
 export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const user = await requireUser(request);
+  const userId = await requireUserId(request);
   const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
 
-  const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
-
-  const redirectPath = regionsPath(
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  const redirectPath = concurrencyPath(
     { slug: organizationSlug },
     { slug: projectParam },
     { slug: envParam }
@@ -119,26 +119,34 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
   }
 
   const formData = await request.formData();
-  const parsedFormData = FormSchema.safeParse(Object.fromEntries(formData));
+  const submission = parse(formData, { schema: FormSchema });
 
-  if (!parsedFormData.success) {
-    throw redirectWithErrorMessage(redirectPath, request, "No region specified");
+  if (!submission.value || submission.intent !== "submit") {
+    return json(submission);
   }
 
-  const service = new SetDefaultRegionService();
+  const service = new SetConcurrencyAddOnService();
   const [error, result] = await tryCatch(
     service.call({
+      userId,
       projectId: project.id,
-      regionId: parsedFormData.data.regionId,
-      isAdmin: user.admin || user.isImpersonating,
+      organizationId: project.organizationId,
+      action: submission.value.action,
+      amount: submission.value.amount,
     })
   );
 
   if (error) {
-    return redirectWithErrorMessage(redirectPath, request, error.message);
+    submission.error.amount = [error instanceof Error ? error.message : "Unknown error"];
+    return json(submission);
   }
 
-  return redirectWithSuccessMessage(redirectPath, request, `Set ${result.name} as default`);
+  if (!result.success) {
+    submission.error.amount = [result.error];
+    return json(submission);
+  }
+
+  return redirectWithSuccessMessage(redirectPath, request, "Concurrency updated successfully");
 };
 
 export default function Page() {
@@ -149,6 +157,7 @@ export default function Page() {
     extraUnallocatedConcurrency,
     environments,
     concurrencyPricing,
+    maxQuota,
   } = useTypedLoaderData<typeof loader>();
 
   return (
@@ -181,6 +190,7 @@ export default function Page() {
               extraUnallocatedConcurrency={extraUnallocatedConcurrency}
               environments={environments}
               concurrencyPricing={concurrencyPricing}
+              maxQuota={maxQuota}
             />
           ) : (
             <NotUpgradable environments={environments} />
@@ -198,6 +208,7 @@ function Upgradable({
   extraUnallocatedConcurrency,
   environments,
   concurrencyPricing,
+  maxQuota,
 }: ConcurrencyResult) {
   const organization = useOrganization();
 
@@ -215,7 +226,11 @@ function Upgradable({
         <div className="flex flex-col gap-2">
           <div className="flex items-center first-letter:pb-1">
             <Header3 className="grow">Extra concurrency</Header3>
-            <PurchaseConcurrencyModal concurrencyPricing={concurrencyPricing} />
+            <PurchaseConcurrencyModal
+              concurrencyPricing={concurrencyPricing}
+              extraConcurrency={extraConcurrency}
+              maxQuota={maxQuota}
+            />
           </div>
           <Table>
             <TableBody>
@@ -343,13 +358,34 @@ function NotUpgradable({ environments }: { environments: EnvironmentWithConcurre
 
 function PurchaseConcurrencyModal({
   concurrencyPricing,
+  extraConcurrency,
+  maxQuota,
 }: {
   concurrencyPricing: {
     stepSize: number;
     centsPerStep: number;
   };
+  extraConcurrency: number;
+  maxQuota: number;
 }) {
-  const [amount, setAmount] = useState(0);
+  const lastSubmission = useActionData();
+  const [form, { amount }] = useForm({
+    id: "purchase-concurrency",
+    // TODO: type this
+    lastSubmission: lastSubmission as any,
+    onValidate({ formData }) {
+      return parse(formData, { schema: FormSchema });
+    },
+    shouldRevalidate: "onSubmit",
+  });
+
+  const [amountValue, setAmountValue] = useState(0);
+  const navigation = useNavigation();
+  console.log(navigation);
+  const isLoading = navigation.state !== "idle" && navigation.formMethod === "POST";
+
+  const maximum = maxQuota - extraConcurrency;
+  const isAboveMaxQuota = amountValue > maximum;
 
   return (
     <Dialog>
@@ -360,56 +396,102 @@ function PurchaseConcurrencyModal({
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>Purchase extra concurrency</DialogHeader>
-        <div className="flex flex-col gap-4 pt-2">
-          <Paragraph variant="base/bright" spacing>
-            You can purchase bundles of {concurrencyPricing.stepSize} concurrency for
-            {formatCurrency(concurrencyPricing.centsPerStep / 100, false)}/month. You’ll be billed
-            monthly, with changes available after a full billing cycle.
-          </Paragraph>
-          <Form method="post">
+        <Form method="post" {...form.props}>
+          <div className="flex flex-col gap-4 pt-2">
+            <Paragraph variant="base/bright" spacing>
+              You can purchase bundles of {concurrencyPricing.stepSize} concurrency for{" "}
+              {formatCurrency(concurrencyPricing.centsPerStep / 100, false)}/month. You’ll be billed
+              monthly, with changes available after a full billing cycle.
+            </Paragraph>
             <Fieldset>
               <InputGroup fullWidth>
                 <Label htmlFor="amount" className="text-text-dimmed">
                   Extra concurrency to purchase
                 </Label>
                 <InputNumberStepper
-                  type="number"
-                  id="amount"
-                  name="amount"
+                  {...conform.input(amount, { type: "number" })}
                   step={concurrencyPricing.stepSize}
                   min={0}
-                  value={amount}
-                  onChange={(e) => setAmount(Number(e.target.value))}
+                  value={amountValue}
+                  onChange={(e) => setAmountValue(Number(e.target.value))}
+                  disabled={isLoading}
                 />
+                <FormError id={amount.errorId}>{amount.error}</FormError>
+                <FormError>{form.error}</FormError>
               </InputGroup>
             </Fieldset>
-          </Form>
-          <div className="flex flex-col">
-            <div className="grid grid-cols-2 border-b border-grid-dimmed pb-1">
-              <Header3 className="font-normal text-text-dimmed">Summary</Header3>
-              <Header3 className="justify-self-end font-normal text-text-dimmed">Total</Header3>
-            </div>
-            <div className="grid grid-cols-2 pt-2">
-              <Header3 className="pb-0 font-normal">{amount}</Header3>
-              <Header3 className="justify-self-end font-normal">
-                {formatCurrency(
-                  (amount * concurrencyPricing.centsPerStep) / concurrencyPricing.stepSize / 100,
-                  false
-                )}
-              </Header3>
-            </div>
-            <div className="grid grid-cols-2 text-xs">
-              <span className="text-text-dimmed">
-                ({amount / concurrencyPricing.stepSize} bundles @{" "}
-                {formatCurrency(concurrencyPricing.centsPerStep / 100, false)}/mth)
-              </span>
-              <span className="justify-self-end text-text-dimmed">/mth</span>
-            </div>
+            {isAboveMaxQuota ? (
+              <div className="flex flex-col pb-3">
+                <Paragraph variant="small" className="text-warning">
+                  Your Org’s total would be {formatNumber(extraConcurrency + amountValue)}{" "}
+                  concurrency. Send us a request to purchase {formatNumber(amountValue - maximum)}{" "}
+                  more, or reduce the amount to buy more today.
+                </Paragraph>
+              </div>
+            ) : (
+              <div className="flex flex-col pb-3">
+                <div className="grid grid-cols-2 border-b border-grid-dimmed pb-1">
+                  <Header3 className="font-normal text-text-dimmed">Summary</Header3>
+                  <Header3 className="justify-self-end font-normal text-text-dimmed">Total</Header3>
+                </div>
+                <div className="grid grid-cols-2 pt-2">
+                  <Header3 className="pb-0 font-normal">{amountValue}</Header3>
+                  <Header3 className="justify-self-end font-normal">
+                    {formatCurrency(
+                      (amountValue * concurrencyPricing.centsPerStep) /
+                        concurrencyPricing.stepSize /
+                        100,
+                      false
+                    )}
+                  </Header3>
+                </div>
+                <div className="grid grid-cols-2 text-xs">
+                  <span className="text-text-dimmed">
+                    ({amountValue / concurrencyPricing.stepSize} bundles @{" "}
+                    {formatCurrency(concurrencyPricing.centsPerStep / 100, false)}/mth)
+                  </span>
+                  <span className="justify-self-end text-text-dimmed">/mth</span>
+                </div>
+              </div>
+            )}
           </div>
-        </div>
-        <DialogFooter>
-          <Button variant="primary/small">Purchase</Button>
-        </DialogFooter>
+          <FormButtons
+            confirmButton={
+              isAboveMaxQuota ? (
+                <>
+                  <input type="hidden" name="action" value="quota-increase" />
+                  <Button
+                    LeadingIcon={isLoading ? SpinnerWhite : EnvelopeIcon}
+                    variant="primary/medium"
+                    type="submit"
+                    disabled={isLoading}
+                  >
+                    {`Send request for ${formatNumber(amountValue - maximum)}`}
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <input type="hidden" name="action" value="purchase" />
+                  <Button
+                    variant="primary/medium"
+                    type="submit"
+                    disabled={isLoading}
+                    LeadingIcon={isLoading ? SpinnerWhite : undefined}
+                  >
+                    Purchase
+                  </Button>
+                </>
+              )
+            }
+            cancelButton={
+              <DialogClose asChild>
+                <Button variant="tertiary/medium" disabled={isLoading}>
+                  Cancel
+                </Button>
+              </DialogClose>
+            }
+          />
+        </Form>
       </DialogContent>
     </Dialog>
   );
diff --git a/apps/webapp/app/v3/services/setConcurrencyAddOn.server.ts b/apps/webapp/app/v3/services/setConcurrencyAddOn.server.ts
