Fix the react email templates preview #3261
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughUpdated email templates with styling and layout adjustments, including removal of flex layout and border styling, refactored conditional rendering logic with index-aware border control, and added a devDependency for React Email preview server. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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). (2)
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 |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (5)
packages/email/package.json(1 hunks)packages/email/src/templates/new-bounty-available.tsx(1 hunks)packages/email/src/templates/new-sale-alert-program-owner.tsx(1 hunks)packages/email/src/templates/partner-program-summary.tsx(2 hunks)packages/email/src/templates/unresolved-fraud-events-summary.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-05-29T04:45:18.504Z
Learnt from: devkiran
Repo: dubinc/dub PR: 2448
File: packages/email/src/templates/partner-program-summary.tsx:0-0
Timestamp: 2025-05-29T04:45:18.504Z
Learning: In the PartnerProgramSummary email template (packages/email/src/templates/partner-program-summary.tsx), the stat titles are hardcoded constants ("Clicks", "Leads", "Sales", "Earnings") that will always match the ICONS object keys after toLowerCase() conversion, so icon lookup failures are not possible.
Applied to files:
packages/email/src/templates/new-sale-alert-program-owner.tsxpackages/email/src/templates/unresolved-fraud-events-summary.tsx
📚 Learning: 2025-12-08T09:44:28.429Z
Learnt from: devkiran
Repo: dubinc/dub PR: 3200
File: apps/web/lib/api/fraud/detect-duplicate-payout-method-fraud.ts:55-73
Timestamp: 2025-12-08T09:44:28.429Z
Learning: In apps/web/lib/api/fraud/detect-duplicate-payout-method-fraud.ts, the fraud event creation logic intentionally generates self-referential fraud events (where partnerId equals duplicatePartnerId) for partners with duplicate payout methods. This is by design to create raw events for all partners involved in a duplicate payout method scenario, regardless of whether they reference themselves.
Applied to files:
packages/email/src/templates/unresolved-fraud-events-summary.tsx
📚 Learning: 2025-12-03T09:19:48.164Z
Learnt from: devkiran
Repo: dubinc/dub PR: 3175
File: apps/web/lib/actions/partners/bulk-reject-partner-applications.ts:14-21
Timestamp: 2025-12-03T09:19:48.164Z
Learning: In apps/web/lib/actions/partners/bulk-reject-partner-applications.ts, the bulkRejectPartnerApplicationsAction does not need explicit plan capability checks for fraud operations (when reportFraud is true) because the authorization is handled automatically by the underlying fraud operation functions (resolveFraudGroups, createFraudEvents) or through other automated mechanisms in the system.
Applied to files:
packages/email/src/templates/unresolved-fraud-events-summary.tsx
🧬 Code graph analysis (3)
packages/email/src/templates/unresolved-fraud-events-summary.tsx (2)
packages/email/src/react-email.d.ts (5)
Row(9-9)Column(10-12)Text(15-15)Img(13-13)Link(14-14)packages/utils/src/constants/misc.ts (1)
OG_AVATAR_URL(29-29)
packages/email/src/templates/new-bounty-available.tsx (1)
packages/email/src/react-email.d.ts (2)
Section(8-8)Text(15-15)
packages/email/src/templates/partner-program-summary.tsx (1)
packages/email/src/react-email.d.ts (2)
Container(7-7)Section(8-8)
⏰ 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 (3)
packages/email/src/templates/new-sale-alert-program-owner.tsx (1)
129-129: LGTM - Border removal improves visual design.The border removal simplifies the price summary section's appearance, which aligns with the overall layout improvements in this PR.
packages/email/src/templates/unresolved-fraud-events-summary.tsx (1)
114-180: Verify the nested table structure across email clients through testing.Testing across multiple email clients (Gmail, Outlook, Apple Mail) is a best practice for email templates. However, react-email components have been tested using the most popular email clients, and the library takes care of inconsistencies between Gmail, Outlook, and other email clients. The displayed nesting depth (Column > Row > Column pattern, approximately 2-3 levels) is well within safe limits—keeping nested tables to 4-6 tables max helps avoid rendering problems, though some older clients like Lotus Notes may render emails poorly with deeply nested tables.
The conditional
isLastItemborder logic and column split percentages are standard email template patterns that render consistently. Proceed with testing as part of your normal QA workflow.packages/email/src/templates/new-bounty-available.tsx (1)
77-87: The Markdown wrapper change from Text to Section is intentional and part of the email preview fix.This change (lines 81-87) replaced a Text element wrapper with a Section element. While this is a structural change in the email HTML, it was deliberately made as part of commit "Fix the react email templates preview" and follows the standard pattern for react-email. All react-email components are tested on the most popular email clients, and Markdown inside Section is an established pattern in react-email examples. The Markdown component itself has independent rendering logic with its own style customization props, so the external wrapper change affects layout structure but not markdown parsing.
Summary by CodeRabbit
Release Notes
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.