feat: dub refer embed #20258

Amit91848 · 2025-03-20T14:47:17Z

What does this PR do?

Created a clean /refer page with proper loading states and dub embed
Set up the API endpoint to generate user-specific referral tokens
Implemented theme support so it looks good in both light/dark modes
This PR adds the ability for users to earn affiliate commissions through a Dub-powered referral system.

Demo

https://www.loom.com/share/86aadaaf8fef486387fde9ebfae73305

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Go to /refer (bottom of sidebar)
See Dub.co embed pop up
Have a shareable affiliate link

graphite-app · 2025-03-20T14:50:11Z

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (03/20/25)

1 reviewer was added to this PR based on Keith Williams's automation.

hbjORbj · 2025-03-20T15:00:09Z

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

+import ReferralClient from "@calcom/features/dub/ReferralClient";
+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/skeleton";


Suggested change

import { SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/skeleton";

import { SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";

hbjORbj · 2025-03-20T15:00:19Z

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

+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/skeleton";
+import { showToast } from "@calcom/ui/toast";


Suggested change

import { showToast } from "@calcom/ui/toast";

import { showToast } from "@calcom/ui/components/toast";

hbjORbj · 2025-03-20T15:01:11Z

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

+};
+
+// The enabled referrals page implementation
+const EnabledReferralsPage = () => {


i would move this to refer/EnabledReferralsPage.tsx

hbjORbj · 2025-03-20T15:01:21Z

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

+};
+
+// Export the appropriate component based on the feature flag
+export default function ReferralsPage() {


this can be async

hbjORbj · 2025-03-20T15:01:32Z

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

+
+// Export the appropriate component based on the feature flag
+export default function ReferralsPage() {
+  const { t } = useLocale();


this can be const t = await getTranslate();

vercel · 2025-03-20T15:35:36Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Mar 24, 2025 9:30am
calcom-web-canary	⬜️ Ignored (Inspect)	Visit Preview		Mar 24, 2025 9:30am

hbjORbj · 2025-03-20T21:56:26Z

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

+  }
+
+  try {
+    const session = await getServerSession({ req: buildLegacyRequest(headers(), cookies()) });


Suggested change

const session = await getServerSession({ req: buildLegacyRequest(headers(), cookies()) });

const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });

because we're merging Next.js 15 in a moment

hbjORbj · 2025-03-20T21:59:07Z

packages/features/dub/ReferralClient.tsx

+
+import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";
+
+const ReferralClientImpl = ({ publicToken }: { publicToken: string }) => {


if this is used in apps/web/app only, it can exist there. better be in refer dir

that also means @dub/embed-react can only be in apps/web/package.json

…b-referral-embed

github-actions · 2025-03-21T08:02:48Z

E2E results are ready!

Workflow #53807.1 latest results

zomars · 2025-03-21T19:51:21Z

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

+    return null;
+  }
+
+  if (loading || !token) {


Can we use loading.tsx Pattern instead?

https://nextjs.org/docs/app/building-your-application/routing/route-groups#opting-for-loading-skeletons-on-a-specific-route

Loader for Shell Sidebar and Page loads differently so it looks weird??

Screencast.from.2025-03-24.14-28-14.webm

Instead of loading.tsx, should I wrap the DubReferralsPage is Suspense? @zomars

socket-security · 2025-03-21T19:56:20Z

No dependency changes detected. Learn more about Socket for GitHub ↗︎

👍 No dependency changes detected in pull request

…b-referral-embed

feat: dub refer embed

275e802

Amit91848 requested a review from a team as a code owner March 20, 2025 14:47

graphite-app bot requested a review from a team March 20, 2025 14:47

github-actions bot added the ❗️ .env changes contains changes to env variables label Mar 20, 2025

keithwillcode added the core area: core, team members only label Mar 20, 2025

dosubot bot added embed area: embed, widget, react embed ✨ feature New feature or request labels Mar 20, 2025

Amit91848 mentioned this pull request Mar 20, 2025

feat: Referrals embed #19722

Closed

3 tasks

Amit91848 added the ready-for-e2e label Mar 20, 2025

vercel bot deployed to Preview – api March 20, 2025 14:55 View deployment

hbjORbj reviewed Mar 20, 2025

View reviewed changes

vercel bot deployed to Preview – dev March 20, 2025 15:03 View deployment

review fix

47604a4

Merge branch 'main' into feat/dub-referral-embed

d3bd267

Amit91848 requested a review from hbjORbj March 20, 2025 15:36

vercel bot deployed to Preview – api March 20, 2025 15:49 View deployment

vercel bot deployed to Preview – dev March 20, 2025 16:07 View deployment

Merge branch 'main' into feat/dub-referral-embed

a2c22be

vercel bot deployed to Preview – api March 20, 2025 20:18 View deployment

vercel bot deployed to Preview – dev March 20, 2025 20:26 View deployment

hbjORbj requested changes Mar 20, 2025

View reviewed changes

github-actions bot marked this pull request as draft March 20, 2025 21:59

review fix

7348da0

Amit91848 marked this pull request as ready for review March 21, 2025 07:25

Amit91848 requested a review from hbjORbj March 21, 2025 07:29

Merge branch 'main' of https://github.com/calcom/cal.com into feat/du…

dc91d64

…b-referral-embed

vercel bot deployed to Preview – api March 21, 2025 07:42 View deployment

vercel bot deployed to Preview – dev March 21, 2025 08:00 View deployment

Merge branch 'main' into feat/dub-referral-embed

60da5c8

zomars reviewed Mar 21, 2025

View reviewed changes

@dub/embed-core seems not needed

083697d

hbjORbj added 3 commits March 21, 2025 15:59

@dub/embed-core can stay in web

937f666

move refer page out of main-nav

8e7cebf

update yarn lock

2bf60e0

vercel bot deployed to Preview – api March 21, 2025 20:15 View deployment

vercel bot deployed to Preview – dev March 21, 2025 20:39 View deployment

Amit91848 added 2 commits March 24, 2025 09:21

use loading.tsx

7ab645e

Merge branch 'main' of https://github.com/calcom/cal.com into feat/du…

cb3fbae

…b-referral-embed

Amit91848 requested a review from zomars March 24, 2025 09:29

vercel bot deployed to Preview – api March 24, 2025 09:39 View deployment

vercel bot deployed to Preview – dev March 24, 2025 09:49 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: dub refer embed #20258

feat: dub refer embed #20258

Amit91848 commented Mar 20, 2025

graphite-app bot commented Mar 20, 2025

hbjORbj Mar 20, 2025

hbjORbj Mar 20, 2025

hbjORbj Mar 20, 2025

hbjORbj Mar 20, 2025

hbjORbj Mar 20, 2025

vercel bot commented Mar 20, 2025 •

edited

Loading

hbjORbj Mar 20, 2025

hbjORbj Mar 20, 2025

hbjORbj Mar 20, 2025

zomars Mar 21, 2025

github-actions bot commented Mar 21, 2025 •

edited

Loading

zomars Mar 21, 2025

zomars Mar 21, 2025

Amit91848 Mar 24, 2025

Amit91848 Mar 24, 2025

socket-security bot commented Mar 21, 2025 •

edited

Loading

	import { SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/skeleton";
	import { SkeletonAvatar, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";

	import { showToast } from "@calcom/ui/toast";
	import { showToast } from "@calcom/ui/components/toast";

	const session = await getServerSession({ req: buildLegacyRequest(headers(), cookies()) });
	const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });


		import { IS_DUB_REFERRALS_ENABLED } from "@calcom/lib/constants";

		const ReferralClientImpl = ({ publicToken }: { publicToken: string }) => {

feat: dub refer embed #20258

Are you sure you want to change the base?

feat: dub refer embed #20258

Conversation

Amit91848 commented Mar 20, 2025

What does this PR do?

Demo

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

graphite-app bot commented Mar 20, 2025

Graphite Automations

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Mar 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 21, 2025 • edited Loading

E2E results are ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

socket-security bot commented Mar 21, 2025 • edited Loading

vercel bot commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

socket-security bot commented Mar 21, 2025 •

edited

Loading