Merge pull request #1029 from trycompai/mariano/comp-229-dub-affiliates

[dev] [Marfuen] mariano/comp-229-dub-affiliates

Author: Marfuen

apps/app/package.json

@@ -19,6 +19,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@dub/embed-react": "^0.0.14",
     "@hookform/resolvers": "^5.1.1",
     "@mendable/firecrawl-js": "^1.24.0",
     "@nangohq/frontend": "^0.53.2",
@@ -46,6 +47,7 @@
     "axios": "^1.9.0",
     "better-auth": "^1.2.8",
     "d3": "^7.9.0",
+    "dub": "^0.63.5",
     "framer-motion": "^12.18.1",
     "geist": "^1.3.1",
     "motion": "^12.9.2",

apps/app/src/app/(app)/[orgId]/referrals/components/DubReferral.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { DubEmbed } from '@dub/embed-react';
+import { useEffect, useState } from 'react';
+
+export const DubReferral = () => {
+  const [publicToken, setPublicToken] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPublicToken = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+
+        const response = await fetch('/api/dub/embed-token');
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch token: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.publicToken) {
+          throw new Error('No public token received from server');
+        }
+
+        setPublicToken(data.publicToken);
+      } catch (err) {
+        console.error('Error fetching public token:', err);
+        setError(err instanceof Error ? err.message : 'An unexpected error occurred');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPublicToken();
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-[400px] items-center justify-center">
+        <div className="w-full max-w-md rounded-md border border-destructive/50 bg-destructive/10 p-6 text-center">
+          <h3 className="mb-2 text-sm font-medium text-destructive">Oops, something went wrong</h3>
+          <p className="text-xs text-destructive/80">{error}</p>
+          <p className="mt-4 text-xs text-muted-foreground">
+            Please refresh the page and try again. If the problem persists,{' '}
+            <a
+              href="https://discord.gg/compai"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline underline-offset-2 hover:text-foreground transition-colors"
+            >
+              contact us
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!publicToken) {
+    return (
+      <div className="rounded-md border border-muted bg-muted/50 p-4">
+        <p className="text-sm text-muted-foreground">
+          No token available. Please try refreshing the page.
+        </p>
+      </div>
+    );
+  }
+
+  return <DubEmbed data="referrals" token={publicToken} />;
+};

apps/app/src/app/(app)/[orgId]/referrals/page.tsx

@@ -0,0 +1,5 @@
+import { DubReferral } from './components/DubReferral';
+
+export default function ReferralsPage() {
+  return <DubReferral />;
+}

apps/app/src/app/api/dub/embed-token/route.ts

@@ -0,0 +1,43 @@
+import { env } from '@/env.mjs';
+import { auth } from '@/utils/auth';
+import { Dub } from 'dub';
+import { NextResponse } from 'next/server';
+
+const dub = new Dub({
+  token: env.DUB_API_KEY,
+});
+
+export async function GET(request: Request) {
+  const session = await auth.api.getSession({
+    headers: request.headers,
+  });
+  const user = session?.user;
+
+  if (!user) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const programId = env.DUB_PROGRAM_ID;
+
+  if (!programId) {
+    return NextResponse.json({ error: 'Program ID is not set' }, { status: 500 });
+  }
+
+  try {
+    const { publicToken } = await dub.embedTokens.referrals({
+      programId, // program ID from your Dub dashboard (in the URL)
+      tenantId: user.id, // the user's ID within your application
+      partner: {
+        name: user.name, // the user's name
+        email: user.email, // the user's email
+        image: user.image, // the user's image/avatar
+        tenantId: user.id, // the user's ID within your application
+      },
+    });
+
+    return NextResponse.json({ publicToken });
+  } catch (error) {
+    console.error('Error fetching embed token:', error);
+    return NextResponse.json({ error: 'Failed to fetch embed token' }, { status: 500 });
+  }
+}

apps/app/src/components/main-menu.tsx

@@ -9,6 +9,7 @@ import {
   Blocks,
   FlaskConical,
   Gauge,
+  Gift,
   ListCheck,
   NotebookText,
   ShieldEllipsis,
@@ -126,6 +127,14 @@ export function MainMenu({ organizationId, isCollapsed = false, onItemClick }: P
         variant: 'secondary',
       },
     },
+    {
+      id: 'referrals',
+      path: '/:organizationId/referrals',
+      name: 'Referrals',
+      disabled: false,
+      icon: Gift,
+      protected: false,
+    },
     {
       id: 'settings',
       path: '/:organizationId/settings',

apps/app/src/env.mjs

@@ -36,6 +36,8 @@ export const env = createEnv({
     ZAPIER_HUBSPOT_WEBHOOK_URL: z.string().optional(),
     FLEET_URL: z.string().optional(),
     FLEET_TOKEN: z.string().optional(),
+    DUB_API_KEY: z.string().optional(),
+    DUB_PROGRAM_ID: z.string().optional(),
   },
 
   client: {
@@ -87,6 +89,8 @@ export const env = createEnv({
       process.env.NEXT_PUBLIC_STRIPE_SUBSCRIPTION_MANAGED_MONTHLY_PRICE_ID,
     NEXT_PUBLIC_STRIPE_SUBSCRIPTION_MANAGED_YEARLY_PRICE_ID:
       process.env.NEXT_PUBLIC_STRIPE_SUBSCRIPTION_MANAGED_YEARLY_PRICE_ID,
+    DUB_API_KEY: process.env.DUB_API_KEY,
+    DUB_PROGRAM_ID: process.env.DUB_PROGRAM_ID,
   },
 
   skipValidation: !!process.env.CI || !!process.env.SKIP_ENV_VALIDATION,

bun.lock

@@ -46,7 +46,9 @@
         "FLEET_DEVICE_PATH_MAC",
         "FLEET_AGENT_BUCKET_NAME",
         "FLEET_DEVICE_PATH_WINDOWS",
-        "LOGO_DEV"
+        "LOGO_DEV",
+        "DUB_API_KEY",
+        "DUB_PROGRAM_ID"
       ],
       "inputs": ["$TURBO_DEFAULT$", ".env"],
       "dependsOn": ["^build", "^db:generate", "^auth:build"],