feat: dedicated support self-serve

Author: arcoraven

apps/dashboard/src/@/api/dedicated-support.ts

@@ -0,0 +1,37 @@
+"use server";
+import "server-only";
+
+import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
+import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
+
+export async function createDedicatedSupportChannel(
+  teamIdOrSlug: string,
+  channelType: "slack" | "telegram",
+): Promise<{ error: string | null }> {
+  const token = await getAuthToken();
+  if (!token) {
+    return { error: "Unauthorized" };
+  }
+
+  const res = await fetch(
+    `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${teamIdOrSlug}/dedicated-support-channel`,
+    {
+      body: JSON.stringify({
+        type: channelType,
+      }),
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    },
+  );
+  if (!res.ok) {
+    const json = await res.json();
+    return {
+      error:
+        json.error?.message ?? "Failed to create dedicated support channel.",
+    };
+  }
+  return { error: null };
+}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/_components/settings-cards/dedicated-support.tsx

@@ -0,0 +1,160 @@
+"use client";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { toast } from "sonner";
+import { createDedicatedSupportChannel } from "@/api/dedicated-support";
+import type { Team } from "@/api/team";
+import { SettingsCard } from "@/components/blocks/SettingsCard";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+
+const CHANNEL_TYPES = [
+  { name: "Slack", value: "slack" },
+  { name: "Telegram", value: "telegram" },
+] as const;
+type ChannelType = (typeof CHANNEL_TYPES)[number]["value"];
+
+interface DedicatedSupportFormProps {
+  teamId: string;
+  teamSlug: string;
+  billingPlan: Team["billingPlan"];
+  channelType?: ChannelType;
+  channelName?: string;
+  isOwnerAccount: boolean;
+}
+
+export function TeamDedicatedSupportCard({
+  teamId,
+  teamSlug,
+  billingPlan,
+  channelType,
+  channelName,
+  isOwnerAccount,
+}: DedicatedSupportFormProps) {
+  const router = useDashboardRouter();
+  const [selectedChannelType, setSelectedChannelType] = useState<ChannelType>(
+    CHANNEL_TYPES[0].value,
+  );
+
+  const isFeatureEnabled = billingPlan === "scale" || billingPlan === "pro";
+
+  const createMutation = useMutation({
+    mutationFn: async (params: {
+      teamId: string;
+      channelType: "slack" | "telegram";
+    }) => {
+      const res = await createDedicatedSupportChannel(
+        params.teamId,
+        params.channelType,
+      );
+      if (res.error) {
+        throw new Error(res.error);
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message);
+    },
+    onSuccess: () => {
+      toast.success(
+        "Dedicated support channel requested. Please check your email for an invite link shortly.",
+      );
+    },
+  });
+
+  // Already set up.
+  if (channelType && channelName) {
+    return (
+      <SettingsCard
+        bottomText={undefined}
+        errorText={undefined}
+        header={{
+          description:
+            "Get a dedicated support channel with the thirdweb team.",
+          title: "Dedicated Support",
+        }}
+        noPermissionText={undefined}
+      >
+        <div className="md:w-[450px]">
+          <p className="text-muted-foreground text-sm">
+            Your dedicated support channel: #<strong>{channelName}</strong> on{" "}
+            {CHANNEL_TYPES.find((c) => c.value === channelType)?.name}
+          </p>
+        </div>
+      </SettingsCard>
+    );
+  }
+
+  return (
+    <SettingsCard
+      bottomText={
+        !isFeatureEnabled ? (
+          <>
+            Upgrade to the <b>Scale</b> or <b>Pro</b> plan to unlock this
+            feature.
+          </>
+        ) : undefined
+      }
+      errorText={undefined}
+      header={{
+        description: "Get a dedicated support channel with the thirdweb team.",
+        title: "Dedicated Support",
+      }}
+      noPermissionText={
+        !isOwnerAccount
+          ? "Only team owners can request a dedicated support channel."
+          : undefined
+      }
+      saveButton={
+        isFeatureEnabled
+          ? {
+              disabled: createMutation.isPending,
+              isPending: createMutation.isPending,
+              label: "Create Support Channel",
+              onClick: () =>
+                createMutation.mutate({
+                  channelType: selectedChannelType,
+                  teamId,
+                }),
+            }
+          : {
+              disabled: false,
+              isPending: false,
+              label: "Upgrade Plan",
+              onClick: () =>
+                router.push(
+                  `/team/${teamSlug}/~/settings/billing?showPlans=true&highlight=scale`,
+                ),
+            }
+      }
+    >
+      <div className="md:w-[450px]">
+        <Select
+          disabled={!isFeatureEnabled}
+          onValueChange={(val) => setSelectedChannelType(val as ChannelType)}
+          value={selectedChannelType}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select Channel Type" />
+          </SelectTrigger>
+          <SelectContent>
+            {CHANNEL_TYPES.map(({ name, value }) => (
+              <SelectItem key={value} value={value}>
+                {name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <p className="mt-2 text-muted-foreground text-sm">
+        All current members of this team will be sent an invite link to their
+        email. You can invite other members later.
+      </p>
+    </SettingsCard>
+  );
+}