feat: dub refer embed

.env.example

@@ -117,6 +117,11 @@ NEXT_PUBLIC_PLAIN_CHAT_ID=
 PLAIN_CHAT_HMAC_SECRET_KEY=
 NEXT_PUBLIC_PLAIN_CHAT_EXCLUDED_PATHS=
 
+
+# Dub Config
+DUB_API_KEY=
+NEXT_PUBLIC_DUB_PROGRAM_ID=
+
 # Zendesk Config
 NEXT_PUBLIC_ZENDESK_KEY=
 
@@ -429,6 +434,4 @@ NEXT_PUBLIC_QUERY_AVAILABLE_SLOTS_INTERVAL_SECONDS=
 # Used to invalidate available slots when navigating to booking form
 NEXT_PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM=0
 # Used to enable quick availability checks for x% of all visitors
-NEXT_PUBLIC_QUICK_AVAILABILITY_ROLLOUT=10
-
-
+NEXT_PUBLIC_QUICK_AVAILABILITY_ROLLOUT=10

apps/web/app/(use-page-wrapper)/refer/DubReferralsPage.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { DubEmbed } from "@dub/embed-react";
+import { useTheme } from "next-themes";
+import { useState, useEffect } from "react";
+
+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { showToast } from "@calcom/ui/components/toast";
+
+const fetchReferralsToken = async () => {
+  try {
+    const response = await fetch("/api/user/referrals-token");
+
+    if (!response.ok) {
+      const { error } = await response.json();
+      showToast(error, "error");
+      return null;
+    }
+
+    const data = await response.json();
+
+    return data.publicToken;
+  } catch (error) {
+    console.error("Error fetching referrals token:", error);
+    return null;
+  }
+};
+
+// The enabled referrals page implementation
+export const DubReferralsPage = () => {
+  const [token, setToken] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { t } = useLocale();
+  const { resolvedTheme } = useTheme();
+
+  useEffect(() => {
+    const getToken = async () => {
+      try {
+        const publicToken = await fetchReferralsToken();
+        setToken(publicToken);
+      } catch (err) {
+        console.error("Error fetching referrals token:", err);
+        showToast(t("unexpected_error_try_again"), "error");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getToken();
+  }, []);
+
+  if (!IS_DUB_REFERRALS_ENABLED || !token) {
+    return null;
+  }
+
+  const theme = resolvedTheme === "dark" ? "dark" : "light";
+
+  return (
+    <DubEmbed
+      data="referrals"
+      token={token}
+      options={{
+        theme,
+        themeOptions: {
+          backgroundColor: `${theme === "dark" ? "#0F0F0F" : "#FFFFFF"}`,
+        },
+      }}
+    />
+  );
+};

apps/web/app/(use-page-wrapper)/refer/loading.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import {
+  SkeletonAvatar,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui/components/skeleton";
+
+export default function Loading() {
+  return (
+    <SkeletonContainer className="mx-auto max-w-4xl">
+      <div className="rounded-md p-8">
+        <div className="mb-2 flex items-center">
+          <SkeletonText className="h-5 w-32" />
+        </div>
+
+        <div className="mb-6 space-y-2">
+          <SkeletonText className="h-7 w-3/4" />
+          <SkeletonText className="h-7 w-1/2" />
+        </div>
+
+        <div className="mb-6">
+          <SkeletonText className="mb-2 h-5 w-24" />
+          <div className="flex items-center space-x-2">
+            <SkeletonText className="h-10 w-full rounded-md" />
+            <SkeletonButton className="h-10 w-28 rounded-md" />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 grid grid-cols-3 gap-4 p-4">
+        <div className="col-span-1">
+          <div className="mb-4 grid grid-cols-3 gap-2 p-4">
+            {[...Array(9)].map((_, i) => (
+              <div key={i} className="flex justify-center">
+                <SkeletonAvatar className="h-10 w-10 rounded-md" />
+              </div>
+            ))}
+          </div>
+          <div className="px-4 pb-4">
+            <SkeletonText className="mb-2 h-6 w-full" />
+            <SkeletonButton className="h-10 w-full rounded-md" />
+          </div>
+        </div>
+
+        <div className="col-span-1">
+          <div className="mb-[60px] flex justify-center p-4 md:mb-10">
+            <SkeletonAvatar className="mt-10 h-16 w-16 rounded-full md:mt-7 md:h-24 md:w-24" />
+          </div>
+          <div className="px-4 pb-4">
+            <SkeletonText className="mb-2 h-6 w-full" />
+            <SkeletonButton className="h-10 w-full rounded-md" />
+          </div>
+        </div>
+
+        <div className="col-span-1">
+          <div className="mb-[60px] flex justify-center p-4 md:mb-10">
+            <SkeletonAvatar className="mt-10 h-16 w-16 rounded-md md:mt-7 md:h-24 md:w-24" />
+          </div>
+          <div className="px-4 pb-4">
+            <SkeletonText className="mb-2 h-6 w-full" />
+            <SkeletonButton className="h-10 w-full rounded-md" />
+          </div>
+        </div>
+      </div>
+    </SkeletonContainer>
+  );
+}

apps/web/app/(use-page-wrapper)/refer/page.tsx

@@ -0,0 +1,24 @@
+import { getTranslate } from "app/_utils";
+
+import Shell from "@calcom/features/shell/Shell";
+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
+
+import { DubReferralsPage } from "./DubReferralsPage";
+
+// Export the appropriate component based on the feature flag
+export default async function ReferralsPage() {
+  const t = await getTranslate();
+
+  return (
+    <Shell withoutMain={true}>
+      {IS_DUB_REFERRALS_ENABLED ? (
+        <DubReferralsPage />
+      ) : (
+        <div className="mx-auto max-w-4xl p-8 text-center">
+          <h2 className="mb-4 text-xl font-semibold">{t("referral_program")}</h2>
+          <p>{t("dub_disabled_error_message")}</p>
+        </div>
+      )}
+    </Shell>
+  );
+}

apps/web/app/api/user/referrals-token/route.ts

@@ -0,0 +1,38 @@
+import { defaultResponderForAppDir } from "app/api/defaultResponderForAppDir";
+import { headers, cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+import { dub } from "@calcom/feature-auth/lib/dub";
+import { getServerSession } from "@calcom/feature-auth/lib/getServerSession";
+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
+
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
+
+export const dynamic = "force-dynamic";
+
+const handler = async () => {
+  // Return early if the feature is disabled
+  if (!IS_DUB_REFERRALS_ENABLED) {
+    return NextResponse.json({ error: "Referrals feature is disabled" }, { status: 404 });
+  }
+
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  if (!session) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  const { publicToken } = await dub.embedTokens.referrals({
+    programId: process.env.NEXT_PUBLIC_DUB_PROGRAM_ID as string,
+    tenantId: session.user.id.toString(),
+    partner: {
+      name: session?.user.name || session?.user.email || "",
+      email: session?.user.email || session?.user.name || "",
+      username: session?.user.username || "",
+      image: session?.user.image || null,
+      tenantId: session?.user.id.toString() || "",
+    },
+  });
+
+  return NextResponse.json({ publicToken });
+};
+
+export const GET = defaultResponderForAppDir(handler);

apps/web/package.json

@@ -45,6 +45,8 @@
     "@daily-co/daily-js": "^0.76.0",
     "@daily-co/daily-react": "^0.22.0",
     "@dub/analytics": "^0.0.15",
+    "@dub/embed-core": "^0.0.10",
+    "@dub/embed-react": "^0.0.10",
     "@formkit/auto-animate": "1.0.0-beta.5",
     "@glidejs/glide": "^3.5.2",
     "@googleapis/admin": "^23.0.0",

apps/web/public/static/locales/en/common.json

@@ -3028,6 +3028,9 @@
   "inactive_team_plan": "Inactive team plan",
   "inactive_team_plan_description": "Your team plan is inactive. Check your subcription or reach out to customer support",
   "limited_access_trial_mode": "Limited access during trial. Feature available after trial ends.",
+  "earn_20_percent_affiliate": "20% Referral",
+  "referral_program": "Referral Program",
+  "dub_disabled_error_message": "You need a Dub API Key and Program Id to use this page.",
   "uid": "UID",
   "link": "Link",
   "rows_per_page": "rows per page",

packages/features/shell/useBottomNavItems.ts

@@ -1,8 +1,6 @@
 import type { User as UserAuth } from "next-auth";
-import { useState } from "react";
 
-import { IS_CALCOM } from "@calcom/lib/constants";
-import { useCopy } from "@calcom/lib/hooks/useCopy";
+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -20,8 +18,6 @@ export function useBottomNavItems({
   user,
 }: BottomNavItemsProps): NavigationItemType[] {
   const { t } = useLocale();
-  const [isReferalLoading, setIsReferalLoading] = useState(false);
-  const { fetchAndCopyToClipboard } = useCopy();
 
   return [
     {
@@ -40,31 +36,11 @@ export function useBottomNavItems({
       },
       icon: "copy",
     },
-    IS_CALCOM
+    IS_DUB_REFERRALS_ENABLED
       ? {
-          name: "copy_referral_link",
-          href: "",
-          onClick: (e: { preventDefault: () => void }) => {
-            e.preventDefault();
-            setIsReferalLoading(true);
-            // Create an artificial delay to show the loading state so it doesn't flicker if this request is fast
-            setTimeout(() => {
-              fetchAndCopyToClipboard(
-                fetch("/api/generate-referral-link", {
-                  method: "POST",
-                })
-                  .then((res) => res.json())
-                  .then((res) => res.shortLink),
-                {
-                  onSuccess: () => showToast(t("link_copied"), "success"),
-                  onFailure: () => showToast("Copy to clipboard failed", "error"),
-                }
-              );
-              setIsReferalLoading(false);
-            }, 1000);
-          },
+          name: "earn_20_percent_affiliate",
+          href: "/refer",
           icon: "gift",
-          isLoading: isReferalLoading,
         }
       : null,
     isAdmin

packages/lib/constants.ts

@@ -210,4 +210,8 @@ export const DIRECTORY_IDS_TO_LOG = process.env.DIRECTORY_IDS_TO_LOG?.split(",")
 
 export const IS_PLAIN_CHAT_ENABLED =
   !!process.env.NEXT_PUBLIC_PLAIN_CHAT_ID && process.env.NEXT_PUBLIC_PLAIN_CHAT_ID !== "";
+
+export const IS_DUB_REFERRALS_ENABLED =
+  !!process.env.NEXT_PUBLIC_DUB_PROGRAM_ID && process.env.NEXT_PUBLIC_DUB_PROGRAM_ID !== "";
+
 export const CAL_VIDEO_MEETING_LINK_FOR_TESTING = process.env.CAL_VIDEO_MEETING_LINK_FOR_TESTING;

turbo.json

@@ -278,6 +278,7 @@
     "DATABASE_URL",
     "DEBUG",
     "DUB_API_KEY",
+    "NEXT_PUBLIC_DUB_PROGRAM_ID",
     "E2E_TEST_APPLE_CALENDAR_EMAIL",
     "E2E_TEST_APPLE_CALENDAR_PASSWORD",
     "E2E_TEST_CALCOM_QA_EMAIL",