Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add WelcomeEmailPartner #2508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
steven-tey merged 3 commits into from
Jun 9, 2025
Merged

Add WelcomeEmailPartner #2508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30c4d26
Add WelcomeEmailPartner
steven-tey Jun 9, 2025
db66dad
Update welcome-email-partner.tsx
steven-tey Jun 9, 2025
31ee082
Update welcome-email-partner.tsx
steven-tey Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 26 additions & 10 deletions apps/web/app/(ee)/api/cron/welcome-user/route.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { verifyQstashSignature } from "@/lib/cron/verify-qstash";
import { sendEmail } from "@dub/email";
import { subscribe } from "@dub/email/resend/subscribe";
import { WelcomeEmail } from "@dub/email/templates/welcome-email";
import { WelcomeEmailPartner } from "@dub/email/templates/welcome-email-partner";
import { prisma } from "@dub/prisma";

export const dynamic = "force-dynamic";
Expand Down Expand Up @@ -46,19 +47,34 @@ export async function POST(req: Request) {
name: user.name || undefined,
audience: isPartner ? "partners.dub.co" : "app.dub.co",
}),
// TODO: Add partners.dub.co welcome email
isPartner
? undefined
: sendEmail({
email: user.email,
replyTo: "[email protected]",
subject: "Welcome to Dub!",
react: WelcomeEmail({
// // TODO: Add partners.dub.co welcome email
// isPartner
// ? undefined
// : sendEmail({
// email: user.email,
// replyTo: "[email protected]",
// subject: "Welcome to Dub!",
// react: WelcomeEmail({
// email: user.email,
// name: user.name,
// }),
// variant: "marketing",
// }),
sendEmail({
email: user.email,
replyTo: "[email protected]",
subject: `Welcome to Dub${isPartner ? " Partners" : ""}!`,
react: isPartner
? WelcomeEmailPartner({
email: user.email,
name: user.name,
})
: WelcomeEmail({
email: user.email,
name: user.name,
}),
variant: "marketing",
}),
variant: "marketing",
}),
]);

return new Response("Welcome email sent and user subscribed.", {
Expand Down
2 changes: 1 addition & 1 deletion packages/email/src/templates/upgrade-email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export function UpgradeEmail({
</Text>
{planDetails.features?.map((feature) => (
<Text className="ml-1 text-sm leading-4 text-black">
◆{" "}
✦{" "}
{feature.tooltip?.href ? (
<Link href={feature.tooltip.href}>{feature.text}</Link>
) : (
Expand Down
110 changes: 110 additions & 0 deletions packages/email/src/templates/welcome-email-partner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { DUB_WORDMARK } from "@dub/utils";
import {
Body,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Preview,
Section,
Tailwind,
Text,
} from "@react-email/components";
import { Footer } from "../components/footer";

export function WelcomeEmailPartner({
name = "Brendon Urie",
email = "[email protected]",
}: {
name: string | null;
email: string;
}) {
return (
<Html>
<Head />
<Preview>Welcome to Dub</Preview>
<Tailwind>
<Body className="mx-auto my-auto bg-white font-sans">
<Container className="mx-auto my-10 max-w-[600px] rounded border border-solid border-neutral-200 px-10 py-5">
<Section className="mt-8">
<Img src={DUB_WORDMARK} height="32" alt="Dub" />
</Section>
<Heading className="mx-0 my-7 p-0 text-xl font-semibold text-black">
Welcome{name ? ` ${name}` : ""}!
</Heading>
<Text className="mb-8 text-sm leading-6 text-gray-600">
You're officially a Dub Partner – time to start earning rewards by
referring your audience to the brands you work with.
</Text>

<Hr />

<Heading className="mx-0 my-6 p-0 text-lg font-semibold text-black">
Getting started
</Heading>

<Text className="mb-4 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
1. Join a program
</strong>
: If you haven't already, join an affiliate program, or enroll in
our own{" "}
<Link
href="https://partners.dub.co/programs/dub/apply"
className="font-semibold text-black underline underline-offset-4"
>
Dub Affiliate Program
</Link>{" "}
to earn 30% for every sale you refer.
</Text>

<Text className="mb-4 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
2. Create referral links
</strong>
: Once you've joined a program, you can start sharing and creating
additional referral links.
</Text>

<Text className="mb-4 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
3. Track your performance
</strong>
: Monitor traffic and earnings with real-time analytics
</Text>

<Text className="mb-8 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
4. Set up payouts
</strong>
:{" "}
<Link
href="https://partners.dub.co/settings/payouts"
className="font-semibold text-black underline underline-offset-4"
>
Connect a payout method
</Link>{" "}
to get paid for your referrals.
</Text>

<Section className="mb-8">
<Link
className="rounded-lg bg-black px-6 py-3 text-center text-[12px] font-semibold text-white no-underline"
href="https://partners.dub.co"
>
Go to your dashboard
</Link>
</Section>

<Footer email={email} marketing />
</Container>
</Body>
</Tailwind>
</Html>
);
}

export default WelcomeEmailPartner;
116 changes: 72 additions & 44 deletions packages/email/src/templates/welcome-email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { DUB_THUMBNAIL, DUB_WORDMARK } from "@dub/utils";
import { DUB_WORDMARK } from "@dub/utils";
import {
Body,
Container,
Head,
Heading,
Hr,
Html,
Img,
Link,
Expand Down Expand Up @@ -31,66 +32,93 @@ export function WelcomeEmail({
<Section className="mt-8">
<Img src={DUB_WORDMARK} height="32" alt="Dub" />
</Section>
<Heading className="mx-0 my-7 p-0 text-xl font-medium text-black">
Welcome to Dub
<Heading className="mx-0 my-7 p-0 text-xl font-semibold text-black">
Welcome{name ? ` ${name}` : ""}!
</Heading>
<Section className="my-8">
<Img src={DUB_THUMBNAIL} alt="Dub" className="max-w-[500px]" />
</Section>
<Text className="text-sm leading-6 text-black">
Thanks for signing up{name && `, ${name}`}!
</Text>
<Text className="text-sm leading-6 text-black">
My name is Steven, and I'm the founder of Dub - the modern link
attribution platform for short links, conversion tracking, and
affiliate programs. We're excited to have you on board!
<Text className="mb-8 text-sm leading-6 text-gray-600">
Thank you for signing up for Dub! You can now start creating short
links, track conversions, and explore our API.
</Text>
<Text className="text-sm leading-6 text-black">
Here are a few things you can do:
</Text>
<Text className="ml-1 text-sm leading-4 text-black">
◆ Create a{" "}

<Hr />

<Heading className="mx-0 my-6 p-0 text-lg font-semibold text-black">
Getting started
</Heading>

<Text className="mb-4 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
1. Set up your domain
</strong>
:{" "}
<Link
href="https://app.dub.co?newWorkspace=true"
className="font-medium text-blue-600 no-underline"
href="https://dub.co/help/article/how-to-add-custom-domain"
className="font-semibold text-black underline underline-offset-4"
>
new workspace
Add a custom domain
</Link>{" "}
and{" "}
or{" "}
<Link
href="https://dub.co/help/article/how-to-add-custom-domain"
className="font-medium text-blue-600 no-underline"
href="https://dub.co/help/article/free-dot-link-domain"
className="font-semibold text-black underline underline-offset-4"
>
add your custom domain
</Link>
claim a free .link domain
</Link>{" "}
and start creating your short links.
</Text>
<Text className="ml-1 text-sm leading-4 text-black">
◆ Create your first{" "}

<Text className="mb-4 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
2. View analytics
</strong>
: Monitor{" "}
<Link
href="https://dub.co/help/article/how-to-create-link"
className="font-medium text-blue-600 no-underline"
href="https://dub.co/help/article/dub-analytics"
className="font-semibold text-black underline underline-offset-4"
>
short link
click data
</Link>{" "}
in real time to see what's working.
</Text>

<Text className="mb-4 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
3. Track conversions
</strong>
: Measure how your links convert to signups and sales with our
built-in{" "}
<Link
href="https://dub.co/help/article/dub-conversions"
className="font-semibold text-black underline underline-offset-4"
>
conversion tracking API
</Link>
.
</Text>
<Text className="ml-1 text-sm leading-4 text-black">
◆ Check out our{" "}

<Text className="mb-8 text-sm leading-6 text-gray-600">
<strong className="font-medium text-black">
4. Explore the API
</strong>
:{" "}
<Link
href="https://dub.co/api"
className="font-medium text-blue-600 no-underline"
href="https://dub.co/docs/introduction"
className="font-semibold text-black underline underline-offset-4"
>
API documentation
Check out our docs
</Link>{" "}
for programmatic link generation
</Text>
<Text className="text-sm leading-6 text-black">
Let me know if you have any questions or feedback. I'm always
happy to help!
</Text>
<Text className="text-sm font-light leading-6 text-neutral-400">
Steven from Dub
for programmatic link creation.
</Text>

<Section className="mb-8">
<Link
className="rounded-lg bg-black px-6 py-3 text-center text-[12px] font-semibold text-white no-underline"
href="https://app.dub.co"
>
Go to your dashboard
</Link>
</Section>

<Footer email={email} marketing />
</Container>
</Body>
Expand Down