refactor: finalize spend management

Author: gregberge

apps/backend/src/build/job.ts

@@ -53,7 +53,7 @@ async function updateUsage(project: Project) {
   return lock.acquire(["updateUsage", account.id], async () => {
     const [totalScreenshots, spendLimitThreshold] = await Promise.all([
       manager.getCurrentPeriodScreenshots(),
-      getSpendLimitThreshold(account),
+      getSpendLimitThreshold({ account, comparePreviousUsage: true }),
     ]);
 
     await updateStripeUsage({ account, totalScreenshots });

apps/backend/src/database/services/spend-limit.ts

@@ -10,9 +10,16 @@ export type SpendLimitThreshold = (typeof THRESHOLDS)[number];
 /**
  * Get the spend limit threshold that has been reached for the first time.
  */
-export async function getSpendLimitThreshold(
-  account: Account,
-): Promise<SpendLimitThreshold | null> {
+export async function getSpendLimitThreshold(input: {
+  account: Account;
+  /**
+   * Take in account the previous usage to compare with the current usage.
+   * Used to be sure that the threshold has been reached for the first time.
+   * Not needed when it's trigerred by an action.
+   */
+  comparePreviousUsage: boolean;
+}): Promise<SpendLimitThreshold | null> {
+  const { account, comparePreviousUsage } = input;
   const manager = account.$getSubscriptionManager();
 
   if (account.meteredSpendLimitByPeriod === null) {
@@ -21,7 +28,9 @@ export async function getSpendLimitThreshold(
 
   const [currentCost, previousUsageCost] = await Promise.all([
     manager.getAdditionalScreenshotCost(),
-    manager.getAdditionalScreenshotCost({ to: "previousUsage" }),
+    comparePreviousUsage
+      ? manager.getAdditionalScreenshotCost({ to: "previousUsage" })
+      : null,
   ]);
 
   const spendLimit = account.meteredSpendLimitByPeriod;
@@ -30,7 +39,7 @@ export async function getSpendLimitThreshold(
     if (
       // The highest threshold is reached.
       (acc === null || acc < threshold) &&
-      previousUsageCost <= limitAtThreshold &&
+      (previousUsageCost === null || previousUsageCost <= limitAtThreshold) &&
       currentCost > limitAtThreshold
     ) {
       return threshold;

apps/backend/src/database/services/spent-limit.e2e.test.ts

@@ -132,14 +132,20 @@ describe("spent limit", () => {
       });
 
       it("returns null", async () => {
-        const threshold = await getSpendLimitThreshold(account);
+        const threshold = await getSpendLimitThreshold({
+          account,
+          comparePreviousUsage: true,
+        });
         expect(threshold).toBeNull();
       });
     });
 
     describe("with spend limit", () => {
       it("returns the correct threshold", async () => {
-        const threshold = await getSpendLimitThreshold(account);
+        const threshold = await getSpendLimitThreshold({
+          account,
+          comparePreviousUsage: true,
+        });
         expect(threshold).toBe(50);
       });
     });
@@ -152,7 +158,10 @@ describe("spent limit", () => {
       });
 
       it("returns the correct threshold", async () => {
-        const threshold = await getSpendLimitThreshold(account);
+        const threshold = await getSpendLimitThreshold({
+          account,
+          comparePreviousUsage: true,
+        });
         expect(threshold).toBe(50);
       });
     });
@@ -165,8 +174,17 @@ describe("spent limit", () => {
       });
 
       it("returns null", async () => {
-        const threshold = await getSpendLimitThreshold(account);
+        const threshold = await getSpendLimitThreshold({
+          account,
+          comparePreviousUsage: true,
+        });
         expect(threshold).toBeNull();
+
+        const thresholdWihoutPreviousUsage = await getSpendLimitThreshold({
+          account,
+          comparePreviousUsage: false,
+        });
+        expect(thresholdWihoutPreviousUsage).toBe(50);
       });
     });
 
@@ -183,7 +201,10 @@ describe("spent limit", () => {
       });
 
       it("returns the highest threshold reached", async () => {
-        const threshold = await getSpendLimitThreshold(account);
+        const threshold = await getSpendLimitThreshold({
+          account,
+          comparePreviousUsage: true,
+        });
         expect(threshold).toBe(100);
       });
     });

apps/backend/src/graphql/definitions/Account.ts

@@ -14,11 +14,13 @@ import {
   TeamUser,
 } from "@/database/models/index.js";
 import { checkAccountSlug } from "@/database/services/account.js";
+import { getSpendLimitThreshold } from "@/database/services/spend-limit.js";
 import { getGitlabClient, getGitlabClientFromAccount } from "@/gitlab/index.js";
 import {
   getAccountBuildMetrics,
   getAccountScreenshotMetrics,
 } from "@/metrics/account.js";
+import { sendNotification } from "@/notification/index.js";
 import { uninstallSlackInstallation } from "@/slack/index.js";
 import { encodeStripeClientReferenceId } from "@/stripe/index.js";
 
@@ -534,7 +536,54 @@ export const resolvers: IResolvers = {
         }
       }
 
-      return account.$query().patchAndFetch(data);
+      const previousAccount = account.$clone();
+      await account.$query().patchAndFetch(data);
+
+      // If the spend limit has been updated, we may need to notify.
+      if (
+        input.meteredSpendLimitByPeriod !== undefined &&
+        input.meteredSpendLimitByPeriod !== null &&
+        previousAccount.meteredSpendLimitByPeriod !==
+          input.meteredSpendLimitByPeriod
+      ) {
+        await (async () => {
+          const [threshold, previousThreshold] = await Promise.all([
+            getSpendLimitThreshold({
+              account,
+              comparePreviousUsage: false,
+            }),
+            getSpendLimitThreshold({
+              account: previousAccount,
+              comparePreviousUsage: false,
+            }),
+          ]);
+
+          console.log({ threshold, previousThreshold });
+
+          // If there is threshold, we don't need to notify the user.
+          if (!threshold) {
+            return;
+          }
+
+          // If it's the same threshold, we don't need to notify the user.
+          if (threshold === previousThreshold) {
+            return;
+          }
+
+          const owners = await account.$getOwnerIds();
+          await sendNotification({
+            type: "spend_limit",
+            data: {
+              accountName: account.name,
+              accountSlug: account.slug,
+              threshold,
+            },
+            recipients: owners,
+          });
+        })();
+      }
+
+      return account;
     },
     uninstallSlack: async (_root, args, ctx) => {
       const { accountId } = args.input;

apps/backend/src/notification/index.ts

@@ -27,6 +27,9 @@ export async function sendNotification<
    */
   recipients: string[];
 }) {
+  if (input.recipients.length === 0) {
+    throw new Error("No recipients provided");
+  }
   const workflow = await transaction(async (trx) => {
     const workflow = await NotificationWorkflow.query(trx).insertAndFetch({
       type: input.type,

apps/frontend/src/containers/Project/Delete.tsx

@@ -85,6 +85,7 @@ function DeleteProjectButton(props: DeleteProjectButtonProps) {
                       return true;
                     },
                   })}
+                  autoFocus
                   className="mb-4"
                   label={
                     <>

apps/frontend/src/containers/Project/Token.tsx

@@ -178,6 +178,7 @@ function RegenerateTokenDialog(props: {
                   return true;
                 },
               })}
+              autoFocus
               className="mb-4"
               label={
                 <>

apps/frontend/src/containers/Team/Delete.tsx

@@ -122,6 +122,7 @@ function TeamDeleteDialog(props: DeleteTeamButtonProps) {
                 },
               })}
               className="mb-4"
+              autoFocus
               label={
                 <>
                   Enter the team name <strong>{props.teamSlug}</strong> to