Slack request invite (#3795)

Co-authored-by: Steven Tey <stevensteel97@gmail.com>

Author: pepeladeira

apps/web/.env.example

@@ -114,6 +114,9 @@ STORAGE_PRIVATE_BUCKET=
 DUB_SLACK_HOOK_CRON=
 DUB_SLACK_HOOK_LINKS=
 
+# Slack Dub Support integration
+DUB_SLACK_ASSISTANT_BOT_TOKEN=
+
 # Used for background jobs
 # Get your ngrok URL here: https://ngrok.com/
 NEXT_PUBLIC_NGROK_URL=

apps/web/app/(ee)/admin.dub.co/(dashboard)/components/slack-support-invite.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { LoadingSpinner } from "@dub/ui";
+import { cn } from "@dub/utils";
+import { useState } from "react";
+import { useFormStatus } from "react-dom";
+import { toast } from "sonner";
+
+export function SlackSupportInvite() {
+  const [needsChannelId, setNeedsChannelId] = useState(false);
+
+  return (
+    <div className="flex flex-col space-y-5">
+      <form
+        action={async (data) => {
+          try {
+            const res = await fetch("/api/admin/slack-support-invite", {
+              method: "POST",
+              body: JSON.stringify({
+                email: data.get("email"),
+                workspaceSlug: data.get("workspaceSlug"),
+                channelId: data.get("channelId") || undefined,
+              }),
+            });
+
+            const json = await res.json().catch(() => ({}));
+
+            if (!res.ok) {
+              if (json.nameTaken) {
+                setNeedsChannelId(true);
+              }
+              toast.error(
+                json.error ?? "Something went wrong. Please try again.",
+              );
+              return;
+            }
+
+            setNeedsChannelId(false);
+            toast.success(`Slack invite sent (ID: ${json.inviteId})`);
+          } catch {
+            toast.error(
+              "Network error. Please check your connection and try again.",
+            );
+          }
+        }}
+      >
+        <Form needsChannelId={needsChannelId} />
+      </form>
+    </div>
+  );
+}
+
+const Form = ({ needsChannelId }: { needsChannelId: boolean }) => {
+  const { pending } = useFormStatus();
+
+  const inputClass = cn(
+    "block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm",
+    pending && "bg-neutral-100",
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="relative flex w-full rounded-md shadow-sm">
+        <input
+          name="email"
+          id="email"
+          type="email"
+          required
+          disabled={pending}
+          autoComplete="off"
+          className={inputClass}
+          placeholder="user@example.com"
+        />
+        {pending && (
+          <LoadingSpinner className="absolute inset-y-0 right-2 my-auto h-full w-5 text-neutral-400" />
+        )}
+      </div>
+
+      <div className="relative flex w-full rounded-md shadow-sm">
+        <span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
+          app.dub.co/
+        </span>
+        <input
+          name="workspaceSlug"
+          id="workspaceSlug"
+          type="text"
+          required
+          disabled={pending}
+          autoComplete="off"
+          className={cn(
+            "block w-full rounded-r-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm",
+            pending && "bg-neutral-100",
+          )}
+          placeholder="acme"
+        />
+        {pending && (
+          <LoadingSpinner className="absolute inset-y-0 right-2 my-auto h-full w-5 text-neutral-400" />
+        )}
+      </div>
+
+      {needsChannelId && (
+        <div className="relative flex w-full rounded-md shadow-sm">
+          <input
+            name="channelId"
+            id="channelId"
+            type="text"
+            required
+            disabled={pending}
+            autoComplete="off"
+            className={inputClass}
+            placeholder="Slack channel ID (e.g. C01234ABCDE)"
+            pattern="^[CG][A-Z0-9]{8,}$"
+          />
+          {pending && (
+            <LoadingSpinner className="absolute inset-y-0 right-2 my-auto h-full w-5 text-neutral-400" />
+          )}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={pending}
+        className={cn(
+          "rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-700 focus:outline-none",
+          pending && "opacity-50",
+        )}
+      >
+        {pending ? "Sending…" : "Send invite"}
+      </button>
+    </div>
+  );
+};

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

@@ -4,6 +4,7 @@ import { ImpersonateUser } from "./components/impersonate-user";
 import { ImpersonateWorkspace } from "./components/impersonate-workspace";
 import { RefreshDomain } from "./components/refresh-domain";
 import { ResetLoginAttempts } from "./components/reset-login-attempts";
+import { SlackSupportInvite } from "./components/slack-support-invite";
 
 export default function AdminPage() {
   return (
@@ -55,6 +56,14 @@ export default function AdminPage() {
         </p>
         <ResetLoginAttempts />
       </div>
+      <div className="flex flex-col space-y-4 px-5 py-10">
+        <h2 className="text-xl font-semibold">Slack Support Invite</h2>
+        <p className="text-sm text-neutral-500">
+          Manually send a priority Slack Connect invite to a user for a given
+          workspace (bypasses the plan check).
+        </p>
+        <SlackSupportInvite />
+      </div>
     </div>
   );
 }

apps/web/app/(ee)/api/admin/slack-support-invite/route.ts

@@ -0,0 +1,37 @@
+import { withAdmin } from "@/lib/auth";
+import {
+  inviteToSlackSupportChannel,
+  sharedSupportChannelName,
+} from "@/lib/slack/support-invite";
+import { NextResponse } from "next/server";
+
+// POST /api/admin/slack-support-invite — manually send a Slack Connect invite on behalf of a workspace.
+// Pass channelId when the channel already exists (name_taken) and you know the ID.
+export const POST = withAdmin(async ({ req }) => {
+  const { email, workspaceSlug, channelId } = await req.json();
+
+  if (!email || !workspaceSlug) {
+    return NextResponse.json(
+      { error: "email and workspaceSlug are required" },
+      { status: 400 },
+    );
+  }
+
+  const { inviteId, nameTaken } = await inviteToSlackSupportChannel({
+    email,
+    workspaceSlug,
+    channelId: channelId || undefined,
+  });
+
+  if (nameTaken) {
+    return NextResponse.json(
+      {
+        error: `Channel #${sharedSupportChannelName(workspaceSlug)} already exists. Provide its Slack channel ID (C…) to send the invite.`,
+        nameTaken: true,
+      },
+      { status: 409 },
+    );
+  }
+
+  return NextResponse.json({ success: true, inviteId });
+});

apps/web/app/api/workspaces/[idOrSlug]/support/slack-invite/route.ts

@@ -0,0 +1,72 @@
+import { DubApiError } from "@/lib/api/errors";
+import { withWorkspace } from "@/lib/auth";
+import { getPlanCapabilities } from "@/lib/plan-capabilities";
+import { requestSlackConnectSupportInvite } from "@/lib/slack/support-invite";
+import { ratelimit } from "@/lib/upstash";
+import { isWorkspaceBillingTrialActive } from "@dub/utils";
+import { NextResponse } from "next/server";
+
+// POST /api/workspaces/[idOrSlug]/support/slack-invite — Slack Connect invite to priority support
+export const POST = withWorkspace(
+  async ({ workspace, session }) => {
+    if (!getPlanCapabilities(workspace.plan).canRequestSlackSupportInvite) {
+      throw new DubApiError({
+        code: "forbidden",
+        message:
+          "Priority Slack support is only available on Advanced and Enterprise plans. Upgrade your workspace to request access.",
+      });
+    }
+
+    if (isWorkspaceBillingTrialActive(workspace.trialEndsAt)) {
+      throw new DubApiError({
+        code: "forbidden",
+        message:
+          "Priority Slack support is not available during a free trial. Activate your subscription to request access.",
+      });
+    }
+
+    const email = session.user.email?.trim();
+    if (!email) {
+      throw new DubApiError({
+        code: "bad_request",
+        message:
+          "Your account does not have an email address. Add one to request a Slack invite.",
+      });
+    }
+
+    const { success: workspaceSuccess } = await ratelimit(5, "1 d").limit(
+      `slack-support-invite:workspace:${workspace.id}`,
+    );
+
+    if (!workspaceSuccess) {
+      throw new DubApiError({
+        code: "rate_limit_exceeded",
+        message:
+          "This workspace has reached the daily limit for Slack invite requests. Please try again tomorrow.",
+      });
+    }
+
+    const { success: userSuccess } = await ratelimit(10, "1 h").limit(
+      `slack-support-invite:${workspace.id}:${session.user.id}`,
+    );
+
+    if (!userSuccess) {
+      throw new DubApiError({
+        code: "rate_limit_exceeded",
+        message:
+          "You've requested too many Slack invites recently. Please try again later.",
+      });
+    }
+
+    const { inviteId } = await requestSlackConnectSupportInvite({
+      workspaceSlug: workspace.slug,
+      email,
+    });
+
+    return NextResponse.json({ inviteId });
+  },
+  {
+    requiredPlan: ["advanced", "enterprise"],
+    requiredPermissions: ["workspaces.write"],
+  },
+);

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

@@ -3,6 +3,7 @@
 import { clientAccessCheck } from "@/lib/client-access-check";
 import useWorkspace from "@/lib/swr/use-workspace";
 import DeleteWorkspace from "@/ui/workspaces/delete-workspace";
+import { SlackSupportSettingsCard } from "@/ui/workspaces/slack-support-settings-card";
 import UploadLogo from "@/ui/workspaces/upload-logo";
 import { Form } from "@dub/ui";
 import { useSession } from "next-auth/react";
@@ -23,6 +24,7 @@ export default function WorkspaceSettingsClient() {
 
   return (
     <div className="mb-6 space-y-6">
+      <SlackSupportSettingsCard />
       <Form
         title="Workspace Name"
         description={`This is the name of your workspace on ${process.env.NEXT_PUBLIC_APP_NAME}.`}