Show networkStatus badge in PartnerRowItem (#3988)

Author: steven-tey

apps/web/app/(ee)/api/partners/route.ts

@@ -3,7 +3,6 @@ import { getPartners } from "@/lib/api/partners/get-partners";
 import { getDefaultProgramIdOrThrow } from "@/lib/api/programs/get-default-program-id-or-throw";
 import { getProgramOrThrow } from "@/lib/api/programs/get-program-or-throw";
 import { parseRequestBody } from "@/lib/api/utils";
-import { applicationEventSchema } from "@/lib/application-events/schema";
 import { withWorkspace } from "@/lib/auth";
 import { throwIfPartnersLimitExceeded } from "@/lib/partners/throw-if-partners-limit-exceeded";
 import { polyfillSocialMediaFields } from "@/lib/social-utils";
@@ -102,16 +101,11 @@ export const GET = withWorkspace(
       saleAmount: z.number().default(0),
     });
 
-    const responseSchema =
-      parsedParams.includeApplicationEvent ||
-      parsedParams.includePartnerPlatforms
-        ? baseSchema.extend({
-            platforms: z.array(partnerPlatformSchema),
-            applicationEvent: applicationEventSchema
-              .pick({ referralSource: true })
-              .nullish(),
-          })
-        : baseSchema;
+    const responseSchema = parsedParams.includePartnerPlatforms
+      ? baseSchema.extend({
+          platforms: z.array(partnerPlatformSchema),
+        })
+      : baseSchema;
 
     return NextResponse.json(
       z.array(responseSchema).parse(

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/analytics/applications/application-referral-source-icon.tsx

@@ -3,17 +3,19 @@ import { Globe, Shop, UserArrowRight } from "@dub/ui/icons";
 
 export function ApplicationReferralSourceIcon({
   referralSource,
+  className,
 }: {
   referralSource: string;
+  className?: string;
 }) {
   switch (referralSource) {
     case "marketplace":
-      return <Shop />;
+      return <Shop className={className} />;
     case "direct":
-      return <Globe />;
+      return <Globe className={className} />;
     case "manual":
-      return <UserArrowRight />;
+      return <UserArrowRight className={className} />;
     default:
-      return <ReferrerIcon display={referralSource} />;
+      return <ReferrerIcon display={referralSource} className={className} />;
   }
 }

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

@@ -103,7 +103,6 @@ export function ProgramPartnersApplicationsPageClient() {
         status: "pending",
         sortBy,
         sortOrder,
-        includeApplicationEvent: true,
         includePartnerPlatforms: true,
       },
       { exclude: ["partnerId"] },
@@ -196,17 +195,6 @@ export function ProgramPartnersApplicationsPageClient() {
         header: "Applied",
         accessorFn: (d) => formatDate(d.createdAt, { month: "short" }),
       },
-      // TODO: add source column back once we fix application source display
-      // {
-      //   id: "source",
-      //   header: "Source",
-      //   minSize: 170,
-      //   cell: ({ row }) => (
-      //     <PartnerApplicationSource
-      //       referralSource={row.original.applicationEvent?.referralSource}
-      //     />
-      //   ),
-      // },
       {
         id: "group",
         header: "Group",

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

@@ -19,7 +19,6 @@ export async function getPartners(filters: PartnerFilters) {
     sortBy,
     sortOrder,
     programId,
-    includeApplicationEvent,
     includePartnerPlatforms: _includePartnerPlatforms,
     includeGroup = false,
     ...enrollmentRest
@@ -45,7 +44,6 @@ export async function getPartners(filters: PartnerFilters) {
         },
       },
       links: true,
-      ...(includeApplicationEvent ? { applicationEvent: true } : {}),
       ...(includeGroup
         ? {
             partnerGroup: {

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

@@ -212,7 +212,6 @@ export const getPartnersQuerySchemaExtended = getPartnersQuerySchema.extend({
   country: z.union([z.string(), z.array(z.string())]).optional(),
   referredByPartnerId: z.string().optional(),
   includePartnerPlatforms: booleanQuerySchema.optional(),
-  includeApplicationEvent: booleanQuerySchema.optional(),
   // metric range query fields (TODO: Add to public API once we finalize the syntax)
   totalClicksMin: z.coerce
     .number()
@@ -593,11 +592,6 @@ export const EnrolledPartnerSchemaExtended = EnrolledPartnerSchema.extend({
   customerDataSharingEnabledAt: z.date().nullish(),
   groupMoveDisabledAt: z.date().nullish(),
   platforms: z.array(partnerPlatformSchema).nullable(),
-  applicationEvent: z
-    .object({
-      referralSource: z.string(),
-    })
-    .nullish(),
   discount: DiscountSchema.pick({
     id: true,
     provider: true,

apps/web/ui/partners/partner-application-source.tsx

@@ -47,6 +47,7 @@ import {
 import { PartnerFraudIndicator } from "./fraud-risks/partner-fraud-indicator";
 import { PartnerAvatar } from "./partner-avatar";
 import { PartnerInfoGroup } from "./partner-info-group";
+import { PartnerNetworkStatusBadge } from "./partner-network/partner-network-status-badge";
 import { PartnerStarButton } from "./partner-star-button";
 import { PartnerStatusBadgeWithTooltip } from "./partner-status-badge-with-tooltip";
 import { PartnerTagsList } from "./partner-tags-list";
@@ -55,7 +56,6 @@ import {
   getPayoutMethodLabel,
 } from "./payouts/payout-method-config";
 import { ProgramRewardList } from "./program-reward-list";
-import { TrustedPartnerBadge } from "./trusted-partner-badge";
 import {
   UpdatePartnerTagsModal,
   useUpdatePartnerTagsModal,
@@ -154,8 +154,6 @@ export function PartnerInfoCards({
   if ((isEnrolled || isAdmin) && partner) {
     const isPendingApplication =
       "status" in partner && partner.status === "pending";
-    const applicationReferralSource =
-      isEnrolled && partner.applicationEvent?.referralSource;
 
     basicFields = basicFields.concat([
       {
@@ -175,24 +173,11 @@ export function PartnerInfoCards({
             >
               <span>Applied {formatDate(partner.createdAt)}</span>
             </TimestampTooltip>
-            {/* TODO: add source column back once we fix application source display */}
-            {/* {applicationReferralSource && (
-              <>
-                <span>via</span>
-                <PartnerApplicationSource
-                  referralSource={applicationReferralSource}
-                  variant="inline"
-                />
-              </>
-            )} */}
           </span>
         ) : (
           `${isPendingApplication ? "Applied" : "Partner since"} ${formatDate(partner.createdAt)}`
         ),
-        timestamp:
-          isPendingApplication && applicationReferralSource
-            ? undefined
-            : partner.createdAt,
+        timestamp: isPendingApplication ? undefined : partner.createdAt,
       },
       {
         id: "payoutMethod" as const,
@@ -279,9 +264,6 @@ export function PartnerInfoCards({
                 ) : (
                   <div className="size-20 animate-pulse rounded-full bg-neutral-200" />
                 )}
-                {partner?.networkStatus === "trusted" && (
-                  <TrustedPartnerBadge />
-                )}
               </div>
 
               <div className="flex items-center gap-2">
@@ -306,6 +288,13 @@ export function PartnerInfoCards({
                     {partner.name}
                   </span>
 
+                  {"networkStatus" in partner && partner.networkStatus && (
+                    <PartnerNetworkStatusBadge
+                      networkStatus={partner.networkStatus}
+                      size="large"
+                    />
+                  )}
+
                   {showFraudIndicator && (
                     <PartnerFraudIndicator partnerId={partner.id} />
                   )}

apps/web/ui/partners/partner-info-cards.tsx

@@ -0,0 +1,45 @@
+import { PartnerNetworkStatus } from "@dub/prisma/client";
+import { BadgeCheck2Fill, Tooltip } from "@dub/ui";
+import { cn } from "@dub/utils";
+import { TrustedPartnerBadge } from "../trusted-partner-badge";
+
+export function PartnerNetworkStatusBadge({
+  networkStatus,
+  size = "small",
+}: {
+  networkStatus: PartnerNetworkStatus;
+  size?: "small" | "large";
+}) {
+  if (networkStatus === "trusted") {
+    return <TrustedPartnerBadge variant="inline" size={size} />;
+  }
+
+  if (networkStatus === "approved") {
+    return (
+      <Tooltip
+        content={
+          <div className="flex max-w-xs items-start gap-1.5 p-3">
+            <BadgeCheck2Fill className="mt-0.5 size-5 shrink-0 text-blue-500" />
+            <div className="flex flex-col gap-1">
+              <span className="text-sm font-semibold text-neutral-900">
+                Approved Partner
+              </span>
+              <span className="text-sm font-normal text-neutral-600">
+                This partner is approved in the Dub Partner Network.
+              </span>
+            </div>
+          </div>
+        }
+      >
+        <BadgeCheck2Fill
+          className={cn(
+            "shrink-0 text-blue-500",
+            size === "small" ? "size-3.5" : "size-5",
+          )}
+        />
+      </Tooltip>
+    );
+  }
+
+  return null;
+}

apps/web/ui/partners/partner-network/partner-network-status-badge.tsx

@@ -1,12 +1,13 @@
 import useProgram from "@/lib/swr/use-program";
-import { PartnerPayoutMethod } from "@dub/prisma/client";
+import { PartnerNetworkStatus, PartnerPayoutMethod } from "@dub/prisma/client";
 import { CircleArrowRight, DynamicTooltipWrapper, GreekTemple } from "@dub/ui";
 import { cn, formatDateTimeSmart } from "@dub/utils";
 import { CircleMinus } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import type { ReactNode } from "react";
 import { PartnerFraudIndicator } from "./fraud-risks/partner-fraud-indicator";
+import { PartnerNetworkStatusBadge } from "./partner-network/partner-network-status-badge";
 import { PartnerAvatar } from "./partner-avatar";
 import {
   getPayoutMethodIconConfig,
@@ -21,6 +22,7 @@ interface PartnerRowItemProps {
     id: string;
     name: string;
     image?: string | null;
+    networkStatus?: PartnerNetworkStatus | null;
     defaultPayoutMethod?: PartnerPayoutMethod | null;
     payoutsEnabledAt?: Date | null;
   };
@@ -208,19 +210,25 @@ export function PartnerRowItem({
         </DynamicTooltipWrapper>
       </div>
 
-      <As
-        href={`/${slug}/program/partners/${partner.id}`}
-        {...(showPermalink && { target: "_blank" })}
-        onClick={showPermalink ? (e) => e.stopPropagation() : undefined}
-        onAuxClick={showPermalink ? (e) => e.stopPropagation() : undefined}
-        className={cn(
-          "min-w-0 truncate",
-          showPermalink && "cursor-alias decoration-dotted hover:underline",
+      <div className="flex min-w-0 items-center gap-1">
+        <As
+          href={`/${slug}/program/partners/${partner.id}`}
+          {...(showPermalink && { target: "_blank" })}
+          onClick={showPermalink ? (e) => e.stopPropagation() : undefined}
+          onAuxClick={showPermalink ? (e) => e.stopPropagation() : undefined}
+          className={cn(
+            "min-w-0 truncate",
+            showPermalink && "cursor-alias decoration-dotted hover:underline",
+          )}
+          title={partner.name}
+        >
+          {partner.name}
+        </As>
+
+        {"networkStatus" in partner && partner.networkStatus && (
+          <PartnerNetworkStatusBadge networkStatus={partner.networkStatus} />
         )}
-        title={partner.name}
-      >
-        {partner.name}
-      </As>
+      </div>
 
       {suffix}