Skip to content

Add program marketplace announcement template #3180

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 1 commit into from
Dec 9, 2025
Merged

Add program marketplace announcement template #3180

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
132 changes: 132 additions & 0 deletions packages/email/src/templates/partner-marketplace-announcement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import { DUB_WORDMARK } from "@dub/utils";
import {
Body,
Container,
Head,
Heading,
Html,
Img,
Link,
Preview,
Section,
Tailwind,
Text,
} from "@react-email/components";
import { Footer } from "../components/footer";

export default function PartnerMarketplaceAnnouncement({
email = "[email protected]",
}: {
email: string;
}) {
Comment on lines +17 to +21
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Make the email prop optional in the type definition.

The email prop has a default value but is typed as required. This creates a type inconsistency where the implementation allows calling the component without the prop, but the type definition suggests it's required.

Apply this diff to align the type with the implementation:

 export default function PartnerMarketplaceAnnouncement({
   email = "[email protected]",
 }: {
-  email: string;
+  email?: string;
 }) {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default function PartnerMarketplaceAnnouncement({
email = "[email protected]",
}: {
email: string;
}) {
export default function PartnerMarketplaceAnnouncement({
email = "[email protected]",
}: {
email?: string;
}) {
🤖 Prompt for AI Agents 
In packages/email/src/templates/partner-marketplace-announcement.tsx around
lines 17 to 21, the component provides a default value for the email prop but
the TS type marks it as required; update the props type so email is optional
(e.g., change email: string to email?: string) so the signature matches the
implementation and callers can omit the prop while the default remains in place.

return (
<Html>
<Head>
<style>{`
@media only screen and (max-width: 600px) {
.email-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
`}</style>
</Head>
<Preview>
Dub Program Marketplace is here – discover and apply for programs inside
Dub.
</Preview>
<Tailwind>
<Body className="mx-auto my-auto bg-white font-sans">
<Container className="email-container mx-auto my-10 max-w-[600px] px-10 py-5">
{/* Header with Dub logo */}
<Section className="mt-2 text-center">
<Img
src={DUB_WORDMARK}
width="65"
height="32"
alt="Dub"
style={{
display: "block",
margin: "0 auto",
}}
/>
</Section>

{/* Main heading */}
<Heading className="mx-0 mb-2 mt-8 p-0 text-center text-2xl font-semibold text-black">
Dub Program Marketplace is here
</Heading>

{/* Subheading */}
<Text className="mb-8 mt-0 text-center text-base leading-6 text-neutral-600">
Discover a new way to browse, discover, and apply for
<br />
many more programs inside Dub.
</Text>

{/* Visual element */}
<Section className="mb-8 text-center">
<Link
href="https://partners.dub.co/programs"
style={{ textDecoration: "none" }}
>
<Img
src="https://assets.dub.co/cms/marketplace-announcement-logo-full-optimize.gif"
width="500"
height="292"
alt="Dub Program Marketplace"
style={{
display: "block",
maxWidth: "100%",
height: "auto",
margin: "0 auto",
}}
/>
</Link>
</Section>

{/* Just the beginning section */}
<Heading className="mx-0 mb-3 mt-0 p-0 text-center text-lg font-semibold text-black">
Just the beginning
</Heading>

{/* Body text */}
<Text className="mx-auto mb-8 mt-0 max-w-[420px] text-center text-sm leading-6 text-neutral-600">
Find programs that fit your audience, compare rewards, and apply
quickly. It is the easiest way to expand your reach and unlock new
earning possibilities.
</Text>

{/* CTA Button */}
<Section className="mb-8 text-center">
<Link
href="https://partners.dub.co/programs"
className="box-border inline-block rounded-lg bg-neutral-900 px-6 py-3 text-center text-sm font-medium text-white no-underline"
style={{
backgroundColor: "#171717",
color: "#ffffff",
borderRadius: "8px",
padding: "12px 24px",
textDecoration: "none",
display: "inline-block",
fontWeight: "500",
fontSize: "14px",
}}
>
Explore the program marketplace
</Link>
Comment on lines +102 to +117
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

Remove duplicate styles from the CTA button.

The Link component has both className with Tailwind classes and inline style attributes that duplicate the same properties (backgroundColor, color, borderRadius, padding, textDecoration, display, fontWeight, fontSize). In email templates, inline styles are preferred for better email client compatibility, making the Tailwind classes redundant.

Apply this diff to keep only the inline styles:

             <Link
               href="https://partners.dub.co/programs"
-              className="box-border inline-block rounded-lg bg-neutral-900 px-6 py-3 text-center text-sm font-medium text-white no-underline"
               style={{
                 backgroundColor: "#171717",
                 color: "#ffffff",
                 borderRadius: "8px",
                 padding: "12px 24px",
                 textDecoration: "none",
                 display: "inline-block",
                 fontWeight: "500",
                 fontSize: "14px",
               }}
             >
               Explore the program marketplace
             </Link>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Link
href="https://partners.dub.co/programs"
className="box-border inline-block rounded-lg bg-neutral-900 px-6 py-3 text-center text-sm font-medium text-white no-underline"
style={{
backgroundColor: "#171717",
color: "#ffffff",
borderRadius: "8px",
padding: "12px 24px",
textDecoration: "none",
display: "inline-block",
fontWeight: "500",
fontSize: "14px",
}}
>
Explore the program marketplace
</Link>
<Link
href="https://partners.dub.co/programs"
style={{
backgroundColor: "#171717",
color: "#ffffff",
borderRadius: "8px",
padding: "12px 24px",
textDecoration: "none",
display: "inline-block",
fontWeight: "500",
fontSize: "14px",
}}
>
Explore the program marketplace
</Link>
🤖 Prompt for AI Agents 
In packages/email/src/templates/partner-marketplace-announcement.tsx around
lines 102 to 117, the CTA Link mixes Tailwind className and inline style
attributes duplicating visual properties; remove the redundant Tailwind classes
from the className (or clear className entirely) and keep the explicit inline
style object only, ensuring the button appearance is defined by the inline
styles for better email client compatibility.

</Section>

{/* Footer */}
<Section className="mx-auto max-w-[400px] text-center">
<Footer
email={email}
notificationSettingsUrl="https://partners.dub.co/settings/notifications"
/>
</Section>
</Container>
</Body>
</Tailwind>
</Html>
);
}