Add program marketplace announcement template #3180
Conversation
Introduces a new email template for announcing the Dub Program Marketplace. The template includes branding, program details, a call-to-action button, and a footer for notification settings.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughA new React-Email template component is added for a partner marketplace announcement email. The template includes header branding, marketing content sections, and a call-to-action button linking to the marketplace, with the email recipient configurable via props. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/email/src/templates/partner-marketplace-announcement.tsx (2)
70-70: Consider extracting the marketplace URL to a constant.The marketplace URL
"https://partners.dub.co/programs"is repeated on lines 70 and 103. Extracting it to a constant would improve maintainability if the URL changes.Example:
const MARKETPLACE_URL = "https://partners.dub.co/programs";Also applies to: 103-103
124-124: Consider extracting the notification settings URL to a constant.Similar to the marketplace URL, the notification settings URL is hardcoded. Extracting it to a constant would improve maintainability.
Example:
const NOTIFICATION_SETTINGS_URL = "https://partners.dub.co/settings/notifications";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/email/src/templates/partner-marketplace-announcement.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/email/src/templates/partner-marketplace-announcement.tsx (2)
packages/email/src/react-email.d.ts (11)
Html(4-4)Head(5-5)Preview(18-18)Tailwind(19-19)Body(6-6)Container(7-7)Section(8-8)Img(13-13)Heading(16-16)Text(15-15)Link(14-14)packages/ui/src/footer.tsx (1)
Footer(106-344)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (2)
packages/email/src/templates/partner-marketplace-announcement.tsx (2)
74-74: Asset URL is accessible and correctly configured.The GIF asset at
https://assets.dub.co/cms/marketplace-announcement-logo-full-optimize.gifreturns HTTP 200 with the correctcontent-type: image/gifheader. No action required.
15-15: Footer component exists and is properly configured.The Footer component at
../components/footerexists and correctly exports a function that accepts thenotificationSettingsUrl(optional string) props being passed on lines 122-124. No compatibility issues found.
| export default function PartnerMarketplaceAnnouncement({ | ||
| email = "[email protected]", | ||
| }: { | ||
| email: string; | ||
| }) { |
There was a problem hiding this comment.
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.
| 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.
| <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> |
There was a problem hiding this comment.
🛠️ 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.
| <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.
steven-tey
changed the title
Introduces a new email template for announcing the Dub Program Marketplace. The template includes branding, program details, a call-to-action button, and a footer for notification settings.
Like the previous email, added the asset file to payload for initial use before moving to AWS.
Tested on:
CleanShot.2025-12-01.at.15.19.48.mp4
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.