Fix declined status revoke invite + misc improvements (dubinc#3881)

Author: steven-tey

apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/network/network-partner-application-sheet.tsx

@@ -18,6 +18,7 @@ import {
   StatusBadge,
   Trophy,
   useKeyboardShortcut,
+  useRouterStuff,
   User,
   Users,
 } from "@dub/ui";
@@ -49,6 +50,7 @@ export function NetworkPartnerApplicationSheet({
 }) {
   const [currentTabId, setCurrentTabId] =
     useState<NetworkPartnerSheetTabId>("about");
+  const { queryParams } = useRouterStuff();
 
   const PartnerDetails = (
     <div className="rounded-lg border border-neutral-200 bg-neutral-100 p-3">
@@ -127,6 +129,7 @@ export function NetworkPartnerApplicationSheet({
     <Sheet
       open={isOpen}
       onOpenChange={setIsOpen}
+      onClose={() => queryParams({ del: "partnerId", scroll: false })}
       contentProps={{
         className: "md:w-[max(min(calc(100vw-334px),1170px),540px)]",
       }}

apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/network/page.tsx

@@ -39,7 +39,8 @@ export default function NetworkApplicationsPage() {
     useRouterStuff();
 
   const [detailsSheetState, setDetailsSheetState] = useState<
-    { open: false; partnerId: null } | { open: true; partnerId: string }
+    | { open: false; partnerId: string | null }
+    | { open: true; partnerId: string }
   >({ open: false, partnerId: null });
 
   const {
@@ -399,15 +400,7 @@ export default function NetworkApplicationsPage() {
               : undefined
           }
           setIsOpen={(open) => {
-            if (!open) {
-              setDetailsSheetState({ open: false, partnerId: null });
-              queryParams({ del: "partnerId", scroll: false });
-            } else if (detailsSheetState.partnerId) {
-              setDetailsSheetState({
-                open: true,
-                partnerId: detailsSheetState.partnerId,
-              });
-            }
+            setDetailsSheetState((state) => ({ ...state, open }) as any);
           }}
           onReview={handleReviewPartner}
         />

apps/web/app/(ee)/api/cron/cleanup/declined-invites/route.ts

@@ -28,10 +28,6 @@ export async function POST(req: Request) {
             updatedAt: {
               lt: subDays(new Date(), 90),
             },
-            // only delete if there are no messages (e.g. prior network messages)
-            messages: {
-              none: {},
-            },
           },
           take: 250,
         });

apps/web/app/(ee)/api/cron/cleanup/rejected-applications/route.ts

@@ -32,9 +32,6 @@ export async function POST(req: Request) {
             commissions: {
               none: {},
             },
-            messages: {
-              none: {},
-            },
           },
           take: 250,
         });

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/unapproved-program-page.tsx

@@ -53,7 +53,7 @@ export function UnapprovedProgramPage({
   const badge = PartnerStatusBadges[programEnrollment.status];
 
   const { setShowConfirmModal, confirmModal } = useConfirmModal({
-    title: "Withdraw Application",
+    title: "Withdraw application",
     description: `Are you sure you want to withdraw your application for ${programEnrollment.program.name}? This will delete your application completely and you'll have to re-apply if you want to join again.`,
     confirmText: "Withdraw application",
     onConfirm: async () => {
@@ -105,7 +105,7 @@ export function UnapprovedProgramPage({
             <div className="mt-6">
               <Button
                 variant="secondary"
-                text="Withdraw Application"
+                text="Withdraw application"
                 onClick={() => setShowConfirmModal(true)}
                 className="h-8 px-2.5"
               />

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/apply/program-sidebar.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { submitNetworkProfileAction } from "@/lib/actions/partners/submit-network-profile";
+import { getNetworkProfileChecklistProgress } from "@/lib/network/get-network-profile-checklist-progress";
 import { evaluateApplicationRequirements } from "@/lib/partners/evaluate-application-requirements";
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import useProgramEnrollment from "@/lib/swr/use-program-enrollment";
@@ -10,14 +12,26 @@ import {
   RewardProps,
 } from "@/lib/types";
 import { applicationRequirementsSchema } from "@/lib/zod/schemas/programs";
+import { useConfirmModal } from "@/ui/modals/confirm-modal";
 import { LanderRewards } from "@/ui/partners/lander/lander-rewards";
+import { NetworkStatusBadges } from "@/ui/partners/partner-network/network-status-badges";
 import { PartnerStatusBadges } from "@/ui/partners/partner-status-badges";
 import { useProgramApplicationSheet } from "@/ui/partners/program-application-sheet";
 import { ProgramEligibilityCard } from "@/ui/partners/program-eligibility-card";
-import { BlurImage, Button, CircleCheck, Link4, StatusBadge } from "@dub/ui";
+import {
+  BlurImage,
+  Button,
+  CircleCheck,
+  Link4,
+  ProgressCircle,
+  StatusBadge,
+} from "@dub/ui";
 import { capitalize, cn, OG_AVATAR_URL } from "@dub/utils";
+import { useAction } from "next-safe-action/hooks";
+import Link from "next/link";
 import { redirect } from "next/navigation";
-import { useMemo, useState } from "react";
+import { ReactNode, useMemo, useState } from "react";
+import { toast } from "sonner";
 
 export function ProgramSidebar({
   program,
@@ -33,7 +47,35 @@ export function ProgramSidebar({
   applicationRewards: RewardProps[];
   applicationDiscount: DiscountProps | null;
 }) {
-  const { partner } = usePartnerProfile();
+  const { partner, mutate } = usePartnerProfile();
+
+  const { completedCount, totalCount, isComplete } =
+    getNetworkProfileChecklistProgress({
+      partner,
+    });
+
+  const { executeAsync: submitNetworkProfile } = useAction(
+    submitNetworkProfileAction,
+    {
+      onSuccess: () => {
+        toast.success("Application submitted successfully");
+      },
+      onError: ({ error }) => {
+        toast.error(error.serverError);
+      },
+    },
+  );
+
+  const { setShowConfirmModal, confirmModal } = useConfirmModal({
+    title: "Submit application",
+    description:
+      "Are you sure you want to submit your Dub Network application for review? You won't be able to make changes to your application after submitting it.",
+    confirmText: "Confirm submission",
+    onConfirm: async () => {
+      await submitNetworkProfile();
+      await mutate();
+    },
+  });
   const { programEnrollment } = useProgramEnrollment({
     swrOpts: {
       keepPreviousData: true,
@@ -59,6 +101,84 @@ export function ProgramSidebar({
       ? "You do not meet the eligibility requirements for this program"
       : undefined;
 
+  const [justApplied, setJustApplied] = useState(false);
+
+  const applyDisabledTooltip: ReactNode = justApplied
+    ? undefined
+    : programEnrollment?.status === "pending"
+      ? "Your application is under review"
+      : programEnrollment?.status &&
+          ["banned", "rejected", "deactivated"].includes(
+            programEnrollment.status,
+          )
+        ? `You were ${programEnrollment.status} from this program`
+        : programEnrollment
+          ? undefined
+          : !isComplete
+            ? (
+                <div className="max-w-xs p-3 text-center">
+                  <div className="text-content-default text-pretty text-sm leading-5">
+                    Complete your profile to join the Dub Partner Network. Once
+                    approved, you can then apply to this program.
+                  </div>
+                  <Link
+                    href="/profile"
+                    className="bg-bg-subtle mt-3 flex items-center justify-center gap-2 rounded-lg px-2.5 py-1.5"
+                  >
+                    <ProgressCircle
+                      progress={completedCount / totalCount}
+                      className="text-green-500"
+                    />
+                    <span className="text-content-default text-sm font-medium">
+                      {completedCount} of {totalCount} tasks completed
+                    </span>
+                  </Link>
+                </div>
+              )
+            : partner && !["approved", "trusted"].includes(partner.networkStatus)
+              ? (() => {
+                  const networkStatusBadge =
+                    NetworkStatusBadges[partner.networkStatus];
+                  if (!("partnerTooltip" in networkStatusBadge)) {
+                    return null;
+                  }
+                  const {
+                    partnerTooltip,
+                    icon: Icon,
+                    className,
+                  } = networkStatusBadge;
+                  const { content, cta } = partnerTooltip;
+
+                  return (
+                    <div className="max-w-xs space-y-2 p-4 text-center">
+                      <div className="text-content-default text-pretty text-sm leading-5">
+                        {content}
+                      </div>
+                      {partner.networkStatus === "draft" ? (
+                        <Button
+                          className="p-2"
+                          text={cta}
+                          onClick={() => setShowConfirmModal(true)}
+                        />
+                      ) : (
+                        <Link
+                          href="/profile"
+                          className={cn(
+                            "flex items-center justify-center gap-2 rounded-lg p-2",
+                            "ctaClassName" in partnerTooltip
+                              ? partnerTooltip.ctaClassName
+                              : className,
+                          )}
+                        >
+                          <Icon className="size-4 shrink-0" />
+                          <span className="text-sm font-medium">{cta}</span>
+                        </Link>
+                      )}
+                    </div>
+                  );
+                })()
+              : requirementsNotMet;
+
   const statusBadge = programEnrollment
     ? {
         ...PartnerStatusBadges,
@@ -69,8 +189,6 @@ export function ProgramSidebar({
       }[programEnrollment.status]
     : null;
 
-  const [justApplied, setJustApplied] = useState(false);
-
   const buttonText = useMemo(() => {
     if (justApplied) return "Applied";
     if (!programEnrollment) return "Apply";
@@ -98,6 +216,7 @@ export function ProgramSidebar({
 
   return (
     <div>
+      {confirmModal}
       {programApplicationSheet}
       <div className="flex items-start justify-between gap-2">
         <BlurImage
@@ -159,11 +278,12 @@ export function ProgramSidebar({
         text={buttonText}
         icon={justApplied ? <CircleCheck className="size-4" /> : undefined}
         disabled={
-          !!programEnrollment || justApplied || !!requirementsNotMet
+          !applyDisabledTooltip &&
+          (!!programEnrollment || justApplied)
             ? true
             : undefined
         }
-        disabledTooltip={requirementsNotMet}
+        disabledTooltip={applyDisabledTooltip}
         onClick={() => setIsApplicationSheetOpen(true)}
       />
     </div>

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/header-controls.tsx

@@ -152,7 +152,9 @@ function ApplyButton({ program }: { program: NetworkProgramProps }) {
                 href="/profile"
                 className={cn(
                   "flex items-center justify-center gap-2 rounded-lg p-2",
-                  className,
+                  "ctaClassName" in partnerTooltip
+                    ? partnerTooltip.ctaClassName
+                    : className,
                 )}
               >
                 <Icon className="size-4 shrink-0" />

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

@@ -761,51 +761,32 @@ function RowMenuButton({
         content={
           <Command tabIndex={0} loop className="focus:outline-none">
             <Command.List className="w-screen text-sm focus-visible:outline-none sm:w-auto sm:min-w-[200px]">
-              {row.original.status === "invited" ? (
+              {["invited", "declined"].includes(row.original.status) ? (
                 <Command.Group className="grid gap-px p-1.5">
-                  <MenuItem
-                    icon={Users6}
-                    label="Change group"
-                    onSelect={() => {
-                      setShowChangeGroupModal(true);
-                      setIsOpen(false);
-                    }}
-                  />
-
-                  <MenuItem
-                    icon={Tag}
-                    label="Update tags"
-                    onSelect={() => {
-                      setShowUpdatePartnerTagsModal(true);
-                      setIsOpen(false);
-                    }}
-                  />
-
-                  <MenuItem
-                    icon={
-                      isResendingInvite ? LoadingSpinner : EnvelopeArrowRight
-                    }
-                    label="Resend invite"
-                    onSelect={async () => {
-                      if (row.original.status !== "invited") {
-                        return;
+                  {row.original.status === "invited" && (
+                    <MenuItem
+                      icon={
+                        isResendingInvite ? LoadingSpinner : EnvelopeArrowRight
                       }
+                      label="Resend invite"
+                      onSelect={async () => {
+                        if (row.original.status !== "invited") {
+                          return;
+                        }
 
-                      await resendInvite({
-                        workspaceId,
-                        partnerId: row.original.id,
-                      });
-                    }}
-                  />
+                        await resendInvite({
+                          workspaceId,
+                          partnerId: row.original.id,
+                        });
+                      }}
+                    />
+                  )}
 
                   <MenuItem
                     icon={isDeletingInvite ? LoadingSpinner : Trash}
                     label="Delete invite"
                     variant="danger"
                     onSelect={async () => {
-                      if (row.original.status !== "invited") {
-                        return;
-                      }
                       if (
                         !window.confirm(
                           "Are you sure you want to delete this invite? This action cannot be undone.",

apps/web/lib/actions/partners/delete-program-invite.ts

@@ -34,7 +34,9 @@ export const deleteProgramInviteAction = authActionClient
             partnerId,
             programId,
           },
-          status: "invited", // can only delete invited enrollments
+          status: {
+            in: ["invited", "declined"],
+          },
         },
         include: {
           program: true,

apps/web/lib/api/partners/bulk-delete-partners.ts

@@ -147,10 +147,9 @@ export async function bulkDeletePartners({
     // Delete the messages
     const deletedMessages = await prisma.message.deleteMany({
       where: {
-        programEnrollment: {
-          id: {
-            in: programEnrollmentIds,
-          },
+        programId: ACME_PROGRAM_ID,
+        partnerId: {
+          in: partnerIds,
         },
       },
     });