canManageCustomers

Author: steven-tey

apps/web/lib/plan-capabilities.ts

@@ -7,5 +7,6 @@ export const getPlanCapabilities = (
   return {
     canAddFolder: plan && !["free"].includes(plan),
     canManageFolderPermissions: plan && !["free", "pro"].includes(plan), // default access level is write
+    canManageCustomers: plan && !["free", "pro"].includes(plan),
   };
 };

apps/web/lib/swr/use-customers.ts

@@ -1,6 +1,7 @@
 import { fetcher } from "@dub/utils";
 import useSWR from "swr";
 import { z } from "zod";
+import { getPlanCapabilities } from "../plan-capabilities";
 import { CustomerProps } from "../types";
 import { getCustomersQuerySchemaExtended } from "../zod/schemas/customers";
 import useWorkspace from "./use-workspace";
@@ -14,10 +15,11 @@ export default function useCustomers({
   query?: z.infer<typeof partialQuerySchema>;
   enabled?: boolean;
 } = {}) {
-  const { id: workspaceId } = useWorkspace();
+  const { id: workspaceId, plan } = useWorkspace();
+  const { canManageCustomers } = getPlanCapabilities(plan);
 
   const { data: customers, error } = useSWR<CustomerProps[]>(
-    enabled && workspaceId
+    enabled && workspaceId && canManageCustomers
       ? `/api/customers?${new URLSearchParams({
           workspaceId: workspaceId,
           ...query,

apps/web/ui/analytics/toggle.tsx

@@ -7,6 +7,7 @@ import {
 } from "@/lib/analytics/constants";
 import { validDateRangeForPlan } from "@/lib/analytics/utils";
 import { getStartEndDates } from "@/lib/analytics/utils/get-start-end-dates";
+import { getPlanCapabilities } from "@/lib/plan-capabilities";
 import useCustomer from "@/lib/swr/use-customer";
 import useCustomers from "@/lib/swr/use-customers";
 import useCustomersCount from "@/lib/swr/use-customers-count";
@@ -159,6 +160,7 @@ export default function Toggle({
           : "",
     },
   });
+  const { canManageCustomers } = getPlanCapabilities(plan);
 
   const {
     allDomains: domains,
@@ -414,21 +416,20 @@ export default function Toggle({
           ? `/${slug}/customers/${selectedCustomerId}`
           : null;
     },
-    options: customers?.map(({ id, email, name, avatar }) => {
-      return {
-        value: id,
-        label: email ?? name,
-        icon: (
-          <img
-            src={avatar || `${OG_AVATAR_URL}${id}`}
-            alt={`${email} avatar`}
-            className="size-4 rounded-full"
-          />
-        ),
-      };
-    }) ?? [
-      { value: selectedCustomerId, label: selectedCustomerId, icon: User },
-    ],
+    options:
+      customers?.map(({ id, email, name, avatar }) => {
+        return {
+          value: id,
+          label: email ?? name,
+          icon: (
+            <img
+              src={avatar || `${OG_AVATAR_URL}${id}`}
+              alt={`${email} avatar`}
+              className="size-4 rounded-full"
+            />
+          ),
+        };
+      }) ?? null,
   };
 
   const filters: ComponentProps<typeof Filter.Select>["filters"] = useMemo(
@@ -450,7 +451,7 @@ export default function Toggle({
         : partnerPage
           ? [LinkFilterItem, CustomerFilterItem]
           : [
-              CustomerFilterItem,
+              ...(canManageCustomers ? [CustomerFilterItem] : []),
               ...(flags?.linkFolders
                 ? [
                     {