improve PartnerInfoCards + PartnerStats

Author: steven-tey

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

@@ -1,17 +1,36 @@
-import { EnrolledPartnerProps } from "@/lib/types";
-import { ArrowUpRight2 } from "@dub/ui";
-import { cn, currencyFormatter, nFormatter } from "@dub/utils";
+import { EnrolledPartnerExtendedProps } from "@/lib/types";
+import { ArrowUpRight2, TimestampTooltip } from "@dub/ui";
+import { cn, currencyFormatter, nFormatter, timeAgo } from "@dub/utils";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 
 export function PartnerStats({
   partner,
   error,
 }: {
-  partner?: EnrolledPartnerProps;
+  partner?: EnrolledPartnerExtendedProps;
   error?: boolean;
 }) {
   const { slug } = useParams() as { slug: string };
+
+  const lastLeadDate = partner?.lastLeadAt
+    ? new Date(partner.lastLeadAt)
+    : null;
+  const lastConversionDate = partner?.lastConversionAt
+    ? new Date(partner.lastConversionAt)
+    : null;
+  const approved = partner?.status === "approved";
+  const leadsLastAt =
+    approved && lastLeadDate && !Number.isNaN(lastLeadDate.getTime())
+      ? lastLeadDate
+      : undefined;
+  const conversionsLastAt =
+    approved &&
+    lastConversionDate &&
+    !Number.isNaN(lastConversionDate.getTime())
+      ? lastConversionDate
+      : undefined;
+
   return (
     <div className="@container/stats">
       <div
@@ -46,6 +65,7 @@ export function PartnerStats({
             href: partner?.id
               ? `/${slug}/events?event=leads&partnerId=${partner.id}&interval=1y`
               : undefined,
+            lastAt: leadsLastAt,
           },
           {
             label: "Conversions",
@@ -59,6 +79,7 @@ export function PartnerStats({
             href: partner?.id
               ? `/${slug}/events?event=sales&partnerId=${partner.id}&interval=1y&saleType=new`
               : undefined,
+            lastAt: conversionsLastAt,
           },
           {
             label: "Revenue",
@@ -101,7 +122,7 @@ export function PartnerStats({
               ? `/${slug}/events?event=sales&partnerId=${partner.id}&interval=1y`
               : undefined,
           },
-        ].map(({ label, value, href }) => {
+        ].map(({ label, value, href, lastAt }) => {
           const As = href ? Link : "div";
           return (
             <As
@@ -119,6 +140,18 @@ export function PartnerStats({
                   {value}
                 </span>
               )}
+              {lastAt ? (
+                <TimestampTooltip
+                  timestamp={lastAt}
+                  rows={["local", "utc", "unix"]}
+                  side="top"
+                  delayDuration={250}
+                >
+                  <span className="text-content-muted absolute bottom-3 right-3 max-w-[calc(100%-1.5rem)] cursor-default cursor-help text-right text-[0.6875rem] leading-tight underline decoration-neutral-300/70 decoration-dotted underline-offset-2 hover:decoration-neutral-400">
+                    Last {timeAgo(lastAt, { withAgo: true })}
+                  </span>
+                </TimestampTooltip>
+              ) : null}
             </As>
           );
         })}

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

@@ -13,22 +13,21 @@ import { usePartnerGroupHistorySheet } from "@/ui/activity-logs/partner-group-hi
 import {
   Button,
   CalendarIcon,
-  ChartActivity2,
   CopyButton,
   Globe,
   Heart,
   OfficeBuilding,
   TimestampTooltip,
   Trophy,
 } from "@dub/ui";
-import { VerifiedBadge } from "@dub/ui/icons";
+import { TriangleWarning, Users, VerifiedBadge } from "@dub/ui/icons";
 import {
   COUNTRIES,
   fetcher,
   formatDate,
   formatDateTimeSmart,
-  timeAgo,
 } from "@dub/utils";
+import { CircleMinus } from "lucide-react";
 import Link from "next/link";
 import { Fragment, ReactNode, createElement } from "react";
 import useSWR from "swr";
@@ -93,10 +92,7 @@ export function PartnerInfoCards({
   const isNetwork = type === "network";
 
   const showPayoutMethodField =
-    isEnrolled &&
-    program?.payoutMode !== "external" &&
-    partner?.payoutsEnabledAt != null &&
-    partner?.defaultPayoutMethod != null;
+    isEnrolled && program?.payoutMode !== "external";
 
   const {
     partnerGroupHistorySheet,
@@ -143,56 +139,52 @@ export function PartnerInfoCards({
     },
   ];
 
-  if (isEnrolled) {
+  if (isEnrolled && partner) {
     basicFields = basicFields.concat([
-      ...(partner?.status === "approved"
-        ? [
-            {
-              id: "lastLeadAt",
-              icon: <ChartActivity2 className="size-3.5" />,
-              text: partner.lastLeadAt
-                ? `Last lead event ${timeAgo(new Date(partner.lastLeadAt), { withAgo: true })}`
-                : null,
-              timestamp: partner.lastLeadAt ?? undefined,
-            },
-            {
-              id: "lastConversionAt",
-              icon: <ChartActivity2 className="size-3.5" />,
-              text: partner.lastConversionAt
-                ? `Last conversion event ${timeAgo(new Date(partner.lastConversionAt), { withAgo: true })}`
-                : null,
-              timestamp: partner.lastConversionAt ?? undefined,
-            },
-          ]
-        : []),
       {
         id: "createdAt",
-        icon: <CalendarIcon className="size-3.5" />,
-        text: partner
-          ? `${partner.status === "approved" ? "Partner since" : "Applied"} ${formatDate(partner.createdAt)}`
-          : undefined,
-        timestamp: partner?.createdAt,
+        icon: <Users className="size-3.5" />,
+        text: `${partner.status === "approved" ? "Partner since" : "Applied"} ${formatDate(partner.createdAt)}`,
+        timestamp: partner.createdAt,
       },
-      ...(showPayoutMethodField && partner
+      ...(showPayoutMethodField
         ? [
             {
               id: "payoutMethod" as const,
-              icon: createElement(
-                getPayoutMethodIconConfig(partner.defaultPayoutMethod!).Icon,
-                { className: "size-3.5 shrink-0" },
+              icon: partner.defaultPayoutMethod ? (
+                createElement(
+                  getPayoutMethodIconConfig(partner.defaultPayoutMethod).Icon,
+                  { className: "size-3.5 shrink-0" },
+                )
+              ) : (
+                <CircleMinus className="size-3.5 shrink-0" />
               ),
-              text: `${getPayoutMethodLabel(partner.defaultPayoutMethod!)} connected ${formatDateTimeSmart(partner.payoutsEnabledAt!)}`,
-              timestamp: partner.payoutsEnabledAt!,
+              text:
+                partner.defaultPayoutMethod && partner.payoutsEnabledAt
+                  ? `${getPayoutMethodLabel(partner.defaultPayoutMethod)} connected ${formatDateTimeSmart(partner.payoutsEnabledAt)}`
+                  : "No payout method connected",
+              ...(partner.payoutsEnabledAt
+                ? { timestamp: partner.payoutsEnabledAt }
+                : {}),
             },
           ]
         : []),
-      ...(partner?.identityVerifiedAt
+      // TODO: once more partners verify their identity, we can show this by default
+      ...(partner.identityVerifiedAt
         ? [
             {
               id: "identityVerifiedAt",
-              icon: <VerifiedBadge className="size-3.5 shrink-0" />,
-              text: `Identity verified ${formatDate(partner.identityVerifiedAt, { month: "short" })}`,
-              timestamp: partner.identityVerifiedAt,
+              icon: partner.identityVerifiedAt ? (
+                <VerifiedBadge className="size-3.5 shrink-0" />
+              ) : (
+                <TriangleWarning className="size-3.5 shrink-0" />
+              ),
+              text: partner.identityVerifiedAt
+                ? `Identity verified ${formatDate(partner.identityVerifiedAt, { month: "short" })}`
+                : "Identity not verified",
+              ...(partner.identityVerifiedAt
+                ? { timestamp: partner.identityVerifiedAt }
+                : {}),
             },
           ]
         : []),