dubinc · marcusljf · Sep 13, 2025 · Sep 18, 2025 · Sep 18, 2025 · Sep 18, 2025
diff --git a/apps/web/app/(ee)/api/groups/route.ts b/apps/web/app/(ee)/api/groups/route.ts
@@ -27,7 +27,30 @@ export const GET = withWorkspace(
       programId,
     });
 
-    return NextResponse.json(z.array(GroupSchemaExtended).parse(groups));
+    // Fetch rewards and discount data for each group
+    const groupsWithRewards = await Promise.all(
+      groups.map(async (group) => {
+        const groupWithRewards = await prisma.partnerGroup.findUnique({
+          where: { id: group.id },
+          include: {
+            clickReward: true,
+            leadReward: true,
+            saleReward: true,
+            discount: true,
+          },
+        });
+
+        return {
+          ...group,
+          clickReward: groupWithRewards?.clickReward,
+          leadReward: groupWithRewards?.leadReward,
+          saleReward: groupWithRewards?.saleReward,
+          discount: groupWithRewards?.discount,
+        };
+      })
+    );
+
+    return NextResponse.json(z.array(GroupSchemaExtended).parse(groupsWithRewards));
   },
   {
     requiredPermissions: ["groups.read"],

diff --git a/...web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/analytics-partners-table.tsx b/...web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/analytics-partners-table.tsx
@@ -1,5 +1,6 @@
 import { AnalyticsResponse } from "@/lib/analytics/types";
 import { editQueryString } from "@/lib/analytics/utils";
+import useGroups from "@/lib/swr/use-groups";
 import { AnalyticsContext } from "@/ui/analytics/analytics-provider";
 import { PartnerRowItem } from "@/ui/partners/partner-row-item";
 import { FilterButtonTableRow } from "@/ui/shared/filter-button-table-row";
@@ -17,6 +18,7 @@ import useSWR from "swr";
 
 export function AnalyticsPartnersTable() {
   const { selectedTab, queryString } = useContext(AnalyticsContext);
+  const { groups } = useGroups();
 
   const { pagination, setPagination } = usePagination(10);
 
@@ -52,14 +54,15 @@ export function AnalyticsPartnersTable() {
         minSize: 250,
         cell: ({ row }) => {
           const p = row.original.partner;
+          // Note: groupId not available in analytics data, so no group rewards will be shown
           return (
             <PartnerRowItem
               partner={{
-                ...p,
-                payoutsEnabledAt: p.payoutsEnabledAt
-                  ? new Date(p.payoutsEnabledAt)
-                  : null,
+                id: p.id,
+                name: p.name,
+                image: p.image,
               }}
+              group={null}
             />
           );
         },

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/partners/partners-table.tsx
@@ -166,8 +166,17 @@ export function PartnersTable() {
           enableHiding: false,
           minSize: 250,
           cell: ({ row }) => {
+            const group = groups?.find((g) => g.id === row.original.groupId);
             return (
-              <PartnerRowItem partner={row.original} showPermalink={false} />
+              <PartnerRowItem 
+                partner={{
+                  id: row.original.id,
+                  name: row.original.name,
+                  image: row.original.image,
+                }} 
+                group={group}
+                showPermalink={false} 
+              />
             );
           },
         },

diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/payout-table.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/payout-table.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import useGroups from "@/lib/swr/use-groups";
 import usePayoutsCount from "@/lib/swr/use-payouts-count";
 import useProgram from "@/lib/swr/use-program";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -52,6 +53,7 @@ const PayoutTableInner = memo(
     setSelectedFilter,
   }: ReturnType<typeof usePayoutFilters>) => {
     const { id: workspaceId, defaultProgramId } = useWorkspace();
+    const { groups } = useGroups();
     const { queryParams, searchParams, getQueryString } = useRouterStuff();
 
     const sortBy = searchParams.get("sortBy") || "periodEnd";
@@ -110,7 +112,17 @@ const PayoutTableInner = memo(
         {
           header: "Partner",
           cell: ({ row }) => {
-            return <PartnerRowItem partner={row.original.partner} />;
+            // Note: groupId not available in payout data, so no group rewards will be shown
+            return (
+              <PartnerRowItem 
+                partner={{
+                  id: row.original.partner.id,
+                  name: row.original.partner.name,
+                  image: row.original.partner.image,
+                }} 
+                group={null} 
+              />
+            );
           },
         },
         {

diff --git a/apps/web/ui/partners/partner-row-item.tsx b/apps/web/ui/partners/partner-row-item.tsx
@@ -1,57 +1,116 @@
-import { DynamicTooltipWrapper, GreekTemple } from "@dub/ui";
+import { DynamicTooltipWrapper } from "@dub/ui";
+import { CursorRays, InvoiceDollar, UserPlus, Gift } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { OG_AVATAR_URL } from "@dub/utils/src/constants";
-import { CircleMinus } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { getGroupRewardsAndDiscount } from "@/lib/partners/get-group-rewards-and-discount";
+import { GroupProps, RewardProps, DiscountProps } from "@/lib/types";
 
 export function PartnerRowItem({
   partner,
+  group,
   showPermalink = true,
 }: {
   partner: {
     id: string;
     name: string;
     image?: string | null;
-    payoutsEnabledAt?: Date | null;
   };
+  group?: GroupProps | null;
   showPermalink?: boolean;
 }) {
   const { slug } = useParams();
   const As = showPermalink ? Link : "div";
 
-  const showPayoutsEnabled = "payoutsEnabledAt" in partner;
+  // Helper function to format reward amount
+  const formatRewardAmount = (reward: RewardProps) => {
+    if (reward.type === "percentage") {
+      return `${reward.amount}%`;
+    }
+    return `$${(reward.amount / 100).toFixed(2)}`;
+  };
+
+  // Helper function to get duration text
+  const getDurationText = (maxDuration?: number | null) => {
+    if (maxDuration === 0) return "one-time";
+    if (maxDuration == null) return "for the customer's lifetime";
+    return `for ${maxDuration} month${maxDuration > 1 ? 's' : ''}`;
+  };
+
+  // Helper function to get reward description
+  const getRewardDescription = (reward: RewardProps) => {
+    const amount = formatRewardAmount(reward);
+    const duration = getDurationText(reward.maxDuration);
+
+    switch (reward.event) {
+      case "sale":
+        return `Up to ${amount} per sale ${duration}`;
+      case "lead":
+        return `${amount} per lead`;
+      case "click":
+        return `${amount} per click`;
+      default:
+        return `${amount} per ${reward.event}`;
+    }
+  };
+
+  // Get group rewards and discount
+  const { rewards, discount } = group ? getGroupRewardsAndDiscount(group) : { rewards: [], discount: null };
+
+  // Sort rewards in the specified order: sale, lead, click
+  const sortedRewards = rewards.sort((a, b) => {
+    const order = { sale: 0, lead: 1, click: 2 } as const;
+    return (order[a.event as keyof typeof order] ?? 999) - (order[b.event as keyof typeof order] ?? 999);
+  });
+
+  // Icon mapping for rewards
+  const getRewardIcon = (event: string) => {
+    switch (event) {
+      case "sale":
+        return InvoiceDollar;
+      case "lead":
+        return UserPlus;
+      case "click":
+        return CursorRays;
+      default:
+        return CursorRays;
+    }
+  };
 
   return (
     <div className="flex items-center gap-2">
       <DynamicTooltipWrapper
         tooltipProps={
-          showPayoutsEnabled
+          group && (rewards.length > 0 || discount)
             ? {
+                delayDuration: 300,
                 content: (
-                  <div className="grid max-w-xs gap-2 p-4">
-                    <div className="flex items-center gap-2 text-sm font-medium">
-                      Payouts{" "}
-                      {partner.payoutsEnabledAt ? "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.payoutsEnabledAt &&
-                            "border-red-300 bg-red-200 text-red-800",
-                        )}
-                      >
-                        {partner.payoutsEnabledAt ? (
-                          <GreekTemple className="size-3" />
-                        ) : (
-                          <CircleMinus className="size-3" />
-                        )}
+                  <div className="grid max-w-xs gap-1 p-2">
+                    {sortedRewards.map((reward) => {
+                      const Icon = getRewardIcon(reward.event);
+
+                      return (
+                        <div key={reward.id} className="flex items-start gap-2">
+                          <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-600">
+                            <Icon className="size-4" />
+                          </div>
+                          <span className="text-xs font-medium text-neutral-700 mt-1">
+                            {getRewardDescription(reward)}
+                          </span>
+                        </div>
+                      );
+                    })}
+                    {discount && (
+                      <div className="flex items-start gap-2">
+                        <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-neutral-600">
+                          <Gift className="size-4" />
+                        </div>
+                        <span className="text-xs font-medium text-neutral-700 mt-1">
+                          New users get {discount.type === "percentage" ? `${discount.amount}%` : `$${(discount.amount / 100).toFixed(0)}`} off {getDurationText(discount.maxDuration)}
+                        </span>
                       </div>
-                    </div>
-                    <div className="text-pretty text-sm text-neutral-500">
-                      {partner.payoutsEnabledAt
-                        ? "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>
                 ),
               }
@@ -64,19 +123,14 @@ export function PartnerRowItem({
             alt={partner.name}
             className="size-5 shrink-0 rounded-full"
           />
-          {showPayoutsEnabled && (
-            <div
-              className={cn(
-                "absolute -bottom-0.5 -right-0.5 size-2 rounded-full bg-green-500",
-                !partner.payoutsEnabledAt && "bg-red-500",
-              )}
-            />
-          )}
         </div>
       </DynamicTooltipWrapper>
       <As
-        href={`/${slug}/program/partners?partnerId=${partner.id}`}
-        {...(showPermalink && { target: "_blank" })}
+        {...(showPermalink && {
+          href: `/${slug}/program/partners?partnerId=${partner.id}`,
+          target: "_blank",
+          rel: "noopener noreferrer",
+        })}
         className={cn(
           "min-w-0 truncate",
           showPermalink && "cursor-alias decoration-dotted hover:underline",