From f78f10b63d93701f1787b2cab557ec732e8d35bc Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Sat, 4 Jan 2025 19:18:16 -0800
Subject: [PATCH] Add mutatePrefix and mutateSuffix

---
 .../[programId]/payouts/payout-stats.tsx      |  2 +-
 .../[slug]/settings/domains/page-client.tsx   |  2 +-
 .../[slug]/settings/library/tags/tag-card.tsx | 14 +----
 .../onboarding/(steps)/link/form.tsx          |  8 +--
 apps/web/lib/swr/mutate.ts                    | 27 ++++++++
 apps/web/lib/swr/use-workspace.ts             |  9 ++-
 apps/web/ui/domains/add-edit-domain-form.tsx  | 12 +---
 apps/web/ui/domains/register-domain-form.tsx  | 15 ++---
 apps/web/ui/layout/sidebar/usage.tsx          |  2 +-
 apps/web/ui/links/link-controls.tsx           |  9 +--
 apps/web/ui/modals/accept-invite-modal.tsx    |  7 +--
 apps/web/ui/modals/add-edit-tag-modal.tsx     | 17 +----
 apps/web/ui/modals/archive-domain-modal.tsx   | 14 +----
 apps/web/ui/modals/archive-link-modal.tsx     | 14 +----
 apps/web/ui/modals/delete-domain-modal.tsx    |  9 +--
 apps/web/ui/modals/delete-link-modal.tsx      |  9 +--
 apps/web/ui/modals/import-csv-modal/index.tsx | 11 ++--
 apps/web/ui/modals/link-builder/index.tsx     | 21 ++-----
 apps/web/ui/modals/modal-provider.tsx         |  8 +--
 apps/web/ui/modals/transfer-domain-modal.tsx  |  8 +--
 apps/web/ui/modals/transfer-link-modal.tsx    |  8 +--
 apps/web/ui/partners/create-payout-sheet.tsx  | 11 +---
 .../web/ui/partners/partner-details-sheet.tsx | 20 ++----
 apps/web/ui/partners/partner-row-item.tsx     | 63 +++++++++++--------
 apps/web/ui/partners/program-invite-card.tsx  |  8 +--
 apps/web/ui/partners/sale-row-menu.tsx        | 12 ++--
 26 files changed, 135 insertions(+), 205 deletions(-)
 create mode 100644 apps/web/lib/swr/mutate.ts

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-stats.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-stats.tsx
index d340ad2479..a9dd685196 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-stats.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/payouts/payout-stats.tsx
@@ -57,7 +57,7 @@ export function PayoutStats() {
               text="Confirm payouts"
               className="h-7 w-fit px-2"
               onClick={() => setIsOpen(true)}
-              disabled={confirmButtonDisabled}
+              disabled={eligiblePayoutsLoading || confirmButtonDisabled}
               disabledTooltip={
                 confirmButtonDisabled ? (
                   "You have no pending payouts that match the minimum payout requirement for partners that have payouts enabled."
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/page-client.tsx
index 1795d92ebb..4d023b487e 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/domains/page-client.tsx
@@ -251,7 +251,7 @@ export default function WorkspaceDomainsClient() {
             )
           ) : (
             <ul className="grid grid-cols-1 gap-3">
-              {Array.from({ length: 10 }).map((_, idx) => (
+              {Array.from({ length: 5 }).map((_, idx) => (
                 <li key={idx}>
                   <DomainCardPlaceholder />
                 </li>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx
index 4d5a7d2720..074409967c 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/library/tags/tag-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { TagProps } from "@/lib/types";
 import TagBadge from "@/ui/links/tag-badge";
@@ -17,7 +18,6 @@ import { cn, nFormatter, pluralize } from "@dub/utils";
 import Link from "next/link";
 import { useContext, useState } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { TagsListContext } from "./page-client";
 
 export function TagCard({
@@ -64,16 +64,8 @@ export function TagCard({
       .then(async (res) => {
         if (res.ok) {
           await Promise.all([
-            mutate(
-              (key) => typeof key === "string" && key.startsWith("/api/tags"),
-              undefined,
-              { revalidate: true },
-            ),
-            mutate(
-              (key) => typeof key === "string" && key.startsWith("/api/links"),
-              undefined,
-              { revalidate: true },
-            ),
+            mutatePrefix("/api/tags"),
+            mutatePrefix("/api/links"),
           ]);
           toast.success("Tag deleted");
         } else {
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx
index 0cf3450d87..e55f20e9f7 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/link/form.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { DestinationUrlInput } from "@/ui/links/destination-url-input";
 import { ShortLinkInput } from "@/ui/links/short-link-input";
@@ -12,7 +13,6 @@ import posthog from "posthog-js";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { useDebounce } from "use-debounce";
 import { LaterButton } from "../../later-button";
 import { useOnboardingProgress } from "../../use-onboarding-progress";
@@ -130,11 +130,7 @@ export function Form() {
             throw new Error(error);
           }
 
-          await mutate(
-            (key) => typeof key === "string" && key.startsWith("/api/links"),
-            undefined,
-            { revalidate: true },
-          );
+          await mutatePrefix("/api/links");
           const result = await res.json();
           posthog.capture("link_created", result);
 
diff --git a/apps/web/lib/swr/mutate.ts b/apps/web/lib/swr/mutate.ts
new file mode 100644
index 0000000000..496ba28b95
--- /dev/null
+++ b/apps/web/lib/swr/mutate.ts
@@ -0,0 +1,27 @@
+import { mutate } from "swr";
+
+export const mutatePrefix = async (prefix: string | string[]) => {
+  await mutate(
+    (key) =>
+      typeof key === "string" &&
+      (Array.isArray(prefix)
+        ? prefix.some((p) => key.startsWith(p))
+        : key.startsWith(prefix)),
+    undefined,
+    { revalidate: true },
+  );
+};
+
+export const mutateSuffix = async (suffix: string | string[]) => {
+  await mutate(
+    (key) =>
+      typeof key === "string" &&
+      (Array.isArray(suffix)
+        ? suffix.some((s) => key.endsWith(s))
+        : key.endsWith(suffix)),
+    undefined,
+    {
+      revalidate: true,
+    },
+  );
+};
diff --git a/apps/web/lib/swr/use-workspace.ts b/apps/web/lib/swr/use-workspace.ts
index b777852b45..cfb5fedbb3 100644
--- a/apps/web/lib/swr/use-workspace.ts
+++ b/apps/web/lib/swr/use-workspace.ts
@@ -1,9 +1,13 @@
 import { ExpandedWorkspaceProps } from "@/lib/types";
 import { PRO_PLAN, fetcher, getNextPlan } from "@dub/utils";
 import { useParams, useSearchParams } from "next/navigation";
-import useSWR from "swr";
+import useSWR, { SWRConfiguration } from "swr";
 
-export default function useWorkspace() {
+export default function useWorkspace({
+  swrOpts,
+}: {
+  swrOpts?: SWRConfiguration;
+} = {}) {
   let { slug } = useParams() as { slug: string | null };
   const searchParams = useSearchParams();
   if (!slug) {
@@ -19,6 +23,7 @@ export default function useWorkspace() {
     fetcher,
     {
       dedupingInterval: 60000,
+      ...swrOpts,
     },
   );
 
diff --git a/apps/web/ui/domains/add-edit-domain-form.tsx b/apps/web/ui/domains/add-edit-domain-form.tsx
index 522b59e2e5..652c12665e 100644
--- a/apps/web/ui/domains/add-edit-domain-form.tsx
+++ b/apps/web/ui/domains/add-edit-domain-form.tsx
@@ -1,4 +1,5 @@
 import { isValidDomain } from "@/lib/api/domains";
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainProps } from "@/lib/types";
 import { createDomainBodySchema } from "@/lib/zod/schemas/domains";
@@ -29,7 +30,6 @@ import posthog from "posthog-js";
 import { useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { useDebouncedCallback } from "use-debounce";
 import { z } from "zod";
 import { QRCode } from "../shared/qr-code";
@@ -165,14 +165,8 @@ export function AddEditDomainForm({
 
       if (res.ok) {
         await Promise.all([
-          mutate(
-            (key) => typeof key === "string" && key.startsWith("/api/domains"),
-          ),
-          mutate(
-            (key) => typeof key === "string" && key.startsWith("/api/links"),
-            undefined,
-            { revalidate: true },
-          ),
+          mutatePrefix("/api/domains"),
+          mutatePrefix("/api/links"),
         ]);
         const data = await res.json();
         posthog.capture(props ? "domain_updated" : "domain_created", data);
diff --git a/apps/web/ui/domains/register-domain-form.tsx b/apps/web/ui/domains/register-domain-form.tsx
index b3e5b8c2a5..3e9952cd96 100644
--- a/apps/web/ui/domains/register-domain-form.tsx
+++ b/apps/web/ui/domains/register-domain-form.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import {
   AnimatedSizeContainer,
@@ -13,7 +14,6 @@ import { CircleCheck, Star } from "lucide-react";
 import Link from "next/link";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { useDebounce } from "use-debounce";
 import { AlertCircleFill, CheckCircleFill } from "../shared/icons";
 import { ProBadgeTooltip } from "../shared/pro-badge-tooltip";
@@ -107,15 +107,10 @@ export function RegisterDomainForm({
       toast.success("Domain registered successfully!");
 
       // Mutate workspace, domains, and links
-      await Promise.all([
-        mutate(`/api/workspaces/${workspace.slug}`),
-        mutate(
-          (key) =>
-            typeof key === "string" &&
-            (key.startsWith("/api/domains") || key.startsWith("/api/links")),
-          undefined,
-          { revalidate: true },
-        ),
+      await mutatePrefix([
+        `/api/workspaces/${workspace.slug}`,
+        "/api/domains",
+        "/api/links",
       ]);
     }
 
diff --git a/apps/web/ui/layout/sidebar/usage.tsx b/apps/web/ui/layout/sidebar/usage.tsx
index f3dde22b63..8711f434ea 100644
--- a/apps/web/ui/layout/sidebar/usage.tsx
+++ b/apps/web/ui/layout/sidebar/usage.tsx
@@ -36,7 +36,7 @@ function UsageInner() {
     slug,
     paymentFailedAt,
     loading,
-  } = useWorkspace();
+  } = useWorkspace({ swrOpts: { keepPreviousData: true } });
 
   const [billingEnd] = useMemo(() => {
     if (billingCycleStart) {
diff --git a/apps/web/ui/links/link-controls.tsx b/apps/web/ui/links/link-controls.tsx
index 6673d2197b..c6f4c233b0 100644
--- a/apps/web/ui/links/link-controls.tsx
+++ b/apps/web/ui/links/link-controls.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import { useArchiveLinkModal } from "@/ui/modals/archive-link-modal";
 import { useDeleteLinkModal } from "@/ui/modals/delete-link-modal";
 import {
@@ -16,7 +17,6 @@ import { CopyPlus, Delete, FolderInput } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useContext } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { useLinkBuilder } from "../modals/link-builder";
 import { useLinkQRModal } from "../modals/link-qr-modal";
 import { useTransferLinkModal } from "../modals/transfer-link-modal";
@@ -90,12 +90,7 @@ export function LinkControls({ link }: { link: ResponseLink }) {
         fetch(`/api/admin/links/ban?domain=${link.domain}&key=${link.key}`, {
           method: "DELETE",
         }).then(async () => {
-          await mutate(
-            (key) =>
-              typeof key === "string" && key.startsWith("/api/admin/links"),
-            undefined,
-            { revalidate: true },
-          );
+          await mutatePrefix("/api/admin/links");
         }),
         {
           loading: "Banning link...",
diff --git a/apps/web/ui/modals/accept-invite-modal.tsx b/apps/web/ui/modals/accept-invite-modal.tsx
index 18be07adcd..3bc0e83530 100644
--- a/apps/web/ui/modals/accept-invite-modal.tsx
+++ b/apps/web/ui/modals/accept-invite-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { Button, Logo, Modal } from "@dub/ui";
 import { useSession } from "next-auth/react";
@@ -11,7 +12,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 function AcceptInviteModal({
   showAcceptInviteModal,
@@ -61,10 +61,7 @@ function AcceptInviteModal({
                   posthog.capture("accepted_workspace_invite", {
                     workspace: slug,
                   });
-                  await Promise.all([
-                    mutate("/api/workspaces"),
-                    mutate(`/api/workspaces/${slug}`),
-                  ]);
+                  await mutatePrefix("/api/workspaces");
                   router.replace(`/${slug}`);
                   setShowAcceptInviteModal(false);
                   toast.success("You now are a part of this workspace!");
diff --git a/apps/web/ui/modals/add-edit-tag-modal.tsx b/apps/web/ui/modals/add-edit-tag-modal.tsx
index df5b6fc05c..1c64269f10 100644
--- a/apps/web/ui/modals/add-edit-tag-modal.tsx
+++ b/apps/web/ui/modals/add-edit-tag-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useTags from "@/lib/swr/use-tags";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { TagColorProps, TagProps } from "@/lib/types";
@@ -23,7 +24,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { COLORS_LIST, randomBadgeColor } from "../links/tag-badge";
 
 function AddEditTagModal({
@@ -122,20 +122,7 @@ function AddEditTagModal({
                 tag_name: data.name,
                 tag_color: data.color,
               });
-              await Promise.all([
-                mutate(
-                  (key) =>
-                    typeof key === "string" && key.startsWith("/api/tags"),
-                  undefined,
-                  { revalidate: true },
-                ),
-                mutate(
-                  (key) =>
-                    typeof key === "string" && key.startsWith("/api/links"),
-                  undefined,
-                  { revalidate: true },
-                ),
-              ]);
+              await mutatePrefix(["/api/tags", "/api/links"]);
               toast.success(endpoint.successMessage);
               setShowAddEditTagModal(false);
             } else {
diff --git a/apps/web/ui/modals/archive-domain-modal.tsx b/apps/web/ui/modals/archive-domain-modal.tsx
index eba47b4f43..2132647213 100644
--- a/apps/web/ui/modals/archive-domain-modal.tsx
+++ b/apps/web/ui/modals/archive-domain-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainProps } from "@/lib/types";
 import { Button, LinkLogo, Modal, useToastWithUndo } from "@dub/ui";
@@ -10,7 +11,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 const sendArchiveRequest = ({
   domain,
@@ -31,14 +31,6 @@ const sendArchiveRequest = ({
   });
 };
 
-const revalidateDomains = () => {
-  return mutate(
-    (key) => typeof key === "string" && key.startsWith("/api/domains"),
-    undefined,
-    { revalidate: true },
-  );
-};
-
 function ArchiveDomainModal({
   showArchiveDomainModal,
   setShowArchiveDomainModal,
@@ -71,7 +63,7 @@ function ArchiveDomainModal({
       return;
     }
 
-    revalidateDomains();
+    mutatePrefix("/api/domains");
     setShowArchiveDomainModal(false);
     toastWithUndo({
       id: "domain-archive-undo-toast",
@@ -92,7 +84,7 @@ function ArchiveDomainModal({
         loading: "Undo in progress...",
         error: "Failed to roll back changes. An error occurred.",
         success: () => {
-          revalidateDomains();
+          mutatePrefix("/api/domains");
           return "Undo successful! Changes reverted.";
         },
       },
diff --git a/apps/web/ui/modals/archive-link-modal.tsx b/apps/web/ui/modals/archive-link-modal.tsx
index 1a5a8bdf9e..75f613c0d7 100644
--- a/apps/web/ui/modals/archive-link-modal.tsx
+++ b/apps/web/ui/modals/archive-link-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { LinkProps } from "@/lib/types";
 import { Button, LinkLogo, Modal, useToastWithUndo } from "@dub/ui";
@@ -11,7 +12,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 const sendArchiveRequest = ({
   linkId,
@@ -31,14 +31,6 @@ const sendArchiveRequest = ({
   });
 };
 
-const revalidateLinks = () => {
-  return mutate(
-    (key) => typeof key === "string" && key.startsWith("/api/links"),
-    undefined,
-    { revalidate: true },
-  );
-};
-
 type ArchiveLinkModalProps = {
   showArchiveLinkModal: boolean;
   setShowArchiveLinkModal: Dispatch<SetStateAction<boolean>>;
@@ -93,7 +85,7 @@ function ArchiveLinkModalInner({
       return;
     }
 
-    revalidateLinks();
+    mutatePrefix("/api/links");
     setShowArchiveLinkModal(false);
     toastWithUndo({
       id: "link-archive-undo-toast",
@@ -114,7 +106,7 @@ function ArchiveLinkModalInner({
         loading: "Undo in progress...",
         error: "Failed to roll back changes. An error occurred.",
         success: () => {
-          revalidateLinks();
+          mutatePrefix("/api/links");
           return "Undo successful! Changes reverted.";
         },
       },
diff --git a/apps/web/ui/modals/delete-domain-modal.tsx b/apps/web/ui/modals/delete-domain-modal.tsx
index 98de227981..ace31a696a 100644
--- a/apps/web/ui/modals/delete-domain-modal.tsx
+++ b/apps/web/ui/modals/delete-domain-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { DomainProps } from "@/lib/types";
 import { Button, LinkLogo, Modal, useMediaQuery } from "@dub/ui";
@@ -9,7 +10,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 function DeleteDomainModal({
   showDeleteDomainModal,
@@ -59,12 +59,7 @@ function DeleteDomainModal({
             method: "DELETE",
           }).then(async (res) => {
             if (res.status === 200) {
-              await mutate(
-                (key) =>
-                  typeof key === "string" && key.startsWith("/api/domains"),
-                undefined,
-                { revalidate: true },
-              );
+              await mutatePrefix("/api/domains");
               setShowDeleteDomainModal(false);
               toast.success("Successfully deleted domain!");
             } else {
diff --git a/apps/web/ui/modals/delete-link-modal.tsx b/apps/web/ui/modals/delete-link-modal.tsx
index c73664bcc3..656eb0a4ac 100644
--- a/apps/web/ui/modals/delete-link-modal.tsx
+++ b/apps/web/ui/modals/delete-link-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { LinkProps } from "@/lib/types";
 import { Button, LinkLogo, Modal, useMediaQuery } from "@dub/ui";
@@ -10,7 +11,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 type DeleteLinkModalProps = {
   showDeleteLinkModal: boolean;
@@ -68,12 +68,7 @@ function DeleteLinkModalInner({
             method: "DELETE",
           }).then(async (res) => {
             if (res.status === 200) {
-              await mutate(
-                (key) =>
-                  typeof key === "string" && key.startsWith("/api/links"),
-                undefined,
-                { revalidate: true },
-              );
+              await mutatePrefix("/api/links");
               setShowDeleteLinkModal(false);
               toast.success("Successfully deleted shortlink!");
             } else {
diff --git a/apps/web/ui/modals/import-csv-modal/index.tsx b/apps/web/ui/modals/import-csv-modal/index.tsx
index 92a4b0ca1f..04f09cbe70 100644
--- a/apps/web/ui/modals/import-csv-modal/index.tsx
+++ b/apps/web/ui/modals/import-csv-modal/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import {
   AnimatedSizeContainer,
@@ -228,12 +229,10 @@ function ImportCsvModal({
                     if (!res.ok) throw new Error();
 
                     router.push(`/${slug}`);
-                    mutate(
-                      (key) =>
-                        typeof key === "string" &&
-                        (key.startsWith("/api/links") ||
-                          key.startsWith("/api/domains")),
-                    );
+                    await Promise.all([
+                      mutatePrefix("/api/links"),
+                      mutate(`/api/workspaces/${slug}`),
+                    ]);
 
                     toast.success(
                       "Successfully added links to import queue! You can now safely navigate from this tab – we will send you an email when your links have been fully imported.",
diff --git a/apps/web/ui/modals/link-builder/index.tsx b/apps/web/ui/modals/link-builder/index.tsx
index 3ff9b7d6bb..1c8fcf1cf5 100644
--- a/apps/web/ui/modals/link-builder/index.tsx
+++ b/apps/web/ui/modals/link-builder/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { ExpandedLinkProps } from "@/lib/types";
 import { DestinationUrlInput } from "@/ui/links/destination-url-input";
@@ -268,23 +269,13 @@ function LinkBuilderInner({
 
                 if (res.status === 200) {
                   await Promise.all([
-                    mutate(
-                      (key) =>
-                        typeof key === "string" && key.startsWith("/api/links"),
-                      undefined,
-                      { revalidate: true },
-                    ),
+                    mutatePrefix([
+                      "/api/links",
+                      // if updating root domain link, mutate domains as well
+                      ...(key === "_root" ? ["/api/domains"] : []),
+                    ]),
                     // Mutate workspace to update usage stats
                     mutate(`/api/workspaces/${slug}`),
-                    // if updating root domain link, mutate domains as well
-                    key === "_root" &&
-                      mutate(
-                        (key) =>
-                          typeof key === "string" &&
-                          key.startsWith("/api/domains"),
-                        undefined,
-                        { revalidate: true },
-                      ),
                   ]);
                   const data = await res.json();
                   posthog.capture(
diff --git a/apps/web/ui/modals/modal-provider.tsx b/apps/web/ui/modals/modal-provider.tsx
index acca45aac9..eff89fe6bc 100644
--- a/apps/web/ui/modals/modal-provider.tsx
+++ b/apps/web/ui/modals/modal-provider.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import useWorkspaces from "@/lib/swr/use-workspaces";
 import { SimpleLinkProps } from "@/lib/types";
@@ -23,7 +24,6 @@ import {
   useMemo,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { useAddEditTagModal } from "./add-edit-tag-modal";
 import { useImportRebrandlyModal } from "./import-rebrandly-modal";
 import { useLinkBuilder } from "./link-builder";
@@ -121,11 +121,7 @@ function ModalProviderClient({ children }: { children: ReactNode }) {
           body: JSON.stringify(hashes),
         }).then(async (res) => {
           if (res.status === 200) {
-            await mutate(
-              (key) => typeof key === "string" && key.startsWith("/api/links"),
-              undefined,
-              { revalidate: true },
-            );
+            await mutatePrefix("/api/links");
             setHashes([]);
           }
         }),
diff --git a/apps/web/ui/modals/transfer-domain-modal.tsx b/apps/web/ui/modals/transfer-domain-modal.tsx
index 1f78c39519..edcbc5597c 100644
--- a/apps/web/ui/modals/transfer-domain-modal.tsx
+++ b/apps/web/ui/modals/transfer-domain-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import useWorkspaces from "@/lib/swr/use-workspaces";
 import { DomainProps } from "@/lib/types";
@@ -17,7 +18,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 function TransferDomainModal({
   showTransferDomainModal,
@@ -48,11 +48,7 @@ function TransferDomainModal({
       },
     ).then(async (res) => {
       if (res.ok) {
-        mutate(
-          (key) => typeof key === "string" && key.startsWith("/api/domains"),
-          undefined,
-          { revalidate: true },
-        );
+        mutatePrefix("/api/domains");
         setShowTransferDomainModal(false);
         return true;
       } else {
diff --git a/apps/web/ui/modals/transfer-link-modal.tsx b/apps/web/ui/modals/transfer-link-modal.tsx
index 789fd05b79..879329df05 100644
--- a/apps/web/ui/modals/transfer-link-modal.tsx
+++ b/apps/web/ui/modals/transfer-link-modal.tsx
@@ -1,3 +1,4 @@
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import useWorkspaces from "@/lib/swr/use-workspaces";
 import { LinkProps } from "@/lib/types";
@@ -23,7 +24,6 @@ import {
   useState,
 } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 type TransferLinkModalProps = {
   showTransferLinkModal: boolean;
@@ -72,11 +72,7 @@ function TransferLinkModalInner({
       body: JSON.stringify({ newWorkspaceId }),
     }).then(async (res) => {
       if (res.ok) {
-        mutate(
-          (key) => typeof key === "string" && key.startsWith("/api/links"),
-          undefined,
-          { revalidate: true },
-        );
+        mutatePrefix("/api/links");
         setShowTransferLinkModal(false);
         return true;
       } else {
diff --git a/apps/web/ui/partners/create-payout-sheet.tsx b/apps/web/ui/partners/create-payout-sheet.tsx
index fdb17e961c..10b81a1df7 100644
--- a/apps/web/ui/partners/create-payout-sheet.tsx
+++ b/apps/web/ui/partners/create-payout-sheet.tsx
@@ -3,6 +3,7 @@
 import { createManualPayoutAction } from "@/lib/actions/partners/create-manual-payout";
 import { AnalyticsResponseOptions } from "@/lib/analytics/types";
 import { calculateEarnings } from "@/lib/api/sales/calculate-earnings";
+import { mutatePrefix } from "@/lib/swr/mutate";
 import usePartners from "@/lib/swr/use-partners";
 import useProgram from "@/lib/swr/use-program";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -48,7 +49,7 @@ import {
 } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 import { z } from "zod";
 
 interface CreatePayoutSheetProps {
@@ -116,13 +117,7 @@ function CreatePayoutSheetContent({
     onSuccess: async (res) => {
       toast.success("Successfully created payout!");
       setIsOpen(false);
-      await mutate(
-        (key) =>
-          typeof key === "string" &&
-          key.startsWith(`/api/programs/${program?.id}/payouts`),
-        undefined,
-        { revalidate: true },
-      );
+      await mutatePrefix(`/api/programs/${program?.id}/payouts`);
 
       const payoutId = res.data?.id;
 
diff --git a/apps/web/ui/partners/partner-details-sheet.tsx b/apps/web/ui/partners/partner-details-sheet.tsx
index a150d0c026..47815b475f 100644
--- a/apps/web/ui/partners/partner-details-sheet.tsx
+++ b/apps/web/ui/partners/partner-details-sheet.tsx
@@ -1,6 +1,7 @@
 import { approvePartnerAction } from "@/lib/actions/partners/approve-partner";
 import { rejectPartnerAction } from "@/lib/actions/partners/reject-partner";
 import { SHEET_MAX_ITEMS } from "@/lib/partners/constants";
+import { mutatePrefix } from "@/lib/swr/mutate";
 import usePayouts from "@/lib/swr/use-payouts";
 import useProgram from "@/lib/swr/use-program";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -30,7 +31,6 @@ import { useAction } from "next-safe-action/hooks";
 import Link from "next/link";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 import { AnimatedEmptyState } from "../shared/animated-empty-state";
 import { useCreatePayoutSheet } from "./create-payout-sheet";
 import { PartnerLinkSelector } from "./partner-link-selector";
@@ -258,13 +258,7 @@ function PartnerApproval({
 
   const { executeAsync, isExecuting } = useAction(approvePartnerAction, {
     onSuccess() {
-      mutate(
-        (key) =>
-          typeof key === "string" &&
-          key.startsWith(`/api/programs/${partner.programId}/partners`),
-        undefined,
-        { revalidate: true },
-      );
+      mutatePrefix(`/api/programs/${partner.programId}/partners`);
 
       toast.success("Approved the partner successfully.");
       setIsOpen(false);
@@ -400,14 +394,8 @@ function PartnerRejectButton({
   const { id: workspaceId } = useWorkspace();
 
   const { executeAsync, isExecuting } = useAction(rejectPartnerAction, {
-    onSuccess() {
-      mutate(
-        (key) =>
-          typeof key === "string" &&
-          key.startsWith(`/api/programs/${partner.programId}/partners`),
-        undefined,
-        { revalidate: true },
-      );
+    onSuccess: async () => {
+      await mutatePrefix(`/api/programs/${partner.programId}/partners`);
 
       toast.success("Partner rejected successfully.");
       setIsOpen(false);
diff --git a/apps/web/ui/partners/partner-row-item.tsx b/apps/web/ui/partners/partner-row-item.tsx
index 4b10a71e02..8d63ed56d7 100644
--- a/apps/web/ui/partners/partner-row-item.tsx
+++ b/apps/web/ui/partners/partner-row-item.tsx
@@ -1,41 +1,54 @@
 import { PartnerProps } from "@/lib/types";
-import { Tooltip } from "@dub/ui";
-import { GreekTemple } from "@dub/ui/icons";
+import { GreekTemple, Tooltip } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { DICEBEAR_AVATAR_URL } from "@dub/utils/src/constants";
 import { CircleMinus } from "lucide-react";
 
 export function PartnerRowItem({ partner }: { partner: PartnerProps }) {
   return (
-    <div className="flex items-center gap-4">
-      <div className="flex items-center gap-2">
-        <img
-          src={partner.image || `${DICEBEAR_AVATAR_URL}${partner.name}`}
-          alt={partner.name}
-          className="size-5 rounded-full"
-        />
-        <div>{partner.name}</div>
-      </div>
+    <div className="flex items-center gap-2">
       <Tooltip
         content={
-          partner.payoutsEnabled
-            ? "This partner has payouts enabled"
-            : "This partner does not have payouts enabled, which means they will not be able to receive any payouts from this program"
+          <div className="grid max-w-xs gap-2 p-4">
+            <div className="flex items-center gap-2 text-sm font-medium">
+              Payouts {partner.payoutsEnabled ? "enabled" : "disabled"}
+              <div
+                className={cn(
+                  "flex size-5 items-center justify-center rounded-md border border-green-300 bg-green-200 text-green-800",
+                  !partner.payoutsEnabled &&
+                    "border-red-300 bg-red-200 text-red-800",
+                )}
+              >
+                {partner.payoutsEnabled ? (
+                  <GreekTemple className="size-3" />
+                ) : (
+                  <CircleMinus className="size-3" />
+                )}
+              </div>
+            </div>
+            <div className="text-pretty text-sm text-neutral-500">
+              {partner.payoutsEnabled
+                ? "This partner has payouts enabled, which means they will be able to receive payouts from this program"
+                : "This partner does not have payouts enabled, which means they will not be able to receive any payouts from this program"}
+            </div>
+          </div>
         }
       >
-        <div
-          className={cn(
-            "flex size-6 items-center justify-center rounded-md border border-green-200 bg-green-100 text-green-800",
-            !partner.payoutsEnabled && "border-red-200 bg-red-100 text-red-800",
-          )}
-        >
-          {partner.payoutsEnabled ? (
-            <GreekTemple className="size-3" />
-          ) : (
-            <CircleMinus className="size-3" />
-          )}
+        <div className="relative">
+          <img
+            src={partner.image || `${DICEBEAR_AVATAR_URL}${partner.name}`}
+            alt={partner.name}
+            className="size-5 rounded-full"
+          />
+          <div
+            className={cn(
+              "absolute -bottom-0.5 -right-0.5 size-2 rounded-full bg-green-500",
+              !partner.payoutsEnabled && "bg-red-500",
+            )}
+          />
         </div>
       </Tooltip>
+      <div>{partner.name}</div>
     </div>
   );
 }
diff --git a/apps/web/ui/partners/program-invite-card.tsx b/apps/web/ui/partners/program-invite-card.tsx
index 8c7b42d513..13a31ed43b 100644
--- a/apps/web/ui/partners/program-invite-card.tsx
+++ b/apps/web/ui/partners/program-invite-card.tsx
@@ -1,11 +1,11 @@
 import { acceptProgramInviteAction } from "@/lib/actions/partners/accept-program-invite";
+import { mutateSuffix } from "@/lib/swr/mutate";
 import { PartnerProgramInviteProps } from "@/lib/types";
 import { ProgramCommissionDescription } from "@/ui/partners/program-commission-description";
 import { BlurImage, Button, StatusBadge } from "@dub/ui";
 import { DICEBEAR_AVATAR_URL } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 export function ProgramInviteCard({
   invite,
@@ -15,11 +15,7 @@ export function ProgramInviteCard({
   const { executeAsync, isExecuting } = useAction(acceptProgramInviteAction, {
     onSuccess: () => {
       toast.success("Program invite accepted!");
-      mutate(
-        (key) => typeof key === "string" && key.endsWith("/programs"),
-        undefined,
-        { revalidate: true },
-      );
+      mutateSuffix("/programs");
     },
     onError: ({ error }) => {
       toast.error(error.serverError);
diff --git a/apps/web/ui/partners/sale-row-menu.tsx b/apps/web/ui/partners/sale-row-menu.tsx
index 4fd0432380..7b8a8992cb 100644
--- a/apps/web/ui/partners/sale-row-menu.tsx
+++ b/apps/web/ui/partners/sale-row-menu.tsx
@@ -1,4 +1,5 @@
 import { updateSaleStatusAction } from "@/lib/actions/partners/update-sale-status";
+import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { SaleResponse } from "@/lib/types";
 import { Button, Icon, Popover } from "@dub/ui";
@@ -15,7 +16,6 @@ import { useAction } from "next-safe-action/hooks";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
-import { mutate } from "swr";
 
 export function SaleRowMenu({ row }: { row: Row<SaleResponse> }) {
   const { id: workspaceId } = useWorkspace();
@@ -24,12 +24,10 @@ export function SaleRowMenu({ row }: { row: Row<SaleResponse> }) {
 
   const { executeAsync } = useAction(updateSaleStatusAction, {
     onSuccess: async () => {
-      mutate(
-        (key) =>
-          typeof key === "string" &&
-          (key.startsWith(`/api/programs/${programId}/sales`) ||
-            key.startsWith(`/api/programs/${programId}/payouts`)),
-      );
+      await mutatePrefix([
+        `/api/programs/${programId}/payouts`,
+        `/api/programs/${programId}/sales`,
+      ]);
     },
   });