Update partner reward UI with descriptions and helper blocks

[marcusljf]

Summary

Updated partner program reward UI across 4 flows to improve user education and guidance:

• Onboarding and new program creation: Added "Most common" tags, converted payout model to radio cards, dynamic labels
• Group reward empty states: Replaced generic text with descriptive titles
• Reward creation: Added per-event-type dismissible helper blocks with independent persistence

Changes

1. Onboarding reward form: Updated descriptions, "Most common" tags, payout model radio cards
2. New program reward form: Similar updates with custom commission descriptions and page title
3. Group reward empty states: Structured title + description for sale, lead, click rewards
4. Reward creation helper: Per-event-type info blocks with independent localStorage dismissal

All changes are type-safe and follow existing patterns in the codebase.

Summary by CodeRabbit

Release Notes

• New Features

  • Added "Most common" indicators to guide users toward recommended reward configuration options
  • Introduced helpful guidance blocks when creating new rewards

• Style

  • Improved layout and visual organization of reward configuration forms
  • Enhanced descriptions for reward types, commission structures, and payout models
  • Dynamic field labels that update based on selected reward type
  • Updated page title for clarity in reward setup flow

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dub	Ready	Preview	Feb 4, 2026 7:48pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The changes enhance reward configuration across multiple forms and components by introducing semantic constants for descriptions, adding "Most common" indicators for frequently-used options, refactoring UI layouts to wrapped per-item structures with metadata support, and introducing a dismissible helper block during reward creation.

Changes

Cohort / File(s)	Summary
Reward Configuration Forms apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx, apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx	Introduced semantic constants (COMMISSION_STRUCTURE_DESCRIPTIONS, PAYOUT_MODELS) with mostCommon flags; refactored UI from inline mappings to wrapped per-item layouts; added dynamic label text for amount sections; implemented conditional side-effect logic (e.g., selecting "lead" sets type to "flat" and maxDuration to 0).
Rewards Page Title apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/page.tsx	Updated page title from "Configure rewards" to "Create default reward".
Group Rewards Display apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/rewards/group-rewards.tsx	Added REWARD_EVENT_DESCRIPTIONS mapping for event-specific metadata; reworked no-reward display to show title and description in stacked layout instead of plain text.
Reward Sheet Helper apps/web/ui/partners/rewards/add-edit-reward-sheet.tsx	Introduced dismissible RewardHelperBlock component displayed during reward creation with event-specific content (icon, title, description); implemented localStorage-based dismissal persistence per event type.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Exclude partners from default rewards #2516 — Modifies the same rewards form component with amount handling and flat-type transformations.
• Advanced reward logic upsell updates #2697 — Updates add-edit-reward-sheet.tsx with plan-gating and upgrade modal logic.
• Custom reward description configuration #2825 — Modifies add-edit-reward-sheet.tsx to add description editor for reward metadata.

Suggested reviewers

• steven-tey

Poem

🐰 Hop, hop! New rewards take shape,
Constants guide the layout's drape,
Helpers dismiss with a gentle click,
Forms now wrap each option thick,
Most common notes show the way!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes across the pull request: updating partner reward UI by adding descriptions and helper blocks for better user education.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch marcusljf/program-education

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx (1)

284-291: ⚠️ Potential issue | 🟡 Minor

Avoid using selected attribute on <option> in React.

React recommends using defaultValue or value on the <select> element instead of selected on individual <option> elements. Since this select is controlled by react-hook-form via register, the selected attribute is unnecessary and may cause a React warning.

🔧 Proposed fix

                     <option
                       key={duration}
                       value={duration}
-                      selected={duration === 12}
                     >
                       {duration} {duration === 1 ? "month" : "months"}
                     </option>

The form's defaultValues or the useEffect that sets commissionStructure should handle the initial selection.

🧹 Nitpick comments (1)

apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx (1)

136-189: Consider extracting shared radio card component.

The radio card UI pattern (with label, description, CircleCheckFill, and "Most common" indicator) is duplicated across this file and the onboarding form (apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx).

If these forms evolve together, extracting a reusable RadioCard component could reduce duplication and ensure visual consistency. However, this can be deferred if the forms are expected to diverge.