Add "Guide" and "Coming Soon" integrations

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/[integrationSlug]/page.tsx

@@ -1,5 +1,5 @@
 import { prisma } from "@dub/prisma";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import IntegrationPageClient from "./page-client";
 
 export const revalidate = 0;
@@ -48,6 +48,14 @@ export default async function IntegrationPage({
     notFound();
   }
 
+  if (integration.comingSoon) {
+    redirect(`/${params.slug}/settings/integrations`);
+  }
+
+  if (integration.guideUrl) {
+    redirect(integration.guideUrl);
+  }
+
   const installed = integration.installations.length > 0;
 
   const credentials = installed

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/integrations/integrations-cards.tsx

@@ -50,6 +50,17 @@ export async function IntegrationsCards({
       {} as Record<string, IntegrationsWithInstallations>,
     );
 
+  // Sort integrations within each category
+  Object.keys(groupedIntegrations).forEach((category) => {
+    groupedIntegrations[category].sort((a, b) => {
+      // Put "coming soon" integrations at the end
+      if (a.comingSoon && !b.comingSoon) return 1;
+      if (!a.comingSoon && b.comingSoon) return -1;
+      // Sort by installation count in descending order
+      return (b._count.installations || 0) - (a._count.installations || 0);
+    });
+  });
+
   const categories = Object.keys(groupedIntegrations).sort(
     (a, b) =>
       CATEGORY_ORDER.indexOf(a as any) - CATEGORY_ORDER.indexOf(b as any),

apps/web/lib/actions/add-edit-integration.ts

@@ -3,6 +3,7 @@
 import { prisma } from "@dub/prisma";
 import { DUB_WORKSPACE_ID, nanoid, R2_URL } from "@dub/utils";
 import { waitUntil } from "@vercel/functions";
+import { createId } from "../api/utils";
 import { deleteScreenshots } from "../integrations/utils";
 import { isStored, storage } from "../storage";
 import z from "../zod";
@@ -18,7 +19,7 @@ export const addEditIntegration = authActionClient
       }),
     ),
   )
-  .action(async ({ parsedInput }) => {
+  .action(async ({ parsedInput, ctx }) => {
     const { id, workspaceId, ...integration } = parsedInput;
 
     // this is only available for Dub workspace for now
@@ -75,7 +76,9 @@ export const addEditIntegration = authActionClient
       await prisma.integration.create({
         data: {
           ...integration,
+          id: createId({ prefix: "int_" }),
           projectId: workspaceId,
+          userId: ctx.user.id,
         },
       });
     }

apps/web/lib/types.ts

@@ -282,6 +282,8 @@ export type InstalledIntegrationProps = Pick<
   | "developer"
   | "description"
   | "verified"
+  | "comingSoon"
+  | "guideUrl"
 > & {
   installations: number;
   installed?: boolean;

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

@@ -14,6 +14,8 @@ export const integrationSchema = z.object({
   screenshots: z.array(z.string()).nullish(),
   installUrl: z.string().nullish(),
   verified: z.boolean(),
+  guideUrl: z.string().nullish(),
+  comingSoon: z.boolean().nullish(),
   createdAt: z.date(),
   updatedAt: z.date(),
   installations: z.number().default(0),

apps/web/ui/integrations/integration-card.tsx

@@ -5,29 +5,35 @@ import useWorkspace from "@/lib/swr/use-workspace";
 import { InstalledIntegrationProps } from "@/lib/types";
 import { DubCraftedShield, Tooltip } from "@dub/ui";
 import { DUB_WORKSPACE_ID } from "@dub/utils";
+import { cn } from "@dub/utils/src";
+import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
+import { HTMLProps, PropsWithChildren } from "react";
 import { IntegrationLogo } from "./integration-logo";
 
 export default function IntegrationCard(
   integration: InstalledIntegrationProps,
 ) {
-  const { slug } = useWorkspace();
   const { integrations: activeIntegrations } = useIntegrations();
 
   const installed = activeIntegrations?.some((i) => i.id === integration.id);
 
   const dubCrafted = integration.projectId === DUB_WORKSPACE_ID;
 
   return (
-    <Link
-      href={`/${slug}/settings/integrations/${integration.slug}`}
-      className="hover:drop-shadow-card-hover relative rounded-lg border border-gray-200 bg-white p-4 transition-[filter]"
-    >
-      {installed && (
-        <div className="absolute right-4 top-4 rounded bg-green-100 px-2 py-1 text-[0.625rem] font-semibold uppercase leading-none text-green-800">
-          Enabled
-        </div>
-      )}
+    <Wrapper integration={integration}>
+      {installed ? (
+        <Badge className="bg-green-100 text-green-800">Enabled</Badge>
+      ) : integration.comingSoon ? (
+        <Badge className="bg-violet-100 text-violet-800">Coming Soon</Badge>
+      ) : integration.guideUrl ? (
+        <Badge className="bg-blue-100 text-blue-800">
+          <span>Guide</span>
+          <div className="flex w-0 justify-end overflow-hidden opacity-0 transition-[width,opacity] group-hover:w-3 group-hover:opacity-100">
+            <ArrowUpRight className="size-2.5" strokeWidth={2.5} />
+          </div>
+        </Badge>
+      ) : undefined}
       <IntegrationLogo src={integration.logo ?? null} alt={integration.name} />
       <h3 className="mt-4 flex items-center gap-1.5 text-sm font-semibold text-gray-800">
         {integration.name}
@@ -43,6 +49,47 @@ export default function IntegrationCard(
       <p className="mt-2 line-clamp-3 text-sm text-neutral-600">
         {integration.description}
       </p>
+    </Wrapper>
+  );
+}
+
+function Wrapper({
+  integration,
+  children,
+}: PropsWithChildren<{
+  integration: InstalledIntegrationProps;
+}>) {
+  const { slug } = useWorkspace();
+
+  const className = cn(
+    "group relative rounded-lg border border-gray-200 bg-white p-4 transition-[filter]",
+    integration.comingSoon ? "cursor-default" : "hover:drop-shadow-card-hover",
+  );
+
+  return integration.comingSoon ? (
+    <div className={className}>{children}</div>
+  ) : (
+    <Link
+      href={
+        integration.guideUrl ||
+        `/${slug}/settings/integrations/${integration.slug}`
+      }
+      target={integration.guideUrl ? "_blank" : undefined}
+      className={className}
+    >
+      {children}
     </Link>
   );
 }
+
+function Badge({ className, ...rest }: HTMLProps<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "absolute right-4 top-4 flex items-center rounded px-2 py-1 text-[0.625rem] font-semibold uppercase leading-none",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}

packages/prisma/schema/integration.prisma

@@ -11,8 +11,10 @@ model Integration {
   logo        String?
   screenshots Json?
   verified    Boolean  @default(false)
-  installUrl  String?
+  installUrl  String?  @db.LongText
+  guideUrl    String?  @db.LongText
   category    String?
+  comingSoon  Boolean  @default(false)
   createdAt   DateTime @default(now())
   updatedAt   DateTime @updatedAt