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

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

Author: Marfuen

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

@@ -1,95 +1,24 @@
 'use client';
 
-import { Skeleton } from '@comp/ui/skeleton';
 import { DubEmbed } from '@dub/embed-react';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
-
-export const DubReferral = () => {
-  const [publicToken, setPublicToken] = useState('');
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const { theme } = useTheme();
-
-  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 className="flex items-center justify-center">
-        <Skeleton className="h-[100vh] w-full max-w-[1024px] rounded-none" />
-      </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>
-    );
-  }
 
+export const DubReferral = ({ publicToken }: { publicToken: string | null }) => {
   if (!publicToken) {
     return (
-      <div className="rounded-md border border-muted bg-muted/50 p-4">
+      <div className="flex min-h-[400px] items-center justify-center">
         <p className="text-sm text-muted-foreground">
           No token available. Please try refreshing the page.
         </p>
       </div>
     );
   }
 
-  const dubTheme = theme === 'dark' ? 'dark' : 'light';
-
   return (
     <DubEmbed
       data="referrals"
       token={publicToken}
       options={{
-        theme: dubTheme,
+        theme: 'system',
       }}
     />
   );

apps/app/src/app/(app)/[orgId]/referrals/lib/dub.ts

@@ -0,0 +1,6 @@
+import { env } from '@/env.mjs';
+import { Dub } from 'dub';
+
+export const dub = new Dub({
+  token: env.DUB_API_KEY,
+});

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

@@ -1,5 +1,36 @@
+import { env } from '@/env.mjs';
+import { auth } from '@/utils/auth';
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
 import { DubReferral } from './components/DubReferral';
+import { dub } from './lib/dub';
 
-export default function ReferralsPage() {
-  return <DubReferral />;
+export default async function ReferralsPage() {
+  const publicToken = await createPublicToken();
+
+  return <DubReferral publicToken={publicToken} />;
+}
+
+async function createPublicToken() {
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session) {
+    redirect('/');
+  }
+
+  if (!env.DUB_PROGRAM_ID || !env.DUB_API_KEY) {
+    return null;
+  }
+
+  const { publicToken } = await dub.embedTokens.referrals({
+    programId: env.DUB_PROGRAM_ID,
+    partner: {
+      tenantId: session.user.id,
+      name: session.user.name || '',
+      email: session.user.email || '',
+      image: session.user.image || '',
+    },
+  });
+
+  return publicToken;
 }