Add internal approved_invited status to show both approved and invited statuses (dubinc#3718)

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx

@@ -8,6 +8,7 @@ import usePartnersCount from "@/lib/swr/use-partners-count";
 import useProgram from "@/lib/swr/use-program";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { EnrolledPartnerProps } from "@/lib/types";
+import { ACTIVE_ENROLLMENT_STATUSES } from "@/lib/zod/schemas/partners";
 import { useArchivePartnerModal } from "@/ui/modals/archive-partner-modal";
 import { useBanPartnerModal } from "@/ui/modals/ban-partner-modal";
 import { useBulkArchivePartnersModal } from "@/ui/modals/bulk-archive-partners-modal";
@@ -27,6 +28,7 @@ import { ProgramEnrollmentStatus } from "@dub/prisma/client";
 import {
   AnimatedSizeContainer,
   Button,
+  DynamicTooltipWrapper,
   EditColumnsButton,
   Filter,
   Icon,
@@ -122,7 +124,7 @@ export function PartnersTable() {
   const status = (
     searchParams.get("status") || searchParams.get("search")
       ? undefined
-      : "approved"
+      : "approved_invited"
   ) as ProgramEnrollmentStatus;
 
   const sortBy =
@@ -529,7 +531,7 @@ export function PartnersTable() {
           }}
         />
 
-        {(status === "approved" ||
+        {(!searchParams.get("status") ||
           searchParams.get("status") === "approved") && (
           <BulkActionsMenu
             table={table}
@@ -651,6 +653,12 @@ function BulkActionsMenu({
 
   const partnerWord = selectedPartners.length === 1 ? "partner" : "partners";
 
+  const disabledTooltip = selectedPartners.some(
+    (partner) => !ACTIVE_ENROLLMENT_STATUSES.includes(partner.status),
+  )
+    ? `You cannot perform this action because one or more partners are not in ${ACTIVE_ENROLLMENT_STATUSES.join(", ")} statuses.`
+    : undefined;
+
   return (
     <Popover
       openPopover={isOpen}
@@ -666,6 +674,7 @@ function BulkActionsMenu({
                   onArchivePartners(selectedPartners);
                   setIsOpen(false);
                 }}
+                disabledTooltip={disabledTooltip}
               />
               <MenuItem
                 icon={CircleXmark}
@@ -674,6 +683,7 @@ function BulkActionsMenu({
                   onDeactivatePartners(selectedPartners);
                   setIsOpen(false);
                 }}
+                disabledTooltip={disabledTooltip}
               />
               <MenuItem
                 icon={UserDelete}
@@ -683,6 +693,7 @@ function BulkActionsMenu({
                   onBanPartners(selectedPartners);
                   setIsOpen(false);
                 }}
+                disabledTooltip={disabledTooltip}
               />
             </Command.Group>
           </Command.List>
@@ -939,11 +950,13 @@ function MenuItem({
   label,
   onSelect,
   variant = "default",
+  disabledTooltip,
 }: {
   icon: Icon;
   label: string;
   onSelect: () => void;
   variant?: "default" | "danger";
+  disabledTooltip?: string | boolean;
 }) {
   const variantStyles = {
     default: {
@@ -959,16 +972,22 @@ function MenuItem({
   const { text, icon } = variantStyles[variant];
 
   return (
-    <Command.Item
-      className={cn(
-        "flex cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-md p-2 text-sm",
-        "data-[selected=true]:bg-neutral-100",
-        text,
-      )}
-      onSelect={onSelect}
+    <DynamicTooltipWrapper
+      tooltipProps={disabledTooltip ? { content: disabledTooltip } : undefined}
     >
-      <IconComp className={cn("size-4 shrink-0", icon)} />
-      {label}
-    </Command.Item>
+      <Command.Item
+        className={cn(
+          "flex cursor-pointer select-none items-center gap-2 whitespace-nowrap rounded-md p-2 text-sm",
+          disabledTooltip
+            ? "cursor-not-allowed opacity-75"
+            : "data-[selected=true]:bg-neutral-100",
+          text,
+        )}
+        onSelect={disabledTooltip ? undefined : onSelect}
+      >
+        <IconComp className={cn("size-4 shrink-0", icon)} />
+        {label}
+      </Command.Item>
+    </DynamicTooltipWrapper>
   );
 }

apps/web/lib/actions/partners/bulk-archive-partners.ts

@@ -2,7 +2,10 @@
 
 import { recordAuditLog } from "@/lib/api/audit-logs/record-audit-log";
 import { getDefaultProgramIdOrThrow } from "@/lib/api/programs/get-default-program-id-or-throw";
-import { bulkArchivePartnersSchema } from "@/lib/zod/schemas/partners";
+import {
+  ACTIVE_ENROLLMENT_STATUSES,
+  bulkArchivePartnersSchema,
+} from "@/lib/zod/schemas/partners";
 import { prisma } from "@dub/prisma";
 import { waitUntil } from "@vercel/functions";
 import { authActionClient } from "../safe-action";
@@ -28,7 +31,7 @@ export const bulkArchivePartnersAction = authActionClient
         },
         programId,
         status: {
-          not: "archived",
+          in: ACTIVE_ENROLLMENT_STATUSES,
         },
       },
       select: {

apps/web/lib/actions/partners/bulk-ban-partners.ts

@@ -4,7 +4,10 @@ import { recordAuditLog } from "@/lib/api/audit-logs/record-audit-log";
 import { resolveFraudGroups } from "@/lib/api/fraud/resolve-fraud-groups";
 import { getDefaultProgramIdOrThrow } from "@/lib/api/programs/get-default-program-id-or-throw";
 import { enqueueBatchJobs } from "@/lib/cron/enqueue-batch-jobs";
-import { bulkBanPartnersSchema } from "@/lib/zod/schemas/partners";
+import {
+  ACTIVE_ENROLLMENT_STATUSES,
+  bulkBanPartnersSchema,
+} from "@/lib/zod/schemas/partners";
 import { prisma } from "@dub/prisma";
 import { ProgramEnrollmentStatus } from "@dub/prisma/client";
 import { APP_DOMAIN_WITH_NGROK } from "@dub/utils";
@@ -32,7 +35,7 @@ export const bulkBanPartnersAction = authActionClient
         },
         programId,
         status: {
-          not: "banned",
+          in: ACTIVE_ENROLLMENT_STATUSES,
         },
       },
       select: {

apps/web/lib/api/partners/get-partners-count.ts

@@ -41,7 +41,12 @@ export async function getPartnersCount<T>(
             ...(groupId && {
               groupId,
             }),
-            status,
+            status:
+              status === "approved_invited"
+                ? {
+                    in: ["approved", "invited"],
+                  }
+                : status,
             ...enrollmentMetricWhere,
           },
         },
@@ -108,7 +113,12 @@ export async function getPartnersCount<T>(
           }),
           ...commonWhere,
         },
-        status,
+        status:
+          status === "approved_invited"
+            ? {
+                in: ["approved", "invited"],
+              }
+            : status,
         ...enrollmentMetricWhere,
       },
       _count: true,

apps/web/lib/api/partners/program-enrollment-query.ts

@@ -153,7 +153,12 @@ export function buildProgramEnrollmentWhereForList(
         in: partnerIds,
       },
     }),
-    status,
+    status:
+      status === "approved_invited"
+        ? {
+            in: ["approved", "invited"],
+          }
+        : status,
     groupId,
     ...(country || search || email
       ? {

apps/web/lib/zod/schemas/partners.ts

@@ -191,6 +191,10 @@ export const getPartnersQuerySchema = z
   .extend(getPaginationQuerySchema({ pageSize: PARTNERS_MAX_PAGE_SIZE }));
 
 export const getPartnersQuerySchemaExtended = getPartnersQuerySchema.extend({
+  status: z
+    .enum(ProgramEnrollmentStatus)
+    .or(z.enum(["approved_invited"]))
+    .optional(),
   partnerIds: z
     .union([z.string(), z.array(z.string())])
     .transform((v) => (Array.isArray(v) ? v : v.split(",")))

apps/web/ui/customers/customers-table/customers-table.tsx

@@ -404,6 +404,7 @@ export function CustomersTable({
         sortBy={sortBy}
         sortOrder={sortOrder}
         enabled={canManageCustomers}
+        isProgramPage={isProgramPage}
       />
       {!canManageCustomers || customers?.length !== 0 ? (
         <Table
@@ -491,10 +492,12 @@ function CustomersFilters({
   sortBy,
   sortOrder,
   enabled,
+  isProgramPage,
 }: {
   sortBy: string;
   sortOrder: "asc" | "desc";
   enabled: boolean;
+  isProgramPage: boolean;
 }) {
   const {
     filters,
@@ -504,7 +507,7 @@ function CustomersFilters({
     onRemoveAll,
     setSearch,
     setSelectedFilter,
-  } = useCustomerFilters({ sortBy, sortOrder }, { enabled });
+  } = useCustomerFilters({ sortBy, sortOrder }, { enabled, isProgramPage });
 
   return (
     <div>

apps/web/ui/customers/customers-table/use-customer-filters.tsx

@@ -16,10 +16,13 @@ import { useDebounce } from "use-debounce";
 
 export function useCustomerFilters(
   extraSearchParams: Record<string, string>,
-  { enabled = true }: { enabled?: boolean } = {},
+  {
+    enabled = true,
+    isProgramPage = false,
+  }: { enabled?: boolean; isProgramPage?: boolean } = {},
 ) {
   const { searchParamsObj, queryParams } = useRouterStuff();
-  const { id: workspaceId, slug } = useWorkspace();
+  const { id: workspaceId, slug, defaultProgramId } = useWorkspace();
 
   const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
   const [search, setSearch] = useState("");
@@ -38,6 +41,10 @@ export function useCustomerFilters(
   >({
     query: {
       groupBy: "country",
+      ...(isProgramPage &&
+        defaultProgramId && {
+          programId: defaultProgramId,
+        }),
     },
     enabled,
   });
@@ -53,6 +60,10 @@ export function useCustomerFilters(
   >({
     query: {
       groupBy: "linkId",
+      ...(isProgramPage &&
+        defaultProgramId && {
+          programId: defaultProgramId,
+        }),
     },
     enabled,
   });